@elementor/editor-app-bar 0.6.9 → 0.7.1

package/dist/index.mjs

@@ -135,12 +135,12 @@ function createMenu(groups = []) {
       component: Component
     })
   );
-  const useMenuItems5 = createUseMenuItems(locations);
+  const useMenuItems6 = createUseMenuItems(locations);
   return {
     registerAction,
     registerToggleAction,
     registerLink,
-    useMenuItems: useMenuItems5
+    useMenuItems: useMenuItems6
   };
 }
 function createRegisterMenuItem({ locations, menuGroups, component }) {
@@ -201,15 +201,16 @@ var {
 var mainMenu = createMenu(["exits"]);
 var toolsMenu = createMenu();
 var utilitiesMenu = createMenu();
+var integrationsMenu = createMenu();
 var documentOptionsMenu = createMenu(["save"]);
 
 // src/components/app-bar.tsx
-import * as React19 from "react";
-import { AppBar as BaseAppBar, Box as Box3, Divider as Divider3, Grid, ThemeProvider } from "@elementor/ui";
+import * as React21 from "react";
+import { AppBar as BaseAppBar, Box as Box3, Divider as Divider4, Grid, ThemeProvider } from "@elementor/ui";
 
 // src/components/locations/main-menu-location.tsx
-import * as React11 from "react";
-import { usePopupState, bindMenu, bindTrigger, Stack, Divider } from "@elementor/ui";
+import * as React13 from "react";
+import { usePopupState as usePopupState2, bindMenu as bindMenu2, bindTrigger, Stack, Divider as Divider2 } from "@elementor/ui";
 
 // src/components/ui/popover-menu.tsx
 import * as React9 from "react";
@@ -238,8 +239,8 @@ import { ToggleButton as ToggleButton2, SvgIcon, styled } from "@elementor/ui";
 var ElementorLogo = (props) => {
   return /* @__PURE__ */ React10.createElement(SvgIcon, { viewBox: "0 0 32 32", ...props }, /* @__PURE__ */ React10.createElement("g", null, /* @__PURE__ */ React10.createElement("circle", { cx: "16", cy: "16", r: "16" }), /* @__PURE__ */ React10.createElement("path", { d: "M11.7 9H9V22.3H11.7V9Z" }), /* @__PURE__ */ React10.createElement("path", { d: "M22.4 9H9V11.7H22.4V9Z" }), /* @__PURE__ */ React10.createElement("path", { d: "M22.4 14.4004H9V17.1004H22.4V14.4004Z" }), /* @__PURE__ */ React10.createElement("path", { d: "M22.4 19.6992H9V22.3992H22.4V19.6992Z" })));
 };
-var StyledToggleButton = styled(ToggleButton2)(() => ({
-  padding: 0,
+var StyledToggleButton = styled(ToggleButton2)(({ theme }) => ({
+  paddingInline: theme.spacing(1),
   "&.MuiToggleButton-root:hover": {
     backgroundColor: "initial"
   },
@@ -291,113 +292,172 @@ function ToolbarLogo(props) {
   );
 }
 
-// src/components/locations/main-menu-location.tsx
-var { useMenuItems } = mainMenu;
-function MainMenuLocation() {
+// src/components/locations/integrations-menu-location.tsx
+import * as React12 from "react";
+import {
+  bindMenu,
+  Divider,
+  ListItemIcon as ListItemIcon2,
+  ListItemText as ListItemText2,
+  MenuItem as MenuItem2,
+  usePopupState,
+  bindHover,
+  bindFocus,
+  withDirection as withDirection2
+} from "@elementor/ui";
+import { __ as __2 } from "@wordpress/i18n";
+import { ChevronRightIcon, PlugIcon } from "@elementor/icons";
+
+// src/components/ui/popover-sub-menu.tsx
+import * as React11 from "react";
+import { useTheme } from "@elementor/ui";
+function PopoverSubMenu({ children, ...props }) {
+  const theme = useTheme();
+  const isRTL = theme.direction === "rtl";
+  return /* @__PURE__ */ React11.createElement(
+    PopoverMenu,
+    {
+      sx: { pointerEvents: "none" },
+      PaperProps: {
+        sx: {
+          // This is a workaround to support RTL in PopoverMenu, since it doesn't support it yet.
+          ...isRTL ? { marginInlineEnd: -2 } : { marginInlineStart: 2 },
+          pointerEvents: "auto"
+        }
+      },
+      anchorOrigin: { vertical: "center", horizontal: isRTL ? "left" : "right" },
+      transformOrigin: { vertical: "center", horizontal: isRTL ? "right" : "left" },
+      ...props
+    },
+    children
+  );
+}
+
+// src/components/locations/integrations-menu-location.tsx
+var { useMenuItems } = integrationsMenu;
+var DirectionalChevronIcon = withDirection2(ChevronRightIcon);
+function IntegrationsMenuLocation({ parentPopupState }) {
   const menuItems = useMenuItems();
-  const orderedGroups = [
-    menuItems.default,
-    menuItems.exits
-  ];
   const popupState = usePopupState({
+    parentPopupState,
+    variant: "popover",
+    popupId: "elementor-v2-app-bar-integrations"
+  });
+  if (menuItems.default.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ React12.createElement(React12.Fragment, null, /* @__PURE__ */ React12.createElement(Divider, null), /* @__PURE__ */ React12.createElement(
+    MenuItem2,
+    {
+      ...bindHover(popupState),
+      ...bindFocus(popupState)
+    },
+    /* @__PURE__ */ React12.createElement(ListItemIcon2, null, /* @__PURE__ */ React12.createElement(PlugIcon, null)),
+    /* @__PURE__ */ React12.createElement(ListItemText2, { primary: __2("Integrations", "elementor") }),
+    /* @__PURE__ */ React12.createElement(DirectionalChevronIcon, null),
+    /* @__PURE__ */ React12.createElement(PopoverSubMenu, { ...bindMenu(popupState), onClick: popupState.close }, menuItems.default.map(
+      ({ MenuItem: IntegrationsMenuItem, id }) => /* @__PURE__ */ React12.createElement(IntegrationsMenuItem, { key: id })
+    ))
+  ));
+}
+
+// src/components/locations/main-menu-location.tsx
+var { useMenuItems: useMenuItems2 } = mainMenu;
+function MainMenuLocation() {
+  const menuItems = useMenuItems2();
+  const popupState = usePopupState2({
     variant: "popover",
     popupId: "elementor-v2-app-bar-main-menu"
   });
-  return /* @__PURE__ */ React11.createElement(Stack, { sx: { paddingInlineStart: 4 }, direction: "row", alignItems: "center" }, /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React13.createElement(Stack, { sx: { paddingInlineStart: 3 }, direction: "row", alignItems: "center" }, /* @__PURE__ */ React13.createElement(
     ToolbarLogo,
     {
       ...bindTrigger(popupState),
       selected: popupState.isOpen
     }
-  ), /* @__PURE__ */ React11.createElement(
+  ), /* @__PURE__ */ React13.createElement(
     PopoverMenu,
     {
       onClick: popupState.close,
-      ...bindMenu(popupState),
-      PaperProps: {
-        sx: { mt: 4, marginInlineStart: -2 }
-      }
+      ...bindMenu2(popupState),
+      marginThreshold: 8
     },
-    orderedGroups.filter((group) => group.length).map((group, index) => {
-      return [
-        index > 0 ? /* @__PURE__ */ React11.createElement(Divider, { key: index, orientation: "horizontal" }) : null,
-        ...group.map(
-          ({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React11.createElement(MenuItem2, { key: id })
-        )
-      ];
-    })
+    menuItems.default.map(({ MenuItem: MenuItem3, id }) => /* @__PURE__ */ React13.createElement(MenuItem3, { key: id })),
+    /* @__PURE__ */ React13.createElement(IntegrationsMenuLocation, { key: "integrations-location", parentPopupState: popupState }),
+    menuItems.exits.length > 0 && /* @__PURE__ */ React13.createElement(Divider2, null),
+    menuItems.exits.map(({ MenuItem: MenuItem3, id }) => /* @__PURE__ */ React13.createElement(MenuItem3, { key: id }))
   ));
 }
 
 // src/components/locations/tools-menu-location.tsx
-import * as React14 from "react";
+import * as React16 from "react";
 
 // src/components/ui/toolbar-menu.tsx
-import * as React12 from "react";
+import * as React14 from "react";
 import { Stack as Stack2 } from "@elementor/ui";
 function ToolbarMenu({ children, ...props }) {
-  return /* @__PURE__ */ React12.createElement(MenuContextProvider, { type: "toolbar" }, /* @__PURE__ */ React12.createElement(Stack2, { sx: { px: 4 }, spacing: 4, direction: "row", alignItems: "center", ...props }, children));
+  return /* @__PURE__ */ React14.createElement(MenuContextProvider, { type: "toolbar" }, /* @__PURE__ */ React14.createElement(Stack2, { sx: { px: 4 }, spacing: 4, direction: "row", alignItems: "center", ...props }, children));
 }
 
 // src/components/ui/toolbar-menu-more.tsx
-import * as React13 from "react";
-import { bindMenu as bindMenu2, bindTrigger as bindTrigger2, usePopupState as usePopupState2 } from "@elementor/ui";
-import { __ as __2 } from "@wordpress/i18n";
+import * as React15 from "react";
+import { bindMenu as bindMenu3, bindTrigger as bindTrigger2, usePopupState as usePopupState3 } from "@elementor/ui";
+import { __ as __3 } from "@wordpress/i18n";
 import { DotsVerticalIcon } from "@elementor/icons";
 function ToolbarMenuMore({ children, id }) {
-  const popupState = usePopupState2({
+  const popupState = usePopupState3({
     variant: "popover",
     popupId: id
   });
-  return /* @__PURE__ */ React13.createElement(React13.Fragment, null, /* @__PURE__ */ React13.createElement(ToolbarMenuItem, { ...bindTrigger2(popupState), title: __2("More", "elementor") }, /* @__PURE__ */ React13.createElement(DotsVerticalIcon, null)), /* @__PURE__ */ React13.createElement(PopoverMenu, { onClick: popupState.close, ...bindMenu2(popupState) }, children));
+  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.createElement(ToolbarMenuItem, { ...bindTrigger2(popupState), title: __3("More", "elementor") }, /* @__PURE__ */ React15.createElement(DotsVerticalIcon, null)), /* @__PURE__ */ React15.createElement(PopoverMenu, { onClick: popupState.close, ...bindMenu3(popupState) }, children));
 }
 
 // src/components/locations/tools-menu-location.tsx
 var MAX_TOOLBAR_ACTIONS = 5;
-var { useMenuItems: useMenuItems2 } = toolsMenu;
+var { useMenuItems: useMenuItems3 } = toolsMenu;
 function ToolsMenuLocation() {
-  const menuItems = useMenuItems2();
+  const menuItems = useMenuItems3();
   const toolbarMenuItems = menuItems.default.slice(0, MAX_TOOLBAR_ACTIONS);
   const popoverMenuItems = menuItems.default.slice(MAX_TOOLBAR_ACTIONS);
-  return /* @__PURE__ */ React14.createElement(ToolbarMenu, null, toolbarMenuItems.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React14.createElement(MenuItem2, { key: id })), popoverMenuItems.length > 0 && /* @__PURE__ */ React14.createElement(ToolbarMenuMore, { id: "elementor-editor-app-bar-tools-more" }, popoverMenuItems.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React14.createElement(MenuItem2, { key: id }))));
+  return /* @__PURE__ */ React16.createElement(ToolbarMenu, null, toolbarMenuItems.map(({ MenuItem: MenuItem3, id }) => /* @__PURE__ */ React16.createElement(MenuItem3, { key: id })), popoverMenuItems.length > 0 && /* @__PURE__ */ React16.createElement(ToolbarMenuMore, { id: "elementor-editor-app-bar-tools-more" }, popoverMenuItems.map(({ MenuItem: MenuItem3, id }) => /* @__PURE__ */ React16.createElement(MenuItem3, { key: id }))));
 }
 
 // src/components/locations/utilities-menu-location.tsx
-import * as React15 from "react";
-import { Fragment as Fragment2 } from "react";
-import { Divider as Divider2 } from "@elementor/ui";
+import * as React17 from "react";
+import { Fragment as Fragment3 } from "react";
+import { Divider as Divider3 } from "@elementor/ui";
 var MAX_TOOLBAR_ACTIONS2 = 3;
-var { useMenuItems: useMenuItems3 } = utilitiesMenu;
+var { useMenuItems: useMenuItems4 } = utilitiesMenu;
 function UtilitiesMenuLocation() {
-  const menuItems = useMenuItems3();
+  const menuItems = useMenuItems4();
   const toolbarMenuItems = menuItems.default.slice(0, MAX_TOOLBAR_ACTIONS2);
   const popoverMenuItems = menuItems.default.slice(MAX_TOOLBAR_ACTIONS2);
-  return /* @__PURE__ */ React15.createElement(ToolbarMenu, null, toolbarMenuItems.map(
-    ({ MenuItem: MenuItem2, id }, index) => /* @__PURE__ */ React15.createElement(Fragment2, { key: id }, index === 0 && /* @__PURE__ */ React15.createElement(Divider2, { orientation: "vertical" }), /* @__PURE__ */ React15.createElement(MenuItem2, null))
-  ), popoverMenuItems.length > 0 && /* @__PURE__ */ React15.createElement(ToolbarMenuMore, { id: "elementor-editor-app-bar-utilities-more" }, popoverMenuItems.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React15.createElement(MenuItem2, { key: id }))));
+  return /* @__PURE__ */ React17.createElement(ToolbarMenu, null, toolbarMenuItems.map(
+    ({ MenuItem: MenuItem3, id }, index) => /* @__PURE__ */ React17.createElement(Fragment3, { key: id }, index === 0 && /* @__PURE__ */ React17.createElement(Divider3, { orientation: "vertical" }), /* @__PURE__ */ React17.createElement(MenuItem3, null))
+  ), popoverMenuItems.length > 0 && /* @__PURE__ */ React17.createElement(ToolbarMenuMore, { id: "elementor-editor-app-bar-utilities-more" }, popoverMenuItems.map(({ MenuItem: MenuItem3, id }) => /* @__PURE__ */ React17.createElement(MenuItem3, { key: id }))));
 }
 
 // src/components/locations/primary-action-location.tsx
-import * as React16 from "react";
+import * as React18 from "react";
 function PrimaryActionLocation() {
-  return /* @__PURE__ */ React16.createElement(PrimaryActionSlot, null);
+  return /* @__PURE__ */ React18.createElement(PrimaryActionSlot, null);
 }
 
 // src/components/locations/page-indication-location.tsx
-import * as React17 from "react";
+import * as React19 from "react";
 function PageIndicationLocation() {
-  return /* @__PURE__ */ React17.createElement(PageIndicationSlot, null);
+  return /* @__PURE__ */ React19.createElement(PageIndicationSlot, null);
 }
 
 // src/components/locations/responsive-location.tsx
-import * as React18 from "react";
+import * as React20 from "react";
 function ResponsiveLocation() {
-  return /* @__PURE__ */ React18.createElement(ResponsiveSlot, null);
+  return /* @__PURE__ */ React20.createElement(ResponsiveSlot, null);
 }
 
 // src/components/app-bar.tsx
 function AppBar() {
-  return /* @__PURE__ */ React19.createElement(ThemeProvider, { colorScheme: "dark" }, /* @__PURE__ */ React19.createElement(BaseAppBar, { position: "sticky" }, /* @__PURE__ */ React19.createElement(Box3, { display: "grid", gridTemplateColumns: "repeat(3, 1fr)" }, /* @__PURE__ */ React19.createElement(Grid, { container: true }, /* @__PURE__ */ React19.createElement(MainMenuLocation, null), /* @__PURE__ */ React19.createElement(ToolsMenuLocation, null)), /* @__PURE__ */ React19.createElement(Grid, { container: true, justifyContent: "center" }, /* @__PURE__ */ React19.createElement(ToolbarMenu, { spacing: 3 }, /* @__PURE__ */ React19.createElement(Divider3, { orientation: "vertical" }), /* @__PURE__ */ React19.createElement(PageIndicationLocation, null), /* @__PURE__ */ React19.createElement(Divider3, { orientation: "vertical" }), /* @__PURE__ */ React19.createElement(ResponsiveLocation, null), /* @__PURE__ */ React19.createElement(Divider3, { orientation: "vertical" }))), /* @__PURE__ */ React19.createElement(Grid, { container: true, justifyContent: "flex-end" }, /* @__PURE__ */ React19.createElement(UtilitiesMenuLocation, null), /* @__PURE__ */ React19.createElement(PrimaryActionLocation, null)))));
+  return /* @__PURE__ */ React21.createElement(ThemeProvider, { colorScheme: "dark" }, /* @__PURE__ */ React21.createElement(BaseAppBar, { position: "sticky" }, /* @__PURE__ */ React21.createElement(Box3, { display: "grid", gridTemplateColumns: "repeat(3, 1fr)" }, /* @__PURE__ */ React21.createElement(Grid, { container: true }, /* @__PURE__ */ React21.createElement(MainMenuLocation, null), /* @__PURE__ */ React21.createElement(ToolsMenuLocation, null)), /* @__PURE__ */ React21.createElement(Grid, { container: true, justifyContent: "center" }, /* @__PURE__ */ React21.createElement(ToolbarMenu, { spacing: 3 }, /* @__PURE__ */ React21.createElement(Divider4, { orientation: "vertical" }), /* @__PURE__ */ React21.createElement(PageIndicationLocation, null), /* @__PURE__ */ React21.createElement(Divider4, { orientation: "vertical" }), /* @__PURE__ */ React21.createElement(ResponsiveLocation, null), /* @__PURE__ */ React21.createElement(Divider4, { orientation: "vertical" }))), /* @__PURE__ */ React21.createElement(Grid, { container: true, justifyContent: "flex-end" }, /* @__PURE__ */ React21.createElement(UtilitiesMenuLocation, null), /* @__PURE__ */ React21.createElement(PrimaryActionLocation, null)))));
 }
 
 // src/init.ts
@@ -412,9 +472,9 @@ function redirectOldMenus() {
 }
 
 // src/extensions/documents-indicator/components/settings-button.tsx
-import * as React20 from "react";
+import * as React22 from "react";
 import { Box as Box4, ToggleButton as ToggleButton3, Tooltip as Tooltip3 } from "@elementor/ui";
-import { __ as __3 } from "@wordpress/i18n";
+import { __ as __4 } from "@wordpress/i18n";
 import { openRoute as openRoute2, useRouteStatus } from "@elementor/editor-v1-adapters";
 import { SettingsIcon } from "@elementor/icons";
 import { useActiveDocument, useHostDocument } from "@elementor/editor-documents";
@@ -426,8 +486,8 @@ function SettingsButton() {
   if (!document2) {
     return null;
   }
-  const title = __3("%s Settings", "elementor").replace("%s", document2.type.label);
-  return /* @__PURE__ */ React20.createElement(Tooltip3, { title }, /* @__PURE__ */ React20.createElement(Box4, { component: "span", "aria-label": void 0 }, /* @__PURE__ */ React20.createElement(
+  const title = __4("%s Settings", "elementor").replace("%s", document2.type.label);
+  return /* @__PURE__ */ React22.createElement(Tooltip3, { title }, /* @__PURE__ */ React22.createElement(Box4, { component: "span", "aria-label": void 0 }, /* @__PURE__ */ React22.createElement(
     ToggleButton3,
     {
       value: "document-settings",
@@ -437,7 +497,7 @@ function SettingsButton() {
       "aria-label": title,
       size: "small"
     },
-    /* @__PURE__ */ React20.createElement(SettingsIcon, null)
+    /* @__PURE__ */ React22.createElement(SettingsIcon, null)
   )));
 }
 
@@ -454,7 +514,7 @@ function init() {
 }
 
 // src/extensions/documents-preview/hooks/use-action-props.ts
-import { __ as __4 } from "@wordpress/i18n";
+import { __ as __5 } from "@wordpress/i18n";
 import { EyeIcon } from "@elementor/icons";
 import { runCommand } from "@elementor/editor-v1-adapters";
 import { useActiveDocument as useActiveDocument2 } from "@elementor/editor-documents";
@@ -462,7 +522,7 @@ function useActionProps() {
   const document2 = useActiveDocument2();
   return {
     icon: EyeIcon,
-    title: __4("Preview Changes", "elementor"),
+    title: __5("Preview Changes", "elementor"),
     onClick: () => document2 && runCommand("editor/documents/preview", {
       id: document2.id,
       force: true
@@ -481,7 +541,7 @@ function init2() {
 }
 
 // src/extensions/documents-save/hooks/use-document-save-draft-props.ts
-import { __ as __5 } from "@wordpress/i18n";
+import { __ as __6 } from "@wordpress/i18n";
 import { FileReportIcon } from "@elementor/icons";
 import { useActiveDocument as useActiveDocument3, useActiveDocumentActions } from "@elementor/editor-documents";
 function useDocumentSaveDraftProps() {
@@ -489,33 +549,33 @@ function useDocumentSaveDraftProps() {
   const { saveDraft } = useActiveDocumentActions();
   return {
     icon: FileReportIcon,
-    title: __5("Save Draft", "elementor"),
+    title: __6("Save Draft", "elementor"),
     onClick: saveDraft,
     disabled: !document2 || document2.isSaving || document2.isSavingDraft || !document2.isDirty
   };
 }
 
 // src/extensions/documents-save/hooks/use-document-save-template-props.ts
-import { __ as __6 } from "@wordpress/i18n";
+import { __ as __7 } from "@wordpress/i18n";
 import { FolderIcon } from "@elementor/icons";
 import { useActiveDocumentActions as useActiveDocumentActions2 } from "@elementor/editor-documents";
 function useDocumentSaveTemplateProps() {
   const { saveTemplate } = useActiveDocumentActions2();
   return {
     icon: FolderIcon,
-    title: __6("Save as Template", "elementor"),
+    title: __7("Save as Template", "elementor"),
     onClick: saveTemplate
   };
 }
 
 // src/extensions/documents-save/components/primary-action.tsx
-import * as React22 from "react";
-import { __ as __7 } from "@wordpress/i18n";
+import * as React24 from "react";
+import { __ as __8 } from "@wordpress/i18n";
 
 // src/extensions/documents-save/components/primary-action-menu.tsx
-import * as React21 from "react";
-import { Divider as Divider4, styled as styled2 } from "@elementor/ui";
-var { useMenuItems: useMenuItems4 } = documentOptionsMenu;
+import * as React23 from "react";
+import { Divider as Divider5, styled as styled2 } from "@elementor/ui";
+var { useMenuItems: useMenuItems5 } = documentOptionsMenu;
 var StyledPopoverMenu = styled2(PopoverMenu)`
 	& > .MuiPopover-paper > .MuiList-root > .MuiDivider-root {
 		&:only-child, /* A divider is being rendered lonely */
@@ -526,8 +586,8 @@ var StyledPopoverMenu = styled2(PopoverMenu)`
 	}
 `;
 function PrimaryActionMenu(props) {
-  const { save: saveActions, default: defaultActions } = useMenuItems4();
-  return /* @__PURE__ */ React21.createElement(
+  const { save: saveActions, default: defaultActions } = useMenuItems5();
+  return /* @__PURE__ */ React23.createElement(
     StyledPopoverMenu,
     {
       ...props,
@@ -539,36 +599,37 @@ function PrimaryActionMenu(props) {
         vertical: "top",
         horizontal: "right"
       },
+      marginThreshold: 8,
       PaperProps: {
-        sx: { mt: 2, ml: 3 }
+        sx: { mt: 2 }
       }
     },
-    saveActions.map(({ MenuItem: MenuItem2, id }, index) => [
-      index > 0 && /* @__PURE__ */ React21.createElement(Divider4, { key: `${id}-divider` }),
-      /* @__PURE__ */ React21.createElement(MenuItem2, { key: id })
+    saveActions.map(({ MenuItem: MenuItem3, id }, index) => [
+      index > 0 && /* @__PURE__ */ React23.createElement(Divider5, { key: `${id}-divider` }),
+      /* @__PURE__ */ React23.createElement(MenuItem3, { key: id })
     ]),
-    defaultActions.length > 0 && /* @__PURE__ */ React21.createElement(Divider4, null),
-    defaultActions.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React21.createElement(MenuItem2, { key: id }))
+    defaultActions.length > 0 && /* @__PURE__ */ React23.createElement(Divider5, null),
+    defaultActions.map(({ MenuItem: MenuItem3, id }) => /* @__PURE__ */ React23.createElement(MenuItem3, { key: id }))
   );
 }
 
 // src/extensions/documents-save/components/primary-action.tsx
 import {
-  bindMenu as bindMenu3,
+  bindMenu as bindMenu4,
   bindTrigger as bindTrigger3,
   Box as Box5,
   Button,
   ButtonGroup,
   CircularProgress,
   Tooltip as Tooltip4,
-  usePopupState as usePopupState3
+  usePopupState as usePopupState4
 } from "@elementor/ui";
 import { useActiveDocument as useActiveDocument4, useActiveDocumentActions as useActiveDocumentActions3 } from "@elementor/editor-documents";
 import { ChevronDownIcon } from "@elementor/icons";
 function PrimaryAction() {
   const document2 = useActiveDocument4();
   const { save } = useActiveDocumentActions3();
-  const popupState = usePopupState3({
+  const popupState = usePopupState4({
     variant: "popover",
     popupId: "document-save-options"
   });
@@ -577,7 +638,7 @@ function PrimaryAction() {
   }
   const isDisabled = !isEnabled(document2);
   const shouldShowSpinner = document2.isSaving && !isDisabled;
-  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(ButtonGroup, { size: "medium", variant: "contained" }, /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(ButtonGroup, { size: "medium", variant: "contained" }, /* @__PURE__ */ React24.createElement(
     Button,
     {
       onClick: () => !document2.isSaving && save(),
@@ -591,11 +652,11 @@ function PrimaryAction() {
       },
       disabled: isDisabled
     },
-    shouldShowSpinner ? /* @__PURE__ */ React22.createElement(CircularProgress, null) : getLabel(document2)
-  ), /* @__PURE__ */ React22.createElement(
+    shouldShowSpinner ? /* @__PURE__ */ React24.createElement(CircularProgress, null) : getLabel(document2)
+  ), /* @__PURE__ */ React24.createElement(
     Tooltip4,
     {
-      title: __7("Save Options", "elementor"),
+      title: __8("Save Options", "elementor"),
       PopperProps: {
         sx: {
           "&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom": {
@@ -605,20 +666,20 @@ function PrimaryAction() {
         }
       }
     },
-    /* @__PURE__ */ React22.createElement(Box5, { component: "span", "aria-label": void 0 }, /* @__PURE__ */ React22.createElement(
+    /* @__PURE__ */ React24.createElement(Box5, { component: "span", "aria-label": void 0 }, /* @__PURE__ */ React24.createElement(
       Button,
       {
         ...bindTrigger3(popupState),
         sx: { px: 0, height: "100%" },
         disabled: document2.type.value === "kit",
-        "aria-label": __7("Save Options", "elementor")
+        "aria-label": __8("Save Options", "elementor")
       },
-      /* @__PURE__ */ React22.createElement(ChevronDownIcon, null)
+      /* @__PURE__ */ React24.createElement(ChevronDownIcon, null)
     ))
-  )), /* @__PURE__ */ React22.createElement(PrimaryActionMenu, { ...bindMenu3(popupState), onClick: popupState.close }));
+  )), /* @__PURE__ */ React24.createElement(PrimaryActionMenu, { ...bindMenu4(popupState), onClick: popupState.close }));
 }
 function getLabel(document2) {
-  return document2.userCan.publish ? __7("Publish", "elementor") : __7("Submit", "elementor");
+  return document2.userCan.publish ? __8("Publish", "elementor") : __8("Submit", "elementor");
 }
 function isEnabled(document2) {
   if (document2.type.value === "kit") {
@@ -650,11 +711,11 @@ function init3() {
 }
 
 // src/extensions/elements/sync/sync-panel-title.ts
-import { __ as __8 } from "@wordpress/i18n";
+import { __ as __9 } from "@wordpress/i18n";
 import { isRouteActive, listenTo as listenTo2, routeOpenEvent as routeOpenEvent2, v1ReadyEvent } from "@elementor/editor-v1-adapters";
 function syncPanelTitle() {
-  const panelTitle = __8("Elements", "elementor");
-  const tabTitle = __8("Widgets", "elementor");
+  const panelTitle = __9("Elements", "elementor");
+  const tabTitle = __9("Widgets", "elementor");
   listenTo2(
     routeOpenEvent2("panel/elements"),
     () => {
@@ -684,12 +745,12 @@ function setTabTitle(title) {
 
 // src/extensions/elements/hooks/use-action-props.ts
 import { PlusIcon } from "@elementor/icons";
-import { __ as __9 } from "@wordpress/i18n";
+import { __ as __10 } from "@wordpress/i18n";
 import { openRoute as openRoute3, useRouteStatus as useRouteStatus2 } from "@elementor/editor-v1-adapters";
 function useActionProps2() {
   const { isActive, isBlocked } = useRouteStatus2("panel/elements");
   return {
-    title: __9("Add Element", "elementor"),
+    title: __10("Add Element", "elementor"),
     icon: PlusIcon,
     onClick: () => openRoute3("panel/elements/categories"),
     selected: isActive,
@@ -708,7 +769,7 @@ function init4() {
 }
 
 // src/extensions/finder/hooks/use-action-props.ts
-import { __ as __10 } from "@wordpress/i18n";
+import { __ as __11 } from "@wordpress/i18n";
 import { SearchIcon } from "@elementor/icons";
 import { runCommand as runCommand2, useRouteStatus as useRouteStatus3 } from "@elementor/editor-v1-adapters";
 function useActionProps3() {
@@ -717,7 +778,7 @@ function useActionProps3() {
     blockOnPreviewMode: false
   });
   return {
-    title: __10("Finder", "elementor"),
+    title: __11("Finder", "elementor"),
     icon: SearchIcon,
     onClick: () => runCommand2("finder/toggle"),
     selected: isActive,
@@ -736,7 +797,7 @@ function init5() {
 }
 
 // src/extensions/help/index.ts
-import { __ as __11 } from "@wordpress/i18n";
+import { __ as __12 } from "@wordpress/i18n";
 import { HelpIcon } from "@elementor/icons";
 function init6() {
   utilitiesMenu.registerLink({
@@ -745,7 +806,7 @@ function init6() {
     // After Finder.
     useProps: () => {
       return {
-        title: __11("Help", "elementor"),
+        title: __12("Help", "elementor"),
         href: "https://go.elementor.com/editor-top-bar-learn/",
         icon: HelpIcon,
         target: "_blank"
@@ -756,12 +817,12 @@ function init6() {
 
 // src/extensions/history/hooks/use-action-props.ts
 import { HistoryIcon } from "@elementor/icons";
-import { __ as __12 } from "@wordpress/i18n";
+import { __ as __13 } from "@wordpress/i18n";
 import { openRoute as openRoute4, useRouteStatus as useRouteStatus4 } from "@elementor/editor-v1-adapters";
 function useActionProps4() {
   const { isActive, isBlocked } = useRouteStatus4("panel/history");
   return {
-    title: __12("History", "elementor"),
+    title: __13("History", "elementor"),
     icon: HistoryIcon,
     onClick: () => openRoute4("panel/history/actions"),
     selected: isActive,
@@ -779,13 +840,13 @@ function init7() {
 }
 
 // src/extensions/keyboard-shortcuts/hooks/use-action-props.ts
-import { __ as __13 } from "@wordpress/i18n";
+import { __ as __14 } from "@wordpress/i18n";
 import { KeyboardIcon } from "@elementor/icons";
 import { runCommand as runCommand3 } from "@elementor/editor-v1-adapters";
 function useActionProps5() {
   return {
     icon: KeyboardIcon,
-    title: __13("Keyboard Shortcuts", "elementor"),
+    title: __14("Keyboard Shortcuts", "elementor"),
     onClick: () => runCommand3("shortcuts/open")
   };
 }
@@ -805,10 +866,10 @@ function init8() {
 import { injectIntoTop } from "@elementor/editor";
 
 // src/extensions/site-settings/components/portalled-primary-action.tsx
-import * as React25 from "react";
+import * as React27 from "react";
 
 // src/extensions/site-settings/components/portal.tsx
-import * as React23 from "react";
+import * as React25 from "react";
 import { Portal as BasePortal } from "@elementor/ui";
 import { isRouteActive as isRouteActive2, routeCloseEvent, routeOpenEvent as routeOpenEvent3, useListenTo } from "@elementor/editor-v1-adapters";
 function Portal(props) {
@@ -822,26 +883,26 @@ function Portal(props) {
   if (!containerRef.current) {
     return null;
   }
-  return /* @__PURE__ */ React23.createElement(BasePortal, { container: containerRef.current, ...props });
+  return /* @__PURE__ */ React25.createElement(BasePortal, { container: containerRef.current, ...props });
 }
 function getContainerRef() {
   return isRouteActive2("panel/global") ? { current: document.querySelector("#elementor-panel-inner") } : { current: null };
 }
 
 // src/extensions/site-settings/components/primary-action.tsx
-import * as React24 from "react";
+import * as React26 from "react";
 import { useActiveDocument as useActiveDocument5, useActiveDocumentActions as useActiveDocumentActions4 } from "@elementor/editor-documents";
 import { Button as Button2, CircularProgress as CircularProgress2, Paper } from "@elementor/ui";
-import { __ as __14 } from "@wordpress/i18n";
+import { __ as __15 } from "@wordpress/i18n";
 function PrimaryAction2() {
   const document2 = useActiveDocument5();
   const { save } = useActiveDocumentActions4();
-  return /* @__PURE__ */ React24.createElement(Paper, { sx: {
+  return /* @__PURE__ */ React26.createElement(Paper, { sx: {
     px: 5,
     py: 4,
     borderTop: 1,
     borderColor: "divider"
-  } }, /* @__PURE__ */ React24.createElement(
+  } }, /* @__PURE__ */ React26.createElement(
     Button2,
     {
       variant: "contained",
@@ -850,17 +911,17 @@ function PrimaryAction2() {
       sx: { width: "100%" },
       onClick: () => document2 && !document2.isSaving ? save() : null
     },
-    document2?.isSaving ? /* @__PURE__ */ React24.createElement(CircularProgress2, null) : __14("Save Changes", "elementor")
+    document2?.isSaving ? /* @__PURE__ */ React26.createElement(CircularProgress2, null) : __15("Save Changes", "elementor")
   ));
 }
 
 // src/extensions/site-settings/components/portalled-primary-action.tsx
 function PortalledPrimaryAction() {
-  return /* @__PURE__ */ React25.createElement(Portal, null, /* @__PURE__ */ React25.createElement(PrimaryAction2, null));
+  return /* @__PURE__ */ React27.createElement(Portal, null, /* @__PURE__ */ React27.createElement(PrimaryAction2, null));
 }
 
 // src/extensions/site-settings/hooks/use-action-props.ts
-import { __ as __15 } from "@wordpress/i18n";
+import { __ as __16 } from "@wordpress/i18n";
 import { runCommand as runCommand4, useRouteStatus as useRouteStatus5 } from "@elementor/editor-v1-adapters";
 import { AdjustmentsHorizontalIcon } from "@elementor/icons";
 function useActionProps6() {
@@ -868,7 +929,7 @@ function useActionProps6() {
     blockOnKitRoutes: false
   });
   return {
-    title: __15("Site Settings", "elementor"),
+    title: __16("Site Settings", "elementor"),
     icon: AdjustmentsHorizontalIcon,
     onClick: () => isActive ? runCommand4("panel/global/close") : runCommand4("panel/global/open"),
     selected: isActive,
@@ -890,13 +951,13 @@ function init9() {
 }
 
 // src/extensions/structure/hooks/use-action-props.ts
-import { __ as __16 } from "@wordpress/i18n";
+import { __ as __17 } from "@wordpress/i18n";
 import { runCommand as runCommand5, useRouteStatus as useRouteStatus6 } from "@elementor/editor-v1-adapters";
 import { StructureIcon } from "@elementor/icons";
 function useActionProps7() {
   const { isActive, isBlocked } = useRouteStatus6("navigator");
   return {
-    title: __16("Structure", "elementor"),
+    title: __17("Structure", "elementor"),
     icon: StructureIcon,
     onClick: () => runCommand5("navigator/toggle"),
     selected: isActive,
@@ -914,13 +975,13 @@ function init10() {
 }
 
 // src/extensions/theme-builder/hooks/use-action-props.ts
-import { __ as __17 } from "@wordpress/i18n";
+import { __ as __18 } from "@wordpress/i18n";
 import { ThemeBuilderIcon } from "@elementor/icons";
 import { runCommand as runCommand6 } from "@elementor/editor-v1-adapters";
 function useActionProps8() {
   return {
     icon: ThemeBuilderIcon,
-    title: __17("Theme Builder", "elementor"),
+    title: __18("Theme Builder", "elementor"),
     onClick: () => runCommand6("app/open")
   };
 }
@@ -934,14 +995,14 @@ function init11() {
 }
 
 // src/extensions/user-preferences/hooks/use-action-props.ts
-import { __ as __18 } from "@wordpress/i18n";
+import { __ as __19 } from "@wordpress/i18n";
 import { ToggleRightIcon } from "@elementor/icons";
 import { openRoute as openRoute5, useRouteStatus as useRouteStatus7 } from "@elementor/editor-v1-adapters";
 function useActionProps9() {
   const { isActive, isBlocked } = useRouteStatus7("panel/editor-preferences");
   return {
     icon: ToggleRightIcon,
-    title: __18("User Preferences", "elementor"),
+    title: __19("User Preferences", "elementor"),
     onClick: () => openRoute5("panel/editor-preferences"),
     selected: isActive,
     disabled: isBlocked
@@ -959,7 +1020,7 @@ function init12() {
 }
 
 // src/extensions/wordpress/index.ts
-import { __ as __19 } from "@wordpress/i18n";
+import { __ as __20 } from "@wordpress/i18n";
 import { WordpressIcon } from "@elementor/icons";
 import { useActiveDocument as useActiveDocument6 } from "@elementor/editor-documents";
 function init13() {
@@ -969,7 +1030,7 @@ function init13() {
     useProps: () => {
       const document2 = useActiveDocument6();
       return {
-        title: __19("Exit to WordPress", "elementor"),
+        title: __20("Exit to WordPress", "elementor"),
         href: document2?.links?.platformEdit,
         icon: WordpressIcon
       };
@@ -1011,6 +1072,7 @@ export {
   injectIntoPageIndication,
   injectIntoPrimaryAction,
   injectIntoResponsive,
+  integrationsMenu,
   mainMenu,
   toolsMenu,
   utilitiesMenu