@micromag/element-image 0.4.71 → 0.4.77

package/es/index.d.ts

@@ -1,8 +1,23 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ForwardedRef } from 'react';
+import { ImageMedia, ObjectFit, ContainerStyle } from '@micromag/core';
 
-declare const _default: ({ ref, ...props }: {
-    [x: string]: any;
-    ref: any;
-}) => react_jsx_runtime.JSX.Element;
+interface ImageProps {
+    media?: ImageMedia | null;
+    alt?: string | null;
+    width?: number | string | null;
+    height?: number | string | null;
+    resolution?: number;
+    objectFit?: ObjectFit | null;
+    containerStyle?: ContainerStyle;
+    imageStyle?: ContainerStyle;
+    className?: string | null;
+    imageClassName?: string | null;
+    onLoaded?: ((...args: unknown[]) => void) | null;
+    loadingMode?: string;
+    shouldLoad?: boolean;
+    ref?: ForwardedRef<HTMLDivElement> | null;
+}
+declare function Image({ media, alt, width, height, resolution, objectFit, containerStyle, imageStyle, className, imageClassName, onLoaded, loadingMode, shouldLoad, ref, }: ImageProps): react_jsx_runtime.JSX.Element;
 
-export { _default as default };
+export { Image as default };

package/es/index.js

@@ -1,195 +1,342 @@
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { c } from 'react/compiler-runtime';
 import { getSizeWithinBounds } from '@folklore/size';
 import classNames from 'classnames';
-import { useState, useRef, useCallback } from 'react';
+import { useState } from 'react';
 import { useSetting } from '@micromag/core/contexts';
 import { getOptimalImageUrl } from '@micromag/core/utils';
 import { jsx } from 'react/jsx-runtime';
 
 var styles = {"container":"micromag-element-image-container","img":"micromag-element-image-img"};
 
-var _excluded = ["ref"];
-var emptyObject = {};
-function Image(_ref) {
-  var _ref$media = _ref.media,
-    media = _ref$media === void 0 ? null : _ref$media,
-    _ref$alt = _ref.alt,
-    alt = _ref$alt === void 0 ? null : _ref$alt,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? null : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? null : _ref$height,
-    _ref$resolution = _ref.resolution,
-    resolution = _ref$resolution === void 0 ? 1 : _ref$resolution,
-    _ref$objectFit = _ref.objectFit,
-    objectFit = _ref$objectFit === void 0 ? null : _ref$objectFit,
-    _ref$containerStyle = _ref.containerStyle,
-    containerStyle = _ref$containerStyle === void 0 ? emptyObject : _ref$containerStyle,
-    _ref$imageStyle = _ref.imageStyle,
-    imageStyle = _ref$imageStyle === void 0 ? emptyObject : _ref$imageStyle,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className,
-    _ref$imageClassName = _ref.imageClassName,
-    imageClassName = _ref$imageClassName === void 0 ? null : _ref$imageClassName,
-    _ref$onLoaded = _ref.onLoaded,
-    onLoaded = _ref$onLoaded === void 0 ? null : _ref$onLoaded,
-    _ref$loadingMode = _ref.loadingMode,
-    loadingMode = _ref$loadingMode === void 0 ? 'lazy' : _ref$loadingMode,
-    _ref$shouldLoad = _ref.shouldLoad,
-    shouldLoad = _ref$shouldLoad === void 0 ? true : _ref$shouldLoad,
-    _ref$containerRef = _ref.containerRef,
-    containerRef = _ref$containerRef === void 0 ? null : _ref$containerRef;
-  var _ref2 = media || {},
-    _ref2$metadata = _ref2.metadata,
-    metadata = _ref2$metadata === void 0 ? null : _ref2$metadata;
-  var _ref3 = metadata || {},
-    _ref3$width = _ref3.width,
-    mediaWidth = _ref3$width === void 0 ? 0 : _ref3$width,
-    _ref3$height = _ref3.height,
-    mediaHeight = _ref3$height === void 0 ? 0 : _ref3$height,
-    _ref3$description = _ref3.description,
-    description = _ref3$description === void 0 ? 'image' : _ref3$description;
-  var mediaRatio = mediaWidth / mediaHeight;
-  var _useState = useState({
+const emptyObject = {};
+function Image(t0) {
+  const $ = c(61);
+  const {
+    media: t1,
+    alt: t2,
+    width: t3,
+    height: t4,
+    resolution: t5,
+    objectFit: t6,
+    containerStyle: t7,
+    imageStyle: t8,
+    className: t9,
+    imageClassName: t10,
+    onLoaded: t11,
+    loadingMode: t12,
+    shouldLoad: t13,
+    ref: t14
+  } = t0;
+  const media = t1 === undefined ? null : t1;
+  const alt = t2 === undefined ? null : t2;
+  const width = t3 === undefined ? null : t3;
+  const height = t4 === undefined ? null : t4;
+  const resolution = t5 === undefined ? 1 : t5;
+  const objectFit = t6 === undefined ? null : t6;
+  const containerStyle = t7 === undefined ? emptyObject : t7;
+  const imageStyle = t8 === undefined ? emptyObject : t8;
+  const className = t9 === undefined ? null : t9;
+  const imageClassName = t10 === undefined ? null : t10;
+  const onLoaded = t11 === undefined ? null : t11;
+  const loadingMode = t12 === undefined ? "lazy" : t12;
+  const shouldLoad = t13 === undefined ? true : t13;
+  const ref = t14 === undefined ? null : t14;
+  let t15;
+  if ($[0] !== media) {
+    t15 = media || {};
+    $[0] = media;
+    $[1] = t15;
+  } else {
+    t15 = $[1];
+  }
+  const {
+    metadata: t16
+  } = t15;
+  const metadata = t16 === undefined ? null : t16;
+  let t17;
+  if ($[2] !== metadata) {
+    t17 = metadata || {};
+    $[2] = metadata;
+    $[3] = t17;
+  } else {
+    t17 = $[3];
+  }
+  const {
+    width: t18,
+    height: t19,
+    description: t20
+  } = t17;
+  const mediaWidth = t18 === undefined ? 0 : t18;
+  const mediaHeight = t19 === undefined ? 0 : t19;
+  const description = t20 === undefined ? "image" : t20;
+  const mediaRatio = mediaWidth / mediaHeight;
+  let t21;
+  if ($[4] !== mediaHeight || $[5] !== mediaWidth) {
+    t21 = {
       width: mediaWidth,
       height: mediaHeight
-    }),
-    _useState2 = _slicedToArray(_useState, 2),
-    _useState2$ = _useState2[0],
-    _useState2$$width = _useState2$.width,
-    realWidth = _useState2$$width === void 0 ? 0 : _useState2$$width,
-    _useState2$$height = _useState2$.height,
-    realHeight = _useState2$$height === void 0 ? 0 : _useState2$$height,
-    setRealSize = _useState2[1];
-  var supportsWebp = useSetting('supportsWebp', false);
-  var imageResolution = useSetting('imageResolution', resolution);
-  var wasLoadedRef = useRef(shouldLoad);
-  if (shouldLoad && !wasLoadedRef.current) {
-    wasLoadedRef.current = shouldLoad;
+    };
+    $[4] = mediaHeight;
+    $[5] = mediaWidth;
+    $[6] = t21;
+  } else {
+    t21 = $[6];
   }
-  var finalShouldLoad = wasLoadedRef.current;
-  var onImageLoaded = useCallback(function (e) {
-    var _e$target = e.target,
-      _e$target$naturalWidt = _e$target.naturalWidth,
-      naturalWidth = _e$target$naturalWidt === void 0 ? 0 : _e$target$naturalWidt,
-      _e$target$naturalHeig = _e$target.naturalHeight,
-      naturalHeight = _e$target$naturalHeig === void 0 ? 0 : _e$target$naturalHeig;
-    if (naturalWidth !== realWidth || naturalHeight !== realHeight) {
-      setRealSize({
-        width: naturalWidth || 0,
-        height: naturalHeight || 0
-      });
-    }
-    if (onLoaded !== null) {
-      onLoaded(e);
-    }
-  }, [onLoaded]);
-  var withFit = objectFit !== null;
-  var mediaHasSize = realWidth > 0 && realHeight > 0;
-  var finalContainerStyle;
-  var finalImageStyle;
-  if (withFit) {
-    var imageTop = 0;
-    var imageLeft = 0;
-    var imageWidth = width;
-    var imageHeight = height;
-    var imageObjectFit = null;
-    var imageObjectPosition = null;
-    var _ref4 = objectFit || {},
-      _ref4$fit = _ref4.fit,
-      fit = _ref4$fit === void 0 ? null : _ref4$fit,
-      _ref4$horizontalPosit = _ref4.horizontalPosition,
-      horizontalPosition = _ref4$horizontalPosit === void 0 ? 'center' : _ref4$horizontalPosit,
-      _ref4$verticalPositio = _ref4.verticalPosition,
-      verticalPosition = _ref4$verticalPositio === void 0 ? 'center' : _ref4$verticalPositio;
-    if (mediaHasSize) {
-      var _getSizeWithinBounds = getSizeWithinBounds(realWidth, realHeight, width, height, {
-          cover: fit === 'cover'
-        }),
-        resizedImageWidth = _getSizeWithinBounds.width,
-        resizedImageHeight = _getSizeWithinBounds.height;
-      imageWidth = resizedImageWidth;
-      imageHeight = resizedImageHeight;
-      if (horizontalPosition === 'center') {
-        imageLeft = -(resizedImageWidth - width) / 2;
-      } else if (horizontalPosition === 'right') {
-        imageLeft = -(resizedImageWidth - width);
+  const [realSize, setRealSize] = useState(t21);
+  const {
+    width: t22,
+    height: t23
+  } = realSize;
+  const realWidth = t22 === undefined ? 0 : t22;
+  const realHeight = t23 === undefined ? 0 : t23;
+  const supportsWebp = useSetting("supportsWebp", false);
+  const imageResolution = useSetting("imageResolution", resolution);
+  const [wasLoaded, setWasLoaded] = useState(shouldLoad);
+  if (shouldLoad && !wasLoaded) {
+    setWasLoaded(shouldLoad);
+  }
+  const finalShouldLoad = wasLoaded || shouldLoad;
+  let t24;
+  if ($[7] !== onLoaded || $[8] !== realHeight || $[9] !== realWidth) {
+    t24 = e => {
+      const {
+        target: t25
+      } = e;
+      const {
+        naturalWidth: t26,
+        naturalHeight: t27
+      } = t25;
+      const naturalWidth = t26 === undefined ? 0 : t26;
+      const naturalHeight = t27 === undefined ? 0 : t27;
+      if (naturalWidth !== realWidth || naturalHeight !== realHeight) {
+        setRealSize({
+          width: naturalWidth || 0,
+          height: naturalHeight || 0
+        });
       }
-      if (verticalPosition === 'center') {
-        imageTop = -(resizedImageHeight - height) / 2;
-      } else if (verticalPosition === 'bottom') {
-        imageTop = -(resizedImageHeight - height);
+      if (onLoaded !== null) {
+        onLoaded(e);
       }
-    } else {
-      imageObjectFit = fit;
-      imageObjectPosition = "".concat(horizontalPosition, " ").concat(verticalPosition);
-    }
-    finalContainerStyle = {
-      width: width,
-      height: height
-    };
-    finalImageStyle = {
-      position: 'absolute',
-      width: imageWidth,
-      height: imageHeight,
-      top: imageTop,
-      left: imageLeft,
-      objectFit: imageObjectFit,
-      objectPosition: imageObjectPosition
     };
+    $[7] = onLoaded;
+    $[8] = realHeight;
+    $[9] = realWidth;
+    $[10] = t24;
   } else {
-    var validWidth = width !== null && typeof width === 'number';
-    var validHeight = height !== null && typeof height === 'number';
-    var ratioWidth = mediaRatio && validHeight ? height * mediaRatio : null;
-    var ratioHeight = mediaRatio && validWidth ? width / mediaRatio : null;
-    var _finalWidth = width !== null ? width : ratioWidth;
-    var _finalHeight = height !== null ? height : ratioHeight;
-    if (_finalWidth === null && _finalHeight === null) {
-      _finalWidth = realWidth > 0 ? mediaWidth : null;
-      _finalHeight = realHeight > 0 ? mediaHeight : null;
+    t24 = $[10];
+  }
+  const onImageLoaded = t24;
+  const withFit = objectFit !== null;
+  const mediaHasSize = realWidth > 0 && realHeight > 0;
+  let finalContainerStyle;
+  let finalImageStyle;
+  let t25;
+  if ($[11] !== containerStyle || $[12] !== finalContainerStyle || $[13] !== height || $[14] !== imageResolution || $[15] !== imageStyle || $[16] !== media || $[17] !== mediaHasSize || $[18] !== mediaHeight || $[19] !== mediaRatio || $[20] !== mediaWidth || $[21] !== objectFit || $[22] !== realHeight || $[23] !== realWidth || $[24] !== supportsWebp || $[25] !== width || $[26] !== withFit) {
+    if (withFit) {
+      let imageTop = 0;
+      let imageLeft = 0;
+      let imageWidth = width;
+      let imageHeight = height;
+      let imageObjectFit = null;
+      let imageObjectPosition = null;
+      const {
+        fit: t26,
+        horizontalPosition: t27,
+        verticalPosition: t28
+      } = objectFit || {};
+      const fit = t26 === undefined ? null : t26;
+      const horizontalPosition = t27 === undefined ? "center" : t27;
+      const verticalPosition = t28 === undefined ? "center" : t28;
+      if (mediaHasSize) {
+        const t29 = fit === "cover";
+        let t30;
+        if ($[30] !== height || $[31] !== realHeight || $[32] !== realWidth || $[33] !== t29 || $[34] !== width) {
+          t30 = getSizeWithinBounds(realWidth, realHeight, width, height, {
+            cover: t29
+          });
+          $[30] = height;
+          $[31] = realHeight;
+          $[32] = realWidth;
+          $[33] = t29;
+          $[34] = width;
+          $[35] = t30;
+        } else {
+          t30 = $[35];
+        }
+        const {
+          width: resizedImageWidth,
+          height: resizedImageHeight
+        } = t30;
+        imageWidth = resizedImageWidth;
+        imageHeight = resizedImageHeight;
+        if (horizontalPosition === "center") {
+          imageLeft = -(resizedImageWidth - width) / 2;
+        } else {
+          if (horizontalPosition === "right") {
+            imageLeft = -(resizedImageWidth - width);
+          }
+        }
+        if (verticalPosition === "center") {
+          imageTop = -(resizedImageHeight - height) / 2;
+        } else {
+          if (verticalPosition === "bottom") {
+            imageTop = -(resizedImageHeight - height);
+          }
+        }
+      } else {
+        imageObjectFit = fit;
+        imageObjectPosition = `${horizontalPosition} ${verticalPosition}`;
+      }
+      let t29;
+      if ($[36] !== height || $[37] !== width) {
+        t29 = {
+          width,
+          height
+        };
+        $[36] = height;
+        $[37] = width;
+        $[38] = t29;
+      } else {
+        t29 = $[38];
+      }
+      finalContainerStyle = t29;
+      finalImageStyle = {
+        position: "absolute",
+        width: imageWidth,
+        height: imageHeight,
+        top: imageTop,
+        left: imageLeft,
+        objectFit: imageObjectFit,
+        objectPosition: imageObjectPosition
+      };
+    } else {
+      const validWidth = width !== null && typeof width === "number";
+      const validHeight = height !== null && typeof height === "number";
+      const ratioWidth = mediaRatio && validHeight ? height * mediaRatio : null;
+      const ratioHeight = mediaRatio && validWidth ? width / mediaRatio : null;
+      let finalWidth = width !== null ? width : ratioWidth;
+      let finalHeight = height !== null ? height : ratioHeight;
+      if (finalWidth === null && finalHeight === null) {
+        finalWidth = realWidth > 0 ? mediaWidth : null;
+        finalHeight = realHeight > 0 ? mediaHeight : null;
+      }
+      let t26;
+      if ($[39] !== finalHeight || $[40] !== finalWidth) {
+        t26 = {
+          width: finalWidth,
+          height: finalHeight
+        };
+        $[39] = finalHeight;
+        $[40] = finalWidth;
+        $[41] = t26;
+      } else {
+        t26 = $[41];
+      }
+      finalContainerStyle = t26;
+      finalImageStyle = {
+        width: "100%",
+        height: validHeight ? "100%" : "auto"
+      };
     }
-    finalContainerStyle = {
-      width: _finalWidth,
-      height: _finalHeight
-    };
+    let t26;
+    if ($[42] !== containerStyle || $[43] !== finalContainerStyle) {
+      t26 = {
+        ...finalContainerStyle,
+        ...containerStyle
+      };
+      $[42] = containerStyle;
+      $[43] = finalContainerStyle;
+      $[44] = t26;
+    } else {
+      t26 = $[44];
+    }
+    finalContainerStyle = t26;
     finalImageStyle = {
-      width: '100%',
-      height: validHeight ? '100%' : 'auto'
+      ...finalImageStyle,
+      ...imageStyle
     };
+    const {
+      width: t27,
+      height: t28
+    } = finalImageStyle;
+    const finalWidth_0 = t27 === undefined ? null : t27;
+    const finalHeight_0 = t28 === undefined ? null : t28;
+    t25 = getOptimalImageUrl(media, finalWidth_0, finalHeight_0 || finalWidth_0, {
+      resolution: imageResolution,
+      supportsWebp
+    });
+    $[11] = containerStyle;
+    $[12] = finalContainerStyle;
+    $[13] = height;
+    $[14] = imageResolution;
+    $[15] = imageStyle;
+    $[16] = media;
+    $[17] = mediaHasSize;
+    $[18] = mediaHeight;
+    $[19] = mediaRatio;
+    $[20] = mediaWidth;
+    $[21] = objectFit;
+    $[22] = realHeight;
+    $[23] = realWidth;
+    $[24] = supportsWebp;
+    $[25] = width;
+    $[26] = withFit;
+    $[27] = finalImageStyle;
+    $[28] = t25;
+    $[29] = finalContainerStyle;
+  } else {
+    finalImageStyle = $[27];
+    t25 = $[28];
+    finalContainerStyle = $[29];
+  }
+  const finalUrl = t25;
+  let t26;
+  if ($[45] !== className) {
+    t26 = classNames([styles.container, className]);
+    $[45] = className;
+    $[46] = t26;
+  } else {
+    t26 = $[46];
   }
-  finalContainerStyle = _objectSpread(_objectSpread({}, finalContainerStyle), containerStyle);
-  finalImageStyle = _objectSpread(_objectSpread({}, finalImageStyle), imageStyle);
-  var _finalImageStyle = finalImageStyle,
-    _finalImageStyle$widt = _finalImageStyle.width,
-    finalWidth = _finalImageStyle$widt === void 0 ? null : _finalImageStyle$widt,
-    _finalImageStyle$heig = _finalImageStyle.height,
-    finalHeight = _finalImageStyle$heig === void 0 ? null : _finalImageStyle$heig;
-  var finalUrl = getOptimalImageUrl(media, finalWidth, finalHeight || finalWidth, {
-    resolution: imageResolution,
-    supportsWebp: supportsWebp
-  });
-  return /*#__PURE__*/jsx("div", {
-    className: classNames([styles.container, className]),
-    style: finalContainerStyle,
-    ref: containerRef,
-    children: finalUrl !== null && finalShouldLoad ? /*#__PURE__*/jsx("img", {
+  let t27;
+  if ($[47] !== alt || $[48] !== description || $[49] !== finalImageStyle || $[50] !== finalShouldLoad || $[51] !== finalUrl || $[52] !== imageClassName || $[53] !== loadingMode || $[54] !== onImageLoaded) {
+    t27 = finalUrl !== null && finalShouldLoad ? /*#__PURE__*/jsx("img", {
       src: finalUrl,
       alt: alt || description,
       className: classNames([styles.img, imageClassName]),
       style: finalImageStyle,
       onLoad: onImageLoaded,
       loading: loadingMode
-    }) : null
-  });
+    }) : null;
+    $[47] = alt;
+    $[48] = description;
+    $[49] = finalImageStyle;
+    $[50] = finalShouldLoad;
+    $[51] = finalUrl;
+    $[52] = imageClassName;
+    $[53] = loadingMode;
+    $[54] = onImageLoaded;
+    $[55] = t27;
+  } else {
+    t27 = $[55];
+  }
+  let t28;
+  if ($[56] !== finalContainerStyle || $[57] !== ref || $[58] !== t26 || $[59] !== t27) {
+    t28 = /*#__PURE__*/jsx("div", {
+      className: t26,
+      style: finalContainerStyle,
+      ref: ref,
+      children: t27
+    });
+    $[56] = finalContainerStyle;
+    $[57] = ref;
+    $[58] = t26;
+    $[59] = t27;
+    $[60] = t28;
+  } else {
+    t28 = $[60];
+  }
+  return t28;
 }
-var Image_default = (function (_ref5) {
-  var ref = _ref5.ref,
-    props = _objectWithoutProperties(_ref5, _excluded);
-  return /*#__PURE__*/jsx(Image, _objectSpread({
-    containerRef: ref
-  }, props));
-});
 
-export { Image_default as default };
+export { Image as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-image",
-    "version": "0.4.71",
+    "version": "0.4.77",
     "private": false,
     "description": "",
     "keywords": [
@@ -32,9 +32,11 @@
     "license": "ISC",
     "type": "module",
     "module": "es/index.js",
+    "style": "./assets/css/styles.css",
     "exports": {
         ".": {
             "types": "./es/index.d.ts",
+            "style": "./assets/css/styles.css",
             "import": "./es/index.js"
         },
         "./assets/css/styles": "./assets/css/styles.css",
@@ -51,17 +53,17 @@
         "build": "../../scripts/prepare-package.sh --types"
     },
     "devDependencies": {
-        "react": "^18.3.0 || ^19.0.0",
-        "react-dom": "^18.3.0 || ^19.0.0"
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
     },
     "peerDependencies": {
-        "react": "^18.3.0 || ^19.0.0",
-        "react-dom": "^18.3.0 || ^19.0.0"
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
     },
     "dependencies": {
         "@babel/runtime": "^7.28.6",
         "@folklore/size": "^0.1.20",
-        "@micromag/core": "^0.4.71",
+        "@micromag/core": "^0.4.77",
         "classnames": "^2.2.6",
         "react-intl": "^8.1.3 || ^10.0.0",
         "uuid": "^9.0.0"
@@ -70,6 +72,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "9101554bc5761e32b4a002a10d26800608c69773",
+    "gitHead": "b55c2c748383d30c8ff0ca7594e499dbdc8d1c10",
     "types": "es/index.d.ts"
 }