@wix/editor-react-components 1.2837.0 → 1.2839.0

package/dist/site/components/Logo/css.css

@@ -1,18 +1,4 @@
-.image__WopE9 {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-.image__WopE9 img {
-  max-width: var(--wix-img-max-width, 100%);
-}
-.image__WopE9[data-animate-blur] img {
-  filter: blur(9px);
-  transition: filter 0.8s ease-in;
-}
-.image__WopE9[data-animate-blur] img[data-load-done] {
-  filter: none;
-}.logo__Y9w6a {
+.logo__Y9w6a {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -42,4 +28,19 @@
   width: 100%;
   height: 100%;
   display: block;
+}
+.image__WopE9 {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+.image__WopE9 img {
+  max-width: var(--wix-img-max-width, 100%);
+}
+.image__WopE9[data-animate-blur] img {
+  filter: blur(9px);
+  transition: filter 0.8s ease-in;
+}
+.image__WopE9[data-animate-blur] img[data-load-done] {
+  filter: none;
 }

package/dist/site/components/Lottie/manifest.js

@@ -2,7 +2,7 @@ import { b as DISPLAY_GROUPS, E as ELEMENTS, D as DATA, L as LAYOUT, A as Archet
 import { g as getTranslationResources } from "../chunks/translationResources.js";
 import { g as getSelector } from "../chunks/manifest.js";
 import { c as speedConstraints, d as playButtonDefaults, e as DisplayNames, r as rootDataDefaults, b as showButtonOnHoverDefaults, f as borderDefaultValue, i as initialSize, C as COMPONENT_TYPE, s as semanticSelectors } from "../chunks/constants29.js";
-import { a as manifestFocusable, c as manifestMouseHover, d as manifestClickable } from "../chunks/manifestSdkMixins.js";
+import { b as manifestFocusable, d as manifestMouseHover, e as manifestClickable } from "../chunks/manifestSdkMixins.js";
 const manifest = {
   id: "13165477-8205-4050-b078-424a1479159e",
   type: COMPONENT_TYPE,

package/dist/site/components/Menu/manifest.js

@@ -1,7 +1,7 @@
 import { E as ELEMENTS, C as CSS_PROPERTIES, b as DISPLAY_GROUPS, N as NativeStateType, a as ACTIONS, D as DATA, L as LAYOUT, I as INTERACTIONS, A as Archetype } from "../chunks/chunk-LDITHLYN.js";
 import { g as getTranslationResources } from "../chunks/translationResources.js";
 import { c as DesignStates, f as DisplayNames, s as selectors, g as DropdownAnchorPositions, h as DropdownAppliedStyleProperties, i as elementKeys, j as customActionKeys, k as MENU_ANIMATED_ICON_SPEC, m as states, p as presets, n as menuBuiltInActions, C as COMPONENT_TYPE } from "../chunks/constants27.js";
-import { c as manifestMouseHover } from "../chunks/manifestSdkMixins.js";
+import { d as manifestMouseHover } from "../chunks/manifestSdkMixins.js";
 const dropdownItemConfig = {
   elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
   [ELEMENTS.ELEMENT_TYPE.inlineElement]: {

package/dist/site/components/MultiStateBox/manifest.js

@@ -1,6 +1,6 @@
 import { b as DISPLAY_GROUPS, a as ACTIONS, D as DATA, L as LAYOUT, c as ContainerType, A as Archetype } from "../chunks/chunk-LDITHLYN.js";
 import { D as DESCRIPTIONS, a as DISPLAY_NAMES, s as selectors } from "../chunks/constants26.js";
-import { a as manifestFocusable, c as manifestMouseHover, d as manifestClickable, b as manifestChangeable } from "../chunks/manifestSdkMixins.js";
+import { b as manifestFocusable, d as manifestMouseHover, e as manifestClickable, c as manifestChangeable } from "../chunks/manifestSdkMixins.js";
 import { g as getSelector } from "../chunks/manifest.js";
 const manifest = {
   id: "32d6f6fe-72ef-4490-82aa-d3b13cce6ef1",

package/dist/site/components/RadioButtons/manifest.js

@@ -1,7 +1,7 @@
 import { E as ELEMENTS, N as NativeStateType, C as CSS_PROPERTIES, b as DISPLAY_GROUPS, D as DATA, a as ACTIONS, L as LAYOUT, A as Archetype } from "../chunks/chunk-LDITHLYN.js";
 import { D as DisplayNames, c as DesignStates, d as defaultValues, s as selectors } from "../chunks/constants24.js";
 import { g as getSelector } from "../chunks/manifest.js";
-import { a as manifestFocusable, b as manifestChangeable } from "../chunks/manifestSdkMixins.js";
+import { b as manifestFocusable, c as manifestChangeable } from "../chunks/manifestSdkMixins.js";
 import { m as manifestValidation } from "../chunks/manifest2.js";
 const manifest = {
   id: "01a3965d-95d7-49e2-903a-3a496de97054",

package/dist/site/components/ShareButtons/manifest.js

@@ -1,7 +1,7 @@
 import { C as CSS_PROPERTIES, N as NativeStateType, E as ELEMENTS, a as ACTIONS, D as DATA, I as INTERACTIONS, L as LAYOUT, A as Archetype } from "../chunks/chunk-LDITHLYN.js";
 import { g as getTranslationResources } from "../chunks/translationResources.js";
 import { h as elementKeys, i as DesignStates, j as DisplayNames, k as DisplayConfig, d as DefaultValues, I as IconPositionOptions, S as StaticDisplayFilters, l as PageToShareOptions, m as DefaultButtons, B as ButtonWidthOptions, b as COMPONENT_TYPE } from "../chunks/constants22.js";
-import { c as manifestMouseHover } from "../chunks/manifestSdkMixins.js";
+import { d as manifestMouseHover } from "../chunks/manifestSdkMixins.js";
 const presets = {
   horizontal: "horizontal",
   vertical: "vertical"

package/dist/site/components/Slideshow/manifest.js

@@ -2,7 +2,7 @@ import { E as ELEMENTS, C as CSS_PROPERTIES, D as DATA, a as ACTIONS, I as INTER
 import { g as getTranslationResources } from "../chunks/translationResources.js";
 import { g as getSelector } from "../chunks/manifest.js";
 import { c as DisplayNames, a as semanticClassNames, d as slideshowCssCustomPropertiesDefaults, e as slideshowCssPropertiesDefaults, s as slideshowDataDefaults, C as COMPONENT_TYPE } from "../chunks/Slideshow.semanticClassNames.js";
-import { c as manifestMouseHover, d as manifestClickable, e as manifestPlayable, b as manifestChangeable } from "../chunks/manifestSdkMixins.js";
+import { d as manifestMouseHover, e as manifestClickable, f as manifestPlayable, c as manifestChangeable } from "../chunks/manifestSdkMixins.js";
 const navigationButtons = {
   elementType: ELEMENTS.ELEMENT_TYPE.refElement,
   refElement: {

package/dist/site/components/Tabs/manifest.js

@@ -1,6 +1,6 @@
 import { E as ELEMENTS, N as NativeStateType, C as CSS_PROPERTIES, a as ACTIONS, I as INTERACTIONS, b as DISPLAY_GROUPS, D as DATA, L as LAYOUT, c as ContainerType, A as Archetype } from "../chunks/chunk-LDITHLYN.js";
 import { D as DesignStates, c as classes, R as ROOT_MENU_ITEM_CSS_PROPERTIES, a as ROOT_MENU_ITEM_CUSTOM_PROPERTIES } from "../chunks/constants20.js";
-import { a as manifestFocusable, c as manifestMouseHover, d as manifestClickable, b as manifestChangeable } from "../chunks/manifestSdkMixins.js";
+import { b as manifestFocusable, d as manifestMouseHover, e as manifestClickable, c as manifestChangeable } from "../chunks/manifestSdkMixins.js";
 const menuItemConfig = {
   elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
   [ELEMENTS.ELEMENT_TYPE.inlineElement]: {

package/dist/site/components/TestComp/manifest.js

@@ -1,5 +1,5 @@
 import { L as LAYOUT, N as NativeStateType, E as ELEMENTS, D as DATA, b as DISPLAY_GROUPS, C as CSS_PROPERTIES, A as Archetype } from "../chunks/chunk-LDITHLYN.js";
-import { a as manifestFocusable, c as manifestMouseHover, d as manifestClickable } from "../chunks/manifestSdkMixins.js";
+import { b as manifestFocusable, d as manifestMouseHover, e as manifestClickable } from "../chunks/manifestSdkMixins.js";
 const DesignStates = {
   testCompCard: {
     hover: { displayName: "Hover", className: "test-comp-card--hover" },

package/dist/site/components/TextBox/manifest.js

@@ -1,7 +1,7 @@
 import { E as ELEMENTS, N as NativeStateType, b as DISPLAY_GROUPS, C as CSS_PROPERTIES, D as DATA, L as LAYOUT, A as Archetype } from "../chunks/chunk-LDITHLYN.js";
 import { D as DisplayNames, b as DesignStates, d as defaultValues, s as selectors } from "../chunks/constants18.js";
 import { g as getSelector } from "../chunks/manifest.js";
-import { a as manifestFocusable, b as manifestChangeable } from "../chunks/manifestSdkMixins.js";
+import { b as manifestFocusable, c as manifestChangeable } from "../chunks/manifestSdkMixins.js";
 import { m as manifestValidation } from "../chunks/manifest2.js";
 const manifest = {
   id: "002d94d7-bec7-4082-8d00-fe4ede12024d",

package/dist/site/components/TextInput/manifest.js

@@ -1,7 +1,6 @@
 import { I as INTERACTIONS, D as DATA, b as DISPLAY_GROUPS, E as ELEMENTS, C as CSS_PROPERTIES, N as NativeStateType, L as LAYOUT, A as Archetype } from "../chunks/chunk-LDITHLYN.js";
-import { D as DomEventType } from "../chunks/types.impl.js";
 import { D as DesignStates, a as DisplayNames, F as FunctionalStateKeys, c as componentClassNames } from "../chunks/constants3.js";
-import { m as manifestInputable, a as manifestFocusable } from "../chunks/manifestSdkMixins.js";
+import { m as manifestKeyboard, a as manifestInputable, b as manifestFocusable } from "../chunks/manifestSdkMixins.js";
 const designState = (s, pseudoClass) => ({
   displayName: s.displayName,
   className: s.className,
@@ -350,26 +349,13 @@ const manifest = {
       },
       ...manifestFocusable(),
       ...manifestInputable(),
-      onKeyUp: {
-        displayName: "On Key Up",
-        dataType: DATA.DATA_TYPE.function,
-        [DATA.DATA_TYPE.function]: {
-          parameters: [{ domEvent: DomEventType.KEYBOARD }]
-        }
-      },
+      ...manifestKeyboard(),
       onValueChange: {
         displayName: "On Value Change",
         dataType: DATA.DATA_TYPE.function,
         [DATA.DATA_TYPE.function]: {
           parameters: [{ dataType: DATA.DATA_TYPE.text }]
         }
-      },
-      onKeyDown: {
-        displayName: "On Key Down",
-        dataType: DATA.DATA_TYPE.function,
-        [DATA.DATA_TYPE.function]: {
-          parameters: [{ domEvent: DomEventType.KEYBOARD }]
-        }
       }
     },
     interactions: {

package/dist/site/components/TransparentVideo/css.css

@@ -101,18 +101,19 @@
   --position-left: calc(50cqw - 1cqh * var(--focal-x, 50) * var(--aspect-ratio, 1));
   --position-top: calc(50cqh - 1cqw * var(--focal-y, 50) / var(--aspect-ratio, 1));
   object-position: var(--video-position, clamp(100%, var(--position-left), 0%) clamp(100%, var(--position-top), 0%));
-}.image__OIbFL {
+}
+.image__WopE9 {
   display: block;
   width: 100%;
   height: 100%;
 }
-.image__OIbFL img {
+.image__WopE9 img {
   max-width: var(--wix-img-max-width, 100%);
 }
-.image__OIbFL[data-animate-blur] img {
+.image__WopE9[data-animate-blur] img {
   filter: blur(9px);
   transition: filter 0.8s ease-in;
 }
-.image__OIbFL[data-animate-blur] img[data-load-done] {
+.image__WopE9[data-animate-blur] img[data-load-done] {
   filter: none;
 }

package/dist/site/components/VideoScrub/css.css

@@ -137,19 +137,20 @@
   --position-left: calc(50cqw - 1cqh * var(--focal-x, 50) * var(--aspect-ratio, 1));
   --position-top: calc(50cqh - 1cqw * var(--focal-y, 50) / var(--aspect-ratio, 1));
   object-position: var(--video-position, clamp(100%, var(--position-left), 0%) clamp(100%, var(--position-top), 0%));
-}.image__OIbFL {
+}
+.image__WopE9 {
   display: block;
   width: 100%;
   height: 100%;
 }
-.image__OIbFL img {
+.image__WopE9 img {
   max-width: var(--wix-img-max-width, 100%);
 }
-.image__OIbFL[data-animate-blur] img {
+.image__WopE9[data-animate-blur] img {
   filter: blur(9px);
   transition: filter 0.8s ease-in;
 }
-.image__OIbFL[data-animate-blur] img[data-load-done] {
+.image__WopE9[data-animate-blur] img[data-load-done] {
   filter: none;
 }
 .presetWrapper__J1yzj {

package/dist/site/components/VideoUpload/css.css

@@ -474,18 +474,19 @@
   --position-left: calc(50cqw - 1cqh * var(--focal-x, 50) * var(--aspect-ratio, 1));
   --position-top: calc(50cqh - 1cqw * var(--focal-y, 50) / var(--aspect-ratio, 1));
   object-position: var(--video-position, clamp(100%, var(--position-left), 0%) clamp(100%, var(--position-top), 0%));
-}.image__OIbFL {
+}
+.image__WopE9 {
   display: block;
   width: 100%;
   height: 100%;
 }
-.image__OIbFL img {
+.image__WopE9 img {
   max-width: var(--wix-img-max-width, 100%);
 }
-.image__OIbFL[data-animate-blur] img {
+.image__WopE9[data-animate-blur] img {
   filter: blur(9px);
   transition: filter 0.8s ease-in;
 }
-.image__OIbFL[data-animate-blur] img[data-load-done] {
+.image__WopE9[data-animate-blur] img[data-load-done] {
   filter: none;
 }

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

@@ -0,0 +1,160 @@
+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
+};