@wix/editor-react-components 1.2211.0 → 1.2213.0

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

@@ -53,6 +53,17 @@ const manifest = {
         displayName: DisplayNames.root.data.duration,
         defaultValue: DEFAULT_ANIMATION_DURATION
       },
+      trigger: {
+        dataType: DATA.DATA_TYPE.textEnum,
+        displayName: "Animation trigger",
+        [DATA.DATA_TYPE.textEnum]: {
+          options: [
+            { value: "hover", displayName: "Hover" },
+            { value: "click", displayName: "Click" }
+          ]
+        },
+        defaultValue: "hover"
+      },
       svgCustomAnimationStart: {
         dataType: DATA.DATA_TYPE.vectorArt,
         [DATA.DATA_TYPE.vectorArt]: {}
@@ -122,7 +133,8 @@ const manifest = {
           "svgCustomAnimationSelected",
           "svgLastStaticSelected",
           "svgLastAnimatedSelected",
-          "duration"
+          "duration",
+          "trigger"
         ]
       }
     },

package/dist/site/components/AnimatedIcon/panels/components/TriggerSection.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { TriggerTypeEnum } from '../constants';
+import { Translations } from '../translations/consts';
+interface TriggerSectionProps {
+    trigger: TriggerTypeEnum;
+    onTriggerChange: (trigger: TriggerTypeEnum) => Promise<void> | void;
+    translations: Translations;
+    dataHook?: string;
+}
+declare const TriggerSection: React.FC<TriggerSectionProps>;
+export default TriggerSection;

package/dist/site/components/AnimatedIcon/panels/constants.d.ts

@@ -2,6 +2,10 @@ export declare enum IconTypeEnum {
     Static = "static",
     Animated = "animated"
 }
+export declare enum TriggerTypeEnum {
+    Hover = "hover",
+    Click = "click"
+}
 export declare const DURATION_CONSTANTS: {
     readonly DEFAULT_ANIMATION_DURATION: 0.2;
     readonly DURATION_STEP: 0.1;

package/dist/site/components/AnimatedIcon/panels/dataHooks.d.ts

@@ -4,10 +4,12 @@ export declare const CUSTOMIZE_ICON_PANEL_DATA_HOOKS: {
     SVG_DISPLAY_SECTION: string;
     CREATE_ANIMATED_SECTION: string;
     DURATION_SECTION: string;
+    TRIGGER_SECTION: string;
     CHOOSE_ICON_BUTTON: string;
     CREATE_ANIMATED_BUTTON: string;
     DURATION_SLIDER: string;
     DURATION_INPUT: string;
+    TRIGGER_TOGGLE: string;
     CREATION_PANEL: string;
     CREATION_BACK: string;
     CREATION_START_ICON: string;

package/dist/site/components/AnimatedIcon/panels/translations/consts.d.ts

@@ -15,6 +15,10 @@ export declare const TranslationKeys: {
     readonly endIconLabel: "custompanel_animatedicon_sidePanel_endIcon_label";
     readonly sidePanelTitle: "custompanel_animatedicon_sidePanel_title";
     readonly startIconLabel: "custompanel_animatedicon_sidePanel_startIcon_label";
+    readonly triggerFieldLabel: "custompanel_animatedicon_trigger_field_label";
+    readonly triggerHoverOption: "custompanel_animatedicon_trigger_toggle_hover_label";
+    readonly triggerClickOption: "custompanel_animatedicon_trigger_toggle_click_label";
+    readonly triggerTooltip: "custompanel_animatedicon_trigger_tooltip_description";
 };
 export type Translations = Record<keyof typeof TranslationKeys, string>;
 export declare const DefaultTranslations: Translations;

package/dist/site/components/AnimatedIcon/panels/utils.d.ts

@@ -1,9 +1,11 @@
+import { TriggerTypeEnum } from './constants';
 export interface SvgData {
     uri: string;
     type: string;
 }
 export interface AnimatedIconData {
     duration?: number;
+    trigger?: TriggerTypeEnum;
     svg?: SvgData;
     svgCustomAnimationStart?: SvgData;
     svgCustomAnimationEnd?: SvgData;
@@ -20,6 +22,7 @@ export declare const fetchSvg: (svgId: string) => Promise<string>;
 export declare const openMediaManager: (category: string) => Promise<any>;
 type Data = {
     duration: number;
+    trigger: TriggerTypeEnum | null;
     svg: SvgData | null;
     svgLastAnimatedSelected: SvgData | null;
     svgLastStaticSelected: SvgData | null;
@@ -28,6 +31,6 @@ type Data = {
     svgCustomAnimationEnd: SvgData | null;
 };
 export declare const getData: () => Promise<Data>;
-export declare const setData: (data: any) => Promise<void>;
+export declare const setData: (data: Partial<Data>) => Promise<void>;
 export declare const generateAnimatedSvgInMediaManager: (startSvg: string, endSvg: string) => Promise<any>;
 export {};

package/dist/site/components/AnimatedIcon/types.d.ts

@@ -4,6 +4,7 @@ export type AnimatedSvgRef = {
     runAnimationBackward: () => void;
 };
 export type { VectorArt } from '@wix/editor-react-types';
+export type TriggerType = 'hover' | 'click';
 export interface AnimatedSvgProps {
     svgContent: string;
     reducedMotion?: boolean;
@@ -20,6 +21,7 @@ export interface AnimatedIconBuilderProps {
     className?: string;
     'data-testid'?: string;
     reducedMotion?: boolean;
+    trigger?: TriggerType;
 }
 export interface AnimatedSvgEditorProps {
     animatedSvgId: string;

package/dist/site/components/AnimatedIcon/useAnimatedIconInteraction.d.ts

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { AnimatedSvgRef, TriggerType } from './types';
+export declare function useAnimatedIconInteraction(trigger?: TriggerType, ref?: React.Ref<AnimatedSvgRef>): {
+    actualRef: ((instance: AnimatedSvgRef | null) => void) | React.RefObject<AnimatedSvgRef>;
+    isClickable: boolean;
+} | {
+    onClick: () => void;
+    onMouseEnter?: undefined;
+    onMouseLeave?: undefined;
+    actualRef: React.RefObject<AnimatedSvgRef>;
+    isClickable: boolean;
+} | {
+    onMouseEnter: () => void;
+    onMouseLeave: () => void;
+    onClick?: undefined;
+    actualRef: React.RefObject<AnimatedSvgRef>;
+    isClickable: boolean;
+};

package/dist/site/components/Button/Button.types.d.ts

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
 import { VectorArt, A11y, Direction } from '@wix/editor-react-types';
 import { AriaProps } from '../../../types/vendored/editor-elements-types-a11y';
+import { TriggerType } from '../AnimatedIcon/types';
 export interface ButtonLinkProps {
     href?: string;
     target?: '_blank' | '_self';
@@ -12,7 +13,8 @@ export interface ButtonLinkProps {
     anchorCompId?: string;
 }
 export declare enum IconAnimationTriggers {
-    HOVER = "hover"
+    HOVER = "hover",
+    CLICK = "click"
 }
 export type IStylableButtonCorvidStyleStateProps = {
     hasBackgroundColor?: boolean;
@@ -41,6 +43,7 @@ export type AnimatedSvgRef = {
 export interface AnimatedIconElementProps {
     svg?: VectorArt;
     duration?: number;
+    trigger?: TriggerType;
 }
 export interface ElementProps {
     animatedIcon?: AnimatedIconElementProps;

package/dist/site/components/Button/hooks/index.d.ts

@@ -1,4 +1,4 @@
 export { useIconAnimation } from './useIconAnimation';
-export { useHoverState } from './useHoverState';
+export { useButtonInteractionState } from './useButtonInteractionState';
 export { useButtonEventHandlers } from './useButtonEventHandlers';
 export { useButtonA11y } from './useButtonA11y';

package/dist/site/components/Button/hooks/useButtonEventHandlers.d.ts

@@ -8,11 +8,12 @@ type UseButtonEventHandlersParams = {
     reportBiOnClick?: React.MouseEventHandler;
     onMouseEnter: MouseEventHandler;
     onMouseLeave: MouseEventHandler;
+    onIconAnimationClick?: MouseEventHandler;
     onDblClick?: React.MouseEventHandler;
     onFocus?: (event: React.FocusEvent) => void;
     onBlur?: (event: React.FocusEvent) => void;
 };
-export declare function useButtonEventHandlers({ isDisabled, link, propsOnClick, preventLinkNavigation, reportBiOnClick, onMouseEnter, onMouseLeave, onDblClick, onFocus, onBlur, }: UseButtonEventHandlersParams): {
+export declare function useButtonEventHandlers({ isDisabled, link, propsOnClick, preventLinkNavigation, reportBiOnClick, onMouseEnter, onMouseLeave, onIconAnimationClick, onDblClick, onFocus, onBlur, }: UseButtonEventHandlersParams): {
     isLink: boolean;
     eventHandlers: {
         onClick: React.MouseEventHandler;

package/dist/site/components/Button/hooks/useButtonInteractionState.d.ts

@@ -0,0 +1,10 @@
+import { MouseEventHandler } from 'react';
+import { IconAnimationTriggers } from '../Button.types';
+interface UseButtonInteractionStateResult {
+    active: boolean;
+    onMouseEnter: MouseEventHandler;
+    onMouseLeave: MouseEventHandler;
+    onIconAnimationClick?: MouseEventHandler;
+}
+export declare function useButtonInteractionState(iconAnimationTriggers: Array<IconAnimationTriggers>, onAnimationForward: () => void, onAnimationBackward: () => void, propsOnMouseEnter?: MouseEventHandler, propsOnMouseLeave?: MouseEventHandler): UseButtonInteractionStateResult;
+export {};

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

@@ -352,7 +352,10 @@ const stylableButtonSDKFactory = withValidation(
         type: ["array"],
         items: {
           type: ["string"],
-          enum: [IconAnimationTriggers.HOVER]
+          enum: [
+            IconAnimationTriggers.HOVER,
+            IconAnimationTriggers.CLICK
+          ]
         },
         name: "iconAnimationTrigger"
       }

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

@@ -81,30 +81,32 @@ const animatedIcon = "animatedIcon__3o5ii";
 const styles = {
   animatedIcon
 };
-function useDefaultHoverBehavior(ref) {
+function useAnimatedIconInteraction(trigger = "hover", ref) {
   const internalRef = useRef(null);
-  const actualRef = ref || internalRef;
-  const handleMouseEnter = () => {
-    var _a;
-    if (typeof actualRef === "function") {
-      return;
+  const actualRef = ref ?? internalRef;
+  const isForwardRef = useRef(false);
+  const handleClick = useCallback(() => {
+    var _a, _b;
+    if (isForwardRef.current) {
+      (_a = actualRef.current) == null ? void 0 : _a.runAnimationBackward();
+    } else {
+      (_b = actualRef.current) == null ? void 0 : _b.runAnimationForward();
     }
-    (_a = actualRef == null ? void 0 : actualRef.current) == null ? void 0 : _a.runAnimationForward();
-  };
-  const handleMouseLeave = () => {
+    isForwardRef.current = !isForwardRef.current;
+  }, [actualRef]);
+  const handleMouseEnter = useCallback(() => {
     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
-    }
-  };
+    (_a = actualRef.current) == null ? void 0 : _a.runAnimationForward();
+  }, [actualRef]);
+  const handleMouseLeave = useCallback(() => {
+    var _a;
+    (_a = actualRef.current) == null ? void 0 : _a.runAnimationBackward();
+  }, [actualRef]);
+  if (typeof ref === "function" || ref && typeof ref === "object") {
+    return { actualRef: ref, isClickable: false };
+  }
+  const triggerProps = trigger === "click" ? { onClick: handleClick } : { onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave };
+  return { actualRef, isClickable: trigger === "click", ...triggerProps };
 }
 const AnimatedIcon = forwardRef(
   (props, ref) => {
@@ -114,38 +116,40 @@ const AnimatedIcon = forwardRef(
       className,
       id,
       "data-testid": dataTestId,
-      reducedMotion
+      reducedMotion,
+      trigger
     } = props;
     const svgContent = svg == null ? void 0 : svg.svgContent;
     const processedSvg = useMemo(
       () => addAttributesToStringSvg(svgContent || "", duration),
       [svgContent, duration]
     );
-    const { actualRef, ...mouseEventProps } = useDefaultHoverBehavior(ref);
+    const { actualRef, isClickable, ...eventProps } = useAnimatedIconInteraction(trigger, ref);
     if (svgContent) {
-      return /* @__PURE__ */ jsx(
-        "div",
+      const commonProps = {
+        className: cn(
+          styles.animatedIcon,
+          "animatedIcon",
+          "icon",
+          className
+        ),
+        id,
+        "data-testid": dataTestId,
+        ...eventProps
+      };
+      const animatedIcon2 = /* @__PURE__ */ jsx(
+        AnimatedSvg,
         {
-          className: cn(
-            styles.animatedIcon,
-            "animatedIcon",
-            "icon",
-            className
-          ),
-          id,
-          "data-testid": dataTestId,
-          ...mouseEventProps,
-          children: /* @__PURE__ */ jsx(
-            AnimatedSvg,
-            {
-              ref: actualRef,
-              svgContent: processedSvg,
-              reducedMotion,
-              duration
-            }
-          )
+          ref: actualRef,
+          svgContent: processedSvg,
+          reducedMotion,
+          duration
         }
       );
+      if (isClickable) {
+        return /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Animated icon", ...commonProps, children: animatedIcon2 });
+      }
+      return /* @__PURE__ */ jsx("div", { ...commonProps, children: animatedIcon2 });
     }
     return null;
   }

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

@@ -48,11 +48,21 @@ function useIconAnimation(isDisabled) {
   }, [isDisabled]);
   return { iconAnimatedRef, onAnimationForward, onAnimationBackward };
 }
-function useHoverState(iconAnimationTriggers, onAnimationForward, onAnimationBackward, propsOnMouseEnter, propsOnMouseLeave) {
+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) {
@@ -67,26 +77,42 @@ function useHoverState(iconAnimationTriggers, onAnimationForward, onAnimationBac
         animationTimeoutRef.current = null;
       }
       setActive(true);
-      if (iconAnimationTriggers.includes(IconAnimationTriggers.HOVER)) {
+      if (hasHoverTrigger) {
         onAnimationForward();
       }
       propsOnMouseEnter == null ? void 0 : propsOnMouseEnter(event);
     },
-    [iconAnimationTriggers, onAnimationForward, propsOnMouseEnter]
+    [hasHoverTrigger, onAnimationForward, propsOnMouseEnter]
   );
   const onMouseLeave = useCallback(
     (event) => {
       animationTimeoutRef.current = setTimeout(() => {
         setActive(false);
       }, TRANSITION_DURATION);
-      if (iconAnimationTriggers.includes(IconAnimationTriggers.HOVER)) {
+      if (hasHoverTrigger) {
         onAnimationBackward();
       }
       propsOnMouseLeave == null ? void 0 : propsOnMouseLeave(event);
     },
-    [iconAnimationTriggers, onAnimationBackward, propsOnMouseLeave]
+    [hasHoverTrigger, onAnimationBackward, propsOnMouseLeave]
   );
-  return { active: active2, onMouseEnter, onMouseLeave };
+  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,
@@ -108,6 +134,7 @@ function useButtonEventHandlers({
   reportBiOnClick,
   onMouseEnter,
   onMouseLeave,
+  onIconAnimationClick,
   onDblClick,
   onFocus,
   onBlur
@@ -117,9 +144,12 @@ function useButtonEventHandlers({
   const shouldHaveOnClick = !isDisabled && propsOnClick || shouldPreventLinkNavigation;
   const onClick = useAnalyticsReportClicks({
     reportBiOnClick,
-    onClick: shouldHaveOnClick ? (event) => {
-      shouldPreventLinkNavigation && event.preventDefault();
-      !isDisabled && (propsOnClick == null ? void 0 : propsOnClick());
+    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(
@@ -196,10 +226,12 @@ const Button = (props) => {
     wix
   } = props;
   const presetsWrapperProps = (wix == null ? void 0 : wix.presetsWrapperProps) || {};
-  const { iconAnimationTriggers = [IconAnimationTriggers.HOVER] } = corvid || {};
   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, onMouseLeave } = useHoverState(
+  const { active: active2, onMouseEnter, onMouseLeave, onIconAnimationClick } = useButtonInteractionState(
     iconAnimationTriggers,
     onAnimationForward,
     onAnimationBackward,
@@ -234,6 +266,7 @@ const Button = (props) => {
     reportBiOnClick,
     onMouseEnter,
     onMouseLeave,
+    onIconAnimationClick,
     onDblClick,
     onFocus,
     onBlur

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

@@ -1,5 +1,6 @@
 var IconAnimationTriggers = /* @__PURE__ */ ((IconAnimationTriggers2) => {
   IconAnimationTriggers2["HOVER"] = "hover";
+  IconAnimationTriggers2["CLICK"] = "click";
   return IconAnimationTriggers2;
 })(IconAnimationTriggers || {});
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2211.0",
+  "version": "1.2213.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -188,5 +188,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "4438c33ccf024b6c1f78aea0b993496c17457af84edba516269366b7"
+  "falconPackageHash": "8b09327c266bf7d5fb1bfdc564f3c00fd92b340332e7b8425098f3e7"
 }

package/dist/site/components/AnimatedIcon/useDefaultHoverBehavior.d.ts

@@ -1,7 +0,0 @@
-import { default as React } from 'react';
-import { AnimatedSvgRef } from './types';
-export declare function useDefaultHoverBehavior(ref?: React.Ref<AnimatedSvgRef>): {
-    onMouseEnter?: (() => void) | undefined;
-    onMouseLeave?: (() => void) | undefined;
-    actualRef: ((instance: AnimatedSvgRef | null) => void) | React.RefObject<AnimatedSvgRef>;
-};

package/dist/site/components/Button/hooks/useHoverState.d.ts

@@ -1,7 +0,0 @@
-import { MouseEventHandler } from 'react';
-import { IconAnimationTriggers } from '../Button.types';
-export declare function useHoverState(iconAnimationTriggers: Array<IconAnimationTriggers>, onAnimationForward: () => void, onAnimationBackward: () => void, propsOnMouseEnter?: MouseEventHandler, propsOnMouseLeave?: MouseEventHandler): {
-    active: boolean;
-    onMouseEnter: MouseEventHandler;
-    onMouseLeave: MouseEventHandler;
-};