@react-spectrum/s2 1.3.1 → 1.4.0

package/dist/private/Image.cjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Image.tsx"],"sourcesContent":["import {ColorSchemeContext} from './Provider';\nimport {ContextValue, SlotProps} from 'react-aria-components/slots';\nimport {createContext, ForwardedRef, forwardRef, HTMLAttributeReferrerPolicy, JSX, ReactNode, useCallback, useContext, useMemo, useReducer, useRef, version} from 'react';\nimport {DefaultImageGroup, ImageGroup} from './ImageCoordinator';\nimport {loadingStyle, useIsSkeleton, useLoadingAnimation} from './Skeleton';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {UnsafeStyles} from './style-utils';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ImageSource {\n  /**\n   * A comma-separated list of image URLs and descriptors.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#srcset).\n   */\n  srcSet?: string | undefined,\n  /**\n   * The color scheme for this image source. Unlike `media`, this respects the `Provider` color scheme setting.\n   */\n  colorScheme?: 'light' | 'dark',\n  /**\n   * A media query describing when the source should render.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#media).\n   */\n  media?: string | undefined,\n  /**\n   * A list of source sizes that describe the final rendered width of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#sizes).\n   */\n  sizes?: string | undefined,\n  /**\n   * The mime type of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#type).\n   */\n  type?: string | undefined,\n  /**\n   * The intrinsic width of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#width).\n   */\n  width?: number,\n  /**\n   * The intrinsic height of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#height).\n   */\n  height?: number\n}\n\nexport interface ImageProps extends UnsafeStyles, SlotProps {\n  /** The URL of the image or a list of conditional sources. */\n  src?: string | ImageSource[],\n  // TODO\n  // srcSet?: string,\n  // sizes?: string,\n  /** Accessible alt text for the image. */\n  alt?: string,\n  /**\n   * Indicates if the fetching of the image must be done using a CORS request.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin).\n   */\n  crossOrigin?: 'anonymous' | 'use-credentials',\n  /**\n   * Whether the browser should decode images synchronously or asynchronously.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#decoding).\n   */\n  decoding?: 'async' | 'auto' | 'sync',\n  /**\n   * Provides a hint of the relative priority to use when fetching the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#fetchpriority).\n   */\n  fetchPriority?: 'high' | 'low' | 'auto',\n  /**\n   * Whether the image should be loaded immediately or lazily when scrolled into view.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).\n   */\n  loading?: 'eager' | 'lazy',\n  /**\n   * A string indicating which referrer to use when fetching the resource.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy).\n   */\n  referrerPolicy?: HTMLAttributeReferrerPolicy,\n  /**\n   * The intrinsic width of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#width).\n   */\n  width?: number,\n  /**\n   * The intrinsic height of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#height).\n   */\n  height?: number,\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StyleString,\n  /** A function that is called to render a fallback when the image fails to load. */\n  renderError?: () => ReactNode,\n  /**\n   * A group of images to coordinate between, matching the group passed to the `<ImageCoordinator>` component.\n   * If not provided, the default image group is used.\n   */\n  group?: ImageGroup,\n  /**\n   * Associates the image with a microdata object.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/itemprop).\n   */\n  itemProp?: string\n}\n\ninterface ImageContextValue extends ImageProps {\n  hidden?: boolean\n}\n\nexport const ImageContext = createContext<ContextValue<Partial<ImageContextValue>, HTMLDivElement>>(null);\n\ntype ImageState = 'loading' | 'loaded' | 'revealed' | 'error';\ninterface State {\n  state: ImageState,\n  src: string,\n  startTime: number,\n  loadTime: number\n}\n\ntype Action = \n  | {type: 'update', src: string}\n  | {type: 'loaded'}\n  | {type: 'revealed'}\n  | {type: 'error'};\n\nfunction createState(src: string): State {\n  return {\n    state: 'loading',\n    src,\n    startTime: Date.now(),\n    loadTime: 0\n  };\n}\n\nfunction reducer(state: State, action: Action): State {\n  switch (action.type) {\n    case 'update': {\n      return {\n        state: 'loading',\n        src: action.src,\n        startTime: Date.now(),\n        loadTime: 0\n      };\n    }\n    case 'loaded':\n    case 'error': {\n      return {\n        ...state,\n        state: action.type\n      };\n    }\n    case 'revealed': {\n      return {\n        ...state,\n        state: 'revealed',\n        loadTime: Date.now() - state.startTime\n      };\n    }\n    default:\n      return state;\n  }\n}\n\nconst wrapperStyles = style({\n  backgroundColor: 'gray-100',\n  overflow: 'hidden'\n});\n\nconst imgStyles = style({\n  display: 'block',\n  width: 'full',\n  height: 'full',\n  objectFit: 'inherit',\n  objectPosition: 'inherit',\n  opacity: {\n    default: 0,\n    isRevealed: 1\n  },\n  transition: {\n    default: 'none',\n    isTransitioning: 'opacity'\n  },\n  transitionDuration: 500\n});\n\n/**\n * An image with support for skeleton loading and custom error states.\n */\nexport const Image = forwardRef(function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>): JSX.Element | null {\n  [props, domRef] = useSpectrumContextProps(props, domRef, ImageContext);\n\n  let {\n    src: srcProp = '',\n    styles,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    renderError,\n    group = DefaultImageGroup,\n    // TODO\n    // srcSet,\n    // sizes,\n    alt,\n    crossOrigin,\n    decoding,\n    fetchPriority,\n    loading,\n    referrerPolicy,\n    slot,\n    width,\n    height,\n    itemProp\n  } = props;\n  let hidden = (props as ImageContextValue).hidden;\n  let colorScheme = useContext(ColorSchemeContext);\n  let cacheKey = useMemo(() => typeof srcProp === 'object' ? JSON.stringify(srcProp) : srcProp, [srcProp]);\n  \n  let {revealAll, register, unregister, load} = useContext(group);\n  let [{state, src: lastCacheKey, loadTime}, dispatch] = useReducer(reducer, cacheKey, createState);\n\n  if (cacheKey !== lastCacheKey && !hidden) {\n    dispatch({type: 'update', src: cacheKey});\n  }\n\n  if (state === 'loaded' && revealAll && !hidden) {\n    dispatch({type: 'revealed'});\n  }\n\n  let imgRef = useRef<HTMLImageElement | null>(null);\n  useLayoutEffect(() => {\n    if (hidden) {\n      return;\n    }\n\n    register(cacheKey);\n    return () => {\n      unregister(cacheKey);\n    };\n  }, [hidden, register, unregister, cacheKey]);\n\n  let onLoad = useCallback(() => {\n    load(cacheKey);\n    dispatch({type: 'loaded'});\n  }, [load, cacheKey]);\n\n  let onError = useCallback(() => {\n    dispatch({type: 'error'});\n    unregister(cacheKey);\n  }, [unregister, cacheKey]);\n\n  let isSkeleton = useIsSkeleton();\n  let isAnimating = isSkeleton || state === 'loading' || state === 'loaded';\n  let animation = useLoadingAnimation(isAnimating);\n  useLayoutEffect(() => {\n    if (hidden) {\n      return;\n    }\n\n    // In React act environments, run immediately.\n    // @ts-ignore\n    let isTestEnv = typeof IS_REACT_ACT_ENVIRONMENT === 'boolean' ? IS_REACT_ACT_ENVIRONMENT : typeof jest !== 'undefined';\n    let runTask = isTestEnv ? fn => fn() : queueMicrotask;\n\n    // If the image is already loaded, update state immediately instead of waiting for onLoad.\n    let img = imgRef.current;\n    if (state === 'loading' && img?.complete) {\n      if (img.naturalWidth === 0 && img.naturalHeight === 0) {\n        // Queue a microtask so we don't hit React's update limit.\n        // TODO: is this necessary?\n        runTask(onError);\n      } else {\n        runTask(onLoad);\n      }\n    }\n\n    animation(domRef.current);\n  });\n\n  if (props.alt == null && process.env.NODE_ENV !== 'production') {\n    console.warn(\n      'The `alt` prop was not provided to an image. ' +\n      'Add `alt` text for screen readers, or set `alt=\"\"` prop to indicate that the image ' +\n      'is decorative or redundant with displayed text and should not be announced by screen readers.'\n    );\n  }\n\n  let errorState = !isSkeleton && state === 'error' && renderError?.();\n  let isRevealed = state === 'revealed' && !isSkeleton;\n  let isTransitioning = isRevealed && loadTime > 200;\n  return useMemo(() => {\n    let img = (\n      <img\n        {...getFetchPriorityProp(fetchPriority)}\n        src={typeof srcProp === 'string' && srcProp ? srcProp : undefined}\n        alt={alt}\n        crossOrigin={crossOrigin}\n        decoding={decoding}\n        loading={loading}\n        referrerPolicy={referrerPolicy}\n        width={width}\n        height={height}\n        ref={imgRef}\n        itemProp={itemProp}\n        onLoad={onLoad}\n        onError={onError}\n        className={imgStyles({isRevealed, isTransitioning})} />\n    );\n\n    if (Array.isArray(srcProp)) {\n      img = (\n        <picture className={style({objectFit: 'inherit', objectPosition: 'inherit'})}>\n          {srcProp.map((source, i) => {\n            let {colorScheme: sourceColorScheme, ...sourceProps} = source;\n            if (sourceColorScheme) {\n              if (!colorScheme || colorScheme === 'light dark') {\n                return (\n                  <source\n                    key={i}\n                    {...sourceProps}\n                    media={`${source.media ? `${source.media} and ` : ''}(prefers-color-scheme: ${sourceColorScheme})`} />\n                );\n              }\n\n              return sourceColorScheme === colorScheme\n                ? <source key={i} {...sourceProps} />\n                : null;\n            } else {\n              return <source key={i} {...sourceProps} />;\n            }\n          })}\n          {img}\n        </picture>\n      );\n    }\n\n    return hidden ? null : (\n      <div\n        ref={domRef}\n        slot={slot || undefined}\n        style={UNSAFE_style}\n        className={UNSAFE_className + mergeStyles(wrapperStyles, styles) + ' '  + (isAnimating ? loadingStyle : '')}>\n        {errorState}\n        {!errorState && img}\n      </div>\n    );\n  }, [slot, hidden, domRef, UNSAFE_style, UNSAFE_className, styles, isAnimating, errorState, alt, crossOrigin, decoding, fetchPriority, loading, referrerPolicy, width, height, onLoad, onError, isRevealed, isTransitioning, srcProp, itemProp, colorScheme]);\n});\n\nfunction getFetchPriorityProp(fetchPriority?: 'high' | 'low' | 'auto'): Record<string, string | undefined> {\n  const pieces = version.split('.');\n  const major = parseInt(pieces[0], 10);\n  if (major >= 19) {\n    return {fetchPriority};\n  }\n  return {fetchpriority: fetchPriority};\n}\n"],"names":[],"version":3,"file":"Image.cjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Image.tsx"],"sourcesContent":["import {ColorSchemeContext} from './Provider';\nimport {ContextValue, SlotProps} from 'react-aria-components/slots';\nimport {\n  createContext,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributeReferrerPolicy,\n  JSX,\n  ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n  useReducer,\n  useRef,\n  version\n} from 'react';\nimport {DefaultImageGroup, ImageGroup} from './ImageCoordinator';\nimport {loadingStyle, useIsSkeleton, useLoadingAnimation} from './Skeleton';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {UnsafeStyles} from './style-utils';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ImageSource {\n  /**\n   * A comma-separated list of image URLs and descriptors.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#srcset).\n   */\n  srcSet?: string | undefined;\n  /**\n   * The color scheme for this image source. Unlike `media`, this respects the `Provider` color\n   * scheme setting.\n   */\n  colorScheme?: 'light' | 'dark';\n  /**\n   * A media query describing when the source should render.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#media).\n   */\n  media?: string | undefined;\n  /**\n   * A list of source sizes that describe the final rendered width of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#sizes).\n   */\n  sizes?: string | undefined;\n  /**\n   * The mime type of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#type).\n   */\n  type?: string | undefined;\n  /**\n   * The intrinsic width of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#width).\n   */\n  width?: number;\n  /**\n   * The intrinsic height of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#height).\n   */\n  height?: number;\n}\n\nexport interface ImageProps extends UnsafeStyles, SlotProps {\n  /** The URL of the image or a list of conditional sources. */\n  src?: string | ImageSource[];\n  // TODO\n  // srcSet?: string,\n  // sizes?: string,\n  /** Accessible alt text for the image. */\n  alt?: string;\n  /**\n   * Indicates if the fetching of the image must be done using a CORS request.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin).\n   */\n  crossOrigin?: 'anonymous' | 'use-credentials';\n  /**\n   * Whether the browser should decode images synchronously or asynchronously.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#decoding).\n   */\n  decoding?: 'async' | 'auto' | 'sync';\n  /**\n   * Provides a hint of the relative priority to use when fetching the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#fetchpriority).\n   */\n  fetchPriority?: 'high' | 'low' | 'auto';\n  /**\n   * Whether the image should be loaded immediately or lazily when scrolled into view.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).\n   */\n  loading?: 'eager' | 'lazy';\n  /**\n   * A string indicating which referrer to use when fetching the resource.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy).\n   */\n  referrerPolicy?: HTMLAttributeReferrerPolicy;\n  /**\n   * The intrinsic width of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#width).\n   */\n  width?: number;\n  /**\n   * The intrinsic height of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#height).\n   */\n  height?: number;\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StyleString;\n  /** A function that is called to render a fallback when the image fails to load. */\n  renderError?: () => ReactNode;\n  /**\n   * A group of images to coordinate between, matching the group passed to the `<ImageCoordinator>`\n   * component. If not provided, the default image group is used.\n   */\n  group?: ImageGroup;\n  /**\n   * Associates the image with a microdata object. See\n   * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/itemprop).\n   */\n  itemProp?: string;\n}\n\ninterface ImageContextValue extends ImageProps {\n  hidden?: boolean;\n}\n\nexport const ImageContext =\n  createContext<ContextValue<Partial<ImageContextValue>, HTMLDivElement>>(null);\n\ntype ImageState = 'loading' | 'loaded' | 'revealed' | 'error';\ninterface State {\n  state: ImageState;\n  src: string;\n  startTime: number;\n  loadTime: number;\n}\n\ntype Action =\n  | {type: 'update'; src: string}\n  | {type: 'loaded'}\n  | {type: 'revealed'}\n  | {type: 'error'};\n\nfunction createState(src: string): State {\n  return {\n    state: 'loading',\n    src,\n    startTime: Date.now(),\n    loadTime: 0\n  };\n}\n\nfunction reducer(state: State, action: Action): State {\n  switch (action.type) {\n    case 'update': {\n      return {\n        state: 'loading',\n        src: action.src,\n        startTime: Date.now(),\n        loadTime: 0\n      };\n    }\n    case 'loaded':\n    case 'error': {\n      return {\n        ...state,\n        state: action.type\n      };\n    }\n    case 'revealed': {\n      return {\n        ...state,\n        state: 'revealed',\n        loadTime: Date.now() - state.startTime\n      };\n    }\n    default:\n      return state;\n  }\n}\n\nconst wrapperStyles = style({\n  backgroundColor: 'gray-100',\n  overflow: 'hidden'\n});\n\nconst imgStyles = style({\n  display: 'block',\n  width: 'full',\n  height: 'full',\n  objectFit: 'inherit',\n  objectPosition: 'inherit',\n  opacity: {\n    default: 0,\n    isRevealed: 1\n  },\n  transition: {\n    default: 'none',\n    isTransitioning: 'opacity'\n  },\n  transitionDuration: 500\n});\n\n/**\n * An image with support for skeleton loading and custom error states.\n */\nexport const Image = forwardRef(function Image(\n  props: ImageProps,\n  domRef: ForwardedRef<HTMLDivElement>\n): JSX.Element | null {\n  [props, domRef] = useSpectrumContextProps(props, domRef, ImageContext);\n\n  let {\n    src: srcProp = '',\n    styles,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    renderError,\n    group = DefaultImageGroup,\n    // TODO\n    // srcSet,\n    // sizes,\n    alt,\n    crossOrigin,\n    decoding,\n    fetchPriority,\n    loading,\n    referrerPolicy,\n    slot,\n    width,\n    height,\n    itemProp\n  } = props;\n  let hidden = (props as ImageContextValue).hidden;\n  let colorScheme = useContext(ColorSchemeContext);\n  let cacheKey = useMemo(\n    () => (typeof srcProp === 'object' ? JSON.stringify(srcProp) : srcProp),\n    [srcProp]\n  );\n\n  let {revealAll, register, unregister, load} = useContext(group);\n  let [{state, src: lastCacheKey, loadTime}, dispatch] = useReducer(reducer, cacheKey, createState);\n\n  if (cacheKey !== lastCacheKey && !hidden) {\n    dispatch({type: 'update', src: cacheKey});\n  }\n\n  if (state === 'loaded' && revealAll && !hidden) {\n    dispatch({type: 'revealed'});\n  }\n\n  let imgRef = useRef<HTMLImageElement | null>(null);\n  useLayoutEffect(() => {\n    if (hidden) {\n      return;\n    }\n\n    register(cacheKey);\n    return () => {\n      unregister(cacheKey);\n    };\n  }, [hidden, register, unregister, cacheKey]);\n\n  let onLoad = useCallback(() => {\n    load(cacheKey);\n    dispatch({type: 'loaded'});\n  }, [load, cacheKey]);\n\n  let onError = useCallback(() => {\n    dispatch({type: 'error'});\n    unregister(cacheKey);\n  }, [unregister, cacheKey]);\n\n  let isSkeleton = useIsSkeleton();\n  let isAnimating = isSkeleton || state === 'loading' || state === 'loaded';\n  let animation = useLoadingAnimation(isAnimating);\n  useLayoutEffect(() => {\n    if (hidden) {\n      return;\n    }\n\n    // In React act environments, run immediately.\n    let isTestEnv =\n      // @ts-ignore\n      typeof IS_REACT_ACT_ENVIRONMENT === 'boolean'\n        ? // @ts-ignore\n          IS_REACT_ACT_ENVIRONMENT\n        : typeof jest !== 'undefined';\n    let runTask = isTestEnv ? fn => fn() : queueMicrotask;\n\n    // If the image is already loaded, update state immediately instead of waiting for onLoad.\n    let img = imgRef.current;\n    if (state === 'loading' && img?.complete) {\n      if (img.naturalWidth === 0 && img.naturalHeight === 0) {\n        // Queue a microtask so we don't hit React's update limit.\n        // TODO: is this necessary?\n        runTask(onError);\n      } else {\n        runTask(onLoad);\n      }\n    }\n\n    animation(domRef.current);\n  });\n\n  if (props.alt == null && process.env.NODE_ENV !== 'production') {\n    console.warn(\n      'The `alt` prop was not provided to an image. ' +\n        'Add `alt` text for screen readers, or set `alt=\"\"` prop to indicate that the image ' +\n        'is decorative or redundant with displayed text and should not be announced by screen readers.'\n    );\n  }\n\n  let errorState = !isSkeleton && state === 'error' && renderError?.();\n  let isRevealed = state === 'revealed' && !isSkeleton;\n  let isTransitioning = isRevealed && loadTime > 200;\n  return useMemo(() => {\n    let img = (\n      <img\n        {...getFetchPriorityProp(fetchPriority)}\n        src={typeof srcProp === 'string' && srcProp ? srcProp : undefined}\n        alt={alt}\n        crossOrigin={crossOrigin}\n        decoding={decoding}\n        loading={loading}\n        referrerPolicy={referrerPolicy}\n        width={width}\n        height={height}\n        ref={imgRef}\n        itemProp={itemProp}\n        onLoad={onLoad}\n        onError={onError}\n        className={imgStyles({isRevealed, isTransitioning})}\n      />\n    );\n\n    if (Array.isArray(srcProp)) {\n      img = (\n        <picture className={style({objectFit: 'inherit', objectPosition: 'inherit'})}>\n          {srcProp.map((source, i) => {\n            let {colorScheme: sourceColorScheme, ...sourceProps} = source;\n            if (sourceColorScheme) {\n              if (!colorScheme || colorScheme === 'light dark') {\n                return (\n                  <source\n                    key={i}\n                    {...sourceProps}\n                    media={`${source.media ? `${source.media} and ` : ''}(prefers-color-scheme: ${sourceColorScheme})`}\n                  />\n                );\n              }\n\n              return sourceColorScheme === colorScheme ? <source key={i} {...sourceProps} /> : null;\n            } else {\n              return <source key={i} {...sourceProps} />;\n            }\n          })}\n          {img}\n        </picture>\n      );\n    }\n\n    return hidden ? null : (\n      <div\n        ref={domRef}\n        slot={slot || undefined}\n        style={UNSAFE_style}\n        className={\n          UNSAFE_className +\n          mergeStyles(wrapperStyles, styles) +\n          ' ' +\n          (isAnimating ? loadingStyle : '')\n        }>\n        {errorState}\n        {!errorState && img}\n      </div>\n    );\n  }, [\n    slot,\n    hidden,\n    domRef,\n    UNSAFE_style,\n    UNSAFE_className,\n    styles,\n    isAnimating,\n    errorState,\n    alt,\n    crossOrigin,\n    decoding,\n    fetchPriority,\n    loading,\n    referrerPolicy,\n    width,\n    height,\n    onLoad,\n    onError,\n    isRevealed,\n    isTransitioning,\n    srcProp,\n    itemProp,\n    colorScheme\n  ]);\n});\n\nfunction getFetchPriorityProp(\n  fetchPriority?: 'high' | 'low' | 'auto'\n): Record<string, string | undefined> {\n  const pieces = version.split('.');\n  const major = parseInt(pieces[0], 10);\n  if (major >= 19) {\n    return {fetchPriority};\n  }\n  return {fetchpriority: fetchPriority};\n}\n"],"names":[],"version":3,"file":"Image.cjs.map"}

package/dist/private/Image.css

@@ -1,57 +1,57 @@
 @layer _.a {
-  .gH13 {
+  .gH131 {
     background-color: light-dark(#e9e9e9, #2c2c2c);
   }
 
-  ._Nc13 {
+  ._Nc131 {
     overflow-x: hidden;
   }
 
-  .Pc13 {
+  .Pc131 {
     overflow-y: hidden;
   }
 
-  .sb13 {
+  .sb131 {
     display: block;
   }
 
-  .Za13 {
+  .Za131 {
     width: 100%;
   }
 
-  .Fb13 {
+  .Fb131 {
     height: 100%;
   }
 
-  ._Ia13 {
+  ._Ia131 {
     opacity: 0;
   }
 
-  ._Ib13 {
+  ._Ib131 {
     opacity: 1;
   }
 
-  .Ye13 {
+  .Ye131 {
     transition-property: none;
   }
 
-  .Yf13 {
+  .Yf131 {
     transition-property: opacity;
   }
 
-  .Xe13 {
+  .Xe131 {
     transition-duration: .5s;
   }
 
-  ._2b13 {
+  ._2b131 {
     transition-timing-function: cubic-bezier(.45, 0, .4, 1);
   }
 
-  ._H40ub4c13 {
+  ._H40ub4c131 {
     object-fit: inherit;
   }
 
-  .__D40ub4c13 {
+  .__D40ub4c131 {
     object-position: inherit;
   }
 }

package/dist/private/Image.css.map

@@ -1 +1 @@
-{"mappings":"ACsKsB;EAAA;;;;EAAA;;;;EAAA;;;;EAKJ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6IU;;;;EAAA","sources":["a1371b57e9afeb00","packages/@react-spectrum/s2/src/Image.tsx"],"sourcesContent":["@import \"be7e52eb05f9e81c\";\n@import \"b32b10d1bd9c4a50\";\n@import \"0e039ca03c56f78b\";\n","import {ColorSchemeContext} from './Provider';\nimport {ContextValue, SlotProps} from 'react-aria-components/slots';\nimport {createContext, ForwardedRef, forwardRef, HTMLAttributeReferrerPolicy, JSX, ReactNode, useCallback, useContext, useMemo, useReducer, useRef, version} from 'react';\nimport {DefaultImageGroup, ImageGroup} from './ImageCoordinator';\nimport {loadingStyle, useIsSkeleton, useLoadingAnimation} from './Skeleton';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {UnsafeStyles} from './style-utils';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ImageSource {\n  /**\n   * A comma-separated list of image URLs and descriptors.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#srcset).\n   */\n  srcSet?: string | undefined,\n  /**\n   * The color scheme for this image source. Unlike `media`, this respects the `Provider` color scheme setting.\n   */\n  colorScheme?: 'light' | 'dark',\n  /**\n   * A media query describing when the source should render.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#media).\n   */\n  media?: string | undefined,\n  /**\n   * A list of source sizes that describe the final rendered width of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#sizes).\n   */\n  sizes?: string | undefined,\n  /**\n   * The mime type of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#type).\n   */\n  type?: string | undefined,\n  /**\n   * The intrinsic width of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#width).\n   */\n  width?: number,\n  /**\n   * The intrinsic height of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#height).\n   */\n  height?: number\n}\n\nexport interface ImageProps extends UnsafeStyles, SlotProps {\n  /** The URL of the image or a list of conditional sources. */\n  src?: string | ImageSource[],\n  // TODO\n  // srcSet?: string,\n  // sizes?: string,\n  /** Accessible alt text for the image. */\n  alt?: string,\n  /**\n   * Indicates if the fetching of the image must be done using a CORS request.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin).\n   */\n  crossOrigin?: 'anonymous' | 'use-credentials',\n  /**\n   * Whether the browser should decode images synchronously or asynchronously.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#decoding).\n   */\n  decoding?: 'async' | 'auto' | 'sync',\n  /**\n   * Provides a hint of the relative priority to use when fetching the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#fetchpriority).\n   */\n  fetchPriority?: 'high' | 'low' | 'auto',\n  /**\n   * Whether the image should be loaded immediately or lazily when scrolled into view.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).\n   */\n  loading?: 'eager' | 'lazy',\n  /**\n   * A string indicating which referrer to use when fetching the resource.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy).\n   */\n  referrerPolicy?: HTMLAttributeReferrerPolicy,\n  /**\n   * The intrinsic width of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#width).\n   */\n  width?: number,\n  /**\n   * The intrinsic height of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#height).\n   */\n  height?: number,\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StyleString,\n  /** A function that is called to render a fallback when the image fails to load. */\n  renderError?: () => ReactNode,\n  /**\n   * A group of images to coordinate between, matching the group passed to the `<ImageCoordinator>` component.\n   * If not provided, the default image group is used.\n   */\n  group?: ImageGroup,\n  /**\n   * Associates the image with a microdata object.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/itemprop).\n   */\n  itemProp?: string\n}\n\ninterface ImageContextValue extends ImageProps {\n  hidden?: boolean\n}\n\nexport const ImageContext = createContext<ContextValue<Partial<ImageContextValue>, HTMLDivElement>>(null);\n\ntype ImageState = 'loading' | 'loaded' | 'revealed' | 'error';\ninterface State {\n  state: ImageState,\n  src: string,\n  startTime: number,\n  loadTime: number\n}\n\ntype Action = \n  | {type: 'update', src: string}\n  | {type: 'loaded'}\n  | {type: 'revealed'}\n  | {type: 'error'};\n\nfunction createState(src: string): State {\n  return {\n    state: 'loading',\n    src,\n    startTime: Date.now(),\n    loadTime: 0\n  };\n}\n\nfunction reducer(state: State, action: Action): State {\n  switch (action.type) {\n    case 'update': {\n      return {\n        state: 'loading',\n        src: action.src,\n        startTime: Date.now(),\n        loadTime: 0\n      };\n    }\n    case 'loaded':\n    case 'error': {\n      return {\n        ...state,\n        state: action.type\n      };\n    }\n    case 'revealed': {\n      return {\n        ...state,\n        state: 'revealed',\n        loadTime: Date.now() - state.startTime\n      };\n    }\n    default:\n      return state;\n  }\n}\n\nconst wrapperStyles = style({\n  backgroundColor: 'gray-100',\n  overflow: 'hidden'\n});\n\nconst imgStyles = style({\n  display: 'block',\n  width: 'full',\n  height: 'full',\n  objectFit: 'inherit',\n  objectPosition: 'inherit',\n  opacity: {\n    default: 0,\n    isRevealed: 1\n  },\n  transition: {\n    default: 'none',\n    isTransitioning: 'opacity'\n  },\n  transitionDuration: 500\n});\n\n/**\n * An image with support for skeleton loading and custom error states.\n */\nexport const Image = forwardRef(function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>): JSX.Element | null {\n  [props, domRef] = useSpectrumContextProps(props, domRef, ImageContext);\n\n  let {\n    src: srcProp = '',\n    styles,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    renderError,\n    group = DefaultImageGroup,\n    // TODO\n    // srcSet,\n    // sizes,\n    alt,\n    crossOrigin,\n    decoding,\n    fetchPriority,\n    loading,\n    referrerPolicy,\n    slot,\n    width,\n    height,\n    itemProp\n  } = props;\n  let hidden = (props as ImageContextValue).hidden;\n  let colorScheme = useContext(ColorSchemeContext);\n  let cacheKey = useMemo(() => typeof srcProp === 'object' ? JSON.stringify(srcProp) : srcProp, [srcProp]);\n  \n  let {revealAll, register, unregister, load} = useContext(group);\n  let [{state, src: lastCacheKey, loadTime}, dispatch] = useReducer(reducer, cacheKey, createState);\n\n  if (cacheKey !== lastCacheKey && !hidden) {\n    dispatch({type: 'update', src: cacheKey});\n  }\n\n  if (state === 'loaded' && revealAll && !hidden) {\n    dispatch({type: 'revealed'});\n  }\n\n  let imgRef = useRef<HTMLImageElement | null>(null);\n  useLayoutEffect(() => {\n    if (hidden) {\n      return;\n    }\n\n    register(cacheKey);\n    return () => {\n      unregister(cacheKey);\n    };\n  }, [hidden, register, unregister, cacheKey]);\n\n  let onLoad = useCallback(() => {\n    load(cacheKey);\n    dispatch({type: 'loaded'});\n  }, [load, cacheKey]);\n\n  let onError = useCallback(() => {\n    dispatch({type: 'error'});\n    unregister(cacheKey);\n  }, [unregister, cacheKey]);\n\n  let isSkeleton = useIsSkeleton();\n  let isAnimating = isSkeleton || state === 'loading' || state === 'loaded';\n  let animation = useLoadingAnimation(isAnimating);\n  useLayoutEffect(() => {\n    if (hidden) {\n      return;\n    }\n\n    // In React act environments, run immediately.\n    // @ts-ignore\n    let isTestEnv = typeof IS_REACT_ACT_ENVIRONMENT === 'boolean' ? IS_REACT_ACT_ENVIRONMENT : typeof jest !== 'undefined';\n    let runTask = isTestEnv ? fn => fn() : queueMicrotask;\n\n    // If the image is already loaded, update state immediately instead of waiting for onLoad.\n    let img = imgRef.current;\n    if (state === 'loading' && img?.complete) {\n      if (img.naturalWidth === 0 && img.naturalHeight === 0) {\n        // Queue a microtask so we don't hit React's update limit.\n        // TODO: is this necessary?\n        runTask(onError);\n      } else {\n        runTask(onLoad);\n      }\n    }\n\n    animation(domRef.current);\n  });\n\n  if (props.alt == null && process.env.NODE_ENV !== 'production') {\n    console.warn(\n      'The `alt` prop was not provided to an image. ' +\n      'Add `alt` text for screen readers, or set `alt=\"\"` prop to indicate that the image ' +\n      'is decorative or redundant with displayed text and should not be announced by screen readers.'\n    );\n  }\n\n  let errorState = !isSkeleton && state === 'error' && renderError?.();\n  let isRevealed = state === 'revealed' && !isSkeleton;\n  let isTransitioning = isRevealed && loadTime > 200;\n  return useMemo(() => {\n    let img = (\n      <img\n        {...getFetchPriorityProp(fetchPriority)}\n        src={typeof srcProp === 'string' && srcProp ? srcProp : undefined}\n        alt={alt}\n        crossOrigin={crossOrigin}\n        decoding={decoding}\n        loading={loading}\n        referrerPolicy={referrerPolicy}\n        width={width}\n        height={height}\n        ref={imgRef}\n        itemProp={itemProp}\n        onLoad={onLoad}\n        onError={onError}\n        className={imgStyles({isRevealed, isTransitioning})} />\n    );\n\n    if (Array.isArray(srcProp)) {\n      img = (\n        <picture className={style({objectFit: 'inherit', objectPosition: 'inherit'})}>\n          {srcProp.map((source, i) => {\n            let {colorScheme: sourceColorScheme, ...sourceProps} = source;\n            if (sourceColorScheme) {\n              if (!colorScheme || colorScheme === 'light dark') {\n                return (\n                  <source\n                    key={i}\n                    {...sourceProps}\n                    media={`${source.media ? `${source.media} and ` : ''}(prefers-color-scheme: ${sourceColorScheme})`} />\n                );\n              }\n\n              return sourceColorScheme === colorScheme\n                ? <source key={i} {...sourceProps} />\n                : null;\n            } else {\n              return <source key={i} {...sourceProps} />;\n            }\n          })}\n          {img}\n        </picture>\n      );\n    }\n\n    return hidden ? null : (\n      <div\n        ref={domRef}\n        slot={slot || undefined}\n        style={UNSAFE_style}\n        className={UNSAFE_className + mergeStyles(wrapperStyles, styles) + ' '  + (isAnimating ? loadingStyle : '')}>\n        {errorState}\n        {!errorState && img}\n      </div>\n    );\n  }, [slot, hidden, domRef, UNSAFE_style, UNSAFE_className, styles, isAnimating, errorState, alt, crossOrigin, decoding, fetchPriority, loading, referrerPolicy, width, height, onLoad, onError, isRevealed, isTransitioning, srcProp, itemProp, colorScheme]);\n});\n\nfunction getFetchPriorityProp(fetchPriority?: 'high' | 'low' | 'auto'): Record<string, string | undefined> {\n  const pieces = version.split('.');\n  const major = parseInt(pieces[0], 10);\n  if (major >= 19) {\n    return {fetchPriority};\n  }\n  return {fetchpriority: fetchPriority};\n}\n"],"names":[],"version":3,"file":"Image.css.map"}
+{"mappings":"ACqLsB;EAAA;;;;EAAA;;;;EAAA;;;;EAKJ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAwJU;;;;EAAA","sources":["a1371b57e9afeb00","packages/@react-spectrum/s2/src/Image.tsx"],"sourcesContent":["@import \"be7e52eb05f9e81c\";\n@import \"b32b10d1bd9c4a50\";\n@import \"0e039ca03c56f78b\";\n","import {ColorSchemeContext} from './Provider';\nimport {ContextValue, SlotProps} from 'react-aria-components/slots';\nimport {\n  createContext,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributeReferrerPolicy,\n  JSX,\n  ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n  useReducer,\n  useRef,\n  version\n} from 'react';\nimport {DefaultImageGroup, ImageGroup} from './ImageCoordinator';\nimport {loadingStyle, useIsSkeleton, useLoadingAnimation} from './Skeleton';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {UnsafeStyles} from './style-utils';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ImageSource {\n  /**\n   * A comma-separated list of image URLs and descriptors.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#srcset).\n   */\n  srcSet?: string | undefined;\n  /**\n   * The color scheme for this image source. Unlike `media`, this respects the `Provider` color\n   * scheme setting.\n   */\n  colorScheme?: 'light' | 'dark';\n  /**\n   * A media query describing when the source should render.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#media).\n   */\n  media?: string | undefined;\n  /**\n   * A list of source sizes that describe the final rendered width of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#sizes).\n   */\n  sizes?: string | undefined;\n  /**\n   * The mime type of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#type).\n   */\n  type?: string | undefined;\n  /**\n   * The intrinsic width of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#width).\n   */\n  width?: number;\n  /**\n   * The intrinsic height of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#height).\n   */\n  height?: number;\n}\n\nexport interface ImageProps extends UnsafeStyles, SlotProps {\n  /** The URL of the image or a list of conditional sources. */\n  src?: string | ImageSource[];\n  // TODO\n  // srcSet?: string,\n  // sizes?: string,\n  /** Accessible alt text for the image. */\n  alt?: string;\n  /**\n   * Indicates if the fetching of the image must be done using a CORS request.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin).\n   */\n  crossOrigin?: 'anonymous' | 'use-credentials';\n  /**\n   * Whether the browser should decode images synchronously or asynchronously.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#decoding).\n   */\n  decoding?: 'async' | 'auto' | 'sync';\n  /**\n   * Provides a hint of the relative priority to use when fetching the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#fetchpriority).\n   */\n  fetchPriority?: 'high' | 'low' | 'auto';\n  /**\n   * Whether the image should be loaded immediately or lazily when scrolled into view.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).\n   */\n  loading?: 'eager' | 'lazy';\n  /**\n   * A string indicating which referrer to use when fetching the resource.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy).\n   */\n  referrerPolicy?: HTMLAttributeReferrerPolicy;\n  /**\n   * The intrinsic width of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#width).\n   */\n  width?: number;\n  /**\n   * The intrinsic height of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#height).\n   */\n  height?: number;\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StyleString;\n  /** A function that is called to render a fallback when the image fails to load. */\n  renderError?: () => ReactNode;\n  /**\n   * A group of images to coordinate between, matching the group passed to the `<ImageCoordinator>`\n   * component. If not provided, the default image group is used.\n   */\n  group?: ImageGroup;\n  /**\n   * Associates the image with a microdata object. See\n   * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/itemprop).\n   */\n  itemProp?: string;\n}\n\ninterface ImageContextValue extends ImageProps {\n  hidden?: boolean;\n}\n\nexport const ImageContext =\n  createContext<ContextValue<Partial<ImageContextValue>, HTMLDivElement>>(null);\n\ntype ImageState = 'loading' | 'loaded' | 'revealed' | 'error';\ninterface State {\n  state: ImageState;\n  src: string;\n  startTime: number;\n  loadTime: number;\n}\n\ntype Action =\n  | {type: 'update'; src: string}\n  | {type: 'loaded'}\n  | {type: 'revealed'}\n  | {type: 'error'};\n\nfunction createState(src: string): State {\n  return {\n    state: 'loading',\n    src,\n    startTime: Date.now(),\n    loadTime: 0\n  };\n}\n\nfunction reducer(state: State, action: Action): State {\n  switch (action.type) {\n    case 'update': {\n      return {\n        state: 'loading',\n        src: action.src,\n        startTime: Date.now(),\n        loadTime: 0\n      };\n    }\n    case 'loaded':\n    case 'error': {\n      return {\n        ...state,\n        state: action.type\n      };\n    }\n    case 'revealed': {\n      return {\n        ...state,\n        state: 'revealed',\n        loadTime: Date.now() - state.startTime\n      };\n    }\n    default:\n      return state;\n  }\n}\n\nconst wrapperStyles = style({\n  backgroundColor: 'gray-100',\n  overflow: 'hidden'\n});\n\nconst imgStyles = style({\n  display: 'block',\n  width: 'full',\n  height: 'full',\n  objectFit: 'inherit',\n  objectPosition: 'inherit',\n  opacity: {\n    default: 0,\n    isRevealed: 1\n  },\n  transition: {\n    default: 'none',\n    isTransitioning: 'opacity'\n  },\n  transitionDuration: 500\n});\n\n/**\n * An image with support for skeleton loading and custom error states.\n */\nexport const Image = forwardRef(function Image(\n  props: ImageProps,\n  domRef: ForwardedRef<HTMLDivElement>\n): JSX.Element | null {\n  [props, domRef] = useSpectrumContextProps(props, domRef, ImageContext);\n\n  let {\n    src: srcProp = '',\n    styles,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    renderError,\n    group = DefaultImageGroup,\n    // TODO\n    // srcSet,\n    // sizes,\n    alt,\n    crossOrigin,\n    decoding,\n    fetchPriority,\n    loading,\n    referrerPolicy,\n    slot,\n    width,\n    height,\n    itemProp\n  } = props;\n  let hidden = (props as ImageContextValue).hidden;\n  let colorScheme = useContext(ColorSchemeContext);\n  let cacheKey = useMemo(\n    () => (typeof srcProp === 'object' ? JSON.stringify(srcProp) : srcProp),\n    [srcProp]\n  );\n\n  let {revealAll, register, unregister, load} = useContext(group);\n  let [{state, src: lastCacheKey, loadTime}, dispatch] = useReducer(reducer, cacheKey, createState);\n\n  if (cacheKey !== lastCacheKey && !hidden) {\n    dispatch({type: 'update', src: cacheKey});\n  }\n\n  if (state === 'loaded' && revealAll && !hidden) {\n    dispatch({type: 'revealed'});\n  }\n\n  let imgRef = useRef<HTMLImageElement | null>(null);\n  useLayoutEffect(() => {\n    if (hidden) {\n      return;\n    }\n\n    register(cacheKey);\n    return () => {\n      unregister(cacheKey);\n    };\n  }, [hidden, register, unregister, cacheKey]);\n\n  let onLoad = useCallback(() => {\n    load(cacheKey);\n    dispatch({type: 'loaded'});\n  }, [load, cacheKey]);\n\n  let onError = useCallback(() => {\n    dispatch({type: 'error'});\n    unregister(cacheKey);\n  }, [unregister, cacheKey]);\n\n  let isSkeleton = useIsSkeleton();\n  let isAnimating = isSkeleton || state === 'loading' || state === 'loaded';\n  let animation = useLoadingAnimation(isAnimating);\n  useLayoutEffect(() => {\n    if (hidden) {\n      return;\n    }\n\n    // In React act environments, run immediately.\n    let isTestEnv =\n      // @ts-ignore\n      typeof IS_REACT_ACT_ENVIRONMENT === 'boolean'\n        ? // @ts-ignore\n          IS_REACT_ACT_ENVIRONMENT\n        : typeof jest !== 'undefined';\n    let runTask = isTestEnv ? fn => fn() : queueMicrotask;\n\n    // If the image is already loaded, update state immediately instead of waiting for onLoad.\n    let img = imgRef.current;\n    if (state === 'loading' && img?.complete) {\n      if (img.naturalWidth === 0 && img.naturalHeight === 0) {\n        // Queue a microtask so we don't hit React's update limit.\n        // TODO: is this necessary?\n        runTask(onError);\n      } else {\n        runTask(onLoad);\n      }\n    }\n\n    animation(domRef.current);\n  });\n\n  if (props.alt == null && process.env.NODE_ENV !== 'production') {\n    console.warn(\n      'The `alt` prop was not provided to an image. ' +\n        'Add `alt` text for screen readers, or set `alt=\"\"` prop to indicate that the image ' +\n        'is decorative or redundant with displayed text and should not be announced by screen readers.'\n    );\n  }\n\n  let errorState = !isSkeleton && state === 'error' && renderError?.();\n  let isRevealed = state === 'revealed' && !isSkeleton;\n  let isTransitioning = isRevealed && loadTime > 200;\n  return useMemo(() => {\n    let img = (\n      <img\n        {...getFetchPriorityProp(fetchPriority)}\n        src={typeof srcProp === 'string' && srcProp ? srcProp : undefined}\n        alt={alt}\n        crossOrigin={crossOrigin}\n        decoding={decoding}\n        loading={loading}\n        referrerPolicy={referrerPolicy}\n        width={width}\n        height={height}\n        ref={imgRef}\n        itemProp={itemProp}\n        onLoad={onLoad}\n        onError={onError}\n        className={imgStyles({isRevealed, isTransitioning})}\n      />\n    );\n\n    if (Array.isArray(srcProp)) {\n      img = (\n        <picture className={style({objectFit: 'inherit', objectPosition: 'inherit'})}>\n          {srcProp.map((source, i) => {\n            let {colorScheme: sourceColorScheme, ...sourceProps} = source;\n            if (sourceColorScheme) {\n              if (!colorScheme || colorScheme === 'light dark') {\n                return (\n                  <source\n                    key={i}\n                    {...sourceProps}\n                    media={`${source.media ? `${source.media} and ` : ''}(prefers-color-scheme: ${sourceColorScheme})`}\n                  />\n                );\n              }\n\n              return sourceColorScheme === colorScheme ? <source key={i} {...sourceProps} /> : null;\n            } else {\n              return <source key={i} {...sourceProps} />;\n            }\n          })}\n          {img}\n        </picture>\n      );\n    }\n\n    return hidden ? null : (\n      <div\n        ref={domRef}\n        slot={slot || undefined}\n        style={UNSAFE_style}\n        className={\n          UNSAFE_className +\n          mergeStyles(wrapperStyles, styles) +\n          ' ' +\n          (isAnimating ? loadingStyle : '')\n        }>\n        {errorState}\n        {!errorState && img}\n      </div>\n    );\n  }, [\n    slot,\n    hidden,\n    domRef,\n    UNSAFE_style,\n    UNSAFE_className,\n    styles,\n    isAnimating,\n    errorState,\n    alt,\n    crossOrigin,\n    decoding,\n    fetchPriority,\n    loading,\n    referrerPolicy,\n    width,\n    height,\n    onLoad,\n    onError,\n    isRevealed,\n    isTransitioning,\n    srcProp,\n    itemProp,\n    colorScheme\n  ]);\n});\n\nfunction getFetchPriorityProp(\n  fetchPriority?: 'high' | 'low' | 'auto'\n): Record<string, string | undefined> {\n  const pieces = version.split('.');\n  const major = parseInt(pieces[0], 10);\n  if (major >= 19) {\n    return {fetchPriority};\n  }\n  return {fetchpriority: fetchPriority};\n}\n"],"names":[],"version":3,"file":"Image.css.map"}

package/dist/private/Image.mjs

@@ -50,21 +50,21 @@ function $dbd6f0b2503b938c$var$reducer(state, action) {
             return state;
     }
 }
-const $dbd6f0b2503b938c$var$wrapperStyles = " gH13 _Nc13 Pc13";
+const $dbd6f0b2503b938c$var$wrapperStyles = " gH131 _Nc131 Pc131";
 const $dbd6f0b2503b938c$var$imgStyles = function anonymous(props) {
     let rules = " ";
-    rules += ' sb13';
-    rules += ' Za13';
-    rules += ' Fb13';
-    rules += ' _H40ub4c13';
-    rules += ' __D40ub4c13';
-    if (props.isRevealed) rules += ' _Ib13';
-    else rules += ' _Ia13';
-    if (props.isTransitioning) rules += ' Yf13';
-    else rules += ' Ye13';
-    rules += ' Xe13';
-    if (props.isTransitioning) rules += ' _2b13';
-    else rules += ' _2b13';
+    rules += ' sb131';
+    rules += ' Za131';
+    rules += ' Fb131';
+    rules += ' _H40ub4c131';
+    rules += ' __D40ub4c131';
+    if (props.isRevealed) rules += ' _Ib131';
+    else rules += ' _Ia131';
+    if (props.isTransitioning) rules += ' Yf131';
+    else rules += ' Ye131';
+    rules += ' Xe131';
+    if (props.isTransitioning) rules += ' _2b131';
+    else rules += ' _2b131';
     return rules;
 };
 const $dbd6f0b2503b938c$export$3e431a229df88919 = /*#__PURE__*/ (0, $5AH9h$forwardRef)(function Image(props, domRef) {
@@ -124,8 +124,8 @@ const $dbd6f0b2503b938c$export$3e431a229df88919 = /*#__PURE__*/ (0, $5AH9h$forwa
     (0, $5AH9h$useLayoutEffect)(()=>{
         if (hidden) return;
         // In React act environments, run immediately.
-        // @ts-ignore
-        let isTestEnv = typeof IS_REACT_ACT_ENVIRONMENT === 'boolean' ? IS_REACT_ACT_ENVIRONMENT : typeof jest !== 'undefined';
+        let isTestEnv = // @ts-ignore
+        typeof IS_REACT_ACT_ENVIRONMENT === 'boolean' ? IS_REACT_ACT_ENVIRONMENT : typeof jest !== 'undefined';
         let runTask = isTestEnv ? (fn)=>fn() : queueMicrotask;
         // If the image is already loaded, update state immediately instead of waiting for onLoad.
         let img = imgRef.current;
@@ -162,7 +162,7 @@ const $dbd6f0b2503b938c$export$3e431a229df88919 = /*#__PURE__*/ (0, $5AH9h$forwa
             })
         });
         if (Array.isArray(srcProp)) img = /*#__PURE__*/ (0, $5AH9h$jsxs)("picture", {
-            className: " _H40ub4c13 __D40ub4c13",
+            className: " _H40ub4c131 __D40ub4c131",
             children: [
                 srcProp.map((source, i)=>{
                     let { colorScheme: sourceColorScheme, ...sourceProps } = source;

package/dist/private/Image.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Image.tsx"],"sourcesContent":["import {ColorSchemeContext} from './Provider';\nimport {ContextValue, SlotProps} from 'react-aria-components/slots';\nimport {createContext, ForwardedRef, forwardRef, HTMLAttributeReferrerPolicy, JSX, ReactNode, useCallback, useContext, useMemo, useReducer, useRef, version} from 'react';\nimport {DefaultImageGroup, ImageGroup} from './ImageCoordinator';\nimport {loadingStyle, useIsSkeleton, useLoadingAnimation} from './Skeleton';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {UnsafeStyles} from './style-utils';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ImageSource {\n  /**\n   * A comma-separated list of image URLs and descriptors.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#srcset).\n   */\n  srcSet?: string | undefined,\n  /**\n   * The color scheme for this image source. Unlike `media`, this respects the `Provider` color scheme setting.\n   */\n  colorScheme?: 'light' | 'dark',\n  /**\n   * A media query describing when the source should render.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#media).\n   */\n  media?: string | undefined,\n  /**\n   * A list of source sizes that describe the final rendered width of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#sizes).\n   */\n  sizes?: string | undefined,\n  /**\n   * The mime type of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#type).\n   */\n  type?: string | undefined,\n  /**\n   * The intrinsic width of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#width).\n   */\n  width?: number,\n  /**\n   * The intrinsic height of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#height).\n   */\n  height?: number\n}\n\nexport interface ImageProps extends UnsafeStyles, SlotProps {\n  /** The URL of the image or a list of conditional sources. */\n  src?: string | ImageSource[],\n  // TODO\n  // srcSet?: string,\n  // sizes?: string,\n  /** Accessible alt text for the image. */\n  alt?: string,\n  /**\n   * Indicates if the fetching of the image must be done using a CORS request.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin).\n   */\n  crossOrigin?: 'anonymous' | 'use-credentials',\n  /**\n   * Whether the browser should decode images synchronously or asynchronously.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#decoding).\n   */\n  decoding?: 'async' | 'auto' | 'sync',\n  /**\n   * Provides a hint of the relative priority to use when fetching the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#fetchpriority).\n   */\n  fetchPriority?: 'high' | 'low' | 'auto',\n  /**\n   * Whether the image should be loaded immediately or lazily when scrolled into view.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).\n   */\n  loading?: 'eager' | 'lazy',\n  /**\n   * A string indicating which referrer to use when fetching the resource.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy).\n   */\n  referrerPolicy?: HTMLAttributeReferrerPolicy,\n  /**\n   * The intrinsic width of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#width).\n   */\n  width?: number,\n  /**\n   * The intrinsic height of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#height).\n   */\n  height?: number,\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StyleString,\n  /** A function that is called to render a fallback when the image fails to load. */\n  renderError?: () => ReactNode,\n  /**\n   * A group of images to coordinate between, matching the group passed to the `<ImageCoordinator>` component.\n   * If not provided, the default image group is used.\n   */\n  group?: ImageGroup,\n  /**\n   * Associates the image with a microdata object.\n   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/itemprop).\n   */\n  itemProp?: string\n}\n\ninterface ImageContextValue extends ImageProps {\n  hidden?: boolean\n}\n\nexport const ImageContext = createContext<ContextValue<Partial<ImageContextValue>, HTMLDivElement>>(null);\n\ntype ImageState = 'loading' | 'loaded' | 'revealed' | 'error';\ninterface State {\n  state: ImageState,\n  src: string,\n  startTime: number,\n  loadTime: number\n}\n\ntype Action = \n  | {type: 'update', src: string}\n  | {type: 'loaded'}\n  | {type: 'revealed'}\n  | {type: 'error'};\n\nfunction createState(src: string): State {\n  return {\n    state: 'loading',\n    src,\n    startTime: Date.now(),\n    loadTime: 0\n  };\n}\n\nfunction reducer(state: State, action: Action): State {\n  switch (action.type) {\n    case 'update': {\n      return {\n        state: 'loading',\n        src: action.src,\n        startTime: Date.now(),\n        loadTime: 0\n      };\n    }\n    case 'loaded':\n    case 'error': {\n      return {\n        ...state,\n        state: action.type\n      };\n    }\n    case 'revealed': {\n      return {\n        ...state,\n        state: 'revealed',\n        loadTime: Date.now() - state.startTime\n      };\n    }\n    default:\n      return state;\n  }\n}\n\nconst wrapperStyles = style({\n  backgroundColor: 'gray-100',\n  overflow: 'hidden'\n});\n\nconst imgStyles = style({\n  display: 'block',\n  width: 'full',\n  height: 'full',\n  objectFit: 'inherit',\n  objectPosition: 'inherit',\n  opacity: {\n    default: 0,\n    isRevealed: 1\n  },\n  transition: {\n    default: 'none',\n    isTransitioning: 'opacity'\n  },\n  transitionDuration: 500\n});\n\n/**\n * An image with support for skeleton loading and custom error states.\n */\nexport const Image = forwardRef(function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>): JSX.Element | null {\n  [props, domRef] = useSpectrumContextProps(props, domRef, ImageContext);\n\n  let {\n    src: srcProp = '',\n    styles,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    renderError,\n    group = DefaultImageGroup,\n    // TODO\n    // srcSet,\n    // sizes,\n    alt,\n    crossOrigin,\n    decoding,\n    fetchPriority,\n    loading,\n    referrerPolicy,\n    slot,\n    width,\n    height,\n    itemProp\n  } = props;\n  let hidden = (props as ImageContextValue).hidden;\n  let colorScheme = useContext(ColorSchemeContext);\n  let cacheKey = useMemo(() => typeof srcProp === 'object' ? JSON.stringify(srcProp) : srcProp, [srcProp]);\n  \n  let {revealAll, register, unregister, load} = useContext(group);\n  let [{state, src: lastCacheKey, loadTime}, dispatch] = useReducer(reducer, cacheKey, createState);\n\n  if (cacheKey !== lastCacheKey && !hidden) {\n    dispatch({type: 'update', src: cacheKey});\n  }\n\n  if (state === 'loaded' && revealAll && !hidden) {\n    dispatch({type: 'revealed'});\n  }\n\n  let imgRef = useRef<HTMLImageElement | null>(null);\n  useLayoutEffect(() => {\n    if (hidden) {\n      return;\n    }\n\n    register(cacheKey);\n    return () => {\n      unregister(cacheKey);\n    };\n  }, [hidden, register, unregister, cacheKey]);\n\n  let onLoad = useCallback(() => {\n    load(cacheKey);\n    dispatch({type: 'loaded'});\n  }, [load, cacheKey]);\n\n  let onError = useCallback(() => {\n    dispatch({type: 'error'});\n    unregister(cacheKey);\n  }, [unregister, cacheKey]);\n\n  let isSkeleton = useIsSkeleton();\n  let isAnimating = isSkeleton || state === 'loading' || state === 'loaded';\n  let animation = useLoadingAnimation(isAnimating);\n  useLayoutEffect(() => {\n    if (hidden) {\n      return;\n    }\n\n    // In React act environments, run immediately.\n    // @ts-ignore\n    let isTestEnv = typeof IS_REACT_ACT_ENVIRONMENT === 'boolean' ? IS_REACT_ACT_ENVIRONMENT : typeof jest !== 'undefined';\n    let runTask = isTestEnv ? fn => fn() : queueMicrotask;\n\n    // If the image is already loaded, update state immediately instead of waiting for onLoad.\n    let img = imgRef.current;\n    if (state === 'loading' && img?.complete) {\n      if (img.naturalWidth === 0 && img.naturalHeight === 0) {\n        // Queue a microtask so we don't hit React's update limit.\n        // TODO: is this necessary?\n        runTask(onError);\n      } else {\n        runTask(onLoad);\n      }\n    }\n\n    animation(domRef.current);\n  });\n\n  if (props.alt == null && process.env.NODE_ENV !== 'production') {\n    console.warn(\n      'The `alt` prop was not provided to an image. ' +\n      'Add `alt` text for screen readers, or set `alt=\"\"` prop to indicate that the image ' +\n      'is decorative or redundant with displayed text and should not be announced by screen readers.'\n    );\n  }\n\n  let errorState = !isSkeleton && state === 'error' && renderError?.();\n  let isRevealed = state === 'revealed' && !isSkeleton;\n  let isTransitioning = isRevealed && loadTime > 200;\n  return useMemo(() => {\n    let img = (\n      <img\n        {...getFetchPriorityProp(fetchPriority)}\n        src={typeof srcProp === 'string' && srcProp ? srcProp : undefined}\n        alt={alt}\n        crossOrigin={crossOrigin}\n        decoding={decoding}\n        loading={loading}\n        referrerPolicy={referrerPolicy}\n        width={width}\n        height={height}\n        ref={imgRef}\n        itemProp={itemProp}\n        onLoad={onLoad}\n        onError={onError}\n        className={imgStyles({isRevealed, isTransitioning})} />\n    );\n\n    if (Array.isArray(srcProp)) {\n      img = (\n        <picture className={style({objectFit: 'inherit', objectPosition: 'inherit'})}>\n          {srcProp.map((source, i) => {\n            let {colorScheme: sourceColorScheme, ...sourceProps} = source;\n            if (sourceColorScheme) {\n              if (!colorScheme || colorScheme === 'light dark') {\n                return (\n                  <source\n                    key={i}\n                    {...sourceProps}\n                    media={`${source.media ? `${source.media} and ` : ''}(prefers-color-scheme: ${sourceColorScheme})`} />\n                );\n              }\n\n              return sourceColorScheme === colorScheme\n                ? <source key={i} {...sourceProps} />\n                : null;\n            } else {\n              return <source key={i} {...sourceProps} />;\n            }\n          })}\n          {img}\n        </picture>\n      );\n    }\n\n    return hidden ? null : (\n      <div\n        ref={domRef}\n        slot={slot || undefined}\n        style={UNSAFE_style}\n        className={UNSAFE_className + mergeStyles(wrapperStyles, styles) + ' '  + (isAnimating ? loadingStyle : '')}>\n        {errorState}\n        {!errorState && img}\n      </div>\n    );\n  }, [slot, hidden, domRef, UNSAFE_style, UNSAFE_className, styles, isAnimating, errorState, alt, crossOrigin, decoding, fetchPriority, loading, referrerPolicy, width, height, onLoad, onError, isRevealed, isTransitioning, srcProp, itemProp, colorScheme]);\n});\n\nfunction getFetchPriorityProp(fetchPriority?: 'high' | 'low' | 'auto'): Record<string, string | undefined> {\n  const pieces = version.split('.');\n  const major = parseInt(pieces[0], 10);\n  if (major >= 19) {\n    return {fetchPriority};\n  }\n  return {fetchpriority: fetchPriority};\n}\n"],"names":[],"version":3,"file":"Image.mjs.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Image.tsx"],"sourcesContent":["import {ColorSchemeContext} from './Provider';\nimport {ContextValue, SlotProps} from 'react-aria-components/slots';\nimport {\n  createContext,\n  ForwardedRef,\n  forwardRef,\n  HTMLAttributeReferrerPolicy,\n  JSX,\n  ReactNode,\n  useCallback,\n  useContext,\n  useMemo,\n  useReducer,\n  useRef,\n  version\n} from 'react';\nimport {DefaultImageGroup, ImageGroup} from './ImageCoordinator';\nimport {loadingStyle, useIsSkeleton, useLoadingAnimation} from './Skeleton';\nimport {mergeStyles} from '../style/runtime';\nimport {style} from '../style' with {type: 'macro'};\nimport {StyleString} from '../style/types';\nimport {UnsafeStyles} from './style-utils';\nimport {useLayoutEffect} from 'react-aria/private/utils/useLayoutEffect';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ImageSource {\n  /**\n   * A comma-separated list of image URLs and descriptors.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#srcset).\n   */\n  srcSet?: string | undefined;\n  /**\n   * The color scheme for this image source. Unlike `media`, this respects the `Provider` color\n   * scheme setting.\n   */\n  colorScheme?: 'light' | 'dark';\n  /**\n   * A media query describing when the source should render.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#media).\n   */\n  media?: string | undefined;\n  /**\n   * A list of source sizes that describe the final rendered width of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#sizes).\n   */\n  sizes?: string | undefined;\n  /**\n   * The mime type of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#type).\n   */\n  type?: string | undefined;\n  /**\n   * The intrinsic width of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#width).\n   */\n  width?: number;\n  /**\n   * The intrinsic height of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#height).\n   */\n  height?: number;\n}\n\nexport interface ImageProps extends UnsafeStyles, SlotProps {\n  /** The URL of the image or a list of conditional sources. */\n  src?: string | ImageSource[];\n  // TODO\n  // srcSet?: string,\n  // sizes?: string,\n  /** Accessible alt text for the image. */\n  alt?: string;\n  /**\n   * Indicates if the fetching of the image must be done using a CORS request.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin).\n   */\n  crossOrigin?: 'anonymous' | 'use-credentials';\n  /**\n   * Whether the browser should decode images synchronously or asynchronously.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#decoding).\n   */\n  decoding?: 'async' | 'auto' | 'sync';\n  /**\n   * Provides a hint of the relative priority to use when fetching the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#fetchpriority).\n   */\n  fetchPriority?: 'high' | 'low' | 'auto';\n  /**\n   * Whether the image should be loaded immediately or lazily when scrolled into view.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).\n   */\n  loading?: 'eager' | 'lazy';\n  /**\n   * A string indicating which referrer to use when fetching the resource.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy).\n   */\n  referrerPolicy?: HTMLAttributeReferrerPolicy;\n  /**\n   * The intrinsic width of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#width).\n   */\n  width?: number;\n  /**\n   * The intrinsic height of the image.\n   * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#height).\n   */\n  height?: number;\n  /** Spectrum-defined styles, returned by the `style()` macro. */\n  styles?: StyleString;\n  /** A function that is called to render a fallback when the image fails to load. */\n  renderError?: () => ReactNode;\n  /**\n   * A group of images to coordinate between, matching the group passed to the `<ImageCoordinator>`\n   * component. If not provided, the default image group is used.\n   */\n  group?: ImageGroup;\n  /**\n   * Associates the image with a microdata object. See\n   * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/itemprop).\n   */\n  itemProp?: string;\n}\n\ninterface ImageContextValue extends ImageProps {\n  hidden?: boolean;\n}\n\nexport const ImageContext =\n  createContext<ContextValue<Partial<ImageContextValue>, HTMLDivElement>>(null);\n\ntype ImageState = 'loading' | 'loaded' | 'revealed' | 'error';\ninterface State {\n  state: ImageState;\n  src: string;\n  startTime: number;\n  loadTime: number;\n}\n\ntype Action =\n  | {type: 'update'; src: string}\n  | {type: 'loaded'}\n  | {type: 'revealed'}\n  | {type: 'error'};\n\nfunction createState(src: string): State {\n  return {\n    state: 'loading',\n    src,\n    startTime: Date.now(),\n    loadTime: 0\n  };\n}\n\nfunction reducer(state: State, action: Action): State {\n  switch (action.type) {\n    case 'update': {\n      return {\n        state: 'loading',\n        src: action.src,\n        startTime: Date.now(),\n        loadTime: 0\n      };\n    }\n    case 'loaded':\n    case 'error': {\n      return {\n        ...state,\n        state: action.type\n      };\n    }\n    case 'revealed': {\n      return {\n        ...state,\n        state: 'revealed',\n        loadTime: Date.now() - state.startTime\n      };\n    }\n    default:\n      return state;\n  }\n}\n\nconst wrapperStyles = style({\n  backgroundColor: 'gray-100',\n  overflow: 'hidden'\n});\n\nconst imgStyles = style({\n  display: 'block',\n  width: 'full',\n  height: 'full',\n  objectFit: 'inherit',\n  objectPosition: 'inherit',\n  opacity: {\n    default: 0,\n    isRevealed: 1\n  },\n  transition: {\n    default: 'none',\n    isTransitioning: 'opacity'\n  },\n  transitionDuration: 500\n});\n\n/**\n * An image with support for skeleton loading and custom error states.\n */\nexport const Image = forwardRef(function Image(\n  props: ImageProps,\n  domRef: ForwardedRef<HTMLDivElement>\n): JSX.Element | null {\n  [props, domRef] = useSpectrumContextProps(props, domRef, ImageContext);\n\n  let {\n    src: srcProp = '',\n    styles,\n    UNSAFE_className = '',\n    UNSAFE_style,\n    renderError,\n    group = DefaultImageGroup,\n    // TODO\n    // srcSet,\n    // sizes,\n    alt,\n    crossOrigin,\n    decoding,\n    fetchPriority,\n    loading,\n    referrerPolicy,\n    slot,\n    width,\n    height,\n    itemProp\n  } = props;\n  let hidden = (props as ImageContextValue).hidden;\n  let colorScheme = useContext(ColorSchemeContext);\n  let cacheKey = useMemo(\n    () => (typeof srcProp === 'object' ? JSON.stringify(srcProp) : srcProp),\n    [srcProp]\n  );\n\n  let {revealAll, register, unregister, load} = useContext(group);\n  let [{state, src: lastCacheKey, loadTime}, dispatch] = useReducer(reducer, cacheKey, createState);\n\n  if (cacheKey !== lastCacheKey && !hidden) {\n    dispatch({type: 'update', src: cacheKey});\n  }\n\n  if (state === 'loaded' && revealAll && !hidden) {\n    dispatch({type: 'revealed'});\n  }\n\n  let imgRef = useRef<HTMLImageElement | null>(null);\n  useLayoutEffect(() => {\n    if (hidden) {\n      return;\n    }\n\n    register(cacheKey);\n    return () => {\n      unregister(cacheKey);\n    };\n  }, [hidden, register, unregister, cacheKey]);\n\n  let onLoad = useCallback(() => {\n    load(cacheKey);\n    dispatch({type: 'loaded'});\n  }, [load, cacheKey]);\n\n  let onError = useCallback(() => {\n    dispatch({type: 'error'});\n    unregister(cacheKey);\n  }, [unregister, cacheKey]);\n\n  let isSkeleton = useIsSkeleton();\n  let isAnimating = isSkeleton || state === 'loading' || state === 'loaded';\n  let animation = useLoadingAnimation(isAnimating);\n  useLayoutEffect(() => {\n    if (hidden) {\n      return;\n    }\n\n    // In React act environments, run immediately.\n    let isTestEnv =\n      // @ts-ignore\n      typeof IS_REACT_ACT_ENVIRONMENT === 'boolean'\n        ? // @ts-ignore\n          IS_REACT_ACT_ENVIRONMENT\n        : typeof jest !== 'undefined';\n    let runTask = isTestEnv ? fn => fn() : queueMicrotask;\n\n    // If the image is already loaded, update state immediately instead of waiting for onLoad.\n    let img = imgRef.current;\n    if (state === 'loading' && img?.complete) {\n      if (img.naturalWidth === 0 && img.naturalHeight === 0) {\n        // Queue a microtask so we don't hit React's update limit.\n        // TODO: is this necessary?\n        runTask(onError);\n      } else {\n        runTask(onLoad);\n      }\n    }\n\n    animation(domRef.current);\n  });\n\n  if (props.alt == null && process.env.NODE_ENV !== 'production') {\n    console.warn(\n      'The `alt` prop was not provided to an image. ' +\n        'Add `alt` text for screen readers, or set `alt=\"\"` prop to indicate that the image ' +\n        'is decorative or redundant with displayed text and should not be announced by screen readers.'\n    );\n  }\n\n  let errorState = !isSkeleton && state === 'error' && renderError?.();\n  let isRevealed = state === 'revealed' && !isSkeleton;\n  let isTransitioning = isRevealed && loadTime > 200;\n  return useMemo(() => {\n    let img = (\n      <img\n        {...getFetchPriorityProp(fetchPriority)}\n        src={typeof srcProp === 'string' && srcProp ? srcProp : undefined}\n        alt={alt}\n        crossOrigin={crossOrigin}\n        decoding={decoding}\n        loading={loading}\n        referrerPolicy={referrerPolicy}\n        width={width}\n        height={height}\n        ref={imgRef}\n        itemProp={itemProp}\n        onLoad={onLoad}\n        onError={onError}\n        className={imgStyles({isRevealed, isTransitioning})}\n      />\n    );\n\n    if (Array.isArray(srcProp)) {\n      img = (\n        <picture className={style({objectFit: 'inherit', objectPosition: 'inherit'})}>\n          {srcProp.map((source, i) => {\n            let {colorScheme: sourceColorScheme, ...sourceProps} = source;\n            if (sourceColorScheme) {\n              if (!colorScheme || colorScheme === 'light dark') {\n                return (\n                  <source\n                    key={i}\n                    {...sourceProps}\n                    media={`${source.media ? `${source.media} and ` : ''}(prefers-color-scheme: ${sourceColorScheme})`}\n                  />\n                );\n              }\n\n              return sourceColorScheme === colorScheme ? <source key={i} {...sourceProps} /> : null;\n            } else {\n              return <source key={i} {...sourceProps} />;\n            }\n          })}\n          {img}\n        </picture>\n      );\n    }\n\n    return hidden ? null : (\n      <div\n        ref={domRef}\n        slot={slot || undefined}\n        style={UNSAFE_style}\n        className={\n          UNSAFE_className +\n          mergeStyles(wrapperStyles, styles) +\n          ' ' +\n          (isAnimating ? loadingStyle : '')\n        }>\n        {errorState}\n        {!errorState && img}\n      </div>\n    );\n  }, [\n    slot,\n    hidden,\n    domRef,\n    UNSAFE_style,\n    UNSAFE_className,\n    styles,\n    isAnimating,\n    errorState,\n    alt,\n    crossOrigin,\n    decoding,\n    fetchPriority,\n    loading,\n    referrerPolicy,\n    width,\n    height,\n    onLoad,\n    onError,\n    isRevealed,\n    isTransitioning,\n    srcProp,\n    itemProp,\n    colorScheme\n  ]);\n});\n\nfunction getFetchPriorityProp(\n  fetchPriority?: 'high' | 'low' | 'auto'\n): Record<string, string | undefined> {\n  const pieces = version.split('.');\n  const major = parseInt(pieces[0], 10);\n  if (major >= 19) {\n    return {fetchPriority};\n  }\n  return {fetchpriority: fetchPriority};\n}\n"],"names":[],"version":3,"file":"Image.mjs.map"}

package/dist/private/ImageCoordinator.cjs.map

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

package/dist/private/ImageCoordinator.mjs.map

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