react-datocms 6.0.1 → 6.0.2

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 (6) hide show
  1. package/README.md +1 -1
  2. package/dist/cjs/Image/index.js +1 -1
  3. package/dist/esm/Image/index.js +1 -1
  4. package/package.json +1 -1
  5. package/src/Image/__tests__/__snapshots__/index.test.tsx.snap +23 -23
  6. package/src/Image/index.tsx +1 -1
package/README.md CHANGED
@@ -31,7 +31,7 @@ This package offers different components and hooks. Please refer to one of the f
31
31
 
32
32
  For fully working examples take a look at our [examples directory](https://github.com/datocms/react-datocms/tree/master/examples).
33
33
 
34
- Live demo: [https://react-datocms-example.netlify.com/](https://react-datocms-example.netlify.com/)
34
+ Live demo: [https://react-datocms-example.netlify.app/](https://react-datocms-example.netlify.app/)
35
35
 
36
36
  # Development
37
37
 
package/dist/cjs/Image/index.js CHANGED
@@ -56,7 +56,7 @@ exports.Image = (0, react_2.forwardRef)(({ className, fadeInDuration = 500, inte
56
56
  // hardware acceleration is triggered. This results in the browser trying to render the
57
57
  // placeholder with your GPU, causing blurred edges. Solution: style the placeholder
58
58
  // so the edges overflow the container
59
- position: 'absolute', left: '-5%', top: '-5%', width: '110%', height: '110%', maxWidth: 'none', maxHeight: 'none' }, placeholderStyle);
59
+ position: 'absolute', left: '-5%', top: '-5%', width: '110%', height: 'auto', maxWidth: 'none', maxHeight: 'none' }, placeholderStyle);
60
60
  const placeholder = usePlaceholder && data.base64 ? (react_1.default.createElement("img", { "aria-hidden": "true", alt: "", src: data.base64, className: placeholderClassName, style: Object.assign({ objectFit,
61
61
  objectPosition }, basePlaceholderStyle) })) : usePlaceholder && data.bgColor ? (react_1.default.createElement("div", { className: placeholderClassName, style: Object.assign({ backgroundColor: data.bgColor }, basePlaceholderStyle) })) : null;
62
62
  const { width, aspectRatio } = data;
package/dist/esm/Image/index.js CHANGED
@@ -50,7 +50,7 @@ export const Image = forwardRef(({ className, fadeInDuration = 500, intersection
50
50
  // hardware acceleration is triggered. This results in the browser trying to render the
51
51
  // placeholder with your GPU, causing blurred edges. Solution: style the placeholder
52
52
  // so the edges overflow the container
53
- position: 'absolute', left: '-5%', top: '-5%', width: '110%', height: '110%', maxWidth: 'none', maxHeight: 'none' }, placeholderStyle);
53
+ position: 'absolute', left: '-5%', top: '-5%', width: '110%', height: 'auto', maxWidth: 'none', maxHeight: 'none' }, placeholderStyle);
54
54
  const placeholder = usePlaceholder && data.base64 ? (React.createElement("img", { "aria-hidden": "true", alt: "", src: data.base64, className: placeholderClassName, style: Object.assign({ objectFit,
55
55
  objectPosition }, basePlaceholderStyle) })) : usePlaceholder && data.bgColor ? (React.createElement("div", { className: placeholderClassName, style: Object.assign({ backgroundColor: data.bgColor }, basePlaceholderStyle) })) : null;
56
56
  const { width, aspectRatio } = data;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-datocms",
3
- "version": "6.0.1",
3
+ "version": "6.0.2",
4
4
  "engines": {
5
5
  "node": ">=8.0.0"
6
6
  },
package/src/Image/__tests__/__snapshots__/index.test.tsx.snap CHANGED
@@ -39,7 +39,7 @@ exports[`Image explicit sizes renders correctly 1`] = `
39
39
  src="data:image/jpeg;base64,<IMAGE-DATA>"
40
40
  style={
41
41
  {
42
- "height": "110%",
42
+ "height": "auto",
43
43
  "left": "-5%",
44
44
  "maxHeight": "none",
45
45
  "maxWidth": "none",
@@ -124,7 +124,7 @@ exports[`Image layout=fill not visible renders the blur-up thumb 1`] = `
124
124
  src="data:image/jpeg;base64,<IMAGE-DATA>"
125
125
  style={
126
126
  {
127
- "height": "110%",
127
+ "height": "auto",
128
128
  "left": "-5%",
129
129
  "maxHeight": "none",
130
130
  "maxWidth": "none",
@@ -183,7 +183,7 @@ exports[`Image layout=fill visible image loaded shows the image 1`] = `
183
183
  src="data:image/jpeg;base64,<IMAGE-DATA>"
184
184
  style={
185
185
  {
186
- "height": "110%",
186
+ "height": "auto",
187
187
  "left": "-5%",
188
188
  "maxHeight": "none",
189
189
  "maxWidth": "none",
@@ -264,7 +264,7 @@ exports[`Image layout=fill visible renders the image (minimal data) 1`] = `
264
264
  src="data:image/jpeg;base64,<IMAGE-DATA>"
265
265
  style={
266
266
  {
267
- "height": "110%",
267
+ "height": "auto",
268
268
  "left": "-5%",
269
269
  "maxHeight": "none",
270
270
  "maxWidth": "none",
@@ -343,7 +343,7 @@ exports[`Image layout=fill visible renders the image (relative URL) 1`] = `
343
343
  src="data:image/jpeg;base64,<IMAGE-DATA>"
344
344
  style={
345
345
  {
346
- "height": "110%",
346
+ "height": "auto",
347
347
  "left": "-5%",
348
348
  "maxHeight": "none",
349
349
  "maxWidth": "none",
@@ -427,7 +427,7 @@ exports[`Image layout=fill visible renders the image 1`] = `
427
427
  src="data:image/jpeg;base64,<IMAGE-DATA>"
428
428
  style={
429
429
  {
430
- "height": "110%",
430
+ "height": "auto",
431
431
  "left": "-5%",
432
432
  "maxHeight": "none",
433
433
  "maxWidth": "none",
@@ -519,7 +519,7 @@ exports[`Image layout=fixed not visible renders the blur-up thumb 1`] = `
519
519
  src="data:image/jpeg;base64,<IMAGE-DATA>"
520
520
  style={
521
521
  {
522
- "height": "110%",
522
+ "height": "auto",
523
523
  "left": "-5%",
524
524
  "maxHeight": "none",
525
525
  "maxWidth": "none",
@@ -584,7 +584,7 @@ exports[`Image layout=fixed visible image loaded shows the image 1`] = `
584
584
  src="data:image/jpeg;base64,<IMAGE-DATA>"
585
585
  style={
586
586
  {
587
- "height": "110%",
587
+ "height": "auto",
588
588
  "left": "-5%",
589
589
  "maxHeight": "none",
590
590
  "maxWidth": "none",
@@ -671,7 +671,7 @@ exports[`Image layout=fixed visible renders the image (minimal data) 1`] = `
671
671
  src="data:image/jpeg;base64,<IMAGE-DATA>"
672
672
  style={
673
673
  {
674
- "height": "110%",
674
+ "height": "auto",
675
675
  "left": "-5%",
676
676
  "maxHeight": "none",
677
677
  "maxWidth": "none",
@@ -756,7 +756,7 @@ exports[`Image layout=fixed visible renders the image (relative URL) 1`] = `
756
756
  src="data:image/jpeg;base64,<IMAGE-DATA>"
757
757
  style={
758
758
  {
759
- "height": "110%",
759
+ "height": "auto",
760
760
  "left": "-5%",
761
761
  "maxHeight": "none",
762
762
  "maxWidth": "none",
@@ -846,7 +846,7 @@ exports[`Image layout=fixed visible renders the image 1`] = `
846
846
  src="data:image/jpeg;base64,<IMAGE-DATA>"
847
847
  style={
848
848
  {
849
- "height": "110%",
849
+ "height": "auto",
850
850
  "left": "-5%",
851
851
  "maxHeight": "none",
852
852
  "maxWidth": "none",
@@ -939,7 +939,7 @@ exports[`Image layout=intrinsic not visible renders the blur-up thumb 1`] = `
939
939
  src="data:image/jpeg;base64,<IMAGE-DATA>"
940
940
  style={
941
941
  {
942
- "height": "110%",
942
+ "height": "auto",
943
943
  "left": "-5%",
944
944
  "maxHeight": "none",
945
945
  "maxWidth": "none",
@@ -1005,7 +1005,7 @@ exports[`Image layout=intrinsic visible image loaded shows the image 1`] = `
1005
1005
  src="data:image/jpeg;base64,<IMAGE-DATA>"
1006
1006
  style={
1007
1007
  {
1008
- "height": "110%",
1008
+ "height": "auto",
1009
1009
  "left": "-5%",
1010
1010
  "maxHeight": "none",
1011
1011
  "maxWidth": "none",
@@ -1093,7 +1093,7 @@ exports[`Image layout=intrinsic visible renders the image (minimal data) 1`] = `
1093
1093
  src="data:image/jpeg;base64,<IMAGE-DATA>"
1094
1094
  style={
1095
1095
  {
1096
- "height": "110%",
1096
+ "height": "auto",
1097
1097
  "left": "-5%",
1098
1098
  "maxHeight": "none",
1099
1099
  "maxWidth": "none",
@@ -1179,7 +1179,7 @@ exports[`Image layout=intrinsic visible renders the image (relative URL) 1`] = `
1179
1179
  src="data:image/jpeg;base64,<IMAGE-DATA>"
1180
1180
  style={
1181
1181
  {
1182
- "height": "110%",
1182
+ "height": "auto",
1183
1183
  "left": "-5%",
1184
1184
  "maxHeight": "none",
1185
1185
  "maxWidth": "none",
@@ -1270,7 +1270,7 @@ exports[`Image layout=intrinsic visible renders the image 1`] = `
1270
1270
  src="data:image/jpeg;base64,<IMAGE-DATA>"
1271
1271
  style={
1272
1272
  {
1273
- "height": "110%",
1273
+ "height": "auto",
1274
1274
  "left": "-5%",
1275
1275
  "maxHeight": "none",
1276
1276
  "maxWidth": "none",
@@ -1362,7 +1362,7 @@ exports[`Image layout=responsive not visible renders the blur-up thumb 1`] = `
1362
1362
  src="data:image/jpeg;base64,<IMAGE-DATA>"
1363
1363
  style={
1364
1364
  {
1365
- "height": "110%",
1365
+ "height": "auto",
1366
1366
  "left": "-5%",
1367
1367
  "maxHeight": "none",
1368
1368
  "maxWidth": "none",
@@ -1427,7 +1427,7 @@ exports[`Image layout=responsive visible image loaded shows the image 1`] = `
1427
1427
  src="data:image/jpeg;base64,<IMAGE-DATA>"
1428
1428
  style={
1429
1429
  {
1430
- "height": "110%",
1430
+ "height": "auto",
1431
1431
  "left": "-5%",
1432
1432
  "maxHeight": "none",
1433
1433
  "maxWidth": "none",
@@ -1514,7 +1514,7 @@ exports[`Image layout=responsive visible renders the image (minimal data) 1`] =
1514
1514
  src="data:image/jpeg;base64,<IMAGE-DATA>"
1515
1515
  style={
1516
1516
  {
1517
- "height": "110%",
1517
+ "height": "auto",
1518
1518
  "left": "-5%",
1519
1519
  "maxHeight": "none",
1520
1520
  "maxWidth": "none",
@@ -1599,7 +1599,7 @@ exports[`Image layout=responsive visible renders the image (relative URL) 1`] =
1599
1599
  src="data:image/jpeg;base64,<IMAGE-DATA>"
1600
1600
  style={
1601
1601
  {
1602
- "height": "110%",
1602
+ "height": "auto",
1603
1603
  "left": "-5%",
1604
1604
  "maxHeight": "none",
1605
1605
  "maxWidth": "none",
@@ -1689,7 +1689,7 @@ exports[`Image layout=responsive visible renders the image 1`] = `
1689
1689
  src="data:image/jpeg;base64,<IMAGE-DATA>"
1690
1690
  style={
1691
1691
  {
1692
- "height": "110%",
1692
+ "height": "auto",
1693
1693
  "left": "-5%",
1694
1694
  "maxHeight": "none",
1695
1695
  "maxWidth": "none",
@@ -1799,7 +1799,7 @@ exports[`Image passing className and/or style renders correctly 1`] = `
1799
1799
  style={
1800
1800
  {
1801
1801
  "border": "1px solid green ",
1802
- "height": "110%",
1802
+ "height": "auto",
1803
1803
  "left": "-5%",
1804
1804
  "maxHeight": "none",
1805
1805
  "maxWidth": "none",
@@ -1886,7 +1886,7 @@ exports[`Image priority=true renders correctly 1`] = `
1886
1886
  src="data:image/jpeg;base64,<IMAGE-DATA>"
1887
1887
  style={
1888
1888
  {
1889
- "height": "110%",
1889
+ "height": "auto",
1890
1890
  "left": "-5%",
1891
1891
  "maxHeight": "none",
1892
1892
  "maxWidth": "none",
package/src/Image/index.tsx CHANGED
@@ -205,7 +205,7 @@ export const Image = forwardRef<HTMLDivElement, ImagePropTypes>(
205
205
  left: '-5%',
206
206
  top: '-5%',
207
207
  width: '110%',
208
- height: '110%',
208
+ height: 'auto',
209
209
  maxWidth: 'none',
210
210
  maxHeight: 'none',
211
211
  ...placeholderStyle,