@prismicio/react 2.1.2 → 2.4.0

package/dist/index.d.ts

@@ -31,7 +31,7 @@ interface LinkProps {
 /**
  * Props for `<PrismicLink>`.
  */
-declare type PrismicLinkProps<InternalComponent extends React.ElementType<LinkProps> = React.ElementType<LinkProps>, ExternalComponent extends React.ElementType<LinkProps> = React.ElementType<LinkProps>, LinkResolverFunction extends prismicH.LinkResolverFunction = prismicH.LinkResolverFunction> = Omit<React.ComponentPropsWithoutRef<InternalComponent> & React.ComponentPropsWithoutRef<ExternalComponent>, keyof LinkProps> & {
+declare type PrismicLinkProps<InternalComponent extends React.ElementType<LinkProps> = typeof defaultInternalComponent, ExternalComponent extends React.ElementType<LinkProps> = typeof defaultInternalComponent, LinkResolverFunction extends prismicH.LinkResolverFunction<any> = prismicH.LinkResolverFunction> = Omit<React.ComponentPropsWithoutRef<InternalComponent> & React.ComponentPropsWithoutRef<ExternalComponent>, keyof LinkProps> & {
     /**
      * The Link Resolver used to resolve links.
      *
@@ -84,7 +84,26 @@ declare type PrismicLinkProps<InternalComponent extends React.ElementType<LinkPr
      */
     href: string | null | undefined;
 });
-declare const PrismicLink: <InternalComponent extends React.ElementType<LinkProps>, ExternalComponent extends React.ElementType<LinkProps>, LinkResolverFunction extends prismicH.LinkResolverFunction<string>>(props: PrismicLinkProps<InternalComponent, ExternalComponent, LinkResolverFunction> & {
+/**
+ * The default component rendered for internal URLs.
+ */
+declare const defaultInternalComponent = "a";
+/**
+ * React component that renders a link from a Prismic Link field.
+ *
+ * Different components can be rendered depending on whether the link is
+ * internal or external. This is helpful when integrating with client-side
+ * routers, such as a router-specific Link component.
+ *
+ * If a link is configured to open in a new window using `target="_blank"`,
+ * `rel="noopener noreferrer"` is set by default.
+ *
+ * @param props - Props for the component.
+ *
+ * @returns The internal or external link component depending on whether the
+ *   link is internal or external.
+ */
+declare const PrismicLink: <InternalComponent extends React.ElementType<LinkProps> = "a", ExternalComponent extends React.ElementType<LinkProps> = "a", LinkResolverFunction extends prismicH.LinkResolverFunction<any> = prismicH.LinkResolverFunction<string>>(props: PrismicLinkProps<InternalComponent, ExternalComponent, LinkResolverFunction> & {
     ref?: React.Ref<Element> | undefined;
 }) => JSX.Element | null;
 
@@ -111,7 +130,7 @@ declare type PrismicClientHookState = "idle" | "loading" | "loaded" | "failed";
  * React context value containing shared configuration for `@prismicio/react`
  * components and hooks.
  */
-declare type PrismicContextValue = {
+declare type PrismicContextValue<LinkResolverFunction extends prismicH.LinkResolverFunction<any> = prismicH.LinkResolverFunction> = {
     /**
      * A `@prismicio/client` instance used to fetch content from a Prismic
      * repository. This is used by `@prismicio/react` hooks, such as
@@ -126,7 +145,7 @@ declare type PrismicContextValue = {
      * repository's content, a Link Resolver does not need to be provided.
      * @see Learn about Link Resolvers and Route Resolvers {@link https://prismic.io/docs/core-concepts/link-resolver-route-resolver}
      */
-    linkResolver?: prismicH.LinkResolverFunction;
+    linkResolver?: LinkResolverFunction;
     /**
      * A map or function that maps a Rich Text block to a React component.
      *
@@ -170,14 +189,14 @@ declare type PrismicContextValue = {
 /**
  * Props for `<PrismicProvider>`.
  */
-declare type PrismicProviderProps = PrismicContextValue;
+declare type PrismicProviderProps<LinkResolverFunction extends prismicH.LinkResolverFunction> = PrismicContextValue<LinkResolverFunction>;
 /**
  * React context provider to share configuration for `@prismicio/react`
  * components and hooks.
  *
  * @returns A React context provider with shared configuration.
  */
-declare const PrismicProvider: ({ client, linkResolver, richTextComponents, internalLinkComponent, externalLinkComponent, children, }: PrismicProviderProps) => JSX.Element;
+declare const PrismicProvider: <LinkResolverFunction extends prismicH.LinkResolverFunction<any>>({ client, linkResolver, richTextComponents, internalLinkComponent, externalLinkComponent, children, }: PrismicProviderProps<LinkResolverFunction>) => JSX.Element;
 
 /**
  * React hook used to read shared configuration for `@prismicio/react`
@@ -239,7 +258,7 @@ declare const PrismicText: (props: PrismicTextProps) => JSX.Element | null;
 /**
  * Props for `<PrismicRichText>`.
  */
-declare type PrismicRichTextProps = {
+declare type PrismicRichTextProps<LinkResolverFunction extends prismicH.LinkResolverFunction<any> = prismicH.LinkResolverFunction> = {
     /**
      * The Prismic Rich Text field to render.
      */
@@ -252,7 +271,7 @@ declare type PrismicRichTextProps = {
      * repository's content, a Link Resolver does not need to be provided.
      * @see Learn about Link Resolvers and Route Resolvers {@link https://prismic.io/docs/core-concepts/link-resolver-route-resolver}
      */
-    linkResolver?: PrismicLinkProps["linkResolver"];
+    linkResolver?: LinkResolverFunction;
     /**
      * A function that maps a Rich Text block to a React component.
      *
@@ -300,6 +319,11 @@ declare type PrismicRichTextProps = {
      * @defaultValue `<a>`
      */
     externalLinkComponent?: PrismicLinkProps["externalComponent"];
+    /**
+     * The value to be rendered when the field is empty. If a fallback is not
+     * given, `null` will be rendered.
+     */
+    fallback?: React.ReactNode;
 };
 /**
  * React component that renders content from a Prismic Rich Text field. By
@@ -341,7 +365,166 @@ declare type PrismicRichTextProps = {
  * @see Learn about Rich Text fields {@link https://prismic.io/docs/core-concepts/rich-text-title}
  * @see Learn about Rich Text serializers {@link https://prismic.io/docs/core-concepts/html-serializer}
  */
-declare const PrismicRichText: (props: PrismicRichTextProps) => JSX.Element | null;
+declare const PrismicRichText: <LinkResolverFunction extends prismicH.LinkResolverFunction<any> = prismicH.LinkResolverFunction<string>>(props: PrismicRichTextProps<LinkResolverFunction>) => JSX.Element | null;
+
+/**
+ * Props for `<PrismicImage>`.
+ */
+declare type PrismicImageProps = Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "src" | "srcset" | "alt"> & {
+    /**
+     * The Prismic Image field or thumbnail to render.
+     */
+    field: prismicT.ImageFieldImage | null | undefined;
+    /**
+     * An object of Imgix URL API parameters to transform the image.
+     *
+     * See: https://docs.imgix.com/apis/rendering
+     */
+    imgixParams?: Parameters<typeof prismicH.asImageSrc>[1];
+    /**
+     * Declare an image as decorative by providing `alt=""`.
+     *
+     * See:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
+     */
+    alt?: "";
+    /**
+     * Declare an image as decorative only if the Image field does not have
+     * alternative text by providing `fallbackAlt=""`.
+     *
+     * See:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
+     */
+    fallbackAlt?: "";
+} & ({
+    /**
+     * Widths used to build a `srcset` value for the Image field.
+     *
+     * If a `widths` prop is not given or `"defaults"` is passed, the
+     * following widths will be used: 640, 750, 828, 1080, 1200, 1920, 2048, 3840.
+     *
+     * If the Image field contains responsive views, each responsive view
+     * can be used as a width in the resulting `srcset` by passing
+     * `"thumbnails"` as the `widths` prop.
+     */
+    widths?: NonNullable<Parameters<typeof prismicH.asImageWidthSrcSet>[1]>["widths"] | "defaults";
+    /**
+     * Not used when the `widths` prop is used.
+     */
+    pixelDensities?: never;
+} | {
+    /**
+     * Not used when the `widths` prop is used.
+     */
+    widths?: never;
+    /**
+     * Pixel densities used to build a `srcset` value for the Image field.
+     *
+     * If a `pixelDensities` prop is passed `"defaults"`, the following
+     * pixel densities will be used: 1, 2, 3.
+     */
+    pixelDensities: NonNullable<Parameters<typeof prismicH.asImagePixelDensitySrcSet>[1]>["pixelDensities"] | "defaults";
+});
+/**
+ * React component that renders an image from a Prismic Image field or one of
+ * its thumbnails. It will automatically set the `alt` attribute using the Image
+ * field's `alt` property.
+ *
+ * By default, a widths-based srcset will be used to support responsive images.
+ * This ensures only the smallest image needed for a browser is downloaded.
+ *
+ * To use a pixel-density-based srcset, use the `pixelDensities` prop. Default
+ * pixel densities can be used by using `pixelDensities="defaults"`.
+ *
+ * **Note**: If you are using a framework that has a native image component,
+ * such as Next.js and Gatsby, prefer using those image components instead. They
+ * can provide deeper framework integration than `<PrismicImage>`.
+ *
+ * @param props - Props for the component.
+ *
+ * @returns A responsive image component for the given Image field.
+ */
+declare const PrismicImage: React.ForwardRefExoticComponent<(Pick<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "alt" | "src" | "srcset"> & {
+    /**
+     * The Prismic Image field or thumbnail to render.
+     */
+    field: prismicT.ImageFieldImage | null | undefined;
+    /**
+     * An object of Imgix URL API parameters to transform the image.
+     *
+     * See: https://docs.imgix.com/apis/rendering
+     */
+    imgixParams?: Parameters<typeof prismicH.asImageSrc>[1];
+    /**
+     * Declare an image as decorative by providing `alt=""`.
+     *
+     * See:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
+     */
+    alt?: "" | undefined;
+    /**
+     * Declare an image as decorative only if the Image field does not have
+     * alternative text by providing `fallbackAlt=""`.
+     *
+     * See:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
+     */
+    fallbackAlt?: "" | undefined;
+} & {
+    /**
+     * Widths used to build a `srcset` value for the Image field.
+     *
+     * If a `widths` prop is not given or `"defaults"` is passed, the
+     * following widths will be used: 640, 750, 828, 1080, 1200, 1920, 2048, 3840.
+     *
+     * If the Image field contains responsive views, each responsive view
+     * can be used as a width in the resulting `srcset` by passing
+     * `"thumbnails"` as the `widths` prop.
+     */
+    widths?: NonNullable<Parameters<typeof prismicH.asImageWidthSrcSet>[1]>["widths"] | "defaults";
+    /**
+     * Not used when the `widths` prop is used.
+     */
+    pixelDensities?: undefined;
+}, "children" | "slot" | "style" | "title" | "className" | "color" | "height" | "id" | "lang" | "width" | "role" | "tabIndex" | "crossOrigin" | "widths" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "useMap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "referrerPolicy" | "alt" | "loading" | "decoding" | "sizes" | "srcSet" | "field" | "pixelDensities" | "imgixParams" | "fallbackAlt"> | Pick<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "alt" | "src" | "srcset"> & {
+    /**
+     * The Prismic Image field or thumbnail to render.
+     */
+    field: prismicT.ImageFieldImage | null | undefined;
+    /**
+     * An object of Imgix URL API parameters to transform the image.
+     *
+     * See: https://docs.imgix.com/apis/rendering
+     */
+    imgixParams?: Parameters<typeof prismicH.asImageSrc>[1];
+    /**
+     * Declare an image as decorative by providing `alt=""`.
+     *
+     * See:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
+     */
+    alt?: "" | undefined;
+    /**
+     * Declare an image as decorative only if the Image field does not have
+     * alternative text by providing `fallbackAlt=""`.
+     *
+     * See:
+     * https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/alt#decorative_images
+     */
+    fallbackAlt?: "" | undefined;
+} & {
+    /**
+     * Not used when the `widths` prop is used.
+     */
+    widths?: undefined;
+    /**
+     * Pixel densities used to build a `srcset` value for the Image field.
+     *
+     * If a `pixelDensities` prop is passed `"defaults"`, the following
+     * pixel densities will be used: 1, 2, 3.
+     */
+    pixelDensities: NonNullable<Parameters<typeof prismicH.asImagePixelDensitySrcSet>[1]>["pixelDensities"] | "defaults";
+}, "children" | "slot" | "style" | "title" | "className" | "color" | "height" | "id" | "lang" | "width" | "role" | "tabIndex" | "crossOrigin" | "widths" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "useMap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "referrerPolicy" | "alt" | "loading" | "decoding" | "sizes" | "srcSet" | "field" | "pixelDensities" | "imgixParams" | "fallbackAlt">) & React.RefAttributes<HTMLImageElement>>;
 
 declare type WordSeparators = "-" | "_" | " ";
 declare type Split<S extends string, Delimiter extends string> = S extends `${infer Head}${Delimiter}${infer Tail}` ? [Head, ...Split<Tail, Delimiter>] : S extends Delimiter ? [] : [S];
@@ -361,20 +544,47 @@ declare type CamelCase<K> = K extends string ? CamelCaseStringArray<Split<K exte
  */
 declare type PascalCase<Value> = CamelCase<Value> extends string ? Capitalize<CamelCase<Value>> : CamelCase<Value>;
 
+/**
+ * Returns the type of a `SliceLike` type.
+ *
+ * @typeParam Slice - The Slice from which the type will be extracted.
+ */
+declare type ExtractSliceType<Slice extends SliceLike> = Slice extends SliceLikeRestV2 ? Slice["slice_type"] : Slice extends SliceLikeGraphQL ? Slice["type"] : never;
+/**
+ * The minimum required properties to represent a Prismic Slice from the Prismic
+ * Rest API V2 for the `<SliceZone>` component.
+ *
+ * If using Prismic's Rest API V2, use the `Slice` export from
+ * `@prismicio/types` for a full interface.
+ *
+ * @typeParam SliceType - Type name of the Slice.
+ */
+declare type SliceLikeRestV2<SliceType extends string = string> = {
+    slice_type: prismicT.Slice<SliceType>["slice_type"];
+};
+/**
+ * The minimum required properties to represent a Prismic Slice from the Prismic
+ * GraphQL API for the `<SliceZone>` component.
+ *
+ * @typeParam SliceType - Type name of the Slice.
+ */
+declare type SliceLikeGraphQL<SliceType extends string = string> = {
+    type: prismicT.Slice<SliceType>["slice_type"];
+};
 /**
  * The minimum required properties to represent a Prismic Slice for the
  * `<SliceZone>` component.
  *
- * If using Prismic's REST API, use the `Slice` export from `@prismicio/types`
- * for a full interface.
+ * If using Prismic's Rest API V2, use the `Slice` export from
+ * `@prismicio/types` for a full interface.
  *
  * @typeParam SliceType - Type name of the Slice.
  */
-declare type SliceLike<SliceType extends string = string> = Pick<prismicT.Slice<SliceType>, "slice_type">;
+declare type SliceLike<SliceType extends string = string> = SliceLikeRestV2<SliceType> | SliceLikeGraphQL<SliceType>;
 /**
  * A looser version of the `SliceZone` type from `@prismicio/types` using `SliceLike`.
  *
- * If using Prismic's REST API, use the `SliceZone` export from
+ * If using Prismic's Rest API V2, use the `SliceZone` export from
  * `@prismicio/types` for the full type.
  *
  * @typeParam TSlice - The type(s) of a Slice in the Slice Zone.
@@ -421,7 +631,7 @@ declare type SliceComponentType<TSlice extends SliceLike = SliceLike, TContext =
  * @typeParam TContext - Arbitrary data made available to all Slice components.
  */
 declare type SliceZoneComponents<TSlice extends SliceLike = SliceLike, TContext = unknown> = {
-    [SliceType in keyof Record<TSlice["slice_type"], never>]: SliceComponentType<Extract<TSlice, SliceLike<SliceType>> extends never ? SliceLike : Extract<TSlice, SliceLike<SliceType>>, TContext>;
+    [SliceType in ExtractSliceType<TSlice>]: SliceComponentType<Extract<TSlice, SliceLike<SliceType>> extends never ? SliceLike : Extract<TSlice, SliceLike<SliceType>>, TContext>;
 };
 /**
  * This Slice component can be used as a reminder to provide a proper implementation.
@@ -441,7 +651,7 @@ declare type SliceZoneResolverArgs<TSlice extends SliceLike = SliceLike> = {
     /**
      * The name of the Slice.
      */
-    sliceName: PascalCase<TSlice["slice_type"]>;
+    sliceName: PascalCase<ExtractSliceType<TSlice>>;
     /**
      * The index of the Slice in the Slice Zone.
      */
@@ -1074,4 +1284,4 @@ declare const Elements: {
     readonly span: "span";
 };
 
-export { Elements, JSXFunctionSerializer, JSXMapSerializer, LinkProps, PrismicClientHookState, PrismicContextValue, PrismicLink, PrismicLinkProps, PrismicProvider, PrismicProviderProps, PrismicRichText, PrismicRichTextProps, PrismicText, PrismicTextProps, PrismicToolbar, PrismicToolbarProps, SliceComponentProps, SliceComponentType, SliceLike, SliceZone, SliceZoneComponents, SliceZoneLike, SliceZoneProps, SliceZoneResolver, TODOSliceComponent, UsePrismicPreviewResolverArgs, useAllPrismicDocumentsByEveryTag, useAllPrismicDocumentsByIDs, useAllPrismicDocumentsBySomeTags, useAllPrismicDocumentsByTag, useAllPrismicDocumentsByType, useAllPrismicDocumentsByUIDs, useAllPrismicDocumentsDangerously, useFirstPrismicDocument, usePrismicClient, usePrismicContext, usePrismicDocumentByID, usePrismicDocumentByUID, usePrismicDocuments, usePrismicDocumentsByEveryTag, usePrismicDocumentsByIDs, usePrismicDocumentsBySomeTags, usePrismicDocumentsByTag, usePrismicDocumentsByType, usePrismicDocumentsByUIDs, usePrismicPreviewResolver, useSinglePrismicDocument };
+export { Elements, JSXFunctionSerializer, JSXMapSerializer, LinkProps, PrismicClientHookState, PrismicContextValue, PrismicImage, PrismicImageProps, PrismicLink, PrismicLinkProps, PrismicProvider, PrismicProviderProps, PrismicRichText, PrismicRichTextProps, PrismicText, PrismicTextProps, PrismicToolbar, PrismicToolbarProps, SliceComponentProps, SliceComponentType, SliceLike, SliceZone, SliceZoneComponents, SliceZoneLike, SliceZoneProps, SliceZoneResolver, TODOSliceComponent, UsePrismicPreviewResolverArgs, useAllPrismicDocumentsByEveryTag, useAllPrismicDocumentsByIDs, useAllPrismicDocumentsBySomeTags, useAllPrismicDocumentsByTag, useAllPrismicDocumentsByType, useAllPrismicDocumentsByUIDs, useAllPrismicDocumentsDangerously, useFirstPrismicDocument, usePrismicClient, usePrismicContext, usePrismicDocumentByID, usePrismicDocumentByUID, usePrismicDocuments, usePrismicDocumentsByEveryTag, usePrismicDocumentsByIDs, usePrismicDocumentsBySomeTags, usePrismicDocumentsByTag, usePrismicDocumentsByType, usePrismicDocumentsByUIDs, usePrismicPreviewResolver, useSinglePrismicDocument };

package/dist/index.js

@@ -77,11 +77,11 @@ const _PrismicLink = (props, ref) => {
   } else if ("field" in props && props.field) {
     href = prismicH.asLink(props.field, linkResolver);
   }
-  const target = props.target || "field" in props && props.field && "target" in props.field && props.field.target || void 0;
+  const isInternal = href && isInternalURL(href);
+  const target = props.target || "field" in props && props.field && "target" in props.field && props.field.target || !isInternal && "_blank" || void 0;
   const rel = props.rel || (target === "_blank" ? "noopener noreferrer" : void 0);
   const InternalComponent = props.internalComponent || context.internalLinkComponent || defaultInternalComponent;
   const ExternalComponent = props.externalComponent || context.externalLinkComponent || defaultExternalComponent;
-  const isInternal = href && isInternalURL(href);
   const Component = isInternal ? InternalComponent : ExternalComponent;
   const passthroughProps = Object.assign({}, props);
   delete passthroughProps.linkResolver;
@@ -104,6 +104,9 @@ const _PrismicLink = (props, ref) => {
     rel
   }) : null;
 };
+if (!__PRODUCTION__) {
+  _PrismicLink.displayName = "PrismicLink";
+}
 const PrismicLink = React.forwardRef(_PrismicLink);
 
 const PrismicText = (props) => {
@@ -237,7 +240,7 @@ const PrismicRichText = (props) => {
       });
       return /* @__PURE__ */ React.createElement(React.Fragment, null, serialized);
     } else {
-      return null;
+      return props.fallback != null ? /* @__PURE__ */ React.createElement(React.Fragment, null, props.fallback) : null;
     }
   }, [
     props.field,
@@ -245,11 +248,73 @@ const PrismicRichText = (props) => {
     props.externalLinkComponent,
     props.components,
     props.linkResolver,
+    props.fallback,
     context.linkResolver,
     context.richTextComponents
   ]);
 };
 
+var version = "2.4.0";
+
+const devMsg = (slug) => {
+  return `https://prismic.dev/msg/react/v${version}/${slug}`;
+};
+
+const _PrismicImage = (props, ref) => {
+  const {
+    field,
+    alt,
+    fallbackAlt,
+    imgixParams,
+    widths,
+    pixelDensities,
+    ...restProps
+  } = props;
+  if (!__PRODUCTION__) {
+    if (typeof alt === "string" && props.alt !== "") {
+      console.warn(`[PrismicImage] The "alt" prop can only be used to declare an image as decorative by passing an empty string (alt="") but was provided a non-empty string. You can resolve this warning by removing the "alt" prop or changing it to alt="". For more details, see ${devMsg("alt-must-be-an-empty-string")}`);
+    }
+    if (typeof fallbackAlt === "string" && fallbackAlt !== "") {
+      console.warn(`[PrismicImage] The "fallbackAlt" prop can only be used to declare an image as decorative by passing an empty string (fallbackAlt="") but was provided a non-empty string. You can resolve this warning by removing the "fallbackAlt" prop or changing it to fallbackAlt="". For more details, see ${devMsg("alt-must-be-an-empty-string")}`);
+    }
+    if (widths && pixelDensities) {
+      console.warn(`[PrismicImage] Only one of "widths" or "pixelDensities" props can be provided. You can resolve this warning by removing either the "widths" or "pixelDensities" prop. "widths" will be used in this case.`);
+    }
+  }
+  if (prismicH.isFilled.imageThumbnail(field)) {
+    let src;
+    let srcSet;
+    if (widths || !pixelDensities) {
+      const res = prismicH.asImageWidthSrcSet(field, {
+        ...imgixParams,
+        widths: widths === "defaults" ? void 0 : widths
+      });
+      src = res.src;
+      srcSet = res.srcset;
+    } else if (pixelDensities) {
+      const res = prismicH.asImagePixelDensitySrcSet(field, {
+        ...imgixParams,
+        pixelDensities: pixelDensities === "defaults" ? void 0 : pixelDensities
+      });
+      src = res.src;
+      srcSet = res.srcset;
+    }
+    return /* @__PURE__ */ React.createElement("img", {
+      ref,
+      src,
+      srcSet,
+      alt: alt != null ? alt : field.alt || fallbackAlt,
+      ...restProps
+    });
+  } else {
+    return null;
+  }
+};
+if (!__PRODUCTION__) {
+  _PrismicImage.displayName = "PrismicImage";
+}
+const PrismicImage = React.forwardRef(_PrismicImage);
+
 const pascalCase = (input) => {
   const camelCased = input.replace(/(?:-|_)(\w)/g, (_, c) => {
     return c ? c.toUpperCase() : "";
@@ -260,13 +325,14 @@ const pascalCase = (input) => {
 const TODOSliceComponent = __PRODUCTION__ ? () => null : ({
   slice
 }) => {
+  const type = "slice_type" in slice ? slice.slice_type : slice.type;
   React.useEffect(() => {
-    console.warn(`[SliceZone] Could not find a component for Slice type "${slice.slice_type}"`, slice);
-  }, [slice]);
+    console.warn(`[SliceZone] Could not find a component for Slice type "${type}"`, slice);
+  }, [slice, type]);
   return /* @__PURE__ */ React.createElement("section", {
     "data-slice-zone-todo-component": "",
-    "data-slice-type": slice.slice_type
-  }, "Could not find a component for Slice type \u201C", slice.slice_type, "\u201D");
+    "data-slice-type": type
+  }, "Could not find a component for Slice type \u201C", type, "\u201D");
 };
 const SliceZone = ({
   slices = [],
@@ -277,11 +343,12 @@ const SliceZone = ({
 }) => {
   const renderedSlices = React.useMemo(() => {
     return slices.map((slice, index) => {
-      let Comp = components[slice.slice_type] || defaultComponent;
+      const type = "slice_type" in slice ? slice.slice_type : slice.type;
+      let Comp = components[type] || defaultComponent;
       if (resolver) {
         const resolvedComp = resolver({
           slice,
-          sliceName: pascalCase(slice.slice_type),
+          sliceName: pascalCase(type),
           i: index
         });
         if (resolvedComp) {
@@ -315,6 +382,9 @@ const PrismicToolbar = ({
       script.dataset.prismicToolbar = "";
       script.dataset.repositoryName = repositoryName;
       script.dataset.type = type;
+      if (process.env.NODE_ENV === "test") {
+        script._evaluateScript = false;
+      }
       document.body.appendChild(script);
     }
   }, [repositoryName, type, src]);
@@ -427,5 +497,5 @@ const useAllPrismicDocumentsByEveryTag = (...args) => useStatefulPrismicClientMe
 
 const Elements = Element;
 
-export { Elements, PrismicLink, PrismicProvider, PrismicRichText, PrismicText, PrismicToolbar, SliceZone, TODOSliceComponent, useAllPrismicDocumentsByEveryTag, useAllPrismicDocumentsByIDs, useAllPrismicDocumentsBySomeTags, useAllPrismicDocumentsByTag, useAllPrismicDocumentsByType, useAllPrismicDocumentsByUIDs, useAllPrismicDocumentsDangerously, useFirstPrismicDocument, usePrismicClient, usePrismicContext, usePrismicDocumentByID, usePrismicDocumentByUID, usePrismicDocuments, usePrismicDocumentsByEveryTag, usePrismicDocumentsByIDs, usePrismicDocumentsBySomeTags, usePrismicDocumentsByTag, usePrismicDocumentsByType, usePrismicDocumentsByUIDs, usePrismicPreviewResolver, useSinglePrismicDocument };
+export { Elements, PrismicImage, PrismicLink, PrismicProvider, PrismicRichText, PrismicText, PrismicToolbar, SliceZone, TODOSliceComponent, useAllPrismicDocumentsByEveryTag, useAllPrismicDocumentsByIDs, useAllPrismicDocumentsBySomeTags, useAllPrismicDocumentsByTag, useAllPrismicDocumentsByType, useAllPrismicDocumentsByUIDs, useAllPrismicDocumentsDangerously, useFirstPrismicDocument, usePrismicClient, usePrismicContext, usePrismicDocumentByID, usePrismicDocumentByUID, usePrismicDocuments, usePrismicDocumentsByEveryTag, usePrismicDocumentsByIDs, usePrismicDocumentsBySomeTags, usePrismicDocumentsByTag, usePrismicDocumentsByType, usePrismicDocumentsByUIDs, usePrismicPreviewResolver, useSinglePrismicDocument };
 //# sourceMappingURL=index.js.map