@elementor/editor-app-bar 0.14.6 → 0.15.0

package/dist/index.mjs

@@ -1151,14 +1151,128 @@ function init8() {
   });
 }
 
+// src/extensions/responsive/components/breakpoints-switcher.tsx
+import * as React26 from "react";
+import { __ as __17 } from "@wordpress/i18n";
+import { Tab, Tabs, Tooltip as BaseTooltip3 } from "@elementor/ui";
+import {
+  useBreakpoints,
+  useActivateBreakpoint,
+  useActiveBreakpoint
+} from "@elementor/editor-responsive";
+import {
+  DesktopIcon,
+  TabletPortraitIcon,
+  MobilePortraitIcon,
+  WidescreenIcon,
+  LaptopIcon,
+  TabletLandscapeIcon,
+  MobileLandscapeIcon
+} from "@elementor/icons";
+function BreakpointsSwitcher() {
+  const breakpoints = useBreakpoints();
+  const activeBreakpoint = useActiveBreakpoint();
+  const activateBreakpoint = 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(
+    Tabs,
+    {
+      textColor: "inherit",
+      indicatorColor: "secondary",
+      value: activeBreakpoint,
+      onChange,
+      "aria-label": __17("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(
+        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(
+    BaseTooltip3,
+    {
+      PopperProps: {
+        sx: {
+          "&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom": {
+            mt: 2.5
+          }
+        }
+      },
+      ...props
+    }
+  );
+}
+var iconsMap = {
+  widescreen: WidescreenIcon,
+  desktop: DesktopIcon,
+  laptop: LaptopIcon,
+  tablet_extra: TabletLandscapeIcon,
+  tablet: TabletPortraitIcon,
+  mobile_extra: MobileLandscapeIcon,
+  mobile: MobilePortraitIcon
+};
+var labelsMap = {
+  default: "%s",
+  // translators: %s: Breakpoint label, %d: Breakpoint size.
+  "min-width": __17("%s (%dpx and up)", "elementor"),
+  // translators: %s: Breakpoint label, %d: Breakpoint size.
+  "max-width": __17("%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
 import { injectIntoTop } from "@elementor/editor";
 
 // src/extensions/site-settings/components/portalled-primary-action.tsx
-import * as React28 from "react";
+import * as React29 from "react";
 
 // src/extensions/site-settings/components/portal.tsx
-import * as React26 from "react";
+import * as React27 from "react";
 import { Portal as BasePortal } from "@elementor/ui";
 import {
   __privateIsRouteActive as isRouteActive2,
@@ -1174,24 +1288,24 @@ function Portal(props) {
   if (!containerRef.current) {
     return null;
   }
-  return /* @__PURE__ */ React26.createElement(BasePortal, { container: containerRef.current, ...props });
+  return /* @__PURE__ */ React27.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 React27 from "react";
+import * as React28 from "react";
 import {
   __useActiveDocument as useActiveDocument8,
   __useActiveDocumentActions as useActiveDocumentActions5
 } from "@elementor/editor-documents";
 import { Button as Button2, CircularProgress as CircularProgress2, Paper } from "@elementor/ui";
-import { __ as __17 } from "@wordpress/i18n";
+import { __ as __18 } from "@wordpress/i18n";
 function PrimaryAction2() {
   const document2 = useActiveDocument8();
   const { save } = useActiveDocumentActions5();
-  return /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React28.createElement(
     Paper,
     {
       sx: {
@@ -1201,7 +1315,7 @@ function PrimaryAction2() {
         borderColor: "divider"
       }
     },
-    /* @__PURE__ */ React27.createElement(
+    /* @__PURE__ */ React28.createElement(
       Button2,
       {
         variant: "contained",
@@ -1210,18 +1324,18 @@ function PrimaryAction2() {
         sx: { width: "100%" },
         onClick: () => document2 && !document2.isSaving ? save() : null
       },
-      document2?.isSaving ? /* @__PURE__ */ React27.createElement(CircularProgress2, null) : __17("Save Changes", "elementor")
+      document2?.isSaving ? /* @__PURE__ */ React28.createElement(CircularProgress2, null) : __18("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
-import { __ as __18 } from "@wordpress/i18n";
+import { __ as __19 } from "@wordpress/i18n";
 import {
   __privateRunCommand as runCommand5,
   __privateUseRouteStatus as useRouteStatus5
@@ -1232,7 +1346,7 @@ function useActionProps6() {
     blockOnKitRoutes: false
   });
   return {
-    title: __18("Site Settings", "elementor"),
+    title: __19("Site Settings", "elementor"),
     icon: AdjustmentsHorizontalIcon,
     onClick: () => {
       const extendedWindow = window;
@@ -1257,7 +1371,7 @@ function useActionProps6() {
 }
 
 // src/extensions/site-settings/index.ts
-function init9() {
+function init10() {
   injectIntoTop({
     id: "site-settings-primary-action-portal",
     component: PortalledPrimaryAction
@@ -1270,7 +1384,7 @@ function init9() {
 }
 
 // src/extensions/structure/hooks/use-action-props.ts
-import { __ as __19 } from "@wordpress/i18n";
+import { __ as __20 } from "@wordpress/i18n";
 import {
   __privateRunCommand as runCommand6,
   __privateUseRouteStatus as useRouteStatus6
@@ -1279,7 +1393,7 @@ import { StructureIcon } from "@elementor/icons";
 function useActionProps7() {
   const { isActive, isBlocked } = useRouteStatus6("navigator");
   return {
-    title: __19("Structure", "elementor"),
+    title: __20("Structure", "elementor"),
     icon: StructureIcon,
     onClick: () => {
       const extendedWindow = window;
@@ -1300,7 +1414,7 @@ function useActionProps7() {
 }
 
 // src/extensions/structure/index.ts
-function init10() {
+function init11() {
   toolsMenu.registerToggleAction({
     id: "toggle-structure-view",
     priority: 3,
@@ -1309,13 +1423,13 @@ function init10() {
 }
 
 // src/extensions/theme-builder/hooks/use-action-props.ts
-import { __ as __20 } from "@wordpress/i18n";
+import { __ as __21 } from "@wordpress/i18n";
 import { ThemeBuilderIcon } from "@elementor/icons";
 import { __privateRunCommand as runCommand7 } from "@elementor/editor-v1-adapters";
 function useActionProps8() {
   return {
     icon: ThemeBuilderIcon,
-    title: __20("Theme Builder", "elementor"),
+    title: __21("Theme Builder", "elementor"),
     onClick: () => {
       const extendedWindow = window;
       const config = extendedWindow?.elementor?.editorEvents?.config;
@@ -1333,7 +1447,7 @@ function useActionProps8() {
 }
 
 // src/extensions/theme-builder/index.ts
-function init11() {
+function init12() {
   mainMenu.registerAction({
     id: "open-theme-builder",
     useProps: useActionProps8
@@ -1341,7 +1455,7 @@ function init11() {
 }
 
 // src/extensions/user-preferences/hooks/use-action-props.ts
-import { __ as __21 } from "@wordpress/i18n";
+import { __ as __22 } from "@wordpress/i18n";
 import { ToggleRightIcon } from "@elementor/icons";
 import {
   __privateOpenRoute as openRoute5,
@@ -1351,7 +1465,7 @@ function useActionProps9() {
   const { isActive, isBlocked } = useRouteStatus7("panel/editor-preferences");
   return {
     icon: ToggleRightIcon,
-    title: __21("User Preferences", "elementor"),
+    title: __22("User Preferences", "elementor"),
     onClick: () => {
       const extendedWindow = window;
       const config = extendedWindow?.elementor?.editorEvents?.config;
@@ -1371,7 +1485,7 @@ function useActionProps9() {
 }
 
 // src/extensions/user-preferences/index.ts
-function init12() {
+function init13() {
   mainMenu.registerToggleAction({
     id: "open-user-preferences",
     priority: 30,
@@ -1381,17 +1495,17 @@ function init12() {
 }
 
 // src/extensions/wordpress/index.ts
-import { __ as __22 } from "@wordpress/i18n";
+import { __ as __23 } from "@wordpress/i18n";
 import { WordpressIcon } from "@elementor/icons";
 import { __useActiveDocument as useActiveDocument9 } from "@elementor/editor-documents";
-function init13() {
+function init14() {
   mainMenu.registerLink({
     id: "exit-to-wordpress",
     group: "exits",
     useProps: () => {
       const document2 = useActiveDocument9();
       return {
-        title: __22("Exit to WordPress", "elementor"),
+        title: __23("Exit to WordPress", "elementor"),
         href: document2?.links?.platformEdit,
         icon: WordpressIcon,
         onClick: () => {
@@ -1412,7 +1526,7 @@ function init13() {
 }
 
 // src/extensions/index.ts
-function init14() {
+function init15() {
   init();
   init2();
   init3();
@@ -1426,12 +1540,13 @@ function init14() {
   init11();
   init12();
   init13();
+  init14();
 }
 
 // src/init.ts
-function init15() {
+function init16() {
   redirectOldMenus();
-  init14();
+  init15();
   injectIntoTop2({
     id: "app-bar",
     component: AppBar
@@ -1439,7 +1554,7 @@ function init15() {
 }
 
 // src/index.ts
-init15();
+init16();
 export {
   documentOptionsMenu,
   injectIntoPageIndication,