react-datocms 4.0.2 → 4.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/cjs/Image/index.js +18 -3
  2. package/dist/cjs/Image/index.js.map +1 -1
  3. package/dist/esm/Image/index.js +18 -3
  4. package/dist/esm/Image/index.js.map +1 -1
  5. package/package.json +1 -1
  6. package/src/Image/__tests__/__snapshots__/index.test.tsx.snap +96 -64
  7. package/src/Image/index.tsx +13 -3
package/dist/cjs/Image/index.js CHANGED
@@ -131,7 +131,22 @@ exports.Image = (0, react_1.forwardRef)(function (_a, ref) {
131
131
  var webpSource = data.webpSrcSet && (react_1["default"].createElement("source", { srcSet: data.webpSrcSet, sizes: (_b = sizes !== null && sizes !== void 0 ? sizes : data.sizes) !== null && _b !== void 0 ? _b : undefined, type: "image/webp" }));
132
132
  var regularSource = (react_1["default"].createElement("source", { srcSet: (_c = data.srcSet) !== null && _c !== void 0 ? _c : buildSrcSet(data.src, data.width, srcSetCandidates), sizes: (_d = sizes !== null && sizes !== void 0 ? sizes : data.sizes) !== null && _d !== void 0 ? _d : undefined }));
133
133
  var transition = fadeInDuration > 0 ? "opacity ".concat(fadeInDuration, "ms") : undefined;
134
- var placeholder = usePlaceholder && (data.bgColor || data.base64) ? (react_1["default"].createElement("img", { role: "presentation", "aria-hidden": "true", alt: "", src: (_e = data.base64) !== null && _e !== void 0 ? _e : undefined, style: __assign({ backgroundColor: (_f = data.bgColor) !== null && _f !== void 0 ? _f : undefined, objectFit: objectFit, objectPosition: objectPosition }, absolutePositioning) })) : null;
134
+ var placeholder = usePlaceholder && (data.bgColor || data.base64) ? (react_1["default"].createElement("img", { role: "presentation", "aria-hidden": "true", alt: "", src: (_e = data.base64) !== null && _e !== void 0 ? _e : undefined, style: {
135
+ backgroundColor: (_f = data.bgColor) !== null && _f !== void 0 ? _f : undefined,
136
+ objectFit: objectFit,
137
+ objectPosition: objectPosition,
138
+ transition: transition,
139
+ opacity: showImage ? 0 : 1,
140
+ // During the opacity transition of the placeholder to the definitive version,
141
+ // hardware acceleration is triggered. This results in the browser trying to render the
142
+ // placeholder with your GPU, causing blurred edges. Solution: style the placeholder
143
+ // so the edges overflow the container
144
+ position: 'absolute',
145
+ left: '-5%',
146
+ top: '-5%',
147
+ width: '110%',
148
+ height: '110%'
149
+ } })) : null;
135
150
  var width = data.width, aspectRatio = data.aspectRatio;
136
151
  var height = (_g = data.height) !== null && _g !== void 0 ? _g : (aspectRatio ? width / aspectRatio : 0);
137
152
  var svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(width, "\" height=\"").concat(height, "\"></svg>");
@@ -151,11 +166,11 @@ exports.Image = (0, react_1.forwardRef)(function (_a, ref) {
151
166
  addImage && (react_1["default"].createElement("picture", null,
152
167
  webpSource,
153
168
  regularSource,
154
- data.src && (react_1["default"].createElement("img", { src: data.src, alt: (_h = data.alt) !== null && _h !== void 0 ? _h : '', title: (_j = data.title) !== null && _j !== void 0 ? _j : undefined, onLoad: handleLoad, fetchPriority: priority ? 'high' : undefined, className: pictureClassName, style: __assign(__assign(__assign({ opacity: showImage ? 1 : 0, transition: transition }, absolutePositioning), { objectFit: objectFit, objectPosition: objectPosition }), pictureStyle) })))),
169
+ data.src && (react_1["default"].createElement("img", { src: data.src, alt: (_h = data.alt) !== null && _h !== void 0 ? _h : '', title: (_j = data.title) !== null && _j !== void 0 ? _j : undefined, onLoad: handleLoad, fetchpriority: priority ? 'high' : undefined, className: pictureClassName, style: __assign(__assign(__assign({ opacity: showImage ? 1 : 0, transition: transition }, absolutePositioning), { objectFit: objectFit, objectPosition: objectPosition }), pictureStyle) })))),
155
170
  react_1["default"].createElement("noscript", null,
156
171
  react_1["default"].createElement("picture", null,
157
172
  webpSource,
158
173
  regularSource,
159
- data.src && (react_1["default"].createElement("img", { src: data.src, alt: (_k = data.alt) !== null && _k !== void 0 ? _k : '', title: (_l = data.title) !== null && _l !== void 0 ? _l : undefined, className: pictureClassName, style: __assign(__assign({}, absolutePositioning), pictureStyle), loading: lazyLoad ? 'lazy' : undefined, fetchPriority: priority ? 'high' : undefined }))))));
174
+ data.src && (react_1["default"].createElement("img", { src: data.src, alt: (_k = data.alt) !== null && _k !== void 0 ? _k : '', title: (_l = data.title) !== null && _l !== void 0 ? _l : undefined, className: pictureClassName, style: __assign(__assign({}, absolutePositioning), pictureStyle), loading: lazyLoad ? 'lazy' : undefined, fetchpriority: priority ? 'high' : undefined }))))));
160
175
  });
161
176
  //# sourceMappingURL=index.js.map
package/dist/cjs/Image/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Image/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAgF;AAChF,2EAAwD;AACxD,qDAA0C;AAE1C,IAAM,KAAK,GAAG,OAAO,MAAM,KAAK,WAAW,CAAC;AAE5C,IAAM,+BAA+B,GAAG,KAAK;IAC3C,CAAC,CAAC,KAAK;IACP,CAAC,CAAC,CAAC,CAAE,MAAc,CAAC,oBAAoB,CAAC;AAiG3C,IAAM,gBAAgB,GAAG,UAAC,EAAmC;QAAjC,QAAQ,cAAA,EAAE,MAAM,YAAA,EAAE,MAAM,YAAA;IAClD,IAAI,CAAC,QAAQ,EAAE;QACb,OAAO,IAAI,CAAC;KACb;IAED,IAAI,KAAK,EAAE;QACT,OAAO,KAAK,CAAC;KACd;IAED,IAAI,+BAA+B,EAAE;QACnC,OAAO,MAAM,IAAI,MAAM,CAAC;KACzB;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,IAAM,iBAAiB,GAAG,UAAC,EAA2B;QAAzB,QAAQ,cAAA,EAAE,MAAM,YAAA;IAC3C,IAAI,CAAC,QAAQ,EAAE;QACb,OAAO,IAAI,CAAC;KACb;IAED,IAAI,KAAK,EAAE;QACT,OAAO,KAAK,CAAC;KACd;IAED,IAAI,+BAA+B,EAAE;QACnC,OAAO,MAAM,CAAC;KACf;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,IAAM,WAAW,GAAG,UAClB,GAA8B,EAC9B,KAAyB,EACzB,oBAA8B;IAE9B,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE;QAClB,OAAO,SAAS,CAAC;KAClB;IAED,OAAO,oBAAoB;SACxB,GAAG,CAAC,UAAC,UAAU;QACd,IAAM,GAAG,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC;QAEzB,IAAI,UAAU,KAAK,CAAC,EAAE;YACpB,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,KAAK,EAAE,UAAG,UAAU,CAAE,CAAC,CAAC;YAC7C,IAAM,IAAI,GAAG,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;YAC3C,IAAM,IAAI,GAAG,GAAG,CAAC,YAAY,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;YAC3C,IAAI,IAAI,EAAE;gBACR,GAAG,CAAC,YAAY,CAAC,GAAG,CAClB,OAAO,EACP,UAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,UAAU,CAAC,CAAE,CAC7C,CAAC;aACH;YACD,IAAI,IAAI,EAAE;gBACR,GAAG,CAAC,YAAY,CAAC,GAAG,CAClB,OAAO,EACP,UAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,GAAG,UAAU,CAAC,CAAE,CAC7C,CAAC;aACH;SACF;QAED,IAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,UAAU,CAAC,CAAC;QAElD,IAAI,UAAU,GAAG,EAAE,EAAE;YACnB,OAAO,IAAI,CAAC;SACb;QAED,OAAO,UAAG,GAAG,CAAC,QAAQ,EAAE,cAAI,UAAU,MAAG,CAAC;IAC5C,CAAC,CAAC;SACD,MAAM,CAAC,OAAO,CAAC;SACf,IAAI,CAAC,GAAG,CAAC,CAAC;AACf,CAAC,CAAC;AAEW,QAAA,KAAK,GAAG,IAAA,kBAAU,EAC7B,UACE,EAmBC,EACD,GAAG;;QAnBD,SAAS,eAAA,EACT,sBAAoB,EAApB,cAAc,mBAAG,GAAG,KAAA,EACpB,oBAAoB,0BAAA,EACpB,qBAAqB,2BAAA,EACrB,kBAAkB,wBAAA,EAClB,gBAAgB,sBAAA,EAChB,gBAA4B,EAAlB,WAAW,mBAAG,IAAI,KAAA,EAC5B,KAAK,WAAA,EACL,YAAY,kBAAA,EACZ,cAAoB,EAApB,MAAM,mBAAG,WAAW,KAAA,EACpB,SAAS,eAAA,EACT,cAAc,oBAAA,EACd,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,sBAAqB,EAArB,cAAc,mBAAG,IAAI,KAAA,EACrB,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,KAAK,WAAA,EACL,wBAAqD,EAArD,gBAAgB,mBAAG,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,KAAA;IAIvD,IAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,WAAW,CAAC;IAE1C,IAAA,KAAsB,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAApC,MAAM,QAAA,EAAE,SAAS,QAAmB,CAAC;IAE5C,IAAM,UAAU,GAAG;QACjB,MAAM,aAAN,MAAM,uBAAN,MAAM,EAAI,CAAC;QACX,SAAS,CAAC,IAAI,CAAC,CAAC;IAClB,CAAC,CAAC;IAEI,IAAA,KAAoB,IAAA,uCAAS,EAAC;QAClC,SAAS,EAAE,qBAAqB,IAAI,oBAAoB,IAAI,CAAC;QAC7D,UAAU,EAAE,kBAAkB,IAAI,iBAAiB;QACnD,WAAW,EAAE,IAAI;QACjB,cAAc,EAAE,IAAI;KACrB,CAAC,EALK,OAAO,QAAA,EAAE,MAAM,QAKpB,CAAC;IAEH,IAAM,WAAW,GAAG,IAAA,mBAAW,EAC7B,UAAC,IAAoB;QACnB,OAAO,CAAC,IAAI,CAAC,CAAC;QACd,IAAI,GAAG;YAAG,GAA8C,CAAC,OAAO,GAAG,IAAI,CAAC;IAC1E,CAAC,EACD,CAAC,OAAO,CAAC,CACV,CAAC;IAEF,IAAM,mBAAmB,GAAwB;QAC/C,QAAQ,EAAE,UAAU;QACpB,IAAI,EAAE,CAAC;QACP,GAAG,EAAE,CAAC;QACN,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;KACf,CAAC;IAEF,IAAM,QAAQ,GAAG,gBAAgB,CAAC;QAChC,QAAQ,UAAA;QACR,MAAM,QAAA;QACN,MAAM,QAAA;KACP,CAAC,CAAC;IACH,IAAM,SAAS,GAAG,iBAAiB,CAAC;QAClC,QAAQ,UAAA;QACR,MAAM,QAAA;QACN,MAAM,QAAA;KACP,CAAC,CAAC;IAEH,IAAM,UAAU,GAAG,IAAI,CAAC,UAAU,IAAI,CACpC,6CACE,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,KAAK,EAAE,MAAA,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,IAAI,CAAC,KAAK,mCAAI,SAAS,EACvC,IAAI,EAAC,YAAY,GACjB,CACH,CAAC;IAEF,IAAM,aAAa,GAAG,CACpB,6CACE,MAAM,EACJ,MAAA,IAAI,CAAC,MAAM,mCAAI,WAAW,CAAC,IAAI,CAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,gBAAgB,CAAC,EAEpE,KAAK,EAAE,MAAA,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,IAAI,CAAC,KAAK,mCAAI,SAAS,GACvC,CACH,CAAC;IAEF,IAAM,UAAU,GACd,cAAc,GAAG,CAAC,CAAC,CAAC,CAAC,kBAAW,cAAc,OAAI,CAAC,CAAC,CAAC,SAAS,CAAC;IAEjE,IAAM,WAAW,GACf,cAAc,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAChD,0CACE,IAAI,EAAC,cAAc,iBACP,MAAM,EAClB,GAAG,EAAC,EAAE,EACN,GAAG,EAAE,MAAA,IAAI,CAAC,MAAM,mCAAI,SAAS,EAC7B,KAAK,aACH,eAAe,EAAE,MAAA,IAAI,CAAC,OAAO,mCAAI,SAAS,EAC1C,SAAS,WAAA,EACT,cAAc,gBAAA,IACX,mBAAmB,IAExB,CACH,CAAC,CAAC,CAAC,IAAI,CAAC;IAEH,IAAA,KAAK,GAAkB,IAAI,MAAtB,EAAE,WAAW,GAAK,IAAI,YAAT,CAAU;IACpC,IAAM,MAAM,GAAG,MAAA,IAAI,CAAC,MAAM,mCAAI,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,GAAG,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEtE,IAAM,GAAG,GAAG,4DAAkD,KAAK,yBAAa,MAAM,cAAU,CAAC;IAEjG,IAAM,KAAK,GACT,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,CAClB,0CACE,SAAS,EAAE,gBAAgB,EAC3B,KAAK,EAAE;YACL,OAAO,EAAE,OAAO;YAChB,KAAK,EAAE,MAAM;SACd,EACD,GAAG,EAAE,oCAA6B,IAAA,yBAAM,EAAC,GAAG,CAAC,CAAE,iBACnC,MAAM,EAClB,GAAG,EAAC,EAAE,GACN,CACH,CAAC,CAAC,CAAC,IAAI,CAAC;IAEX,OAAO,CACL,0CACE,GAAG,EAAE,WAAW,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,sBACH,QAAQ,EAAE,QAAQ,IACf,CAAC,MAAM,KAAK,MAAM;YACnB,CAAC,CAAC,mBAAmB;YACrB,CAAC,CAAC,MAAM,KAAK,WAAW;gBACxB,CAAC,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE;gBAC1D,CAAC,CAAC,MAAM,KAAK,OAAO;oBACpB,CAAC,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,OAAA,EAAE;oBACjC,CAAC,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,GACzC,KAAK;QAGT,KAAK;QACL,WAAW;QACX,QAAQ,IAAI,CACX;YACG,UAAU;YACV,aAAa;YACb,IAAI,CAAC,GAAG,IAAI,CACX,0CACE,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,MAAA,IAAI,CAAC,GAAG,mCAAI,EAAE,EACnB,KAAK,EAAE,MAAA,IAAI,CAAC,KAAK,mCAAI,SAAS,EAC9B,MAAM,EAAE,UAAU,EAClB,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC5C,SAAS,EAAE,gBAAgB,EAC3B,KAAK,+BACH,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC1B,UAAU,YAAA,IACP,mBAAmB,KACtB,SAAS,WAAA,EACT,cAAc,gBAAA,KACX,YAAY,IAEjB,CACH,CACO,CACX;QACD;YACE;gBACG,UAAU;gBACV,aAAa;gBACb,IAAI,CAAC,GAAG,IAAI,CACX,0CACE,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,MAAA,IAAI,CAAC,GAAG,mCAAI,EAAE,EACnB,KAAK,EAAE,MAAA,IAAI,CAAC,KAAK,mCAAI,SAAS,EAC9B,SAAS,EAAE,gBAAgB,EAC3B,KAAK,wBAAO,mBAAmB,GAAK,YAAY,GAChD,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EACtC,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,GAC5C,CACH,CACO,CACD,CACP,CACP,CAAC;AACJ,CAAC,CACF,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Image/index.tsx"],"names":[],"mappings":"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"}
package/dist/esm/Image/index.js CHANGED
@@ -109,7 +109,22 @@ export var Image = forwardRef(function (_a, ref) {
109
109
  var webpSource = data.webpSrcSet && (React.createElement("source", { srcSet: data.webpSrcSet, sizes: (_b = sizes !== null && sizes !== void 0 ? sizes : data.sizes) !== null && _b !== void 0 ? _b : undefined, type: "image/webp" }));
110
110
  var regularSource = (React.createElement("source", { srcSet: (_c = data.srcSet) !== null && _c !== void 0 ? _c : buildSrcSet(data.src, data.width, srcSetCandidates), sizes: (_d = sizes !== null && sizes !== void 0 ? sizes : data.sizes) !== null && _d !== void 0 ? _d : undefined }));
111
111
  var transition = fadeInDuration > 0 ? "opacity ".concat(fadeInDuration, "ms") : undefined;
112
- var placeholder = usePlaceholder && (data.bgColor || data.base64) ? (React.createElement("img", { role: "presentation", "aria-hidden": "true", alt: "", src: (_e = data.base64) !== null && _e !== void 0 ? _e : undefined, style: __assign({ backgroundColor: (_f = data.bgColor) !== null && _f !== void 0 ? _f : undefined, objectFit: objectFit, objectPosition: objectPosition }, absolutePositioning) })) : null;
112
+ var placeholder = usePlaceholder && (data.bgColor || data.base64) ? (React.createElement("img", { role: "presentation", "aria-hidden": "true", alt: "", src: (_e = data.base64) !== null && _e !== void 0 ? _e : undefined, style: {
113
+ backgroundColor: (_f = data.bgColor) !== null && _f !== void 0 ? _f : undefined,
114
+ objectFit: objectFit,
115
+ objectPosition: objectPosition,
116
+ transition: transition,
117
+ opacity: showImage ? 0 : 1,
118
+ // During the opacity transition of the placeholder to the definitive version,
119
+ // hardware acceleration is triggered. This results in the browser trying to render the
120
+ // placeholder with your GPU, causing blurred edges. Solution: style the placeholder
121
+ // so the edges overflow the container
122
+ position: 'absolute',
123
+ left: '-5%',
124
+ top: '-5%',
125
+ width: '110%',
126
+ height: '110%'
127
+ } })) : null;
113
128
  var width = data.width, aspectRatio = data.aspectRatio;
114
129
  var height = (_g = data.height) !== null && _g !== void 0 ? _g : (aspectRatio ? width / aspectRatio : 0);
115
130
  var svg = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"".concat(width, "\" height=\"").concat(height, "\"></svg>");
@@ -129,11 +144,11 @@ export var Image = forwardRef(function (_a, ref) {
129
144
  addImage && (React.createElement("picture", null,
130
145
  webpSource,
131
146
  regularSource,
132
- data.src && (React.createElement("img", { src: data.src, alt: (_h = data.alt) !== null && _h !== void 0 ? _h : '', title: (_j = data.title) !== null && _j !== void 0 ? _j : undefined, onLoad: handleLoad, fetchPriority: priority ? 'high' : undefined, className: pictureClassName, style: __assign(__assign(__assign({ opacity: showImage ? 1 : 0, transition: transition }, absolutePositioning), { objectFit: objectFit, objectPosition: objectPosition }), pictureStyle) })))),
147
+ data.src && (React.createElement("img", { src: data.src, alt: (_h = data.alt) !== null && _h !== void 0 ? _h : '', title: (_j = data.title) !== null && _j !== void 0 ? _j : undefined, onLoad: handleLoad, fetchpriority: priority ? 'high' : undefined, className: pictureClassName, style: __assign(__assign(__assign({ opacity: showImage ? 1 : 0, transition: transition }, absolutePositioning), { objectFit: objectFit, objectPosition: objectPosition }), pictureStyle) })))),
133
148
  React.createElement("noscript", null,
134
149
  React.createElement("picture", null,
135
150
  webpSource,
136
151
  regularSource,
137
- data.src && (React.createElement("img", { src: data.src, alt: (_k = data.alt) !== null && _k !== void 0 ? _k : '', title: (_l = data.title) !== null && _l !== void 0 ? _l : undefined, className: pictureClassName, style: __assign(__assign({}, absolutePositioning), pictureStyle), loading: lazyLoad ? 'lazy' : undefined, fetchPriority: priority ? 'high' : undefined }))))));
152
+ data.src && (React.createElement("img", { src: data.src, alt: (_k = data.alt) !== null && _k !== void 0 ? _k : '', title: (_l = data.title) !== null && _l !== void 0 ? _l : undefined, className: pictureClassName, style: __assign(__assign({}, absolutePositioning), pictureStyle), loading: lazyLoad ? 'lazy' : undefined, fetchpriority: priority ? 'high' : undefined }))))));
138
153
  });
139
154
  //# sourceMappingURL=index.js.map
package/dist/esm/Image/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Image/index.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/Image/index.tsx"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-datocms",
3
- "version": "4.0.2",
3
+ "version": "4.0.3",
4
4
  "types": "dist/types/index.d.ts",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
package/src/Image/__tests__/__snapshots__/index.test.tsx.snap CHANGED
@@ -38,13 +38,15 @@ exports[`Image layout=fill not visible renders the blur-up thumb 1`] = `
38
38
  style={
39
39
  Object {
40
40
  "backgroundColor": undefined,
41
- "height": "100%",
42
- "left": 0,
41
+ "height": "110%",
42
+ "left": "-5%",
43
43
  "objectFit": undefined,
44
44
  "objectPosition": undefined,
45
+ "opacity": 1,
45
46
  "position": "absolute",
46
- "top": 0,
47
- "width": "100%",
47
+ "top": "-5%",
48
+ "transition": "opacity 500ms",
49
+ "width": "110%",
48
50
  }
49
51
  }
50
52
  />
@@ -93,13 +95,15 @@ exports[`Image layout=fill visible image loaded shows the image 1`] = `
93
95
  style={
94
96
  Object {
95
97
  "backgroundColor": undefined,
96
- "height": "100%",
97
- "left": 0,
98
+ "height": "110%",
99
+ "left": "-5%",
98
100
  "objectFit": undefined,
99
101
  "objectPosition": undefined,
102
+ "opacity": 0,
100
103
  "position": "absolute",
101
- "top": 0,
102
- "width": "100%",
104
+ "top": "-5%",
105
+ "transition": "opacity 500ms",
106
+ "width": "110%",
103
107
  }
104
108
  }
105
109
  />
@@ -168,13 +172,15 @@ exports[`Image layout=fill visible renders the image (minimal data) 1`] = `
168
172
  style={
169
173
  Object {
170
174
  "backgroundColor": undefined,
171
- "height": "100%",
172
- "left": 0,
175
+ "height": "110%",
176
+ "left": "-5%",
173
177
  "objectFit": undefined,
174
178
  "objectPosition": undefined,
179
+ "opacity": 1,
175
180
  "position": "absolute",
176
- "top": 0,
177
- "width": "100%",
181
+ "top": "-5%",
182
+ "transition": "opacity 500ms",
183
+ "width": "110%",
178
184
  }
179
185
  }
180
186
  />
@@ -246,13 +252,15 @@ exports[`Image layout=fill visible renders the image 1`] = `
246
252
  style={
247
253
  Object {
248
254
  "backgroundColor": undefined,
249
- "height": "100%",
250
- "left": 0,
255
+ "height": "110%",
256
+ "left": "-5%",
251
257
  "objectFit": undefined,
252
258
  "objectPosition": undefined,
259
+ "opacity": 1,
253
260
  "position": "absolute",
254
- "top": 0,
255
- "width": "100%",
261
+ "top": "-5%",
262
+ "transition": "opacity 500ms",
263
+ "width": "110%",
256
264
  }
257
265
  }
258
266
  />
@@ -334,13 +342,15 @@ exports[`Image layout=fixed not visible renders the blur-up thumb 1`] = `
334
342
  style={
335
343
  Object {
336
344
  "backgroundColor": undefined,
337
- "height": "100%",
338
- "left": 0,
345
+ "height": "110%",
346
+ "left": "-5%",
339
347
  "objectFit": undefined,
340
348
  "objectPosition": undefined,
349
+ "opacity": 1,
341
350
  "position": "absolute",
342
- "top": 0,
343
- "width": "100%",
351
+ "top": "-5%",
352
+ "transition": "opacity 500ms",
353
+ "width": "110%",
344
354
  }
345
355
  }
346
356
  />
@@ -397,13 +407,15 @@ exports[`Image layout=fixed visible image loaded shows the image 1`] = `
397
407
  style={
398
408
  Object {
399
409
  "backgroundColor": undefined,
400
- "height": "100%",
401
- "left": 0,
410
+ "height": "110%",
411
+ "left": "-5%",
402
412
  "objectFit": undefined,
403
413
  "objectPosition": undefined,
414
+ "opacity": 0,
404
415
  "position": "absolute",
405
- "top": 0,
406
- "width": "100%",
416
+ "top": "-5%",
417
+ "transition": "opacity 500ms",
418
+ "width": "110%",
407
419
  }
408
420
  }
409
421
  />
@@ -480,13 +492,15 @@ exports[`Image layout=fixed visible renders the image (minimal data) 1`] = `
480
492
  style={
481
493
  Object {
482
494
  "backgroundColor": undefined,
483
- "height": "100%",
484
- "left": 0,
495
+ "height": "110%",
496
+ "left": "-5%",
485
497
  "objectFit": undefined,
486
498
  "objectPosition": undefined,
499
+ "opacity": 1,
487
500
  "position": "absolute",
488
- "top": 0,
489
- "width": "100%",
501
+ "top": "-5%",
502
+ "transition": "opacity 500ms",
503
+ "width": "110%",
490
504
  }
491
505
  }
492
506
  />
@@ -566,13 +580,15 @@ exports[`Image layout=fixed visible renders the image 1`] = `
566
580
  style={
567
581
  Object {
568
582
  "backgroundColor": undefined,
569
- "height": "100%",
570
- "left": 0,
583
+ "height": "110%",
584
+ "left": "-5%",
571
585
  "objectFit": undefined,
572
586
  "objectPosition": undefined,
587
+ "opacity": 1,
573
588
  "position": "absolute",
574
- "top": 0,
575
- "width": "100%",
589
+ "top": "-5%",
590
+ "transition": "opacity 500ms",
591
+ "width": "110%",
576
592
  }
577
593
  }
578
594
  />
@@ -655,13 +671,15 @@ exports[`Image layout=intrinsic not visible renders the blur-up thumb 1`] = `
655
671
  style={
656
672
  Object {
657
673
  "backgroundColor": undefined,
658
- "height": "100%",
659
- "left": 0,
674
+ "height": "110%",
675
+ "left": "-5%",
660
676
  "objectFit": undefined,
661
677
  "objectPosition": undefined,
678
+ "opacity": 1,
662
679
  "position": "absolute",
663
- "top": 0,
664
- "width": "100%",
680
+ "top": "-5%",
681
+ "transition": "opacity 500ms",
682
+ "width": "110%",
665
683
  }
666
684
  }
667
685
  />
@@ -719,13 +737,15 @@ exports[`Image layout=intrinsic visible image loaded shows the image 1`] = `
719
737
  style={
720
738
  Object {
721
739
  "backgroundColor": undefined,
722
- "height": "100%",
723
- "left": 0,
740
+ "height": "110%",
741
+ "left": "-5%",
724
742
  "objectFit": undefined,
725
743
  "objectPosition": undefined,
744
+ "opacity": 0,
726
745
  "position": "absolute",
727
- "top": 0,
728
- "width": "100%",
746
+ "top": "-5%",
747
+ "transition": "opacity 500ms",
748
+ "width": "110%",
729
749
  }
730
750
  }
731
751
  />
@@ -803,13 +823,15 @@ exports[`Image layout=intrinsic visible renders the image (minimal data) 1`] = `
803
823
  style={
804
824
  Object {
805
825
  "backgroundColor": undefined,
806
- "height": "100%",
807
- "left": 0,
826
+ "height": "110%",
827
+ "left": "-5%",
808
828
  "objectFit": undefined,
809
829
  "objectPosition": undefined,
830
+ "opacity": 1,
810
831
  "position": "absolute",
811
- "top": 0,
812
- "width": "100%",
832
+ "top": "-5%",
833
+ "transition": "opacity 500ms",
834
+ "width": "110%",
813
835
  }
814
836
  }
815
837
  />
@@ -890,13 +912,15 @@ exports[`Image layout=intrinsic visible renders the image 1`] = `
890
912
  style={
891
913
  Object {
892
914
  "backgroundColor": undefined,
893
- "height": "100%",
894
- "left": 0,
915
+ "height": "110%",
916
+ "left": "-5%",
895
917
  "objectFit": undefined,
896
918
  "objectPosition": undefined,
919
+ "opacity": 1,
897
920
  "position": "absolute",
898
- "top": 0,
899
- "width": "100%",
921
+ "top": "-5%",
922
+ "transition": "opacity 500ms",
923
+ "width": "110%",
900
924
  }
901
925
  }
902
926
  />
@@ -978,13 +1002,15 @@ exports[`Image layout=responsive not visible renders the blur-up thumb 1`] = `
978
1002
  style={
979
1003
  Object {
980
1004
  "backgroundColor": undefined,
981
- "height": "100%",
982
- "left": 0,
1005
+ "height": "110%",
1006
+ "left": "-5%",
983
1007
  "objectFit": undefined,
984
1008
  "objectPosition": undefined,
1009
+ "opacity": 1,
985
1010
  "position": "absolute",
986
- "top": 0,
987
- "width": "100%",
1011
+ "top": "-5%",
1012
+ "transition": "opacity 500ms",
1013
+ "width": "110%",
988
1014
  }
989
1015
  }
990
1016
  />
@@ -1041,13 +1067,15 @@ exports[`Image layout=responsive visible image loaded shows the image 1`] = `
1041
1067
  style={
1042
1068
  Object {
1043
1069
  "backgroundColor": undefined,
1044
- "height": "100%",
1045
- "left": 0,
1070
+ "height": "110%",
1071
+ "left": "-5%",
1046
1072
  "objectFit": undefined,
1047
1073
  "objectPosition": undefined,
1074
+ "opacity": 0,
1048
1075
  "position": "absolute",
1049
- "top": 0,
1050
- "width": "100%",
1076
+ "top": "-5%",
1077
+ "transition": "opacity 500ms",
1078
+ "width": "110%",
1051
1079
  }
1052
1080
  }
1053
1081
  />
@@ -1124,13 +1152,15 @@ exports[`Image layout=responsive visible renders the image (minimal data) 1`] =
1124
1152
  style={
1125
1153
  Object {
1126
1154
  "backgroundColor": undefined,
1127
- "height": "100%",
1128
- "left": 0,
1155
+ "height": "110%",
1156
+ "left": "-5%",
1129
1157
  "objectFit": undefined,
1130
1158
  "objectPosition": undefined,
1159
+ "opacity": 1,
1131
1160
  "position": "absolute",
1132
- "top": 0,
1133
- "width": "100%",
1161
+ "top": "-5%",
1162
+ "transition": "opacity 500ms",
1163
+ "width": "110%",
1134
1164
  }
1135
1165
  }
1136
1166
  />
@@ -1210,13 +1240,15 @@ exports[`Image layout=responsive visible renders the image 1`] = `
1210
1240
  style={
1211
1241
  Object {
1212
1242
  "backgroundColor": undefined,
1213
- "height": "100%",
1214
- "left": 0,
1243
+ "height": "110%",
1244
+ "left": "-5%",
1215
1245
  "objectFit": undefined,
1216
1246
  "objectPosition": undefined,
1247
+ "opacity": 1,
1217
1248
  "position": "absolute",
1218
- "top": 0,
1219
- "width": "100%",
1249
+ "top": "-5%",
1250
+ "transition": "opacity 500ms",
1251
+ "width": "110%",
1220
1252
  }
1221
1253
  }
1222
1254
  />
package/src/Image/index.tsx CHANGED
@@ -276,7 +276,17 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
276
276
  backgroundColor: data.bgColor ?? undefined,
277
277
  objectFit,
278
278
  objectPosition,
279
- ...absolutePositioning,
279
+ transition,
280
+ opacity: showImage ? 0 : 1,
281
+ // During the opacity transition of the placeholder to the definitive version,
282
+ // hardware acceleration is triggered. This results in the browser trying to render the
283
+ // placeholder with your GPU, causing blurred edges. Solution: style the placeholder
284
+ // so the edges overflow the container
285
+ position: 'absolute',
286
+ left: '-5%',
287
+ top: '-5%',
288
+ width: '110%',
289
+ height: '110%',
280
290
  }}
281
291
  />
282
292
  ) : null;
@@ -328,7 +338,7 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
328
338
  alt={data.alt ?? ''}
329
339
  title={data.title ?? undefined}
330
340
  onLoad={handleLoad}
331
- fetchPriority={priority ? 'high' : undefined}
341
+ fetchpriority={priority ? 'high' : undefined}
332
342
  className={pictureClassName}
333
343
  style={{
334
344
  opacity: showImage ? 1 : 0,
@@ -354,7 +364,7 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
354
364
  className={pictureClassName}
355
365
  style={{ ...absolutePositioning, ...pictureStyle }}
356
366
  loading={lazyLoad ? 'lazy' : undefined}
357
- fetchPriority={priority ? 'high' : undefined}
367
+ fetchpriority={priority ? 'high' : undefined}
358
368
  />
359
369
  )}
360
370
  </picture>