@plasmicapp/react-web 0.2.82 → 0.2.89

package/dist/react-web.esm.js

@@ -800,77 +800,161 @@ function PlasmicIcon(props) {
 var IMG_SIZES = [16, 32, 48, 64, 96, 128, 256, 384];
 var DEVICE_SIZES = [640, 750, 828, 1080, 1200, 1920, 2048, 3840];
 var ALL_SIZES = /*#__PURE__*/[].concat(IMG_SIZES, DEVICE_SIZES);
-var PlasmicImg = /*#__PURE__*/React__default.forwardRef(function PlasmicImg(props, ref) {
+var PlasmicImg = /*#__PURE__*/React__default.forwardRef(function PlasmicImg(props, outerRef) {
   var src = props.src,
       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,
+      imgRef = props.imgRef,
       style = props.style,
-      rest = _objectWithoutPropertiesLoose(props, ["src", "className", "displayWidth", "displayHeight", "quality", "loader", "containerRef", "style"]);
+      loading = props.loading,
+      rest = _objectWithoutPropertiesLoose(props, ["src", "className", "displayWidth", "displayHeight", "displayMinWidth", "displayMinHeight", "displayMaxWidth", "displayMaxHeight", "quality", "loader", "imgRef", "style", "loading"]);
+
+  var imgProps = Object.assign({}, rest, {
+    // Default loading to "lazy" if not specified (which is different from the
+    // html img, which defaults to eager!)
+    loading: loading != null ? loading : "lazy"
+  });
 
   var _ref = typeof src === "string" || !src ? {
     fullWidth: undefined,
-    fullHeight: undefined
+    fullHeight: undefined,
+    aspectRatio: undefined
   } : src,
       fullWidth = _ref.fullWidth,
-      fullHeight = _ref.fullHeight;
+      fullHeight = _ref.fullHeight,
+      aspectRatio = _ref.aspectRatio;
 
   var srcStr = src ? 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)
 
-  if (fullHeight == null || fullWidth == null || srcStr.endsWith(".svg")) {
+  if (fullHeight == null || fullWidth == null) {
     return React__default.createElement("img", Object.assign({
       src: srcStr,
       className: className,
       style: style
-    }, rest, {
-      ref: ref
+    }, imgProps, {
+      loading: loading,
+      ref: mergeRefs(imgRef, outerRef)
     }));
   }
 
+  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;
+    if (!isSvg(srcStr)) {
+      // We shouldn't do it for SVGs though, because `fullWidth` and
+      // `fullHeight` might have rounded values so the final
+      // `displayWidth` could differ by 1px or so.
+      displayWidth = getPixelLength(displayHeight) * fullWidth / fullHeight;
+    }
+  }
+
+  var spacerWidth = fullWidth;
+  var spacerHeight = fullHeight;
+
+  if (aspectRatio && isFinite(aspectRatio) && isSvg(srcStr)) {
+    // For SVGs, fullWidth and fullHeight can be rounded values, which would
+    // cause some discrepancy between the actual aspect ratio and the aspect
+    // ratio from those values. So, for those cases, we set large width / height
+    // values to get a more precise ratio from the spacer.
+    spacerWidth = DEFAULT_SVG_WIDTH;
+    spacerHeight = Math.round(spacerWidth / aspectRatio);
   }
 
-  var _getWidths = getWidths(displayWidth, fullWidth),
+  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 spacerSvg = "<svg width=\"" + spacerWidth + "\" height=\"" + spacerHeight + "\" 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
-    })
+    ref: outerRef,
+    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,
     sizes: sizes,
     src: srcStr,
     quality: quality,
-    ref: ref,
+    ref: imgRef,
     style: style ? pick(style, "objectFit", "objectPosition") : undefined,
-    imgProps: rest,
+    imgProps: imgProps,
     className: "__wab_img"
   }));
 });
@@ -916,7 +1000,7 @@ function makePicture(opts) {
         width: wd.width
       }) + " " + wd.desc;
     }).join(", ") : undefined,
-    sizes: imageLoader ? sizes : undefined,
+    sizes: imageLoader && imageLoader.supportsUrl(src) ? sizes : undefined,
     style: _extends({}, style ? pick(style, "objectFit", "objectPosition") : {}, {
       width: 0,
       height: 0
@@ -924,6 +1008,12 @@ function makePicture(opts) {
   })));
 }
 
+var DEFAULT_SVG_WIDTH = 10000;
+
+function isSvg(src) {
+  return src.endsWith(".svg") || src.startsWith("data:image/svg");
+}
+
 function getClosestPresetSize(width, fullWidth) {
   var _ALL_SIZES$findIndex;
 
@@ -952,17 +1042,19 @@ function getClosestPresetSize(width, fullWidth) {
  */
 
 
-function getWidths(width, fullWidth) {
+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
@@ -1008,16 +1100,6 @@ 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 getPixelLength(length) {
   if (length == null || length == "") {
     return undefined;
@@ -1064,7 +1146,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;
@@ -1416,6 +1498,53 @@ function getPlumeType(child) {
   return childType.__plumeType || (childType.getPlumeType == null ? void 0 : childType.getPlumeType(child.props));
 }
 
+function useButton(plasmicClass, props, config, ref) {
+  var _ref, _ref2, _extends2, _overrides;
+
+  if (ref === void 0) {
+    ref = null;
+  }
+
+  var link = props.link,
+      isDisabled = props.isDisabled,
+      startIcon = props.startIcon,
+      endIcon = props.endIcon,
+      showStartIcon = props.showStartIcon,
+      showEndIcon = props.showEndIcon,
+      children = props.children,
+      rest = _objectWithoutPropertiesLoose(props, ["link", "isDisabled", "startIcon", "endIcon", "showStartIcon", "showEndIcon", "children"]);
+
+  var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
+    def: config.showStartIconVariant,
+    active: showStartIcon
+  }, {
+    def: config.showEndIconVariant,
+    active: showEndIcon
+  }, {
+    def: config.isDisabledVariant,
+    active: isDisabled
+  }));
+
+  var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), config.startIconSlot && (_ref = {}, _ref[config.startIconSlot] = startIcon, _ref), config.endIconSlot && (_ref2 = {}, _ref2[config.endIconSlot] = endIcon, _ref2), (_extends2 = {}, _extends2[config.contentSlot] = children, _extends2));
+
+  var overrides = (_overrides = {}, _overrides[config.root] = {
+    as: !!link ? "a" : "button",
+    props: _extends({
+      ref: ref,
+      disabled: isDisabled
+    }, !!link && {
+      href: link
+    }, rest)
+  }, _overrides);
+  return {
+    plasmicProps: {
+      variants: variants,
+      args: args,
+      overrides: overrides
+    }
+  };
+}
+
 function getStyleProps(props) {
   return pick(props, "className", "style");
 }
@@ -2673,6 +2802,83 @@ function useSwitch(plasmicClass, props, config, ref) {
   };
 }
 
+function useTextInput(plasmicClass, props, config, ref) {
+  var _ref, _ref2, _overrides;
+
+  if (ref === void 0) {
+    ref = null;
+  }
+
+  var isDisabled = props.isDisabled,
+      startIcon = props.startIcon,
+      endIcon = props.endIcon,
+      showStartIcon = props.showStartIcon,
+      showEndIcon = props.showEndIcon,
+      className = props.className,
+      style = props.style,
+      inputClassName = props.inputClassName,
+      inputStyle = props.inputStyle,
+      rest = _objectWithoutPropertiesLoose(props, ["isDisabled", "startIcon", "endIcon", "showStartIcon", "showEndIcon", "className", "style", "inputClassName", "inputStyle"]);
+
+  var rootRef = useRef(null);
+  var inputRef = useRef(null);
+  useImperativeHandle(ref, function () {
+    return {
+      focus: function focus() {
+        var _inputRef$current;
+
+        (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.focus();
+      },
+      blur: function blur() {
+        var _inputRef$current2;
+
+        (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.blur();
+      },
+      getRoot: function getRoot() {
+        return rootRef.current;
+      },
+      getInput: function getInput() {
+        return inputRef.current;
+      }
+    };
+  }, [rootRef, inputRef]);
+
+  var variants = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalVariantProps)), mergeVariantToggles({
+    def: config.showStartIconVariant,
+    active: showStartIcon
+  }, {
+    def: config.showEndIconVariant,
+    active: showEndIcon
+  }, {
+    def: config.isDisabledVariant,
+    active: isDisabled
+  }));
+
+  var args = _extends({}, pick.apply(void 0, [props].concat(plasmicClass.internalArgProps)), config.startIconSlot && (_ref = {}, _ref[config.startIconSlot] = startIcon, _ref), config.endIconSlot && (_ref2 = {}, _ref2[config.endIconSlot] = endIcon, _ref2));
+
+  var overrides = (_overrides = {}, _overrides[config.root] = {
+    props: {
+      ref: rootRef,
+      className: className,
+      style: style
+    }
+  }, _overrides[config.input] = {
+    props: _extends({
+      disabled: isDisabled,
+      ref: inputRef,
+      className: inputClassName,
+      style: inputStyle
+    }, rest)
+  }, _overrides);
+  return {
+    plasmicProps: {
+      variants: variants,
+      args: args,
+      overrides: overrides
+    }
+  };
+}
+
 function useTriggeredOverlay(plasmicClass, props, config, outerRef) {
   var _extends2, _overrides;
 
@@ -2772,9 +2978,7 @@ function useTriggeredOverlay(plasmicClass, props, config, outerRef) {
     restoreFocus: true
   }, createElement(DismissButton, {
     onDismiss: state.close
-  }), children, createElement(DismissButton, {
-    onDismiss: state.close
-  })), _extends2));
+  }), children), _extends2));
 
   var overrides = (_overrides = {}, _overrides[config.root] = {
     props: mergeProps(overlayProps, getStyleProps(props), {
@@ -2799,5 +3003,5 @@ function useTriggeredOverlay(plasmicClass, props, config, outerRef) {
   };
 }
 
-export { DropdownMenu, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicRootProvider, PlasmicSlot, Stack, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, getDataProps, hasVariant, makeFragment, omit, pick, renderPlasmicSlot, setPlumeStrictMode, useCheckbox, useIsSSR, useMenu, useMenuButton, useMenuGroup, useMenuItem, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTrigger, useTriggeredOverlay, wrapWithClassName };
+export { DropdownMenu, PlasmicIcon, PlasmicImg, PlasmicLink, PlasmicRootProvider, PlasmicSlot, Stack, classNames, createPlasmicElementProxy, createUseScreenVariants, deriveRenderOpts, ensureGlobalVariants, getDataProps, hasVariant, makeFragment, omit, pick, renderPlasmicSlot, setPlumeStrictMode, useButton, useCheckbox, useIsSSR, useMenu, useMenuButton, useMenuGroup, useMenuItem, useSelect, useSelectOption, useSelectOptionGroup, useSwitch, useTextInput, useTrigger, useTriggeredOverlay, wrapWithClassName };
 //# sourceMappingURL=react-web.esm.js.map