@wix/editor-react-components 1.2318.0 → 1.2320.0

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, useMemo, useState, useCallback, useRef, useEffect, useLayoutEffect } 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";
@@ -48,6 +48,15 @@ const MenuContextProvider = ({
   a11yProps,
   dropdownAnchor
 }) => {
+  const activeDropdownCloseRef = useRef(null);
+  const closeActiveDropdown = useCallback(() => {
+    var _a;
+    (_a = activeDropdownCloseRef.current) == null ? void 0 : _a.call(activeDropdownCloseRef);
+    activeDropdownCloseRef.current = null;
+  }, []);
+  const setActiveDropdown = useCallback((closeImmediately) => {
+    activeDropdownCloseRef.current = closeImmediately;
+  }, []);
   const contextValue = useMemo(
     () => ({
       items,
@@ -62,7 +71,9 @@ const MenuContextProvider = ({
       isHamburgerMenuOpened,
       setIsHamburgerMenuOpened,
       a11yProps,
-      dropdownAnchor
+      dropdownAnchor,
+      closeActiveDropdown,
+      setActiveDropdown
     }),
     [
       items,
@@ -77,7 +88,9 @@ const MenuContextProvider = ({
       isHamburgerMenuOpened,
       setIsHamburgerMenuOpened,
       a11yProps,
-      dropdownAnchor
+      dropdownAnchor,
+      closeActiveDropdown,
+      setActiveDropdown
     ]
   );
   return /* @__PURE__ */ jsx(MenuContext.Provider, { value: contextValue, children });
@@ -1085,7 +1098,8 @@ const useDropdown = ({
     animationState,
     initEnterAnimation,
     initExitAnimation,
-    skipToEnterDone
+    skipToEnterDone,
+    skipToExitDone
   } = useAnimationState(
     DROPDOWN_ANIMATION_CONFIG,
     INITIAL_DROPDOWN_ANIMATION_STATE
@@ -1115,9 +1129,20 @@ const useDropdown = ({
     setIsOpen(true);
   };
   const hideDropdown = () => {
+    if (!isOpen) {
+      return;
+    }
     const dropdownAnimationName = getDropdownAnimationName();
     initExitAnimation(dropdownAnimationName, () => setIsOpen(false));
   };
+  const hideDropdownImmediate = () => {
+    if (!isOpen) {
+      return;
+    }
+    const dropdownAnimationName = getDropdownAnimationName();
+    skipToExitDone(dropdownAnimationName);
+    setIsOpen(false);
+  };
   const toggleDropdown = () => {
     if (isOpen) {
       hideDropdown();
@@ -1146,6 +1171,7 @@ const useDropdown = ({
     showDropdown,
     showDropdownImmediate,
     hideDropdown,
+    hideDropdownImmediate,
     toggleDropdown,
     updateDropdownDomStyles: updateDropdownDomStyles$1
   };
@@ -1511,6 +1537,7 @@ const MenuItem = (props) => {
     showDropdown,
     showDropdownImmediate,
     hideDropdown,
+    hideDropdownImmediate,
     toggleDropdown,
     updateDropdownDomStyles: updateDropdownDomStyles2
   } = useDropdown({
@@ -1518,7 +1545,14 @@ const MenuItem = (props) => {
     forceOpen,
     getAnimationPackage
   });
-  const { isHamburgerMenuOpened } = useMenuContext();
+  const { isHamburgerMenuOpened, closeActiveDropdown, setActiveDropdown } = useMenuContext();
+  const hideDropdownImmediateRef = useRef(hideDropdownImmediate);
+  hideDropdownImmediateRef.current = hideDropdownImmediate;
+  const showDropdownCoordinated = useCallback(() => {
+    closeActiveDropdown == null ? void 0 : closeActiveDropdown();
+    showDropdown();
+    setActiveDropdown == null ? void 0 : setActiveDropdown(() => hideDropdownImmediateRef.current());
+  }, [closeActiveDropdown, showDropdown, setActiveDropdown]);
   const { setDropdownDomStylesApplier, dropdownElementRef } = useContext(DropdownContext);
   useEffect(() => {
     if (forceOpen) {
@@ -1526,7 +1560,7 @@ const MenuItem = (props) => {
     }
   }, [forceOpen, setDropdownDomStylesApplier, updateDropdownDomStyles2]);
   const eventListeners = createEventListeners({
-    showDropdown,
+    showDropdown: showDropdownCoordinated,
     hideDropdown,
     itemRef,
     getMenuItemAnimationName,

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

@@ -20,5 +20,6 @@ export declare const useAnimationState: <AnimationNameType extends string>(anima
     initEnterAnimation: (animationName: AnimationNameType, onAnimationDone?: () => void) => void;
     initExitAnimation: (animationName: AnimationNameType, onAnimationDone?: () => void) => void;
     skipToEnterDone: (animationName: AnimationNameType) => void;
+    skipToExitDone: (animationName: AnimationNameType) => void;
 };
 export {};

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

@@ -10,6 +10,7 @@ export declare const useDropdown: ({ itemRef, forceOpen, getAnimationPackage, }:
     showDropdown: () => void;
     showDropdownImmediate: () => void;
     hideDropdown: () => void;
+    hideDropdownImmediate: () => void;
     toggleDropdown: () => void;
     updateDropdownDomStyles: () => void;
 };

package/dist/site/components/Menu/contexts/MenuContext.d.ts

@@ -20,6 +20,8 @@ export type MenuContextValue = {
     setIsHamburgerMenuOpened?: (isOpen: boolean) => void;
     a11yProps: React.AriaAttributes;
     dropdownAnchor?: DropdownAnchorType;
+    closeActiveDropdown?: () => void;
+    setActiveDropdown?: (closeImmediately: () => void) => void;
 };
 export declare const MenuContext: React.Context<MenuContextValue>;
 export declare const useMenuContext: () => MenuContextValue;

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

@@ -49,6 +49,16 @@ const useAnimationState = (animationConfigMap, initialAnimationState) => {
       phase: AnimationPhase.EnterDone
     });
   };
+  const skipToExitDone = (animationName) => {
+    abortAnimationCallbacks();
+    if (animationName === DISABLED_ANIMATION_NAME) {
+      return;
+    }
+    setAnimationState({
+      name: animationName,
+      phase: AnimationPhase.ExitDone
+    });
+  };
   const initExitAnimation = (animationName, onAnimationDone) => {
     abortAnimationCallbacks();
     if (animationName === DISABLED_ANIMATION_NAME) {
@@ -95,7 +105,8 @@ const useAnimationState = (animationConfigMap, initialAnimationState) => {
     animationState,
     initEnterAnimation,
     initExitAnimation,
-    skipToEnterDone
+    skipToEnterDone,
+    skipToExitDone
   };
 };
 const MenuOrientation = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2318.0",
+  "version": "1.2320.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -176,7 +176,11 @@
     },
     "validations": {
       "postDependenciesBuild": [
-        "check:lint-and-format"
+        "check:lint-and-format",
+        {
+          "scriptName": "test",
+          "timeout": 15
+        }
       ],
       "postBuild": [
         {
@@ -193,5 +197,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "01ea2f49bb1dd841b9c2badbfbaef3ed374260b29adb42ff13c6798f"
+  "falconPackageHash": "ce7595d36305832b009ccf9beb4bd7fc578bffa366e83cd362d4324c"
 }