@wix/editor-react-components 1.2552.0 → 1.2554.0

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

@@ -1,5 +1,5 @@
 import { b as DISPLAY_GROUPS, N as NativeStateType, C as CSS_PROPERTIES, D as DATA, a as ACTIONS, L as LAYOUT, A as Archetype } from "../chunks/chunk-IO6HLVLV.js";
-import { c as DesignStates, d as DisplayNames, D as DEFAULT_ANIMATION_DURATION } from "../chunks/constants19.js";
+import { c as DesignStates, d as DisplayNames, D as DEFAULT_ANIMATION_DURATION } from "../chunks/constants21.js";
 import { w as withSpec } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
 const displayConfig = {

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

@@ -1,5 +1,5 @@
 import { a as ACTIONS, E as ELEMENTS, N as NativeStateType, C as CSS_PROPERTIES, I as INTERACTIONS, D as DATA, L as LAYOUT, A as Archetype } from "../chunks/chunk-IO6HLVLV.js";
-import { D as DesignStates, b as DisplayNames, C as COMPONENT_TYPE } from "../chunks/constants21.js";
+import { D as DesignStates, b as DisplayNames, C as COMPONENT_TYPE } from "../chunks/constants20.js";
 import { m as manifestFocusable, c as manifestMouseHover, d as manifestClickable } from "../chunks/manifestSdkMixins.js";
 import { w as withSpec } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";

package/dist/site/components/Menu/constants.d.ts

@@ -88,6 +88,9 @@ export declare const DisplayNames: {
             animatedIcon: {
                 displayName: string;
             };
+            hamburgerAnimatedIcon: {
+                displayName: string;
+            };
         };
         presets: {
             horizontalScrollNavbar: string;
@@ -234,6 +237,10 @@ export declare const menuBuiltInActions: {
     readonly elements: typeof ACTIONS.ACTION_NAME.design;
 };
 export declare const MENU_ANIMATED_ICON_SPEC: "sp.erc.menuAnimatedIcon";
+export declare const customActionKeys: {
+    readonly animatedIcon: "animatedIcon";
+    readonly hamburgerAnimatedIcon: "hamburgerAnimatedIcon";
+};
 export declare const selectors: {
     menu: string;
     navbar: string;

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

@@ -1336,6 +1336,17 @@ const manifest = {
             custom: "animatedIcon"
           }
         }
+      },
+      hamburgerAnimatedIcon: {
+        displayName: DisplayNames.root.customActions.hamburgerAnimatedIcon.displayName,
+        execution: {
+          actionType: ACTIONS.ACTION_TYPE.forward,
+          forward: {
+            elementPath: `.self.${elementKeys.hamburgerOpenButton}.${elementKeys.animatedIcon}`,
+            actionName: ACTIONS.ACTION_NAME.custom,
+            custom: "animatedIcon"
+          }
+        }
       }
     },
     presets: {

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

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useState, useEffect, useCallback, useMemo, useRef, useLayoutEffect } from "react";
 import { c as clsx } from "../chunks/clsx.js";
-import { O as OVERFLOW_BEHAVIOR, c as classes } from "../chunks/constants20.js";
+import { O as OVERFLOW_BEHAVIOR, c as classes } from "../chunks/constants19.js";
 import { d as debounce } from "../chunks/performanceUtils.js";
 import { useService } from "@wix/services-manager-react";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";

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

@@ -1,5 +1,5 @@
 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-IO6HLVLV.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 { D as DesignStates, c as classes, R as ROOT_MENU_ITEM_CSS_PROPERTIES, a as ROOT_MENU_ITEM_CUSTOM_PROPERTIES } from "../chunks/constants19.js";
 import { w as withSpec } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
 import { m as manifestFocusable, c as manifestMouseHover, d as manifestClickable, a as manifestChangeable } from "../chunks/manifestSdkMixins.js";

package/dist/site/components/TestComp/TestComp.d.ts

@@ -1,7 +1,6 @@
 import { default as React } from 'react';
 import { MenuItemType } from '../Menu/Menu.types';
 import { A11y, Direction } from '@wix/editor-react-types';
-import { AnimatedIconBuilderProps } from '../AnimatedIcon/types';
 import { SdkFunctionClickableProps, SdkFunctionMouseHoverProps, SdkFunctionFocusableProps } from '../../../utils/functions/sdkFunctionCallbackProps';
 type TestCompProps = {
     id: string;
@@ -27,7 +26,6 @@ type TestCompProps = {
         errorText?: {
             text?: string;
         };
-        dummyAnimatedIcon?: AnimatedIconBuilderProps;
     };
     a11y?: A11y;
     isEnabled?: boolean;

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

@@ -2,7 +2,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { c as clsx } from "../chunks/clsx.js";
 import { f as formatClassNames } from "../chunks/classNames.js";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
-import AnimatedIconWithReducedMotion from "../AnimatedIcon/component.js";
 const semanticClassNames = {
   root: "test-comp-card"
 };
@@ -39,7 +38,7 @@ const styles = {
   functionBtn
 };
 const TestComp = (props) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g;
   const {
     id,
     className,
@@ -144,23 +143,13 @@ const TestComp = (props) => {
           }
         ),
         isError && /* @__PURE__ */ jsx("p", { className: "card-error-text", children: ((_e = elementProps.errorText) == null ? void 0 : _e.text) || "Something went wrong" }),
-        /* @__PURE__ */ jsx(
-          AnimatedIconWithReducedMotion,
-          {
-            ...elementProps.dummyAnimatedIcon,
-            className: clsx(
-              "dummy-animated-icon",
-              (_f = elementProps.dummyAnimatedIcon) == null ? void 0 : _f.className
-            )
-          }
-        ),
-        ((_g = elementProps.image) == null ? void 0 : _g.src) && /* @__PURE__ */ jsx(
+        ((_f = elementProps.image) == null ? void 0 : _f.src) && /* @__PURE__ */ jsx(
           "div",
           {
             className: clsx(
               styles.imageWrapper,
               "card-image",
-              (_h = elementProps.image) == null ? void 0 : _h.className
+              (_g = elementProps.image) == null ? void 0 : _g.className
             ),
             children: /* @__PURE__ */ jsx(
               "img",

package/dist/site/components/TestComp/css.css

@@ -205,28 +205,4 @@
 }
 .presetWrapper__J1yzj {
   display: contents;
-}
-.animatedIcon__3o5ii {
-  --size: 16px;
-  --fill: #000000;
-  --rotation: 0deg;
-}
-.animatedIcon__3o5ii {
-  display: block;
-  width: inherit;
-  height: inherit;
-  width: var(--size);
-  height: var(--size);
-}
-.animatedIcon__3o5ii svg {
-  width: var(--size);
-  height: var(--size);
-  display: block;
-  fill: var(--fill);
-  transform: rotate(var(--rotation));
-}
-@media (forced-colors: active) {
-  .animatedIcon__3o5ii svg {
-    fill: currentColor;
-  }
 }

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

@@ -1,4 +1,4 @@
-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-IO6HLVLV.js";
+import { L as LAYOUT, N as NativeStateType, D as DATA, E as ELEMENTS, b as DISPLAY_GROUPS, C as CSS_PROPERTIES, A as Archetype } from "../chunks/chunk-IO6HLVLV.js";
 import { m as manifestFocusable, c as manifestMouseHover, d as manifestClickable } from "../chunks/manifestSdkMixins.js";
 const DesignStates = {
   testCompCard: {
@@ -31,10 +31,7 @@ const manifest = {
   resources: {
     client: {
       componentUrl: "./site/components/TestComp/component.tsx",
-      moduleSpecifier: "@wix/editor-react-components/TestComp",
-      dependencies: {
-        componentDependencies: ["@wix/editor-react-components/AnimatedIcon"]
-      }
+      moduleSpecifier: "@wix/editor-react-components/TestComp"
     }
   },
   editorElement: {
@@ -546,15 +543,6 @@ const manifest = {
             color: {}
           }
         }
-      },
-      dummyAnimatedIcon: {
-        spec: "sp.erc.testCompAnimatedIcon",
-        elementType: ELEMENTS.ELEMENT_TYPE.refElement,
-        refElement: {
-          selector: ".dummy-animated-icon",
-          displayName: "Dummy Animated Icon",
-          type: "wixEditorElements.AnimatedIcon"
-        }
       }
     },
     states: {

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

@@ -1,7 +1,7 @@
 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 "./constants19.js";
+import { A as AnimatedSvgIds, a as AnimatedDataAttributes, b as AnimationDirection, T as TestIds, D as DEFAULT_ANIMATION_DURATION } from "./constants21.js";
 import { c as cn } from "./index9.js";
 const AnimatedSvg = forwardRef(
   ({ svgContent, reducedMotion = false, duration }, ref) => {

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

@@ -7,7 +7,7 @@ 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, C as COMPONENT_TYPE } from "./constants21.js";
+import { T as TRANSITION_DURATION, S as SEMANTIC_CLASS_NAMES, a as TestIds, C as COMPONENT_TYPE } from "./constants20.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";

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

@@ -1,61 +1,56 @@
-const DEFAULT_ANIMATION_DURATION = 0.2;
-const AnimatedSvgIds = {
-  animatedSvg: "animatedSvg",
-  animatedTagPath: "animatedPath",
-  animateTagForward: "animateForward",
-  animateTagBackward: "animateBackward"
+const classes = {
+  tabs: "tabs",
+  tabMenu: "tab-menu",
+  tabMenuItemsWrapper: "tab-menu-items-wrapper",
+  tabMenuItems: "tab-menu-items",
+  menuItem: "menu-item",
+  scrollButton: "scroll-button",
+  tabContentContainer: "tab-content-container",
+  tabContentItem: "tab-content-item"
 };
-var AnimationDirection = /* @__PURE__ */ ((AnimationDirection2) => {
-  AnimationDirection2["FORWARD"] = "Forward";
-  AnimationDirection2["BACKWARD"] = "Backward";
-  return AnimationDirection2;
-})(AnimationDirection || {});
-const AnimatedDataAttributes = {
-  [
-    "Forward"
-    /* FORWARD */
-  ]: "data-animated-end-path",
-  [
-    "Backward"
-    /* BACKWARD */
-  ]: "data-animated-start-path"
-};
-const TestIds = {
-  animatedSvg: "animated-svg",
-  animateTagForward: "animate-tag-forward",
-  animateTagBackward: "animate-tag-backward"
+const OVERFLOW_BEHAVIOR = {
+  WRAP: "wrap"
 };
 const DesignStates = {
-  root: {
-    hover: { displayName: "Hover", className: "animated-icon--hover" },
-    disabled: { displayName: "Disabled", className: "animated-icon--disabled" },
-    selected: { displayName: "Selected", className: "animated-icon--selected" }
-  }
-};
-const DisplayNames = {
-  root: {
-    elementDisplayName: "Animated Icon",
-    customActions: {
-      animatedIcon: {
-        displayName: "Icon"
-      }
-    },
-    data: {
-      duration: "Duration"
-    },
-    cssCustomProperties: {
-      size: "Size",
-      fill: "Color",
-      rotation: "Rotation"
-    }
+  menuItem: {
+    hover: { displayName: "Hover", className: "tabs__item--hover" }
   }
 };
+const ROOT_MENU_ITEM_CUSTOM_PROPERTIES = [
+  "menu-item-background",
+  "menu-item-box-shadow",
+  "menu-item-color",
+  "menu-item-text-decoration-line",
+  "menu-item-letter-spacing",
+  "menu-item-text-shadow",
+  "menu-item-text-align",
+  "menu-item-flex",
+  "menu-item-border-width-top",
+  "menu-item-border-width-bottom",
+  "menu-item-border-width-inline-start",
+  "menu-item-border-width-inline-end",
+  "menu-item-border-style-top",
+  "menu-item-border-style-bottom",
+  "menu-item-border-style-inline-start",
+  "menu-item-border-style-inline-end",
+  "menu-item-border-color-top",
+  "menu-item-border-color-bottom",
+  "menu-item-border-color-inline-start",
+  "menu-item-border-color-inline-end",
+  "menu-item-border-radius-start-start",
+  "menu-item-border-radius-start-end",
+  "menu-item-border-radius-end-start",
+  "menu-item-border-radius-end-end",
+  "menu-item-padding-top",
+  "menu-item-padding-bottom",
+  "menu-item-padding-inline-start",
+  "menu-item-padding-inline-end"
+];
+const ROOT_MENU_ITEM_CSS_PROPERTIES = ["font"];
 export {
-  AnimatedSvgIds as A,
-  DEFAULT_ANIMATION_DURATION as D,
-  TestIds as T,
-  AnimatedDataAttributes as a,
-  AnimationDirection as b,
-  DesignStates as c,
-  DisplayNames as d
+  DesignStates as D,
+  OVERFLOW_BEHAVIOR as O,
+  ROOT_MENU_ITEM_CSS_PROPERTIES as R,
+  ROOT_MENU_ITEM_CUSTOM_PROPERTIES as a,
+  classes as c
 };

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

@@ -1,56 +1,61 @@
-const classes = {
-  tabs: "tabs",
-  tabMenu: "tab-menu",
-  tabMenuItemsWrapper: "tab-menu-items-wrapper",
-  tabMenuItems: "tab-menu-items",
-  menuItem: "menu-item",
-  scrollButton: "scroll-button",
-  tabContentContainer: "tab-content-container",
-  tabContentItem: "tab-content-item"
+const COMPONENT_TYPE = "wixEditorElements.Button";
+const TestIds = {
+  buttonContent: "buttonContent",
+  buttonLabel: "stylablebutton-label"
 };
-const OVERFLOW_BEHAVIOR = {
-  WRAP: "wrap"
+const TRANSITION_DURATION = 400;
+const SEMANTIC_CLASS_NAMES = {
+  root: "button",
+  buttonLabel: "button__label"
 };
 const DesignStates = {
-  menuItem: {
-    hover: { displayName: "Hover", className: "tabs__item--hover" }
+  root: {
+    hover: { displayName: "Hover", className: "button--hover" },
+    disabled: { displayName: "Disabled", className: "button--disabled" }
+  },
+  label: {
+    hover: { displayName: "Hover", className: "button__label--hover" },
+    disabled: { displayName: "Disabled", className: "button__label--disabled" }
+  }
+};
+const DisplayNames = {
+  root: {
+    elementDisplayName: "Button",
+    data: {
+      disabled: "Disabled"
+    },
+    cssProperties: {
+      gap: "Space between text and icon"
+    },
+    cssCustomProperties: {
+      "content-horizontal-alignment": "Alignment",
+      "icon-position": "Icon position"
+    },
+    presets: {
+      baseButton: "Base Button"
+    },
+    iconPosition: {
+      beforeText: "Before text",
+      afterText: "After text",
+      belowText: "Below text",
+      aboveText: "Above text"
+    }
+  },
+  label: {
+    elementDisplayName: "Text",
+    cssProperties: {
+      font: "Typography"
+    }
+  },
+  data: {
+    iconCollapsed: "Display icon"
   }
 };
-const ROOT_MENU_ITEM_CUSTOM_PROPERTIES = [
-  "menu-item-background",
-  "menu-item-box-shadow",
-  "menu-item-color",
-  "menu-item-text-decoration-line",
-  "menu-item-letter-spacing",
-  "menu-item-text-shadow",
-  "menu-item-text-align",
-  "menu-item-flex",
-  "menu-item-border-width-top",
-  "menu-item-border-width-bottom",
-  "menu-item-border-width-inline-start",
-  "menu-item-border-width-inline-end",
-  "menu-item-border-style-top",
-  "menu-item-border-style-bottom",
-  "menu-item-border-style-inline-start",
-  "menu-item-border-style-inline-end",
-  "menu-item-border-color-top",
-  "menu-item-border-color-bottom",
-  "menu-item-border-color-inline-start",
-  "menu-item-border-color-inline-end",
-  "menu-item-border-radius-start-start",
-  "menu-item-border-radius-start-end",
-  "menu-item-border-radius-end-start",
-  "menu-item-border-radius-end-end",
-  "menu-item-padding-top",
-  "menu-item-padding-bottom",
-  "menu-item-padding-inline-start",
-  "menu-item-padding-inline-end"
-];
-const ROOT_MENU_ITEM_CSS_PROPERTIES = ["font"];
 export {
+  COMPONENT_TYPE as C,
   DesignStates as D,
-  OVERFLOW_BEHAVIOR as O,
-  ROOT_MENU_ITEM_CSS_PROPERTIES as R,
-  ROOT_MENU_ITEM_CUSTOM_PROPERTIES as a,
-  classes as c
+  SEMANTIC_CLASS_NAMES as S,
+  TRANSITION_DURATION as T,
+  TestIds as a,
+  DisplayNames as b
 };

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

@@ -1,61 +1,61 @@
-const COMPONENT_TYPE = "wixEditorElements.Button";
-const TestIds = {
-  buttonContent: "buttonContent",
-  buttonLabel: "stylablebutton-label"
+const DEFAULT_ANIMATION_DURATION = 0.2;
+const AnimatedSvgIds = {
+  animatedSvg: "animatedSvg",
+  animatedTagPath: "animatedPath",
+  animateTagForward: "animateForward",
+  animateTagBackward: "animateBackward"
+};
+var AnimationDirection = /* @__PURE__ */ ((AnimationDirection2) => {
+  AnimationDirection2["FORWARD"] = "Forward";
+  AnimationDirection2["BACKWARD"] = "Backward";
+  return AnimationDirection2;
+})(AnimationDirection || {});
+const AnimatedDataAttributes = {
+  [
+    "Forward"
+    /* FORWARD */
+  ]: "data-animated-end-path",
+  [
+    "Backward"
+    /* BACKWARD */
+  ]: "data-animated-start-path"
 };
-const TRANSITION_DURATION = 400;
-const SEMANTIC_CLASS_NAMES = {
-  root: "button",
-  buttonLabel: "button__label"
+const TestIds = {
+  animatedSvg: "animated-svg",
+  animateTagForward: "animate-tag-forward",
+  animateTagBackward: "animate-tag-backward"
 };
 const DesignStates = {
   root: {
-    hover: { displayName: "Hover", className: "button--hover" },
-    disabled: { displayName: "Disabled", className: "button--disabled" }
-  },
-  label: {
-    hover: { displayName: "Hover", className: "button__label--hover" },
-    disabled: { displayName: "Disabled", className: "button__label--disabled" }
+    hover: { displayName: "Hover", className: "animated-icon--hover" },
+    disabled: { displayName: "Disabled", className: "animated-icon--disabled" },
+    selected: { displayName: "Selected", className: "animated-icon--selected" }
   }
 };
 const DisplayNames = {
   root: {
-    elementDisplayName: "Button",
-    data: {
-      disabled: "Disabled"
+    elementDisplayName: "Animated Icon",
+    customActions: {
+      animatedIcon: {
+        displayName: "Icon"
+      }
     },
-    cssProperties: {
-      gap: "Space between text and icon"
+    data: {
+      duration: "Duration"
     },
     cssCustomProperties: {
-      "content-horizontal-alignment": "Alignment",
-      "icon-position": "Icon position"
-    },
-    presets: {
-      baseButton: "Base Button"
-    },
-    iconPosition: {
-      beforeText: "Before text",
-      afterText: "After text",
-      belowText: "Below text",
-      aboveText: "Above text"
-    }
-  },
-  label: {
-    elementDisplayName: "Text",
-    cssProperties: {
-      font: "Typography"
+      size: "Size",
+      fill: "Color",
+      rotation: "Rotation"
     }
-  },
-  data: {
-    iconCollapsed: "Display icon"
   }
 };
 export {
-  COMPONENT_TYPE as C,
-  DesignStates as D,
-  SEMANTIC_CLASS_NAMES as S,
-  TRANSITION_DURATION as T,
-  TestIds as a,
-  DisplayNames as b
+  AnimatedSvgIds as A,
+  DEFAULT_ANIMATION_DURATION as D,
+  TestIds as T,
+  AnimatedDataAttributes as a,
+  AnimationDirection as b,
+  DesignStates as c,
+  DisplayNames as d
 };

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

@@ -167,6 +167,9 @@ const DisplayNames = {
       },
       animatedIcon: {
         displayName: "Customize Icon"
+      },
+      hamburgerAnimatedIcon: {
+        displayName: "Customize Menu Icon"
       }
     },
     presets: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2552.0",
+  "version": "1.2554.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -199,5 +199,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "6e3af4dd243bbcdda0c59e7f9834044167bf63a8333f4a99b1b05761"
+  "falconPackageHash": "2af7f2f83c58579501655ff433c12481f07767e2d31d48d35e09f638"
 }