@uncinc/uncinc-react-kitchen-sink 2.8.15 → 2.8.19

package/dist/components/GoogleConsentCookieBanner/index.js

@@ -313,9 +313,7 @@ var CookieCompliancePopup = function CookieCompliancePopup(props) {
     id: "only-necessary-agree",
     className: "Button--cta",
     inverted: necessaryButtonInverted,
-    onClick: function onClick() {
-      return onConsent(true);
-    }
+    onClick: onConsent(true)
   }, onlyNecessaryText), /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "GoogleConsentCookieBanner__content__buttons__manual GoogleConsentCookieBanner__content__buttons__manual-agree ".concat(manualButtonClassname),
@@ -333,9 +331,7 @@ var CookieCompliancePopup = function CookieCompliancePopup(props) {
   }, /*#__PURE__*/React.createElement(Button, {
     className: "Button--cta",
     primary: true,
-    onClick: function onClick() {
-      return onConsent(false);
-    }
+    onClick: onConsent(false)
   }, acceptSelectionText), /*#__PURE__*/React.createElement(Button, {
     className: "Button--cta",
     inverted: necessaryButtonInverted,

package/dist/components/Image/AdaptivePicture/index.js

@@ -6,8 +6,9 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import React from 'react';
 import c from 'classnames';
-import './style.scss';
+import urlParse from 'url';
 import { isValidImage, useImageLoader, calculateTargetSrc } from '../helpers';
+import './style.scss';
 
 // extend html img props
 
@@ -44,19 +45,30 @@ var AdaptivePicture = function AdaptivePicture(_ref) {
     if (!container) return;
     var resizeObserver = new ResizeObserver(function (entries) {
       var widthAfterResize = entries[0].contentRect.width;
+      var newSrcRequired = false;
       if (image.width < widthAfterResize) {
         var newTargetSrc = calculateTargetSrc(image.width, validatedSources, fallbackImage);
         if (targetSrc !== newTargetSrc) {
           setTargetSrc(newTargetSrc);
+          newSrcRequired = true;
         }
       } else {
         var _newTargetSrc = calculateTargetSrc(widthAfterResize, validatedSources, fallbackImage);
         if (targetSrc !== _newTargetSrc) {
           setTargetSrc(_newTargetSrc);
+          newSrcRequired = true;
         }
       }
       if (status === 'PENDING') {
         setStatus('INITIAL_BREAKPOINT_CALCULATED');
+
+        // We always load the smallest source. If that's also the source we need
+        // set INITIAL_LOADED directly.
+        // With caching turned on, the onLoad function on the img would only trigger once
+        // and thus never unblur the smallest
+        if (!newSrcRequired) {
+          setStatus('INITIAL_LOADED');
+        }
       }
     });
     resizeObserver.observe(container);
@@ -86,7 +98,11 @@ var AdaptivePicture = function AdaptivePicture(_ref) {
       if (_onLoad) {
         _onLoad(e);
       }
-      if (status === 'INITIAL_BREAKPOINT_CALCULATED' && e.target.src === targetSrc) {
+
+      // To handle relative URLs
+      var current = urlParse.parse(e.target.src);
+      var target = urlParse.parse(targetSrc);
+      if (status === 'INITIAL_BREAKPOINT_CALCULATED' && current.pathname === target.pathname) {
         setStatus('INITIAL_LOADED');
       }
     },

package/dist/components/Image/helpers/index.js

@@ -6,7 +6,7 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import path from 'path';
 import { useEffect, useState } from 'react';
-var breakpoints = [0, 256, 512, 1024, 2048];
+var breakpoints = [256, 512, 1024, 2048];
 var mimeTypes = {
   '.gif': 'image/gif',
   '.png': 'image/png',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.8.15",
+  "version": "2.8.19",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",