@elementor/editor-app-bar 0.7.3 → 0.8.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.8.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-app-bar@0.7.3...@elementor/editor-app-bar@0.8.0) (2023-09-11)
+
+
+### Bug Fixes
+
+* ui adaptations [ED-11933] ([#107](https://github.com/elementor/elementor-packages/issues/107)) ([18ef329](https://github.com/elementor/elementor-packages/commit/18ef32928cbe921d7f5340c37c3c965b117d8d63))
+
+
+### Features
+
+* **editor-documents:** mark experimental functions [ED-12066] ([#112](https://github.com/elementor/elementor-packages/issues/112)) ([f4b7a9a](https://github.com/elementor/elementor-packages/commit/f4b7a9ac7953a2b48062349495acff05b5640de3))
+
+
+
+
+
 ## [0.7.3](https://github.com/elementor/elementor-packages/compare/@elementor/editor-app-bar@0.7.2...@elementor/editor-app-bar@0.7.3) (2023-08-22)
 
 

package/dist/index.js

@@ -64,7 +64,37 @@ function useMenuContext() {
 var React2 = __toESM(require("react"));
 var import_ui = require("@elementor/ui");
 function ToolbarMenuItem({ title, ...props }) {
-  return /* @__PURE__ */ React2.createElement(import_ui.Tooltip, { title }, /* @__PURE__ */ React2.createElement(import_ui.Box, { component: "span", "aria-label": void 0 }, /* @__PURE__ */ React2.createElement(import_ui.IconButton, { ...props, "aria-label": title, size: "small" })));
+  return /* @__PURE__ */ React2.createElement(Tooltip, { title }, /* @__PURE__ */ React2.createElement(import_ui.Box, { component: "span", "aria-label": void 0 }, /* @__PURE__ */ React2.createElement(
+    import_ui.IconButton,
+    {
+      ...props,
+      "aria-label": title,
+      size: "medium",
+      sx: {
+        "& .MuiSvgIcon-root": {
+          fontSize: "1.25rem"
+        },
+        "&:hover": {
+          color: "text.primary"
+        }
+      }
+    }
+  )));
+}
+function Tooltip(props) {
+  return /* @__PURE__ */ React2.createElement(
+    import_ui.Tooltip,
+    {
+      PopperProps: {
+        sx: {
+          "&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom": {
+            mt: 2
+          }
+        }
+      },
+      ...props
+    }
+  );
 }
 
 // src/components/ui/popover-menu-item.tsx
@@ -82,7 +112,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(import_ui2.ListItemIcon, null, icon),
     /* @__PURE__ */ React3.createElement(import_ui2.ListItemText, { primary: text }),
@@ -113,7 +149,26 @@ var React6 = __toESM(require("react"));
 var React5 = __toESM(require("react"));
 var import_ui3 = require("@elementor/ui");
 function ToolbarMenuToggleItem({ title, onClick, ...props }) {
-  return /* @__PURE__ */ React5.createElement(import_ui3.Tooltip, { title }, /* @__PURE__ */ React5.createElement(import_ui3.Box, { component: "span", "aria-label": void 0 }, /* @__PURE__ */ React5.createElement(import_ui3.ToggleButton, { ...props, onChange: onClick, "aria-label": title, size: "small" })));
+  return /* @__PURE__ */ React5.createElement(import_ui3.Tooltip, { title }, /* @__PURE__ */ React5.createElement(import_ui3.Box, { component: "span", "aria-label": void 0 }, /* @__PURE__ */ React5.createElement(
+    import_ui3.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
@@ -258,7 +313,7 @@ function PopoverMenu({ children, ...props }) {
     import_ui4.Menu,
     {
       PaperProps: {
-        sx: { mt: 4 }
+        sx: { mt: 1.5 }
       },
       ...props,
       MenuListProps: {
@@ -279,7 +334,9 @@ var ElementorLogo = (props) => {
   return /* @__PURE__ */ React10.createElement(import_ui5.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 = (0, import_ui5.styled)(import_ui5.ToggleButton)(({ theme }) => ({
-  paddingInline: theme.spacing(1),
+  padding: 0,
+  border: 0,
+  color: theme.palette.text.primary,
   "&.MuiToggleButton-root:hover": {
     backgroundColor: "initial"
   },
@@ -290,10 +347,8 @@ var StyledToggleButton = (0, import_ui5.styled)(import_ui5.ToggleButton)(({ them
 var StyledElementorLogo = (0, import_ui5.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": {
@@ -323,11 +378,18 @@ function ToolbarLogo(props) {
     {
       ...props,
       value: "selected",
-      size: "small",
+      size: "large",
       onMouseEnter: () => setIsHoverState(true),
       onMouseLeave: () => setIsHoverState(false)
     },
-    /* @__PURE__ */ React10.createElement(StyledElementorLogo, { titleAccess: (0, import_i18n.__)("Elementor Logo", "elementor"), showMenuIcon })
+    /* @__PURE__ */ React10.createElement(
+      StyledElementorLogo,
+      {
+        fontSize: "large",
+        showMenuIcon,
+        titleAccess: (0, import_i18n.__)("Elementor Logo", "elementor")
+      }
+    )
   );
 }
 
@@ -425,7 +487,7 @@ var React16 = __toESM(require("react"));
 var React14 = __toESM(require("react"));
 var import_ui9 = require("@elementor/ui");
 function ToolbarMenu({ children, ...props }) {
-  return /* @__PURE__ */ React14.createElement(MenuContextProvider, { type: "toolbar" }, /* @__PURE__ */ React14.createElement(import_ui9.Stack, { sx: { px: 4 }, spacing: 4, direction: "row", alignItems: "center", ...props }, children));
+  return /* @__PURE__ */ React14.createElement(MenuContextProvider, { type: "toolbar" }, /* @__PURE__ */ React14.createElement(import_ui9.Stack, { sx: { px: 1.5 }, spacing: 1.5, direction: "row", alignItems: "center", ...props }, children));
 }
 
 // src/components/ui/toolbar-menu-more.tsx
@@ -486,7 +548,7 @@ function ResponsiveLocation() {
 
 // src/components/app-bar.tsx
 function AppBar() {
-  return /* @__PURE__ */ React21.createElement(import_ui12.ThemeProvider, { colorScheme: "dark" }, /* @__PURE__ */ React21.createElement(import_ui12.AppBar, { position: "sticky" }, /* @__PURE__ */ React21.createElement(import_ui12.Box, { display: "grid", gridTemplateColumns: "repeat(3, 1fr)" }, /* @__PURE__ */ React21.createElement(import_ui12.Grid, { container: true }, /* @__PURE__ */ React21.createElement(MainMenuLocation, null), /* @__PURE__ */ React21.createElement(ToolsMenuLocation, null)), /* @__PURE__ */ React21.createElement(import_ui12.Grid, { container: true, justifyContent: "center" }, /* @__PURE__ */ React21.createElement(ToolbarMenu, { spacing: 3 }, /* @__PURE__ */ React21.createElement(import_ui12.Divider, { orientation: "vertical" }), /* @__PURE__ */ React21.createElement(PageIndicationLocation, null), /* @__PURE__ */ React21.createElement(import_ui12.Divider, { orientation: "vertical" }), /* @__PURE__ */ React21.createElement(ResponsiveLocation, null), /* @__PURE__ */ React21.createElement(import_ui12.Divider, { orientation: "vertical" }))), /* @__PURE__ */ React21.createElement(import_ui12.Grid, { container: true, justifyContent: "flex-end" }, /* @__PURE__ */ React21.createElement(UtilitiesMenuLocation, null), /* @__PURE__ */ React21.createElement(PrimaryActionLocation, null)))));
+  return /* @__PURE__ */ React21.createElement(import_ui12.ThemeProvider, { colorScheme: "dark" }, /* @__PURE__ */ React21.createElement(import_ui12.AppBar, { position: "sticky" }, /* @__PURE__ */ React21.createElement(import_ui12.Box, { display: "grid", gridTemplateColumns: "repeat(3, 1fr)" }, /* @__PURE__ */ React21.createElement(import_ui12.Grid, { container: true }, /* @__PURE__ */ React21.createElement(MainMenuLocation, null), /* @__PURE__ */ React21.createElement(ToolsMenuLocation, null)), /* @__PURE__ */ React21.createElement(import_ui12.Grid, { container: true, justifyContent: "center" }, /* @__PURE__ */ React21.createElement(ToolbarMenu, { spacing: 1.5 }, /* @__PURE__ */ React21.createElement(import_ui12.Divider, { orientation: "vertical" }), /* @__PURE__ */ React21.createElement(PageIndicationLocation, null), /* @__PURE__ */ React21.createElement(import_ui12.Divider, { orientation: "vertical" }), /* @__PURE__ */ React21.createElement(ResponsiveLocation, null), /* @__PURE__ */ React21.createElement(import_ui12.Divider, { orientation: "vertical" }))), /* @__PURE__ */ React21.createElement(import_ui12.Grid, { container: true, justifyContent: "flex-end" }, /* @__PURE__ */ React21.createElement(UtilitiesMenuLocation, null), /* @__PURE__ */ React21.createElement(PrimaryActionLocation, null)))));
 }
 
 // src/init.ts
@@ -508,15 +570,15 @@ var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 var import_icons4 = require("@elementor/icons");
 var import_editor_documents = require("@elementor/editor-documents");
 function SettingsButton() {
-  const activeDocument = (0, import_editor_documents.useActiveDocument)();
-  const hostDocument = (0, import_editor_documents.useHostDocument)();
+  const activeDocument = (0, import_editor_documents.__useActiveDocument)();
+  const hostDocument = (0, import_editor_documents.__useHostDocument)();
   const document2 = activeDocument && activeDocument.type.value !== "kit" ? activeDocument : hostDocument;
   const { isActive, isBlocked } = (0, import_editor_v1_adapters2.useRouteStatus)("panel/page-settings");
   if (!document2) {
     return null;
   }
   const title = (0, import_i18n4.__)("%s Settings", "elementor").replace("%s", document2.type.label);
-  return /* @__PURE__ */ React22.createElement(import_ui13.Tooltip, { title }, /* @__PURE__ */ React22.createElement(import_ui13.Box, { component: "span", "aria-label": void 0 }, /* @__PURE__ */ React22.createElement(
+  return /* @__PURE__ */ React22.createElement(Tooltip3, { title }, /* @__PURE__ */ React22.createElement(import_ui13.Box, { component: "span", "aria-label": void 0 }, /* @__PURE__ */ React22.createElement(
     import_ui13.ToggleButton,
     {
       value: "document-settings",
@@ -524,11 +586,34 @@ function SettingsButton() {
       disabled: isBlocked,
       onChange: () => (0, import_editor_v1_adapters2.openRoute)("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(import_icons4.SettingsIcon, null)
+    /* @__PURE__ */ React22.createElement(import_icons4.SettingsIcon, { fontSize: "small" })
   )));
 }
+function Tooltip3(props) {
+  return /* @__PURE__ */ React22.createElement(
+    import_ui13.Tooltip,
+    {
+      PopperProps: {
+        sx: {
+          "&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom": {
+            mt: 1.7
+          }
+        }
+      },
+      ...props
+    }
+  );
+}
 
 // src/extensions/documents-indicator/index.ts
 function init() {
@@ -548,7 +633,7 @@ var import_icons5 = require("@elementor/icons");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 var import_editor_documents2 = require("@elementor/editor-documents");
 function useActionProps() {
-  const document2 = (0, import_editor_documents2.useActiveDocument)();
+  const document2 = (0, import_editor_documents2.__useActiveDocument)();
   return {
     icon: import_icons5.EyeIcon,
     title: (0, import_i18n5.__)("Preview Changes", "elementor"),
@@ -574,8 +659,8 @@ var import_i18n6 = require("@wordpress/i18n");
 var import_icons6 = require("@elementor/icons");
 var import_editor_documents3 = require("@elementor/editor-documents");
 function useDocumentSaveDraftProps() {
-  const document2 = (0, import_editor_documents3.useActiveDocument)();
-  const { saveDraft } = (0, import_editor_documents3.useActiveDocumentActions)();
+  const document2 = (0, import_editor_documents3.__useActiveDocument)();
+  const { saveDraft } = (0, import_editor_documents3.__useActiveDocumentActions)();
   return {
     icon: import_icons6.FileReportIcon,
     title: (0, import_i18n6.__)("Save Draft", "elementor"),
@@ -589,7 +674,7 @@ var import_i18n7 = require("@wordpress/i18n");
 var import_icons7 = require("@elementor/icons");
 var import_editor_documents4 = require("@elementor/editor-documents");
 function useDocumentSaveTemplateProps() {
-  const { saveTemplate } = (0, import_editor_documents4.useActiveDocumentActions)();
+  const { saveTemplate } = (0, import_editor_documents4.__useActiveDocumentActions)();
   return {
     icon: import_icons7.FolderIcon,
     title: (0, import_i18n7.__)("Save as Template", "elementor"),
@@ -628,9 +713,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) => [
@@ -648,8 +733,8 @@ var import_editor_documents5 = require("@elementor/editor-documents");
 var import_icons8 = require("@elementor/icons");
 var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
 function PrimaryAction() {
-  const document2 = (0, import_editor_documents5.useActiveDocument)();
-  const { save } = (0, import_editor_documents5.useActiveDocumentActions)();
+  const document2 = (0, import_editor_documents5.__useActiveDocument)();
+  const { save } = (0, import_editor_documents5.__useActiveDocumentActions)();
   const isPreviewMode = (0, import_editor_v1_adapters4.useIsPreviewMode)();
   const popupState = (0, import_ui15.usePopupState)({
     variant: "popover",
@@ -661,13 +746,13 @@ function PrimaryAction() {
   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(import_ui15.ButtonGroup, { size: "medium", variant: "contained" }, /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React24.createElement(React24.Fragment, null, /* @__PURE__ */ React24.createElement(import_ui15.ButtonGroup, { size: "large", variant: "contained" }, /* @__PURE__ */ React24.createElement(
     import_ui15.Button,
     {
       onClick: () => !document2.isSaving && save(),
       sx: {
-        px: 7,
         height: "100%",
+        borderRadius: 0,
         maxWidth: "158px",
         "&.MuiButtonBase-root.MuiButtonGroup-grouped": {
           minWidth: "110px"
@@ -675,7 +760,7 @@ function PrimaryAction() {
       },
       disabled: isPublishDisabled
     },
-    shouldShowSpinner ? /* @__PURE__ */ React24.createElement(import_ui15.CircularProgress, null) : getLabel(document2)
+    shouldShowSpinner ? /* @__PURE__ */ React24.createElement(import_ui15.CircularProgress, { color: "inherit", size: "1.5em" }) : getLabel(document2)
   ), /* @__PURE__ */ React24.createElement(
     import_ui15.Tooltip,
     {
@@ -683,8 +768,8 @@ function PrimaryAction() {
       PopperProps: {
         sx: {
           "&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom": {
-            mt: 3,
-            mr: 1
+            mt: 1,
+            mr: 0.25
           }
         }
       }
@@ -692,8 +777,9 @@ function PrimaryAction() {
     /* @__PURE__ */ React24.createElement(import_ui15.Box, { component: "span", "aria-label": void 0 }, /* @__PURE__ */ React24.createElement(
       import_ui15.Button,
       {
+        size: "small",
         ...(0, import_ui15.bindTrigger)(popupState),
-        sx: { px: 0, height: "100%" },
+        sx: { px: 0, height: "100%", borderRadius: 0 },
         disabled: isSaveOptionsDisabled,
         "aria-label": (0, import_i18n8.__)("Save Options", "elementor")
       },
@@ -796,7 +882,7 @@ var import_i18n11 = require("@wordpress/i18n");
 var import_icons10 = require("@elementor/icons");
 var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
 function useActionProps3() {
-  const { isActive, isBlocked } = (0, import_editor_v1_adapters7.useRouteStatus)("finder", {
+  const { isBlocked } = (0, import_editor_v1_adapters7.useRouteStatus)("finder", {
     blockOnKitRoutes: false,
     blockOnPreviewMode: false
   });
@@ -804,14 +890,13 @@ function useActionProps3() {
     title: (0, import_i18n11.__)("Finder", "elementor"),
     icon: import_icons10.SearchIcon,
     onClick: () => (0, import_editor_v1_adapters7.runCommand)("finder/toggle"),
-    selected: isActive,
     disabled: isBlocked
   };
 }
 
 // src/extensions/finder/index.ts
 function init5() {
-  utilitiesMenu.registerToggleAction({
+  utilitiesMenu.registerAction({
     id: "toggle-finder",
     priority: 10,
     // Before help.
@@ -918,8 +1003,8 @@ var import_editor_documents6 = require("@elementor/editor-documents");
 var import_ui17 = require("@elementor/ui");
 var import_i18n15 = require("@wordpress/i18n");
 function PrimaryAction2() {
-  const document2 = (0, import_editor_documents6.useActiveDocument)();
-  const { save } = (0, import_editor_documents6.useActiveDocumentActions)();
+  const document2 = (0, import_editor_documents6.__useActiveDocument)();
+  const { save } = (0, import_editor_documents6.__useActiveDocumentActions)();
   return /* @__PURE__ */ React26.createElement(import_ui17.Paper, { sx: {
     px: 5,
     py: 4,
@@ -1051,7 +1136,7 @@ function init13() {
     id: "exit-to-wordpress",
     group: "exits",
     useProps: () => {
-      const document2 = (0, import_editor_documents7.useActiveDocument)();
+      const document2 = (0, import_editor_documents7.__useActiveDocument)();
       return {
         title: (0, import_i18n20.__)("Exit to WordPress", "elementor"),
         href: document2?.links?.platformEdit,