@react-spectrum/s2 1.3.1 → 1.5.0

package/src/Image.tsx

@@ -1,6 +1,19 @@
 import {ColorSchemeContext} from './Provider';
 import {ContextValue, SlotProps} from 'react-aria-components/slots';
-import {createContext, ForwardedRef, forwardRef, HTMLAttributeReferrerPolicy, JSX, ReactNode, useCallback, useContext, useMemo, useReducer, useRef, version} from 'react';
+import {
+  createContext,
+  ForwardedRef,
+  forwardRef,
+  HTMLAttributeReferrerPolicy,
+  JSX,
+  ReactNode,
+  useCallback,
+  useContext,
+  useMemo,
+  useReducer,
+  useRef,
+  version
+} from 'react';
 import {DefaultImageGroup, ImageGroup} from './ImageCoordinator';
 import {loadingStyle, useIsSkeleton, useLoadingAnimation} from './Skeleton';
 import {mergeStyles} from '../style/runtime';
@@ -15,113 +28,115 @@ export interface ImageSource {
    * A comma-separated list of image URLs and descriptors.
    * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#srcset).
    */
-  srcSet?: string | undefined,
+  srcSet?: string | undefined;
   /**
-   * The color scheme for this image source. Unlike `media`, this respects the `Provider` color scheme setting.
+   * The color scheme for this image source. Unlike `media`, this respects the `Provider` color
+   * scheme setting.
    */
-  colorScheme?: 'light' | 'dark',
+  colorScheme?: 'light' | 'dark';
   /**
    * A media query describing when the source should render.
    * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#media).
    */
-  media?: string | undefined,
+  media?: string | undefined;
   /**
    * A list of source sizes that describe the final rendered width of the image.
    * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#sizes).
    */
-  sizes?: string | undefined,
+  sizes?: string | undefined;
   /**
    * The mime type of the image.
    * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#type).
    */
-  type?: string | undefined,
+  type?: string | undefined;
   /**
    * The intrinsic width of the image.
    * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#width).
    */
-  width?: number,
+  width?: number;
   /**
    * The intrinsic height of the image.
    * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/source#height).
    */
-  height?: number
+  height?: number;
 }
 
 export interface ImageProps extends UnsafeStyles, SlotProps {
   /** The URL of the image or a list of conditional sources. */
-  src?: string | ImageSource[],
+  src?: string | ImageSource[];
   // TODO
   // srcSet?: string,
   // sizes?: string,
   /** Accessible alt text for the image. */
-  alt?: string,
+  alt?: string;
   /**
    * Indicates if the fetching of the image must be done using a CORS request.
    * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin).
    */
-  crossOrigin?: 'anonymous' | 'use-credentials',
+  crossOrigin?: 'anonymous' | 'use-credentials';
   /**
    * Whether the browser should decode images synchronously or asynchronously.
    * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#decoding).
    */
-  decoding?: 'async' | 'auto' | 'sync',
+  decoding?: 'async' | 'auto' | 'sync';
   /**
    * Provides a hint of the relative priority to use when fetching the image.
    * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#fetchpriority).
    */
-  fetchPriority?: 'high' | 'low' | 'auto',
+  fetchPriority?: 'high' | 'low' | 'auto';
   /**
    * Whether the image should be loaded immediately or lazily when scrolled into view.
    * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).
    */
-  loading?: 'eager' | 'lazy',
+  loading?: 'eager' | 'lazy';
   /**
    * A string indicating which referrer to use when fetching the resource.
    * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy).
    */
-  referrerPolicy?: HTMLAttributeReferrerPolicy,
+  referrerPolicy?: HTMLAttributeReferrerPolicy;
   /**
    * The intrinsic width of the image.
    * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#width).
    */
-  width?: number,
+  width?: number;
   /**
    * The intrinsic height of the image.
    * [See MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#height).
    */
-  height?: number,
+  height?: number;
   /** Spectrum-defined styles, returned by the `style()` macro. */
-  styles?: StyleString,
+  styles?: StyleString;
   /** A function that is called to render a fallback when the image fails to load. */
-  renderError?: () => ReactNode,
+  renderError?: () => ReactNode;
   /**
-   * A group of images to coordinate between, matching the group passed to the `<ImageCoordinator>` component.
-   * If not provided, the default image group is used.
+   * A group of images to coordinate between, matching the group passed to the `<ImageCoordinator>`
+   * component. If not provided, the default image group is used.
    */
-  group?: ImageGroup,
+  group?: ImageGroup;
   /**
-   * Associates the image with a microdata object.
-   * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/itemprop).
+   * Associates the image with a microdata object. See
+   * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/itemprop).
    */
-  itemProp?: string
+  itemProp?: string;
 }
 
 interface ImageContextValue extends ImageProps {
-  hidden?: boolean
+  hidden?: boolean;
 }
 
-export const ImageContext = createContext<ContextValue<Partial<ImageContextValue>, HTMLDivElement>>(null);
+export const ImageContext =
+  createContext<ContextValue<Partial<ImageContextValue>, HTMLDivElement>>(null);
 
 type ImageState = 'loading' | 'loaded' | 'revealed' | 'error';
 interface State {
-  state: ImageState,
-  src: string,
-  startTime: number,
-  loadTime: number
+  state: ImageState;
+  src: string;
+  startTime: number;
+  loadTime: number;
 }
 
-type Action = 
-  | {type: 'update', src: string}
+type Action =
+  | {type: 'update'; src: string}
   | {type: 'loaded'}
   | {type: 'revealed'}
   | {type: 'error'};
@@ -189,7 +204,10 @@ const imgStyles = style({
 /**
  * An image with support for skeleton loading and custom error states.
  */
-export const Image = forwardRef(function Image(props: ImageProps, domRef: ForwardedRef<HTMLDivElement>): JSX.Element | null {
+export const Image = forwardRef(function Image(
+  props: ImageProps,
+  domRef: ForwardedRef<HTMLDivElement>
+): JSX.Element | null {
   [props, domRef] = useSpectrumContextProps(props, domRef, ImageContext);
 
   let {
@@ -215,8 +233,11 @@ export const Image = forwardRef(function Image(props: ImageProps, domRef: Forwar
   } = props;
   let hidden = (props as ImageContextValue).hidden;
   let colorScheme = useContext(ColorSchemeContext);
-  let cacheKey = useMemo(() => typeof srcProp === 'object' ? JSON.stringify(srcProp) : srcProp, [srcProp]);
-  
+  let cacheKey = useMemo(
+    () => (typeof srcProp === 'object' ? JSON.stringify(srcProp) : srcProp),
+    [srcProp]
+  );
+
   let {revealAll, register, unregister, load} = useContext(group);
   let [{state, src: lastCacheKey, loadTime}, dispatch] = useReducer(reducer, cacheKey, createState);
 
@@ -259,8 +280,12 @@ export const Image = forwardRef(function Image(props: ImageProps, domRef: Forwar
     }
 
     // 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'
+        ? // @ts-ignore
+          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.
@@ -281,8 +306,8 @@ export const Image = forwardRef(function Image(props: ImageProps, domRef: Forwar
   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.'
+        '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.'
     );
   }
 
@@ -305,7 +330,8 @@ export const Image = forwardRef(function Image(props: ImageProps, domRef: Forwar
         itemProp={itemProp}
         onLoad={onLoad}
         onError={onError}
-        className={imgStyles({isRevealed, isTransitioning})} />
+        className={imgStyles({isRevealed, isTransitioning})}
+      />
     );
 
     if (Array.isArray(srcProp)) {
@@ -319,13 +345,12 @@ export const Image = forwardRef(function Image(props: ImageProps, domRef: Forwar
                   <source
                     key={i}
                     {...sourceProps}
-                    media={`${source.media ? `${source.media} and ` : ''}(prefers-color-scheme: ${sourceColorScheme})`} />
+                    media={`${source.media ? `${source.media} and ` : ''}(prefers-color-scheme: ${sourceColorScheme})`}
+                  />
                 );
               }
 
-              return sourceColorScheme === colorScheme
-                ? <source key={i} {...sourceProps} />
-                : null;
+              return sourceColorScheme === colorScheme ? <source key={i} {...sourceProps} /> : null;
             } else {
               return <source key={i} {...sourceProps} />;
             }
@@ -340,15 +365,46 @@ export const Image = forwardRef(function Image(props: ImageProps, domRef: Forwar
         ref={domRef}
         slot={slot || undefined}
         style={UNSAFE_style}
-        className={UNSAFE_className + mergeStyles(wrapperStyles, styles) + ' '  + (isAnimating ? loadingStyle : '')}>
+        className={
+          UNSAFE_className +
+          mergeStyles(wrapperStyles, styles) +
+          ' ' +
+          (isAnimating ? loadingStyle : '')
+        }>
         {errorState}
         {!errorState && img}
       </div>
     );
-  }, [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]);
+  }, [
+    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
+  ]);
 });
 
-function getFetchPriorityProp(fetchPriority?: 'high' | 'low' | 'auto'): Record<string, string | undefined> {
+function getFetchPriorityProp(
+  fetchPriority?: 'high' | 'low' | 'auto'
+): Record<string, string | undefined> {
   const pieces = version.split('.');
   const major = parseInt(pieces[0], 10);
   if (major >= 19) {

package/src/ImageCoordinator.tsx

@@ -1,27 +1,38 @@
-import {Context, createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useReducer} from 'react';
+import {
+  Context,
+  createContext,
+  ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useReducer
+} from 'react';
 
 export interface ImageCoordinatorProps {
   /** Children within the ImageCoordinator. */
-  children: ReactNode,
+  children: ReactNode;
   /**
-   * Time in milliseconds after which images are always displayed, even if all images are not yet loaded.
+   * Time in milliseconds after which images are always displayed, even if all images are not yet
+   * loaded.
+   *
    * @default 5000
    */
-  timeout?: number,
+  timeout?: number;
   /**
    * A group of images to coordinate between, matching the group passed to the `<Image>` component.
    * If not provided, the default image group is used.
    */
-  group?: ImageGroup
+  group?: ImageGroup;
 }
 
 export type ImageGroup = Context<ImageGroupValue>;
 
 interface ImageGroupValue {
-  revealAll: boolean,
-  register(url: string): void,
-  unregister(url: string): void,
-  load(url: string): void
+  revealAll: boolean;
+  register(url: string): void;
+  unregister(url: string): void;
+  load(url: string): void;
 }
 
 const defaultContext: ImageGroupValue = {
@@ -38,16 +49,16 @@ export function createImageGroup(): ImageGroup {
 }
 
 interface State {
-  loadedAll: boolean,
-  timedOut: boolean,
-  loadStartTime: number,
-  loaded: Map<string, boolean>
+  loadedAll: boolean;
+  timedOut: boolean;
+  loadStartTime: number;
+  loaded: Map<string, boolean>;
 }
 
 type Action =
-  | {type: 'register', url: string}
-  | {type: 'unregister', url: string}
-  | {type: 'load', url: string}
+  | {type: 'register'; url: string}
+  | {type: 'unregister'; url: string}
+  | {type: 'load'; url: string}
   | {type: 'timeout'};
 
 function reducer(state: State, action: Action): State {
@@ -146,18 +157,22 @@ function ImageCoordinatorRoot(props: ImageCoordinatorProps) {
 
   useEffect(() => {
     if (!loadedAll) {
-      let timeoutId = setTimeout(() => {
-        dispatch({type: 'timeout'});
-      }, loadStartTime + timeout - Date.now());
+      let timeoutId = setTimeout(
+        () => {
+          dispatch({type: 'timeout'});
+        },
+        loadStartTime + timeout - Date.now()
+      );
 
       return () => clearTimeout(timeoutId);
     }
   }, [loadStartTime, loadedAll, timeout]);
 
   let revealAll = loadedAll || timedOut;
-  return useMemo(() => (
-    <group.Provider value={{revealAll, register, unregister, load}}>
-      {children}
-    </group.Provider>
-  ), [group, children, revealAll, register, unregister, load]);
+  return useMemo(
+    () => (
+      <group.Provider value={{revealAll, register, unregister, load}}>{children}</group.Provider>
+    ),
+    [group, children, revealAll, register, unregister, load]
+  );
 }

package/src/InlineAlert.tsx

@@ -21,7 +21,6 @@ import {focusRing, style} from '../style' with {type: 'macro'};
 import {getAllowedOverrides, StyleProps} from './style-utils' with {type: 'macro'};
 import {IconContext} from './Icon';
 import InfoCircle from '../s2wf-icons/S2_Icon_InfoCircle_20_N.svg';
-// @ts-ignore
 import intlMessages from '../intl/*.json';
 import NoticeSquare from '../s2wf-icons/S2_Icon_AlertDiamond_20_N.svg';
 import {useDOMRef} from './useDOMRef';
@@ -33,92 +32,98 @@ export interface InlineAlertProps extends DOMProps, StyleProps, InlineStylesProp
   /**
    * The contents of the Inline Alert.
    */
-  children: ReactNode,
+  children: ReactNode;
   /**
    * Whether to automatically focus the Inline Alert when it first renders.
    */
-  autoFocus?: boolean
+  autoFocus?: boolean;
 }
 
 interface InlineStylesProps {
   /**
    * The semantic tone of a Inline Alert.
+   *
    * @default neutral
    */
-  variant?: 'informative' | 'positive' | 'notice' | 'negative' | 'neutral',
+  variant?: 'informative' | 'positive' | 'notice' | 'negative' | 'neutral';
   /**
    * The visual style of the Inline Alert.
+   *
    * @default border
    */
-  fillStyle?: 'border' | 'subtleFill' | 'boldFill'
+  fillStyle?: 'border' | 'subtleFill' | 'boldFill';
 }
 
-export const InlineAlertContext = createContext<ContextValue<Partial<InlineAlertProps>, DOMRefValue<HTMLDivElement>>>(null);
+export const InlineAlertContext =
+  createContext<ContextValue<Partial<InlineAlertProps>, DOMRefValue<HTMLDivElement>>>(null);
 
-const inlineAlert = style<InlineStylesProps & {isFocusVisible?: boolean}>({
-  ...focusRing(),
-  display: 'inline-block',
-  position: 'relative',
-  boxSizing: 'border-box',
-  padding: 24,
-  borderRadius: 'lg',
-  borderStyle: 'solid',
-  borderWidth: 2,
-  borderColor: {
-    fillStyle: {
-      border: {
-        variant: {
-          informative: 'informative-800',
-          positive: 'positive-700',
-          notice: 'notice-700',
-          negative: 'negative-800',
-          neutral: 'gray-700' // is there a semantic color name for neutral?
-        }
-      },
-      subtleFill: 'transparent',
-      boldFill: 'transparent'
-    }
-  },
-  backgroundColor: {
-    variant: {
-      informative: {
-        fillStyle: {
-          border: 'gray-25',
-          subtleFill: 'informative-subtle',
-          boldFill: 'informative'
-        }
-      },
-      positive: {
-        fillStyle: {
-          border: 'gray-25',
-          subtleFill: 'positive-subtle',
-          boldFill: 'positive'
-        }
-      },
-      notice: {
-        fillStyle: {
-          border: 'gray-25',
-          subtleFill: 'notice-subtle',
-          boldFill: 'notice'
-        }
-      },
-      negative: {
-        fillStyle: {
-          border: 'gray-25',
-          subtleFill: 'negative-subtle',
-          boldFill: 'negative'
-        }
-      },
-      neutral: {
-        fillStyle: {
-          border: 'gray-25',
-          subtleFill: 'neutral-subtle',
-          boldFill: 'neutral-subdued'
+const inlineAlert = style<InlineStylesProps & {isFocusVisible?: boolean}>(
+  {
+    ...focusRing(),
+    display: 'inline-block',
+    position: 'relative',
+    boxSizing: 'border-box',
+    padding: 24,
+    borderRadius: 'lg',
+    borderStyle: 'solid',
+    borderWidth: 2,
+    borderColor: {
+      fillStyle: {
+        border: {
+          variant: {
+            informative: 'informative-800',
+            positive: 'positive-700',
+            notice: 'notice-700',
+            negative: 'negative-800',
+            neutral: 'gray-700' // is there a semantic color name for neutral?
+          }
+        },
+        subtleFill: 'transparent',
+        boldFill: 'transparent'
+      }
+    },
+    backgroundColor: {
+      variant: {
+        informative: {
+          fillStyle: {
+            border: 'gray-25',
+            subtleFill: 'informative-subtle',
+            boldFill: 'informative'
+          }
+        },
+        positive: {
+          fillStyle: {
+            border: 'gray-25',
+            subtleFill: 'positive-subtle',
+            boldFill: 'positive'
+          }
+        },
+        notice: {
+          fillStyle: {
+            border: 'gray-25',
+            subtleFill: 'notice-subtle',
+            boldFill: 'notice'
+          }
+        },
+        negative: {
+          fillStyle: {
+            border: 'gray-25',
+            subtleFill: 'negative-subtle',
+            boldFill: 'negative'
+          }
+        },
+        neutral: {
+          fillStyle: {
+            border: 'gray-25',
+            subtleFill: 'neutral-subtle',
+            boldFill: 'neutral-subdued'
+          }
         }
       }
     }
-  }
-}, getAllowedOverrides());
+  },
+  getAllowedOverrides()
+);
 
 const icon = style<InlineStylesProps>({
   float: 'inline-end',
@@ -195,18 +200,16 @@ const content = style({
 });
 
 /**
- * Inline alerts display a non-modal message associated with objects in a view.
- * These are often used in form validation, providing a place to aggregate feedback related to multiple fields.
+ * Inline alerts display a non-modal message associated with objects in a view. These are often used
+ * in form validation, providing a place to aggregate feedback related to multiple fields.
  */
-export const InlineAlert = /*#__PURE__*/ forwardRef(function InlineAlert(props: InlineAlertProps, ref: DOMRef<HTMLDivElement>) {
+export const InlineAlert = /*#__PURE__*/ forwardRef(function InlineAlert(
+  props: InlineAlertProps,
+  ref: DOMRef<HTMLDivElement>
+) {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
   [props, ref] = useSpectrumContextProps(props, ref, InlineAlertContext);
-  let {
-    children,
-    variant = 'neutral',
-    fillStyle = 'border',
-    autoFocus
-  } = props;
+  let {children, variant = 'neutral', fillStyle = 'border', autoFocus} = props;
 
   let domRef = useDOMRef(ref);
 
@@ -237,11 +240,17 @@ export const InlineAlert = /*#__PURE__*/ forwardRef(function InlineAlert(props:
       autoFocus={autoFocus}
       role="alert"
       style={props.UNSAFE_style}
-      className={(props.UNSAFE_className || '') + inlineAlert({
-        variant,
-        fillStyle,
-        isFocusVisible
-      }, props.styles)}>
+      className={
+        (props.UNSAFE_className || '') +
+        inlineAlert(
+          {
+            variant,
+            fillStyle,
+            isFocusVisible
+          },
+          props.styles
+        )
+      }>
       <Provider
         values={[
           [HeadingContext, {styles: heading({fillStyle})}],