@react-spectrum/s2 0.11.1 → 0.12.0

package/dist/Image.cjs

@@ -55,21 +55,21 @@ function $053b76ed3d29e13b$var$reducer(state, action) {
             return state;
     }
 }
-const $053b76ed3d29e13b$var$wrapperStyles = " gH11 _Nc11 Pc11";
+const $053b76ed3d29e13b$var$wrapperStyles = " gH12 _Nc12 Pc12";
 const $053b76ed3d29e13b$var$imgStyles = function anonymous(props) {
     let rules = " ";
-    rules += ' sb11';
-    rules += ' Za11';
-    rules += ' Fb11';
-    rules += ' _H40ub4c11';
-    rules += ' __D40ub4c11';
-    if (props.isRevealed) rules += ' _Ib11';
-    else rules += ' _Ia11';
-    if (props.isTransitioning) rules += ' Yf11';
-    else rules += ' Ye11';
-    rules += ' Xe11';
-    if (props.isTransitioning) rules += ' _2b11';
-    else rules += ' _2b11';
+    rules += ' sb12';
+    rules += ' Za12';
+    rules += ' Fb12';
+    rules += ' _H40ub4c12';
+    rules += ' __D40ub4c12';
+    if (props.isRevealed) rules += ' _Ib12';
+    else rules += ' _Ia12';
+    if (props.isTransitioning) rules += ' Yf12';
+    else rules += ' Ye12';
+    rules += ' Xe12';
+    if (props.isTransitioning) rules += ' _2b12';
+    else rules += ' _2b12';
     return rules;
 };
 const $053b76ed3d29e13b$export$3e431a229df88919 = /*#__PURE__*/ (0, $kwMay$react.forwardRef)(function Image(props, domRef) {
@@ -77,7 +77,7 @@ const $053b76ed3d29e13b$export$3e431a229df88919 = /*#__PURE__*/ (0, $kwMay$react
     let { src: src = '', styles: styles, UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, renderError: renderError, group: group = (0, $a4f1585b527b9b7a$exports.DefaultImageGroup), alt: // TODO
     // srcSet,
     // sizes,
-    alt, crossOrigin: crossOrigin, decoding: decoding, fetchPriority: fetchPriority, loading: loading, referrerPolicy: referrerPolicy, slot: slot } = props;
+    alt, crossOrigin: crossOrigin, decoding: decoding, fetchPriority: fetchPriority, loading: loading, referrerPolicy: referrerPolicy, slot: slot, width: width, height: height } = props;
     let hidden = props.hidden;
     let { revealAll: revealAll, register: register, unregister: unregister, load: load } = (0, $kwMay$react.useContext)(group);
     let [{ state: state, src: lastSrc, loadTime: loadTime }, dispatch] = (0, $kwMay$react.useReducer)($053b76ed3d29e13b$var$reducer, src, $053b76ed3d29e13b$var$createState);
@@ -125,9 +125,13 @@ const $053b76ed3d29e13b$export$3e431a229df88919 = /*#__PURE__*/ (0, $kwMay$react
     (0, $kwMay$reactariautils.useLayoutEffect)(()=>{
         if (hidden) return;
         // If the image is already loaded, update state immediately instead of waiting for onLoad.
-        if (state === 'loading' && imgRef.current?.complete) // Queue a microtask so we don't hit React's update limit.
-        // TODO: is this necessary?
-        queueMicrotask(onLoad);
+        let img = imgRef.current;
+        if (state === 'loading' && img?.complete) {
+            if (img.naturalWidth === 0 && img.naturalHeight === 0) // Queue a microtask so we don't hit React's update limit.
+            // TODO: is this necessary?
+            queueMicrotask(onError);
+            else queueMicrotask(onLoad);
+        }
         animation(domRef.current);
     });
     if (props.alt == null && process.env.NODE_ENV !== 'production') console.warn('The `alt` prop was not provided to an image. Add `alt` text for screen readers, or set `alt=""` prop to indicate that the image is decorative or redundant with displayed text and should not be announced by screen readers.');
@@ -149,6 +153,8 @@ const $053b76ed3d29e13b$export$3e431a229df88919 = /*#__PURE__*/ (0, $kwMay$react
                     decoding: decoding,
                     loading: loading,
                     referrerPolicy: referrerPolicy,
+                    width: width,
+                    height: height,
                     ref: imgRef,
                     onLoad: onLoad,
                     onError: onError,
@@ -174,6 +180,8 @@ const $053b76ed3d29e13b$export$3e431a229df88919 = /*#__PURE__*/ (0, $kwMay$react
         fetchPriority,
         loading,
         referrerPolicy,
+        width,
+        height,
         onLoad,
         onError,
         isRevealed,

package/dist/Image.cjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Image.tsx"],"sourcesContent":["import {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, ForwardedRef, forwardRef, HTMLAttributeReferrerPolicy, 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/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ImageProps extends UnsafeStyles, SlotProps {\n  /** The URL of the image. */\n  src?: string,\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  /** 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\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\nexport const Image = forwardRef(function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>) {\n  [props, domRef] = useSpectrumContextProps(props, domRef, ImageContext);\n\n  let {\n    src = '',\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  } = props;\n  let hidden = (props as ImageContextValue).hidden;\n  \n  let {revealAll, register, unregister, load} = useContext(group);\n  let [{state, src: lastSrc, loadTime}, dispatch] = useReducer(reducer, src, createState);\n\n  if (src !== lastSrc && !hidden) {\n    dispatch({type: 'update', src});\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(src);\n    return () => {\n      unregister(src);\n    };\n  }, [hidden, register, unregister, src]);\n\n  let onLoad = useCallback(() => {\n    load(src);\n    dispatch({type: 'loaded'});\n  }, [load, src]);\n\n  let onError = useCallback(() => {\n    dispatch({type: 'error'});\n    unregister(src);\n  }, [unregister, src]);\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    // If the image is already loaded, update state immediately instead of waiting for onLoad.\n    if (state === 'loading' && imgRef.current?.complete) {\n      // Queue a microtask so we don't hit React's update limit.\n      // TODO: is this necessary?\n      queueMicrotask(onLoad);\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(() => 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 && (\n        <img\n          {...getFetchPriorityProp(fetchPriority)}\n          src={src || undefined}\n          alt={alt}\n          crossOrigin={crossOrigin}\n          decoding={decoding}\n          loading={loading}\n          referrerPolicy={referrerPolicy}\n          ref={imgRef}\n          onLoad={onLoad}\n          onError={onError}\n          className={imgStyles({isRevealed, isTransitioning})} />\n        )}\n    </div>\n  ), [slot, hidden, domRef, UNSAFE_style, UNSAFE_className, styles, isAnimating, errorState, src, alt, crossOrigin, decoding, fetchPriority, loading, referrerPolicy, onLoad, onError, isRevealed, isTransitioning]);\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 {ContextValue, SlotProps} from 'react-aria-components';\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/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ImageProps extends UnsafeStyles, SlotProps {\n  /** The URL of the image. */\n  src?: string,\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\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 = '',\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  } = props;\n  let hidden = (props as ImageContextValue).hidden;\n  \n  let {revealAll, register, unregister, load} = useContext(group);\n  let [{state, src: lastSrc, loadTime}, dispatch] = useReducer(reducer, src, createState);\n\n  if (src !== lastSrc && !hidden) {\n    dispatch({type: 'update', src});\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(src);\n    return () => {\n      unregister(src);\n    };\n  }, [hidden, register, unregister, src]);\n\n  let onLoad = useCallback(() => {\n    load(src);\n    dispatch({type: 'loaded'});\n  }, [load, src]);\n\n  let onError = useCallback(() => {\n    dispatch({type: 'error'});\n    unregister(src);\n  }, [unregister, src]);\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    // 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        queueMicrotask(onError);\n      } else {\n        queueMicrotask(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(() => 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 && (\n        <img\n          {...getFetchPriorityProp(fetchPriority)}\n          src={src || 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          onLoad={onLoad}\n          onError={onError}\n          className={imgStyles({isRevealed, isTransitioning})} />\n        )}\n    </div>\n  ), [slot, hidden, domRef, UNSAFE_style, UNSAFE_className, styles, isAnimating, errorState, src, alt, crossOrigin, decoding, fetchPriority, loading, referrerPolicy, width, height, onLoad, onError, isRevealed, isTransitioning]);\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"}

package/dist/Image.css

@@ -1,57 +1,57 @@
 @layer _.a {
-  .gH11 {
+  .gH12 {
     background-color: var(--lightningcss-light, #e9e9e9) var(--lightningcss-dark, #2c2c2c);
   }
 
-  ._Nc11 {
+  ._Nc12 {
     overflow-x: hidden;
   }
 
-  .Pc11 {
+  .Pc12 {
     overflow-y: hidden;
   }
 
-  .sb11 {
+  .sb12 {
     display: block;
   }
 
-  .Za11 {
+  .Za12 {
     width: 100%;
   }
 
-  .Fb11 {
+  .Fb12 {
     height: 100%;
   }
 
-  ._H40ub4c11 {
+  ._H40ub4c12 {
     object-fit: inherit;
   }
 
-  .__D40ub4c11 {
+  .__D40ub4c12 {
     object-position: inherit;
   }
 
-  ._Ia11 {
+  ._Ia12 {
     opacity: 0;
   }
 
-  ._Ib11 {
+  ._Ib12 {
     opacity: 1;
   }
 
-  .Ye11 {
+  .Ye12 {
     transition-property: none;
   }
 
-  .Yf11 {
+  .Yf12 {
     transition-property: opacity;
   }
 
-  .Xe11 {
+  .Xe12 {
     transition-duration: .5s;
   }
 
-  ._2b11 {
+  ._2b12 {
     transition-timing-function: cubic-bezier(.45, 0, .4, 1);
   }
 }

package/dist/Image.css.map

@@ -1 +1 @@
-{"mappings":"ACiHsB;EAAA;;;;EAAA;;;;EAAA;;;;EAKJ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA","sources":["a1371b57e9afeb00","packages/@react-spectrum/s2/src/Image.tsx"],"sourcesContent":["@import \"be7e52eb05f9e81c\";\n@import \"b32b10d1bd9c4a50\";\n","import {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, ForwardedRef, forwardRef, HTMLAttributeReferrerPolicy, 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/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ImageProps extends UnsafeStyles, SlotProps {\n  /** The URL of the image. */\n  src?: string,\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  /** 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\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\nexport const Image = forwardRef(function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>) {\n  [props, domRef] = useSpectrumContextProps(props, domRef, ImageContext);\n\n  let {\n    src = '',\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  } = props;\n  let hidden = (props as ImageContextValue).hidden;\n  \n  let {revealAll, register, unregister, load} = useContext(group);\n  let [{state, src: lastSrc, loadTime}, dispatch] = useReducer(reducer, src, createState);\n\n  if (src !== lastSrc && !hidden) {\n    dispatch({type: 'update', src});\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(src);\n    return () => {\n      unregister(src);\n    };\n  }, [hidden, register, unregister, src]);\n\n  let onLoad = useCallback(() => {\n    load(src);\n    dispatch({type: 'loaded'});\n  }, [load, src]);\n\n  let onError = useCallback(() => {\n    dispatch({type: 'error'});\n    unregister(src);\n  }, [unregister, src]);\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    // If the image is already loaded, update state immediately instead of waiting for onLoad.\n    if (state === 'loading' && imgRef.current?.complete) {\n      // Queue a microtask so we don't hit React's update limit.\n      // TODO: is this necessary?\n      queueMicrotask(onLoad);\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(() => 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 && (\n        <img\n          {...getFetchPriorityProp(fetchPriority)}\n          src={src || undefined}\n          alt={alt}\n          crossOrigin={crossOrigin}\n          decoding={decoding}\n          loading={loading}\n          referrerPolicy={referrerPolicy}\n          ref={imgRef}\n          onLoad={onLoad}\n          onError={onError}\n          className={imgStyles({isRevealed, isTransitioning})} />\n        )}\n    </div>\n  ), [slot, hidden, domRef, UNSAFE_style, UNSAFE_className, styles, isAnimating, errorState, src, alt, crossOrigin, decoding, fetchPriority, loading, referrerPolicy, onLoad, onError, isRevealed, isTransitioning]);\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":"AC2HsB;EAAA;;;;EAAA;;;;EAAA;;;;EAKJ;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA","sources":["a1371b57e9afeb00","packages/@react-spectrum/s2/src/Image.tsx"],"sourcesContent":["@import \"be7e52eb05f9e81c\";\n@import \"b32b10d1bd9c4a50\";\n","import {ContextValue, SlotProps} from 'react-aria-components';\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/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ImageProps extends UnsafeStyles, SlotProps {\n  /** The URL of the image. */\n  src?: string,\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\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 = '',\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  } = props;\n  let hidden = (props as ImageContextValue).hidden;\n  \n  let {revealAll, register, unregister, load} = useContext(group);\n  let [{state, src: lastSrc, loadTime}, dispatch] = useReducer(reducer, src, createState);\n\n  if (src !== lastSrc && !hidden) {\n    dispatch({type: 'update', src});\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(src);\n    return () => {\n      unregister(src);\n    };\n  }, [hidden, register, unregister, src]);\n\n  let onLoad = useCallback(() => {\n    load(src);\n    dispatch({type: 'loaded'});\n  }, [load, src]);\n\n  let onError = useCallback(() => {\n    dispatch({type: 'error'});\n    unregister(src);\n  }, [unregister, src]);\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    // 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        queueMicrotask(onError);\n      } else {\n        queueMicrotask(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(() => 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 && (\n        <img\n          {...getFetchPriorityProp(fetchPriority)}\n          src={src || 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          onLoad={onLoad}\n          onError={onError}\n          className={imgStyles({isRevealed, isTransitioning})} />\n        )}\n    </div>\n  ), [slot, hidden, domRef, UNSAFE_style, UNSAFE_className, styles, isAnimating, errorState, src, alt, crossOrigin, decoding, fetchPriority, loading, referrerPolicy, width, height, onLoad, onError, isRevealed, isTransitioning]);\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"}

package/dist/Image.mjs

@@ -48,21 +48,21 @@ function $dbd6f0b2503b938c$var$reducer(state, action) {
             return state;
     }
 }
-const $dbd6f0b2503b938c$var$wrapperStyles = " gH11 _Nc11 Pc11";
+const $dbd6f0b2503b938c$var$wrapperStyles = " gH12 _Nc12 Pc12";
 const $dbd6f0b2503b938c$var$imgStyles = function anonymous(props) {
     let rules = " ";
-    rules += ' sb11';
-    rules += ' Za11';
-    rules += ' Fb11';
-    rules += ' _H40ub4c11';
-    rules += ' __D40ub4c11';
-    if (props.isRevealed) rules += ' _Ib11';
-    else rules += ' _Ia11';
-    if (props.isTransitioning) rules += ' Yf11';
-    else rules += ' Ye11';
-    rules += ' Xe11';
-    if (props.isTransitioning) rules += ' _2b11';
-    else rules += ' _2b11';
+    rules += ' sb12';
+    rules += ' Za12';
+    rules += ' Fb12';
+    rules += ' _H40ub4c12';
+    rules += ' __D40ub4c12';
+    if (props.isRevealed) rules += ' _Ib12';
+    else rules += ' _Ia12';
+    if (props.isTransitioning) rules += ' Yf12';
+    else rules += ' Ye12';
+    rules += ' Xe12';
+    if (props.isTransitioning) rules += ' _2b12';
+    else rules += ' _2b12';
     return rules;
 };
 const $dbd6f0b2503b938c$export$3e431a229df88919 = /*#__PURE__*/ (0, $5AH9h$forwardRef)(function Image(props, domRef) {
@@ -70,7 +70,7 @@ const $dbd6f0b2503b938c$export$3e431a229df88919 = /*#__PURE__*/ (0, $5AH9h$forwa
     let { src: src = '', styles: styles, UNSAFE_className: UNSAFE_className = '', UNSAFE_style: UNSAFE_style, renderError: renderError, group: group = (0, $4b5e069e9e001e8b$export$a37e899304e5fef0), alt: // TODO
     // srcSet,
     // sizes,
-    alt, crossOrigin: crossOrigin, decoding: decoding, fetchPriority: fetchPriority, loading: loading, referrerPolicy: referrerPolicy, slot: slot } = props;
+    alt, crossOrigin: crossOrigin, decoding: decoding, fetchPriority: fetchPriority, loading: loading, referrerPolicy: referrerPolicy, slot: slot, width: width, height: height } = props;
     let hidden = props.hidden;
     let { revealAll: revealAll, register: register, unregister: unregister, load: load } = (0, $5AH9h$useContext)(group);
     let [{ state: state, src: lastSrc, loadTime: loadTime }, dispatch] = (0, $5AH9h$useReducer)($dbd6f0b2503b938c$var$reducer, src, $dbd6f0b2503b938c$var$createState);
@@ -118,9 +118,13 @@ const $dbd6f0b2503b938c$export$3e431a229df88919 = /*#__PURE__*/ (0, $5AH9h$forwa
     (0, $5AH9h$useLayoutEffect)(()=>{
         if (hidden) return;
         // If the image is already loaded, update state immediately instead of waiting for onLoad.
-        if (state === 'loading' && imgRef.current?.complete) // Queue a microtask so we don't hit React's update limit.
-        // TODO: is this necessary?
-        queueMicrotask(onLoad);
+        let img = imgRef.current;
+        if (state === 'loading' && img?.complete) {
+            if (img.naturalWidth === 0 && img.naturalHeight === 0) // Queue a microtask so we don't hit React's update limit.
+            // TODO: is this necessary?
+            queueMicrotask(onError);
+            else queueMicrotask(onLoad);
+        }
         animation(domRef.current);
     });
     if (props.alt == null && process.env.NODE_ENV !== 'production') console.warn('The `alt` prop was not provided to an image. Add `alt` text for screen readers, or set `alt=""` prop to indicate that the image is decorative or redundant with displayed text and should not be announced by screen readers.');
@@ -142,6 +146,8 @@ const $dbd6f0b2503b938c$export$3e431a229df88919 = /*#__PURE__*/ (0, $5AH9h$forwa
                     decoding: decoding,
                     loading: loading,
                     referrerPolicy: referrerPolicy,
+                    width: width,
+                    height: height,
                     ref: imgRef,
                     onLoad: onLoad,
                     onError: onError,
@@ -167,6 +173,8 @@ const $dbd6f0b2503b938c$export$3e431a229df88919 = /*#__PURE__*/ (0, $5AH9h$forwa
         fetchPriority,
         loading,
         referrerPolicy,
+        width,
+        height,
         onLoad,
         onError,
         isRevealed,

package/dist/Image.mjs.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/s2/src/Image.tsx"],"sourcesContent":["import {ContextValue, SlotProps} from 'react-aria-components';\nimport {createContext, ForwardedRef, forwardRef, HTMLAttributeReferrerPolicy, 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/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ImageProps extends UnsafeStyles, SlotProps {\n  /** The URL of the image. */\n  src?: string,\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  /** 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\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\nexport const Image = forwardRef(function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>) {\n  [props, domRef] = useSpectrumContextProps(props, domRef, ImageContext);\n\n  let {\n    src = '',\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  } = props;\n  let hidden = (props as ImageContextValue).hidden;\n  \n  let {revealAll, register, unregister, load} = useContext(group);\n  let [{state, src: lastSrc, loadTime}, dispatch] = useReducer(reducer, src, createState);\n\n  if (src !== lastSrc && !hidden) {\n    dispatch({type: 'update', src});\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(src);\n    return () => {\n      unregister(src);\n    };\n  }, [hidden, register, unregister, src]);\n\n  let onLoad = useCallback(() => {\n    load(src);\n    dispatch({type: 'loaded'});\n  }, [load, src]);\n\n  let onError = useCallback(() => {\n    dispatch({type: 'error'});\n    unregister(src);\n  }, [unregister, src]);\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    // If the image is already loaded, update state immediately instead of waiting for onLoad.\n    if (state === 'loading' && imgRef.current?.complete) {\n      // Queue a microtask so we don't hit React's update limit.\n      // TODO: is this necessary?\n      queueMicrotask(onLoad);\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(() => 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 && (\n        <img\n          {...getFetchPriorityProp(fetchPriority)}\n          src={src || undefined}\n          alt={alt}\n          crossOrigin={crossOrigin}\n          decoding={decoding}\n          loading={loading}\n          referrerPolicy={referrerPolicy}\n          ref={imgRef}\n          onLoad={onLoad}\n          onError={onError}\n          className={imgStyles({isRevealed, isTransitioning})} />\n        )}\n    </div>\n  ), [slot, hidden, domRef, UNSAFE_style, UNSAFE_className, styles, isAnimating, errorState, src, alt, crossOrigin, decoding, fetchPriority, loading, referrerPolicy, onLoad, onError, isRevealed, isTransitioning]);\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 {ContextValue, SlotProps} from 'react-aria-components';\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/utils';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\n\nexport interface ImageProps extends UnsafeStyles, SlotProps {\n  /** The URL of the image. */\n  src?: string,\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\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 = '',\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  } = props;\n  let hidden = (props as ImageContextValue).hidden;\n  \n  let {revealAll, register, unregister, load} = useContext(group);\n  let [{state, src: lastSrc, loadTime}, dispatch] = useReducer(reducer, src, createState);\n\n  if (src !== lastSrc && !hidden) {\n    dispatch({type: 'update', src});\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(src);\n    return () => {\n      unregister(src);\n    };\n  }, [hidden, register, unregister, src]);\n\n  let onLoad = useCallback(() => {\n    load(src);\n    dispatch({type: 'loaded'});\n  }, [load, src]);\n\n  let onError = useCallback(() => {\n    dispatch({type: 'error'});\n    unregister(src);\n  }, [unregister, src]);\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    // 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        queueMicrotask(onError);\n      } else {\n        queueMicrotask(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(() => 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 && (\n        <img\n          {...getFetchPriorityProp(fetchPriority)}\n          src={src || 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          onLoad={onLoad}\n          onError={onError}\n          className={imgStyles({isRevealed, isTransitioning})} />\n        )}\n    </div>\n  ), [slot, hidden, domRef, UNSAFE_style, UNSAFE_className, styles, isAnimating, errorState, src, alt, crossOrigin, decoding, fetchPriority, loading, referrerPolicy, width, height, onLoad, onError, isRevealed, isTransitioning]);\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"}