@uncinc/uncinc-react-kitchen-sink 2.8.16 → 2.8.20

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/dist/components/WysiwygField/index.d.ts

@@ -1,17 +1,21 @@
 export default WysiwygField;
-declare function WysiwygField({ html, customElementHandler, ...props }: {
+declare function WysiwygField({ html, customElementHandler, className, ...props }: {
     [x: string]: any;
     html: any;
     customElementHandler?: (() => void) | undefined;
+    className?: string | undefined;
 }): React.JSX.Element;
 declare namespace WysiwygField {
     namespace propTypes {
         let html: PropTypes.Validator<string>;
         let customElementHandler: PropTypes.Requireable<(...args: any[]) => any>;
+        let className: PropTypes.Requireable<string>;
     }
     namespace defaultProps {
         export function customElementHandler_1(): void;
         export { customElementHandler_1 as customElementHandler };
+        let className_1: string;
+        export { className_1 as className };
     }
 }
 import React from 'react';

package/dist/components/WysiwygField/index.js

@@ -1,16 +1,20 @@
-var _excluded = ["html", "customElementHandler"];
+var _excluded = ["html", "customElementHandler", "className"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React from 'react';
 import PropTypes from 'prop-types';
 import ReactHtmlParser from 'react-html-parser';
+import c from 'classnames';
 import Button from '../Button';
 var WysiwygField = function WysiwygField(_ref) {
   var html = _ref.html,
     _ref$customElementHan = _ref.customElementHandler,
     customElementHandler = _ref$customElementHan === void 0 ? function () {} : _ref$customElementHan,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
     props = _objectWithoutProperties(_ref, _excluded);
+  var classes = c('WysiwygField', className);
   var parsedHtml = ReactHtmlParser(html, {
     transform: function transform(node) {
       var customHandler = customElementHandler(node);
@@ -42,14 +46,16 @@ var WysiwygField = function WysiwygField(_ref) {
     }
   });
   return /*#__PURE__*/React.createElement("div", _extends({
-    className: "WysiwygField"
+    className: classes
   }, props), parsedHtml);
 };
 WysiwygField.propTypes = {
   html: PropTypes.string.isRequired,
-  customElementHandler: PropTypes.func
+  customElementHandler: PropTypes.func,
+  className: PropTypes.string
 };
 WysiwygField.defaultProps = {
-  customElementHandler: function customElementHandler() {}
+  customElementHandler: function customElementHandler() {},
+  className: ''
 };
 export default WysiwygField;

package/package.json

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