@elementor/editor-app-bar 0.7.1 → 0.7.3

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [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)
+
+
+### Bug Fixes
+
+* **editor-documents:** disable document save on preview mode [ED-11667] ([#105](https://github.com/elementor/elementor-packages/issues/105)) ([e903233](https://github.com/elementor/elementor-packages/commit/e90323367289508e941ef4acc41bc08a3d0fd559))
+
+
+
+
+
+## [0.7.2](https://github.com/elementor/elementor-packages/compare/@elementor/editor-app-bar@0.7.1...@elementor/editor-app-bar@0.7.2) (2023-08-20)
+
+
+### Bug Fixes
+
+* **editor-site-navigation:** noWrap for the post title [ED-11626] ([#102](https://github.com/elementor/elementor-packages/issues/102)) ([d4e1a54](https://github.com/elementor/elementor-packages/commit/d4e1a547cb9ff91c42eb7efe4ce8cfadb54a2922))
+
+
+
+
+
 ## [0.7.1](https://github.com/elementor/elementor-packages/compare/@elementor/editor-app-bar@0.7.0...@elementor/editor-app-bar@0.7.1) (2023-08-02)
 
 **Note:** Version bump only for package @elementor/editor-app-bar

package/README.md

@@ -1,5 +1,102 @@
 # Editor App Bar
 
-> **Warning**
-> 
+> [!WARNING]
 > This package is under development and not ready for production use.
+
+## Usage
+
+### Menus
+
+There are 5 types of menus:
+
+- `mainMenu` - Provides access to the main features and functionality of the application. Represented by an Elementor logo that changes to a hamburger.
+- `toolsMenu` - A menu where the user can access various editing tools (e.g. "add widget", "structure", etc.) for manipulating the data or interface in some way. This
+  section may contain a limited number of buttons for common tools, as well as a dropdown menu for accessing additional
+  ones.
+- `utilitiesMenu` - A menu where the user can access various utility features that are not directly related to the main
+  functionality of the application. This may include options for accessing the finder, getting help, or accessing other miscellaneous features.
+- `documentOptionsMenu` - A menu where the user can access various options for saving the document. This may include
+  options for saving as draft or conditional options related to the document (e.g. "display conditions", etc.).
+- `integrationsMenu` - A sub-menu inside the `mainMenu` where the user can access various options for integrating with other services. This may
+  include options for connecting to a third-party service or accessing other miscellaneous features.
+
+Each menu contains a list of items, each item can be:
+
+- `Action` - A button that performs an action.
+- `Link` - A link that navigates to a different page.
+- `ToggleAction` - A button that toggles between two states (checked or unchecked).
+
+Let's extend the `integrationsMenu` with multiple examples that will cover all the types of items:
+
+#### Action
+
+```tsx
+import { integrationsMenu } from '@elementor/editor-app-bar';
+import { PlusIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+
+integrationsMenu.registerAction( {
+	id: 'example-action-id',
+	props: {
+		title: __( 'My Custom Action', 'elementor' ),
+		icon: PlusIcon, // A react component that renders an SVG icon
+		disabled: false, // Optional
+		onClick: () => alert( 'Custom action triggred!' ), // Optional
+	}
+} );    
+```
+
+#### ToggleAction
+
+```tsx
+import { integrationsMenu } from '@elementor/editor-app-bar';
+import { EyeIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+
+integrationsMenu.registerToggleAction( {
+	name: 'my-custom-toggle',
+	useProps: () => {
+		const [ isSelected, setIsSelected ] = useState( false );
+
+		return {
+			title: __( 'My Custom Toggle', 'elementor' ),
+			icon: EyeIcon,
+			selected: isSelected, // Optional
+			onClick: () => setIsSelected( ( prev ) => ! prev ), // Optional
+			disabled: false, // Optional
+		};
+	},
+} );
+```
+
+#### Link
+
+```tsx
+import { integrationsMenu } from '@elementor/editor-app-bar';
+import { LinkIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+
+integrationsMenu.registerLink( {
+	name: 'my-custom-link',
+	props: {
+		title: __( 'My Custom Link', 'elementor' ),
+		icon: LinkIcon,
+		href: 'https://elementor.com', // Optional
+		target: '_blank', // Optional
+	},
+} );
+```
+
+---
+
+> [!NOTE]
+> You can use either `props` or `useProps` (depending on your need) for all the items types:
+> - `props` - An object with the action props.
+> - `useProps` - A React hook that returns the action props and lets you make the props reactive.
+
+> [!NOTE]
+> The `icon` property can be any React component that renders an SVG icon, it is recommended to use `SVGIcon` from `@elementor/ui`
+
+### Custom Locations
+
+TBD

package/dist/index.js

@@ -262,7 +262,8 @@ function PopoverMenu({ children, ...props }) {
       },
       ...props,
       MenuListProps: {
-        component: "div"
+        component: "div",
+        dense: true
       }
     },
     children
@@ -645,9 +646,11 @@ function PrimaryActionMenu(props) {
 var import_ui15 = require("@elementor/ui");
 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 isPreviewMode = (0, import_editor_v1_adapters4.useIsPreviewMode)();
   const popupState = (0, import_ui15.usePopupState)({
     variant: "popover",
     popupId: "document-save-options"
@@ -655,8 +658,9 @@ function PrimaryAction() {
   if (!document2) {
     return null;
   }
-  const isDisabled = !isEnabled(document2);
-  const shouldShowSpinner = document2.isSaving && !isDisabled;
+  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(
     import_ui15.Button,
     {
@@ -669,7 +673,7 @@ function PrimaryAction() {
           minWidth: "110px"
         }
       },
-      disabled: isDisabled
+      disabled: isPublishDisabled
     },
     shouldShowSpinner ? /* @__PURE__ */ React24.createElement(import_ui15.CircularProgress, null) : getLabel(document2)
   ), /* @__PURE__ */ React24.createElement(
@@ -690,7 +694,7 @@ function PrimaryAction() {
       {
         ...(0, import_ui15.bindTrigger)(popupState),
         sx: { px: 0, height: "100%" },
-        disabled: document2.type.value === "kit",
+        disabled: isSaveOptionsDisabled,
         "aria-label": (0, import_i18n8.__)("Save Options", "elementor")
       },
       /* @__PURE__ */ React24.createElement(import_icons8.ChevronDownIcon, null)
@@ -700,7 +704,7 @@ function PrimaryAction() {
 function getLabel(document2) {
   return document2.userCan.publish ? (0, import_i18n8.__)("Publish", "elementor") : (0, import_i18n8.__)("Submit", "elementor");
 }
-function isEnabled(document2) {
+function isPublishEnabled(document2) {
   if (document2.type.value === "kit") {
     return false;
   }
@@ -731,21 +735,21 @@ function init3() {
 
 // src/extensions/elements/sync/sync-panel-title.ts
 var import_i18n9 = require("@wordpress/i18n");
-var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
 function syncPanelTitle() {
   const panelTitle = (0, import_i18n9.__)("Elements", "elementor");
   const tabTitle = (0, import_i18n9.__)("Widgets", "elementor");
-  (0, import_editor_v1_adapters4.listenTo)(
-    (0, import_editor_v1_adapters4.routeOpenEvent)("panel/elements"),
+  (0, import_editor_v1_adapters5.listenTo)(
+    (0, import_editor_v1_adapters5.routeOpenEvent)("panel/elements"),
     () => {
       setPanelTitle(panelTitle);
       setTabTitle(tabTitle);
     }
   );
-  (0, import_editor_v1_adapters4.listenTo)(
-    (0, import_editor_v1_adapters4.v1ReadyEvent)(),
+  (0, import_editor_v1_adapters5.listenTo)(
+    (0, import_editor_v1_adapters5.v1ReadyEvent)(),
     () => {
-      if ((0, import_editor_v1_adapters4.isRouteActive)("panel/elements")) {
+      if ((0, import_editor_v1_adapters5.isRouteActive)("panel/elements")) {
         setPanelTitle(panelTitle);
         setTabTitle(tabTitle);
       }
@@ -765,13 +769,13 @@ function setTabTitle(title) {
 // src/extensions/elements/hooks/use-action-props.ts
 var import_icons9 = require("@elementor/icons");
 var import_i18n10 = require("@wordpress/i18n");
-var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
 function useActionProps2() {
-  const { isActive, isBlocked } = (0, import_editor_v1_adapters5.useRouteStatus)("panel/elements");
+  const { isActive, isBlocked } = (0, import_editor_v1_adapters6.useRouteStatus)("panel/elements");
   return {
     title: (0, import_i18n10.__)("Add Element", "elementor"),
     icon: import_icons9.PlusIcon,
-    onClick: () => (0, import_editor_v1_adapters5.openRoute)("panel/elements/categories"),
+    onClick: () => (0, import_editor_v1_adapters6.openRoute)("panel/elements/categories"),
     selected: isActive,
     disabled: isBlocked
   };
@@ -790,16 +794,16 @@ function init4() {
 // src/extensions/finder/hooks/use-action-props.ts
 var import_i18n11 = require("@wordpress/i18n");
 var import_icons10 = require("@elementor/icons");
-var import_editor_v1_adapters6 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
 function useActionProps3() {
-  const { isActive, isBlocked } = (0, import_editor_v1_adapters6.useRouteStatus)("finder", {
+  const { isActive, isBlocked } = (0, import_editor_v1_adapters7.useRouteStatus)("finder", {
     blockOnKitRoutes: false,
     blockOnPreviewMode: false
   });
   return {
     title: (0, import_i18n11.__)("Finder", "elementor"),
     icon: import_icons10.SearchIcon,
-    onClick: () => (0, import_editor_v1_adapters6.runCommand)("finder/toggle"),
+    onClick: () => (0, import_editor_v1_adapters7.runCommand)("finder/toggle"),
     selected: isActive,
     disabled: isBlocked
   };
@@ -837,13 +841,13 @@ function init6() {
 // src/extensions/history/hooks/use-action-props.ts
 var import_icons12 = require("@elementor/icons");
 var import_i18n13 = require("@wordpress/i18n");
-var import_editor_v1_adapters7 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
 function useActionProps4() {
-  const { isActive, isBlocked } = (0, import_editor_v1_adapters7.useRouteStatus)("panel/history");
+  const { isActive, isBlocked } = (0, import_editor_v1_adapters8.useRouteStatus)("panel/history");
   return {
     title: (0, import_i18n13.__)("History", "elementor"),
     icon: import_icons12.HistoryIcon,
-    onClick: () => (0, import_editor_v1_adapters7.openRoute)("panel/history/actions"),
+    onClick: () => (0, import_editor_v1_adapters8.openRoute)("panel/history/actions"),
     selected: isActive,
     disabled: isBlocked
   };
@@ -861,12 +865,12 @@ function init7() {
 // src/extensions/keyboard-shortcuts/hooks/use-action-props.ts
 var import_i18n14 = require("@wordpress/i18n");
 var import_icons13 = require("@elementor/icons");
-var import_editor_v1_adapters8 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
 function useActionProps5() {
   return {
     icon: import_icons13.KeyboardIcon,
     title: (0, import_i18n14.__)("Keyboard Shortcuts", "elementor"),
-    onClick: () => (0, import_editor_v1_adapters8.runCommand)("shortcuts/open")
+    onClick: () => (0, import_editor_v1_adapters9.runCommand)("shortcuts/open")
   };
 }
 
@@ -890,12 +894,12 @@ var React27 = __toESM(require("react"));
 // src/extensions/site-settings/components/portal.tsx
 var React25 = __toESM(require("react"));
 var import_ui16 = require("@elementor/ui");
-var import_editor_v1_adapters9 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters10 = require("@elementor/editor-v1-adapters");
 function Portal(props) {
-  const containerRef = (0, import_editor_v1_adapters9.useListenTo)(
+  const containerRef = (0, import_editor_v1_adapters10.useListenTo)(
     [
-      (0, import_editor_v1_adapters9.routeOpenEvent)("panel/global"),
-      (0, import_editor_v1_adapters9.routeCloseEvent)("panel/global")
+      (0, import_editor_v1_adapters10.routeOpenEvent)("panel/global"),
+      (0, import_editor_v1_adapters10.routeCloseEvent)("panel/global")
     ],
     getContainerRef
   );
@@ -905,7 +909,7 @@ function Portal(props) {
   return /* @__PURE__ */ React25.createElement(import_ui16.Portal, { container: containerRef.current, ...props });
 }
 function getContainerRef() {
-  return (0, import_editor_v1_adapters9.isRouteActive)("panel/global") ? { current: document.querySelector("#elementor-panel-inner") } : { current: null };
+  return (0, import_editor_v1_adapters10.isRouteActive)("panel/global") ? { current: document.querySelector("#elementor-panel-inner") } : { current: null };
 }
 
 // src/extensions/site-settings/components/primary-action.tsx
@@ -941,16 +945,16 @@ function PortalledPrimaryAction() {
 
 // src/extensions/site-settings/hooks/use-action-props.ts
 var import_i18n16 = require("@wordpress/i18n");
-var import_editor_v1_adapters10 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters11 = require("@elementor/editor-v1-adapters");
 var import_icons14 = require("@elementor/icons");
 function useActionProps6() {
-  const { isActive, isBlocked } = (0, import_editor_v1_adapters10.useRouteStatus)("panel/global", {
+  const { isActive, isBlocked } = (0, import_editor_v1_adapters11.useRouteStatus)("panel/global", {
     blockOnKitRoutes: false
   });
   return {
     title: (0, import_i18n16.__)("Site Settings", "elementor"),
     icon: import_icons14.AdjustmentsHorizontalIcon,
-    onClick: () => isActive ? (0, import_editor_v1_adapters10.runCommand)("panel/global/close") : (0, import_editor_v1_adapters10.runCommand)("panel/global/open"),
+    onClick: () => isActive ? (0, import_editor_v1_adapters11.runCommand)("panel/global/close") : (0, import_editor_v1_adapters11.runCommand)("panel/global/open"),
     selected: isActive,
     disabled: isBlocked
   };
@@ -971,14 +975,14 @@ function init9() {
 
 // src/extensions/structure/hooks/use-action-props.ts
 var import_i18n17 = require("@wordpress/i18n");
-var import_editor_v1_adapters11 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters12 = require("@elementor/editor-v1-adapters");
 var import_icons15 = require("@elementor/icons");
 function useActionProps7() {
-  const { isActive, isBlocked } = (0, import_editor_v1_adapters11.useRouteStatus)("navigator");
+  const { isActive, isBlocked } = (0, import_editor_v1_adapters12.useRouteStatus)("navigator");
   return {
     title: (0, import_i18n17.__)("Structure", "elementor"),
     icon: import_icons15.StructureIcon,
-    onClick: () => (0, import_editor_v1_adapters11.runCommand)("navigator/toggle"),
+    onClick: () => (0, import_editor_v1_adapters12.runCommand)("navigator/toggle"),
     selected: isActive,
     disabled: isBlocked
   };
@@ -996,12 +1000,12 @@ function init10() {
 // src/extensions/theme-builder/hooks/use-action-props.ts
 var import_i18n18 = require("@wordpress/i18n");
 var import_icons16 = require("@elementor/icons");
-var import_editor_v1_adapters12 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters13 = require("@elementor/editor-v1-adapters");
 function useActionProps8() {
   return {
     icon: import_icons16.ThemeBuilderIcon,
     title: (0, import_i18n18.__)("Theme Builder", "elementor"),
-    onClick: () => (0, import_editor_v1_adapters12.runCommand)("app/open")
+    onClick: () => (0, import_editor_v1_adapters13.runCommand)("app/open")
   };
 }
 
@@ -1016,13 +1020,13 @@ function init11() {
 // src/extensions/user-preferences/hooks/use-action-props.ts
 var import_i18n19 = require("@wordpress/i18n");
 var import_icons17 = require("@elementor/icons");
-var import_editor_v1_adapters13 = require("@elementor/editor-v1-adapters");
+var import_editor_v1_adapters14 = require("@elementor/editor-v1-adapters");
 function useActionProps9() {
-  const { isActive, isBlocked } = (0, import_editor_v1_adapters13.useRouteStatus)("panel/editor-preferences");
+  const { isActive, isBlocked } = (0, import_editor_v1_adapters14.useRouteStatus)("panel/editor-preferences");
   return {
     icon: import_icons17.ToggleRightIcon,
     title: (0, import_i18n19.__)("User Preferences", "elementor"),
-    onClick: () => (0, import_editor_v1_adapters13.openRoute)("panel/editor-preferences"),
+    onClick: () => (0, import_editor_v1_adapters14.openRoute)("panel/editor-preferences"),
     selected: isActive,
     disabled: isBlocked
   };