@uncinc/uncinc-react-kitchen-sink 2.6.6 → 2.7.0

package/dist/components/Form/Select/Input/index.js

@@ -8,13 +8,25 @@ var _react = _interopRequireDefault(require("react"));
 var _reactSelect = _interopRequireDefault(require("react-select"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _formik = require("formik");
+var _reactI18next = require("react-i18next");
+var _FormikWrapper = require("../../FormikWrapper");
 require("./style.scss");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var SelectInputOption = function SelectInputOption(props) {
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line react/no-danger
+    _react.default.createElement("span", {
+      dangerouslySetInnerHTML: {
+        __html: props.label
+      }
+    })
+  );
+};
 var SelectInput = function SelectInput(props) {
   var fieldName = props.fieldName,
     id = props.id,
     validation = props.validation,
-    value = props.value,
     defaultValue = props.defaultValue,
     _onChange = props.onChange,
     options = props.options,
@@ -28,8 +40,15 @@ var SelectInput = function SelectInput(props) {
     isSearchable = _props$isSearchable === void 0 ? true : _props$isSearchable,
     _props$multiple = props.multiple,
     multiple = _props$multiple === void 0 ? false : _props$multiple,
-    size = props.size;
+    size = props.size,
+    required = props.required;
   var selectedOption = props.selectedOption;
+  var _useExtendedFormikCon = (0, _FormikWrapper.useExtendedFormikContext)(),
+    values = _useExtendedFormikCon.values,
+    setFieldValue = _useExtendedFormikCon.setFieldValue;
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  var value = values[fieldName];
 
   // Check if options is [{value, label}] or {value: label}.
   var optionsTransformed = options;
@@ -57,14 +76,20 @@ var SelectInput = function SelectInput(props) {
       });
     }
   }
+  var handleValidation = function handleValidation(value) {
+    if (validation) {
+      return validation(value);
+    }
+    if (required && (value === undefined || value === null || value === '' || Array.isArray(value) && value.length === 0)) {
+      return t(['webform.components.select.required', 'webform.required', 'webform_required']);
+    }
+  };
   return /*#__PURE__*/_react.default.createElement(_formik.Field, {
     required: true,
     name: fieldName,
     value: value,
-    validate: validation
-  }, function (_ref) {
-    var field = _ref.field,
-      form = _ref.form;
+    validate: handleValidation
+  }, function () {
     return /*#__PURE__*/_react.default.createElement(_reactSelect.default, {
       id: id,
       inputId: fieldName,
@@ -89,10 +114,11 @@ var SelectInput = function SelectInput(props) {
         if (_onChange) {
           _onChange(value);
         }
-        form.setFieldValue(fieldName, value);
+        setFieldValue(fieldName, value);
       },
       options: optionsTransformed,
       isMulti: multiple,
+      formatOptionLabel: SelectInputOption,
       isOptionDisabled: function isOptionDisabled(option) {
         if (option.disabled) {
           return true;

package/dist/components/Form/Select/index.js

@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _GenericFormElement = _interopRequireDefault(require("../GenericFormElement"));
 var _Input = _interopRequireDefault(require("./Input"));
+var _FormikWrapper = require("../FormikWrapper");
 require("./style.scss");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -16,9 +17,6 @@ var Select = function Select(props) {
     fieldName = props.fieldName,
     required = props.required,
     description = props.description,
-    error = props.error,
-    touched = props.touched,
-    displayRequiredIndicator = props.displayRequiredIndicator,
     className = props.className,
     wrapperClassName = props.wrapperClassName,
     _props$disabled = props.disabled,
@@ -28,25 +26,34 @@ var Select = function Select(props) {
     _props$isSearchable = props.isSearchable,
     isSearchable = _props$isSearchable === void 0 ? true : _props$isSearchable,
     _props$isClearable = props.isClearable,
-    isClearable = _props$isClearable === void 0 ? true : _props$isClearable;
+    isClearable = _props$isClearable === void 0 ? true : _props$isClearable,
+    validation = props.validation;
+  var _useExtendedFormikCon = (0, _FormikWrapper.useExtendedFormikContext)(),
+    errors = _useExtendedFormikCon.errors,
+    touched = _useExtendedFormikCon.touched,
+    displayRequiredIndicator = _useExtendedFormikCon.displayRequiredIndicator;
+  var error = errors[fieldName];
+  var isTouched = touched[fieldName];
   return /*#__PURE__*/_react.default.createElement(_GenericFormElement.default, {
     className: (0, _classnames.default)('Select', wrapperClassName),
     title: title,
     required: required,
     description: description,
     fieldName: fieldName,
-    touched: touched,
+    touched: isTouched,
     error: error,
     displayRequiredIndicator: displayRequiredIndicator
   }, /*#__PURE__*/_react.default.createElement(_Input.default, _extends({}, props, {
     fieldName: fieldName,
     className: (0, _classnames.default)(className, {
-      'error': error && touched
+      'error': error && isTouched
     }),
     disabled: disabled,
     multiple: multiple,
     isSearchable: isSearchable,
-    isClearable: isClearable
+    isClearable: isClearable,
+    required: required,
+    validate: validation
   })));
 };
 var _default = Select;

package/dist/components/Form/TextField/index.js

@@ -7,10 +7,12 @@ exports.default = exports.TextField = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _formik = require("formik");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _reactI18next = require("react-i18next");
 var _withMapping = _interopRequireDefault(require("../../../Context/withMapping"));
 var _GenericFormElement = _interopRequireDefault(require("../GenericFormElement"));
+var _FormikWrapper = require("../FormikWrapper");
 require("./style.scss");
-var _excluded = ["title", "required", "description", "placeholder", "fieldName", "validation", "touched", "error", "value", "displayRequiredIndicator", "onChange", "className", "wrapperClassName", "disabled"];
+var _excluded = ["title", "required", "description", "placeholder", "fieldName", "validation", "onChange", "className", "wrapperClassName", "disabled"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -22,10 +24,6 @@ var TextField = function TextField(props) {
     placeholder = props.placeholder,
     fieldName = props.fieldName,
     validation = props.validation,
-    touched = props.touched,
-    error = props.error,
-    value = props.value,
-    displayRequiredIndicator = props.displayRequiredIndicator,
     onChange = props.onChange,
     className = props.className,
     wrapperClassName = props.wrapperClassName,
@@ -33,6 +31,16 @@ var TextField = function TextField(props) {
     disabled = _props$disabled === void 0 ? false : _props$disabled,
     restProps = _objectWithoutProperties(props, _excluded);
   var type = props.type || 'text';
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  var handleValidation = function handleValidation(value) {
+    if (validation) {
+      return validation(value);
+    }
+    if (required && (value === undefined || value === null || value === '')) {
+      return t(['webform.components.text_field.required', 'webform.required', 'webform_required']);
+    }
+  };
   var handleChange = function handleChange(e) {
     var handleChange = props.handleChange;
     if (handleChange) {
@@ -42,25 +50,33 @@ var TextField = function TextField(props) {
       onChange(e);
     }
   };
+  var _useExtendedFormikCon = (0, _FormikWrapper.useExtendedFormikContext)(),
+    values = _useExtendedFormikCon.values,
+    errors = _useExtendedFormikCon.errors,
+    touched = _useExtendedFormikCon.touched,
+    displayRequiredIndicator = _useExtendedFormikCon.displayRequiredIndicator;
+  var isTouched = touched[fieldName];
+  var value = values[fieldName];
+  var error = errors[fieldName];
   return /*#__PURE__*/_react.default.createElement(_GenericFormElement.default, {
     className: (0, _classnames.default)('TextField', wrapperClassName),
     title: title,
     required: required,
     description: description,
     fieldName: fieldName,
-    touched: touched,
+    touched: isTouched,
     error: error,
     displayRequiredIndicator: displayRequiredIndicator
   }, /*#__PURE__*/_react.default.createElement(_formik.Field, _extends({}, restProps, {
     className: (0, _classnames.default)(className, {
-      'error': error && touched
+      'error': error && isTouched
     }),
     id: fieldName,
     name: fieldName,
     type: type,
     value: value,
     placeholder: placeholder,
-    validate: validation,
+    validate: handleValidation,
     onKeyUp: handleChange,
     disabled: disabled
   })));

package/dist/components/Form/Textarea/index.js

@@ -7,9 +7,15 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _formik = require("formik");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _reactI18next = require("react-i18next");
 var _GenericFormElement = _interopRequireDefault(require("../GenericFormElement"));
+var _FormikWrapper = require("../FormikWrapper");
 require("./style.scss");
+var _excluded = ["title", "required", "description", "placeholder", "fieldName", "validation", "rows", "className", "onChange", "wrapperClassName", "disabled"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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; }
 var Textarea = function Textarea(props) {
   var title = props.title,
     required = props.required,
@@ -17,27 +23,43 @@ var Textarea = function Textarea(props) {
     placeholder = props.placeholder,
     fieldName = props.fieldName,
     validation = props.validation,
-    touched = props.touched,
-    error = props.error,
     rows = props.rows,
-    value = props.value,
-    displayRequiredIndicator = props.displayRequiredIndicator,
     className = props.className,
+    onChange = props.onChange,
     wrapperClassName = props.wrapperClassName,
     _props$disabled = props.disabled,
-    disabled = _props$disabled === void 0 ? false : _props$disabled;
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    restProps = _objectWithoutProperties(props, _excluded);
+  var _useExtendedFormikCon = (0, _FormikWrapper.useExtendedFormikContext)(),
+    values = _useExtendedFormikCon.values,
+    errors = _useExtendedFormikCon.errors,
+    touched = _useExtendedFormikCon.touched,
+    displayRequiredIndicator = _useExtendedFormikCon.displayRequiredIndicator;
+  var _useTranslation = (0, _reactI18next.useTranslation)(),
+    t = _useTranslation.t;
+  var isTouched = touched[fieldName];
+  var value = values[fieldName];
+  var error = errors[fieldName];
+  var handleValidation = function handleValidation(value) {
+    if (validation) {
+      return validation(value);
+    }
+    if (required && (value === undefined || value === null || value === '')) {
+      return t(['webform.components.textarea.required', 'webform.required', 'webform_required']);
+    }
+  };
   return /*#__PURE__*/_react.default.createElement(_GenericFormElement.default, {
     className: (0, _classnames.default)('Textarea', wrapperClassName),
     title: title,
     required: required,
     description: description,
     fieldName: fieldName,
-    touched: touched,
+    touched: isTouched,
     error: error,
     displayRequiredIndicator: displayRequiredIndicator
-  }, /*#__PURE__*/_react.default.createElement(_formik.Field, {
+  }, /*#__PURE__*/_react.default.createElement(_formik.Field, _extends({}, restProps, {
     className: (0, _classnames.default)(className, {
-      'error': error && touched
+      'error': error && isTouched
     }),
     id: fieldName,
     name: fieldName,
@@ -45,9 +67,14 @@ var Textarea = function Textarea(props) {
     value: value,
     placeholder: placeholder,
     rows: rows,
-    validate: validation,
-    disabled: disabled
-  }));
+    validate: handleValidation,
+    disabled: disabled,
+    onKeyUp: function onKeyUp(event) {
+      if (onChange) {
+        onChange(event);
+      }
+    }
+  })));
 };
 var _default = Textarea;
 exports.default = _default;

package/dist/components/Form/index.d.ts

@@ -0,0 +1,13 @@
+export { default as FormikWrapper } from "./FormikWrapper";
+export { default as FormCheckbox } from "./Checkbox";
+export { default as FormCheckboxes } from "./Checkboxes";
+export { default as FormDate } from "./DateField";
+export { default as FormDatePicker } from "./DatePicker";
+export { default as FormDateSelect } from "./DateSelect";
+export { default as FormEmail } from "./Email";
+export { default as FormNumber } from "./Number";
+export { default as FormRadioButtons } from "./RadioButtons";
+export { default as FormSearchField } from "./SearchField";
+export { default as FormSelect } from "./Select";
+export { default as FormTextarea } from "./Textarea";
+export { default as FormTextField } from "./TextField";

package/dist/components/Form/index.js

@@ -0,0 +1,97 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FormCheckbox", {
+  enumerable: true,
+  get: function get() {
+    return _Checkbox.default;
+  }
+});
+Object.defineProperty(exports, "FormCheckboxes", {
+  enumerable: true,
+  get: function get() {
+    return _Checkboxes.default;
+  }
+});
+Object.defineProperty(exports, "FormDate", {
+  enumerable: true,
+  get: function get() {
+    return _DateField.default;
+  }
+});
+Object.defineProperty(exports, "FormDatePicker", {
+  enumerable: true,
+  get: function get() {
+    return _DatePicker.default;
+  }
+});
+Object.defineProperty(exports, "FormDateSelect", {
+  enumerable: true,
+  get: function get() {
+    return _DateSelect.default;
+  }
+});
+Object.defineProperty(exports, "FormEmail", {
+  enumerable: true,
+  get: function get() {
+    return _Email.default;
+  }
+});
+Object.defineProperty(exports, "FormNumber", {
+  enumerable: true,
+  get: function get() {
+    return _Number.default;
+  }
+});
+Object.defineProperty(exports, "FormRadioButtons", {
+  enumerable: true,
+  get: function get() {
+    return _RadioButtons.default;
+  }
+});
+Object.defineProperty(exports, "FormSearchField", {
+  enumerable: true,
+  get: function get() {
+    return _SearchField.default;
+  }
+});
+Object.defineProperty(exports, "FormSelect", {
+  enumerable: true,
+  get: function get() {
+    return _Select.default;
+  }
+});
+Object.defineProperty(exports, "FormTextField", {
+  enumerable: true,
+  get: function get() {
+    return _TextField.default;
+  }
+});
+Object.defineProperty(exports, "FormTextarea", {
+  enumerable: true,
+  get: function get() {
+    return _Textarea.default;
+  }
+});
+Object.defineProperty(exports, "FormikWrapper", {
+  enumerable: true,
+  get: function get() {
+    return _FormikWrapper.default;
+  }
+});
+var _FormikWrapper = _interopRequireDefault(require("./FormikWrapper"));
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
+var _Checkboxes = _interopRequireDefault(require("./Checkboxes"));
+var _DateField = _interopRequireDefault(require("./DateField"));
+var _DatePicker = _interopRequireDefault(require("./DatePicker"));
+var _DateSelect = _interopRequireDefault(require("./DateSelect"));
+var _Email = _interopRequireDefault(require("./Email"));
+var _Number = _interopRequireDefault(require("./Number"));
+var _RadioButtons = _interopRequireDefault(require("./RadioButtons"));
+var _SearchField = _interopRequireDefault(require("./SearchField"));
+var _Select = _interopRequireDefault(require("./Select"));
+var _Textarea = _interopRequireDefault(require("./Textarea"));
+var _TextField = _interopRequireDefault(require("./TextField"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/Image/AdaptivePicture/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './style.scss';
+interface Props extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src'> {
+    src: string | string[];
+    onLoad: (e: any) => void;
+    objectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+    aspectRatio?: number | string;
+}
+declare const AdaptivePicture: React.FC<Props>;
+export default AdaptivePicture;

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

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+require("./style.scss");
+var _helpers = require("../helpers");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+// extend html img props
+
+var AdaptivePicture = function AdaptivePicture(_ref) {
+  var src = _ref.src,
+    _onLoad = _ref.onLoad,
+    alt = _ref.alt,
+    objectFit = _ref.objectFit,
+    _ref$aspectRatio = _ref.aspectRatio,
+    aspectRatio = _ref$aspectRatio === void 0 ? 1 : _ref$aspectRatio;
+  var sourcesAsArray = Array.isArray(src) ? src : [src];
+  var validatedSources = sourcesAsArray.filter(_helpers.isValidImage);
+  var fallbackImage = validatedSources[0];
+  var imageRef = _react.default.useRef(null);
+  var style = {
+    objectFit: objectFit,
+    aspectRatio: aspectRatio
+  };
+  var _React$useState = _react.default.useState('PENDING'),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    status = _React$useState2[0],
+    setStatus = _React$useState2[1];
+  var _React$useState3 = _react.default.useState(fallbackImage),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    targetSrc = _React$useState4[0],
+    setTargetSrc = _React$useState4[1];
+  _react.default.useEffect(function () {
+    // @ts-ignore
+    if (global.ssr) return;
+    if (!imageRef.current) return;
+    var image = imageRef.current;
+    // get parent of image element
+    var container = image.parentElement;
+    if (!container) return;
+    var resizeObserver = new ResizeObserver(function (entries) {
+      var widthAfterResize = entries[0].contentRect.width;
+      if (image.width < widthAfterResize) {
+        var newTargetSrc = (0, _helpers.calculateTargetSrc)(image.width, validatedSources, fallbackImage);
+        if (targetSrc !== newTargetSrc) {
+          setTargetSrc(newTargetSrc);
+        }
+      } else {
+        var _newTargetSrc = (0, _helpers.calculateTargetSrc)(widthAfterResize, validatedSources, fallbackImage);
+        if (targetSrc !== _newTargetSrc) {
+          setTargetSrc(_newTargetSrc);
+        }
+      }
+      if (status === 'PENDING') {
+        setStatus('INITIAL_BREAKPOINT_CALCULATED');
+      }
+    });
+    resizeObserver.observe(container);
+
+    // eslint-disable-next-line consistent-return
+    return function () {
+      resizeObserver.unobserve(container);
+    };
+  }, [fallbackImage, status, targetSrc, validatedSources]);
+  var loadedUrl = (0, _helpers.useImageLoader)(fallbackImage, targetSrc, imageRef);
+  function onErrorFallback(e) {
+    if (e.target.src !== fallbackImage) {
+      e.target.src = fallbackImage;
+    }
+  }
+  var classes = (0, _classnames.default)('AdaptivePicture', {
+    'AdaptivePicture--initiallyLoaded': status === 'INITIAL_LOADED'
+  });
+  if (!validatedSources.length) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement("img", {
+    style: style,
+    className: classes,
+    onError: onErrorFallback,
+    onLoad: function onLoad(e) {
+      if (_onLoad) {
+        _onLoad(e);
+      }
+      if (status === 'INITIAL_BREAKPOINT_CALCULATED' && e.target.src === targetSrc) {
+        setStatus('INITIAL_LOADED');
+      }
+    },
+    src: loadedUrl,
+    ref: imageRef,
+    alt: alt
+  });
+};
+var _default = AdaptivePicture;
+exports.default = _default;

package/dist/components/Image/AdaptivePicture/style.scss

@@ -0,0 +1,7 @@
+.AdaptivePicture {
+  width: 100%;
+}
+
+.AdaptivePicture:not(.AdaptivePicture--initiallyLoaded) {
+  filter: blur(1.5rem);
+}

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

@@ -10,6 +10,7 @@ var _path = _interopRequireDefault(require("path"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _extToMimeTypes = _interopRequireDefault(require("./data/ext-to-mime-types.json"));
 require("./style.scss");
+var _helpers = require("../helpers");
 var _excluded = ["src", "className", "onLoad", "imageRef", "includeWebP"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -35,21 +36,10 @@ var Picture = function Picture(_ref) {
     alt: alt,
     title: title
   };
-  var getImageExtension = function getImageExtension(url) {
-    var sanitizedUrl = url.replace(/\?.*/, '');
-    return _path.default.extname(sanitizedUrl).toLowerCase();
-  };
   var getMimeType = function getMimeType(url) {
-    var extension = getImageExtension(url);
+    var extension = (0, _helpers.getImageExtension)(url);
     return _extToMimeTypes.default[extension] ? _extToMimeTypes.default[extension] : FALLBACK_MIME_TYPE;
   };
-  var isValidImage = function isValidImage(url) {
-    if (!url) {
-      return false;
-    }
-    var extension = getImageExtension(url);
-    return Object.keys(_extToMimeTypes.default).includes(extension);
-  };
   if (_immutable.default.Iterable.isIterable(_immutable.default.fromJS(src))) {
     // Sources have to be defined in a descending order.
     // We sort them from best to worst quality.
@@ -57,7 +47,7 @@ var Picture = function Picture(_ref) {
       return parseInt(breakpoint);
     }).reverse();
     var sources = sourcesAll.map(function (url) {
-      if (isValidImage(url)) {
+      if ((0, _helpers.isValidImage)(url)) {
         return url;
       }
     }).filter(function (image) {
@@ -105,7 +95,7 @@ var Picture = function Picture(_ref) {
       src: fallback
     })));
   }
-  if (src && isValidImage(src)) {
+  if (src && (0, _helpers.isValidImage)(src)) {
     if (includeWebP) {
       var webpUrl = src.replace(/\.(png|gif|jp(e?)g)/, '.webp');
       return /*#__PURE__*/_react.default.createElement("picture", {

package/dist/components/Image/helpers/index.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from 'react';
+export declare function getImageExtension(url: string): string;
+/**
+ * Check if the image that belongs to an url is a valid image.
+ *
+ * @param {string} url
+ */
+export declare function isValidImage(url: string): boolean;
+export declare function useImageLoader(initialSrc: string, targetSrc: string, imageRef: RefObject<HTMLImageElement>): string;
+export declare function calculateTargetSrc(referenceWidth: number, sources: string[], fallbackImage: string): string;