react-datocms 8.0.0-0 → 8.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-datocms",
-  "version": "8.0.0-0",
+  "version": "8.0.0",
   "engines": {
     "node": ">=8.0.0"
   },
@@ -24,11 +24,6 @@
       "import": "./dist/esm/Image/index.js",
       "types": "./dist/types/Image/index.d.ts"
     },
-    "./video-player/lazy": {
-      "require": "./dist/cjs/VideoPlayer/lazy.js",
-      "import": "./dist/esm/VideoPlayer/lazy.js",
-      "types": "./dist/types/VideoPlayer/lazy.d.ts"
-    },
     "./video-player": {
       "require": "./dist/cjs/VideoPlayer/index.js",
       "import": "./dist/esm/VideoPlayer/index.js",
@@ -53,6 +48,16 @@
       "require": "./dist/cjs/useVideoPlayer/index.js",
       "import": "./dist/esm/useVideoPlayer/index.js",
       "types": "./dist/types/useVideoPlayer/index.d.ts"
+    },
+    "./use-content-link": {
+      "require": "./dist/cjs/useContentLink/index.js",
+      "import": "./dist/esm/useContentLink/index.js",
+      "types": "./dist/types/useContentLink/index.d.ts"
+    },
+    "./content-link": {
+      "require": "./dist/cjs/ContentLink/index.js",
+      "import": "./dist/esm/ContentLink/index.js",
+      "types": "./dist/types/ContentLink/index.d.ts"
     }
   },
   "typesVersions": {
@@ -69,9 +74,6 @@
       "video-player": [
         "./dist/types/VideoPlayer/index.d.ts"
       ],
-      "video-player/lazy": [
-        "./dist/types/VideoPlayer/lazy.d.ts"
-      ],
       "structured-text": [
         "./dist/types/StructuredText/index.d.ts"
       ],
@@ -83,6 +85,12 @@
       ],
       "use-video-player": [
         "./dist/types/useVideoPlayer/index.d.ts"
+      ],
+      "use-content-link": [
+        "./dist/types/useContentLink/index.d.ts"
+      ],
+      "content-link": [
+        "./dist/types/ContentLink/index.d.ts"
       ]
     }
   },
@@ -103,10 +111,11 @@
   "homepage": "https://github.com/datocms/react-datocms",
   "devDependencies": {
     "@biomejs/biome": "^1.6.3",
-    "@mux/mux-player-react": "*",
+    "@mux/mux-player-react": "^3.11.4",
     "@types/enzyme": "^3.10.8",
     "@types/enzyme-to-json": "^1.5.4",
     "@types/jest": "^29.5.11",
+    "@types/node": "^25.0.10",
     "@types/raf": "^3.4.0",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
@@ -123,8 +132,8 @@
     "react-dom": "^17.0.2",
     "resize-observer-polyfill": "^1.5.1",
     "rimraf": "^3.0.2",
-    "ts-jest": "^29.1.2",
-    "typescript": "^5.0.0"
+    "ts-jest": "^29.2.5",
+    "typescript": "^5.9.3"
   },
   "scripts": {
     "build": "rimraf dist && npm run tsc:types && npm run tsc:cjs && npm run tsc:esm",
@@ -138,15 +147,21 @@
     "tsc:esm": "tsc --project ./tsconfig.esnext.json"
   },
   "peerDependencies": {
+    "@mux/mux-player-react": ">=2.5.0",
     "react": ">= 16.12.0"
   },
+  "peerDependenciesMeta": {
+    "@mux/mux-player-react": {
+      "optional": true
+    }
+  },
   "dependencies": {
-    "datocms-listen": "^0.1.9",
-    "datocms-structured-text-generic-html-renderer": "^4.0.1",
-    "datocms-structured-text-utils": "^4.0.1",
+    "@datocms/content-link": "^0.3.13",
+    "datocms-listen": "^1.0.2",
+    "datocms-structured-text-generic-html-renderer": "^5.0.0",
+    "datocms-structured-text-utils": "^5.1.6",
     "react-intersection-observer": "^9.4.3",
     "react-string-replace": "^1.1.0",
-    "use-deep-compare-effect": "^1.6.1",
-    "@mux/mux-player-react": "*"
+    "use-deep-compare-effect": "^1.6.1"
   }
 }

package/src/ContentLink/index.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import { useEffect } from 'react';
+import {
+  type ClickToEditOptions,
+  type UseContentLinkOptions,
+  useContentLink,
+} from '../useContentLink/index.js';
+
+export type ContentLinkProps = Omit<UseContentLinkOptions, 'enabled'> & {
+  /** Current pathname to sync with Web Previews plugin */
+  currentPath?: string;
+  /**
+   * Whether to enable click-to-edit overlays on mount, or options to configure them.
+   *
+   * - `true`: Enable click-to-edit mode immediately
+   * - `{ scrollToNearestTarget: true }`: Enable and scroll to nearest editable if none visible
+   * - `{ hoverOnly: true }`: Only enable on devices with hover capability (non-touch)
+   * - `false`/`undefined`: Don't enable automatically (use Alt/Option key to toggle)
+   *
+   * @example
+   * ```tsx
+   * <ContentLink enableClickToEdit={true} />
+   * <ContentLink enableClickToEdit={{ scrollToNearestTarget: true }} />
+   * <ContentLink enableClickToEdit={{ hoverOnly: true, scrollToNearestTarget: true }} />
+   * ```
+   */
+  enableClickToEdit?: boolean | ClickToEditOptions;
+  /** Whether to strip stega encoding from text nodes after stamping. */
+  stripStega?: boolean;
+};
+
+/**
+ * ContentLink component for Visual Editing with DatoCMS.
+ *
+ * This component enables Visual Editing by:
+ * - Detecting stega-encoded metadata in content and creating click-to-edit overlays
+ * - Integrating with DatoCMS Web Previews plugin for in-editor editing
+ * - Supporting Alt/Option key for temporary click-to-edit mode
+ * - Providing bidirectional communication between preview and DatoCMS editor
+ *
+ * ## Basic Usage (Standalone Website with Click-to-Edit)
+ *
+ * For standalone websites with click-to-edit overlays:
+ *
+ * ```tsx
+ * import { ContentLink } from 'react-datocms';
+ *
+ * function App() {
+ *   return (
+ *     <>
+ *       <ContentLink enableClickToEdit={true} />
+ *       {/* Your content with stega-encoded data *\/}
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * ## Web Previews Plugin Integration (Next.js Example)
+ *
+ * For integration with DatoCMS Web Previews plugin, provide navigation callbacks:
+ *
+ * ```tsx
+ * 'use client';
+ * import { ContentLink } from 'react-datocms';
+ * import { useRouter, usePathname } from 'next/navigation';
+ *
+ * export function VisualEditing() {
+ *   const router = useRouter();
+ *   const pathname = usePathname();
+ *
+ *   return (
+ *     <ContentLink
+ *       onNavigateTo={(path) => router.push(path)}
+ *       currentPath={pathname}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * ## How Visual Editing Works
+ *
+ * 1. **Fetch content with stega encoding**: Use the `contentLink` and `baseEditingUrl` options
+ *    when fetching content from DatoCMS to embed editing metadata.
+ *
+ * 2. **Add ContentLink component**: Place this component in your app to scan for encoded
+ *    content and create overlays.
+ *
+ * 3. **Enable editing**: Either set `enableClickToEdit={true}` prop or hold Alt/Option key
+ *    for temporary editing mode.
+ *
+ * 4. **Click to edit**: Click on any content to open the DatoCMS editor at that field.
+ *
+ * @param props - Configuration props for ContentLink
+ * @returns null - This component has no visual output
+ */
+export function ContentLink(props: ContentLinkProps): null {
+  const {
+    currentPath,
+    enableClickToEdit: enableClickToEditOptions,
+    stripStega,
+    ...useContentLinkOptions
+  } = props;
+
+  const { enableClickToEdit, setCurrentPath } = useContentLink({
+    ...useContentLinkOptions,
+    enabled: stripStega !== undefined ? { stripStega } : true,
+  });
+
+  // Sync current path when it changes
+  useEffect(() => {
+    if (currentPath !== undefined) {
+      setCurrentPath(currentPath);
+    }
+  }, [currentPath, setCurrentPath]);
+
+  // Enable click-to-edit on mount if requested
+  useEffect(() => {
+    if (!enableClickToEditOptions) {
+      return;
+    }
+
+    // Never enable click-to-edit inside an iframe
+    if (typeof window === 'undefined' || window.parent !== window) {
+      return;
+    }
+
+    enableClickToEdit(
+      enableClickToEditOptions === true ? undefined : enableClickToEditOptions,
+    );
+  }, [enableClickToEditOptions, enableClickToEdit]);
+
+  return null;
+}

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

@@ -61,6 +61,7 @@ exports[`Image explicit sizes renders correctly 1`] = `
       <img
         alt=""
         onLoad={[Function]}
+        referrerPolicy="no-referrer-when-downgrade"
         src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
         style={
           {
@@ -205,6 +206,7 @@ exports[`Image layout=fill visible image loaded shows the image 1`] = `
       <img
         alt="DatoCMS swag"
         onLoad={[Function]}
+        referrerPolicy="no-referrer-when-downgrade"
         src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
         style={
           {
@@ -285,6 +287,7 @@ exports[`Image layout=fill visible renders the image (minimal data) 1`] = `
       <img
         alt=""
         onLoad={[Function]}
+        referrerPolicy="no-referrer-when-downgrade"
         src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
         style={
           {
@@ -364,6 +367,7 @@ exports[`Image layout=fill visible renders the image (relative URL) 1`] = `
       <img
         alt=""
         onLoad={[Function]}
+        referrerPolicy="no-referrer-when-downgrade"
         src="/205/image.png?ar=16%3A9&fit=crop&w=750"
         style={
           {
@@ -449,6 +453,7 @@ exports[`Image layout=fill visible renders the image 1`] = `
       <img
         alt="DatoCMS swag"
         onLoad={[Function]}
+        referrerPolicy="no-referrer-when-downgrade"
         src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
         style={
           {
@@ -606,6 +611,7 @@ exports[`Image layout=fixed visible image loaded shows the image 1`] = `
       <img
         alt="DatoCMS swag"
         onLoad={[Function]}
+        referrerPolicy="no-referrer-when-downgrade"
         src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
         style={
           {
@@ -692,6 +698,7 @@ exports[`Image layout=fixed visible renders the image (minimal data) 1`] = `
       <img
         alt=""
         onLoad={[Function]}
+        referrerPolicy="no-referrer-when-downgrade"
         src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
         style={
           {
@@ -777,6 +784,7 @@ exports[`Image layout=fixed visible renders the image (relative URL) 1`] = `
       <img
         alt=""
         onLoad={[Function]}
+        referrerPolicy="no-referrer-when-downgrade"
         src="/205/image.png?ar=16%3A9&fit=crop&w=750"
         style={
           {
@@ -868,6 +876,7 @@ exports[`Image layout=fixed visible renders the image 1`] = `
       <img
         alt="DatoCMS swag"
         onLoad={[Function]}
+        referrerPolicy="no-referrer-when-downgrade"
         src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
         style={
           {
@@ -1027,6 +1036,7 @@ exports[`Image layout=intrinsic visible image loaded shows the image 1`] = `
       <img
         alt="DatoCMS swag"
         onLoad={[Function]}
+        referrerPolicy="no-referrer-when-downgrade"
         src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
         style={
           {
@@ -1114,6 +1124,7 @@ exports[`Image layout=intrinsic visible renders the image (minimal data) 1`] = `
       <img
         alt=""
         onLoad={[Function]}
+        referrerPolicy="no-referrer-when-downgrade"
         src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
         style={
           {
@@ -1200,6 +1211,7 @@ exports[`Image layout=intrinsic visible renders the image (relative URL) 1`] = `
       <img
         alt=""
         onLoad={[Function]}
+        referrerPolicy="no-referrer-when-downgrade"
         src="/205/image.png?ar=16%3A9&fit=crop&w=750"
         style={
           {
@@ -1292,6 +1304,7 @@ exports[`Image layout=intrinsic visible renders the image 1`] = `
       <img
         alt="DatoCMS swag"
         onLoad={[Function]}
+        referrerPolicy="no-referrer-when-downgrade"
         src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
         style={
           {
@@ -1449,6 +1462,7 @@ exports[`Image layout=responsive visible image loaded shows the image 1`] = `
       <img
         alt="DatoCMS swag"
         onLoad={[Function]}
+        referrerPolicy="no-referrer-when-downgrade"
         src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
         style={
           {
@@ -1535,6 +1549,7 @@ exports[`Image layout=responsive visible renders the image (minimal data) 1`] =
       <img
         alt=""
         onLoad={[Function]}
+        referrerPolicy="no-referrer-when-downgrade"
         src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
         style={
           {
@@ -1620,6 +1635,7 @@ exports[`Image layout=responsive visible renders the image (relative URL) 1`] =
       <img
         alt=""
         onLoad={[Function]}
+        referrerPolicy="no-referrer-when-downgrade"
         src="/205/image.png?ar=16%3A9&fit=crop&w=750"
         style={
           {
@@ -1711,6 +1727,7 @@ exports[`Image layout=responsive visible renders the image 1`] = `
       <img
         alt="DatoCMS swag"
         onLoad={[Function]}
+        referrerPolicy="no-referrer-when-downgrade"
         src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
         style={
           {
@@ -1834,6 +1851,7 @@ exports[`Image passing className and/or style renders correctly 1`] = `
         alt=""
         className="img-class-name"
         onLoad={[Function]}
+        referrerPolicy="no-referrer-when-downgrade"
         src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
         style={
           {
@@ -1928,6 +1946,7 @@ exports[`Image priority=true renders correctly 1`] = `
         alt=""
         fetchpriority="high"
         onLoad={[Function]}
+        referrerPolicy="no-referrer-when-downgrade"
         src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
         style={
           {
@@ -1993,6 +2012,7 @@ exports[`Image usePlaceholder=false renders correctly 1`] = `
       <img
         alt=""
         onLoad={[Function]}
+        referrerPolicy="no-referrer-when-downgrade"
         src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
         style={
           {

package/src/Image/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 // biome-ignore lint/style/useImportType: wrong warning
-import React from 'react';
+import React, { HTMLAttributeReferrerPolicy } from 'react';
 import { type CSSProperties, forwardRef, useRef } from 'react';
 import {
   buildRegularSource,
@@ -111,6 +111,13 @@ export type ImagePropTypes = {
    * Default candidate multipliers are [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
    **/
   srcSetCandidates?: number[];
+  /**
+   * Defines which referrer is sent when fetching the image
+   * Read more: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy
+   *
+   * Defaults to `no-referrer-when-downgrade` to give more useful stats in DatoCMS Project Usages
+   **/
+  referrerPolicy?: HTMLAttributeReferrerPolicy;
 };
 
 type State = {
@@ -175,6 +182,7 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
       srcSetCandidates = [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4],
       placeholderClassName,
       placeholderStyle,
+      referrerPolicy = 'no-referrer-when-downgrade',
     },
     ref,
   ) => {
@@ -300,6 +308,7 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
                   objectPosition,
                   ...imgStyle,
                 }}
+                referrerPolicy={referrerPolicy}
               />
             )}
           </picture>
@@ -323,6 +332,7 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
                 }}
                 loading={priority ? undefined : 'lazy'}
                 {...priorityProp(priority ? 'high' : undefined)}
+                referrerPolicy={referrerPolicy}
               />
             )}
           </picture>

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

@@ -20,6 +20,7 @@ exports[`Image explicit sizes renders correctly 1`] = `
     <img
       alt=""
       loading="lazy"
+      referrerPolicy="no-referrer-when-downgrade"
       src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
       style={
         {
@@ -63,6 +64,7 @@ exports[`Image full data renders correctly 1`] = `
     <img
       alt="DatoCMS swag"
       loading="lazy"
+      referrerPolicy="no-referrer-when-downgrade"
       src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
       style={
         {
@@ -101,6 +103,7 @@ exports[`Image minimal data renders correctly 1`] = `
     <img
       alt=""
       loading="lazy"
+      referrerPolicy="no-referrer-when-downgrade"
       src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
       style={
         {
@@ -138,6 +141,7 @@ exports[`Image minimalDataWithRelativeUrl renders correctly 1`] = `
     <img
       alt=""
       loading="lazy"
+      referrerPolicy="no-referrer-when-downgrade"
       src="/205/image.png?ar=16%3A9&fit=crop&w=750"
       style={
         {
@@ -195,6 +199,7 @@ exports[`Image passing className and/or style renders correctly 1`] = `
       alt=""
       className="class-name"
       loading="lazy"
+      referrerPolicy="no-referrer-when-downgrade"
       src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
       style={
         {
@@ -234,6 +239,7 @@ exports[`Image priority=true renders correctly 1`] = `
     <img
       alt=""
       fetchpriority="high"
+      referrerPolicy="no-referrer-when-downgrade"
       src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
       style={
         {
@@ -272,6 +278,7 @@ exports[`Image usePlaceholder=false renders correctly 1`] = `
     <img
       alt=""
       loading="lazy"
+      referrerPolicy="no-referrer-when-downgrade"
       src="https://www.datocms-assets.com/205/image.png?ar=16%3A9&fit=crop&w=750"
       style={
         {

package/src/SRCImage/index.tsx

@@ -1,6 +1,6 @@
 // biome-ignore lint/style/useImportType: wrong warning
-import React from 'react';
-import type { ResponsiveImageType } from '../Image';
+import React, { HTMLAttributeReferrerPolicy } from 'react';
+import type { ResponsiveImageType } from '../Image/index.js';
 import { buildRegularSource, buildWebpSource, priorityProp } from './utils.js';
 
 export type SRCImagePropTypes = {
@@ -36,6 +36,13 @@ export type SRCImagePropTypes = {
    * Default candidate multipliers are [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4]
    **/
   srcSetCandidates?: number[];
+  /**
+   * Defines which referrer is sent when fetching the image
+   * Read more: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy
+   *
+   * Defaults to `no-referrer-when-downgrade` to give more useful stats in DatoCMS Project Usages
+   **/
+  referrerPolicy?: HTMLAttributeReferrerPolicy;
 };
 
 export function SRCImage({
@@ -48,6 +55,7 @@ export function SRCImage({
   priority = false,
   sizes,
   srcSetCandidates = [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4],
+  referrerPolicy = 'no-referrer-when-downgrade',
 }: SRCImagePropTypes) {
   const webpSource = buildWebpSource(data, sizes);
   const regularSource = buildRegularSource(data, sizes, srcSetCandidates);
@@ -98,6 +106,7 @@ export function SRCImage({
             ...sizingStyle,
             ...imgStyle,
           }}
+          referrerPolicy={referrerPolicy}
         />
       )}
     </picture>

package/src/SRCImage/utils.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { ResponsiveImageType } from '../Image';
+import type { ResponsiveImageType } from '../Image/index.js';
 
 export function priorityProp(
   fetchPriority?: string,

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

@@ -225,6 +225,13 @@ exports[`StructuredText with links/blocks with default rules renders the documen
           "quote": "Foo bar.",
         },
       ],
+      "inlineBlocks": [
+        {
+          "__typename": "MentionRecord",
+          "id": "789",
+          "name": "Jane Doe",
+        },
+      ],
       "links": [
         {
           "__typename": "DocPageRecord",
@@ -269,6 +276,10 @@ exports[`StructuredText with links/blocks with default rules renders the documen
                   ],
                   "type": "itemLink",
                 },
+                {
+                  "item": "789",
+                  "type": "inlineBlock",
+                },
               ],
               "level": 1,
               "type": "heading",
@@ -285,6 +296,7 @@ exports[`StructuredText with links/blocks with default rules renders the documen
     }
   }
   renderBlock={[Function]}
+  renderInlineBlock={[Function]}
   renderInlineRecord={[Function]}
   renderLinkToRecord={[Function]}
 >
@@ -310,6 +322,11 @@ exports[`StructuredText with links/blocks with default rules renders the documen
     >
       here!
     </a>
+    <em
+      key="t-4"
+    >
+      Jane Doe
+    </em>
   </h1>
   <figure
     key="t-1"

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

@@ -136,6 +136,12 @@ describe('StructuredText', () => {
       author: string;
     };
 
+    type MentionRecord = {
+      id: string;
+      __typename: 'MentionRecord';
+      name: string;
+    };
+
     type DocPageRecord = {
       id: string;
       __typename: 'DocPageRecord';
@@ -145,7 +151,8 @@ describe('StructuredText', () => {
 
     const structuredText: StructuredTextGraphQlResponse<
       QuoteRecord,
-      DocPageRecord
+      DocPageRecord,
+      MentionRecord
     > = {
       value: {
         schema: 'dast',
@@ -175,6 +182,10 @@ describe('StructuredText', () => {
                   meta: [{ id: 'target', value: '_blank' }],
                   children: [{ type: 'span', value: 'here!' }],
                 },
+                {
+                  type: 'inlineBlock',
+                  item: '789',
+                },
               ],
             },
             {
@@ -192,6 +203,13 @@ describe('StructuredText', () => {
           author: 'Mark Smith',
         },
       ],
+      inlineBlocks: [
+        {
+          id: '789',
+          __typename: 'MentionRecord',
+          name: 'Jane Doe',
+        },
+      ],
       links: [
         {
           id: '123',
@@ -240,6 +258,14 @@ describe('StructuredText', () => {
                   return null;
               }
             }}
+            renderInlineBlock={({ record }) => {
+              switch (record.__typename) {
+                case 'MentionRecord':
+                  return <em>{record.name}</em>;
+                default:
+                  return null;
+              }
+            }}
           />,
         );
         expect(wrapper).toMatchSnapshot();