@wix/editor-react-components 1.2787.0 → 1.2789.0

package/dist/site/components/chunks/fastdom.js

@@ -0,0 +1,166 @@
+import { g as getDefaultExportFromCjs } from "./_commonjsHelpers.js";
+var fastdom$2 = { exports: {} };
+var fastdom$1 = fastdom$2.exports;
+var hasRequiredFastdom;
+function requireFastdom() {
+  if (hasRequiredFastdom) return fastdom$2.exports;
+  hasRequiredFastdom = 1;
+  (function(module) {
+    !(function(win) {
+      var debug = function() {
+      };
+      var raf = win.requestAnimationFrame || win.webkitRequestAnimationFrame || win.mozRequestAnimationFrame || win.msRequestAnimationFrame || function(cb) {
+        return setTimeout(cb, 16);
+      };
+      function FastDom() {
+        var self = this;
+        self.reads = [];
+        self.writes = [];
+        self.raf = raf.bind(win);
+      }
+      FastDom.prototype = {
+        constructor: FastDom,
+        /**
+         * We run this inside a try catch
+         * so that if any jobs error, we
+         * are able to recover and continue
+         * to flush the batch until it's empty.
+         *
+         * @param {Array} tasks
+         */
+        runTasks: function(tasks) {
+          var task;
+          while (task = tasks.shift()) task();
+        },
+        /**
+         * Adds a job to the read batch and
+         * schedules a new frame if need be.
+         *
+         * @param  {Function} fn
+         * @param  {Object} ctx the context to be bound to `fn` (optional).
+         * @public
+         */
+        measure: function(fn, ctx) {
+          var task = !ctx ? fn : fn.bind(ctx);
+          this.reads.push(task);
+          scheduleFlush(this);
+          return task;
+        },
+        /**
+         * Adds a job to the
+         * write batch and schedules
+         * a new frame if need be.
+         *
+         * @param  {Function} fn
+         * @param  {Object} ctx the context to be bound to `fn` (optional).
+         * @public
+         */
+        mutate: function(fn, ctx) {
+          var task = !ctx ? fn : fn.bind(ctx);
+          this.writes.push(task);
+          scheduleFlush(this);
+          return task;
+        },
+        /**
+         * Clears a scheduled 'read' or 'write' task.
+         *
+         * @param {Object} task
+         * @return {Boolean} success
+         * @public
+         */
+        clear: function(task) {
+          return remove(this.reads, task) || remove(this.writes, task);
+        },
+        /**
+         * Extend this FastDom with some
+         * custom functionality.
+         *
+         * Because fastdom must *always* be a
+         * singleton, we're actually extending
+         * the fastdom instance. This means tasks
+         * scheduled by an extension still enter
+         * fastdom's global task queue.
+         *
+         * The 'super' instance can be accessed
+         * from `this.fastdom`.
+         *
+         * @example
+         *
+         * var myFastdom = fastdom.extend({
+         *   initialize: function() {
+         *     // runs on creation
+         *   },
+         *
+         *   // override a method
+         *   measure: function(fn) {
+         *     // do extra stuff ...
+         *
+         *     // then call the original
+         *     return this.fastdom.measure(fn);
+         *   },
+         *
+         *   ...
+         * });
+         *
+         * @param  {Object} props  properties to mixin
+         * @return {FastDom}
+         */
+        extend: function(props) {
+          if (typeof props != "object") throw new Error("expected object");
+          var child = Object.create(this);
+          mixin(child, props);
+          child.fastdom = this;
+          if (child.initialize) child.initialize();
+          return child;
+        },
+        // override this with a function
+        // to prevent Errors in console
+        // when tasks throw
+        catch: null
+      };
+      function scheduleFlush(fastdom2) {
+        if (!fastdom2.scheduled) {
+          fastdom2.scheduled = true;
+          fastdom2.raf(flush.bind(null, fastdom2));
+        }
+      }
+      function flush(fastdom2) {
+        var writes = fastdom2.writes;
+        var reads = fastdom2.reads;
+        var error;
+        try {
+          debug("flushing reads", reads.length);
+          fastdom2.runTasks(reads);
+          debug("flushing writes", writes.length);
+          fastdom2.runTasks(writes);
+        } catch (e) {
+          error = e;
+        }
+        fastdom2.scheduled = false;
+        if (reads.length || writes.length) scheduleFlush(fastdom2);
+        if (error) {
+          debug("task errored", error.message);
+          if (fastdom2.catch) fastdom2.catch(error);
+          else throw error;
+        }
+      }
+      function remove(array, item) {
+        var index = array.indexOf(item);
+        return !!~index && !!array.splice(index, 1);
+      }
+      function mixin(target, source) {
+        for (var key in source) {
+          if (source.hasOwnProperty(key)) target[key] = source[key];
+        }
+      }
+      var exports$1 = win.fastdom = win.fastdom || new FastDom();
+      module.exports = exports$1;
+    })(typeof window !== "undefined" ? window : typeof fastdom$1 != "undefined" ? fastdom$1 : globalThis);
+  })(fastdom$2);
+  return fastdom$2.exports;
+}
+var fastdomExports = requireFastdom();
+const fastdom = /* @__PURE__ */ getDefaultExportFromCjs(fastdomExports);
+export {
+  fastdom as f
+};

package/dist/site/components/chunks/index6.js

@@ -190,28 +190,18 @@ function isImageTypeSupported(uri) {
 function isValidRequest(fittingType, src, target) {
   return target && src && !isUrlEmptyOrNone(src.id) && Object.values(fittingTypes).includes(fittingType);
 }
-function canTransformAnimatedWebpOrAvif(uri, hasAnimation, allowAnimatedTransform) {
-  const isAvifWebpFormat = isWEBP(uri) || isAVIF(uri);
-  if (!isAvifWebpFormat || !hasAnimation) {
-    return true;
-  }
-  return allowAnimatedTransform;
-}
-function canTransformGIF(uri, allowAnimatedTransform, allowFullGIFTransformation) {
+function canTransformGIF(uri, allowFullGIFTransformation, isPlaceholderFlow) {
   if (!isGIF(uri)) {
     return false;
   }
-  return !!(allowAnimatedTransform || allowFullGIFTransformation);
+  return !!(allowFullGIFTransformation || isPlaceholderFlow);
 }
-function isImageTransformApplicable(uri, hasAnimation, allowAnimatedTransform, allowFullGIFTransformation) {
+function isImageTransformApplicable(uri, allowFullGIFTransformation, isPlaceholderFlow) {
   if (isExternalUrl(uri)) {
     return false;
   }
-  if (!canTransformAnimatedWebpOrAvif(uri, hasAnimation, allowAnimatedTransform)) {
-    return false;
-  }
   const isSupportedImageType = isImageTypeSupported(uri);
-  const isTransformableGif = canTransformGIF(uri, allowAnimatedTransform, allowFullGIFTransformation);
+  const isTransformableGif = canTransformGIF(uri, allowFullGIFTransformation, isPlaceholderFlow);
   return isSupportedImageType || isTransformableGif;
 }
 function isJPG(uri) {
@@ -1047,7 +1037,7 @@ function getTransform(fittingType, src, target, options) {
   const devicePixelRatio = _isSEOBot ? 1 : getDevicePixelRatio(target);
   const fileExtension = getFileExtension(src.id);
   const preferredExtension = fileExtension;
-  const canTransformImage = isImageTransformApplicable(src.id, options == null ? void 0 : options.hasAnimation, options == null ? void 0 : options.allowAnimatedTransform, options == null ? void 0 : options.allowFullGIFTransformation);
+  const canTransformImage = isImageTransformApplicable(src.id, options == null ? void 0 : options.allowFullGIFTransformation, options == null ? void 0 : options.isPlaceholderFlow);
   const transformsObj = {
     fileName,
     fileExtension,
@@ -1126,6 +1116,9 @@ const animatedTransformTemplate = template`,pstr`;
 const animatedGIFTransformTemplate = template`,anm_all`;
 function getImageURI(transformsObj) {
   var _a;
+  if (transformsObj.parts.some(({ width, height }) => !Number.isFinite(width) || width <= 0 || !Number.isFinite(height) || height <= 0)) {
+    return transformsObj.src.id;
+  }
   const transformsObjStrArr = [];
   transformsObj.parts.forEach((transformPart) => {
     switch (transformPart.transformType) {
@@ -1205,15 +1198,8 @@ function getImageURI(transformsObj) {
   return `${transformsObj.src.id}/${API_VERSION}/${transformsStr}/${transformsObj.fileName}.${transformsObj.preferredExtension}`;
 }
 function getURI(fittingType, src, target, options = {}, transformObj) {
-  if (isImageTransformApplicable(src.id, options == null ? void 0 : options.hasAnimation, options == null ? void 0 : options.allowAnimatedTransform, options == null ? void 0 : options.allowFullGIFTransformation)) {
-    if ((isWEBP(src.id) || isAVIF(src.id)) && !options.allowWebpAvifTransforms) {
-      const { alignment, ...transformTarget } = target;
-      src.focalPoint = { x: void 0, y: void 0 };
-      src == null ? true : delete src.crop;
-      transformObj = getTransform(fittingType, src, transformTarget, options);
-    } else {
-      transformObj = transformObj || getTransform(fittingType, src, target, options);
-    }
+  if (isImageTransformApplicable(src.id, options == null ? void 0 : options.allowFullGIFTransformation, options == null ? void 0 : options.isPlaceholderFlow)) {
+    transformObj = transformObj || getTransform(fittingType, src, target, options);
     return getImageURI(transformObj);
   }
   return src.id;
@@ -1371,13 +1357,12 @@ function convertFillFocalToPosition(src, target, focalPoint) {
 }
 const PLACEHOLDER_IMG_CSS_OVERRIDES = { width: "100%", height: "100%" };
 function getPlaceholder(fittingType, src, target, options = {}) {
-  const { autoEncode = true, isSEOBot: isSEOBot2, shouldLoadHQImage, hasAnimation, allowAnimatedTransform, encoding } = options;
+  const { autoEncode = true, isSEOBot: isSEOBot2, shouldLoadHQImage, hasAnimation, allowFullGIFTransformation, encoding } = options;
   if (!isValidRequest(fittingType, src, target)) {
     return emptyData;
   }
   const IS_IN_PLACEHOLDER_FLOW = true;
-  const shouldAllowAnimatedTransformInPlaceholder = allowAnimatedTransform ?? IS_IN_PLACEHOLDER_FLOW;
-  const canTransformImage = isImageTransformApplicable(src.id, hasAnimation, shouldAllowAnimatedTransformInPlaceholder);
+  const canTransformImage = isImageTransformApplicable(src.id, allowFullGIFTransformation, IS_IN_PLACEHOLDER_FLOW);
   if (!canTransformImage || shouldLoadHQImage) {
     return getData(fittingType, src, target, {
       ...options,
@@ -1403,7 +1388,6 @@ function getPlaceholder(fittingType, src, target, options = {}) {
     autoEncode,
     filters: blur ? { blur } : {},
     hasAnimation,
-    allowAnimatedTransform: shouldAllowAnimatedTransformInPlaceholder,
     encoding,
     isPlaceholderFlow: IS_IN_PLACEHOLDER_FLOW
   });
@@ -1460,10 +1444,10 @@ export {
   MEDIA_ROOT_URL as M,
   STATIC_MEDIA_URL as S,
   getData as a,
-  getFileExtension as b,
-  alignTypes as c,
-  fittingTypes as d,
-  fileType as f,
+  alignTypes as b,
+  getFileExtension as c,
+  fileType as d,
+  fittingTypes as f,
   getPlaceholder as g,
   imageKit as i
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2787.0",
+  "version": "1.2789.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -80,7 +80,7 @@
     "test:a11y": "a11y-audit-tool-plugin audit"
   },
   "peerDependencies": {
-    "@wix/astro": "^2.75.3",
+    "@wix/astro": "^2.75.4",
     "@wix/editor-react-types": "^1.0.107",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
@@ -114,7 +114,7 @@
     "@vitejs/plugin-react": "^4.3.4",
     "@wix/a11y-audit-tool-plugin": "^0.397.0",
     "@wix/ambassador-devcenter-v1-component-type-data": "^1.0.592",
-    "@wix/astro": "^2.75.3",
+    "@wix/astro": "^2.75.4",
     "@wix/business-tools": "^1.0.233",
     "@wix/cli": "^1.1.264",
     "@wix/cli-app": "^1.1.263",
@@ -127,8 +127,8 @@
     "@wix/editor-elements-test-utils": "^1.0.0",
     "@wix/essentials": "^0.1.28",
     "@wix/fed-cli-sled": "^1.0.39",
-    "@wix/image": "^1.452.0",
-    "@wix/image-kit": "^1.118.0",
+    "@wix/image": "^1.456.0",
+    "@wix/image-kit": "^1.127.0",
     "@wix/janet-build": "^1.0.10",
     "@wix/mappers-legacy-service": "^1.0.85",
     "@wix/media": "^1.0.278",
@@ -222,5 +222,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "18da64a9f7c486f7ea47ba859ed9e665c07aef0f34e40bc4f266e8d7"
+  "falconPackageHash": "3c9322a0775e296eb0a5409dcf55b782f474434ad18f614a1308ec9d"
 }

package/dist/site/components/chunks/Image.js

@@ -1,160 +0,0 @@
-import * as React from "react";
-import { i as imageKit, g as getPlaceholder } from "./index6.js";
-const image = "image__WopE9";
-const styles = {
-  image
-};
-const { STATIC_MEDIA_URL } = imageKit;
-const fetchLQIP = ({ fittingType, src, target, options }) => {
-  const placeholder = getPlaceholder(fittingType, src, target, {
-    ...options,
-    autoEncode: true
-  });
-  if ((placeholder == null ? void 0 : placeholder.uri) && !/^[a-z]+:/.test(placeholder.uri)) {
-    placeholder.uri = `${STATIC_MEDIA_URL}${placeholder.uri}`;
-  }
-  return placeholder;
-};
-const SCHEME_RE = /^[a-z]+:/;
-const Image = (props) => {
-  var _a, _b;
-  const { id, containerId, uri, alt, name = "", role, width, height, displayMode, devicePixelRatio, quality, alignType, bgEffectName = "", focalPoint, upscaleMethod, className = "", crop, imageStyles = {}, targetWidth, targetHeight, targetScale, onLoad = () => {
-  }, onError = () => {
-  }, shouldUseLQIP, containerWidth, containerHeight, getPlaceholder: getPlaceholder2, isInFirstFold, placeholderTransition, socialAttrs, isSEOBot, skipMeasure, hasAnimation, encoding, isFluidLayout, baseHostURL } = props;
-  const imageRef = React.useRef(null);
-  let hasSsrSrc = "";
-  const hasBlurTransition = placeholderTransition === "blur";
-  const ssrImageData = React.useRef(null);
-  if (!ssrImageData.current) {
-    if (getPlaceholder2 || shouldUseLQIP || isInFirstFold || isSEOBot) {
-      const options = {
-        upscaleMethod,
-        ...quality ? quality : {},
-        shouldLoadHQImage: isInFirstFold,
-        isSEOBot,
-        hasAnimation,
-        encoding,
-        baseHostURL
-      };
-      ssrImageData.current = (getPlaceholder2 || fetchLQIP)({
-        fittingType: displayMode,
-        src: {
-          id: uri,
-          width,
-          height,
-          crop,
-          name,
-          focalPoint
-        },
-        target: {
-          width: containerWidth,
-          height: containerHeight,
-          alignment: alignType,
-          htmlTag: "img"
-        },
-        options
-      });
-      hasSsrSrc = !ssrImageData.current.transformed || isInFirstFold || isSEOBot ? "" : "true";
-    } else {
-      ssrImageData.current = {
-        uri: void 0,
-        css: { img: {} },
-        attr: { img: {}, container: {} },
-        transformed: false
-      };
-    }
-  }
-  const isLQIP = !isSEOBot && (getPlaceholder2 || shouldUseLQIP) && !isInFirstFold && ssrImageData.current.transformed;
-  const imageInfo = React.useMemo(() => JSON.stringify({
-    containerId,
-    ...containerId && { containerId },
-    ...alignType && { alignType },
-    ...skipMeasure && { skipMeasure: true },
-    displayMode,
-    ...containerWidth && { targetWidth: containerWidth },
-    ...containerHeight && { targetHeight: containerHeight },
-    ...targetWidth && { targetWidth },
-    ...targetHeight && { targetHeight },
-    ...targetScale && { targetScale },
-    isLQIP,
-    isSEOBot,
-    lqipTransition: placeholderTransition,
-    encoding,
-    imageData: {
-      width,
-      height,
-      uri,
-      name,
-      displayMode,
-      hasAnimation,
-      ...quality && { quality },
-      ...devicePixelRatio && { devicePixelRatio },
-      ...focalPoint && { focalPoint },
-      ...crop && { crop },
-      ...upscaleMethod && { upscaleMethod }
-    }
-  }), [
-    containerId,
-    alignType,
-    skipMeasure,
-    displayMode,
-    containerWidth,
-    containerHeight,
-    targetWidth,
-    targetHeight,
-    targetScale,
-    isLQIP,
-    isSEOBot,
-    placeholderTransition,
-    encoding,
-    width,
-    height,
-    uri,
-    name,
-    hasAnimation,
-    quality,
-    devicePixelRatio,
-    focalPoint,
-    crop,
-    upscaleMethod
-  ]);
-  const ssrResult = ssrImageData.current;
-  const src = ssrResult == null ? void 0 : ssrResult.uri;
-  const srcset = ssrResult == null ? void 0 : ssrResult.srcset;
-  const placeholderStyle = (_a = ssrResult.css) == null ? void 0 : _a.img;
-  const classNames = `${styles.image} ${className}`;
-  React.useEffect(() => {
-    const imgElement = imageRef.current;
-    if (onLoad && (imgElement == null ? void 0 : imgElement.currentSrc) && (imgElement == null ? void 0 : imgElement.complete)) {
-      onLoad({
-        target: imgElement
-      });
-    }
-  }, []);
-  const maxWidth = ssrResult && !(ssrResult == null ? void 0 : ssrResult.transformed) ? `max(${width}px, 100%)` : targetWidth ? `${targetWidth}px` : null;
-  return React.createElement(
-    "wow-image",
-    { id, class: classNames, "data-image-info": imageInfo, "data-motion-part": `BG_IMG ${containerId}`, "data-bg-effect-name": bgEffectName, "data-has-ssr-src": hasSsrSrc, "data-animate-blur": !isSEOBot && isLQIP && hasBlurTransition ? "" : void 0, "data-is-responsive": isFluidLayout ? "true" : void 0, style: maxWidth ? { "--wix-img-max-width": maxWidth } : {} },
-    React.createElement("img", {
-      src,
-      ref: imageRef,
-      alt: alt || "",
-      role,
-      style: { ...placeholderStyle, ...imageStyles },
-      onLoad,
-      onError,
-      width: containerWidth ? containerWidth : void 0,
-      height: containerHeight ? containerHeight : void 0,
-      ...socialAttrs,
-      srcSet: isInFirstFold ? (_b = srcset == null ? void 0 : srcset.dpr) == null ? void 0 : _b.map((s) => SCHEME_RE.test(s) ? s : `${STATIC_MEDIA_URL}${s}`).join(", ") : void 0,
-      // @ts-expect-error fetchpriority type should work in react > 18.3 https://github.com/facebook/react/pull/25927
-      fetchpriority: isInFirstFold ? "high" : void 0,
-      loading: isInFirstFold === false ? "lazy" : void 0,
-      // The src attribute triggers a mismatch warning because wow-image updates its src outside of the React lifecycle. This causes React to retain the old value in the virtual DOM, which could potentially lead to a bug where the old value is re-rendered during updates. However, we’re confident that this issue is not reproducing in current (16-18) React versions
-      suppressHydrationWarning: true
-    })
-  );
-};
-export {
-  Image as I
-};