@wix/editor-react-components 1.2322.0 → 1.2324.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,8 +2,9 @@ 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 } from '@wix/editor-react-types';
+import { A11y, Direction, VectorArt } 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 & {
@@ -11,6 +12,34 @@ 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;
@@ -41,6 +70,7 @@ export type MenuProps = SdkFunctionMouseHoverProps & {
             direction?: Direction;
             submenuDirection?: Direction;
             a11y?: A11y;
+            elementProps?: NavbarElementProps;
         };
         hamburgerMenu?: HamburgerMenuProps;
         hamburgerOpenButton?: ButtonProps;
@@ -111,6 +141,7 @@ export type IMenuContentProps = Partial<IMenuItemsPropsSDKActions> & {
     direction?: Direction;
     submenuDirection?: Direction;
     submenuToggleIdPrefix?: string;
+    BuilderAnimationIcon?: BuilderAnimationIconComponent;
 };
 export type IMenuItemProps = Partial<IMenuItemsPropsSDKActions> & {
     item: PropsWithChildren<MenuItemData & {
@@ -123,6 +154,7 @@ 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 } from "react";
+import React__default, { createContext, useContext, useRef, useCallback, useMemo, useState, useEffect, useLayoutEffect, forwardRef } 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,6 +15,7 @@ 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/Button2.js";
 import { f as convertA11yKeysToHtmlFormat } from "../chunks/a11y.js";
 const AnchorsDefinition = defineService("@wix/viewer-service-anchors");
@@ -379,6 +380,7 @@ 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";
@@ -398,6 +400,7 @@ const classes$6 = {
   labelContainer,
   label,
   dropdownToggleButton,
+  labelWrapper,
   horizontalDropdown,
   coverAllSpace,
   srOnly,
@@ -766,6 +769,103 @@ 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,
@@ -783,7 +883,8 @@ const MenuItemLabel = (props) => {
     toggleDropdown,
     isOpen,
     dropdownAnimationState,
-    submenuToggleId
+    submenuToggleId,
+    BuilderAnimationIcon
   } = props;
   const itemLabelClassNames = clsx(
     classes$6.label,
@@ -802,6 +903,15 @@ 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",
     {
@@ -811,8 +921,8 @@ const MenuItemLabel = (props) => {
       "data-preview": partToPreviewStateMap == null ? void 0 : partToPreviewStateMap.item,
       "data-interactive": isInteractive,
       onClick: createSDKAction(item2, isCurrentPage, onItemClick),
-      onMouseEnter: createSDKAction(item2, isCurrentPage, onItemMouseIn),
-      onMouseLeave: createSDKAction(item2, isCurrentPage, onItemMouseOut),
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
       onDoubleClick: createSDKAction(item2, isCurrentPage, onItemDblClick),
       children: [
         /* @__PURE__ */ jsx(
@@ -825,7 +935,16 @@ const MenuItemLabel = (props) => {
             ...isCurrentPage && {
               "aria-current": "page"
             },
-            children: /* @__PURE__ */ jsx("div", { className: itemLabelClassNames, "data-part": MenuParts.Label, children: label2 })
+            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 })
+            ] })
           }
         ),
         hasDropdownMenu && ["default", "srOnly"].map((variant) => {
@@ -1809,7 +1928,8 @@ const MenuContent = (props) => {
     onItemMouseOut,
     onItemClick,
     onItemDblClick,
-    submenuToggleIdPrefix
+    submenuToggleIdPrefix,
+    BuilderAnimationIcon
   } = props;
   const {
     items,
@@ -1913,7 +2033,8 @@ const MenuContent = (props) => {
             onItemDblClick,
             getAnimationPackage,
             submenuDirection,
-            submenuToggleIdPrefix
+            submenuToggleIdPrefix,
+            BuilderAnimationIcon
           },
           item2.id
         )) }),
@@ -1932,14 +2053,18 @@ 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
   );
@@ -1948,12 +2073,38 @@ 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,
     {
@@ -1968,6 +2119,7 @@ const NavbarMenu = (props) => {
       direction,
       submenuDirection,
       onItemClick,
+      BuilderAnimationIcon: (animatedIconProps == null ? void 0 : animatedIconProps.svg) ? BuilderAnimationIcon : void 0,
       onItemDblClick,
       onItemMouseIn,
       onItemMouseOut

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

@@ -0,0 +1,17 @@
+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/constants.d.ts

@@ -1,3 +1,4 @@
+import { ACTIONS } from '@wix/component-protocol/schema';
 export declare const MenuOrientation: {
     readonly Horizontal: "horizontal";
     readonly Vertical: "vertical";
@@ -131,7 +132,10 @@ export declare const DisplayNames: {
             justifyContent: string;
             background: string;
             columnGap: string;
+        };
+        cssCustomProperties: {
             'item-icon-size': string;
+            'item-icon-gap': string;
         };
         displayGroups: {
             iconGroup: string;
@@ -141,6 +145,12 @@ export declare const DisplayNames: {
             selected: string;
         };
     };
+    itemLabel: {
+        elementDisplayName: string;
+    };
+    itemIcon: {
+        elementDisplayName: string;
+    };
     dropdown: {
         elementDisplayName: string;
         cssCustomProperties: {
@@ -216,6 +226,10 @@ 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;
@@ -224,6 +238,8 @@ export declare const selectors: {
     dropdownItem: string;
     dropdownSubItem: string;
     scrollButton: string;
+    animatedIcon: string;
+    itemLabel: string;
     hamburgerMenu: string;
     hamburgerMenuContent: string;
     hamburgerMenuHeaderContent: string;
@@ -239,6 +255,8 @@ 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(--item-hover-icon-color, var(--item-icon-color, currentcolor));
+  fill: var(--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(--item-selected-icon-color, var(--item-icon-color, currentcolor));
+  fill: var(--fill, var(--item-selected-icon-color, var(--item-icon-color, currentcolor)));
 }
 .labelContainer__E4y-p > a::before {
   content: "";
@@ -131,6 +131,13 @@
   }
 }
 
+.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,
@@ -818,6 +825,12 @@
   --sr-only-item-icon-display: none;
 }
 
+.itemIcon__zQPE- {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
 .rtl__7sC1t {
   --scroll-button-transform: scaleX(-1);
 }
@@ -939,6 +952,25 @@
 .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);
 }
@@ -1063,23 +1095,4 @@
 
 .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 states, p as presets } 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 MENU_ANIMATED_ICON_SPEC, k as states, p as presets, m as menuBuiltInActions } 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,6 +509,53 @@ 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]: {
@@ -569,14 +616,21 @@ const itemConfig = {
       }
     },
     cssCustomProperties: {
-      // Icon
       "item-icon-size": {
-        displayName: DisplayNames.item.cssProperties["item-icon-size"],
+        displayName: DisplayNames.item.cssCustomProperties["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
     }
   }
 };
@@ -1217,6 +1271,15 @@ 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
       },
@@ -1240,7 +1303,7 @@ const manifest = {
         execution: {
           actionType: ACTIONS.ACTION_TYPE.forward,
           forward: {
-            elementPath: `.self.${elementKeys.hamburgerOpenButton}.animatedIcon`,
+            elementPath: `.self.${elementKeys.navbar}.${elementKeys.item}.${elementKeys.animatedIcon}`,
             actionName: ACTIONS.ACTION_NAME.custom,
             custom: "animatedIcon"
           }
@@ -1379,6 +1442,7 @@ 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/animatedIconConfig.d.ts

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

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

@@ -1,2 +1,5 @@
-import { ElementItem } from '@wix/component-protocol/schema';
+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;
 export declare const itemConfig: ElementItem;

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2322.0",
+  "version": "1.2324.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -197,5 +197,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "6d280282af9435a3298aa6d4fddbaf4299fcc312c30a0a3060a09096"
+  "falconPackageHash": "1802e5d2dd2600dece3b5d9e5792b99bd1c3f451c891992f196bb261"
 }