@plasmicapp/react-web 0.2.79 → 0.2.83

package/dist/react-web.esm.js

@@ -805,23 +805,26 @@ var PlasmicImg = /*#__PURE__*/React__default.forwardRef(function PlasmicImg(prop
       className = props.className,
       displayWidth = props.displayWidth,
       displayHeight = props.displayHeight,
+      displayMinWidth = props.displayMinWidth,
+      displayMinHeight = props.displayMinHeight,
+      displayMaxWidth = props.displayMaxWidth,
+      displayMaxHeight = props.displayMaxHeight,
       quality = props.quality,
       loader = props.loader,
       containerRef = props.containerRef,
       style = props.style,
-      rest = _objectWithoutPropertiesLoose(props, ["src", "className", "displayWidth", "displayHeight", "quality", "loader", "containerRef", "style"]);
+      rest = _objectWithoutPropertiesLoose(props, ["src", "className", "displayWidth", "displayHeight", "displayMinWidth", "displayMinHeight", "displayMaxWidth", "displayMaxHeight", "quality", "loader", "containerRef", "style"]);
 
-  var _ref = typeof src === "string" ? {
+  var _ref = typeof src === "string" || !src ? {
     fullWidth: undefined,
     fullHeight: undefined
   } : src,
       fullWidth = _ref.fullWidth,
       fullHeight = _ref.fullHeight;
 
-  var srcStr = typeof src === "string" ? src : src.src; // Assume external image if either dimension is null and use usual <img>
-  // (or if the image is an SVG)
+  var srcStr = src ? typeof src === "string" ? src : src.src : ""; // Assume external image if either dimension is null and use usual <img>
 
-  if (fullHeight == null || fullWidth == null || srcStr.endsWith(".svg")) {
+  if (fullHeight == null || fullWidth == null) {
     return React__default.createElement("img", Object.assign({
       src: srcStr,
       className: className,
@@ -831,29 +834,91 @@ var PlasmicImg = /*#__PURE__*/React__default.forwardRef(function PlasmicImg(prop
     }));
   }
 
-  var _getWidths = getWidths(displayWidth, fullWidth),
+  if (isSvg(srcStr) && (displayHeight == null || displayHeight === "auto") && (displayWidth == null || displayWidth === "auto")) {
+    displayWidth = "100%";
+  }
+
+  if (fullWidth && fullHeight && (!displayWidth || displayWidth === "auto") && !!getPixelLength(displayHeight)) {
+    // If there's a pixel length specified for displayHeight but not displayWidth,
+    // then we can derive the pixel length for displayWidth.  Having an explicit
+    // displayWidth makes this a fixed-size image, which makes it possible for us to
+    // generate better markup!
+    displayWidth = getPixelLength(displayHeight) * fullWidth / fullHeight;
+  }
+
+  var _getWidths = getWidths(displayWidth, fullWidth, {
+    minWidth: displayMinWidth
+  }),
       sizes = _getWidths.sizes,
       widthDescs = _getWidths.widthDescs;
 
   var imageLoader = getImageLoader(loader);
   var spacerSvg = "<svg width=\"" + fullWidth + "\" height=\"" + fullHeight + "\" xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\"/>";
   var spacerSvgBase64 = typeof window === "undefined" ? Buffer.from(spacerSvg).toString("base64") : window.btoa(spacerSvg);
+
+  var wrapperStyle = _extends({}, style || {});
+
+  var spacerStyle = pick(style || {}, "objectFit", "objectPosition");
+
+  if (displayWidth != null && displayWidth !== "auto") {
+    // If width is set, set it on the wrapper along with min/max width
+    // and just use `width: 100%` on the spacer
+    spacerStyle.width = "100%";
+    wrapperStyle.width = displayWidth;
+    wrapperStyle.minWidth = displayMinWidth;
+    wrapperStyle.maxWidth = displayMaxWidth;
+  } else {
+    // Otherwise, we want auto sizing from the spacer, so set width there.
+    //
+    // But if we have min/max width, it should be set in the wrapper and it
+    // can be percentage values (and we add corresponding min/max width to
+    // 100% in the spacer). In general it ends up with the correct effect,
+    // but some edge cases might make `min-width: 100%` shrink the image more
+    // than it should.
+    spacerStyle.width = displayWidth;
+    wrapperStyle.width = "auto";
+
+    if (displayMinWidth) {
+      spacerStyle.minWidth = "100%";
+      wrapperStyle.minWidth = displayMinWidth;
+    }
+
+    if (displayMaxWidth != null && displayMaxWidth !== "none") {
+      spacerStyle.maxWidth = "100%";
+      wrapperStyle.maxWidth = displayMaxWidth;
+    }
+  }
+
+  if (displayHeight != null && displayHeight !== "auto") {
+    spacerStyle.height = "100%";
+    wrapperStyle.height = displayHeight;
+    wrapperStyle.minHeight = displayMinHeight;
+    wrapperStyle.maxHeight = displayMaxHeight;
+  } else {
+    spacerStyle.height = displayHeight;
+    wrapperStyle.height = "auto";
+
+    if (displayMinHeight) {
+      spacerStyle.minHeight = "100%";
+      wrapperStyle.minHeight = displayMinHeight;
+    }
+
+    if (displayMaxHeight != null && displayMaxHeight !== "none") {
+      spacerStyle.maxHeight = "100%";
+      wrapperStyle.maxHeight = displayMaxHeight;
+    }
+  }
+
   return React__default.createElement("div", {
     className: classNames$1(className, "__wab_img-wrapper"),
     ref: containerRef,
-    style: _extends({}, style, {
-      width: isPercentage(displayWidth) ? displayWidth : undefined,
-      height: isPercentage(displayHeight) ? displayHeight : undefined
-    })
+    style: wrapperStyle
   }, React__default.createElement("img", {
     alt: "",
     "aria-hidden": true,
     className: "__wab_img-spacer-svg",
     src: "data:image/svg+xml;base64," + spacerSvgBase64,
-    style: _extends({
-      width: isPercentage(displayWidth) ? "100%" : displayWidth,
-      height: isPercentage(displayHeight) ? "100%" : displayHeight
-    }, style ? pick(style, "objectFit", "objectPosition") : {})
+    style: spacerStyle
   }), makePicture({
     imageLoader: imageLoader,
     widthDescs: widthDescs,
@@ -908,11 +973,18 @@ function makePicture(opts) {
         width: wd.width
       }) + " " + wd.desc;
     }).join(", ") : undefined,
-    sizes: imageLoader ? sizes : undefined,
-    style: style ? pick(style, "objectFit", "objectPosition") : undefined
+    sizes: imageLoader && imageLoader.supportsUrl(src) ? sizes : undefined,
+    style: _extends({}, style ? pick(style, "objectFit", "objectPosition") : {}, {
+      width: 0,
+      height: 0
+    })
   })));
 }
 
+function isSvg(src) {
+  return src.endsWith(".svg") || src.startsWith("data:image/svg");
+}
+
 function getClosestPresetSize(width, fullWidth) {
   var _ALL_SIZES$findIndex;
 
@@ -941,17 +1013,19 @@ function getClosestPresetSize(width, fullWidth) {
  */
 
 
-function getWidths(width, fullWidth) {
-  var pixelWidth = getPixelWidth(width);
+function getWidths(width, fullWidth, extra) {
+  var minWidth = extra == null ? void 0 : extra.minWidth;
+  var pixelWidth = getPixelLength(width);
+  var pixelMinWidth = getPixelLength(minWidth);
 
-  if (pixelWidth != null) {
+  if (pixelWidth != null && (!minWidth || pixelMinWidth != null)) {
     // If there's an exact width, then we just need to display it at 1x and 2x density
     return {
       widthDescs: [{
-        width: getClosestPresetSize(pixelWidth, fullWidth),
+        width: getClosestPresetSize(Math.max(pixelWidth, pixelMinWidth != null ? pixelMinWidth : 0), fullWidth),
         desc: "1x"
       }, {
-        width: getClosestPresetSize(pixelWidth * 2, fullWidth),
+        width: getClosestPresetSize(Math.max(pixelWidth, pixelMinWidth != null ? pixelMinWidth : 0) * 2, fullWidth),
         desc: "2x"
       }],
       sizes: undefined
@@ -977,15 +1051,19 @@ function getWidths(width, fullWidth) {
   }
 
   return {
-    widthDescs: usefulSizes.map(function (size, i) {
+    widthDescs: usefulSizes.map(function (size) {
       return {
-        width: // If this is the last (buggest) useful width, but it is
+        width: getClosestPresetSize(size, fullWidth),
+        // If this is the last (buggest) useful width, but it is
         // still within the bounds set by DEVICE_SIZES, then just
         // use the original, unresized image.  This means if we match
         // the largest size, we use unresized and best quality image.
         // We only do this, though, if fullWidth is "reasonable" --
         // smaller than the largest size we would consider.
-        i === usefulSizes.length - 1 && fullWidth < DEVICE_SIZES[DEVICE_SIZES.length - 1] ? undefined : size,
+        // i === usefulSizes.length - 1 &&
+        // fullWidth < DEVICE_SIZES[DEVICE_SIZES.length - 1]
+        //   ? undefined
+        //   : size,
         desc: size + "w"
       };
     }),
@@ -993,26 +1071,16 @@ function getWidths(width, fullWidth) {
   };
 }
 
-function isPercentage(width) {
-  var _parseNumeric;
-
-  if (typeof width !== "string") {
-    return false;
-  }
-
-  return ((_parseNumeric = parseNumeric(width)) == null ? void 0 : _parseNumeric.units) === "%";
-}
-
-function getPixelWidth(width) {
-  if (width == null || width == "") {
+function getPixelLength(length) {
+  if (length == null || length == "") {
     return undefined;
   }
 
-  if (typeof width === "number") {
-    return width;
+  if (typeof length === "number") {
+    return length;
   }
 
-  var parsed = parseNumeric(width);
+  var parsed = parseNumeric(length);
 
   if (parsed && (!parsed.units || parsed.units === "px")) {
     return parsed.num;
@@ -1049,7 +1117,7 @@ function getImageLoader(loader) {
 
 var PLASMIC_IMAGE_LOADER = {
   supportsUrl: function supportsUrl(src) {
-    return src.startsWith("https://img.plasmic.app");
+    return src.startsWith("https://img.plasmic.app") && !isSvg(src);
   },
   transformUrl: function transformUrl(opts) {
     var _opts$quality;