@elementor/editor-app-bar 4.3.0-999 → 4.3.0-beta2

package/dist/index.d.mts

@@ -26,6 +26,7 @@ declare function Link({ icon: Icon, title, visible, showExternalLinkIcon, ...pro
 type Props = {
     title: string;
     icon: ElementType;
+    id?: string;
     selected?: boolean;
     disabled?: boolean;
     visible?: boolean;

package/dist/index.d.ts

@@ -26,6 +26,7 @@ declare function Link({ icon: Icon, title, visible, showExternalLinkIcon, ...pro
 type Props = {
     title: string;
     icon: ElementType;
+    id?: string;
     selected?: boolean;
     disabled?: boolean;
     visible?: boolean;

package/dist/index.js

@@ -241,8 +241,8 @@ var import_ui13 = require("@elementor/ui");
 // src/constants.ts
 var MIN_APP_BAR_WIDTH = 800;
 var DEFAULT_MAX_TOOLBAR_ACTIONS = {
-  tools: 5,
-  utilities: 4
+  tools: 6,
+  utilities: 5
 };
 
 // src/contexts/app-bar-size-context.tsx
@@ -556,7 +556,7 @@ function AngieGuideLocation() {
         ]
       }
     },
-    /* @__PURE__ */ React16.createElement("span", null)
+    /* @__PURE__ */ React16.createElement("span", { style: { display: "contents" } })
   ));
 }
 
@@ -762,10 +762,10 @@ var { useMenuItems: useMenuItems4 } = utilitiesMenu;
 function UtilitiesMenuLocation() {
   const menuItems = useMenuItems4();
   const { utilities: maxToolbarActions } = useMaxToolbarActions();
-  const shouldUsePopover = menuItems.default.length > maxToolbarActions + 1;
+  const shouldUsePopover = menuItems.default.length > maxToolbarActions;
   const toolbarMenuItems = shouldUsePopover ? menuItems.default.slice(0, maxToolbarActions) : menuItems.default;
   const popoverMenuItems = shouldUsePopover ? menuItems.default.slice(maxToolbarActions) : [];
-  return /* @__PURE__ */ React22.createElement(ToolbarMenu, null, toolbarMenuItems.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React22.createElement(import_react8.Fragment, { key: id }, /* @__PURE__ */ React22.createElement(MenuItem2, null))), popoverMenuItems.length > 0 && /* @__PURE__ */ React22.createElement(ToolbarMenuMore, { id: "elementor-editor-app-bar-utilities-more" }, popoverMenuItems.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React22.createElement(MenuItem2, { key: id }))));
+  return /* @__PURE__ */ React22.createElement(ToolbarMenu, null, popoverMenuItems.length > 0 && /* @__PURE__ */ React22.createElement(ToolbarMenuMore, { id: "elementor-editor-app-bar-utilities-more" }, popoverMenuItems.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React22.createElement(MenuItem2, { key: id }))), toolbarMenuItems.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React22.createElement(import_react8.Fragment, { key: id }, /* @__PURE__ */ React22.createElement(MenuItem2, null))));
 }
 
 // src/components/app-bar.tsx
@@ -798,15 +798,44 @@ function AppBar() {
 }
 
 // src/extensions/angie/hooks/use-action-props.ts
-var import_react10 = require("react");
-var import_editor_mcp = require("@elementor/editor-mcp");
+var import_react11 = require("react");
 var import_events3 = require("@elementor/events");
 var import_icons5 = require("@elementor/icons");
 var import_i18n7 = require("@wordpress/i18n");
+
+// src/hooks/use-is-angie-available.ts
+var import_react10 = require("react");
+var import_editor_mcp = require("@elementor/editor-mcp");
+function useIsAngieAvailable() {
+  const [available, setAvailable] = (0, import_react10.useState)(() => (0, import_editor_mcp.isAngieAvailable)());
+  (0, import_react10.useEffect)(() => {
+    if (available) {
+      return;
+    }
+    if ((0, import_editor_mcp.isAngieAvailable)()) {
+      setAvailable(true);
+      return;
+    }
+    const observer = new MutationObserver(() => {
+      if ((0, import_editor_mcp.isAngieAvailable)()) {
+        observer.disconnect();
+        setAvailable(true);
+      }
+    });
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true
+    });
+    return () => observer.disconnect();
+  }, [available]);
+  return available;
+}
+
+// src/extensions/angie/hooks/use-action-props.ts
 function useActionProps() {
-  const hasAngieInstalled = (0, import_editor_mcp.isAngieAvailable)();
+  const hasAngieInstalled = useIsAngieAvailable();
   const visible = !hasAngieInstalled;
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (!visible) {
       return;
     }
@@ -837,7 +866,7 @@ function init() {
 }
 
 // src/extensions/connect/hooks/use-connect-link-config.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_icons6 = require("@elementor/icons");
 var import_i18n8 = require("@wordpress/i18n");
 var dispatchConnectClickEvent = (eventName) => {
@@ -867,7 +896,7 @@ function useConnectLinkConfig() {
     isUserConnected = extendedWindow?.elementorCommon?.config.library_connect.is_connected ?? false;
     target = "_self";
   }
-  const handleConnectClick = (0, import_react11.useCallback)(
+  const handleConnectClick = (0, import_react12.useCallback)(
     (event) => {
       event.preventDefault();
       if (extendedWindow.jQuery && extendedWindow.jQuery.fn?.elementorConnect) {
@@ -1295,7 +1324,7 @@ function useActionProps3() {
 function init5() {
   toolsMenu.registerToggleAction({
     id: "document-settings-button",
-    priority: 3,
+    priority: 5,
     useProps: useActionProps3
   });
 }
@@ -1309,6 +1338,7 @@ function useActionProps4() {
   return {
     title: (0, import_i18n16.__)("Add Element", "elementor"),
     icon: import_icons14.PlusIcon,
+    id: "ele-add-element",
     onClick: () => {
       const extendedWindow = window;
       const config = extendedWindow?.elementorCommon?.eventsManager?.config;
@@ -1423,25 +1453,43 @@ function init8() {
 }
 
 // src/extensions/help/hooks/use-action-props.ts
+var import_editor_mcp2 = require("@elementor/editor-mcp");
 var import_icons17 = require("@elementor/icons");
 var import_i18n20 = require("@wordpress/i18n");
+var HELP_CENTER_URL = "https://go.elementor.com/editor-top-bar-learn/";
+var HELP_CENTER_ANGIE_PROMPT = `${(0, import_i18n20.__)("Help me with", "elementor")} `;
+var dispatchHelpClickEvent = () => {
+  const extendedWindow = window;
+  const config = extendedWindow?.elementorCommon?.eventsManager?.config;
+  if (config) {
+    extendedWindow.elementorCommon.eventsManager.dispatchEvent(config.names.topBar.help, {
+      location: config.locations.topBar,
+      secondaryLocation: config.secondaryLocations.help,
+      trigger: config.triggers.click,
+      element: config.elements.buttonIcon
+    });
+  }
+};
 function useActionProps6() {
+  const hasAngieActive = (0, import_editor_mcp2.isAngieAvailable)();
+  if (hasAngieActive) {
+    return {
+      title: (0, import_i18n20.__)("Help Center", "elementor"),
+      icon: import_icons17.HelpIcon,
+      onClick: (event) => {
+        event.preventDefault();
+        dispatchHelpClickEvent();
+        (0, import_editor_mcp2.openAngieInAskMode)(HELP_CENTER_ANGIE_PROMPT);
+      }
+    };
+  }
   return {
     title: (0, import_i18n20.__)("Help Center", "elementor"),
-    href: "https://go.elementor.com/editor-top-bar-learn/",
+    href: HELP_CENTER_URL,
     icon: import_icons17.HelpIcon,
     target: "_blank",
     onClick: () => {
-      const extendedWindow = window;
-      const config = extendedWindow?.elementorCommon?.eventsManager?.config;
-      if (config) {
-        extendedWindow.elementorCommon.eventsManager.dispatchEvent(config.names.topBar.help, {
-          location: config.locations.topBar,
-          secondaryLocation: config.secondaryLocations.help,
-          trigger: config.triggers.click,
-          element: config.elements.buttonIcon
-        });
-      }
+      dispatchHelpClickEvent();
     }
   };
 }
@@ -1487,7 +1535,7 @@ function useActionProps7() {
 function init10() {
   toolsMenu.registerToggleAction({
     id: "open-history",
-    priority: 15,
+    priority: 3,
     useProps: useActionProps7
   });
 }