@elementor/editor-app-bar 0.7.2 → 0.8.0

package/dist/index.mjs

@@ -19,9 +19,39 @@ function useMenuContext() {
 
 // src/components/ui/toolbar-menu-item.tsx
 import * as React2 from "react";
-import { Box, IconButton, Tooltip } from "@elementor/ui";
+import { Box, IconButton, Tooltip as BaseTooltip } 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" })));
+  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: "medium",
+      sx: {
+        "& .MuiSvgIcon-root": {
+          fontSize: "1.25rem"
+        },
+        "&:hover": {
+          color: "text.primary"
+        }
+      }
+    }
+  )));
+}
+function Tooltip(props) {
+  return /* @__PURE__ */ React2.createElement(
+    BaseTooltip,
+    {
+      PopperProps: {
+        sx: {
+          "&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom": {
+            mt: 2
+          }
+        }
+      },
+      ...props
+    }
+  );
 }
 
 // src/components/ui/popover-menu-item.tsx
@@ -44,7 +74,13 @@ function PopoverMenuItem({ text, icon, onClick, href, target, disabled, ...props
       onClick,
       component: href ? "a" : "div",
       href,
-      target
+      target,
+      sx: {
+        "&:hover": {
+          color: "text.primary"
+          // Overriding global CSS from the editor.
+        }
+      }
     },
     /* @__PURE__ */ React3.createElement(ListItemIcon, null, icon),
     /* @__PURE__ */ React3.createElement(ListItemText, { primary: text }),
@@ -75,7 +111,26 @@ import * as React6 from "react";
 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" })));
+  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",
+      sx: {
+        border: 0,
+        // Temp fix until the style of the ToggleButton component will be decided.
+        "&.Mui-disabled": {
+          border: 0
+          // Temp fix until the style of the ToggleButton component will be decided.
+        },
+        "& .MuiSvgIcon-root": {
+          fontSize: "1.25rem"
+        }
+      }
+    }
+  )));
 }
 
 // src/components/actions/toggle-action.tsx
@@ -220,7 +275,7 @@ function PopoverMenu({ children, ...props }) {
     Menu,
     {
       PaperProps: {
-        sx: { mt: 4 }
+        sx: { mt: 1.5 }
       },
       ...props,
       MenuListProps: {
@@ -241,7 +296,9 @@ 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)(({ theme }) => ({
-  paddingInline: theme.spacing(1),
+  padding: 0,
+  border: 0,
+  color: theme.palette.text.primary,
   "&.MuiToggleButton-root:hover": {
     backgroundColor: "initial"
   },
@@ -252,10 +309,8 @@ var StyledToggleButton = styled(ToggleButton2)(({ theme }) => ({
 var StyledElementorLogo = styled(ElementorLogo, {
   shouldForwardProp: (prop) => prop !== "showMenuIcon"
 })(({ theme, showMenuIcon }) => ({
-  width: "auto",
-  height: "100%",
   "& path": {
-    fill: "initial",
+    fill: theme.palette.background.default,
     transition: "all 0.2s linear",
     transformOrigin: "bottom left",
     "&:first-of-type": {
@@ -285,11 +340,18 @@ function ToolbarLogo(props) {
     {
       ...props,
       value: "selected",
-      size: "small",
+      size: "large",
       onMouseEnter: () => setIsHoverState(true),
       onMouseLeave: () => setIsHoverState(false)
     },
-    /* @__PURE__ */ React10.createElement(StyledElementorLogo, { titleAccess: __("Elementor Logo", "elementor"), showMenuIcon })
+    /* @__PURE__ */ React10.createElement(
+      StyledElementorLogo,
+      {
+        fontSize: "large",
+        showMenuIcon,
+        titleAccess: __("Elementor Logo", "elementor")
+      }
+    )
   );
 }
 
@@ -397,7 +459,7 @@ import * as React16 from "react";
 import * as React14 from "react";
 import { Stack as Stack2 } from "@elementor/ui";
 function ToolbarMenu({ children, ...props }) {
-  return /* @__PURE__ */ React14.createElement(MenuContextProvider, { type: "toolbar" }, /* @__PURE__ */ React14.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: 1.5 }, spacing: 1.5, direction: "row", alignItems: "center", ...props }, children));
 }
 
 // src/components/ui/toolbar-menu-more.tsx
@@ -458,7 +520,7 @@ function ResponsiveLocation() {
 
 // src/components/app-bar.tsx
 function AppBar() {
-  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)))));
+  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: 1.5 }, /* @__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
@@ -474,14 +536,14 @@ function redirectOldMenus() {
 
 // src/extensions/documents-indicator/components/settings-button.tsx
 import * as React22 from "react";
-import { Box as Box4, ToggleButton as ToggleButton3, Tooltip as Tooltip3 } from "@elementor/ui";
+import { Box as Box4, ToggleButton as ToggleButton3, Tooltip as BaseTooltip2 } from "@elementor/ui";
 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";
+import { __useActiveDocument, __useHostDocument } from "@elementor/editor-documents";
 function SettingsButton() {
-  const activeDocument = useActiveDocument();
-  const hostDocument = useHostDocument();
+  const activeDocument = __useActiveDocument();
+  const hostDocument = __useHostDocument();
   const document2 = activeDocument && activeDocument.type.value !== "kit" ? activeDocument : hostDocument;
   const { isActive, isBlocked } = useRouteStatus("panel/page-settings");
   if (!document2) {
@@ -496,11 +558,34 @@ function SettingsButton() {
       disabled: isBlocked,
       onChange: () => openRoute2("panel/page-settings/settings"),
       "aria-label": title,
-      size: "small"
+      size: "small",
+      sx: {
+        border: 0,
+        // Temp fix until the style of the ToggleButton component will be decided.
+        "&.Mui-disabled": {
+          border: 0
+          // Temp fix until the style of the ToggleButton component will be decided.
+        }
+      }
     },
-    /* @__PURE__ */ React22.createElement(SettingsIcon, null)
+    /* @__PURE__ */ React22.createElement(SettingsIcon, { fontSize: "small" })
   )));
 }
+function Tooltip3(props) {
+  return /* @__PURE__ */ React22.createElement(
+    BaseTooltip2,
+    {
+      PopperProps: {
+        sx: {
+          "&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom": {
+            mt: 1.7
+          }
+        }
+      },
+      ...props
+    }
+  );
+}
 
 // src/extensions/documents-indicator/index.ts
 function init() {
@@ -518,9 +603,9 @@ function init() {
 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";
+import { __useActiveDocument as __useActiveDocument2 } from "@elementor/editor-documents";
 function useActionProps() {
-  const document2 = useActiveDocument2();
+  const document2 = __useActiveDocument2();
   return {
     icon: EyeIcon,
     title: __5("Preview Changes", "elementor"),
@@ -544,10 +629,10 @@ function init2() {
 // src/extensions/documents-save/hooks/use-document-save-draft-props.ts
 import { __ as __6 } from "@wordpress/i18n";
 import { FileReportIcon } from "@elementor/icons";
-import { useActiveDocument as useActiveDocument3, useActiveDocumentActions } from "@elementor/editor-documents";
+import { __useActiveDocument as __useActiveDocument3, __useActiveDocumentActions } from "@elementor/editor-documents";
 function useDocumentSaveDraftProps() {
-  const document2 = useActiveDocument3();
-  const { saveDraft } = useActiveDocumentActions();
+  const document2 = __useActiveDocument3();
+  const { saveDraft } = __useActiveDocumentActions();
   return {
     icon: FileReportIcon,
     title: __6("Save Draft", "elementor"),
@@ -559,9 +644,9 @@ function useDocumentSaveDraftProps() {
 // src/extensions/documents-save/hooks/use-document-save-template-props.ts
 import { __ as __7 } from "@wordpress/i18n";
 import { FolderIcon } from "@elementor/icons";
-import { useActiveDocumentActions as useActiveDocumentActions2 } from "@elementor/editor-documents";
+import { __useActiveDocumentActions as __useActiveDocumentActions2 } from "@elementor/editor-documents";
 function useDocumentSaveTemplateProps() {
-  const { saveTemplate } = useActiveDocumentActions2();
+  const { saveTemplate } = __useActiveDocumentActions2();
   return {
     icon: FolderIcon,
     title: __7("Save as Template", "elementor"),
@@ -600,9 +685,9 @@ function PrimaryActionMenu(props) {
         vertical: "top",
         horizontal: "right"
       },
-      marginThreshold: 8,
+      marginThreshold: 4,
       PaperProps: {
-        sx: { mt: 2 }
+        sx: { mt: 0.5 }
       }
     },
     saveActions.map(({ MenuItem: MenuItem3, id }, index) => [
@@ -625,11 +710,13 @@ import {
   Tooltip as Tooltip4,
   usePopupState as usePopupState4
 } from "@elementor/ui";
-import { useActiveDocument as useActiveDocument4, useActiveDocumentActions as useActiveDocumentActions3 } from "@elementor/editor-documents";
+import { __useActiveDocument as __useActiveDocument4, __useActiveDocumentActions as __useActiveDocumentActions3 } from "@elementor/editor-documents";
 import { ChevronDownIcon } from "@elementor/icons";
+import { useIsPreviewMode } from "@elementor/editor-v1-adapters";
 function PrimaryAction() {
-  const document2 = useActiveDocument4();
-  const { save } = useActiveDocumentActions3();
+  const document2 = __useActiveDocument4();
+  const { save } = __useActiveDocumentActions3();
+  const isPreviewMode = useIsPreviewMode();
   const popupState = usePopupState4({
     variant: "popover",
     popupId: "document-save-options"
@@ -637,23 +724,24 @@ function PrimaryAction() {
   if (!document2) {
     return null;
   }
-  const isDisabled = !isEnabled(document2);
-  const shouldShowSpinner = document2.isSaving && !isDisabled;
-  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(ButtonGroup, { size: "medium", variant: "contained" }, /* @__PURE__ */ React24.createElement(
+  const isPublishDisabled = isPreviewMode || !isPublishEnabled(document2);
+  const isSaveOptionsDisabled = isPreviewMode || document2.type.value === "kit";
+  const shouldShowSpinner = document2.isSaving && !isPublishDisabled;
+  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(ButtonGroup, { size: "large", variant: "contained" }, /* @__PURE__ */ React24.createElement(
     Button,
     {
       onClick: () => !document2.isSaving && save(),
       sx: {
-        px: 7,
         height: "100%",
+        borderRadius: 0,
         maxWidth: "158px",
         "&.MuiButtonBase-root.MuiButtonGroup-grouped": {
           minWidth: "110px"
         }
       },
-      disabled: isDisabled
+      disabled: isPublishDisabled
     },
-    shouldShowSpinner ? /* @__PURE__ */ React24.createElement(CircularProgress, null) : getLabel(document2)
+    shouldShowSpinner ? /* @__PURE__ */ React24.createElement(CircularProgress, { color: "inherit", size: "1.5em" }) : getLabel(document2)
   ), /* @__PURE__ */ React24.createElement(
     Tooltip4,
     {
@@ -661,8 +749,8 @@ function PrimaryAction() {
       PopperProps: {
         sx: {
           "&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom": {
-            mt: 3,
-            mr: 1
+            mt: 1,
+            mr: 0.25
           }
         }
       }
@@ -670,9 +758,10 @@ function PrimaryAction() {
     /* @__PURE__ */ React24.createElement(Box5, { component: "span", "aria-label": void 0 }, /* @__PURE__ */ React24.createElement(
       Button,
       {
+        size: "small",
         ...bindTrigger3(popupState),
-        sx: { px: 0, height: "100%" },
-        disabled: document2.type.value === "kit",
+        sx: { px: 0, height: "100%", borderRadius: 0 },
+        disabled: isSaveOptionsDisabled,
         "aria-label": __8("Save Options", "elementor")
       },
       /* @__PURE__ */ React24.createElement(ChevronDownIcon, null)
@@ -682,7 +771,7 @@ function PrimaryAction() {
 function getLabel(document2) {
   return document2.userCan.publish ? __8("Publish", "elementor") : __8("Submit", "elementor");
 }
-function isEnabled(document2) {
+function isPublishEnabled(document2) {
   if (document2.type.value === "kit") {
     return false;
   }
@@ -774,7 +863,7 @@ 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() {
-  const { isActive, isBlocked } = useRouteStatus3("finder", {
+  const { isBlocked } = useRouteStatus3("finder", {
     blockOnKitRoutes: false,
     blockOnPreviewMode: false
   });
@@ -782,14 +871,13 @@ function useActionProps3() {
     title: __11("Finder", "elementor"),
     icon: SearchIcon,
     onClick: () => runCommand2("finder/toggle"),
-    selected: isActive,
     disabled: isBlocked
   };
 }
 
 // src/extensions/finder/index.ts
 function init5() {
-  utilitiesMenu.registerToggleAction({
+  utilitiesMenu.registerAction({
     id: "toggle-finder",
     priority: 10,
     // Before help.
@@ -892,12 +980,12 @@ function getContainerRef() {
 
 // src/extensions/site-settings/components/primary-action.tsx
 import * as React26 from "react";
-import { useActiveDocument as useActiveDocument5, useActiveDocumentActions as useActiveDocumentActions4 } from "@elementor/editor-documents";
+import { __useActiveDocument as __useActiveDocument5, __useActiveDocumentActions as __useActiveDocumentActions4 } from "@elementor/editor-documents";
 import { Button as Button2, CircularProgress as CircularProgress2, Paper } from "@elementor/ui";
 import { __ as __15 } from "@wordpress/i18n";
 function PrimaryAction2() {
-  const document2 = useActiveDocument5();
-  const { save } = useActiveDocumentActions4();
+  const document2 = __useActiveDocument5();
+  const { save } = __useActiveDocumentActions4();
   return /* @__PURE__ */ React26.createElement(Paper, { sx: {
     px: 5,
     py: 4,
@@ -1023,13 +1111,13 @@ function init12() {
 // src/extensions/wordpress/index.ts
 import { __ as __20 } from "@wordpress/i18n";
 import { WordpressIcon } from "@elementor/icons";
-import { useActiveDocument as useActiveDocument6 } from "@elementor/editor-documents";
+import { __useActiveDocument as __useActiveDocument6 } from "@elementor/editor-documents";
 function init13() {
   mainMenu.registerLink({
     id: "exit-to-wordpress",
     group: "exits",
     useProps: () => {
-      const document2 = useActiveDocument6();
+      const document2 = __useActiveDocument6();
       return {
         title: __20("Exit to WordPress", "elementor"),
         href: document2?.links?.platformEdit,