@elementor/editor-app-bar 0.1.0

package/dist/index.mjs

@@ -0,0 +1,1017 @@
+// src/locations/menus.tsx
+import * as React8 from "react";
+import { useMemo } from "react";
+import { inject, useInjectionsOf } from "@elementor/locations";
+
+// src/components/actions/action.tsx
+import * as React4 from "react";
+
+// src/contexts/menu-context.tsx
+import * as React from "react";
+import { createContext, useContext } from "react";
+var MenuContext = createContext({ type: "toolbar" });
+function MenuContextProvider({ type, children }) {
+  return /* @__PURE__ */ React.createElement(MenuContext.Provider, { value: { type } }, children);
+}
+function useMenuContext() {
+  return useContext(MenuContext);
+}
+
+// src/components/ui/toolbar-menu-item.tsx
+import * as React2 from "react";
+import { Box, IconButton, Tooltip } from "@elementor/ui";
+function ToolbarMenuItem({ title, ...props }) {
+  return /* @__PURE__ */ React2.createElement(Tooltip, { title }, /* @__PURE__ */ React2.createElement(Box, { component: "span", "aria-label": void 0 }, /* @__PURE__ */ React2.createElement(IconButton, { ...props, "aria-label": title, size: "small" })));
+}
+
+// src/components/ui/popover-menu-item.tsx
+import * as React3 from "react";
+import {
+  MenuItem,
+  ListItemText,
+  ListItemIcon,
+  withDirection
+} from "@elementor/ui";
+import { ArrowUpRightIcon } from "@elementor/icons";
+var DirectionalArrowIcon = withDirection(ArrowUpRightIcon);
+function PopoverMenuItem({ text, icon, onClick, href, target, disabled, ...props }) {
+  const isExternalLink = href && target === "_blank";
+  return /* @__PURE__ */ React3.createElement(
+    MenuItem,
+    {
+      ...props,
+      disabled,
+      onClick,
+      component: href ? "a" : "div",
+      href,
+      target
+    },
+    /* @__PURE__ */ React3.createElement(ListItemIcon, null, icon),
+    /* @__PURE__ */ React3.createElement(ListItemText, { primary: text }),
+    isExternalLink && /* @__PURE__ */ React3.createElement(DirectionalArrowIcon, null)
+  );
+}
+
+// src/components/actions/action.tsx
+function Action({ icon: Icon, title, visible = true, ...props }) {
+  const { type } = useMenuContext();
+  if (!visible) {
+    return null;
+  }
+  return type === "toolbar" ? /* @__PURE__ */ React4.createElement(ToolbarMenuItem, { title, ...props }, /* @__PURE__ */ React4.createElement(Icon, null)) : /* @__PURE__ */ React4.createElement(
+    PopoverMenuItem,
+    {
+      ...props,
+      text: title,
+      icon: /* @__PURE__ */ React4.createElement(Icon, null)
+    }
+  );
+}
+
+// src/components/actions/toggle-action.tsx
+import * as React6 from "react";
+
+// src/components/ui/toolbar-menu-toggle-item.tsx
+import * as React5 from "react";
+import { Box as Box2, ToggleButton, Tooltip as Tooltip2 } from "@elementor/ui";
+function ToolbarMenuToggleItem({ title, onClick, ...props }) {
+  return /* @__PURE__ */ React5.createElement(Tooltip2, { title }, /* @__PURE__ */ React5.createElement(Box2, { component: "span", "aria-label": void 0 }, /* @__PURE__ */ React5.createElement(ToggleButton, { ...props, onChange: onClick, "aria-label": title, size: "small" })));
+}
+
+// src/components/actions/toggle-action.tsx
+function ToggleAction({ icon: Icon, title, value, visible = true, ...props }) {
+  const { type } = useMenuContext();
+  if (!visible) {
+    return null;
+  }
+  return type === "toolbar" ? /* @__PURE__ */ React6.createElement(ToolbarMenuToggleItem, { value: value || title, title, ...props }, /* @__PURE__ */ React6.createElement(Icon, null)) : /* @__PURE__ */ React6.createElement(
+    PopoverMenuItem,
+    {
+      ...props,
+      text: title,
+      icon: /* @__PURE__ */ React6.createElement(Icon, null)
+    }
+  );
+}
+
+// src/components/actions/link.tsx
+import * as React7 from "react";
+function Link({ icon: Icon, title, visible = true, ...props }) {
+  const { type } = useMenuContext();
+  if (!visible) {
+    return null;
+  }
+  return type === "toolbar" ? /* @__PURE__ */ React7.createElement(ToolbarMenuItem, { title, ...props }, /* @__PURE__ */ React7.createElement(Icon, null)) : /* @__PURE__ */ React7.createElement(
+    PopoverMenuItem,
+    {
+      ...props,
+      text: title,
+      icon: /* @__PURE__ */ React7.createElement(Icon, null)
+    }
+  );
+}
+
+// src/locations/menus.tsx
+function createMenu({ name: menuName, groups = [] }) {
+  const menuGroups = [
+    ...groups,
+    "default"
+  ];
+  const registerAction = createRegisterMenuItem({
+    menuName,
+    menuGroups,
+    component: Action
+  });
+  const registerToggleAction = createRegisterMenuItem({
+    menuName,
+    menuGroups,
+    component: ToggleAction
+  });
+  const registerLink = createRegisterMenuItem({
+    menuName,
+    menuGroups,
+    component: Link
+  });
+  const useMenuItems5 = createUseMenuItems({
+    menuName,
+    menuGroups
+  });
+  return {
+    registerAction,
+    registerToggleAction,
+    registerLink,
+    useMenuItems: useMenuItems5
+  };
+}
+function createRegisterMenuItem({ menuName, menuGroups, component }) {
+  return ({ group = "default", name, overwrite, priority, ...args }) => {
+    if (!menuGroups.includes(group)) {
+      return;
+    }
+    const useProps = "props" in args ? () => args.props : args.useProps;
+    const Component = component;
+    const Filler = (props) => {
+      const componentProps = useProps();
+      return /* @__PURE__ */ React8.createElement(Component, { ...props, ...componentProps });
+    };
+    const location = getMenuLocationId(menuName, group);
+    inject({
+      location,
+      name,
+      filler: Filler,
+      options: {
+        priority,
+        overwrite
+      }
+    });
+  };
+}
+function createUseMenuItems({ menuName, menuGroups }) {
+  const locations = menuGroups.map((group) => getMenuLocationId(menuName, group));
+  return () => {
+    const injectionsGroups = useInjectionsOf(locations);
+    return useMemo(() => {
+      return injectionsGroups.reduce((acc, injections, index) => {
+        const groupName = menuGroups[index];
+        return {
+          ...acc,
+          [groupName]: injections.map((injection) => ({
+            id: injection.id,
+            MenuItem: injection.filler
+          }))
+        };
+      }, {});
+    }, [injectionsGroups]);
+  };
+}
+function getMenuLocationId(menu, group) {
+  return `editor/app-bar/${menu}/${group}`;
+}
+
+// src/locations/index.ts
+import { createInjectorFor } from "@elementor/locations";
+
+// src/locations/consts.ts
+var LOCATION_PAGE_INDICATION = "editor/app-bar/page-indication";
+var LOCATION_RESPONSIVE = "editor/app-bar/responsive";
+var LOCATION_PRIMARY_ACTION = "editor/app-bar/primary-action";
+
+// src/locations/index.ts
+var injectIntoPageIndication = createInjectorFor(LOCATION_PAGE_INDICATION);
+var injectIntoResponsive = createInjectorFor(LOCATION_RESPONSIVE);
+var injectIntoPrimaryAction = createInjectorFor(LOCATION_PRIMARY_ACTION);
+var mainMenu = createMenu({
+  name: "main",
+  groups: ["exits"]
+});
+var toolsMenu = createMenu({
+  name: "tools"
+});
+var utilitiesMenu = createMenu({
+  name: "utilities"
+});
+var documentOptionsMenu = createMenu({
+  name: "document-options",
+  groups: ["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";
+
+// src/components/locations/main-menu-location.tsx
+import * as React11 from "react";
+import { usePopupState, bindMenu, bindTrigger, Stack, Divider } from "@elementor/ui";
+
+// src/components/ui/popover-menu.tsx
+import * as React9 from "react";
+import { Menu } from "@elementor/ui";
+function PopoverMenu({ children, ...props }) {
+  return /* @__PURE__ */ React9.createElement(MenuContextProvider, { type: "popover" }, /* @__PURE__ */ React9.createElement(
+    Menu,
+    {
+      PaperProps: {
+        sx: { mt: 4 }
+      },
+      ...props,
+      MenuListProps: {
+        component: "div"
+      }
+    },
+    children
+  ));
+}
+
+// src/components/ui/toolbar-logo.tsx
+import * as React10 from "react";
+import { useState } from "react";
+import { __ } from "@wordpress/i18n";
+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,
+  "&.MuiToggleButton-root:hover": {
+    backgroundColor: "initial"
+  },
+  "&.MuiToggleButton-root.Mui-selected": {
+    backgroundColor: "initial"
+  }
+}));
+var StyledElementorLogo = styled(ElementorLogo, {
+  shouldForwardProp: (prop) => prop !== "showMenuIcon"
+})(({ theme, showMenuIcon }) => ({
+  width: "auto",
+  height: "100%",
+  "& path": {
+    fill: "initial",
+    transition: "all 0.2s linear",
+    transformOrigin: "bottom left",
+    "&:first-of-type": {
+      transitionDelay: !showMenuIcon && "0.2s",
+      transform: showMenuIcon && "translateY(-9px) scaleY(0)"
+    },
+    "&:not(:first-of-type)": {
+      // Emotion automatically change 4 to -4 in RTL moode.
+      transform: !showMenuIcon && `translateX(${theme.direction === "rtl" ? "4" : "9"}px) scaleX(0.6)`
+    },
+    "&:nth-of-type(2)": {
+      transitionDelay: showMenuIcon ? "0" : "0.2s"
+    },
+    "&:nth-of-type(3)": {
+      transitionDelay: "0.1s"
+    },
+    "&:nth-of-type(4)": {
+      transitionDelay: showMenuIcon ? "0.2s" : "0"
+    }
+  }
+}));
+function ToolbarLogo(props) {
+  const [isHoverState, setIsHoverState] = useState(false);
+  const showMenuIcon = props.selected || isHoverState;
+  return /* @__PURE__ */ React10.createElement(
+    StyledToggleButton,
+    {
+      ...props,
+      value: "selected",
+      size: "small",
+      onMouseEnter: () => setIsHoverState(true),
+      onMouseLeave: () => setIsHoverState(false)
+    },
+    /* @__PURE__ */ React10.createElement(StyledElementorLogo, { titleAccess: __("Elementor Logo", "elementor"), showMenuIcon })
+  );
+}
+
+// src/components/locations/main-menu-location.tsx
+var { useMenuItems } = mainMenu;
+function MainMenuLocation() {
+  const menuItems = useMenuItems();
+  const orderedGroups = [
+    menuItems.default,
+    menuItems.exits
+  ];
+  const popupState = usePopupState({
+    variant: "popover",
+    popupId: "elementor-v2-app-bar-main-menu"
+  });
+  return /* @__PURE__ */ React11.createElement(Stack, { sx: { paddingInlineStart: 4 }, direction: "row", alignItems: "center" }, /* @__PURE__ */ React11.createElement(
+    ToolbarLogo,
+    {
+      ...bindTrigger(popupState),
+      selected: popupState.isOpen
+    }
+  ), /* @__PURE__ */ React11.createElement(
+    PopoverMenu,
+    {
+      onClick: popupState.close,
+      ...bindMenu(popupState),
+      PaperProps: {
+        sx: { mt: 4, marginInlineStart: -2 }
+      }
+    },
+    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 })
+        )
+      ];
+    })
+  ));
+}
+
+// src/components/locations/tools-menu-location.tsx
+import * as React14 from "react";
+
+// src/components/ui/toolbar-menu.tsx
+import * as React12 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));
+}
+
+// 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 { DotsVerticalIcon } from "@elementor/icons";
+function ToolbarMenuMore({ children, id }) {
+  const popupState = usePopupState2({
+    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));
+}
+
+// src/components/locations/tools-menu-location.tsx
+var MAX_TOOLBAR_ACTIONS = 5;
+var { useMenuItems: useMenuItems2 } = toolsMenu;
+function ToolsMenuLocation() {
+  const menuItems = useMenuItems2();
+  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 }))));
+}
+
+// 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";
+var MAX_TOOLBAR_ACTIONS2 = 3;
+var { useMenuItems: useMenuItems3 } = utilitiesMenu;
+function UtilitiesMenuLocation() {
+  const menuItems = useMenuItems3();
+  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 }))));
+}
+
+// src/components/locations/primary-action-location.tsx
+import * as React16 from "react";
+import { Slot } from "@elementor/locations";
+function PrimaryActionLocation() {
+  return /* @__PURE__ */ React16.createElement(Slot, { location: LOCATION_PRIMARY_ACTION });
+}
+
+// src/components/locations/page-indication-location.tsx
+import * as React17 from "react";
+import { Slot as Slot2 } from "@elementor/locations";
+function PageIndicationLocation() {
+  return /* @__PURE__ */ React17.createElement(Slot2, { location: LOCATION_PAGE_INDICATION });
+}
+
+// src/components/locations/responsive-location.tsx
+import * as React18 from "react";
+import { Slot as Slot3 } from "@elementor/locations";
+function ResponsiveLocation() {
+  return /* @__PURE__ */ React18.createElement(Slot3, { location: LOCATION_RESPONSIVE });
+}
+
+// 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)))));
+}
+
+// src/init.ts
+import { injectIntoTop as injectIntoTop2 } from "@elementor/editor";
+
+// src/sync/redirect-old-menus.ts
+import { listenTo, openRoute, routeOpenEvent } from "@elementor/editor-v1-adapters";
+function redirectOldMenus() {
+  listenTo(routeOpenEvent("panel/menu"), () => {
+    openRoute("panel/elements/categories");
+  });
+}
+
+// src/extensions/documents-indicator/components/settings-button.tsx
+import * as React20 from "react";
+import { Box as Box4, ToggleButton as ToggleButton3, Tooltip as Tooltip3 } from "@elementor/ui";
+import { __ as __3 } 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";
+function SettingsButton() {
+  const activeDocument = useActiveDocument();
+  const hostDocument = useHostDocument();
+  const document2 = activeDocument && activeDocument.type.value !== "kit" ? activeDocument : hostDocument;
+  const { isActive, isBlocked } = useRouteStatus("panel/page-settings");
+  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(
+    ToggleButton3,
+    {
+      value: "document-settings",
+      selected: isActive,
+      disabled: isBlocked,
+      onChange: () => openRoute2("panel/page-settings/settings"),
+      "aria-label": title,
+      size: "small"
+    },
+    /* @__PURE__ */ React20.createElement(SettingsIcon, null)
+  )));
+}
+
+// src/extensions/documents-indicator/index.ts
+function init() {
+  injectIntoPageIndication({
+    name: "document-settings-button",
+    filler: SettingsButton,
+    options: {
+      priority: 20
+      // After document indicator.
+    }
+  });
+}
+
+// src/extensions/documents-preview/hooks/use-action-props.ts
+import { __ as __4 } from "@wordpress/i18n";
+import { EyeIcon } from "@elementor/icons";
+import { runCommand } from "@elementor/editor-v1-adapters";
+import { useActiveDocument as useActiveDocument2 } from "@elementor/editor-documents";
+function useActionProps() {
+  const document2 = useActiveDocument2();
+  return {
+    icon: EyeIcon,
+    title: __4("Preview Changes", "elementor"),
+    onClick: () => document2 && runCommand("editor/documents/preview", {
+      id: document2.id,
+      force: true
+    })
+  };
+}
+
+// src/extensions/documents-preview/index.ts
+function init2() {
+  utilitiesMenu.registerAction({
+    name: "document-preview-button",
+    priority: 30,
+    // After help.
+    useProps: useActionProps
+  });
+}
+
+// src/extensions/documents-save/hooks/use-document-save-draft-props.ts
+import { __ as __5 } from "@wordpress/i18n";
+import { FileReportIcon } from "@elementor/icons";
+import { useActiveDocument as useActiveDocument3, useActiveDocumentActions } from "@elementor/editor-documents";
+function useDocumentSaveDraftProps() {
+  const document2 = useActiveDocument3();
+  const { saveDraft } = useActiveDocumentActions();
+  return {
+    icon: FileReportIcon,
+    title: __5("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 { 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"),
+    onClick: saveTemplate
+  };
+}
+
+// src/extensions/documents-save/components/primary-action.tsx
+import * as React22 from "react";
+import { __ as __7 } 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;
+var StyledPopoverMenu = styled2(PopoverMenu)`
+	& > .MuiPopover-paper > .MuiList-root > .MuiDivider-root {
+		&:only-child, /* A divider is being rendered lonely */
+		&:last-child, /* The last group renders empty but renders a divider */
+		& + .MuiDivider-root /* Multiple dividers due to multiple empty groups */ {
+			display: none;
+		}
+	}
+`;
+function PrimaryActionMenu(props) {
+  const { save: saveActions, default: defaultActions } = useMenuItems4();
+  return /* @__PURE__ */ React21.createElement(
+    StyledPopoverMenu,
+    {
+      ...props,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      PaperProps: {
+        sx: { mt: 2, ml: 3 }
+      }
+    },
+    saveActions.map(({ MenuItem: MenuItem2, id }, index) => [
+      index > 0 && /* @__PURE__ */ React21.createElement(Divider4, { key: `${id}-divider` }),
+      /* @__PURE__ */ React21.createElement(MenuItem2, { key: id })
+    ]),
+    defaultActions.length > 0 && /* @__PURE__ */ React21.createElement(Divider4, null),
+    defaultActions.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React21.createElement(MenuItem2, { key: id }))
+  );
+}
+
+// src/extensions/documents-save/components/primary-action.tsx
+import {
+  bindMenu as bindMenu3,
+  bindTrigger as bindTrigger3,
+  Button,
+  ButtonGroup,
+  CircularProgress,
+  Tooltip as Tooltip4,
+  usePopupState as usePopupState3
+} 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({
+    variant: "popover",
+    popupId: "document-save-options"
+  });
+  if (!document2) {
+    return null;
+  }
+  const isDisabled = !isEnabled(document2);
+  const shouldShowSpinner = document2.isSaving && !isDisabled;
+  return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(ButtonGroup, { size: "large", variant: "contained" }, /* @__PURE__ */ React22.createElement(
+    Button,
+    {
+      onClick: () => !document2.isSaving && save(),
+      sx: { width: "120px" },
+      disabled: isDisabled
+    },
+    shouldShowSpinner ? /* @__PURE__ */ React22.createElement(CircularProgress, null) : getLabel(document2)
+  ), /* @__PURE__ */ React22.createElement(
+    Tooltip4,
+    {
+      title: __7("Save Options", "elementor"),
+      PopperProps: {
+        sx: {
+          "&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom": {
+            mt: 3,
+            mr: 1
+          }
+        }
+      }
+    },
+    /* @__PURE__ */ React22.createElement(Button, { sx: { px: 0 }, ...bindTrigger3(popupState) }, /* @__PURE__ */ React22.createElement(ChevronDownIcon, null))
+  )), /* @__PURE__ */ React22.createElement(PrimaryActionMenu, { ...bindMenu3(popupState), onClick: popupState.close }));
+}
+function getLabel(document2) {
+  return document2.userCan.publish ? __7("Publish", "elementor") : __7("Submit", "elementor");
+}
+function isEnabled(document2) {
+  if (document2.type.value === "kit") {
+    return false;
+  }
+  return document2.isDirty || document2.status.value === "draft";
+}
+
+// src/extensions/documents-save/index.ts
+function init3() {
+  injectIntoPrimaryAction({
+    name: "document-primary-action",
+    filler: PrimaryAction
+  });
+  documentOptionsMenu.registerAction({
+    group: "save",
+    name: "document-save-draft",
+    priority: 10,
+    // Before save as template.
+    useProps: useDocumentSaveDraftProps
+  });
+  documentOptionsMenu.registerAction({
+    group: "save",
+    name: "document-save-as-template",
+    priority: 20,
+    // After save draft.
+    useProps: useDocumentSaveTemplateProps
+  });
+}
+
+// src/extensions/elements/sync/sync-panel-title.ts
+import { __ as __8 } 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");
+  listenTo2(
+    routeOpenEvent2("panel/elements"),
+    () => {
+      setPanelTitle(panelTitle);
+      setTabTitle(tabTitle);
+    }
+  );
+  listenTo2(
+    v1ReadyEvent(),
+    () => {
+      if (isRouteActive("panel/elements")) {
+        setPanelTitle(panelTitle);
+        setTabTitle(tabTitle);
+      }
+    }
+  );
+}
+function setPanelTitle(title) {
+  window.elementor?.getPanelView?.()?.getHeaderView?.()?.setTitle?.(title);
+}
+function setTabTitle(title) {
+  const tab = document.querySelector('.elementor-component-tab[data-tab="categories"]');
+  if (tab) {
+    tab.textContent = title;
+  }
+}
+
+// src/extensions/elements/hooks/use-action-props.ts
+import { PlusIcon } from "@elementor/icons";
+import { __ as __9 } 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"),
+    icon: PlusIcon,
+    onClick: () => openRoute3("panel/elements/categories"),
+    selected: isActive,
+    disabled: isBlocked
+  };
+}
+
+// src/extensions/elements/index.ts
+function init4() {
+  syncPanelTitle();
+  toolsMenu.registerToggleAction({
+    name: "open-elements-panel",
+    priority: 1,
+    useProps: useActionProps2
+  });
+}
+
+// src/extensions/finder/hooks/use-action-props.ts
+import { __ as __10 } from "@wordpress/i18n";
+import { SearchIcon } from "@elementor/icons";
+import { runCommand as runCommand2, useRouteStatus as useRouteStatus3 } from "@elementor/editor-v1-adapters";
+function useActionProps3() {
+  const { isActive, isBlocked } = useRouteStatus3("finder", {
+    blockOnKitRoutes: false,
+    blockOnPreviewMode: false
+  });
+  return {
+    title: __10("Finder", "elementor"),
+    icon: SearchIcon,
+    onClick: () => runCommand2("finder/toggle"),
+    selected: isActive,
+    disabled: isBlocked
+  };
+}
+
+// src/extensions/finder/index.ts
+function init5() {
+  utilitiesMenu.registerToggleAction({
+    name: "toggle-finder",
+    priority: 10,
+    // Before help.
+    useProps: useActionProps3
+  });
+}
+
+// src/extensions/help/index.ts
+import { __ as __11 } from "@wordpress/i18n";
+import { HelpIcon } from "@elementor/icons";
+function init6() {
+  utilitiesMenu.registerLink({
+    name: "open-help-center",
+    priority: 20,
+    // After Finder.
+    useProps: () => {
+      return {
+        title: __11("Help", "elementor"),
+        href: "https://go.elementor.com/editor-top-bar-learn/",
+        icon: HelpIcon,
+        target: "_blank"
+      };
+    }
+  });
+}
+
+// src/extensions/history/hooks/use-action-props.ts
+import { HistoryIcon } from "@elementor/icons";
+import { __ as __12 } 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"),
+    icon: HistoryIcon,
+    onClick: () => openRoute4("panel/history/actions"),
+    selected: isActive,
+    disabled: isBlocked
+  };
+}
+
+// src/extensions/history/index.ts
+function init7() {
+  mainMenu.registerToggleAction({
+    name: "open-history",
+    priority: 20,
+    useProps: useActionProps4
+  });
+}
+
+// src/extensions/keyboard-shortcuts/hooks/use-action-props.ts
+import { __ as __13 } 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"),
+    onClick: () => runCommand3("shortcuts/open")
+  };
+}
+
+// src/extensions/keyboard-shortcuts/index.ts
+function init8() {
+  mainMenu.registerAction({
+    name: "open-keyboard-shortcuts",
+    group: "default",
+    priority: 40,
+    // After user preferences.
+    useProps: useActionProps5
+  });
+}
+
+// src/extensions/site-settings/index.ts
+import { injectIntoTop } from "@elementor/editor";
+
+// src/extensions/site-settings/components/portalled-primary-action.tsx
+import * as React25 from "react";
+
+// src/extensions/site-settings/components/portal.tsx
+import * as React23 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) {
+  const containerRef = useListenTo(
+    [
+      routeOpenEvent3("panel/global"),
+      routeCloseEvent("panel/global")
+    ],
+    getContainerRef
+  );
+  if (!containerRef.current) {
+    return null;
+  }
+  return /* @__PURE__ */ React23.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 { 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";
+function PrimaryAction2() {
+  const document2 = useActiveDocument5();
+  const { save } = useActiveDocumentActions4();
+  return /* @__PURE__ */ React24.createElement(Paper, { sx: {
+    px: 5,
+    py: 4,
+    borderTop: 1,
+    borderColor: "divider"
+  } }, /* @__PURE__ */ React24.createElement(
+    Button2,
+    {
+      variant: "contained",
+      disabled: !document2 || !document2.isDirty,
+      size: "medium",
+      sx: { width: "100%" },
+      onClick: () => document2 && !document2.isSaving ? save() : null
+    },
+    document2?.isSaving ? /* @__PURE__ */ React24.createElement(CircularProgress2, null) : __14("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));
+}
+
+// src/extensions/site-settings/hooks/use-action-props.ts
+import { __ as __15 } from "@wordpress/i18n";
+import { runCommand as runCommand4, useRouteStatus as useRouteStatus5 } from "@elementor/editor-v1-adapters";
+import { AdjustmentsHorizontalIcon } from "@elementor/icons";
+function useActionProps6() {
+  const { isActive, isBlocked } = useRouteStatus5("panel/global", {
+    blockOnKitRoutes: false
+  });
+  return {
+    title: __15("Site Settings", "elementor"),
+    icon: AdjustmentsHorizontalIcon,
+    onClick: () => isActive ? runCommand4("panel/global/close") : runCommand4("panel/global/open"),
+    selected: isActive,
+    disabled: isBlocked
+  };
+}
+
+// src/extensions/site-settings/index.ts
+function init9() {
+  injectIntoTop({
+    name: "site-settings-primary-action-portal",
+    filler: PortalledPrimaryAction
+  });
+  toolsMenu.registerToggleAction({
+    name: "toggle-site-settings",
+    priority: 2,
+    useProps: useActionProps6
+  });
+}
+
+// src/extensions/structure/hooks/use-action-props.ts
+import { __ as __16 } 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"),
+    icon: StructureIcon,
+    onClick: () => runCommand5("navigator/toggle"),
+    selected: isActive,
+    disabled: isBlocked
+  };
+}
+
+// src/extensions/structure/index.ts
+function init10() {
+  toolsMenu.registerToggleAction({
+    name: "toggle-structure-view",
+    priority: 3,
+    useProps: useActionProps7
+  });
+}
+
+// src/extensions/theme-builder/hooks/use-action-props.ts
+import { __ as __17 } 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"),
+    onClick: () => runCommand6("app/open")
+  };
+}
+
+// src/extensions/theme-builder/index.ts
+function init11() {
+  mainMenu.registerAction({
+    name: "open-theme-builder",
+    useProps: useActionProps8
+  });
+}
+
+// src/extensions/user-preferences/hooks/use-action-props.ts
+import { __ as __18 } 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"),
+    onClick: () => openRoute5("panel/editor-preferences"),
+    selected: isActive,
+    disabled: isBlocked
+  };
+}
+
+// src/extensions/user-preferences/index.ts
+function init12() {
+  mainMenu.registerToggleAction({
+    name: "open-user-preferences",
+    priority: 30,
+    // After history.
+    useProps: useActionProps9
+  });
+}
+
+// src/extensions/wordpress/index.ts
+import { useSettings } from "@elementor/editor";
+import { __ as __19 } from "@wordpress/i18n";
+import { WordpressIcon } from "@elementor/icons";
+function init13() {
+  mainMenu.registerLink({
+    name: "manage-website",
+    group: "exits",
+    useProps: () => {
+      const { urls } = useSettings();
+      return {
+        title: __19("Manage Website", "elementor"),
+        href: urls.admin,
+        icon: WordpressIcon,
+        target: "_blank"
+      };
+    }
+  });
+}
+
+// src/extensions/index.ts
+function init14() {
+  init();
+  init2();
+  init3();
+  init4();
+  init5();
+  init6();
+  init7();
+  init8();
+  init9();
+  init10();
+  init11();
+  init12();
+  init13();
+}
+
+// src/init.ts
+function init15() {
+  redirectOldMenus();
+  init14();
+  injectIntoTop2({
+    name: "app-bar",
+    filler: AppBar
+  });
+}
+
+// src/index.ts
+init15();
+export {
+  documentOptionsMenu,
+  injectIntoPageIndication,
+  injectIntoPrimaryAction,
+  injectIntoResponsive,
+  mainMenu,
+  toolsMenu,
+  utilitiesMenu
+};
+//# sourceMappingURL=index.mjs.map