react-datocms 4.0.4 → 4.0.6

package/dist/esm/useQuerySubscription/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/useQuerySubscription/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EACL,gBAAgB,GAKjB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,2BAA2B,IAAI,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAyB9F,MAAM,UAAU,oBAAoB,CAGlC,OAA0D;IAClD,IAAA,OAAO,GAA4B,OAAO,QAAnC,EAAE,WAAW,GAAe,OAAO,YAAtB,EAAK,KAAK,UAAK,OAAO,EAA5C,0BAAkC,CAAF,CAAa;IAE7C,IAAA,KAAoB,QAAQ,CAA0B,IAAI,CAAC,EAA1D,KAAK,QAAA,EAAE,QAAQ,QAA2C,CAAC;IAC5D,IAAA,KAAkB,QAAQ,CAAqB,IAAI,CAAC,EAAnD,IAAI,QAAA,EAAE,OAAO,QAAsC,CAAC;IACrD,IAAA,KAAsB,QAAQ,CAClC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,CAClC,EAFM,MAAM,QAAA,EAAE,SAAS,QAEvB,CAAC;IAEF,IAAM,uBAAuB,GAAG,KAG/B,CAAC;IAEF,oBAAoB,CAAC;QACnB,IAAI,OAAO,KAAK,KAAK,EAAE;YACrB,SAAS,CAAC,QAAQ,CAAC,CAAC;YAEpB,OAAO;gBACL,yCAAyC;YAC3C,CAAC,CAAC;SACH;QAED,IAAI,WAAiC,CAAC;QAEtC,SAAe,SAAS;;;;gCACR,qBAAM,gBAAgB,uBAC/B,uBAAuB,KAC1B,cAAc,EAAE,UAAC,MAAM;oCACrB,SAAS,CAAC,MAAM,CAAC,CAAC;gCACpB,CAAC,EACD,QAAQ,EAAE,UAAC,UAAU;oCACnB,QAAQ,CAAC,IAAI,CAAC,CAAC;oCACf,OAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;gCACpC,CAAC,EACD,cAAc,EAAE,UAAC,SAAS;oCACxB,OAAO,CAAC,IAAI,CAAC,CAAC;oCACd,QAAQ,CAAC,SAAS,CAAC,CAAC;gCACtB,CAAC,IACD,EAAA;;4BAbF,WAAW,GAAG,SAaZ,CAAC;;;;;SACJ;QAED,SAAS,EAAE,CAAC;QAEZ,OAAO;YACL,IAAI,WAAW,EAAE;gBACf,WAAW,EAAE,CAAC;aACf;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,uBAAuB,CAAC,CAAC,CAAC;IAE9B,OAAO,EAAE,KAAK,OAAA,EAAE,MAAM,QAAA,EAAE,IAAI,EAAE,IAAI,IAAI,WAAW,EAAE,CAAC;AACtD,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/useQuerySubscription/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EACL,gBAAgB,GAKjB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,2BAA2B,IAAI,oBAAoB,GACpD,MAAM,yBAAyB,CAAC;AAyBjC,MAAM,UAAU,oBAAoB,CAGlC,OAA0D;IAClD,IAAA,OAAO,GAA4B,OAAO,QAAnC,EAAE,WAAW,GAAe,OAAO,YAAtB,EAAK,KAAK,UAAK,OAAO,EAA5C,0BAAkC,CAAF,CAAa;IAE7C,IAAA,KAAoB,QAAQ,CAA0B,IAAI,CAAC,EAA1D,KAAK,QAAA,EAAE,QAAQ,QAA2C,CAAC;IAC5D,IAAA,KAAkB,QAAQ,CAAqB,IAAI,CAAC,EAAnD,IAAI,QAAA,EAAE,OAAO,QAAsC,CAAC;IACrD,IAAA,KAAsB,QAAQ,CAClC,OAAO,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,CAClC,EAFM,MAAM,QAAA,EAAE,SAAS,QAEvB,CAAC;IAEF,IAAM,uBAAuB,GAAG,KAG/B,CAAC;IAEF,oBAAoB,CAAC;QACnB,IAAI,OAAO,KAAK,KAAK,EAAE;YACrB,SAAS,CAAC,QAAQ,CAAC,CAAC;YAEpB,OAAO;gBACL,yCAAyC;YAC3C,CAAC,CAAC;SACH;QAED,IAAI,WAAiC,CAAC;QAEtC,SAAe,SAAS;;;;gCACR,qBAAM,gBAAgB,uBAC/B,uBAAuB,KAC1B,cAAc,EAAE,UAAC,MAAM;oCACrB,SAAS,CAAC,MAAM,CAAC,CAAC;gCACpB,CAAC,EACD,QAAQ,EAAE,UAAC,UAAU;oCACnB,QAAQ,CAAC,IAAI,CAAC,CAAC;oCACf,OAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;gCACpC,CAAC,EACD,cAAc,EAAE,UAAC,SAAS;oCACxB,OAAO,CAAC,IAAI,CAAC,CAAC;oCACd,QAAQ,CAAC,SAAS,CAAC,CAAC;gCACtB,CAAC,IACD,EAAA;;4BAbF,WAAW,GAAG,SAaZ,CAAC;;;;;SACJ;QAED,SAAS,EAAE,CAAC;QAEZ,OAAO;YACL,IAAI,WAAW,EAAE;gBACf,WAAW,EAAE,CAAC;aACf;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,uBAAuB,CAAC,CAAC,CAAC;IAE9B,OAAO,EAAE,KAAK,OAAA,EAAE,MAAM,QAAA,EAAE,IAAI,EAAE,IAAI,IAAI,WAAW,EAAE,CAAC;AACtD,CAAC"}

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

@@ -31,6 +31,8 @@ export declare type ImagePropTypes = {
     className?: string;
     /** Additional CSS class for the image inside the `<picture />` tag */
     pictureClassName?: string;
+    /** Additional CSS class for the placeholder image */
+    placeholderClassName?: string;
     /** Duration (in ms) of the fade-in transition effect upoad image loading */
     fadeInDuration?: number;
     /** @deprecated Use the intersectionThreshold prop */
@@ -45,6 +47,8 @@ export declare type ImagePropTypes = {
     style?: React.CSSProperties;
     /** Additional CSS rules to add to the image inside the `<picture />` tag */
     pictureStyle?: React.CSSProperties;
+    /** Additional CSS rules to add to the placeholder image */
+    placeholderStyle?: React.CSSProperties;
     /**
      * The layout behavior of the image as the viewport changes size
      *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-datocms",
-  "version": "4.0.4",
+  "version": "4.0.6",
   "types": "dist/types/index.d.ts",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -35,11 +35,13 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
+    "rome": "^10.0.1",
     "ts-jest": "^26.5.5",
     "typescript": "^4.5.5"
   },
   "scripts": {
     "build": "rimraf dist && tsc && tsc --project ./tsconfig.esnext.json",
+    "format": "rome format --write src",
     "watch": "rimraf dist && tsc --watch",
     "prepare": "npm run test && npm run build",
     "test": "jest --coverage",

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

@@ -23,6 +23,8 @@ exports[`Image layout=fill not visible renders the blur-up thumb 1`] = `
       Object {
         "height": "100%",
         "left": 0,
+        "maxHeight": "none",
+        "maxWidth": "none",
         "overflow": "hidden",
         "position": "absolute",
         "top": 0,
@@ -40,6 +42,8 @@ exports[`Image layout=fill not visible renders the blur-up thumb 1`] = `
           "backgroundColor": undefined,
           "height": "110%",
           "left": "-5%",
+          "maxHeight": "none",
+          "maxWidth": "none",
           "objectFit": undefined,
           "objectPosition": undefined,
           "opacity": 1,
@@ -80,6 +84,8 @@ exports[`Image layout=fill visible image loaded shows the image 1`] = `
       Object {
         "height": "100%",
         "left": 0,
+        "maxHeight": "none",
+        "maxWidth": "none",
         "overflow": "hidden",
         "position": "absolute",
         "top": 0,
@@ -97,6 +103,8 @@ exports[`Image layout=fill visible image loaded shows the image 1`] = `
           "backgroundColor": undefined,
           "height": "110%",
           "left": "-5%",
+          "maxHeight": "none",
+          "maxWidth": "none",
           "objectFit": undefined,
           "objectPosition": undefined,
           "opacity": 0,
@@ -120,6 +128,8 @@ exports[`Image layout=fill visible image loaded shows the image 1`] = `
           Object {
             "height": "100%",
             "left": 0,
+            "maxHeight": "none",
+            "maxWidth": "none",
             "objectFit": undefined,
             "objectPosition": undefined,
             "opacity": 1,
@@ -157,6 +167,8 @@ exports[`Image layout=fill visible renders the image (minimal data) 1`] = `
       Object {
         "height": "100%",
         "left": 0,
+        "maxHeight": "none",
+        "maxWidth": "none",
         "overflow": "hidden",
         "position": "absolute",
         "top": 0,
@@ -174,6 +186,8 @@ exports[`Image layout=fill visible renders the image (minimal data) 1`] = `
           "backgroundColor": undefined,
           "height": "110%",
           "left": "-5%",
+          "maxHeight": "none",
+          "maxWidth": "none",
           "objectFit": undefined,
           "objectPosition": undefined,
           "opacity": 1,
@@ -196,6 +210,8 @@ exports[`Image layout=fill visible renders the image (minimal data) 1`] = `
           Object {
             "height": "100%",
             "left": 0,
+            "maxHeight": "none",
+            "maxWidth": "none",
             "objectFit": undefined,
             "objectPosition": undefined,
             "opacity": 0,
@@ -237,6 +253,8 @@ exports[`Image layout=fill visible renders the image 1`] = `
       Object {
         "height": "100%",
         "left": 0,
+        "maxHeight": "none",
+        "maxWidth": "none",
         "overflow": "hidden",
         "position": "absolute",
         "top": 0,
@@ -254,6 +272,8 @@ exports[`Image layout=fill visible renders the image 1`] = `
           "backgroundColor": undefined,
           "height": "110%",
           "left": "-5%",
+          "maxHeight": "none",
+          "maxWidth": "none",
           "objectFit": undefined,
           "objectPosition": undefined,
           "opacity": 1,
@@ -277,6 +297,8 @@ exports[`Image layout=fill visible renders the image 1`] = `
           Object {
             "height": "100%",
             "left": 0,
+            "maxHeight": "none",
+            "maxWidth": "none",
             "objectFit": undefined,
             "objectPosition": undefined,
             "opacity": 0,
@@ -344,6 +366,8 @@ exports[`Image layout=fixed not visible renders the blur-up thumb 1`] = `
           "backgroundColor": undefined,
           "height": "110%",
           "left": "-5%",
+          "maxHeight": "none",
+          "maxWidth": "none",
           "objectFit": undefined,
           "objectPosition": undefined,
           "opacity": 1,
@@ -409,6 +433,8 @@ exports[`Image layout=fixed visible image loaded shows the image 1`] = `
           "backgroundColor": undefined,
           "height": "110%",
           "left": "-5%",
+          "maxHeight": "none",
+          "maxWidth": "none",
           "objectFit": undefined,
           "objectPosition": undefined,
           "opacity": 0,
@@ -432,6 +458,8 @@ exports[`Image layout=fixed visible image loaded shows the image 1`] = `
           Object {
             "height": "100%",
             "left": 0,
+            "maxHeight": "none",
+            "maxWidth": "none",
             "objectFit": undefined,
             "objectPosition": undefined,
             "opacity": 1,
@@ -494,6 +522,8 @@ exports[`Image layout=fixed visible renders the image (minimal data) 1`] = `
           "backgroundColor": undefined,
           "height": "110%",
           "left": "-5%",
+          "maxHeight": "none",
+          "maxWidth": "none",
           "objectFit": undefined,
           "objectPosition": undefined,
           "opacity": 1,
@@ -516,6 +546,8 @@ exports[`Image layout=fixed visible renders the image (minimal data) 1`] = `
           Object {
             "height": "100%",
             "left": 0,
+            "maxHeight": "none",
+            "maxWidth": "none",
             "objectFit": undefined,
             "objectPosition": undefined,
             "opacity": 0,
@@ -582,6 +614,8 @@ exports[`Image layout=fixed visible renders the image 1`] = `
           "backgroundColor": undefined,
           "height": "110%",
           "left": "-5%",
+          "maxHeight": "none",
+          "maxWidth": "none",
           "objectFit": undefined,
           "objectPosition": undefined,
           "opacity": 1,
@@ -605,6 +639,8 @@ exports[`Image layout=fixed visible renders the image 1`] = `
           Object {
             "height": "100%",
             "left": 0,
+            "maxHeight": "none",
+            "maxWidth": "none",
             "objectFit": undefined,
             "objectPosition": undefined,
             "opacity": 0,
@@ -673,6 +709,8 @@ exports[`Image layout=intrinsic not visible renders the blur-up thumb 1`] = `
           "backgroundColor": undefined,
           "height": "110%",
           "left": "-5%",
+          "maxHeight": "none",
+          "maxWidth": "none",
           "objectFit": undefined,
           "objectPosition": undefined,
           "opacity": 1,
@@ -739,6 +777,8 @@ exports[`Image layout=intrinsic visible image loaded shows the image 1`] = `
           "backgroundColor": undefined,
           "height": "110%",
           "left": "-5%",
+          "maxHeight": "none",
+          "maxWidth": "none",
           "objectFit": undefined,
           "objectPosition": undefined,
           "opacity": 0,
@@ -762,6 +802,8 @@ exports[`Image layout=intrinsic visible image loaded shows the image 1`] = `
           Object {
             "height": "100%",
             "left": 0,
+            "maxHeight": "none",
+            "maxWidth": "none",
             "objectFit": undefined,
             "objectPosition": undefined,
             "opacity": 1,
@@ -825,6 +867,8 @@ exports[`Image layout=intrinsic visible renders the image (minimal data) 1`] = `
           "backgroundColor": undefined,
           "height": "110%",
           "left": "-5%",
+          "maxHeight": "none",
+          "maxWidth": "none",
           "objectFit": undefined,
           "objectPosition": undefined,
           "opacity": 1,
@@ -847,6 +891,8 @@ exports[`Image layout=intrinsic visible renders the image (minimal data) 1`] = `
           Object {
             "height": "100%",
             "left": 0,
+            "maxHeight": "none",
+            "maxWidth": "none",
             "objectFit": undefined,
             "objectPosition": undefined,
             "opacity": 0,
@@ -914,6 +960,8 @@ exports[`Image layout=intrinsic visible renders the image 1`] = `
           "backgroundColor": undefined,
           "height": "110%",
           "left": "-5%",
+          "maxHeight": "none",
+          "maxWidth": "none",
           "objectFit": undefined,
           "objectPosition": undefined,
           "opacity": 1,
@@ -937,6 +985,8 @@ exports[`Image layout=intrinsic visible renders the image 1`] = `
           Object {
             "height": "100%",
             "left": 0,
+            "maxHeight": "none",
+            "maxWidth": "none",
             "objectFit": undefined,
             "objectPosition": undefined,
             "opacity": 0,
@@ -1004,6 +1054,8 @@ exports[`Image layout=responsive not visible renders the blur-up thumb 1`] = `
           "backgroundColor": undefined,
           "height": "110%",
           "left": "-5%",
+          "maxHeight": "none",
+          "maxWidth": "none",
           "objectFit": undefined,
           "objectPosition": undefined,
           "opacity": 1,
@@ -1069,6 +1121,8 @@ exports[`Image layout=responsive visible image loaded shows the image 1`] = `
           "backgroundColor": undefined,
           "height": "110%",
           "left": "-5%",
+          "maxHeight": "none",
+          "maxWidth": "none",
           "objectFit": undefined,
           "objectPosition": undefined,
           "opacity": 0,
@@ -1092,6 +1146,8 @@ exports[`Image layout=responsive visible image loaded shows the image 1`] = `
           Object {
             "height": "100%",
             "left": 0,
+            "maxHeight": "none",
+            "maxWidth": "none",
             "objectFit": undefined,
             "objectPosition": undefined,
             "opacity": 1,
@@ -1154,6 +1210,8 @@ exports[`Image layout=responsive visible renders the image (minimal data) 1`] =
           "backgroundColor": undefined,
           "height": "110%",
           "left": "-5%",
+          "maxHeight": "none",
+          "maxWidth": "none",
           "objectFit": undefined,
           "objectPosition": undefined,
           "opacity": 1,
@@ -1176,6 +1234,8 @@ exports[`Image layout=responsive visible renders the image (minimal data) 1`] =
           Object {
             "height": "100%",
             "left": 0,
+            "maxHeight": "none",
+            "maxWidth": "none",
             "objectFit": undefined,
             "objectPosition": undefined,
             "opacity": 0,
@@ -1242,6 +1302,8 @@ exports[`Image layout=responsive visible renders the image 1`] = `
           "backgroundColor": undefined,
           "height": "110%",
           "left": "-5%",
+          "maxHeight": "none",
+          "maxWidth": "none",
           "objectFit": undefined,
           "objectPosition": undefined,
           "opacity": 1,
@@ -1265,6 +1327,8 @@ exports[`Image layout=responsive visible renders the image 1`] = `
           Object {
             "height": "100%",
             "left": 0,
+            "maxHeight": "none",
+            "maxWidth": "none",
             "objectFit": undefined,
             "objectPosition": undefined,
             "opacity": 0,

package/src/Image/index.tsx

@@ -49,6 +49,8 @@ export type ImagePropTypes = {
   className?: string;
   /** Additional CSS class for the image inside the `<picture />` tag */
   pictureClassName?: string;
+  /** Additional CSS class for the placeholder image */
+  placeholderClassName?: string;
   /** Duration (in ms) of the fade-in transition effect upoad image loading */
   fadeInDuration?: number;
   /** @deprecated Use the intersectionThreshold prop */
@@ -63,6 +65,8 @@ export type ImagePropTypes = {
   style?: React.CSSProperties;
   /** Additional CSS rules to add to the image inside the `<picture />` tag */
   pictureStyle?: React.CSSProperties;
+  /** Additional CSS rules to add to the placeholder image */
+  placeholderStyle?: React.CSSProperties;
   /**
    * The layout behavior of the image as the viewport changes size
    *
@@ -147,7 +151,7 @@ const buildSrcSet = (
   width: number | undefined,
   candidateMultipliers: number[],
 ) => {
-  if (!src || !width) {
+  if (!(src && width)) {
     return undefined;
   }
 
@@ -206,6 +210,8 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
       priority = false,
       sizes,
       srcSetCandidates = [0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4],
+      placeholderClassName,
+      placeholderStyle,
     },
     ref,
   ) => {
@@ -241,7 +247,9 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
     const callbackRef = useCallback(
       (_ref: HTMLDivElement) => {
         viewRef(_ref);
-        if (ref) (ref as React.MutableRefObject<HTMLDivElement>).current = _ref;
+        if (ref) {
+          (ref as React.MutableRefObject<HTMLDivElement>).current = _ref;
+        }
       },
       [viewRef],
     );
@@ -252,6 +260,8 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
       top: 0,
       width: '100%',
       height: '100%',
+      maxWidth: 'none',
+      maxHeight: 'none',
     };
 
     const addImage = imageAddStrategy({
@@ -292,6 +302,7 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
           aria-hidden="true"
           alt=""
           src={data.base64 ?? undefined}
+          className={placeholderClassName}
           style={{
             backgroundColor: data.bgColor ?? undefined,
             objectFit,
@@ -307,6 +318,9 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
             top: '-5%',
             width: '110%',
             height: '110%',
+            maxWidth: 'none',
+            maxHeight: 'none',
+            ...placeholderStyle,
           }}
         />
       ) : null;