@wix/editor-react-components 1.2317.0 → 1.2319.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,
@@ -2057,6 +2091,7 @@ const HamburgerMenu = ({
     }
   }
 }) => {
+  const { translations } = useMenuContext();
   const siteScrollBlocker = useService(SiteScrollBlockerDefinition);
   const [isOpen, setIsOpen] = useState(false);
   useEffect(() => {
@@ -2113,6 +2148,10 @@ const HamburgerMenu = ({
       Button,
       {
         ...hamburgerOpenButtonProps,
+        a11y: {
+          ariaLabel: translations.hamburgerOpenButtonAriaLabel,
+          ...hamburgerOpenButtonProps == null ? void 0 : hamburgerOpenButtonProps.a11y
+        },
         className: clsx(
           selectors.hamburgerMenuOpenButton,
           classes.openButton
@@ -2149,6 +2188,10 @@ const HamburgerMenu = ({
                 Button,
                 {
                   ...hamburgerCloseButtonProps,
+                  a11y: {
+                    ariaLabel: translations.hamburgerCloseButtonAriaLabel,
+                    ...hamburgerCloseButtonProps == null ? void 0 : hamburgerCloseButtonProps.a11y
+                  },
                   className: clsx(
                     selectors.hamburgerMenuCloseButton,
                     classes.closeButton
@@ -2226,7 +2269,13 @@ const Menu = (props) => {
     menuNavAriaLabel: translate(ARIA_LABEL_NAMESPACE)(translationsKeys.menuNavAriaLabel) || defaultTranslations.menuNavAriaLabel,
     dropdownButtonAriaLabel: translate(ARIA_LABEL_NAMESPACE)(
       translationsKeys.dropdownButtonAriaLabel
-    ) || defaultTranslations.dropdownButtonAriaLabel
+    ) || defaultTranslations.dropdownButtonAriaLabel,
+    hamburgerOpenButtonAriaLabel: translate(ARIA_LABEL_NAMESPACE)(
+      translationsKeys.hamburgerOpenButtonAriaLabel
+    ) || defaultTranslations.hamburgerOpenButtonAriaLabel,
+    hamburgerCloseButtonAriaLabel: translate(ARIA_LABEL_NAMESPACE)(
+      translationsKeys.hamburgerCloseButtonAriaLabel
+    ) || defaultTranslations.hamburgerCloseButtonAriaLabel
   };
   const presetsWrapperProps = (wix == null ? void 0 : wix.presetsWrapperProps) || {};
   return /* @__PURE__ */ jsx("div", { className: presetWrapperStyles.presetWrapper, ...presetsWrapperProps, children: /* @__PURE__ */ jsx(

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/constants.d.ts

@@ -301,11 +301,15 @@ export declare const ARIA_LABEL_NAMESPACE = "ariaLabels";
 export declare const translationsKeys: {
     menuNavAriaLabel: string;
     dropdownButtonAriaLabel: string;
+    hamburgerOpenButtonAriaLabel: string;
+    hamburgerCloseButtonAriaLabel: string;
 };
 export type Translations = {
     translations: {
         dropdownButtonAriaLabel?: string;
         menuNavAriaLabel?: string;
+        hamburgerOpenButtonAriaLabel?: string;
+        hamburgerCloseButtonAriaLabel?: string;
     };
 };
 export declare const defaultTranslations: Translations['translations'];

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

@@ -9,6 +9,8 @@ export type MenuContextValue = {
     translations: {
         dropdownButtonAriaLabel?: string;
         menuNavAriaLabel?: string;
+        hamburgerOpenButtonAriaLabel?: string;
+        hamburgerCloseButtonAriaLabel?: string;
     };
     customClassNames?: Array<string>;
     navAriaLabel: string;
@@ -18,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 = {
@@ -363,11 +374,15 @@ const DropdownAnchorPositions = {
 const ARIA_LABEL_NAMESPACE = "ariaLabels";
 const translationsKeys = {
   menuNavAriaLabel: "dropDownMenu_AriaLabel_TopLevel_SiteNavigation",
-  dropdownButtonAriaLabel: "menu_dropdown_chevron_button_aria_label"
+  dropdownButtonAriaLabel: "menu_dropdown_chevron_button_aria_label",
+  hamburgerOpenButtonAriaLabel: "Mobile_Hamburger_Menu_AriaLabel_Open",
+  hamburgerCloseButtonAriaLabel: "Mobile_Hamburger_Menu_AriaLabel_Close"
 };
 const defaultTranslations = {
   menuNavAriaLabel: "Site",
-  dropdownButtonAriaLabel: "More pages"
+  dropdownButtonAriaLabel: "More pages",
+  hamburgerOpenButtonAriaLabel: "Open navigation menu",
+  hamburgerCloseButtonAriaLabel: "Close navigation menu"
 };
 const MenuParts = {
   Navbar: "navbar",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wix/editor-react-components",
-  "version": "1.2317.0",
+  "version": "1.2319.0",
   "description": "React components for the Wix Editor",
   "license": "MIT",
   "type": "module",
@@ -66,7 +66,7 @@
     "format:check": "yarn run -T format:package:check"
   },
   "peerDependencies": {
-    "@wix/editor-react-types": "^1.0.62",
+    "@wix/editor-react-types": "^1.0.65",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },
@@ -78,7 +78,7 @@
     "@wix/ambassador-devcenter-v1-component-type-data": "^1.0.436",
     "@wix/sdk": "^1.21.13",
     "@wix/services-manager-react": "^0.1.27",
-    "@wix/site-ui": "1.151.0",
+    "@wix/site-ui": "1.152.0",
     "@wix/video": "^1.85.0",
     "@wix/viewer-service-consent-policy": "^1.0.100",
     "@wix/web-bi-logger": "^2.1.26",
@@ -119,7 +119,7 @@
     "@wix/editor": "^1.586.0",
     "@wix/editor-elements-scripts": "^1.0.0",
     "@wix/editor-elements-test-utils": "^1.0.0",
-    "@wix/editor-react-types": "^1.0.62",
+    "@wix/editor-react-types": "^1.0.65",
     "@wix/essentials": "^0.1.28",
     "@wix/fed-cli-sled": "1.0.25",
     "@wix/image": "^1.437.0",
@@ -193,5 +193,5 @@
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
-  "falconPackageHash": "c91c184b34796ac1ce4bc4dc4e65477804628175cb95b757deea76a7"
+  "falconPackageHash": "b14d57b121e6ffbf3528f42ca0337723d35d4d2d8c9b7c3c64b9bccb"
 }