@wix/editor-react-components 1.2153.0

package/dist/site/components/WRichText/utils/numericEntitiesMap.d.ts

@@ -0,0 +1,31 @@
+declare const _default: {
+    '0': string;
+    '128': string;
+    '130': string;
+    '131': string;
+    '132': string;
+    '133': string;
+    '134': string;
+    '135': string;
+    '136': string;
+    '137': string;
+    '138': string;
+    '139': string;
+    '140': string;
+    '142': string;
+    '145': string;
+    '146': string;
+    '147': string;
+    '148': string;
+    '149': string;
+    '150': string;
+    '151': string;
+    '152': string;
+    '153': string;
+    '154': string;
+    '155': string;
+    '156': string;
+    '158': string;
+    '159': string;
+};
+export default _default;

package/dist/site/components/WRichText/utils/removeWixGuard.d.ts

@@ -0,0 +1 @@
+export declare const removeWixGuard: (htmlStr: string) => string;

package/dist/site/components/WRichText/utils/stripImpliedLinks.d.ts

@@ -0,0 +1 @@
+export declare const stripImpliedLinks: (text: string) => string;

package/dist/site/components/WRichText/utils/unescape.d.ts

@@ -0,0 +1,19 @@
+/**
+ * The inverse of `escape`this method converts the HTML entities
+ * `&`, `<`, `>`, `"` and `'` in `string` to
+ * their corresponding characters.
+ *
+ * **Note:** No other HTML entities are unescaped. To unescape additional
+ * HTML entities use a third-party library like [_he_](https://mths.be/he).
+ *
+ * @since 0.6.0
+ * @category String
+ * @param {string} [string=''] The string to unescape.
+ * @returns {string} Returns the unescaped string.
+ * @see escape, escapeRegExp
+ * @example
+ *
+ * unescape('fred, barney, & pebbles')
+ * // => 'fred, barney, & pebbles'
+ */
+export declare function unescape(string: string): string;

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

@@ -0,0 +1,155 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useRef, useImperativeHandle, useCallback, useMemo } from "react";
+import { p as parseSvg } from "./parseSvg.js";
+import { A as AnimatedSvgIds, a as AnimatedDataAttributes, b as AnimationDirection, T as TestIds, D as DEFAULT_ANIMATION_DURATION } from "./constants18.js";
+import { c as cn } from "./index8.js";
+const AnimatedSvg = forwardRef(
+  ({ svgContent, reducedMotion = false, duration }, ref) => {
+    const svgContainerRef = useRef(null);
+    useImperativeHandle(ref, () => ({
+      runAnimationForward,
+      runAnimationBackward
+    }));
+    const runAnimation = useCallback(
+      (animationDirection) => {
+        if (!svgContainerRef.current) {
+          return;
+        }
+        if (!reducedMotion && duration) {
+          const animatedTag = `animateTag${animationDirection}`;
+          const animateTags = svgContainerRef.current.querySelectorAll(
+            `[data-animate-id=${AnimatedSvgIds[animatedTag]}]`
+          );
+          animateTags.forEach((el) => el.beginElement());
+        }
+        const pathTags = svgContainerRef.current.querySelectorAll(
+          `path[data-animate-id=${AnimatedSvgIds.animatedTagPath}]`
+        );
+        pathTags.forEach((path) => {
+          const currentD = path.getAttribute("d");
+          const animatedEndPath = path.getAttribute(
+            AnimatedDataAttributes[animationDirection]
+          );
+          if (animatedEndPath) {
+            const oppositeDirection = animationDirection === AnimationDirection.FORWARD ? AnimationDirection.BACKWARD : AnimationDirection.FORWARD;
+            if (!path.getAttribute(AnimatedDataAttributes[oppositeDirection])) {
+              path.setAttribute(
+                AnimatedDataAttributes[oppositeDirection],
+                currentD || ""
+              );
+            }
+            path.setAttribute("d", animatedEndPath);
+          }
+        });
+      },
+      [reducedMotion, duration]
+    );
+    const runAnimationForward = useCallback(() => {
+      runAnimation(AnimationDirection.FORWARD);
+    }, [runAnimation]);
+    const runAnimationBackward = useCallback(() => {
+      runAnimation(AnimationDirection.BACKWARD);
+    }, [runAnimation]);
+    return /* @__PURE__ */ jsx("div", { ref: svgContainerRef, children: parseSvg(svgContent) });
+  }
+);
+const addAttributesToStringSvg = (svgContent, duration) => {
+  return svgContent.replace(
+    new RegExp(
+      `(<svg[^>]*data-animate-id=["']${AnimatedSvgIds.animatedSvg}["'])`,
+      "g"
+    ),
+    `$1 data-testid="${TestIds.animatedSvg}"`
+  ).replace(
+    new RegExp(
+      `(<animate[^>]*data-animate-id=["']${AnimatedSvgIds.animateTagForward}["'])`,
+      "g"
+    ),
+    `$1 data-testid="${TestIds.animateTagForward}"`
+  ).replace(
+    new RegExp(
+      `(<animate[^>]*data-animate-id=["']${AnimatedSvgIds.animateTagBackward}["'])`,
+      "g"
+    ),
+    `$1 data-testid="${TestIds.animateTagBackward}"`
+  ).replace(
+    /(dur=")[^"]*(")/g,
+    `$1${duration}s"${' calcMode="spline" keyTimes="0; 1" keySplines="0.65 0 0.35 1"'}`
+  );
+};
+const animatedIcon = "animatedIcon__3o5ii";
+const styles = {
+  animatedIcon
+};
+function useDefaultHoverBehavior(ref) {
+  const internalRef = useRef(null);
+  const actualRef = ref || internalRef;
+  const handleMouseEnter = () => {
+    var _a;
+    if (typeof actualRef === "function") {
+      return;
+    }
+    (_a = actualRef == null ? void 0 : actualRef.current) == null ? void 0 : _a.runAnimationForward();
+  };
+  const handleMouseLeave = () => {
+    var _a;
+    if (typeof actualRef === "function") {
+      return;
+    }
+    (_a = actualRef == null ? void 0 : actualRef.current) == null ? void 0 : _a.runAnimationBackward();
+  };
+  return {
+    actualRef,
+    ...!ref && {
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave
+    }
+  };
+}
+const AnimatedIcon = forwardRef(
+  (props, ref) => {
+    const {
+      svg,
+      duration = DEFAULT_ANIMATION_DURATION,
+      className,
+      id,
+      "data-testid": dataTestId,
+      reducedMotion
+    } = props;
+    const svgContent = svg == null ? void 0 : svg.svgContent;
+    const processedSvg = useMemo(
+      () => addAttributesToStringSvg(svgContent || "", duration),
+      [svgContent, duration]
+    );
+    const { actualRef, ...mouseEventProps } = useDefaultHoverBehavior(ref);
+    if (svgContent) {
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            styles.animatedIcon,
+            "animatedIcon",
+            "icon",
+            className
+          ),
+          id,
+          "data-testid": dataTestId,
+          ...mouseEventProps,
+          children: /* @__PURE__ */ jsx(
+            AnimatedSvg,
+            {
+              ref: actualRef,
+              svgContent: processedSvg,
+              reducedMotion,
+              duration
+            }
+          )
+        }
+      );
+    }
+    return null;
+  }
+);
+export {
+  AnimatedIcon as A
+};

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

@@ -0,0 +1,328 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef, useRef, useCallback, useState, useEffect, useMemo } from "react";
+import { c as clsx } from "./clsx.js";
+import { d as directionStyles } from "./direction.module.js";
+import { p as presetWrapperStyles } from "./presetWrapper.module.js";
+import { a as getDataAttributes, g as getQaDataAttributes } from "./dataUtils.js";
+import { f as formatClassNames } from "./classNames.js";
+import { I as IconAnimationTriggers } from "./Button.types.js";
+import AnimatedIconWithReducedMotion from "../AnimatedIcon/component.js";
+import { T as TRANSITION_DURATION, S as SEMANTIC_CLASS_NAMES, a as TestIds } from "./constants17.js";
+import { d as activateByEnterButton, a as activateBySpaceOrEnterButton, r as removeAriaPrefix, g as getAccessibilityAttributesSpread } from "./a11y.js";
+import { i as isValidLink } from "./Link.js";
+const root = "root__IB9QF";
+const active = "active__lpoVO";
+const label = "label__EtLji";
+const link = "link__0rDnC";
+const icon = "icon__ZzsS5";
+const button = "button__i8gkO";
+const styles = {
+  root,
+  active,
+  label,
+  link,
+  icon,
+  button
+};
+const AnimatedButtonIcon = forwardRef(
+  ({ svg, duration }, ref) => /* @__PURE__ */ jsx(
+    AnimatedIconWithReducedMotion,
+    {
+      id: "animated-icon",
+      duration,
+      svg,
+      className: clsx("animated-icon", styles.icon),
+      ref
+    }
+  )
+);
+function useIconAnimation(isDisabled) {
+  const iconAnimatedRef = useRef(null);
+  const onAnimationForward = useCallback(() => {
+    var _a;
+    !isDisabled && ((_a = iconAnimatedRef.current) == null ? void 0 : _a.runAnimationForward());
+  }, [isDisabled]);
+  const onAnimationBackward = useCallback(() => {
+    var _a;
+    !isDisabled && ((_a = iconAnimatedRef.current) == null ? void 0 : _a.runAnimationBackward());
+  }, [isDisabled]);
+  return { iconAnimatedRef, onAnimationForward, onAnimationBackward };
+}
+function useHoverState(iconAnimationTriggers, onAnimationForward, onAnimationBackward, propsOnMouseEnter, propsOnMouseLeave) {
+  const [active2, setActive] = useState(false);
+  const animationTimeoutRef = useRef(null);
+  useEffect(() => {
+    return () => {
+      if (animationTimeoutRef.current) {
+        clearTimeout(animationTimeoutRef.current);
+      }
+    };
+  }, []);
+  const onMouseEnter = useCallback(
+    (event) => {
+      if (animationTimeoutRef.current) {
+        clearTimeout(animationTimeoutRef.current);
+        animationTimeoutRef.current = null;
+      }
+      setActive(true);
+      if (iconAnimationTriggers.includes(IconAnimationTriggers.HOVER)) {
+        onAnimationForward();
+      }
+      propsOnMouseEnter == null ? void 0 : propsOnMouseEnter(event);
+    },
+    [iconAnimationTriggers, onAnimationForward, propsOnMouseEnter]
+  );
+  const onMouseLeave = useCallback(
+    (event) => {
+      animationTimeoutRef.current = setTimeout(() => {
+        setActive(false);
+      }, TRANSITION_DURATION);
+      if (iconAnimationTriggers.includes(IconAnimationTriggers.HOVER)) {
+        onAnimationBackward();
+      }
+      propsOnMouseLeave == null ? void 0 : propsOnMouseLeave(event);
+    },
+    [iconAnimationTriggers, onAnimationBackward, propsOnMouseLeave]
+  );
+  return { active: active2, onMouseEnter, onMouseLeave };
+}
+const useAnalyticsReportClicks = ({
+  reportBiOnClick,
+  onClick: propsOnClick
+}) => {
+  return useCallback(
+    (event) => {
+      reportBiOnClick == null ? void 0 : reportBiOnClick(event);
+      propsOnClick == null ? void 0 : propsOnClick(event);
+    },
+    [reportBiOnClick, propsOnClick]
+  );
+};
+function useButtonEventHandlers({
+  isDisabled,
+  link: link2,
+  propsOnClick,
+  preventLinkNavigation,
+  reportBiOnClick,
+  onMouseEnter,
+  onMouseLeave,
+  onDblClick,
+  onFocus,
+  onBlur
+}) {
+  const isLink = isValidLink(link2);
+  const shouldPreventLinkNavigation = preventLinkNavigation && isLink;
+  const shouldHaveOnClick = !isDisabled && propsOnClick || shouldPreventLinkNavigation;
+  const onClick = useAnalyticsReportClicks({
+    reportBiOnClick,
+    onClick: shouldHaveOnClick ? (event) => {
+      shouldPreventLinkNavigation && event.preventDefault();
+      !isDisabled && (propsOnClick == null ? void 0 : propsOnClick());
+    } : void 0
+  });
+  const eventHandlers = useMemo(
+    () => ({
+      onClick,
+      onMouseEnter,
+      onMouseLeave,
+      onKeyDown: isLink ? activateByEnterButton : activateBySpaceOrEnterButton,
+      onDoubleClick: !isDisabled && onDblClick ? onDblClick : void 0,
+      onFocus: !isDisabled && onFocus ? onFocus : void 0,
+      onBlur: !isDisabled && onBlur ? onBlur : void 0
+    }),
+    [
+      onClick,
+      onMouseEnter,
+      onMouseLeave,
+      isLink,
+      isDisabled,
+      onDblClick,
+      onFocus,
+      onBlur
+    ]
+  );
+  return { isLink, eventHandlers };
+}
+function useButtonA11y({
+  propsA11y,
+  ariaAttributes,
+  label: label2
+}) {
+  const normalizedA11y = useMemo(
+    () => removeAriaPrefix(propsA11y ?? {}),
+    [propsA11y]
+  );
+  const a11yAttr = useMemo(
+    () => getAccessibilityAttributesSpread({
+      ariaAttributes: {
+        ...ariaAttributes,
+        ...normalizedA11y,
+        label: (ariaAttributes == null ? void 0 : ariaAttributes.label) ?? (normalizedA11y.label || label2)
+      },
+      tabindex: normalizedA11y == null ? void 0 : normalizedA11y.tabindex
+    }),
+    [normalizedA11y, label2, ariaAttributes]
+  );
+  return a11yAttr;
+}
+const Button = (props) => {
+  const {
+    id,
+    link: link2,
+    type = "button",
+    label: label2 = "",
+    disabled: isDisabled = false,
+    onClick: propsOnClick,
+    className,
+    corvid,
+    a11y: propsA11y,
+    direction,
+    elementProps,
+    compPreviewState,
+    isQaMode,
+    fullNameCompType,
+    lang,
+    ariaAttributes,
+    onDblClick,
+    onFocus,
+    onBlur,
+    reportBiOnClick,
+    preventLinkNavigation,
+    onMouseEnter: propsOnMouseEnter,
+    onMouseLeave: propsOnMouseLeave,
+    wix
+  } = props;
+  const presetsWrapperProps = (wix == null ? void 0 : wix.presetsWrapperProps) || {};
+  const { iconAnimationTriggers = [IconAnimationTriggers.HOVER] } = corvid || {};
+  const animatedIconProps = elementProps == null ? void 0 : elementProps.animatedIcon;
+  const { iconAnimatedRef, onAnimationForward, onAnimationBackward } = useIconAnimation(isDisabled);
+  const { active: active2, onMouseEnter, onMouseLeave } = useHoverState(
+    iconAnimationTriggers,
+    onAnimationForward,
+    onAnimationBackward,
+    propsOnMouseEnter,
+    propsOnMouseLeave
+  );
+  const buttonOrLinkRef = useRef(null);
+  const semanticClassNames = SEMANTIC_CLASS_NAMES;
+  const rootClassName = clsx(
+    styles.root,
+    className,
+    styles.button,
+    "button",
+    !direction && directionStyles.fallbackDirection,
+    formatClassNames(semanticClassNames.root),
+    {
+      disabled: isDisabled,
+      [styles.active]: active2
+    }
+  );
+  const labelClassName = clsx(
+    "label",
+    styles.label,
+    formatClassNames(semanticClassNames.buttonLabel)
+  );
+  const linkClassName = styles.link;
+  const { isLink, eventHandlers } = useButtonEventHandlers({
+    isDisabled,
+    link: link2,
+    propsOnClick,
+    preventLinkNavigation,
+    reportBiOnClick,
+    onMouseEnter,
+    onMouseLeave,
+    onDblClick,
+    onFocus,
+    onBlur
+  });
+  const a11yAttr = useButtonA11y({ propsA11y, ariaAttributes, label: label2 });
+  const wrapperAttributes = {
+    id,
+    ...getDataAttributes(props),
+    ...getQaDataAttributes(isQaMode, fullNameCompType),
+    "data-semantic-classname": semanticClassNames.root,
+    lang,
+    ...direction && { dir: direction }
+  };
+  const renderButtonContent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    label2 && /* @__PURE__ */ jsx("span", { className: labelClassName, "data-testid": TestIds.buttonLabel, children: label2 }),
+    /* @__PURE__ */ jsx(
+      AnimatedButtonIcon,
+      {
+        ref: iconAnimatedRef,
+        svg: animatedIconProps == null ? void 0 : animatedIconProps.svg,
+        duration: animatedIconProps == null ? void 0 : animatedIconProps.duration
+      }
+    )
+  ] });
+  const renderButton = () => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type,
+      disabled: isDisabled,
+      className: rootClassName,
+      "data-testid": TestIds.buttonContent,
+      ...wrapperAttributes,
+      ...a11yAttr,
+      ...eventHandlers,
+      ref: buttonOrLinkRef,
+      "data-preview": compPreviewState,
+      children: renderButtonContent()
+    }
+  );
+  const renderLinkedButton = () => {
+    const linkHref = isDisabled ? void 0 : link2.href;
+    const linkRel = link2.rel;
+    const linkTarget = link2.target;
+    const linkPopupId = link2.linkPopupId;
+    const anchorDataId = link2.anchorDataId;
+    const anchorCompId = link2.anchorCompId;
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        href: linkHref,
+        rel: linkRel,
+        target: linkTarget,
+        "data-popupid": linkPopupId,
+        "data-anchor": anchorDataId,
+        "data-anchor-comp-id": anchorCompId,
+        className: clsx(linkClassName, rootClassName),
+        "data-testid": TestIds.buttonContent,
+        ...wrapperAttributes,
+        ...a11yAttr,
+        ...eventHandlers,
+        role: a11yAttr.role,
+        tabIndex: a11yAttr.tabIndex,
+        ref: buttonOrLinkRef,
+        "data-preview": compPreviewState,
+        children: renderButtonContent()
+      }
+    );
+  };
+  const renderDisabledLinkAsButton = () => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type,
+      disabled: isDisabled,
+      className: clsx(rootClassName),
+      "data-testid": TestIds.buttonContent,
+      ...wrapperAttributes,
+      ...a11yAttr,
+      ...eventHandlers,
+      role: "link",
+      ref: buttonOrLinkRef,
+      "data-preview": compPreviewState,
+      children: renderButtonContent()
+    }
+  );
+  const renderContent = () => {
+    if (isDisabled && isLink) {
+      return renderDisabledLinkAsButton();
+    }
+    return isLink ? renderLinkedButton() : renderButton();
+  };
+  return /* @__PURE__ */ jsx("div", { className: presetWrapperStyles.presetWrapper, ...presetsWrapperProps, children: renderContent() });
+};
+export {
+  Button as B
+};

package/dist/site/components/chunks/Button.types.js

@@ -0,0 +1,7 @@
+var IconAnimationTriggers = /* @__PURE__ */ ((IconAnimationTriggers2) => {
+  IconAnimationTriggers2["HOVER"] = "hover";
+  return IconAnimationTriggers2;
+})(IconAnimationTriggers || {});
+export {
+  IconAnimationTriggers as I
+};