@wix/editor-react-components 1.2346.0 → 1.2347.0

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

@@ -12,7 +12,7 @@ export interface AnimatedSvgProps {
 }
 export interface AnimatedIconBuilderProps {
     /** DOM `id` on the root element. */
-    id?: string;
+    id: string;
     /** Hover animation length in seconds. Rewritten into every `<animate>` tag's `dur` attribute on render. Default `0.2`. */
     duration?: number;
     /** The active SVG (start ↔ end morph). At runtime only `svgContent` is read; the other `VectorArt` fields are passed through. */

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

@@ -2,9 +2,8 @@ import { default as React, PropsWithChildren } from 'react';
 import { MenuOrientationType, MenuAnimationNameType, DropdownAnimationNameType, Translations } from './constants';
 import { MenuItemProps as MenuItemData, ActiveAnchor } from '../../../types/vendored/editor-elements-definitions';
 import { IMenuItemSDKAction, IMenuItemsPropsSDKActions } from '../../../common/sdk/props-factories/menuItemsPropsSDKFactory';
-import { A11y, Direction, VectorArt } from '@wix/editor-react-types';
+import { A11y, Direction } from '@wix/editor-react-types';
 import { ButtonProps } from '../Button/Button';
-import { AnimatedSvgRef } from '../AnimatedIcon/types';
 import { SdkFunctionMouseHoverProps } from '../../../utils/functions/sdkFunctionCallbackProps';
 import { AnimationState } from './components/MenuContent/MenuItem/useAnimationState';
 export type MenuItemType = MenuItemData & {
@@ -12,34 +11,6 @@ export type MenuItemType = MenuItemData & {
     isContainerItem?: boolean;
     forceOpen?: boolean;
 };
-export type BuilderAnimationIconProps = {
-    className?: string;
-    'data-testid'?: string;
-};
-export type BuilderAnimationIconComponent = React.ForwardRefExoticComponent<BuilderAnimationIconProps & React.RefAttributes<AnimatedSvgRef>>;
-export interface AnimatedIconElementProps {
-    svg?: VectorArt;
-    duration?: number;
-    svgLastAnimatedSelected?: VectorArt;
-}
-type NavbarElementProps = {
-    item?: {
-        className?: string;
-        elementProps?: {
-            animatedIcon?: AnimatedIconElementProps;
-        };
-    };
-    dropdown?: {
-        elementProps?: {
-            item?: {
-                className?: string;
-            };
-            subItem?: {
-                className?: string;
-            };
-        };
-    };
-};
 export type HamburgerMenuProps = {
     isOpen?: boolean;
     content?: React.ReactNode;
@@ -70,7 +41,6 @@ export type MenuProps = SdkFunctionMouseHoverProps & {
             direction?: Direction;
             submenuDirection?: Direction;
             a11y?: A11y;
-            elementProps?: NavbarElementProps;
         };
         hamburgerMenu?: HamburgerMenuProps;
         hamburgerOpenButton?: ButtonProps;
@@ -141,7 +111,6 @@ export type IMenuContentProps = Partial<IMenuItemsPropsSDKActions> & {
     direction?: Direction;
     submenuDirection?: Direction;
     submenuToggleIdPrefix?: string;
-    BuilderAnimationIcon?: BuilderAnimationIconComponent;
 };
 export type IMenuItemProps = Partial<IMenuItemsPropsSDKActions> & {
     item: PropsWithChildren<MenuItemData & {
@@ -154,7 +123,6 @@ export type IMenuItemProps = Partial<IMenuItemsPropsSDKActions> & {
     getAnimationPackage: () => MenuAnimationNameType;
     submenuDirection?: Direction;
     submenuToggleIdPrefix?: string;
-    BuilderAnimationIcon?: BuilderAnimationIconComponent;
 } & Translations;
 export type ScrollControlsProps = {
     isScrollForwardButtonShown: boolean;

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

@@ -5,7 +5,7 @@ import { U as UrlDefinition } from "../chunks/index11.js";
 import { d as defineService } from "../chunks/index7.js";
 import { T as TranslationsDefinition } from "../chunks/index5.js";
 import { M as MenuAnimationName, d as defaultTranslations, a as MenuOrientation, A as AnimationPhase, V as VerticalDropdownDisplay, D as DropdownAnimationName, H as HamburgerMenuAnimationName, b as MenuParts, s as selectors, u as useAnimationState, c as ARIA_LABEL_NAMESPACE, t as translationsKeys } from "../chunks/constants26.js";
-import React__default, { createContext, useContext, useRef, useCallback, useMemo, useState, useEffect, useLayoutEffect, forwardRef } from "react";
+import React__default, { createContext, useContext, useRef, useCallback, useMemo, useState, useEffect, useLayoutEffect } from "react";
 import { p as presetWrapperStyles } from "../chunks/presetWrapper.module.js";
 import { g as getItemDepthSelector, r as rootItemDepthLevel, s as subItemDepthLevel, a as subSubItemDepthLevel } from "../chunks/utils2.js";
 import { d as debounce } from "../chunks/performanceUtils.js";
@@ -15,7 +15,6 @@ import { i as isEmptyObject, a as getDataAttributes } from "../chunks/dataUtils.
 import { u as useResizeObserver } from "../chunks/useResizeObserver.js";
 import { d as directionStyles } from "../chunks/direction.module.js";
 import { E as EnvironmentDefinition } from "../chunks/index2.js";
-import AnimatedIconWithReducedMotion from "../AnimatedIcon/component.js";
 import { B as Button } from "../chunks/Button.js";
 import { f as convertA11yKeysToHtmlFormat } from "../chunks/a11y.js";
 const AnchorsDefinition = defineService("@wix/viewer-service-anchors");
@@ -380,7 +379,6 @@ const itemWrapper = "itemWrapper__sn71X";
 const labelContainer = "labelContainer__E4y-p";
 const label = "label__BBchK";
 const dropdownToggleButton = "dropdownToggleButton__nisoC";
-const labelWrapper = "labelWrapper__u5Jgh";
 const horizontalDropdown = "horizontalDropdown__TETsA";
 const coverAllSpace = "coverAllSpace__Iwj6W";
 const srOnly = "srOnly__AGv2l";
@@ -400,7 +398,6 @@ const classes$6 = {
   labelContainer,
   label,
   dropdownToggleButton,
-  labelWrapper,
   horizontalDropdown,
   coverAllSpace,
   srOnly,
@@ -769,103 +766,6 @@ const MenuItemDropdownIcon = ({
     button
   ] }) : button;
 };
-const SELECTION_ANIMATION_SETTLE_DELAY_MS = 0;
-const useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
-function useIconAnimation({
-  BuilderAnimationIcon,
-  isCurrentPage,
-  isOpen,
-  onMouseEnter,
-  onMouseLeave
-}) {
-  const iconAnimatedRef = useRef(null);
-  const isAnimatedForwardRef = useRef(null);
-  const prevIsImmediateRef = useRef(null);
-  const prevIsSelectedRef = useRef(null);
-  const pendingTimeoutRef = useRef(null);
-  const [isHovered, setIsHovered] = useState(false);
-  const onMouseEnterRef = useRef(onMouseEnter);
-  onMouseEnterRef.current = onMouseEnter;
-  const onMouseLeaveRef = useRef(onMouseLeave);
-  onMouseLeaveRef.current = onMouseLeave;
-  const cancelPending = useCallback(() => {
-    if (pendingTimeoutRef.current !== null) {
-      clearTimeout(pendingTimeoutRef.current);
-      pendingTimeoutRef.current = null;
-    }
-  }, []);
-  useIsomorphicLayoutEffect(() => {
-    var _a;
-    if (!BuilderAnimationIcon) {
-      cancelPending();
-      isAnimatedForwardRef.current = null;
-      prevIsImmediateRef.current = null;
-      prevIsSelectedRef.current = null;
-      return cancelPending;
-    }
-    const applyAnimation = (forward) => {
-      var _a2, _b;
-      isAnimatedForwardRef.current = forward;
-      if (forward) {
-        (_a2 = iconAnimatedRef.current) == null ? void 0 : _a2.runAnimationForward();
-      } else {
-        (_b = iconAnimatedRef.current) == null ? void 0 : _b.runAnimationBackward();
-      }
-    };
-    const isImmediate = isHovered || isOpen;
-    const isSelected = isCurrentPage;
-    const shouldBeForward = isImmediate || isSelected;
-    if (isAnimatedForwardRef.current === null) {
-      isAnimatedForwardRef.current = shouldBeForward;
-      prevIsImmediateRef.current = isImmediate;
-      prevIsSelectedRef.current = isSelected;
-      if (shouldBeForward) {
-        (_a = iconAnimatedRef.current) == null ? void 0 : _a.runAnimationForward();
-      }
-      return cancelPending;
-    }
-    if (prevIsImmediateRef.current !== isImmediate) {
-      prevIsImmediateRef.current = isImmediate;
-      cancelPending();
-      if (isAnimatedForwardRef.current !== shouldBeForward) {
-        applyAnimation(shouldBeForward);
-      }
-      return cancelPending;
-    }
-    if (prevIsSelectedRef.current === isSelected) {
-      cancelPending();
-      return cancelPending;
-    }
-    prevIsSelectedRef.current = isSelected;
-    if (isImmediate || isAnimatedForwardRef.current === shouldBeForward) {
-      cancelPending();
-      return cancelPending;
-    }
-    cancelPending();
-    pendingTimeoutRef.current = setTimeout(() => {
-      pendingTimeoutRef.current = null;
-      applyAnimation(isSelected);
-    }, SELECTION_ANIMATION_SETTLE_DELAY_MS);
-    return cancelPending;
-  }, [BuilderAnimationIcon, cancelPending, isCurrentPage, isHovered, isOpen]);
-  const handleMouseEnter = useCallback(
-    (event) => {
-      var _a;
-      setIsHovered(true);
-      (_a = onMouseEnterRef.current) == null ? void 0 : _a.call(onMouseEnterRef, event);
-    },
-    []
-  );
-  const handleMouseLeave = useCallback(
-    (event) => {
-      var _a;
-      setIsHovered(false);
-      (_a = onMouseLeaveRef.current) == null ? void 0 : _a.call(onMouseLeaveRef, event);
-    },
-    []
-  );
-  return { iconAnimatedRef, handleMouseEnter, handleMouseLeave };
-}
 const MenuItemLabel = (props) => {
   const {
     item: item2,
@@ -883,8 +783,7 @@ const MenuItemLabel = (props) => {
     toggleDropdown,
     isOpen,
     dropdownAnimationState,
-    submenuToggleId,
-    BuilderAnimationIcon
+    submenuToggleId
   } = props;
   const itemLabelClassNames = clsx(
     classes$6.label,
@@ -903,15 +802,6 @@ const MenuItemLabel = (props) => {
   );
   const isInteractive = (hasSubItems || hasLink) && !isCurrentPage;
   const isDropdownIconOpen = isOpen && dropdownAnimationState.phase !== AnimationPhase.ExitActive;
-  const mouseEnterAction = createSDKAction(item2, isCurrentPage, onItemMouseIn);
-  const mouseLeaveAction = createSDKAction(item2, isCurrentPage, onItemMouseOut);
-  const { iconAnimatedRef, handleMouseEnter, handleMouseLeave } = useIconAnimation({
-    BuilderAnimationIcon,
-    isCurrentPage,
-    isOpen,
-    onMouseEnter: mouseEnterAction,
-    onMouseLeave: mouseLeaveAction
-  });
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -921,8 +811,8 @@ const MenuItemLabel = (props) => {
       "data-preview": partToPreviewStateMap == null ? void 0 : partToPreviewStateMap.item,
       "data-interactive": isInteractive,
       onClick: createSDKAction(item2, isCurrentPage, onItemClick),
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
+      onMouseEnter: createSDKAction(item2, isCurrentPage, onItemMouseIn),
+      onMouseLeave: createSDKAction(item2, isCurrentPage, onItemMouseOut),
       onDoubleClick: createSDKAction(item2, isCurrentPage, onItemDblClick),
       children: [
         /* @__PURE__ */ jsx(
@@ -935,16 +825,7 @@ const MenuItemLabel = (props) => {
             ...isCurrentPage && {
               "aria-current": "page"
             },
-            children: /* @__PURE__ */ jsxs("span", { className: classes$6.labelWrapper, children: [
-              BuilderAnimationIcon && /* @__PURE__ */ jsx(
-                BuilderAnimationIcon,
-                {
-                  ref: iconAnimatedRef,
-                  "data-testid": "menu-builder-animation-icon"
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: itemLabelClassNames, "data-part": MenuParts.Label, children: label2 })
-            ] })
+            children: /* @__PURE__ */ jsx("div", { className: itemLabelClassNames, "data-part": MenuParts.Label, children: label2 })
           }
         ),
         hasDropdownMenu && ["default", "srOnly"].map((variant) => {
@@ -1928,8 +1809,7 @@ const MenuContent = (props) => {
     onItemMouseOut,
     onItemClick,
     onItemDblClick,
-    submenuToggleIdPrefix,
-    BuilderAnimationIcon
+    submenuToggleIdPrefix
   } = props;
   const {
     items,
@@ -2033,8 +1913,7 @@ const MenuContent = (props) => {
             onItemDblClick,
             getAnimationPackage,
             submenuDirection,
-            submenuToggleIdPrefix,
-            BuilderAnimationIcon
+            submenuToggleIdPrefix
           },
           item2.id
         )) }),
@@ -2053,18 +1932,14 @@ const MenuContent = (props) => {
   ) });
 };
 const navbar$1 = "navbar__H6ySL";
-const itemIcon = "itemIcon__zQPE-";
 const rtl = "rtl__7sC1t";
 const ltr = "ltr__r9AkY";
 const classes$1 = {
   navbar: navbar$1,
-  itemIcon,
   rtl,
   ltr
 };
-const DEFAULT_ANIMATED_ICON_DURATION = 0.2;
 const NavbarMenu = (props) => {
-  var _a;
   const { getLanguageDirection } = useService(
     EnvironmentDefinition
   );
@@ -2073,38 +1948,12 @@ const NavbarMenu = (props) => {
     id,
     className,
     submenuDirection,
-    elementProps,
     direction = siteDirection,
     onItemClick,
     onItemDblClick,
     onItemMouseIn,
     onItemMouseOut
   } = props;
-  const { item: item2 } = elementProps ?? {};
-  const animatedIconProps = (_a = item2 == null ? void 0 : item2.elementProps) == null ? void 0 : _a.animatedIcon;
-  const animatedIconPropsRef = useRef(animatedIconProps);
-  animatedIconPropsRef.current = animatedIconProps;
-  const BuilderAnimationIcon = useMemo(() => {
-    const AnimatedIconWithProps = forwardRef(({ className: iconClassName, ...iconProps }, ref) => {
-      var _a2, _b;
-      return /* @__PURE__ */ jsx(
-        AnimatedIconWithReducedMotion,
-        {
-          ...iconProps,
-          duration: ((_a2 = animatedIconPropsRef.current) == null ? void 0 : _a2.duration) ?? DEFAULT_ANIMATED_ICON_DURATION,
-          svg: (_b = animatedIconPropsRef.current) == null ? void 0 : _b.svg,
-          className: clsx(
-            selectors.animatedIcon,
-            classes$1.itemIcon,
-            iconClassName
-          ),
-          ref
-        }
-      );
-    });
-    AnimatedIconWithProps.displayName = "NavbarAnimatedIcon";
-    return AnimatedIconWithProps;
-  }, []);
   return /* @__PURE__ */ jsx(
     MenuContent,
     {
@@ -2119,7 +1968,6 @@ const NavbarMenu = (props) => {
       direction,
       submenuDirection,
       onItemClick,
-      BuilderAnimationIcon: (animatedIconProps == null ? void 0 : animatedIconProps.svg) ? BuilderAnimationIcon : void 0,
       onItemDblClick,
       onItemMouseIn,
       onItemMouseOut

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

@@ -1,4 +1,3 @@
-import { ACTIONS } from '@wix/component-protocol/schema';
 export declare const MenuOrientation: {
     readonly Horizontal: "horizontal";
     readonly Vertical: "vertical";
@@ -132,10 +131,7 @@ export declare const DisplayNames: {
             justifyContent: string;
             background: string;
             columnGap: string;
-        };
-        cssCustomProperties: {
             'item-icon-size': string;
-            'item-icon-gap': string;
         };
         displayGroups: {
             iconGroup: string;
@@ -145,12 +141,6 @@ export declare const DisplayNames: {
             selected: string;
         };
     };
-    itemLabel: {
-        elementDisplayName: string;
-    };
-    itemIcon: {
-        elementDisplayName: string;
-    };
     dropdown: {
         elementDisplayName: string;
         cssCustomProperties: {
@@ -226,10 +216,6 @@ export declare const DisplayNames: {
         elementDisplayName: string;
     };
 };
-export declare const menuBuiltInActions: {
-    readonly elements: typeof ACTIONS.ACTION_NAME.design;
-};
-export declare const MENU_ANIMATED_ICON_SPEC: "sp.erc.menuAnimatedIcon";
 export declare const selectors: {
     menu: string;
     navbar: string;
@@ -238,8 +224,6 @@ export declare const selectors: {
     dropdownItem: string;
     dropdownSubItem: string;
     scrollButton: string;
-    animatedIcon: string;
-    itemLabel: string;
     hamburgerMenu: string;
     hamburgerMenuContent: string;
     hamburgerMenuHeaderContent: string;
@@ -255,8 +239,6 @@ export declare const elementKeys: {
     subItem: string;
     scrollButton: string;
     dropdown: string;
-    animatedIcon: string;
-    itemLabel: string;
 };
 export declare const presets: {
     horizontalScrollNavbar: string;

package/dist/site/components/Menu/css.css

@@ -73,7 +73,7 @@
   line-height: var(--item-line-height);
 }
 [data-open]:not([data-animation-state=exitActive]):not([data-animation-state=exitDone]) > .itemWrapper__sn71X > .labelContainer__E4y-p path, .labelContainer__E4y-p[data-interactive=true]:hover path, .labelContainer__E4y-p[data-preview=hover] path, .labelContainer__E4y-p.hover__tD6A4 path, .labelContainer__E4y-p.menu__item--hover path {
-  fill: var(--fill, var(--item-hover-icon-color, var(--item-icon-color, currentcolor)));
+  fill: var(--item-hover-icon-color, var(--item-icon-color, currentcolor));
 }
 .labelContainer__E4y-p[data-selected], .labelContainer__E4y-p[data-preview=selected], .labelContainer__E4y-p.selected__qC-k6, .labelContainer__E4y-p.menu__item--selected {
   background: var(--item-selected-background, var(--item-background));
@@ -89,7 +89,7 @@
   line-height: var(--item-line-height);
 }
 .labelContainer__E4y-p[data-selected] path, .labelContainer__E4y-p[data-preview=selected] path, .labelContainer__E4y-p.selected__qC-k6 path, .labelContainer__E4y-p.menu__item--selected path {
-  fill: var(--fill, var(--item-selected-icon-color, var(--item-icon-color, currentcolor)));
+  fill: var(--item-selected-icon-color, var(--item-icon-color, currentcolor));
 }
 .labelContainer__E4y-p > a::before {
   content: "";
@@ -131,13 +131,6 @@
   }
 }
 
-.labelWrapper__u5Jgh {
-  display: flex;
-  align-items: center;
-  min-width: 0;
-  gap: var(--item-icon-gap, 0);
-}
-
 @media (forced-colors: active) {
   .dropdownToggleButton__nisoC,
   .dropdownToggleButton__nisoC svg,
@@ -825,12 +818,6 @@
   --sr-only-item-icon-display: none;
 }
 
-.itemIcon__zQPE- {
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-
 .rtl__7sC1t {
   --scroll-button-transform: scaleX(-1);
 }
@@ -952,25 +939,6 @@
 .fallbackDirection__HeRgn:not([dir]) {
   direction: var(--wix-opt-in-direction);
 }
-.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));
-}
 .rootDirection__PPhdq {
   direction: var(--btn-direction);
 }
@@ -1095,4 +1063,23 @@
 
 .button__i8gkO {
   min-width: min-content !important;
+}
+.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));
 }

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

@@ -1,5 +1,5 @@
 import { E as ELEMENTS, C as CSS_PROPERTIES, b as DISPLAY_GROUPS, N as NativeStateType, a as ACTIONS, D as DATA, L as LAYOUT, I as INTERACTIONS, A as Archetype } from "../chunks/chunk-JPMZBG44.js";
-import { e as DesignStates, f as DisplayNames, s as selectors, g as DropdownAnchorPositions, h as DropdownAppliedStyleProperties, i as elementKeys, j as MENU_ANIMATED_ICON_SPEC, k as states, p as presets, m as menuBuiltInActions } from "../chunks/constants26.js";
+import { e as DesignStates, f as DisplayNames, s as selectors, g as DropdownAnchorPositions, h as DropdownAppliedStyleProperties, i as elementKeys, j as states, p as presets } from "../chunks/constants26.js";
 import { w as withSpec } from "../chunks/manifest.js";
 import { I as IS_SUPPORT_DESIGN_STATE_SPEC } from "../chunks/specs.js";
 import { c as manifestMouseHover } from "../chunks/manifestSdkMixins.js";
@@ -509,53 +509,6 @@ const scrollButtonConfig = {
     }
   }
 };
-const animatedIconConfig = {
-  spec: MENU_ANIMATED_ICON_SPEC,
-  elementType: ELEMENTS.ELEMENT_TYPE.refElement,
-  [ELEMENTS.ELEMENT_TYPE.refElement]: {
-    displayName: DisplayNames.itemIcon.elementDisplayName,
-    selector: `.${selectors.animatedIcon}`,
-    type: "wixEditorElements.AnimatedIcon",
-    behaviors: {
-      selectable: false,
-      removable: true
-    },
-    cssProperties: {
-      display: {
-        defaultValue: CSS_PROPERTIES.DISPLAY_VALUE.none
-      }
-    }
-  }
-};
-const itemLabelDisplayConfig = {
-  displayValues: [
-    CSS_PROPERTIES.DISPLAY_VALUE.none,
-    CSS_PROPERTIES.DISPLAY_VALUE.flex
-  ]
-};
-const itemLabelConfig = {
-  elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
-  [ELEMENTS.ELEMENT_TYPE.inlineElement]: {
-    selector: `.${selectors.itemLabel}`,
-    displayName: DisplayNames.itemLabel.elementDisplayName,
-    behaviors: {
-      selectable: false,
-      removable: true
-    },
-    cssProperties: {
-      display: {
-        display: itemLabelDisplayConfig
-      },
-      font: { defaultValue: "14px sans-serif" },
-      color: { defaultValue: "rgba(0, 0, 0, 1)" },
-      textDecorationLine: { defaultValue: "none" },
-      textTransform: { defaultValue: "none" },
-      letterSpacing: { defaultValue: "normal" },
-      textShadow: { defaultValue: "none" },
-      textAlign: { defaultValue: "center" }
-    }
-  }
-};
 const itemConfig = {
   elementType: ELEMENTS.ELEMENT_TYPE.inlineElement,
   [ELEMENTS.ELEMENT_TYPE.inlineElement]: {
@@ -616,21 +569,14 @@ const itemConfig = {
       }
     },
     cssCustomProperties: {
+      // Icon
       "item-icon-size": {
-        displayName: DisplayNames.item.cssCustomProperties["item-icon-size"],
+        displayName: DisplayNames.item.cssProperties["item-icon-size"],
         cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.length
       },
       "item-icon-color": {
         cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.color
-      },
-      "item-icon-gap": {
-        displayName: DisplayNames.item.cssCustomProperties["item-icon-gap"],
-        cssPropertyType: CSS_PROPERTIES.CSS_PROPERTY_TYPE.columnGap
       }
-    },
-    elements: {
-      [elementKeys.itemLabel]: itemLabelConfig,
-      [elementKeys.animatedIcon]: animatedIconConfig
     }
   }
 };
@@ -1271,15 +1217,6 @@ const manifest = {
           }
         }
       },
-      elements: {
-        execution: {
-          actionType: ACTIONS.ACTION_TYPE.forward,
-          forward: {
-            elementPath: `.self.${elementKeys.navbar}.${elementKeys.item}`,
-            actionName: menuBuiltInActions.elements
-          }
-        }
-      },
       design: {
         displayName: DisplayNames.root.actions.design
       },
@@ -1303,7 +1240,7 @@ const manifest = {
         execution: {
           actionType: ACTIONS.ACTION_TYPE.forward,
           forward: {
-            elementPath: `.self.${elementKeys.navbar}.${elementKeys.item}.${elementKeys.animatedIcon}`,
+            elementPath: `.self.${elementKeys.hamburgerOpenButton}.animatedIcon`,
             actionName: ACTIONS.ACTION_NAME.custom,
             custom: "animatedIcon"
           }
@@ -1442,7 +1379,6 @@ const manifest = {
         "@wix/viewer-service-url"
       ],
       dependencies: {
-        componentDependencies: ["@wix/editor-react-components/AnimatedIcon"],
         serviceDependencies: [
           "@wix/viewer-service-anchors",
           "@wix/viewer-service-environment",

package/dist/site/components/Menu/manifestConfigs/itemConfig.d.ts

@@ -1,5 +1,2 @@
-import { ElementItem, CssPropertyItem } from '@wix/component-protocol/schema';
-export declare const itemLabelDisplayConfig: CssPropertyItem["display"];
-export declare const HIDDEN_ITEM_TEXT_CSS_PROPERTIES: readonly ["font", "color", "textDecorationLine", "textTransform", "letterSpacing", "textShadow"];
-export declare const itemLabelConfig: ElementItem;
+import { ElementItem } from '@wix/component-protocol/schema';
 export declare const itemConfig: ElementItem;

package/dist/site/components/Menu/manifestConfigs/overrides/horizontalHugNavbarConfig.d.ts

@@ -8,8 +8,6 @@ type HorizontalHugNavbarProps = {
     isDropdownAnchorScreen: boolean;
     isDropdownAnchorMenuItem: boolean;
     dropdownColumnsNumber: string;
-    hideItemIconGap: boolean;
-    isIconHidden: boolean;
 };
 export declare const getHorizontalHugNavbarManifestOverrides: (props: HorizontalHugNavbarProps) => Partial<EditorElement>;
 export {};

package/dist/site/components/Menu/manifestConfigs/overrides/horizontalScrollNavbarConfig.d.ts

@@ -9,8 +9,6 @@ type HorizontalScrollNavbarProps = {
     isDropdownAnchorScreen: boolean;
     isDropdownAnchorMenuItem: boolean;
     dropdownColumnsNumber: string;
-    hideItemIconGap: boolean;
-    isIconHidden: boolean;
 };
 export declare const getHorizontalScrollNavbarManifestOverrides: (props: HorizontalScrollNavbarProps) => Partial<EditorElement>;
 export {};

package/dist/site/components/Menu/manifestConfigs/overrides/verticalNavbarConfig.d.ts

@@ -7,8 +7,6 @@ export type VerticalNavbarProps = {
     isDropdownItemFitToText: boolean;
     dropdownColumnsNumber: string;
     isVerticalDropdownAlwaysOpen: boolean;
-    hideItemIconGap: boolean;
-    isIconHidden: boolean;
 };
-export declare const getVerticalNavbarElementManifestOverrides: ({ hasDropdownItems, hasDropdownContent, hasDropdownSubItems, isItemFitToText, isDropdownItemFitToText, dropdownColumnsNumber, hideItemIconGap, }: VerticalNavbarProps) => ElementItem;
+export declare const getVerticalNavbarElementManifestOverrides: ({ hasDropdownItems, hasDropdownContent, hasDropdownSubItems, isItemFitToText, isDropdownItemFitToText, dropdownColumnsNumber, }: VerticalNavbarProps) => ElementItem;
 export declare const getVerticalNavbarManifestOverrides: (props: VerticalNavbarProps) => Partial<EditorElement>;

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

@@ -204,11 +204,8 @@ const DisplayNames = {
     cssProperties: {
       justifyContent: "Text alignment",
       background: "Background",
-      columnGap: "Space between items and chevrons"
-    },
-    cssCustomProperties: {
-      "item-icon-size": "Size",
-      "item-icon-gap": "Space between items and icons"
+      columnGap: "Space between menu items and icons",
+      "item-icon-size": "Size"
     },
     displayGroups: {
       iconGroup: "Icons"
@@ -218,12 +215,6 @@ const DisplayNames = {
       selected: "Selected"
     }
   },
-  itemLabel: {
-    elementDisplayName: "Item's text"
-  },
-  itemIcon: {
-    elementDisplayName: "Item's icon"
-  },
   dropdown: {
     elementDisplayName: "Dropdowns",
     cssCustomProperties: {
@@ -299,10 +290,6 @@ const DisplayNames = {
     elementDisplayName: "Close Button"
   }
 };
-const menuBuiltInActions = {
-  elements: "elements"
-};
-const MENU_ANIMATED_ICON_SPEC = "sp.erc.menuAnimatedIcon";
 const selectors = {
   menu: "menu",
   navbar: "navbar",
@@ -311,8 +298,6 @@ const selectors = {
   dropdownItem: "dropdown-item",
   dropdownSubItem: "dropdown-sub-item",
   scrollButton: "scroll-button",
-  animatedIcon: "animated-icon",
-  itemLabel: "item-label",
   hamburgerMenu: "hamburger-menu",
   hamburgerMenuContent: "hamburger-menu-content",
   hamburgerMenuHeaderContent: "hamburger-menu-header-content",
@@ -327,9 +312,7 @@ const elementKeys = {
   item: "item",
   subItem: "subItem",
   scrollButton: "scrollButton",
-  dropdown: "dropdown",
-  animatedIcon: "animatedIcon",
-  itemLabel: "itemLabel"
+  dropdown: "dropdown"
 };
 const presets = {
   horizontalScrollNavbar: "horizontalScrollNavbar",
@@ -432,9 +415,7 @@ export {
   DropdownAnchorPositions as g,
   DropdownAppliedStyleProperties as h,
   elementKeys as i,
-  MENU_ANIMATED_ICON_SPEC as j,
-  states as k,
-  menuBuiltInActions as m,
+  states as j,
   presets as p,
   selectors as s,
   translationsKeys as t,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2346.0",
+  "version": "1.2347.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -199,5 +199,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "4444237208bbeddbcf581380b41a436bef9adc00545781801642118b"
+  "falconPackageHash": "da47f7a892d684020ed2bc122b653607fc518a2d33af8b46aa75fa9a"
 }

package/dist/site/components/Menu/components/MenuContent/MenuItem/useIconAnimation.d.ts

@@ -1,17 +0,0 @@
-import { default as React, RefObject } from 'react';
-import { AnimatedSvgRef } from '../../../../AnimatedIcon/types';
-import { BuilderAnimationIconComponent } from '../../../Menu.types';
-type UseIconAnimationOptions = {
-    BuilderAnimationIcon: BuilderAnimationIconComponent | undefined;
-    isCurrentPage: boolean;
-    isOpen: boolean;
-    onMouseEnter?: (event: React.MouseEvent<HTMLDivElement>) => void;
-    onMouseLeave?: (event: React.MouseEvent<HTMLDivElement>) => void;
-};
-type UseIconAnimationResult = {
-    iconAnimatedRef: RefObject<AnimatedSvgRef>;
-    handleMouseEnter: (event: React.MouseEvent<HTMLDivElement>) => void;
-    handleMouseLeave: (event: React.MouseEvent<HTMLDivElement>) => void;
-};
-export declare function useIconAnimation({ BuilderAnimationIcon, isCurrentPage, isOpen, onMouseEnter, onMouseLeave, }: UseIconAnimationOptions): UseIconAnimationResult;
-export {};

package/dist/site/components/Menu/manifestConfigs/animatedIconConfig.d.ts

@@ -1,2 +0,0 @@
-import { ElementItem } from '@wix/component-protocol/schema';
-export declare const animatedIconConfig: ElementItem;