@elementor/editor-app-bar 0.14.6 → 0.15.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.15.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-app-bar@0.14.6...@elementor/editor-app-bar@0.15.0) (2024-07-18)
+
+### Features
+
+- **editor-responsive:** separate data and ui [EDS-272] ([#206](https://github.com/elementor/elementor-packages/issues/206)) ([a5a24cc](https://github.com/elementor/elementor-packages/commit/a5a24cc8abed5f5a9b1523436e1c63f24a202198))
+
 ## [0.14.6](https://github.com/elementor/elementor-packages/compare/@elementor/editor-app-bar@0.14.5...@elementor/editor-app-bar@0.14.6) (2024-07-16)
 
 **Note:** Version bump only for package @elementor/editor-app-bar

package/dist/index.js

@@ -1152,15 +1152,117 @@ function init8() {
   });
 }
 
+// src/extensions/responsive/components/breakpoints-switcher.tsx
+var React26 = __toESM(require("react"));
+var import_i18n17 = require("@wordpress/i18n");
+var import_ui17 = require("@elementor/ui");
+var import_editor_responsive = require("@elementor/editor-responsive");
+var import_icons16 = require("@elementor/icons");
+function BreakpointsSwitcher() {
+  const breakpoints = (0, import_editor_responsive.useBreakpoints)();
+  const activeBreakpoint = (0, import_editor_responsive.useActiveBreakpoint)();
+  const activateBreakpoint = (0, import_editor_responsive.useActivateBreakpoint)();
+  if (!breakpoints.length || !activeBreakpoint) {
+    return null;
+  }
+  const onChange = (_, value) => {
+    const extendedWindow = window;
+    const config = extendedWindow?.elementor?.editorEvents?.config;
+    if (config) {
+      extendedWindow.elementor.editorEvents.dispatchEvent(config.names.topBar.responsiveControls, {
+        location: config.locations.topBar,
+        secondaryLocation: config.secondaryLocations.responsiveControls,
+        trigger: config.triggers.click,
+        element: config.elements.buttonIcon,
+        mode: value
+      });
+    }
+    activateBreakpoint(value);
+  };
+  return /* @__PURE__ */ React26.createElement(
+    import_ui17.Tabs,
+    {
+      textColor: "inherit",
+      indicatorColor: "secondary",
+      value: activeBreakpoint,
+      onChange,
+      "aria-label": (0, import_i18n17.__)("Switch Device", "elementor"),
+      sx: {
+        "& .MuiTabs-indicator": {
+          backgroundColor: "text.primary"
+        }
+      }
+    },
+    breakpoints.map(({ id, label, type, width }) => {
+      const Icon = iconsMap[id];
+      const title = labelsMap[type || "default"].replace("%s", label).replace("%d", width?.toString() || "");
+      return /* @__PURE__ */ React26.createElement(
+        import_ui17.Tab,
+        {
+          value: id,
+          key: id,
+          "aria-label": title,
+          icon: /* @__PURE__ */ React26.createElement(Tooltip5, { title }, /* @__PURE__ */ React26.createElement(Icon, null)),
+          sx: { minWidth: "auto" },
+          "data-testid": `switch-device-to-${id}`
+        }
+      );
+    })
+  );
+}
+function Tooltip5(props) {
+  return /* @__PURE__ */ React26.createElement(
+    import_ui17.Tooltip,
+    {
+      PopperProps: {
+        sx: {
+          "&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom": {
+            mt: 2.5
+          }
+        }
+      },
+      ...props
+    }
+  );
+}
+var iconsMap = {
+  widescreen: import_icons16.WidescreenIcon,
+  desktop: import_icons16.DesktopIcon,
+  laptop: import_icons16.LaptopIcon,
+  tablet_extra: import_icons16.TabletLandscapeIcon,
+  tablet: import_icons16.TabletPortraitIcon,
+  mobile_extra: import_icons16.MobileLandscapeIcon,
+  mobile: import_icons16.MobilePortraitIcon
+};
+var labelsMap = {
+  default: "%s",
+  // translators: %s: Breakpoint label, %d: Breakpoint size.
+  "min-width": (0, import_i18n17.__)("%s (%dpx and up)", "elementor"),
+  // translators: %s: Breakpoint label, %d: Breakpoint size.
+  "max-width": (0, import_i18n17.__)("%s (up to %dpx)", "elementor")
+};
+
+// src/extensions/responsive/index.ts
+function init9() {
+  injectIntoResponsive({
+    id: "responsive-breakpoints-switcher",
+    component: BreakpointsSwitcher,
+    options: {
+      priority: 20
+      // After document indication.
+    }
+  });
+}
+
 // src/extensions/site-settings/index.ts
 var import_editor = require("@elementor/editor");
 
 // src/extensions/site-settings/components/portalled-primary-action.tsx
-var React28 = __toESM(require("react"));
+var React29 = __toESM(require("react"));
 
 // src/extensions/site-settings/components/portal.tsx
-var React26 = __toESM(require("react"));
-var import_ui17 = require("@elementor/ui");
+var React27 = __toESM(require("react"));
+var import_ui18 = require("@elementor/ui");
 var import_editor_v1_adapters11 = require("@elementor/editor-v1-adapters");
 function Portal(props) {
   const containerRef = (0, import_editor_v1_adapters11.__privateUseListenTo)(
@@ -1170,22 +1272,22 @@ function Portal(props) {
   if (!containerRef.current) {
     return null;
   }
-  return /* @__PURE__ */ React26.createElement(import_ui17.Portal, { container: containerRef.current, ...props });
+  return /* @__PURE__ */ React27.createElement(import_ui18.Portal, { container: containerRef.current, ...props });
 }
 function getContainerRef() {
   return (0, import_editor_v1_adapters11.__privateIsRouteActive)("panel/global") ? { current: document.querySelector("#elementor-panel-inner") } : { current: null };
 }
 
 // src/extensions/site-settings/components/primary-action.tsx
-var React27 = __toESM(require("react"));
+var React28 = __toESM(require("react"));
 var import_editor_documents9 = require("@elementor/editor-documents");
-var import_ui18 = require("@elementor/ui");
-var import_i18n17 = require("@wordpress/i18n");
+var import_ui19 = require("@elementor/ui");
+var import_i18n18 = require("@wordpress/i18n");
 function PrimaryAction2() {
   const document2 = (0, import_editor_documents9.__useActiveDocument)();
   const { save } = (0, import_editor_documents9.__useActiveDocumentActions)();
-  return /* @__PURE__ */ React27.createElement(
-    import_ui18.Paper,
+  return /* @__PURE__ */ React28.createElement(
+    import_ui19.Paper,
     {
       sx: {
         px: 5,
@@ -1194,8 +1296,8 @@ function PrimaryAction2() {
         borderColor: "divider"
       }
     },
-    /* @__PURE__ */ React27.createElement(
-      import_ui18.Button,
+    /* @__PURE__ */ React28.createElement(
+      import_ui19.Button,
       {
         variant: "contained",
         disabled: !document2 || !document2.isDirty,
@@ -1203,27 +1305,27 @@ function PrimaryAction2() {
         sx: { width: "100%" },
         onClick: () => document2 && !document2.isSaving ? save() : null
       },
-      document2?.isSaving ? /* @__PURE__ */ React27.createElement(import_ui18.CircularProgress, null) : (0, import_i18n17.__)("Save Changes", "elementor")
+      document2?.isSaving ? /* @__PURE__ */ React28.createElement(import_ui19.CircularProgress, null) : (0, import_i18n18.__)("Save Changes", "elementor")
     )
   );
 }
 
 // src/extensions/site-settings/components/portalled-primary-action.tsx
 function PortalledPrimaryAction() {
-  return /* @__PURE__ */ React28.createElement(Portal, null, /* @__PURE__ */ React28.createElement(PrimaryAction2, null));
+  return /* @__PURE__ */ React29.createElement(Portal, null, /* @__PURE__ */ React29.createElement(PrimaryAction2, null));
 }
 
 // src/extensions/site-settings/hooks/use-action-props.ts
-var import_i18n18 = require("@wordpress/i18n");
+var import_i18n19 = require("@wordpress/i18n");
 var import_editor_v1_adapters12 = require("@elementor/editor-v1-adapters");
-var import_icons16 = require("@elementor/icons");
+var import_icons17 = require("@elementor/icons");
 function useActionProps6() {
   const { isActive, isBlocked } = (0, import_editor_v1_adapters12.__privateUseRouteStatus)("panel/global", {
     blockOnKitRoutes: false
   });
   return {
-    title: (0, import_i18n18.__)("Site Settings", "elementor"),
-    icon: import_icons16.AdjustmentsHorizontalIcon,
+    title: (0, import_i18n19.__)("Site Settings", "elementor"),
+    icon: import_icons17.AdjustmentsHorizontalIcon,
     onClick: () => {
       const extendedWindow = window;
       const config = extendedWindow?.elementor?.editorEvents?.config;
@@ -1247,7 +1349,7 @@ function useActionProps6() {
 }
 
 // src/extensions/site-settings/index.ts
-function init9() {
+function init10() {
   (0, import_editor.injectIntoTop)({
     id: "site-settings-primary-action-portal",
     component: PortalledPrimaryAction
@@ -1260,14 +1362,14 @@ function init9() {
 }
 
 // src/extensions/structure/hooks/use-action-props.ts
-var import_i18n19 = require("@wordpress/i18n");
+var import_i18n20 = require("@wordpress/i18n");
 var import_editor_v1_adapters13 = require("@elementor/editor-v1-adapters");
-var import_icons17 = require("@elementor/icons");
+var import_icons18 = require("@elementor/icons");
 function useActionProps7() {
   const { isActive, isBlocked } = (0, import_editor_v1_adapters13.__privateUseRouteStatus)("navigator");
   return {
-    title: (0, import_i18n19.__)("Structure", "elementor"),
-    icon: import_icons17.StructureIcon,
+    title: (0, import_i18n20.__)("Structure", "elementor"),
+    icon: import_icons18.StructureIcon,
     onClick: () => {
       const extendedWindow = window;
       const config = extendedWindow?.elementor?.editorEvents?.config;
@@ -1287,7 +1389,7 @@ function useActionProps7() {
 }
 
 // src/extensions/structure/index.ts
-function init10() {
+function init11() {
   toolsMenu.registerToggleAction({
     id: "toggle-structure-view",
     priority: 3,
@@ -1296,13 +1398,13 @@ function init10() {
 }
 
 // src/extensions/theme-builder/hooks/use-action-props.ts
-var import_i18n20 = require("@wordpress/i18n");
-var import_icons18 = require("@elementor/icons");
+var import_i18n21 = require("@wordpress/i18n");
+var import_icons19 = require("@elementor/icons");
 var import_editor_v1_adapters14 = require("@elementor/editor-v1-adapters");
 function useActionProps8() {
   return {
-    icon: import_icons18.ThemeBuilderIcon,
-    title: (0, import_i18n20.__)("Theme Builder", "elementor"),
+    icon: import_icons19.ThemeBuilderIcon,
+    title: (0, import_i18n21.__)("Theme Builder", "elementor"),
     onClick: () => {
       const extendedWindow = window;
       const config = extendedWindow?.elementor?.editorEvents?.config;
@@ -1320,7 +1422,7 @@ function useActionProps8() {
 }
 
 // src/extensions/theme-builder/index.ts
-function init11() {
+function init12() {
   mainMenu.registerAction({
     id: "open-theme-builder",
     useProps: useActionProps8
@@ -1328,14 +1430,14 @@ function init11() {
 }
 
 // src/extensions/user-preferences/hooks/use-action-props.ts
-var import_i18n21 = require("@wordpress/i18n");
-var import_icons19 = require("@elementor/icons");
+var import_i18n22 = require("@wordpress/i18n");
+var import_icons20 = require("@elementor/icons");
 var import_editor_v1_adapters15 = require("@elementor/editor-v1-adapters");
 function useActionProps9() {
   const { isActive, isBlocked } = (0, import_editor_v1_adapters15.__privateUseRouteStatus)("panel/editor-preferences");
   return {
-    icon: import_icons19.ToggleRightIcon,
-    title: (0, import_i18n21.__)("User Preferences", "elementor"),
+    icon: import_icons20.ToggleRightIcon,
+    title: (0, import_i18n22.__)("User Preferences", "elementor"),
     onClick: () => {
       const extendedWindow = window;
       const config = extendedWindow?.elementor?.editorEvents?.config;
@@ -1355,7 +1457,7 @@ function useActionProps9() {
 }
 
 // src/extensions/user-preferences/index.ts
-function init12() {
+function init13() {
   mainMenu.registerToggleAction({
     id: "open-user-preferences",
     priority: 30,
@@ -1365,19 +1467,19 @@ function init12() {
 }
 
 // src/extensions/wordpress/index.ts
-var import_i18n22 = require("@wordpress/i18n");
-var import_icons20 = require("@elementor/icons");
+var import_i18n23 = require("@wordpress/i18n");
+var import_icons21 = require("@elementor/icons");
 var import_editor_documents10 = require("@elementor/editor-documents");
-function init13() {
+function init14() {
   mainMenu.registerLink({
     id: "exit-to-wordpress",
     group: "exits",
     useProps: () => {
       const document2 = (0, import_editor_documents10.__useActiveDocument)();
       return {
-        title: (0, import_i18n22.__)("Exit to WordPress", "elementor"),
+        title: (0, import_i18n23.__)("Exit to WordPress", "elementor"),
         href: document2?.links?.platformEdit,
-        icon: import_icons20.WordpressIcon,
+        icon: import_icons21.WordpressIcon,
         onClick: () => {
           const extendedWindow = window;
           const config = extendedWindow?.elementor?.editorEvents?.config;
@@ -1396,7 +1498,7 @@ function init13() {
 }
 
 // src/extensions/index.ts
-function init14() {
+function init15() {
   init();
   init2();
   init3();
@@ -1410,12 +1512,13 @@ function init14() {
   init11();
   init12();
   init13();
+  init14();
 }
 
 // src/init.ts
-function init15() {
+function init16() {
   redirectOldMenus();
-  init14();
+  init15();
   (0, import_editor2.injectIntoTop)({
     id: "app-bar",
     component: AppBar
@@ -1423,7 +1526,7 @@ function init15() {
 }
 
 // src/index.ts
-init15();
+init16();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   documentOptionsMenu,