@lumx/react 2.1.9-alpha-thumbnail3 → 2.1.9-alpha.0

package/esm/_internal/Thumbnail2.js

@@ -1,54 +1,751 @@
-import { d as _slicedToArray, b as _objectWithoutProperties, _ as _objectSpread2, c as _extends } from './_rollupPluginBabelHelpers.js';
-import { Size, Theme, AspectRatio } from './components.js';
-import React, { useState, useEffect, forwardRef, useRef } from 'react';
+import { d as _slicedToArray, e as _toConsumableArray, _ as _objectSpread2, b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import { AspectRatio, Size, Theme } from './components.js';
+import React, { useRef, useEffect, useState, useMemo, useLayoutEffect, useCallback, forwardRef } from 'react';
 import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
-import { r as mdiImageBroken } from './mdi.js';
+import { I as Icon, r as mdiImageBrokenVariant } from './Icon2.js';
+import { W as WINDOW } from './constants.js';
 import { m as mergeRefs } from './mergeRefs.js';
-import { I as Icon } from './Icon2.js';
+import { c as clamp } from './clamp.js';
+import { isEqual } from 'lodash';
 
-function getState(img, event) {
-  // Error event occurred or image loaded empty.
-  if ((event === null || event === void 0 ? void 0 : event.type) === 'error' || (img === null || img === void 0 ? void 0 : img.complete) && ((img === null || img === void 0 ? void 0 : img.naturalWidth) === 0 || (img === null || img === void 0 ? void 0 : img.naturalHeight) === 0)) {
-    return 'hasError';
-  } // Image is undefined or incomplete.
+/**
+ * Check if browser is IE
+ * @return Browser is IE or not
+ */
+
+var isInternetExplorer = function isInternetExplorer() {
+  var _WINDOW$navigator;
+
+  var userAgent = WINDOW === null || WINDOW === void 0 ? void 0 : (_WINDOW$navigator = WINDOW.navigator) === null || _WINDOW$navigator === void 0 ? void 0 : _WINDOW$navigator.userAgent;
+
+  if (!userAgent) {
+    return false;
+  }
+
+  var msie = userAgent.indexOf('MSIE ');
+  var isIEVersion = !!userAgent.match(/Trident.*rv:11\./);
+  return msie > 0 || isIEVersion;
+};
+
+var resizeObservers = [];
+
+var hasActiveObservations = function () {
+    return resizeObservers.some(function (ro) { return ro.activeTargets.length > 0; });
+};
+
+var hasSkippedObservations = function () {
+    return resizeObservers.some(function (ro) { return ro.skippedTargets.length > 0; });
+};
+
+var msg = 'ResizeObserver loop completed with undelivered notifications.';
+var deliverResizeLoopError = function () {
+    var event;
+    if (typeof ErrorEvent === 'function') {
+        event = new ErrorEvent('error', {
+            message: msg
+        });
+    }
+    else {
+        event = document.createEvent('Event');
+        event.initEvent('error', false, false);
+        event.message = msg;
+    }
+    window.dispatchEvent(event);
+};
+
+var ResizeObserverBoxOptions;
+(function (ResizeObserverBoxOptions) {
+    ResizeObserverBoxOptions["BORDER_BOX"] = "border-box";
+    ResizeObserverBoxOptions["CONTENT_BOX"] = "content-box";
+    ResizeObserverBoxOptions["DEVICE_PIXEL_CONTENT_BOX"] = "device-pixel-content-box";
+})(ResizeObserverBoxOptions || (ResizeObserverBoxOptions = {}));
+
+var DOMRectReadOnly = (function () {
+    function DOMRectReadOnly(x, y, width, height) {
+        this.x = x;
+        this.y = y;
+        this.width = width;
+        this.height = height;
+        this.top = this.y;
+        this.left = this.x;
+        this.bottom = this.top + this.height;
+        this.right = this.left + this.width;
+        return Object.freeze(this);
+    }
+    DOMRectReadOnly.prototype.toJSON = function () {
+        var _a = this, x = _a.x, y = _a.y, top = _a.top, right = _a.right, bottom = _a.bottom, left = _a.left, width = _a.width, height = _a.height;
+        return { x: x, y: y, top: top, right: right, bottom: bottom, left: left, width: width, height: height };
+    };
+    DOMRectReadOnly.fromRect = function (rectangle) {
+        return new DOMRectReadOnly(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
+    };
+    return DOMRectReadOnly;
+}());
+
+var isSVG = function (target) { return target instanceof SVGElement && 'getBBox' in target; };
+var isHidden = function (target) {
+    if (isSVG(target)) {
+        var _a = target.getBBox(), width = _a.width, height = _a.height;
+        return !width && !height;
+    }
+    var _b = target, offsetWidth = _b.offsetWidth, offsetHeight = _b.offsetHeight;
+    return !(offsetWidth || offsetHeight || target.getClientRects().length);
+};
+var isElement = function (obj) {
+    var _a, _b;
+    var scope = (_b = (_a = obj) === null || _a === void 0 ? void 0 : _a.ownerDocument) === null || _b === void 0 ? void 0 : _b.defaultView;
+    return !!(scope && obj instanceof scope.Element);
+};
+var isReplacedElement = function (target) {
+    switch (target.tagName) {
+        case 'INPUT':
+            if (target.type !== 'image') {
+                break;
+            }
+        case 'VIDEO':
+        case 'AUDIO':
+        case 'EMBED':
+        case 'OBJECT':
+        case 'CANVAS':
+        case 'IFRAME':
+        case 'IMG':
+            return true;
+    }
+    return false;
+};
+
+var global = typeof window !== 'undefined' ? window : {};
+
+var cache = new WeakMap();
+var scrollRegexp = /auto|scroll/;
+var verticalRegexp = /^tb|vertical/;
+var IE = (/msie|trident/i).test(global.navigator && global.navigator.userAgent);
+var parseDimension = function (pixel) { return parseFloat(pixel || '0'); };
+var size = function (inlineSize, blockSize, switchSizes) {
+    if (inlineSize === void 0) { inlineSize = 0; }
+    if (blockSize === void 0) { blockSize = 0; }
+    if (switchSizes === void 0) { switchSizes = false; }
+    return Object.freeze({
+        inlineSize: (switchSizes ? blockSize : inlineSize) || 0,
+        blockSize: (switchSizes ? inlineSize : blockSize) || 0
+    });
+};
+var zeroBoxes = Object.freeze({
+    devicePixelContentBoxSize: size(),
+    borderBoxSize: size(),
+    contentBoxSize: size(),
+    contentRect: new DOMRectReadOnly(0, 0, 0, 0)
+});
+var calculateBoxSizes = function (target, forceRecalculation) {
+    if (forceRecalculation === void 0) { forceRecalculation = false; }
+    if (cache.has(target) && !forceRecalculation) {
+        return cache.get(target);
+    }
+    if (isHidden(target)) {
+        cache.set(target, zeroBoxes);
+        return zeroBoxes;
+    }
+    var cs = getComputedStyle(target);
+    var svg = isSVG(target) && target.ownerSVGElement && target.getBBox();
+    var removePadding = !IE && cs.boxSizing === 'border-box';
+    var switchSizes = verticalRegexp.test(cs.writingMode || '');
+    var canScrollVertically = !svg && scrollRegexp.test(cs.overflowY || '');
+    var canScrollHorizontally = !svg && scrollRegexp.test(cs.overflowX || '');
+    var paddingTop = svg ? 0 : parseDimension(cs.paddingTop);
+    var paddingRight = svg ? 0 : parseDimension(cs.paddingRight);
+    var paddingBottom = svg ? 0 : parseDimension(cs.paddingBottom);
+    var paddingLeft = svg ? 0 : parseDimension(cs.paddingLeft);
+    var borderTop = svg ? 0 : parseDimension(cs.borderTopWidth);
+    var borderRight = svg ? 0 : parseDimension(cs.borderRightWidth);
+    var borderBottom = svg ? 0 : parseDimension(cs.borderBottomWidth);
+    var borderLeft = svg ? 0 : parseDimension(cs.borderLeftWidth);
+    var horizontalPadding = paddingLeft + paddingRight;
+    var verticalPadding = paddingTop + paddingBottom;
+    var horizontalBorderArea = borderLeft + borderRight;
+    var verticalBorderArea = borderTop + borderBottom;
+    var horizontalScrollbarThickness = !canScrollHorizontally ? 0 : target.offsetHeight - verticalBorderArea - target.clientHeight;
+    var verticalScrollbarThickness = !canScrollVertically ? 0 : target.offsetWidth - horizontalBorderArea - target.clientWidth;
+    var widthReduction = removePadding ? horizontalPadding + horizontalBorderArea : 0;
+    var heightReduction = removePadding ? verticalPadding + verticalBorderArea : 0;
+    var contentWidth = svg ? svg.width : parseDimension(cs.width) - widthReduction - verticalScrollbarThickness;
+    var contentHeight = svg ? svg.height : parseDimension(cs.height) - heightReduction - horizontalScrollbarThickness;
+    var borderBoxWidth = contentWidth + horizontalPadding + verticalScrollbarThickness + horizontalBorderArea;
+    var borderBoxHeight = contentHeight + verticalPadding + horizontalScrollbarThickness + verticalBorderArea;
+    var boxes = Object.freeze({
+        devicePixelContentBoxSize: size(Math.round(contentWidth * devicePixelRatio), Math.round(contentHeight * devicePixelRatio), switchSizes),
+        borderBoxSize: size(borderBoxWidth, borderBoxHeight, switchSizes),
+        contentBoxSize: size(contentWidth, contentHeight, switchSizes),
+        contentRect: new DOMRectReadOnly(paddingLeft, paddingTop, contentWidth, contentHeight)
+    });
+    cache.set(target, boxes);
+    return boxes;
+};
+var calculateBoxSize = function (target, observedBox, forceRecalculation) {
+    var _a = calculateBoxSizes(target, forceRecalculation), borderBoxSize = _a.borderBoxSize, contentBoxSize = _a.contentBoxSize, devicePixelContentBoxSize = _a.devicePixelContentBoxSize;
+    switch (observedBox) {
+        case ResizeObserverBoxOptions.DEVICE_PIXEL_CONTENT_BOX:
+            return devicePixelContentBoxSize;
+        case ResizeObserverBoxOptions.BORDER_BOX:
+            return borderBoxSize;
+        default:
+            return contentBoxSize;
+    }
+};
+
+var ResizeObserverEntry = (function () {
+    function ResizeObserverEntry(target) {
+        var boxes = calculateBoxSizes(target);
+        this.target = target;
+        this.contentRect = boxes.contentRect;
+        this.borderBoxSize = [boxes.borderBoxSize];
+        this.contentBoxSize = [boxes.contentBoxSize];
+        this.devicePixelContentBoxSize = [boxes.devicePixelContentBoxSize];
+    }
+    return ResizeObserverEntry;
+}());
+
+var calculateDepthForNode = function (node) {
+    if (isHidden(node)) {
+        return Infinity;
+    }
+    var depth = 0;
+    var parent = node.parentNode;
+    while (parent) {
+        depth += 1;
+        parent = parent.parentNode;
+    }
+    return depth;
+};
+
+var broadcastActiveObservations = function () {
+    var shallowestDepth = Infinity;
+    var callbacks = [];
+    resizeObservers.forEach(function processObserver(ro) {
+        if (ro.activeTargets.length === 0) {
+            return;
+        }
+        var entries = [];
+        ro.activeTargets.forEach(function processTarget(ot) {
+            var entry = new ResizeObserverEntry(ot.target);
+            var targetDepth = calculateDepthForNode(ot.target);
+            entries.push(entry);
+            ot.lastReportedSize = calculateBoxSize(ot.target, ot.observedBox);
+            if (targetDepth < shallowestDepth) {
+                shallowestDepth = targetDepth;
+            }
+        });
+        callbacks.push(function resizeObserverCallback() {
+            ro.callback.call(ro.observer, entries, ro.observer);
+        });
+        ro.activeTargets.splice(0, ro.activeTargets.length);
+    });
+    for (var _i = 0, callbacks_1 = callbacks; _i < callbacks_1.length; _i++) {
+        var callback = callbacks_1[_i];
+        callback();
+    }
+    return shallowestDepth;
+};
+
+var gatherActiveObservationsAtDepth = function (depth) {
+    resizeObservers.forEach(function processObserver(ro) {
+        ro.activeTargets.splice(0, ro.activeTargets.length);
+        ro.skippedTargets.splice(0, ro.skippedTargets.length);
+        ro.observationTargets.forEach(function processTarget(ot) {
+            if (ot.isActive()) {
+                if (calculateDepthForNode(ot.target) > depth) {
+                    ro.activeTargets.push(ot);
+                }
+                else {
+                    ro.skippedTargets.push(ot);
+                }
+            }
+        });
+    });
+};
+
+var process = function () {
+    var depth = 0;
+    gatherActiveObservationsAtDepth(depth);
+    while (hasActiveObservations()) {
+        depth = broadcastActiveObservations();
+        gatherActiveObservationsAtDepth(depth);
+    }
+    if (hasSkippedObservations()) {
+        deliverResizeLoopError();
+    }
+    return depth > 0;
+};
+
+var trigger;
+var callbacks = [];
+var notify = function () { return callbacks.splice(0).forEach(function (cb) { return cb(); }); };
+var queueMicroTask = function (callback) {
+    if (!trigger) {
+        var toggle_1 = 0;
+        var el_1 = document.createTextNode('');
+        var config = { characterData: true };
+        new MutationObserver(function () { return notify(); }).observe(el_1, config);
+        trigger = function () { el_1.textContent = "" + (toggle_1 ? toggle_1-- : toggle_1++); };
+    }
+    callbacks.push(callback);
+    trigger();
+};
+
+var queueResizeObserver = function (cb) {
+    queueMicroTask(function ResizeObserver() {
+        requestAnimationFrame(cb);
+    });
+};
+
+var watching = 0;
+var isWatching = function () { return !!watching; };
+var CATCH_PERIOD = 250;
+var observerConfig = { attributes: true, characterData: true, childList: true, subtree: true };
+var events = [
+    'resize',
+    'load',
+    'transitionend',
+    'animationend',
+    'animationstart',
+    'animationiteration',
+    'keyup',
+    'keydown',
+    'mouseup',
+    'mousedown',
+    'mouseover',
+    'mouseout',
+    'blur',
+    'focus'
+];
+var time = function (timeout) {
+    if (timeout === void 0) { timeout = 0; }
+    return Date.now() + timeout;
+};
+var scheduled = false;
+var Scheduler = (function () {
+    function Scheduler() {
+        var _this = this;
+        this.stopped = true;
+        this.listener = function () { return _this.schedule(); };
+    }
+    Scheduler.prototype.run = function (timeout) {
+        var _this = this;
+        if (timeout === void 0) { timeout = CATCH_PERIOD; }
+        if (scheduled) {
+            return;
+        }
+        scheduled = true;
+        var until = time(timeout);
+        queueResizeObserver(function () {
+            var elementsHaveResized = false;
+            try {
+                elementsHaveResized = process();
+            }
+            finally {
+                scheduled = false;
+                timeout = until - time();
+                if (!isWatching()) {
+                    return;
+                }
+                if (elementsHaveResized) {
+                    _this.run(1000);
+                }
+                else if (timeout > 0) {
+                    _this.run(timeout);
+                }
+                else {
+                    _this.start();
+                }
+            }
+        });
+    };
+    Scheduler.prototype.schedule = function () {
+        this.stop();
+        this.run();
+    };
+    Scheduler.prototype.observe = function () {
+        var _this = this;
+        var cb = function () { return _this.observer && _this.observer.observe(document.body, observerConfig); };
+        document.body ? cb() : global.addEventListener('DOMContentLoaded', cb);
+    };
+    Scheduler.prototype.start = function () {
+        var _this = this;
+        if (this.stopped) {
+            this.stopped = false;
+            this.observer = new MutationObserver(this.listener);
+            this.observe();
+            events.forEach(function (name) { return global.addEventListener(name, _this.listener, true); });
+        }
+    };
+    Scheduler.prototype.stop = function () {
+        var _this = this;
+        if (!this.stopped) {
+            this.observer && this.observer.disconnect();
+            events.forEach(function (name) { return global.removeEventListener(name, _this.listener, true); });
+            this.stopped = true;
+        }
+    };
+    return Scheduler;
+}());
+var scheduler = new Scheduler();
+var updateCount = function (n) {
+    !watching && n > 0 && scheduler.start();
+    watching += n;
+    !watching && scheduler.stop();
+};
+
+var skipNotifyOnElement = function (target) {
+    return !isSVG(target)
+        && !isReplacedElement(target)
+        && getComputedStyle(target).display === 'inline';
+};
+var ResizeObservation = (function () {
+    function ResizeObservation(target, observedBox) {
+        this.target = target;
+        this.observedBox = observedBox || ResizeObserverBoxOptions.CONTENT_BOX;
+        this.lastReportedSize = {
+            inlineSize: 0,
+            blockSize: 0
+        };
+    }
+    ResizeObservation.prototype.isActive = function () {
+        var size = calculateBoxSize(this.target, this.observedBox, true);
+        if (skipNotifyOnElement(this.target)) {
+            this.lastReportedSize = size;
+        }
+        if (this.lastReportedSize.inlineSize !== size.inlineSize
+            || this.lastReportedSize.blockSize !== size.blockSize) {
+            return true;
+        }
+        return false;
+    };
+    return ResizeObservation;
+}());
+
+var ResizeObserverDetail = (function () {
+    function ResizeObserverDetail(resizeObserver, callback) {
+        this.activeTargets = [];
+        this.skippedTargets = [];
+        this.observationTargets = [];
+        this.observer = resizeObserver;
+        this.callback = callback;
+    }
+    return ResizeObserverDetail;
+}());
+
+var observerMap = new WeakMap();
+var getObservationIndex = function (observationTargets, target) {
+    for (var i = 0; i < observationTargets.length; i += 1) {
+        if (observationTargets[i].target === target) {
+            return i;
+        }
+    }
+    return -1;
+};
+var ResizeObserverController = (function () {
+    function ResizeObserverController() {
+    }
+    ResizeObserverController.connect = function (resizeObserver, callback) {
+        var detail = new ResizeObserverDetail(resizeObserver, callback);
+        observerMap.set(resizeObserver, detail);
+    };
+    ResizeObserverController.observe = function (resizeObserver, target, options) {
+        var detail = observerMap.get(resizeObserver);
+        var firstObservation = detail.observationTargets.length === 0;
+        if (getObservationIndex(detail.observationTargets, target) < 0) {
+            firstObservation && resizeObservers.push(detail);
+            detail.observationTargets.push(new ResizeObservation(target, options && options.box));
+            updateCount(1);
+            scheduler.schedule();
+        }
+    };
+    ResizeObserverController.unobserve = function (resizeObserver, target) {
+        var detail = observerMap.get(resizeObserver);
+        var index = getObservationIndex(detail.observationTargets, target);
+        var lastObservation = detail.observationTargets.length === 1;
+        if (index >= 0) {
+            lastObservation && resizeObservers.splice(resizeObservers.indexOf(detail), 1);
+            detail.observationTargets.splice(index, 1);
+            updateCount(-1);
+        }
+    };
+    ResizeObserverController.disconnect = function (resizeObserver) {
+        var _this = this;
+        var detail = observerMap.get(resizeObserver);
+        detail.observationTargets.slice().forEach(function (ot) { return _this.unobserve(resizeObserver, ot.target); });
+        detail.activeTargets.splice(0, detail.activeTargets.length);
+    };
+    return ResizeObserverController;
+}());
+
+var ResizeObserver = (function () {
+    function ResizeObserver(callback) {
+        if (arguments.length === 0) {
+            throw new TypeError("Failed to construct 'ResizeObserver': 1 argument required, but only 0 present.");
+        }
+        if (typeof callback !== 'function') {
+            throw new TypeError("Failed to construct 'ResizeObserver': The callback provided as parameter 1 is not a function.");
+        }
+        ResizeObserverController.connect(this, callback);
+    }
+    ResizeObserver.prototype.observe = function (target, options) {
+        if (arguments.length === 0) {
+            throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': 1 argument required, but only 0 present.");
+        }
+        if (!isElement(target)) {
+            throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element");
+        }
+        ResizeObserverController.observe(this, target, options);
+    };
+    ResizeObserver.prototype.unobserve = function (target) {
+        if (arguments.length === 0) {
+            throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': 1 argument required, but only 0 present.");
+        }
+        if (!isElement(target)) {
+            throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': parameter 1 is not of type 'Element");
+        }
+        ResizeObserverController.unobserve(this, target);
+    };
+    ResizeObserver.prototype.disconnect = function () {
+        ResizeObserverController.disconnect(this);
+    };
+    ResizeObserver.toString = function () {
+        return 'function ResizeObserver () { [polyfill code] }';
+    };
+    return ResizeObserver;
+}());
+
+var _ref;
+var ResizeObserver$1 = ((_ref = WINDOW) === null || _ref === void 0 ? void 0 : _ref.ResizeObserver) || ResizeObserver;
+function useOnResize(element, update) {
+  var observerRef = useRef(null);
+  var previousSize = useRef();
+  useEffect(function () {
+    if (!element || !update) {
+      return undefined;
+    }
+
+    previousSize.current = undefined;
+    var observer = observerRef.current || new ResizeObserver$1(function (_ref2) {
+      var _previousSize$current, _previousSize$current2;
+
+      var _ref3 = _slicedToArray(_ref2, 1),
+          entry = _ref3[0];
+
+      var updateFunction = update.current;
 
+      if (!updateFunction) {
+        return;
+      }
 
-  if (!img || !img.complete) {
-    return 'isLoading';
-  } // Else loaded.
+      var _entry$contentRect = entry.contentRect,
+          width = _entry$contentRect.width,
+          height = _entry$contentRect.height;
 
+      if (((_previousSize$current = previousSize.current) === null || _previousSize$current === void 0 ? void 0 : _previousSize$current.width) === width && ((_previousSize$current2 = previousSize.current) === null || _previousSize$current2 === void 0 ? void 0 : _previousSize$current2.height) === height) {
+        return;
+      }
 
-  return 'isLoaded';
+      window.requestAnimationFrame(function () {
+        return updateFunction();
+      });
+      previousSize.current = entry.contentRect;
+    });
+    if (!observerRef.current) observerRef.current = observer;
+    observer.observe(element);
+    return function () {
+      observer.unobserve(element);
+    };
+  }, [element, update]);
+}
+
+var IMG_STYLES = {
+  bottom: 0,
+  left: 0,
+  position: 'absolute',
+  right: 0,
+  top: 0,
+  minHeight: '100%',
+  minWidth: '100%'
+};
+var WRAPPER_STYLES = {
+  overflow: 'hidden',
+  position: 'relative'
+};
+
+function calculateSizes(imageElement, parentElement, aspectRatio) {
+  if (!imageElement || !parentElement || !aspectRatio || aspectRatio === AspectRatio.original) return undefined;
+
+  var _ref = imageElement || {
+    naturalWidth: 0,
+    naturalHeight: 0
+  },
+      imgWidth = _ref.naturalWidth,
+      imgHeight = _ref.naturalHeight;
+
+  var _ref2 = (parentElement === null || parentElement === void 0 ? void 0 : parentElement.getBoundingClientRect()) || {
+    width: 0,
+    height: 0
+  },
+      containerWidth = _ref2.width,
+      containerHeight = _ref2.height;
+
+  return {
+    imgWidth: imgWidth,
+    imgHeight: imgHeight,
+    containerWidth: containerWidth,
+    containerHeight: containerHeight,
+    aspectRatio: aspectRatio
+  };
+}
+
+var parseFocusPoint = function parseFocusPoint() {
+  var point = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return {
+    x: point.x ? clamp(point.x, -1, 1) : 0,
+    y: point.y ? clamp(point.y, -1, 1) : 0
+  };
+};
+
+function calculateImageShift(containerToImageSizeRatio, containerSize, imageSize, focusSize, toMinus) {
+  var containerCenter = Math.floor(containerSize / 2); // Container center in px
+
+  var focusFactor = (focusSize + 1) / 2; // Focus point of resize image in px
+
+  var scaledImage = Math.floor(imageSize / containerToImageSizeRatio); // Can't use width() as images may be display:none
+
+  var focus = Math.floor(focusFactor * scaledImage);
+
+  if (toMinus) {
+    focus = scaledImage - focus;
+  }
+
+  var focusOffset = focus - containerCenter; // Calculate difference between focus point and center
+
+  var remainder = scaledImage - focus; // Reduce offset if necessary so image remains filled
+
+  var containerRemainder = containerSize - containerCenter;
+
+  if (remainder < containerRemainder) {
+    focusOffset -= containerRemainder - remainder;
+  }
+
+  if (focusOffset < 0) {
+    focusOffset = 0;
+  }
+
+  return focusOffset * -100 / containerSize;
+}
+
+function calculateImageStyle(sizes, point) {
+  if (!sizes.imgWidth || !sizes.imgHeight || !sizes.containerWidth || !sizes.containerHeight) {
+    return undefined;
+  } // Which is over by more?
+
+
+  var widthRatio = sizes.imgWidth / sizes.containerWidth;
+  var heightRatio = sizes.imgHeight / sizes.containerHeight;
+
+  var image = _objectSpread2({}, IMG_STYLES); // Minimize image while still filling space
+
+
+  if (sizes.imgWidth > sizes.containerWidth && sizes.imgHeight > sizes.containerHeight) {
+    image[widthRatio > heightRatio ? 'maxHeight' : 'maxWidth'] = '100%';
+  }
+
+  if (widthRatio > heightRatio) {
+    image.left = "".concat(calculateImageShift(heightRatio, sizes.containerWidth, sizes.imgWidth, point.x), "%");
+  } else if (widthRatio < heightRatio) {
+    image.top = "".concat(calculateImageShift(widthRatio, sizes.containerHeight, sizes.imgHeight, point.y, true), "%");
+  }
+
+  return {
+    image: image,
+    wrapper: WRAPPER_STYLES
+  };
 }
+/**
+ * Hook that calculate CSS style to shift the image in it's container according to the focus point.
+ */
+
+
+var useFocusPoint = function useFocusPoint(options) {
+  var image = options.image,
+      aspectRatio = options.aspectRatio,
+      focusPoint = options.focusPoint,
+      imgRef = options.imgRef,
+      loadingState = options.loadingState,
+      wrapper = options.wrapper;
+  var point = parseFocusPoint(focusPoint);
+  var previousPoint = useRef();
+  var previousSizes = useRef({});
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      style = _useState2[0],
+      setStyle = _useState2[1]; // Update style.
+
+
+  var updateRef = useRef(null);
+  var update = useMemo(function () {
+    var updateFunction = function updateFunction() {
+      var sizes = calculateSizes(imgRef === null || imgRef === void 0 ? void 0 : imgRef.current, wrapper, aspectRatio);
+
+      if (!sizes || isEqual(sizes, previousSizes.current) && isEqual(point, previousPoint.current)) {
+        // Nothing changed.
+        return;
+      }
+
+      setStyle(calculateImageStyle(sizes, point));
+      previousPoint.current = point;
+      previousSizes.current = sizes;
+    };
+
+    updateRef.current = updateFunction;
+    return updateFunction;
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [].concat(_toConsumableArray(Object.values(point)), [imgRef, wrapper, aspectRatio])); // Update on image loaded.
+
+  useLayoutEffect(update, [image, update, loadingState]); // Update on parent resize.
+
+  useOnResize(wrapper, updateRef);
+  return style;
+};
 
-function useImageLoad(imageURL, imgRef) {
+function useImageLoad(imgRef) {
   var _imgRef$current;
 
-  var _useState = useState(getState(imgRef === null || imgRef === void 0 ? void 0 : imgRef.current)),
+  var _useState = useState('isLoading'),
       _useState2 = _slicedToArray(_useState, 2),
       state = _useState2[0],
-      setState = _useState2[1]; // Update state when changing image URL or DOM reference.
+      setState = _useState2[1];
 
+  var update = useCallback(function (event) {
+    var img = imgRef === null || imgRef === void 0 ? void 0 : imgRef.current;
 
-  useEffect(function () {
-    setState(getState(imgRef === null || imgRef === void 0 ? void 0 : imgRef.current));
-  }, [imageURL, imgRef]); // Listen to `load` and `error` event on image
+    if (!img || !img.complete) {
+      setState('isLoading');
+      return;
+    }
+
+    if ((event === null || event === void 0 ? void 0 : event.type) === 'error' || img.complete && (img === null || img === void 0 ? void 0 : img.naturalWidth) === 0) {
+      setState('hasError');
+      return;
+    }
 
+    setState('isLoaded');
+  }, [imgRef]);
   useEffect(function () {
     var img = imgRef === null || imgRef === void 0 ? void 0 : imgRef.current;
     if (!img) return undefined;
-
-    var update = function update(event) {
-      return setState(getState(img, event));
-    };
-
+    update();
     img.addEventListener('load', update);
     img.addEventListener('error', update);
     return function () {
       img.removeEventListener('load', update);
       img.removeEventListener('error', update);
     };
-  }, [imgRef, imgRef === null || imgRef === void 0 ? void 0 : (_imgRef$current = imgRef.current) === null || _imgRef$current === void 0 ? void 0 : _imgRef$current.src]);
+  }, [update, imgRef, imgRef === null || imgRef === void 0 ? void 0 : (_imgRef$current = imgRef.current) === null || _imgRef$current === void 0 ? void 0 : _imgRef$current.src]);
   return state;
 }
 
@@ -66,17 +763,10 @@ var CLASSNAME = getRootClassName(COMPONENT_NAME);
  */
 
 var DEFAULT_PROPS = {
-  fallback: mdiImageBroken,
+  fallback: mdiImageBrokenVariant,
   loading: 'lazy',
   theme: Theme.light
 };
-
-function getObjectPosition(aspectRatio, focusPoint) {
-  if (aspectRatio === AspectRatio.original || !(focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.y) && !(focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.x)) return undefined;
-  var x = Math.round(Math.abs((((focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.x) || 0) + 1) / 2) * 100);
-  var y = Math.round(Math.abs((((focusPoint === null || focusPoint === void 0 ? void 0 : focusPoint.y) || 0) - 1) / 2) * 100);
-  return "".concat(x, "% ").concat(y, "%");
-}
 /**
  * Thumbnail component.
  *
@@ -85,12 +775,12 @@ function getObjectPosition(aspectRatio, focusPoint) {
  * @return React element.
  */
 
-
 var Thumbnail = forwardRef(function (props, ref) {
+  var _wrapper$getBoundingC;
+
   var align = props.align,
       alt = props.alt,
-      _props$aspectRatio = props.aspectRatio,
-      aspectRatio = _props$aspectRatio === void 0 ? AspectRatio.original : _props$aspectRatio,
+      aspectRatio = props.aspectRatio,
       badge = props.badge,
       className = props.className,
       crossOrigin = props.crossOrigin,
@@ -100,22 +790,25 @@ var Thumbnail = forwardRef(function (props, ref) {
       image = props.image,
       imgProps = props.imgProps,
       propImgRef = props.imgRef,
-      isLoadingProp = props.isLoading,
       loading = props.loading,
       size = props.size,
       theme = props.theme,
       variant = props.variant,
       linkProps = props.linkProps,
       linkAs = props.linkAs,
-      _props$showSkeletonLo = props.showSkeletonLoading,
-      showSkeletonLoading = _props$showSkeletonLo === void 0 ? true : _props$showSkeletonLo,
-      forwardedProps = _objectWithoutProperties(props, ["align", "alt", "aspectRatio", "badge", "className", "crossOrigin", "fallback", "fillHeight", "focusPoint", "image", "imgProps", "imgRef", "isLoading", "loading", "size", "theme", "variant", "linkProps", "linkAs", "showSkeletonLoading"]);
+      forwardedProps = _objectWithoutProperties(props, ["align", "alt", "aspectRatio", "badge", "className", "crossOrigin", "fallback", "fillHeight", "focusPoint", "image", "imgProps", "imgRef", "loading", "size", "theme", "variant", "linkProps", "linkAs"]);
 
   var imgRef = useRef(null); // Image loading state.
 
-  var loadingState = useImageLoad(image, imgRef);
-  var isLoading = isLoadingProp || loadingState === 'isLoading';
+  var loadingState = useImageLoad(imgRef);
   var hasError = loadingState === 'hasError';
+  var isLoading = loadingState === 'isLoading';
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      wrapper = _useState2[0],
+      setWrapper = _useState2[1];
+
   var isLink = Boolean((linkProps === null || linkProps === void 0 ? void 0 : linkProps.href) || linkAs);
   var isButton = !!forwardedProps.onClick;
   var isClickable = isButton || isLink;
@@ -128,10 +821,19 @@ var Thumbnail = forwardRef(function (props, ref) {
     Object.assign(wrapperProps, linkProps);
   } else if (isButton) {
     Wrapper = 'button';
-  }
+  } // Update img style according to focus point and aspect ratio.
+
 
+  var style = useFocusPoint({
+    image: image,
+    focusPoint: focusPoint,
+    aspectRatio: aspectRatio,
+    imgRef: imgRef,
+    loadingState: loadingState,
+    wrapper: wrapper
+  });
   return React.createElement(Wrapper, _extends({}, wrapperProps, {
-    ref: ref,
+    ref: mergeRefs(setWrapper, ref),
     className: classnames(linkProps === null || linkProps === void 0 ? void 0 : linkProps.className, className, handleBasicClasses({
       align: align,
       aspectRatio: aspectRatio,
@@ -140,32 +842,32 @@ var Thumbnail = forwardRef(function (props, ref) {
       theme: theme,
       variant: variant,
       isClickable: isClickable,
-      hasError: hasError,
-      isLoading: showSkeletonLoading && isLoading,
       hasBadge: !!badge
-    }), fillHeight && "".concat(CLASSNAME, "--fill-height"))
+    }), isLoading && (wrapper === null || wrapper === void 0 ? void 0 : (_wrapper$getBoundingC = wrapper.getBoundingClientRect()) === null || _wrapper$getBoundingC === void 0 ? void 0 : _wrapper$getBoundingC.height) && 'lumx-color-background-dark-L6', fillHeight && "".concat(CLASSNAME, "--fill-height"))
   }), React.createElement("div", {
-    className: "".concat(CLASSNAME, "__background")
+    className: "".concat(CLASSNAME, "__background"),
+    style: _objectSpread2({}, style === null || style === void 0 ? void 0 : style.wrapper, {
+      // Remove from layout if image not loaded correctly (use fallback)
+      display: hasError ? 'none' : undefined,
+      // Hide while loading.
+      visibility: isLoading ? 'hidden' : undefined
+    })
   }, React.createElement("img", _extends({}, imgProps, {
-    style: _objectSpread2({}, imgProps === null || imgProps === void 0 ? void 0 : imgProps.style, {
-      // Hide on error.
-      visibility: hasError ? 'hidden' : undefined,
-      // Focus point.
-      objectPosition: getObjectPosition(aspectRatio, focusPoint)
-    }),
+    style: _objectSpread2({}, imgProps === null || imgProps === void 0 ? void 0 : imgProps.style, {}, style === null || style === void 0 ? void 0 : style.image),
     ref: mergeRefs(imgRef, propImgRef),
-    className: classnames("".concat(CLASSNAME, "__image"), isLoading && "".concat(CLASSNAME, "__image--is-loading")),
-    crossOrigin: crossOrigin,
+    className: (style === null || style === void 0 ? void 0 : style.image) ? "".concat(CLASSNAME, "__focused-image") : "".concat(CLASSNAME, "__image"),
+    crossOrigin: crossOrigin && !isInternetExplorer() ? crossOrigin : undefined,
     src: image,
     alt: alt,
     loading: loading
-  })), !isLoading && hasError && React.createElement("div", {
-    className: "".concat(CLASSNAME, "__fallback")
-  }, typeof fallback === 'string' ? React.createElement(Icon, {
+  }))), hasError && (typeof fallback === 'string' ? React.createElement(Icon, {
+    className: "".concat(CLASSNAME, "__fallback"),
     icon: fallback,
-    size: Size.xxs,
+    size: size || Size.m,
     theme: theme
-  }) : fallback)), badge && React.cloneElement(badge, {
+  }) : React.createElement("div", {
+    className: "".concat(CLASSNAME, "__fallback")
+  }, fallback)), badge && React.cloneElement(badge, {
     className: classnames("".concat(CLASSNAME, "__badge"), badge.props.className)
   }));
 });