react-datocms 4.0.6 → 4.0.8

package/dist/types/Image/index.d.ts

@@ -1,6 +1,6 @@
 import React, { CSSProperties } from 'react';
-declare type Maybe<T> = T | null;
-export declare type ResponsiveImageType = {
+type Maybe<T> = T | null;
+export type ResponsiveImageType = {
     /** A base64-encoded thumbnail to offer during image loading */
     base64?: Maybe<string>;
     /** The height of the image */
@@ -24,7 +24,7 @@ export declare type ResponsiveImageType = {
     /** Title attribute (`title`) for the image */
     title?: Maybe<string>;
 };
-export declare type ImagePropTypes = {
+export type ImagePropTypes = {
     /** The actual response you get from a DatoCMS `responsiveImage` GraphQL query */
     data: ResponsiveImageType;
     /** Additional CSS className for root node */

package/dist/types/Seo/types.d.ts

@@ -40,6 +40,6 @@ export interface SeoLinkTag {
     content?: null;
     attributes: FaviconAttributes | AppleTouchIconAttributes;
 }
-export declare type SeoTag = SeoTitleTag | SeoMetaTag;
-export declare type FaviconTag = SeoMetaTag | SeoLinkTag;
-export declare type SeoOrFaviconTag = SeoTag | FaviconTag;
+export type SeoTag = SeoTitleTag | SeoMetaTag;
+export type FaviconTag = SeoMetaTag | SeoLinkTag;
+export type SeoOrFaviconTag = SeoTag | FaviconTag;

package/dist/types/StructuredText/index.d.ts

@@ -4,28 +4,28 @@ import { ReactElement } from 'react';
 export { renderNodeRule, renderMarkRule, RenderError };
 export { renderNodeRule as renderRule };
 export type { StructuredTextGraphQlResponse, StructuredTextDocument, StructuredTextGraphQlResponseRecord, };
-declare type AdapterReturn = ReactElement | string | null;
+type AdapterReturn = ReactElement | string | null;
 export declare const defaultAdapter: {
     renderNode: (...args: any) => AdapterReturn;
     renderFragment: (children: ReactElement | null[], key: string) => AdapterReturn;
     renderText: (text: string, key: string) => AdapterReturn;
 };
 export declare function appendKeyToValidElement(element: ReactElement | null, key: string): ReactElement | null;
-declare type H = typeof defaultAdapter.renderNode;
-declare type T = typeof defaultAdapter.renderText;
-declare type F = typeof defaultAdapter.renderFragment;
-export declare type RenderInlineRecordContext<R extends StructuredTextGraphQlResponseRecord> = {
+type H = typeof defaultAdapter.renderNode;
+type T = typeof defaultAdapter.renderText;
+type F = typeof defaultAdapter.renderFragment;
+export type RenderInlineRecordContext<R extends StructuredTextGraphQlResponseRecord> = {
     record: R;
 };
-export declare type RenderRecordLinkContext<R extends StructuredTextGraphQlResponseRecord> = {
+export type RenderRecordLinkContext<R extends StructuredTextGraphQlResponseRecord> = {
     record: R;
     children: RenderResult<H, T, F>;
     transformedMeta: TransformedMeta;
 };
-export declare type RenderBlockContext<R extends StructuredTextGraphQlResponseRecord> = {
+export type RenderBlockContext<R extends StructuredTextGraphQlResponseRecord> = {
     record: R;
 };
-export declare type StructuredTextPropTypes<R1 extends StructuredTextGraphQlResponseRecord, R2 extends StructuredTextGraphQlResponseRecord = R1> = {
+export type StructuredTextPropTypes<R1 extends StructuredTextGraphQlResponseRecord, R2 extends StructuredTextGraphQlResponseRecord = R1> = {
     /** The actual field value you get from DatoCMS **/
     data: StructuredTextGraphQlResponse<R1, R2> | StructuredTextDocument | Node | null | undefined;
     /** A set of additional rules to convert nodes to JSX **/

package/dist/types/useQuerySubscription/index.d.ts

@@ -1,18 +1,18 @@
 import { ChannelErrorData, ConnectionStatus, Options } from 'datocms-listen';
-export declare type SubscribeToQueryOptions<QueryResult, QueryVariables> = Omit<Options<QueryResult, QueryVariables>, 'onStatusChange' | 'onUpdate' | 'onChannelError'>;
-export declare type EnabledQueryListenerOptions<QueryResult, QueryVariables> = {
+export type SubscribeToQueryOptions<QueryResult, QueryVariables> = Omit<Options<QueryResult, QueryVariables>, 'onStatusChange' | 'onUpdate' | 'onChannelError'>;
+export type EnabledQueryListenerOptions<QueryResult, QueryVariables> = {
     /** Whether the subscription has to be performed or not */
     enabled?: true;
     /** The initial data to use while the initial request is being performed */
     initialData?: QueryResult;
 } & SubscribeToQueryOptions<QueryResult, QueryVariables>;
-export declare type DisabledQueryListenerOptions<QueryResult, QueryVariables> = {
+export type DisabledQueryListenerOptions<QueryResult, QueryVariables> = {
     /** Whether the subscription has to be performed or not */
     enabled: false;
     /** The initial data to use while the initial request is being performed */
     initialData?: QueryResult;
 } & Partial<SubscribeToQueryOptions<QueryResult, QueryVariables>>;
-export declare type QueryListenerOptions<QueryResult, QueryVariables> = EnabledQueryListenerOptions<QueryResult, QueryVariables> | DisabledQueryListenerOptions<QueryResult, QueryVariables>;
+export type QueryListenerOptions<QueryResult, QueryVariables> = EnabledQueryListenerOptions<QueryResult, QueryVariables> | DisabledQueryListenerOptions<QueryResult, QueryVariables>;
 export declare function useQuerySubscription<QueryResult = any, QueryVariables = Record<string, any>>(options: QueryListenerOptions<QueryResult, QueryVariables>): {
     error: ChannelErrorData | null;
     status: ConnectionStatus;

package/dist/types/useSiteSearch/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-declare type SearchResultInstancesHrefSchema = {
+type SearchResultInstancesHrefSchema = {
     page?: {
         offset?: number;
         limit?: number;
@@ -14,13 +14,13 @@ declare type SearchResultInstancesHrefSchema = {
     };
     [k: string]: unknown;
 };
-declare type SearchResultInstancesTargetSchema = {
+type SearchResultInstancesTargetSchema = {
     data: RawSearchResult[];
     meta: {
         total_count: number;
     };
 };
-export declare type RawSearchResult = {
+export type RawSearchResult = {
     type: 'search_result';
     id: string;
     attributes: {
@@ -42,8 +42,8 @@ declare class GenericClient {
         rawList(queryParams: SearchResultInstancesHrefSchema): Promise<SearchResultInstancesTargetSchema>;
     };
 }
-declare type Highlighter = (match: string, key: string, context: 'title' | 'bodyExcerpt') => React.ReactNode;
-export declare type UseSiteSearchConfig<Client extends GenericClient> = {
+type Highlighter = (match: string, key: string, context: 'title' | 'bodyExcerpt') => React.ReactNode;
+export type UseSiteSearchConfig<Client extends GenericClient> = {
     client: Client;
     buildTriggerId: string;
     fuzzySearch?: boolean;
@@ -55,19 +55,19 @@ export declare type UseSiteSearchConfig<Client extends GenericClient> = {
         query?: string;
     };
 };
-declare type SearchResult = {
+type SearchResult = {
     id: string;
     title: React.ReactNode;
     bodyExcerpt: React.ReactNode;
     url: string;
     raw: RawSearchResult;
 };
-export declare type UseSiteSearchData = {
+export type UseSiteSearchData = {
     pageResults: SearchResult[];
     totalResults: number;
     totalPages: number;
 };
-export declare type UseSiteSearchResult = {
+export type UseSiteSearchResult = {
     state: {
         query: string;
         setQuery: (newQuery: string) => void;

package/package.json

@@ -1,9 +1,39 @@
 {
   "name": "react-datocms",
-  "version": "4.0.6",
+  "version": "4.0.8",
   "types": "dist/types/index.d.ts",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
+  "exports": {
+    ".": "./dist/cjs/index.js",
+    "./seo": "./dist/cjs/Seo/index.js",
+    "./image": "./dist/cjs/Image/index.js",
+    "./structured-text": "./dist/cjs/StructuredText/index.js",
+    "./use-query-subscription": "./dist/cjs/useQuerySubscription/index.js",
+    "./use-site-search": "./dist/cjs/useSiteSearch/index.js"
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/types/index.d.ts"
+      ],
+      "seo": [
+        "./dist/types/Seo/index.d.ts"
+      ],
+      "image": [
+        "./dist/types/Image/index.d.ts"
+      ],
+      "structured-text": [
+        "./dist/types/StructuredText/index.d.ts"
+      ],
+      "use-query-subscription": [
+        "./dist/types/useQuerySubscription/index.d.ts"
+      ],
+      "use-site-search": [
+        "./dist/types/useSiteSearch/index.d.ts"
+      ]
+    }
+  },
   "sideEffects": false,
   "files": [
     "dist",

package/src/Image/__tests__/__snapshots__/index.test.tsx.snap

@@ -230,6 +230,87 @@ exports[`Image layout=fill visible renders the image (minimal data) 1`] = `
 </ForwardRef>
 `;
 
+exports[`Image layout=fill visible renders the image (relative URL) 1`] = `
+<ForwardRef
+  data={
+    Object {
+      "base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z",
+      "height": 421,
+      "src": "/205/image.png?ar=16%3A9&fit=crop&w=750",
+      "width": 750,
+    }
+  }
+  intersectionThreshold={0.2}
+  layout="fill"
+>
+  <div
+    style={
+      Object {
+        "height": "100%",
+        "left": 0,
+        "maxHeight": "none",
+        "maxWidth": "none",
+        "overflow": "hidden",
+        "position": "absolute",
+        "top": 0,
+        "width": "100%",
+      }
+    }
+  >
+    <img
+      alt=""
+      aria-hidden="true"
+      role="presentation"
+      src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z"
+      style={
+        Object {
+          "backgroundColor": undefined,
+          "height": "110%",
+          "left": "-5%",
+          "maxHeight": "none",
+          "maxWidth": "none",
+          "objectFit": undefined,
+          "objectPosition": undefined,
+          "opacity": 1,
+          "position": "absolute",
+          "top": "-5%",
+          "transition": "opacity 500ms",
+          "width": "110%",
+        }
+      }
+    />
+    <picture>
+      <source
+        srcSet="/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.25 187w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.5 375w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.75 562w,/205/image.png?ar=16%3A9&fit=crop&w=750 750w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=1.5 1125w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=2 1500w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=3 2250w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=4 3000w"
+      />
+      <img
+        alt=""
+        onLoad={[Function]}
+        src="/205/image.png?ar=16%3A9&fit=crop&w=750"
+        style={
+          Object {
+            "height": "100%",
+            "left": 0,
+            "maxHeight": "none",
+            "maxWidth": "none",
+            "objectFit": undefined,
+            "objectPosition": undefined,
+            "opacity": 0,
+            "position": "absolute",
+            "top": 0,
+            "transition": "opacity 500ms",
+            "width": "100%",
+          }
+        }
+      />
+    </picture>
+    <noscript>
+      <picture />
+    </noscript>
+  </div>
+</ForwardRef>
+`;
+
 exports[`Image layout=fill visible renders the image 1`] = `
 <ForwardRef
   data={
@@ -566,6 +647,93 @@ exports[`Image layout=fixed visible renders the image (minimal data) 1`] = `
 </ForwardRef>
 `;
 
+exports[`Image layout=fixed visible renders the image (relative URL) 1`] = `
+<ForwardRef
+  data={
+    Object {
+      "base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z",
+      "height": 421,
+      "src": "/205/image.png?ar=16%3A9&fit=crop&w=750",
+      "width": 750,
+    }
+  }
+  intersectionThreshold={0.2}
+  layout="fixed"
+>
+  <div
+    style={
+      Object {
+        "overflow": "hidden",
+        "position": "relative",
+        "width": 750,
+      }
+    }
+  >
+    <img
+      alt=""
+      aria-hidden="true"
+      src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NTAiIGhlaWdodD0iNDIxIj48L3N2Zz4="
+      style={
+        Object {
+          "display": "block",
+          "width": "100%",
+        }
+      }
+    />
+    <img
+      alt=""
+      aria-hidden="true"
+      role="presentation"
+      src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z"
+      style={
+        Object {
+          "backgroundColor": undefined,
+          "height": "110%",
+          "left": "-5%",
+          "maxHeight": "none",
+          "maxWidth": "none",
+          "objectFit": undefined,
+          "objectPosition": undefined,
+          "opacity": 1,
+          "position": "absolute",
+          "top": "-5%",
+          "transition": "opacity 500ms",
+          "width": "110%",
+        }
+      }
+    />
+    <picture>
+      <source
+        srcSet="/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.25 187w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.5 375w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.75 562w,/205/image.png?ar=16%3A9&fit=crop&w=750 750w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=1.5 1125w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=2 1500w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=3 2250w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=4 3000w"
+      />
+      <img
+        alt=""
+        onLoad={[Function]}
+        src="/205/image.png?ar=16%3A9&fit=crop&w=750"
+        style={
+          Object {
+            "height": "100%",
+            "left": 0,
+            "maxHeight": "none",
+            "maxWidth": "none",
+            "objectFit": undefined,
+            "objectPosition": undefined,
+            "opacity": 0,
+            "position": "absolute",
+            "top": 0,
+            "transition": "opacity 500ms",
+            "width": "100%",
+          }
+        }
+      />
+    </picture>
+    <noscript>
+      <picture />
+    </noscript>
+  </div>
+</ForwardRef>
+`;
+
 exports[`Image layout=fixed visible renders the image 1`] = `
 <ForwardRef
   data={
@@ -911,6 +1079,94 @@ exports[`Image layout=intrinsic visible renders the image (minimal data) 1`] = `
 </ForwardRef>
 `;
 
+exports[`Image layout=intrinsic visible renders the image (relative URL) 1`] = `
+<ForwardRef
+  data={
+    Object {
+      "base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z",
+      "height": 421,
+      "src": "/205/image.png?ar=16%3A9&fit=crop&w=750",
+      "width": 750,
+    }
+  }
+  intersectionThreshold={0.2}
+  layout="intrinsic"
+>
+  <div
+    style={
+      Object {
+        "maxWidth": 750,
+        "overflow": "hidden",
+        "position": "relative",
+        "width": "100%",
+      }
+    }
+  >
+    <img
+      alt=""
+      aria-hidden="true"
+      src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NTAiIGhlaWdodD0iNDIxIj48L3N2Zz4="
+      style={
+        Object {
+          "display": "block",
+          "width": "100%",
+        }
+      }
+    />
+    <img
+      alt=""
+      aria-hidden="true"
+      role="presentation"
+      src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z"
+      style={
+        Object {
+          "backgroundColor": undefined,
+          "height": "110%",
+          "left": "-5%",
+          "maxHeight": "none",
+          "maxWidth": "none",
+          "objectFit": undefined,
+          "objectPosition": undefined,
+          "opacity": 1,
+          "position": "absolute",
+          "top": "-5%",
+          "transition": "opacity 500ms",
+          "width": "110%",
+        }
+      }
+    />
+    <picture>
+      <source
+        srcSet="/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.25 187w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.5 375w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.75 562w,/205/image.png?ar=16%3A9&fit=crop&w=750 750w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=1.5 1125w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=2 1500w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=3 2250w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=4 3000w"
+      />
+      <img
+        alt=""
+        onLoad={[Function]}
+        src="/205/image.png?ar=16%3A9&fit=crop&w=750"
+        style={
+          Object {
+            "height": "100%",
+            "left": 0,
+            "maxHeight": "none",
+            "maxWidth": "none",
+            "objectFit": undefined,
+            "objectPosition": undefined,
+            "opacity": 0,
+            "position": "absolute",
+            "top": 0,
+            "transition": "opacity 500ms",
+            "width": "100%",
+          }
+        }
+      />
+    </picture>
+    <noscript>
+      <picture />
+    </noscript>
+  </div>
+</ForwardRef>
+`;
+
 exports[`Image layout=intrinsic visible renders the image 1`] = `
 <ForwardRef
   data={
@@ -1254,6 +1510,93 @@ exports[`Image layout=responsive visible renders the image (minimal data) 1`] =
 </ForwardRef>
 `;
 
+exports[`Image layout=responsive visible renders the image (relative URL) 1`] = `
+<ForwardRef
+  data={
+    Object {
+      "base64": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z",
+      "height": 421,
+      "src": "/205/image.png?ar=16%3A9&fit=crop&w=750",
+      "width": 750,
+    }
+  }
+  intersectionThreshold={0.2}
+  layout="responsive"
+>
+  <div
+    style={
+      Object {
+        "overflow": "hidden",
+        "position": "relative",
+        "width": "100%",
+      }
+    }
+  >
+    <img
+      alt=""
+      aria-hidden="true"
+      src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI3NTAiIGhlaWdodD0iNDIxIj48L3N2Zz4="
+      style={
+        Object {
+          "display": "block",
+          "width": "100%",
+        }
+      }
+    />
+    <img
+      alt=""
+      aria-hidden="true"
+      role="presentation"
+      src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z"
+      style={
+        Object {
+          "backgroundColor": undefined,
+          "height": "110%",
+          "left": "-5%",
+          "maxHeight": "none",
+          "maxWidth": "none",
+          "objectFit": undefined,
+          "objectPosition": undefined,
+          "opacity": 1,
+          "position": "absolute",
+          "top": "-5%",
+          "transition": "opacity 500ms",
+          "width": "110%",
+        }
+      }
+    />
+    <picture>
+      <source
+        srcSet="/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.25 187w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.5 375w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=0.75 562w,/205/image.png?ar=16%3A9&fit=crop&w=750 750w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=1.5 1125w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=2 1500w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=3 2250w,/205/image.png?ar=16%3A9&fit=crop&w=750&dpr=4 3000w"
+      />
+      <img
+        alt=""
+        onLoad={[Function]}
+        src="/205/image.png?ar=16%3A9&fit=crop&w=750"
+        style={
+          Object {
+            "height": "100%",
+            "left": 0,
+            "maxHeight": "none",
+            "maxWidth": "none",
+            "objectFit": undefined,
+            "objectPosition": undefined,
+            "opacity": 0,
+            "position": "absolute",
+            "top": 0,
+            "transition": "opacity 500ms",
+            "width": "100%",
+          }
+        }
+      />
+    </picture>
+    <noscript>
+      <picture />
+    </noscript>
+  </div>
+</ForwardRef>
+`;
+
 exports[`Image layout=responsive visible renders the image 1`] = `
 <ForwardRef
   data={

package/src/Image/__tests__/index.test.tsx

@@ -26,6 +26,14 @@ const minimalData = {
   width: 750,
 };
 
+const minimalDataWithRelativeUrl = {
+  base64:
+    'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAoHBwgHBgoICAgLFQoLDhgQDg0NDh0eHREYIx8lJCIrHB0dLSs7GikyKSEuKjUlKDk1MjIyHyo4PTc+PDcxPjUBCgsLDg0OHBAQHDsoIig7Ozs7Ozs7OzsvOzs7Ozs7Ozs7Lzs7Ozs7Ozs7OzsvOzs7NTsvLy87NTU1Ly8vLzsvL//AABEIAA0AGAMBIgACEQEDEQH/xAAYAAACAwAAAAAAAAAAAAAAAAAGBwABBP/EACEQAAEEAAYDAAAAAAAAAAAAAAEAAgMEBQYHESEiFWFx/8QAFQEBAQAAAAAAAAAAAAAAAAAAAwL/xAAZEQADAAMAAAAAAAAAAAAAAAAAAQIRITH/2gAMAwEAAhEDEQA/AFxLgDWTsAd1J5TGy7hEYqNAaNgECX7sjLMQAHJTEy1Zcarfia4lJMauAxqBhLY6ZlaOzDurWvUOd3jZPfCiEh4xs//Z',
+  height: 421,
+  src: '/205/image.png?ar=16%3A9&fit=crop&w=750',
+  width: 750,
+};
+
 describe('Image', () => {
   // intersectionThreshold is an hack to make tests work
   // we need the library to generate a different IntersectionObserver for each test
@@ -65,6 +73,19 @@ describe('Image', () => {
           expect(wrapper).toMatchSnapshot();
         });
 
+        it('renders the image (relative URL)', () => {
+          const wrapper = mount(
+            <Image
+              data={minimalDataWithRelativeUrl}
+              layout={layout}
+              intersectionThreshold={0.2}
+            />,
+          );
+          mockAllIsIntersecting(true);
+          wrapper.update();
+          expect(wrapper).toMatchSnapshot();
+        });
+
         describe('image loaded', () => {
           it('shows the image', () => {
             const wrapper = mount(

package/src/Image/index.tsx

@@ -146,6 +146,8 @@ const imageShowStrategy = ({ lazyLoad, loaded }: State) => {
   return true;
 };
 
+const bogusBaseUrl = 'https://example.com/';
+
 const buildSrcSet = (
   src: string | null | undefined,
   width: number | undefined,
@@ -157,7 +159,7 @@ const buildSrcSet = (
 
   return candidateMultipliers
     .map((multiplier) => {
-      const url = new URL(src);
+      const url = new URL(src, bogusBaseUrl);
 
       if (multiplier !== 1) {
         url.searchParams.set('dpr', `${multiplier}`);
@@ -183,7 +185,7 @@ const buildSrcSet = (
         return null;
       }
 
-      return `${url.toString()} ${finalWidth}w`;
+      return `${url.toString().replace(bogusBaseUrl, '/')} ${finalWidth}w`;
     })
     .filter(Boolean)
     .join(',');