@wix/editor-react-components 1.2764.0 → 1.2766.0

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

@@ -0,0 +1,486 @@
+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, D as DesignStates, S as SEMANTIC_CLASS_NAMES, a as TestIds, C as COMPONENT_TYPE } from "./constants21.js";
+import { d as activateByEnterButton, a as activateBySpaceOrEnterButton, r as removeAriaPrefix, g as getAccessibilityAttributesSpread } from "./a11y.js";
+import { i as isValidLink } from "./Link.js";
+import { d as defineStaticService } from "./staticService.js";
+import { d as defineService } from "./index10.js";
+import { E as EnvironmentDefinition } from "./index2.js";
+import { useService } from "@wix/services-manager-react";
+const root = "root__IB9QF";
+const active = "active__lpoVO";
+const label = "label__EtLji";
+const hasTransitions = "hasTransitions__sv08Z";
+const link = "link__0rDnC";
+const icon = "icon__ZzsS5";
+const button = "button__i8gkO";
+const styles = {
+  root,
+  active,
+  label,
+  hasTransitions,
+  link,
+  icon,
+  button
+};
+const AnimatedButtonIcon = forwardRef(
+  ({ svg, duration, className }, ref) => /* @__PURE__ */ jsx(
+    AnimatedIconWithReducedMotion,
+    {
+      id: "animated-icon",
+      duration,
+      svg,
+      className: clsx("animated-icon", styles.icon, className),
+      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 useButtonInteractionState(iconAnimationTriggers, onAnimationForward, onAnimationBackward, propsOnMouseEnter, propsOnMouseLeave) {
+  const [active2, setActive] = useState(false);
+  const animationTimeoutRef = useRef(
+    null
+  );
+  const isForwardRef = useRef(false);
+  const hasHoverTrigger = iconAnimationTriggers.includes(
+    IconAnimationTriggers.HOVER
+  );
+  const hasClickTrigger = iconAnimationTriggers.includes(
+    IconAnimationTriggers.CLICK
+  );
+  useEffect(() => {
+    isForwardRef.current = false;
+  }, [hasClickTrigger, hasHoverTrigger]);
+  useEffect(() => {
+    return () => {
+      if (animationTimeoutRef.current) {
+        clearTimeout(animationTimeoutRef.current);
+      }
+    };
+  }, []);
+  const onMouseEnter = useCallback(
+    (event) => {
+      if (animationTimeoutRef.current) {
+        clearTimeout(animationTimeoutRef.current);
+        animationTimeoutRef.current = null;
+      }
+      setActive(true);
+      if (hasHoverTrigger) {
+        onAnimationForward();
+      }
+      propsOnMouseEnter == null ? void 0 : propsOnMouseEnter(event);
+    },
+    [hasHoverTrigger, onAnimationForward, propsOnMouseEnter]
+  );
+  const onMouseLeave = useCallback(
+    (event) => {
+      animationTimeoutRef.current = setTimeout(() => {
+        setActive(false);
+      }, TRANSITION_DURATION);
+      if (hasHoverTrigger) {
+        onAnimationBackward();
+      }
+      propsOnMouseLeave == null ? void 0 : propsOnMouseLeave(event);
+    },
+    [hasHoverTrigger, onAnimationBackward, propsOnMouseLeave]
+  );
+  const onIconAnimationClick = useCallback(() => {
+    if (!hasClickTrigger) {
+      return;
+    }
+    if (isForwardRef.current) {
+      onAnimationBackward();
+    } else {
+      onAnimationForward();
+    }
+    isForwardRef.current = !isForwardRef.current;
+  }, [hasClickTrigger, onAnimationBackward, onAnimationForward]);
+  return {
+    active: active2,
+    onMouseEnter,
+    onMouseLeave,
+    onIconAnimationClick: hasClickTrigger ? onIconAnimationClick : void 0
+  };
+}
+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,
+  onIconAnimationClick,
+  onDblClick,
+  onFocus,
+  onBlur
+}) {
+  const isLink = isValidLink(link2);
+  const shouldPreventLinkNavigation = preventLinkNavigation && isLink;
+  const shouldHaveOnClick = !isDisabled && propsOnClick || shouldPreventLinkNavigation;
+  const onClick = useAnalyticsReportClicks({
+    reportBiOnClick,
+    onClick: shouldHaveOnClick || onIconAnimationClick ? (event) => {
+      onIconAnimationClick == null ? void 0 : onIconAnimationClick(event);
+      if (shouldHaveOnClick) {
+        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,
+  lang
+}) {
+  const normalizedA11y = useMemo(() => {
+    const {
+      lang: manifestLang,
+      tabIndex: manifestTabindex,
+      ...manifestAriaAttributes
+    } = propsA11y ?? {};
+    return {
+      lang: manifestLang,
+      tabIndex: manifestTabindex,
+      ariaAttributes: removeAriaPrefix(manifestAriaAttributes)
+    };
+  }, [propsA11y]);
+  const a11yAttr = useMemo(
+    () => {
+      var _a;
+      return getAccessibilityAttributesSpread({
+        ariaAttributes: {
+          ...ariaAttributes,
+          ...normalizedA11y.ariaAttributes,
+          label: (ariaAttributes == null ? void 0 : ariaAttributes.label) ?? normalizedA11y.ariaAttributes.label
+        },
+        tabIndex: normalizedA11y.tabIndex,
+        lang: ((lang == null ? void 0 : lang.trim()) ?? ((_a = normalizedA11y.lang) == null ? void 0 : _a.trim())) || void 0
+      });
+    },
+    [normalizedA11y, ariaAttributes, lang]
+  );
+  return a11yAttr;
+}
+const BusinessLoggerDefinition = defineStaticService("@wix/site-service-business-logger");
+const ConfigurationDefinition = defineService("@wix/site-service-configuration");
+const CLICK_ANALYTICS_SRC = 76;
+const CLICK_ANALYTICS_EVID = 1113;
+const CLICK_ANALYTICS_ENDPOINT = "pa";
+const ClickAnalyticsGroups = {
+  Button: "Button"
+};
+const buildClickAnalyticsEvent = ({
+  link: link2,
+  details,
+  elementId,
+  elementType,
+  elementGroup,
+  elementTitle,
+  language
+}) => ({
+  src: CLICK_ANALYTICS_SRC,
+  evid: CLICK_ANALYTICS_EVID,
+  bl: navigator.language,
+  url: window.location.href,
+  element_id: elementId,
+  elementType,
+  elementGroup,
+  elementTitle,
+  language,
+  value: link2 == null ? void 0 : link2.href,
+  details: details ? JSON.stringify(details) : void 0
+});
+const useClickAnalyticsReporter = (params) => {
+  var _a;
+  const businessLogger = useService(
+    BusinessLoggerDefinition
+  );
+  const environment = useService(EnvironmentDefinition);
+  const configuration = useService(
+    ConfigurationDefinition
+  );
+  const isPreview = (_a = environment == null ? void 0 : environment.getPreviewMode) == null ? void 0 : _a.call(environment);
+  const reportBi = businessLogger == null ? void 0 : businessLogger.reportBi;
+  const language = params.language ?? (environment == null ? void 0 : environment.language);
+  const trackClicksAnalytics = configuration == null ? void 0 : configuration.trackClicksAnalytics;
+  const isEnabled = !isPreview && trackClicksAnalytics && typeof reportBi === "function";
+  const paramsRef = useRef(params);
+  paramsRef.current = params;
+  return useMemo(() => {
+    if (!isEnabled) {
+      return void 0;
+    }
+    return (event) => {
+      const { elementId, ...restParams } = paramsRef.current;
+      try {
+        void Promise.resolve(
+          reportBi(
+            buildClickAnalyticsEvent({
+              ...restParams,
+              language,
+              elementId: elementId || event.currentTarget.id
+            }),
+            { endpoint: CLICK_ANALYTICS_ENDPOINT }
+          )
+        ).catch(() => {
+        });
+      } catch {
+      }
+    };
+  }, [isEnabled, reportBi, language]);
+};
+const Button = (props) => {
+  var _a;
+  const {
+    id,
+    link: link2,
+    type = "button",
+    label: label2 = "",
+    labelContent,
+    disabled: isDisabled = false,
+    onClick: propsOnClick,
+    className,
+    corvid,
+    a11y: propsA11y,
+    direction,
+    elementProps,
+    compPreviewState,
+    isQaMode,
+    fullNameCompType,
+    lang,
+    ariaAttributes,
+    onDblClick,
+    onFocus,
+    onBlur,
+    reportBiOnClick,
+    preventLinkNavigation,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseIn,
+    onMouseOut,
+    wix,
+    hasTransitions: hasTransitions2 = true
+  } = props;
+  const propsOnMouseEnter = useCallback(
+    (event) => {
+      onMouseIn == null ? void 0 : onMouseIn(event);
+      onMouseEnter == null ? void 0 : onMouseEnter(event);
+    },
+    [onMouseIn, onMouseEnter]
+  );
+  const propsOnMouseLeave = useCallback(
+    (event) => {
+      onMouseOut == null ? void 0 : onMouseOut(event);
+      onMouseLeave == null ? void 0 : onMouseLeave(event);
+    },
+    [onMouseOut, onMouseLeave]
+  );
+  const presetsWrapperProps = (wix == null ? void 0 : wix.presetsWrapperProps) || {};
+  const animatedIconProps = elementProps == null ? void 0 : elementProps.animatedIcon;
+  const corvidIconAnimationTriggers = (corvid == null ? void 0 : corvid.iconAnimationTriggers) ?? [];
+  const defaultTrigger = (animatedIconProps == null ? void 0 : animatedIconProps.trigger) === IconAnimationTriggers.CLICK ? IconAnimationTriggers.CLICK : IconAnimationTriggers.HOVER;
+  const iconAnimationTriggers = corvidIconAnimationTriggers.length > 0 ? corvidIconAnimationTriggers : [defaultTrigger];
+  const { iconAnimatedRef, onAnimationForward, onAnimationBackward } = useIconAnimation(isDisabled);
+  const {
+    active: active2,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onIconAnimationClick
+  } = useButtonInteractionState(
+    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,
+      [DesignStates.root.disabled.className]: isDisabled,
+      [styles.active]: active2,
+      [styles.hasTransitions]: hasTransitions2
+    }
+  );
+  const labelClassName = clsx(
+    "label",
+    styles.label,
+    formatClassNames(semanticClassNames.buttonLabel),
+    (_a = elementProps == null ? void 0 : elementProps.label) == null ? void 0 : _a.className,
+    isDisabled && DesignStates.label.disabled.className
+  );
+  const linkClassName = styles.link;
+  const reportClickAnalytics = useClickAnalyticsReporter({
+    link: link2,
+    elementId: id,
+    elementType: COMPONENT_TYPE,
+    elementGroup: ClickAnalyticsGroups.Button,
+    elementTitle: label2,
+    details: { isDisabled }
+  });
+  const { isLink, eventHandlers } = useButtonEventHandlers({
+    isDisabled,
+    link: link2,
+    propsOnClick,
+    preventLinkNavigation,
+    reportBiOnClick: reportBiOnClick ?? reportClickAnalytics,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    onIconAnimationClick,
+    onDblClick,
+    onFocus,
+    onBlur
+  });
+  const a11yAttr = useButtonA11y({ propsA11y, ariaAttributes, lang });
+  const renderedLabel = labelContent ?? label2;
+  const wrapperAttributes = {
+    id,
+    ...getDataAttributes(props),
+    ...getQaDataAttributes(isQaMode, fullNameCompType),
+    "data-semantic-classname": semanticClassNames.root,
+    ...direction && { dir: direction }
+  };
+  const renderButtonContent = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+    renderedLabel && /* @__PURE__ */ jsx("span", { className: labelClassName, "data-testid": TestIds.buttonLabel, children: renderedLabel }),
+    /* @__PURE__ */ jsx(
+      AnimatedButtonIcon,
+      {
+        ref: iconAnimatedRef,
+        svg: animatedIconProps == null ? void 0 : animatedIconProps.svg,
+        duration: animatedIconProps == null ? void 0 : animatedIconProps.duration,
+        className: animatedIconProps == null ? void 0 : animatedIconProps.className
+      }
+    )
+  ] });
+  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
+};