react-datocms 4.1.3 → 4.2.0

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

@@ -1,8 +1,8 @@
-import * as React from 'react';
 import { mount } from 'enzyme';
 import 'intersection-observer';
-import { Image } from '../index.js';
+import * as React from 'react';
 import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils';
+import { Image } from '../index.js';
 
 const data = {
   alt: 'DatoCMS swag',

package/src/Image/index.tsx

@@ -1,22 +1,22 @@
 'use client';
 
 import React, {
-  useState,
+  CSSProperties,
   forwardRef,
   useCallback,
-  CSSProperties,
-  useRef,
   useEffect,
+  useRef,
+  useState,
   version,
 } from 'react';
-import { useInView } from './useInView.js';
 import { encode } from 'universal-base64';
+import { useInView } from './useInView.js';
 
 const isSsr = typeof window === 'undefined';
 
 const isIntersectionObserverAvailable = isSsr
   ? false
-  : !!(window as any).IntersectionObserver;
+  : !!window.IntersectionObserver;
 
 function fetchPriorityProp(
   fetchPriority?: string,
@@ -375,10 +375,10 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
           ...(layout === 'fill'
             ? absolutePositioning
             : layout === 'intrinsic'
-              ? { position: 'relative', width: '100%', maxWidth: width }
-              : layout === 'fixed'
-                ? { position: 'relative', width }
-                : { position: 'relative', width: '100%' }),
+            ? { position: 'relative', width: '100%', maxWidth: width }
+            : layout === 'fixed'
+            ? { position: 'relative', width }
+            : { position: 'relative', width: '100%' }),
           ...style,
         }}
       >
@@ -389,6 +389,7 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
             {webpSource}
             {regularSource}
             {data.src && (
+              // biome-ignore lint/a11y/useAltText: We do support the `alt` attribute
               <img
                 ref={imageRef}
                 src={data.src}
@@ -414,6 +415,7 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
             {webpSource}
             {regularSource}
             {data.src && (
+              // biome-ignore lint/a11y/useAltText: We do support the `alt` attribute
               <img
                 src={data.src}
                 alt={data.alt ?? ''}

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

@@ -189,102 +189,102 @@ exports[`renderMetaTags generates an array of meta tags 1`] = `
 
 exports[`renderMetaTagsToString generates an array of meta tags 1`] = `
 "<title>Remix CMS - The easiest way to manage content with Remix</title>
-<meta property=\\"og:title\\" content=\\"Remix CMS - The easiest way to manage content with Remix\\" />
-<meta name=\\"twitter:title\\" content=\\"Remix CMS - The easiest way to manage content with Remix\\" />
-<meta name=\\"description\\" content=\\"Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now.\\" />
-<meta property=\\"og:description\\" content=\\"Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now.\\" />
-<meta name=\\"twitter:description\\" content=\\"Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now.\\" />
-<meta property=\\"og:image\\" content=\\"https://www.datocms-assets.com/205/1642515293-full-logo.svg?fit=max&fm=jpg&w=1000\\" />
-<meta property=\\"og:image:width\\" content=\\"746\\" />
-<meta property=\\"og:image:height\\" content=\\"186\\" />
-<meta name=\\"twitter:image\\" content=\\"https://www.datocms-assets.com/205/1642515293-full-logo.svg?fit=max&fm=jpg&w=1000\\" />
-<meta property=\\"og:locale\\" content=\\"en\\" />
-<meta property=\\"og:type\\" content=\\"article\\" />
-<meta property=\\"og:site_name\\" content=\\"DatoCMS\\" />
-<meta property=\\"article:modified_time\\" content=\\"2022-01-18T14:02:47Z\\" />
-<meta name=\\"twitter:card\\" content=\\"summary_large_image\\" />
-<meta name=\\"twitter:site\\" content=\\"@datocms\\" />
-<link sizes=\\"16x16\\" type=\\"image/png\\" rel=\\"icon\\" href=\\"https://www.datocms-assets.com/205/1525789775-dato.png?h=16&w=16\\" />
-<link sizes=\\"32x32\\" type=\\"image/png\\" rel=\\"icon\\" href=\\"https://www.datocms-assets.com/205/1525789775-dato.png?h=32&w=32\\" />
-<link sizes=\\"96x96\\" type=\\"image/png\\" rel=\\"icon\\" href=\\"https://www.datocms-assets.com/205/1525789775-dato.png?h=96&w=96\\" />
-<link sizes=\\"192x192\\" type=\\"image/png\\" rel=\\"icon\\" href=\\"https://www.datocms-assets.com/205/1525789775-dato.png?h=192&w=192\\" />
-<link sizes=\\"57x57\\" rel=\\"apple-touch-icon\\" href=\\"https://www.datocms-assets.com/205/1525789775-dato.png?h=57&w=57\\" />
-<link sizes=\\"60x60\\" rel=\\"apple-touch-icon\\" href=\\"https://www.datocms-assets.com/205/1525789775-dato.png?h=60&w=60\\" />
-<link sizes=\\"72x72\\" rel=\\"apple-touch-icon\\" href=\\"https://www.datocms-assets.com/205/1525789775-dato.png?h=72&w=72\\" />
-<link sizes=\\"76x76\\" rel=\\"apple-touch-icon\\" href=\\"https://www.datocms-assets.com/205/1525789775-dato.png?h=76&w=76\\" />
-<link sizes=\\"114x114\\" rel=\\"apple-touch-icon\\" href=\\"https://www.datocms-assets.com/205/1525789775-dato.png?h=114&w=114\\" />
-<link sizes=\\"120x120\\" rel=\\"apple-touch-icon\\" href=\\"https://www.datocms-assets.com/205/1525789775-dato.png?h=120&w=120\\" />
-<link sizes=\\"144x144\\" rel=\\"apple-touch-icon\\" href=\\"https://www.datocms-assets.com/205/1525789775-dato.png?h=144&w=144\\" />
-<link sizes=\\"152x152\\" rel=\\"apple-touch-icon\\" href=\\"https://www.datocms-assets.com/205/1525789775-dato.png?h=152&w=152\\" />
-<link sizes=\\"180x180\\" rel=\\"apple-touch-icon\\" href=\\"https://www.datocms-assets.com/205/1525789775-dato.png?h=180&w=180\\" />
-<meta name=\\"msapplication-square70x70logo\\" content=\\"https://www.datocms-assets.com/205/1525789775-dato.png?h=70&w=70\\" />
-<meta name=\\"msapplication-square150x150logo\\" content=\\"https://www.datocms-assets.com/205/1525789775-dato.png?h=150&w=150\\" />
-<meta name=\\"msapplication-square310x310logo\\" content=\\"https://www.datocms-assets.com/205/1525789775-dato.png?h=310&w=310\\" />
-<meta name=\\"msapplication-square310x150logo\\" content=\\"https://www.datocms-assets.com/205/1525789775-dato.png?h=150&w=310\\" />"
+<meta property="og:title" content="Remix CMS - The easiest way to manage content with Remix" />
+<meta name="twitter:title" content="Remix CMS - The easiest way to manage content with Remix" />
+<meta name="description" content="Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now." />
+<meta property="og:description" content="Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now." />
+<meta name="twitter:description" content="Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now." />
+<meta property="og:image" content="https://www.datocms-assets.com/205/1642515293-full-logo.svg?fit=max&fm=jpg&w=1000" />
+<meta property="og:image:width" content="746" />
+<meta property="og:image:height" content="186" />
+<meta name="twitter:image" content="https://www.datocms-assets.com/205/1642515293-full-logo.svg?fit=max&fm=jpg&w=1000" />
+<meta property="og:locale" content="en" />
+<meta property="og:type" content="article" />
+<meta property="og:site_name" content="DatoCMS" />
+<meta property="article:modified_time" content="2022-01-18T14:02:47Z" />
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:site" content="@datocms" />
+<link sizes="16x16" type="image/png" rel="icon" href="https://www.datocms-assets.com/205/1525789775-dato.png?h=16&w=16" />
+<link sizes="32x32" type="image/png" rel="icon" href="https://www.datocms-assets.com/205/1525789775-dato.png?h=32&w=32" />
+<link sizes="96x96" type="image/png" rel="icon" href="https://www.datocms-assets.com/205/1525789775-dato.png?h=96&w=96" />
+<link sizes="192x192" type="image/png" rel="icon" href="https://www.datocms-assets.com/205/1525789775-dato.png?h=192&w=192" />
+<link sizes="57x57" rel="apple-touch-icon" href="https://www.datocms-assets.com/205/1525789775-dato.png?h=57&w=57" />
+<link sizes="60x60" rel="apple-touch-icon" href="https://www.datocms-assets.com/205/1525789775-dato.png?h=60&w=60" />
+<link sizes="72x72" rel="apple-touch-icon" href="https://www.datocms-assets.com/205/1525789775-dato.png?h=72&w=72" />
+<link sizes="76x76" rel="apple-touch-icon" href="https://www.datocms-assets.com/205/1525789775-dato.png?h=76&w=76" />
+<link sizes="114x114" rel="apple-touch-icon" href="https://www.datocms-assets.com/205/1525789775-dato.png?h=114&w=114" />
+<link sizes="120x120" rel="apple-touch-icon" href="https://www.datocms-assets.com/205/1525789775-dato.png?h=120&w=120" />
+<link sizes="144x144" rel="apple-touch-icon" href="https://www.datocms-assets.com/205/1525789775-dato.png?h=144&w=144" />
+<link sizes="152x152" rel="apple-touch-icon" href="https://www.datocms-assets.com/205/1525789775-dato.png?h=152&w=152" />
+<link sizes="180x180" rel="apple-touch-icon" href="https://www.datocms-assets.com/205/1525789775-dato.png?h=180&w=180" />
+<meta name="msapplication-square70x70logo" content="https://www.datocms-assets.com/205/1525789775-dato.png?h=70&w=70" />
+<meta name="msapplication-square150x150logo" content="https://www.datocms-assets.com/205/1525789775-dato.png?h=150&w=150" />
+<meta name="msapplication-square310x310logo" content="https://www.datocms-assets.com/205/1525789775-dato.png?h=310&w=310" />
+<meta name="msapplication-square310x150logo" content="https://www.datocms-assets.com/205/1525789775-dato.png?h=150&w=310" />"
 `;
 
 exports[`toNextMetadata generates a Next Metadata object 1`] = `
-Object {
+{
   "description": "Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now.",
-  "icons": Object {
-    "apple": Array [
-      Object {
+  "icons": {
+    "apple": [
+      {
         "sizes": "57x57",
         "url": "https://www.datocms-assets.com/205/1525789775-dato.png?h=57&w=57",
       },
-      Object {
+      {
         "sizes": "60x60",
         "url": "https://www.datocms-assets.com/205/1525789775-dato.png?h=60&w=60",
       },
-      Object {
+      {
         "sizes": "72x72",
         "url": "https://www.datocms-assets.com/205/1525789775-dato.png?h=72&w=72",
       },
-      Object {
+      {
         "sizes": "76x76",
         "url": "https://www.datocms-assets.com/205/1525789775-dato.png?h=76&w=76",
       },
-      Object {
+      {
         "sizes": "114x114",
         "url": "https://www.datocms-assets.com/205/1525789775-dato.png?h=114&w=114",
       },
-      Object {
+      {
         "sizes": "120x120",
         "url": "https://www.datocms-assets.com/205/1525789775-dato.png?h=120&w=120",
       },
-      Object {
+      {
         "sizes": "144x144",
         "url": "https://www.datocms-assets.com/205/1525789775-dato.png?h=144&w=144",
       },
-      Object {
+      {
         "sizes": "152x152",
         "url": "https://www.datocms-assets.com/205/1525789775-dato.png?h=152&w=152",
       },
-      Object {
+      {
         "sizes": "180x180",
         "url": "https://www.datocms-assets.com/205/1525789775-dato.png?h=180&w=180",
       },
     ],
-    "icon": Array [
-      Object {
+    "icon": [
+      {
         "rel": "icon",
         "sizes": "16x16",
         "type": "image/png",
         "url": "https://www.datocms-assets.com/205/1525789775-dato.png?h=16&w=16",
       },
-      Object {
+      {
         "rel": "icon",
         "sizes": "32x32",
         "type": "image/png",
         "url": "https://www.datocms-assets.com/205/1525789775-dato.png?h=32&w=32",
       },
-      Object {
+      {
         "rel": "icon",
         "sizes": "96x96",
         "type": "image/png",
         "url": "https://www.datocms-assets.com/205/1525789775-dato.png?h=96&w=96",
       },
-      Object {
+      {
         "rel": "icon",
         "sizes": "192x192",
         "type": "image/png",
@@ -292,9 +292,9 @@ Object {
       },
     ],
   },
-  "openGraph": Object {
+  "openGraph": {
     "description": "Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now.",
-    "images": Object {
+    "images": {
       "height": "186",
       "url": "https://www.datocms-assets.com/205/1642515293-full-logo.svg?fit=max&fm=jpg&w=1000",
       "width": "746",
@@ -305,7 +305,7 @@ Object {
     "type": "article",
   },
   "title": "Remix CMS - The easiest way to manage content with Remix",
-  "twitter": Object {
+  "twitter": {
     "card": "summary_large_image",
     "description": "Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now.",
     "image": "https://www.datocms-assets.com/205/1642515293-full-logo.svg?fit=max&fm=jpg&w=1000",
@@ -316,7 +316,7 @@ Object {
 `;
 
 exports[`toRemixMeta generates a meta descriptor 1`] = `
-Object {
+{
   "article:modified_time": "2022-01-18T14:02:47Z",
   "description": "Remix makes building scalable and fast React apps simple, pair it with a CMS that shares the same intuitiveness. Start a new Remix + Dato project now.",
   "msapplication-square150x150logo": "https://www.datocms-assets.com/205/1525789775-dato.png?h=150&w=150",

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

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import { shallow } from 'enzyme';
+import * as React from 'react';
 import {
   renderMetaTags,
   renderMetaTagsToString,

package/src/Seo/nextUtils.ts

@@ -1,6 +1,6 @@
 import {
-  type TitleMetaLinkTag,
   type SeoOrFaviconTag,
+  type TitleMetaLinkTag,
   isAppleTouchIconAttributes,
   isFaviconAttributes,
   isOgMetaAttributes,

package/src/Seo/remixUtils.ts

@@ -1,4 +1,4 @@
-import { TitleMetaLinkTag, SeoOrFaviconTag } from './types.js';
+import { SeoOrFaviconTag, TitleMetaLinkTag } from './types.js';
 
 interface RemixHtmlMetaDescriptor {
   [name: string]: string | string[];

package/src/Seo/renderMetaTags.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TitleMetaLinkTag, SeoOrFaviconTag } from './types.js';
+import { SeoOrFaviconTag, TitleMetaLinkTag } from './types.js';
 
 export function renderMetaTags(
   data: TitleMetaLinkTag[] | SeoOrFaviconTag[],

package/src/Seo/renderMetaTagsToString.tsx

@@ -1,4 +1,4 @@
-import { TitleMetaLinkTag, SeoOrFaviconTag } from './types.js';
+import { SeoOrFaviconTag, TitleMetaLinkTag } from './types.js';
 
 export function renderMetaTagsToString(
   data: TitleMetaLinkTag[] | SeoOrFaviconTag[],

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

@@ -3,26 +3,26 @@
 exports[`StructuredText simple dast /2 with custom mark rules renders the document 1`] = `
 <StructuredText
   customMarkRules={
-    Array [
-      Object {
+    [
+      {
         "appliable": [Function],
         "apply": [Function],
       },
     ]
   }
   data={
-    Object {
-      "document": Object {
-        "children": Array [
-          Object {
-            "children": Array [
-              Object {
+    {
+      "document": {
+        "children": [
+          {
+            "children": [
+              {
                 "type": "span",
                 "value": "This
 is a ",
               },
-              Object {
-                "marks": Array [
+              {
+                "marks": [
                   "strong",
                 ],
                 "type": "span",
@@ -59,18 +59,18 @@ is a ",
 exports[`StructuredText simple dast /2 with default rules renders the document 1`] = `
 <StructuredText
   data={
-    Object {
-      "document": Object {
-        "children": Array [
-          Object {
-            "children": Array [
-              Object {
+    {
+      "document": {
+        "children": [
+          {
+            "children": [
+              {
                 "type": "span",
                 "value": "This
 is a ",
               },
-              Object {
-                "marks": Array [
+              {
+                "marks": [
                   "strong",
                 ],
                 "type": "span",
@@ -107,27 +107,27 @@ is a ",
 exports[`StructuredText simple dast with no links/blocks with custom rules renders the document 1`] = `
 <StructuredText
   customNodeRules={
-    Array [
-      Object {
+    [
+      {
         "appliable": [Function],
         "apply": [Function],
       },
     ]
   }
   data={
-    Object {
-      "value": Object {
-        "document": Object {
-          "children": Array [
-            Object {
-              "children": Array [
-                Object {
+    {
+      "value": {
+        "document": {
+          "children": [
+            {
+              "children": [
+                {
                   "type": "span",
                   "value": "This
 is a ",
                 },
-                Object {
-                  "marks": Array [
+                {
+                  "marks": [
                     "strong",
                   ],
                   "type": "span",
@@ -166,19 +166,19 @@ is a ",
 exports[`StructuredText simple dast with no links/blocks with default rules renders the document 1`] = `
 <StructuredText
   data={
-    Object {
-      "value": Object {
-        "document": Object {
-          "children": Array [
-            Object {
-              "children": Array [
-                Object {
+    {
+      "value": {
+        "document": {
+          "children": [
+            {
+              "children": [
+                {
                   "type": "span",
                   "value": "This
 is a ",
                 },
-                Object {
-                  "marks": Array [
+                {
+                  "marks": [
                     "strong",
                   ],
                   "type": "span",
@@ -216,53 +216,53 @@ is a ",
 exports[`StructuredText with links/blocks with default rules renders the document 1`] = `
 <StructuredText
   data={
-    Object {
-      "blocks": Array [
-        Object {
+    {
+      "blocks": [
+        {
           "__typename": "QuoteRecord",
           "author": "Mark Smith",
           "id": "456",
           "quote": "Foo bar.",
         },
       ],
-      "links": Array [
-        Object {
+      "links": [
+        {
           "__typename": "DocPageRecord",
           "id": "123",
           "slug": "how-to-code",
           "title": "How to code",
         },
       ],
-      "value": Object {
-        "document": Object {
-          "children": Array [
-            Object {
-              "children": Array [
-                Object {
+      "value": {
+        "document": {
+          "children": [
+            {
+              "children": [
+                {
                   "type": "span",
                   "value": "This is a",
                 },
-                Object {
-                  "marks": Array [
+                {
+                  "marks": [
                     "highlight",
                   ],
                   "type": "span",
                   "value": "title",
                 },
-                Object {
+                {
                   "item": "123",
                   "type": "inlineItem",
                 },
-                Object {
-                  "children": Array [
-                    Object {
+                {
+                  "children": [
+                    {
                       "type": "span",
                       "value": "here!",
                     },
                   ],
                   "item": "123",
-                  "meta": Array [
-                    Object {
+                  "meta": [
+                    {
                       "id": "target",
                       "value": "_blank",
                     },
@@ -273,7 +273,7 @@ exports[`StructuredText with links/blocks with default rules renders the documen
               "level": 1,
               "type": "heading",
             },
-            Object {
+            {
               "item": "456",
               "type": "block",
             },

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

@@ -1,14 +1,14 @@
-import { mount, shallow, render } from 'enzyme';
+import { renderMarkRule } from 'datocms-structured-text-generic-html-renderer';
+import { isHeading } from 'datocms-structured-text-utils';
+import { mount, render, shallow } from 'enzyme';
 import * as React from 'react';
 import {
+  RenderError,
   StructuredText,
-  StructuredTextGraphQlResponse,
   StructuredTextDocument,
-  RenderError,
+  StructuredTextGraphQlResponse,
   renderNodeRule,
 } from '../index.js';
-import { isHeading } from 'datocms-structured-text-utils';
-import { renderMarkRule } from 'datocms-structured-text-generic-html-renderer';
 
 describe('StructuredText', () => {
   describe('with no value', () => {

package/src/StructuredText/index.tsx

@@ -1,26 +1,26 @@
 import {
+  RenderMarkRule,
+  TransformMetaFn,
+  TransformedMeta,
   defaultMetaTransformer,
   render,
-  renderNodeRule,
   renderMarkRule,
-  TransformedMeta,
-  TransformMetaFn,
-  RenderMarkRule,
+  renderNodeRule,
 } from 'datocms-structured-text-generic-html-renderer';
 import {
-  isBlock,
-  isInlineItem,
-  isItemLink,
-  Record as StructuredTextGraphQlResponseRecord,
   Document as StructuredTextDocument,
+  Node,
+  Record as StructuredTextGraphQlResponseRecord,
   RenderError,
   RenderResult,
   RenderRule,
-  Node,
   StructuredText as StructuredTextGraphQlResponse,
+  isBlock,
+  isInlineItem,
+  isItemLink,
   isStructuredText,
 } from 'datocms-structured-text-utils';
-import React, { cloneElement, isValidElement, ReactElement } from 'react';
+import React, { ReactElement, cloneElement, isValidElement } from 'react';
 
 export { renderNodeRule, renderMarkRule, RenderError };