@wix/editor-react-components 1.2663.0 → 1.2665.0

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

@@ -107,6 +107,8 @@ export type DropdownProps = (HorizontalDropdownProps | VerticalDropdownProps) &
     menuOrientation: MenuOrientationType;
     className?: string;
     elementProps?: MenuDropdownItemsElementProps;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
 };
 export type MenuStates = {
     hamburgerMenuOpen?: boolean;

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

@@ -320,7 +320,8 @@ const createEventListeners = ({
   initExitAnimation,
   isOpen,
   hasLink,
-  dropdownAnimationState
+  dropdownAnimationState,
+  animationPhase
 }) => {
   const shouldDropdownBeHidden = () => {
     const isHorizontal = getMenuOrientation(itemRef) === MenuOrientation.Horizontal;
@@ -335,23 +336,17 @@ const createEventListeners = ({
     }
     return !!isHorizontal;
   };
+  const shouldSkipEnterAnimation = () => animationPhase === AnimationPhase.Enter || animationPhase === AnimationPhase.EnterActive || animationPhase === AnimationPhase.EnterDone;
   return {
     onMouseEnter: () => {
       const isHorizontal = getMenuOrientation(itemRef) === MenuOrientation.Horizontal;
-      const isAlwaysOpen = getIsAlwaysOpen(itemRef);
-      const isVerticalExpanded = getIsVerticalExpanded(
-        isHorizontal,
-        isOpen,
-        dropdownAnimationState
-      );
-      if (!hasLink && (isAlwaysOpen || isVerticalExpanded)) {
-        return;
-      }
-      const animationName = getMenuItemAnimationName();
       if (isHorizontal) {
         showDropdown();
       }
-      initEnterAnimation(animationName);
+      if (!shouldSkipEnterAnimation()) {
+        const animationName = getMenuItemAnimationName();
+        initEnterAnimation(animationName);
+      }
     },
     onMouseLeave: () => {
       const animationName = getMenuItemAnimationName();
@@ -360,10 +355,21 @@ const createEventListeners = ({
       }
       initExitAnimation(animationName);
     },
+    onFocus: (event) => {
+      const isEnteringFromOutside = !event.relatedTarget || !event.currentTarget.contains(event.relatedTarget);
+      if (!isEnteringFromOutside || shouldSkipEnterAnimation()) {
+        return;
+      }
+      const animationName = getMenuItemAnimationName();
+      initEnterAnimation(animationName);
+    },
     onBlur: (event) => {
       const isOutsideElement = !event.relatedTarget || !event.currentTarget.contains(event.relatedTarget);
+      if (!isOutsideElement) {
+        return;
+      }
       const animationName = getMenuItemAnimationName();
-      if (shouldDropdownBeHidden() && isOutsideElement) {
+      if (shouldDropdownBeHidden()) {
         hideDropdown();
       }
       initExitAnimation(animationName);
@@ -858,7 +864,10 @@ const MenuItemLabel = (props) => {
     dropdownAnimationState,
     submenuToggleId,
     itemClassName,
-    BuilderAnimationIcon
+    BuilderAnimationIcon,
+    isHovered,
+    onHoverAreaEnter,
+    onHoverAreaLeave
   } = props;
   const isCurrentPage = isCurrentItem(item2, currentItem);
   const { label: label2, link } = item2;
@@ -870,7 +879,8 @@ const MenuItemLabel = (props) => {
     selectors.item,
     classes$6.labelContainer,
     itemClassName,
-    isCurrentPage && DesignStates.item.selected.className
+    isCurrentPage && DesignStates.item.selected.className,
+    isHovered && DesignStates.item.hover.className
   );
   const isInteractive = (hasSubItems || hasLink) && !isCurrentPage;
   const isDropdownIconOpen = isOpen && dropdownAnimationState.phase !== AnimationPhase.ExitActive;
@@ -892,8 +902,14 @@ const MenuItemLabel = (props) => {
       "data-preview": partToPreviewStateMap == null ? void 0 : partToPreviewStateMap.item,
       "data-interactive": isInteractive,
       onClick: createSDKAction(item2, isCurrentPage, onItemClick),
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
+      onMouseEnter: (event) => {
+        handleMouseEnter(event);
+        onHoverAreaEnter == null ? void 0 : onHoverAreaEnter();
+      },
+      onMouseLeave: (event) => {
+        handleMouseLeave(event);
+        onHoverAreaLeave == null ? void 0 : onHoverAreaLeave();
+      },
       onDoubleClick: createSDKAction(item2, isCurrentPage, onItemDblClick),
       children: [
         /* @__PURE__ */ jsx(
@@ -1532,7 +1548,9 @@ const Dropdown = React__default.forwardRef(
     direction,
     onItemClick,
     className,
-    elementProps
+    elementProps,
+    onMouseEnter,
+    onMouseLeave
   }, ref) => {
     var _a, _b;
     const rootClassNames = {
@@ -1556,6 +1574,8 @@ const Dropdown = React__default.forwardRef(
         ),
         dir: direction,
         ref,
+        onMouseEnter,
+        onMouseLeave,
         children: /* @__PURE__ */ jsx(
           MenuItemContext.Provider,
           {
@@ -1632,6 +1652,9 @@ const MenuItem = (props) => {
   }
   const chevronButtonRef = useRef(null);
   const itemRef = useRef(null);
+  const itemWrapperRef = useRef(null);
+  const [isHoverAreaActive, setIsHoverAreaActive] = useState(false);
+  const [isOpenedByToggle, setIsOpenedByToggle] = useState(false);
   const getMenuItemAnimationName = () => {
     const animationPackage = getAnimationPackage();
     const menuItemAnimationName = ANIMATION_PACKAGE_CONFIG[animationPackage].menuItemAnimationName;
@@ -1665,6 +1688,18 @@ const MenuItem = (props) => {
       setDropdownDomStylesApplier(updateDropdownDomStyles2);
     }
   }, [forceOpen, setDropdownDomStylesApplier, updateDropdownDomStyles2]);
+  useEffect(() => {
+    if (!isOpen) {
+      setIsOpenedByToggle(false);
+    }
+  }, [isOpen]);
+  const toggleDropdownWithHoverLook = useCallback(() => {
+    if (getMenuOrientation(itemRef) === MenuOrientation.Horizontal) {
+      setIsOpenedByToggle(!isOpen);
+    }
+    toggleDropdown();
+  }, [isOpen, toggleDropdown]);
+  const isHovered = isHoverAreaActive || isOpenedByToggle && animationState.phase !== AnimationPhase.ExitActive && animationState.phase !== AnimationPhase.ExitDone;
   const eventListeners = createEventListeners({
     showDropdown: showDropdownCoordinated,
     hideDropdown,
@@ -1674,7 +1709,8 @@ const MenuItem = (props) => {
     initExitAnimation,
     isOpen,
     hasLink,
-    dropdownAnimationState
+    dropdownAnimationState,
+    animationPhase: animationState.phase
   });
   useEffect(() => {
     if ((currentItem == null ? void 0 : currentItem.id) === item2.id && itemRef.current) {
@@ -1682,13 +1718,16 @@ const MenuItem = (props) => {
     }
   }, [currentItem, item2, focusOnMenuItem]);
   useLayoutEffect(() => {
-    var _a2, _b2;
+    var _a2, _b2, _c2;
     if ((((_a2 = submenuCheckboxRef.current) == null ? void 0 : _a2.checked) || prehydrationOpenRef.current) && !isOpen) {
       showDropdownImmediate();
     }
-    if (hasDropdownMenu && !isOpen && ((_b2 = itemRef.current) == null ? void 0 : _b2.matches(":hover"))) {
+    if (((_b2 = itemRef.current) == null ? void 0 : _b2.matches(":hover")) && hasDropdownMenu && !isOpen) {
       showDropdownImmediate();
     }
+    if ((_c2 = itemWrapperRef.current) == null ? void 0 : _c2.matches(":hover")) {
+      setIsHoverAreaActive(true);
+    }
   }, []);
   const prevHamburgerOpenRef = useRef(isHamburgerMenuOpened);
   useEffect(() => {
@@ -1769,31 +1808,44 @@ const MenuItem = (props) => {
             className: classes$6.hiddenToggle
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: classes$6.itemWrapper, ...eventListeners, children: [
-          /* @__PURE__ */ jsx(
-            MenuItemLabel,
-            {
-              ...props,
-              hasDropdownMenu,
-              hasSubItems,
-              hasContainer,
-              chevronButtonRef,
-              toggleDropdown,
-              isOpen,
-              dropdownAnimationState,
-              submenuToggleId,
-              itemClassName: (_d = menuElementProps == null ? void 0 : menuElementProps.item) == null ? void 0 : _d.className
-            }
-          ),
-          hasDropdownMenu && /* @__PURE__ */ jsx(
-            Dropdown,
-            {
-              ...sharedDropdownProps,
-              menuOrientation: "horizontal",
-              ref: forceOpen ? dropdownElementRef : void 0
-            }
-          )
-        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: classes$6.itemWrapper,
+            ref: itemWrapperRef,
+            ...eventListeners,
+            children: [
+              /* @__PURE__ */ jsx(
+                MenuItemLabel,
+                {
+                  ...props,
+                  hasDropdownMenu,
+                  hasSubItems,
+                  hasContainer,
+                  chevronButtonRef,
+                  toggleDropdown: toggleDropdownWithHoverLook,
+                  isOpen,
+                  dropdownAnimationState,
+                  submenuToggleId,
+                  itemClassName: (_d = menuElementProps == null ? void 0 : menuElementProps.item) == null ? void 0 : _d.className,
+                  isHovered,
+                  onHoverAreaEnter: () => setIsHoverAreaActive(true),
+                  onHoverAreaLeave: () => setIsHoverAreaActive(false)
+                }
+              ),
+              hasDropdownMenu && /* @__PURE__ */ jsx(
+                Dropdown,
+                {
+                  ...sharedDropdownProps,
+                  menuOrientation: "horizontal",
+                  ref: forceOpen ? dropdownElementRef : void 0,
+                  onMouseEnter: () => setIsHoverAreaActive(true),
+                  onMouseLeave: () => setIsHoverAreaActive(false)
+                }
+              )
+            ]
+          }
+        ),
         hasSubItems && /* @__PURE__ */ jsx(
           Dropdown,
           {

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

@@ -12,4 +12,7 @@ export declare const MenuItemLabel: React.FC<IMenuItemProps & {
     dropdownAnimationState: AnimationState<DropdownAnimationNameType>;
     submenuToggleId?: string;
     itemClassName?: string;
+    isHovered?: boolean;
+    onHoverAreaEnter?: () => void;
+    onHoverAreaLeave?: () => void;
 }>;

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

@@ -2,7 +2,7 @@ import { default as React } from 'react';
 import { IMenuItemSDKAction } from '../../../../../../common/sdk/props-factories/menuItemsPropsSDKFactory';
 import { IMenuItemProps } from '../../../Menu.types';
 import { DropdownAnimationNameType, MenuAnimationNameType, MenuOrientationType, MenuVerticalDropdownDisplayType } from '../../../constants';
-import { AnimationState } from './useAnimationState';
+import { AnimationPhaseType, AnimationState } from './useAnimationState';
 export declare const createSDKAction: (item: Omit<IMenuItemProps["item"], "children">, selected: boolean, sdkAction?: IMenuItemSDKAction) => ((e: React.MouseEvent) => void) | undefined;
 export declare const getMenuOrientation: (itemRef: React.RefObject<HTMLLIElement>) => MenuOrientationType | undefined;
 export declare const getVerticalDropdownDispaly: (itemRef: React.RefObject<HTMLLIElement>) => MenuVerticalDropdownDisplayType | undefined;
@@ -17,10 +17,12 @@ type CreateEventListenersOptions = {
     isOpen: boolean;
     hasLink: boolean;
     dropdownAnimationState: AnimationState<DropdownAnimationNameType>;
+    animationPhase: AnimationPhaseType | undefined;
 };
-export declare const createEventListeners: ({ showDropdown, hideDropdown, itemRef, getMenuItemAnimationName, initEnterAnimation, initExitAnimation, isOpen, hasLink, dropdownAnimationState, }: CreateEventListenersOptions) => {
+export declare const createEventListeners: ({ showDropdown, hideDropdown, itemRef, getMenuItemAnimationName, initEnterAnimation, initExitAnimation, isOpen, hasLink, dropdownAnimationState, animationPhase, }: CreateEventListenersOptions) => {
     onMouseEnter: () => void;
     onMouseLeave: () => void;
+    onFocus: (event: React.FocusEvent) => void;
     onBlur: (event: React.FocusEvent) => void;
 };
 export {};

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

@@ -59,37 +59,11 @@
 .labelContainer__E4y-p a {
   color: inherit;
 }
-[data-open]:not([data-animation-state=exitActive]):not([data-animation-state=exitDone]) > .itemWrapper__sn71X > .labelContainer__E4y-p, .labelContainer__E4y-p[data-interactive=true]:hover, .labelContainer__E4y-p[data-preview=hover], .labelContainer__E4y-p.hover__tD6A4, .labelContainer__E4y-p.menu__item--hover {
-  background: var(--item-hover-background, var(--item-background));
-  box-shadow: var(--item-hover-box-shadow, var(--item-box-shadow));
-  border-top: var(--item-hover-border-top, var(--item-border-top));
-  border-bottom: var(--item-hover-border-bottom, var(--item-border-bottom));
-}
-[data-open]:not([data-animation-state=exitActive]):not([data-animation-state=exitDone]) > .itemWrapper__sn71X > .labelContainer__E4y-p .label__BBchK, .labelContainer__E4y-p[data-interactive=true]:hover .label__BBchK, .labelContainer__E4y-p[data-preview=hover] .label__BBchK, .labelContainer__E4y-p.hover__tD6A4 .label__BBchK, .labelContainer__E4y-p.menu__item--hover .label__BBchK {
-  color: var(--item-hover-color, var(--item-color));
-  text-decoration-line: var(--item-hover-text-decoration, var(--item-text-decoration));
-  text-shadow: var(--item-hover-text-outline, var(--item-text-outline)), var(--item-hover-text-shadow, var(--item-text-shadow));
-  background-color: var(--item-hover-text-highlight, var(--item-text-highlight));
-  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)));
-}
-.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));
-  box-shadow: var(--item-selected-box-shadow, var(--item-box-shadow));
-  border-top: var(--item-selected-border-top, var(--item-border-top));
-  border-bottom: var(--item-selected-border-bottom, var(--item-border-bottom));
-}
-.labelContainer__E4y-p[data-selected] .label__BBchK, .labelContainer__E4y-p[data-preview=selected] .label__BBchK, .labelContainer__E4y-p.selected__qC-k6 .label__BBchK, .labelContainer__E4y-p.menu__item--selected .label__BBchK {
-  color: var(--item-selected-color, var(--item-color));
-  text-decoration-line: var(--item-selected-text-decoration, var(--item-text-decoration));
-  text-shadow: var(--item-selected-text-outline, var(--item-text-outline)), var(--item-selected-text-shadow, var(--item-text-shadow));
-  background-color: var(--item-selected-text-highlight, var(--item-text-highlight));
-  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)));
+.labelContainer__E4y-p.menu__item--hover .label__BBchK {
+  text-decoration-line: var(--item-hover-text-decoration, revert);
+}
+.labelContainer__E4y-p.menu__item--selected .label__BBchK {
+  text-decoration-line: var(--item-selected-text-decoration, revert);
 }
 .labelContainer__E4y-p > a::before {
   content: "";

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

@@ -584,11 +584,13 @@ const itemConfig = {
       removable: false
     },
     states: {
+      // Not native: the item must stay hovered while the pointer is over its
+      // mega menu dropdown, which isn't a DOM descendant of the item, so real
+      // :hover can't cover it — the className is toggled via JS instead
       hover: withSpec({
         spec: IS_SUPPORT_DESIGN_STATE_SPEC,
         displayName: DesignStates.item.hover.displayName,
-        className: DesignStates.item.hover.className,
-        pseudoClass: NativeStateType.hover
+        className: DesignStates.item.hover.className
       }),
       selected: withSpec({
         spec: IS_SUPPORT_DESIGN_STATE_SPEC,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2663.0",
+  "version": "1.2665.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -85,7 +85,7 @@
     "@wix/site-service-configuration": "^1.0.1",
     "@wix/site-service-experiments": "^1.0.4",
     "@wix/site-service-rendering-context": "^1.0.1",
-    "@wix/site-ui": "1.273.0",
+    "@wix/site-ui": "1.274.0",
     "@wix/video": "^1.106.0",
     "@wix/viewer-service-consent-policy": "^1.0.103",
     "@wix/web-bi-logger": "^2.1.29",
@@ -108,7 +108,7 @@
     "@astrojs/cloudflare": "^12.6.13",
     "@astrojs/react": "^4.4.2",
     "@codemirror/lang-html": "^6.4.9",
-    "@playwright/test": "~1.59.1",
+    "@playwright/test": "~1.63.0",
     "@storybook/addon-docs": "^9.1.19",
     "@storybook/react-vite": "^9.1.19",
     "@testing-library/jest-dom": "^6.4.2",
@@ -200,5 +200,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "28a33fe2b47b40f27c92a5f6b41b773cb47dddf144cba36a05223b9a"
+  "falconPackageHash": "cddd175b9c2aff8bcf779d96e918974fc24d35d3663640f28fd87ba4"
 }