@wix/editor-react-components 1.2153.0

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

@@ -0,0 +1,150 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { c as clsx } from "./clsx.js";
+import { f as formatClassNames } from "./classNames.js";
+import { e as getTabIndexAttribute, h as getAriaAttributes } from "./a11y.js";
+import { a as getDataAttributes } from "./dataUtils.js";
+const clickable = "clickable__Nql0c";
+const commonStyles = {
+  clickable
+};
+const ARIA_LABEL_DEFAULT = "Interactive element, focus to trigger content change";
+const semanticClassNames = {
+  repeaterItem: "repeater__item"
+};
+const root = "root__iJ5Sr";
+const resetDesignAttributes = "resetDesignAttributes__pykGT";
+const bg = "bg__rA2ny";
+const styles = {
+  root,
+  resetDesignAttributes,
+  bg,
+  "css-background": "css-background__Ttjm0"
+};
+const ResponsiveBox = (props, ref) => {
+  const {
+    id,
+    className,
+    containerRootClassName = "",
+    customClassNames = [],
+    children,
+    role,
+    onClick,
+    onKeyPress,
+    onDblClick,
+    onFocus,
+    onBlur,
+    onMouseEnter,
+    onMouseLeave,
+    hasPlatformClickHandler,
+    translations,
+    a11y = {},
+    ariaAttributes = {},
+    tabIndex,
+    isRepeaterItem = false,
+    observeChildListChange,
+    containerProps,
+    shouldUseContainerLayoutClass,
+    lang
+  } = props;
+  const {
+    "aria-label-interactions": ariaLabelInteractions,
+    tabindex,
+    ...a11yAttr
+  } = a11y;
+  if (ariaLabelInteractions) {
+    a11yAttr["aria-label"] = (translations == null ? void 0 : translations.ariaLabel) || ARIA_LABEL_DEFAULT;
+  }
+  const rootElementRef = React.useRef(null);
+  const handleKeyDown = (e) => {
+    if (onKeyPress) {
+      e.key === " " && e.preventDefault();
+      onKeyPress(e);
+    }
+  };
+  React.useImperativeHandle(ref, () => {
+    return {
+      focus: () => {
+        var _a;
+        (_a = rootElementRef.current) == null ? void 0 : _a.focus();
+      },
+      blur: () => {
+        var _a;
+        (_a = rootElementRef.current) == null ? void 0 : _a.blur();
+      }
+    };
+  });
+  const getRootSemanticClassName = () => {
+    if (isRepeaterItem) {
+      return semanticClassNames.repeaterItem;
+    }
+    if (props.semanticClassNames) {
+      return props.semanticClassNames.root;
+    }
+    return "";
+  };
+  React.useEffect(() => {
+    if (observeChildListChange && (rootElementRef == null ? void 0 : rootElementRef.current)) {
+      observeChildListChange(id, rootElementRef.current);
+    }
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      id,
+      ...getDataAttributes(props),
+      ref: rootElementRef,
+      ...a11yAttr,
+      lang,
+      ...getAriaAttributes({
+        ...ariaAttributes,
+        role: a11yAttr.role ?? role
+        // if the user defined a role, prefer it over whatever is default
+      }),
+      ...getTabIndexAttribute({ tabIndex, tabindex }),
+      className: clsx(
+        styles.root,
+        styles.resetDesignAttributes,
+        containerRootClassName,
+        className,
+        {
+          [commonStyles.clickable]: hasPlatformClickHandler
+        },
+        formatClassNames(getRootSemanticClassName(), ...customClassNames)
+      ),
+      onDoubleClick: onDblClick,
+      onClick,
+      onKeyDown: handleKeyDown,
+      onFocus,
+      onBlur,
+      onMouseEnter,
+      onMouseLeave,
+      dir: "ltr",
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: clsx(
+              styles["css-background"],
+              styles.bg,
+              "inner-box",
+              formatClassNames(getRootSemanticClassName(), ...customClassNames),
+              {
+                [containerProps.containerLayoutClassName]: (
+                  // workaround so the viewer finds the class and doesn't throw; doesn't affect layout
+                  shouldUseContainerLayoutClass
+                )
+              }
+            )
+          }
+        ),
+        children()
+      ]
+    }
+  );
+};
+const ResponsiveBox$1 = React.forwardRef(ResponsiveBox);
+export {
+  ResponsiveBox$1 as R
+};

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

@@ -0,0 +1,77 @@
+import { jsx } from "react/jsx-runtime";
+import React__default, { useCallback } from "react";
+import { h as getAriaAttributes } from "./a11y.js";
+import { c as clsx } from "./clsx.js";
+const TestIds = {
+  overflow: "responsive-container-overflow",
+  content: "responsive-container-content"
+};
+const style = {
+  "container-overflow": "container-overflow__-OVbb"
+};
+const OverflowWrapper = React__default.forwardRef(({ children, className }, ref) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(className, style["container-overflow"]),
+      "data-testid": TestIds.overflow,
+      ref,
+      children
+    }
+  );
+});
+const ResponsiveContainer = ({
+  containerLayoutClassName,
+  overlowWrapperClassName,
+  hasOverflow,
+  hasScrollOverflow,
+  shouldOmitWrapperLayers,
+  children,
+  role,
+  label,
+  extraRootClass = "",
+  ariaLive,
+  ariaAttributes,
+  tabIndex: tabIndexFromProps,
+  tagName = "div"
+}, ref) => {
+  const hasOverflowWrapper = !shouldOmitWrapperLayers && hasOverflow;
+  let tabIndexWithOverflow = -1;
+  if (hasScrollOverflow && tabIndexFromProps !== void 0) {
+    tabIndexWithOverflow = tabIndexFromProps;
+  }
+  const tabIndex = hasOverflowWrapper ? tabIndexWithOverflow : void 0;
+  const wrapWithOverflowWrapperIfNeeded = useCallback(
+    (reactChildren) => hasOverflowWrapper ? /* @__PURE__ */ jsx(
+      OverflowWrapper,
+      {
+        className: clsx(overlowWrapperClassName, extraRootClass),
+        children: reactChildren
+      }
+    ) : reactChildren,
+    [hasOverflowWrapper, overlowWrapperClassName, extraRootClass]
+  );
+  const classes = hasOverflow ? containerLayoutClassName : clsx(containerLayoutClassName, extraRootClass);
+  const childProps = {
+    ref,
+    "data-testid": TestIds.content,
+    tabIndex,
+    ...role ? { role } : {},
+    ...label ? { "aria-label": label } : {},
+    ...ariaLive ? { "aria-live": ariaLive } : {},
+    ...getAriaAttributes(ariaAttributes)
+  };
+  if (tagName === "multi-column-layouter") {
+    childProps.class = classes;
+    childProps.style = { visibility: "hidden" };
+  } else {
+    childProps.className = classes;
+  }
+  return wrapWithOverflowWrapperIfNeeded(
+    shouldOmitWrapperLayers ? /* @__PURE__ */ jsx(React__default.Fragment, { children: children() }) : React__default.createElement(tagName || "div", childProps, children())
+  );
+};
+const ResponsiveContainer$1 = React__default.forwardRef(ResponsiveContainer);
+export {
+  ResponsiveContainer$1 as R
+};

package/dist/site/components/chunks/Slideshow.semanticClassNames.js

@@ -0,0 +1,144 @@
+const DisplayNames = {
+  root: {
+    elementDisplayName: "Slideshow",
+    actions: {
+      manageItems: "Manage Slideshow"
+    },
+    customActions: {
+      animatedIcon: "Customize Icon"
+    },
+    data: {
+      content: "Box",
+      autoplay: "Autoplay",
+      loop: "Continuous loop",
+      autoplayDelay: "Time on each slide (seconds)",
+      pauseOnHover: "Pause on hover",
+      transitionType: "Transitions",
+      transitionDirection: "Transition direction",
+      transitionDuration: "Transition duration (seconds)",
+      slides: "Slide",
+      activeSlide: "Active slide",
+      showPauseButton: "Show pause & play button"
+    },
+    displayGroups: {
+      slides: "Slides"
+    },
+    cssCustomProperties: {
+      "animation-duration": "Transition duration",
+      orientation: "Orientation",
+      "navigation-buttons-position": "Navigation button position",
+      "navigation-buttons-arrangement": "Navigation button arrangement",
+      "navigation-buttons-alignment": "Navigation button alignment",
+      "slide-indicators-position": "Slide indicator position",
+      "controls-padding": "Padding"
+    }
+  },
+  transitionType: {
+    options: {
+      none: "None",
+      slide: "Slide",
+      crossFade: "Cross-fade",
+      inOut: "In-and-out"
+    }
+  },
+  transitionDirection: {
+    options: {
+      rtl: "Right-to-left",
+      ltr: "Left-to-right",
+      ttb: "Top-to-bottom",
+      btt: "Bottom-to-top"
+    }
+  },
+  orientation: {
+    options: {
+      horizontal: "Horizontal",
+      vertical: "Vertical"
+    }
+  },
+  position: {
+    options: {
+      top: "Top",
+      center: "Center",
+      bottom: "Bottom",
+      end: "End",
+      middle: "Middle",
+      start: "Start"
+    }
+  },
+  arrangement: {
+    options: {
+      separated: "Separated",
+      together: "Together"
+    }
+  },
+  navigationButtons: {
+    elementDisplayName: "Navigation buttons"
+  },
+  slideIndicators: {
+    elementDisplayName: "Slide indicators",
+    data: {
+      indicatorMode: "Display slide indicators"
+    },
+    cssCustomProperties: {
+      "dot-width": "Width",
+      "dot-gap": "Space between slide indicators"
+    }
+  },
+  indicatorMode: {
+    options: {
+      max5: "Max 5",
+      all: "All"
+    }
+  }
+};
+const slideshowDataDefaults = {
+  autoplay: true,
+  loop: true,
+  autoplayDelay: 0.5,
+  pauseOnHover: true,
+  transitionType: "cross-fade",
+  transitionDirection: "rtl",
+  activeSlide: 0,
+  transitionDuration: 0,
+  showPauseButton: true
+};
+const slideshowCssPropertiesDefaults = {
+  border: "none",
+  borderRadius: "0",
+  boxShadow: "none"
+};
+const slideshowCssCustomPropertiesDefaults = {
+  "animation-duration": "0.5s",
+  orientation: "horizontal",
+  "navigation-buttons-arrangement": "separated",
+  "navigation-buttons-alignment": "center",
+  "controls-padding": "0px"
+};
+const AUTOPLAY_STATE = {
+  RUNNING: "running",
+  CANCELLED: "cancelled",
+  PAUSED: "paused"
+};
+const MOVEMENT_DIRECTION = {
+  FORWARD: "forward",
+  BACKWARD: "backward"
+};
+const SLIDESHOW_SLIDE_LTR_DIRECTION_EXPERIMENT = "slideshowSlideLtrDirection";
+const semanticClassNames = {
+  root: "slideshow",
+  buttons: "slideshow-buttons",
+  navigationButtons: "slideshow-navigation-buttons",
+  pagination: "slideshow-pagination",
+  slide: "slideshow-slide",
+  pauseButton: "slideshow-pause-button"
+};
+export {
+  AUTOPLAY_STATE as A,
+  DisplayNames as D,
+  MOVEMENT_DIRECTION as M,
+  SLIDESHOW_SLIDE_LTR_DIRECTION_EXPERIMENT as S,
+  slideshowDataDefaults as a,
+  slideshowCssCustomPropertiesDefaults as b,
+  slideshowCssPropertiesDefaults as c,
+  semanticClassNames as s
+};

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

@@ -0,0 +1,201 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { p as parseSvg } from "./parseSvg.js";
+import { c as clsx } from "./clsx.js";
+import { L as Link } from "./Link.js";
+import { f as formatClassNames } from "./classNames.js";
+import { a as getDataAttributes, i as isEmptyObject } from "./dataUtils.js";
+const COMP_ID_PLACEHOLDER = "<%= compId %>";
+const COMP_ID_PLACEHOLDER_REGEX = new RegExp(COMP_ID_PLACEHOLDER, "g");
+const replaceCompIdPlaceholder = (str, compId) => str.replace(COMP_ID_PLACEHOLDER_REGEX, compId);
+const replaceContentIds = (svg, compId) => {
+  const idMap = {};
+  const result = svg.replace(/\sid="([^"<]+)"/g, (match, id) => {
+    const unique = id.endsWith(compId) ? id : `${id}_${compId}`;
+    idMap[id] = unique;
+    return ` id="${unique}"`;
+  });
+  return Object.keys(idMap).reduce(
+    (current, key) => current.replace(new RegExp(`(${key})(?!_${compId})`, "g"), idMap[key]),
+    result
+  );
+};
+const SVG_FALLBACK_CONTENT = "<svg data-failed />";
+const isFallbackSvg = (svg) => svg === SVG_FALLBACK_CONTENT;
+const isSvgTypeUgc = (svgType) => svgType === "ugc";
+function getAttributeByName(rawSvg, attributeName) {
+  const svgMatch = rawSvg.match(/<svg[^>]*>/);
+  if (!svgMatch) {
+    return void 0;
+  }
+  const attributeMatch = svgMatch[0].match(
+    new RegExp(`${attributeName}\\s*=\\s*["']?([^"']*)["']?`)
+  );
+  return attributeMatch ? attributeMatch[1] : void 0;
+}
+function getSvgViewBox(rawSvg, { viewBox, bbox, svgType }) {
+  const viewBoxAttr = getAttributeByName(rawSvg, "viewBox");
+  if (!viewBoxAttr && viewBox) {
+    return viewBox;
+  }
+  if (!isSvgTypeUgc(svgType) && bbox) {
+    return bbox;
+  }
+  return viewBoxAttr;
+}
+function getWidth(rawSvg) {
+  return getAttributeByName(rawSvg, "width");
+}
+function getHeight(rawSvg) {
+  return getAttributeByName(rawSvg, "height");
+}
+function extractSvgInnerContent(svgString) {
+  if (!svgString || typeof svgString !== "string") {
+    return "";
+  }
+  return svgString.trim().replace(/^<\?xml[^>]*\?>\s*/i, "").replace(/^<svg[^>]*>/, "").replace(/<\/svg>\s*$/, "").trim();
+}
+function transformSvgString(svgString, id) {
+  if (isFallbackSvg(svgString)) {
+    return svgString;
+  }
+  svgString = replaceContentIds(svgString, id);
+  svgString = replaceCompIdPlaceholder(svgString, id);
+  svgString = extractSvgInnerContent(svgString);
+  return svgString;
+}
+function processSvgProps(props, svgInfo) {
+  const { svgString = "", id } = props;
+  return {
+    svgType: svgInfo.svgType,
+    viewBox: getSvgViewBox(svgString, svgInfo),
+    svgWidth: getWidth(svgString),
+    svgHeight: getHeight(svgString),
+    bBox: svgInfo.bbox,
+    svgString: transformSvgString(svgString, id)
+  };
+}
+const semanticClassNames = {
+  root: "svg-image"
+};
+const svgImageSource = "svgImageSource__g-ESq";
+const svgImageRoot = "svgImageRoot__XFDeg";
+const styles = {
+  svgImageSource,
+  svgImageRoot
+};
+const ConditionalLink = ({
+  link,
+  children
+}) => {
+  const hasLink = !isEmptyObject(link);
+  if (!hasLink) {
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  return /* @__PURE__ */ jsx(Link, { ...link, children });
+};
+const SvgImageBase = ({
+  id,
+  link,
+  alt = "",
+  svgString,
+  svgType,
+  bBox,
+  viewBox,
+  className,
+  children,
+  displayMode = "fit",
+  customClassNames = [],
+  ...props
+}) => {
+  const shouldRenderFallbackSVG = isFallbackSvg(svgString);
+  const keepAspectRatio = displayMode === "fit";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      id,
+      ...getDataAttributes(props),
+      className: clsx(
+        formatClassNames(
+          semanticClassNames.root,
+          ...customClassNames,
+          className ?? ""
+        )
+      ),
+      children: /* @__PURE__ */ jsx(ConditionalLink, { link, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-testid": `svgRoot-${id}`,
+          className: clsx(styles.svgImageRoot, styles.svgImageSource),
+          "data-type": svgType,
+          children: /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              "aria-label": alt,
+              role: alt ? "img" : "presentation",
+              "aria-hidden": alt ? void 0 : true,
+              preserveAspectRatio: keepAspectRatio ? "xMidYMid meet" : "none",
+              "data-type": svgType,
+              viewBox,
+              xmlnsXlink: "http://www.w3.org/1999/xlink",
+              xmlns: "http://www.w3.org/2000/svg",
+              "data-bbox": bBox,
+              "data-failed": shouldRenderFallbackSVG ? "" : void 0,
+              children: [
+                !shouldRenderFallbackSVG && svgString && /* @__PURE__ */ jsx("g", { className: styles.svgImageSource, "data-type": svgType, children: parseSvg(svgString) }),
+                children
+              ]
+            }
+          )
+        }
+      ) })
+    }
+  );
+};
+const getMaskId = (id) => `svg-mask-${id}`;
+const getMaskBgId = (id) => `svg-mask-bg-${id}`;
+const extractStartCoordinatesFromViewbox = (viewBox = "0 0 0 0") => {
+  const [x, y] = viewBox.split(" ");
+  return { x, y };
+};
+function SvgImageTint(props) {
+  const { id, viewBox, svgString } = props;
+  const startCoordinates = extractStartCoordinatesFromViewbox(viewBox);
+  return /* @__PURE__ */ jsxs(SvgImageBase, { ...props, children: [
+    /* @__PURE__ */ jsxs("defs", { children: [
+      /* @__PURE__ */ jsx("mask", { id: getMaskBgId(id), "mask-type": "alpha", children: /* @__PURE__ */ jsx("g", { children: parseSvg(svgString) }) }),
+      /* @__PURE__ */ jsx("mask", { id: getMaskId(id), "mask-type": "luminance", children: /* @__PURE__ */ jsx("g", { filter: `url(#invert-${id})`, children: parseSvg(svgString) }) }),
+      /* @__PURE__ */ jsx("filter", { id: `invert-${id}`, "color-interpolation-filters": "sRGB", children: /* @__PURE__ */ jsxs("feComponentTransfer", { children: [
+        /* @__PURE__ */ jsx("feFuncR", { type: "table", tableValues: "1 0" }),
+        /* @__PURE__ */ jsx("feFuncG", { type: "table", tableValues: "1 0" }),
+        /* @__PURE__ */ jsx("feFuncB", { type: "table", tableValues: "1 0" })
+      ] }) })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        fill: "white",
+        width: "100%",
+        height: "100%",
+        x: startCoordinates.x,
+        y: startCoordinates.y,
+        mask: `url(#${getMaskBgId(id)})`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "rect",
+      {
+        fill: "var(--svg-color-1)",
+        width: "100%",
+        height: "100%",
+        x: startCoordinates.x,
+        y: startCoordinates.y,
+        mask: `url(#${getMaskId(id)})`
+      }
+    )
+  ] });
+}
+export {
+  SvgImageTint as S,
+  SvgImageBase as a,
+  processSvgProps as p
+};

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

@@ -0,0 +1,112 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React__default from "react";
+import { f as formatClassNames } from "./classNames.js";
+import { a as getDataAttributes } from "./dataUtils.js";
+import { e as getTabIndexAttribute } from "./a11y.js";
+import { D as DEFAULT_TEXT_DIRECTION, a as DEFAULT_HTML_TAG, d as dataHooks, T as TestIds } from "./constants7.js";
+import { c as clsx } from "./clsx.js";
+import { L as Link } from "./Link.js";
+const semanticClassNames = {
+  root: "text-effects"
+};
+const root = "root__0YXCp";
+const visuallyHidden = "visuallyHidden__HoTMC";
+const empty = "empty__UKEPC";
+const link = "link__5je0k";
+const styles = {
+  root,
+  visuallyHidden,
+  empty,
+  link
+};
+const TextEffectsShared = (props) => {
+  const {
+    id,
+    className,
+    text,
+    customClassNames = [],
+    link: link2,
+    onMouseEnter,
+    onMouseLeave,
+    children,
+    textDirection = DEFAULT_TEXT_DIRECTION,
+    isDecorative,
+    tagName: Tag = DEFAULT_HTML_TAG,
+    a11y,
+    initialReducedMotion,
+    forceReducedMotion,
+    tagProps = {},
+    arePatternsDisabled = true
+  } = props;
+  const { animated, ...restTagProps } = tagProps;
+  const [reducedMotion, setReducedMotion] = React__default.useState(initialReducedMotion);
+  const resolvedReducedMotion = forceReducedMotion ?? reducedMotion;
+  const [isMounted, setIsMounted] = React__default.useState(false);
+  React__default.useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  const toggleReducedMotion = () => {
+    setReducedMotion((prevReducedMotion) => !prevReducedMotion);
+  };
+  const isClickable = animated && !forceReducedMotion;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...isDecorative && { "aria-hidden": true },
+      id,
+      "data-hook": dataHooks.root,
+      ...isClickable && { onClick: toggleReducedMotion },
+      className: clsx(
+        className,
+        formatClassNames(semanticClassNames.root, ...customClassNames),
+        // reduced motion is false in SSR so it's respected only after the component is mounted
+        // to avoid hydration mismatch
+        { "reduced-motion": isMounted && resolvedReducedMotion },
+        { [styles.empty]: text === "" },
+        styles.root
+      ),
+      onMouseEnter,
+      onMouseLeave,
+      dir: textDirection,
+      ...getDataAttributes(props),
+      ...getTabIndexAttribute(a11y),
+      children: link2 ? /* @__PURE__ */ jsx(
+        Link,
+        {
+          ...link2,
+          className: clsx(styles.link),
+          dataTestId: TestIds.viewer.link,
+          children: /* @__PURE__ */ jsxs(Tag, { ...restTagProps, children: [
+            !arePatternsDisabled && text && // Use b instead of span to avoid interfering with first-of-type selectors in PatternUnit.scss
+            // Invisible spans were being counted in first-of-type calculations, causing wrong pattern targeting
+            /* @__PURE__ */ jsx(
+              "b",
+              {
+                className: styles.visuallyHidden,
+                "data-testid": TestIds.viewer.visuallyHidden,
+                children: text
+              }
+            ),
+            children
+          ] })
+        }
+      ) : /* @__PURE__ */ jsxs(Tag, { ...restTagProps, children: [
+        !arePatternsDisabled && text && // Use b instead of span to avoid interfering with first-of-type selectors in PatternUnit.scss
+        // Invisible spans were being counted in first-of-type calculations, causing wrong pattern targeting
+        /* @__PURE__ */ jsx(
+          "b",
+          {
+            className: styles.visuallyHidden,
+            "data-testid": TestIds.viewer.visuallyHidden,
+            children: text
+          }
+        ),
+        children
+      ] })
+    }
+  );
+};
+export {
+  TextEffectsShared as T,
+  styles as s
+};