@elementor/editor-site-navigation 0.34.0 → 0.36.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # Change Log
 
+## 0.36.0
+
+### Minor Changes
+
+- 17b73ab: Update `@elementor/ui` version.
+
+### Patch Changes
+
+- Updated dependencies [17b73ab]
+  - @elementor/editor-app-bar@0.31.0
+  - @elementor/editor-panels@0.16.0
+  - @elementor/editor-documents@0.13.7
+
+## 0.35.0
+
+### Minor Changes
+
+- 2fc3298: Add event for Pages button in Top-bar in Elementor hosting sites
+
 ## 0.34.0
 
 ### Minor Changes

package/dist/index.js

@@ -1307,13 +1307,25 @@ var { env } = (0, import_env.parseEnv)("@elementor/editor-site-navigation", (env
 var import_icons16 = require("@elementor/icons");
 var import_i18n16 = require("@wordpress/i18n");
 function useToggleButtonProps() {
-  const { isOpen, isBlocked } = usePanelStatus();
+  const { isOpen: selectedState, isBlocked } = usePanelStatus();
   const { open, close } = usePanelActions();
   return {
     title: (0, import_i18n16.__)("Pages", "elementor"),
     icon: import_icons16.PagesIcon,
-    onClick: () => isOpen ? close() : open(),
-    selected: isOpen,
+    onClick: () => {
+      const extendedWindow = window;
+      const config = extendedWindow?.elementor?.editorEvents?.config;
+      if (config) {
+        extendedWindow.elementor.editorEvents.dispatchEvent("top_bar_pages", {
+          location: config.locations.topBar,
+          secondaryLocation: config.secondaryLocations.elementorLogo,
+          trigger: config.triggers.click,
+          element: config.elements.buttonIcon
+        });
+      }
+      return selectedState ? close() : open();
+    },
+    selected: selectedState,
     disabled: isBlocked
   };
 }

package/dist/index.mjs

@@ -1322,13 +1322,25 @@ var { env } = parseEnv("@elementor/editor-site-navigation", (envData) => {
 import { PagesIcon } from "@elementor/icons";
 import { __ as __16 } from "@wordpress/i18n";
 function useToggleButtonProps() {
-  const { isOpen, isBlocked } = usePanelStatus();
+  const { isOpen: selectedState, isBlocked } = usePanelStatus();
   const { open, close } = usePanelActions();
   return {
     title: __16("Pages", "elementor"),
     icon: PagesIcon,
-    onClick: () => isOpen ? close() : open(),
-    selected: isOpen,
+    onClick: () => {
+      const extendedWindow = window;
+      const config = extendedWindow?.elementor?.editorEvents?.config;
+      if (config) {
+        extendedWindow.elementor.editorEvents.dispatchEvent("top_bar_pages", {
+          location: config.locations.topBar,
+          secondaryLocation: config.secondaryLocations.elementorLogo,
+          trigger: config.triggers.click,
+          element: config.elements.buttonIcon
+        });
+      }
+      return selectedState ? close() : open();
+    },
+    selected: selectedState,
     disabled: isBlocked
   };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-site-navigation",
-  "version": "0.34.0",
+  "version": "0.36.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,19 +39,20 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-app-bar": "0.30.0",
-    "@elementor/editor-documents": "0.13.6",
-    "@elementor/editor-panels": "0.15.4",
+    "@elementor/editor-app-bar": "0.31.0",
+    "@elementor/editor-documents": "0.13.7",
+    "@elementor/editor-panels": "0.16.0",
     "@elementor/editor-v1-adapters": "0.12.0",
     "@elementor/env": "0.3.5",
     "@elementor/icons": "1.44.0",
     "@elementor/query": "0.2.4",
-    "@elementor/ui": "1.34.5",
+    "@elementor/ui": "1.35.5",
     "@wordpress/api-fetch": "^6.42.0",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {
-    "react": "^18.3.1"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "tsup": "^8.3.5"

package/src/hooks/use-toggle-button-props.ts

@@ -1,17 +1,33 @@
+import { type ToggleActionProps } from '@elementor/editor-app-bar';
 import { PagesIcon } from '@elementor/icons';
 import { __ } from '@wordpress/i18n';
 
 import { usePanelActions, usePanelStatus } from '../components/panel/panel';
+import { type ExtendedWindow } from '../types';
 
-export function useToggleButtonProps() {
-	const { isOpen, isBlocked } = usePanelStatus();
+export function useToggleButtonProps(): ToggleActionProps {
+	const { isOpen: selectedState, isBlocked } = usePanelStatus();
 	const { open, close } = usePanelActions();
 
 	return {
 		title: __( 'Pages', 'elementor' ),
 		icon: PagesIcon,
-		onClick: () => ( isOpen ? close() : open() ),
-		selected: isOpen,
+		onClick: () => {
+			const extendedWindow = window as unknown as ExtendedWindow;
+			const config = extendedWindow?.elementor?.editorEvents?.config;
+
+			if ( config ) {
+				extendedWindow.elementor.editorEvents.dispatchEvent( 'top_bar_pages', {
+					location: config.locations.topBar,
+					secondaryLocation: config.secondaryLocations.elementorLogo,
+					trigger: config.triggers.click,
+					element: config.elements.buttonIcon,
+				} );
+			}
+
+			return selectedState ? close() : open();
+		},
+		selected: selectedState,
 		disabled: isBlocked,
 	};
 }