@elementor/editor-app-bar 4.3.0-986 → 4.3.0-988

package/dist/index.mjs

@@ -189,19 +189,75 @@ var documentOptionsMenu = createMenu2({
 import { injectIntoTop as injectIntoTop2 } from "@elementor/editor";
 
 // src/components/app-bar.tsx
-import * as React22 from "react";
+import * as React23 from "react";
+import { useRef } from "react";
 import { __useActiveDocument as useActiveDocument } from "@elementor/editor-documents";
 import { AppBar as BaseAppBar, Box as Box3, Divider as Divider2, Grid, ThemeProvider as ThemeProvider3, Toolbar } from "@elementor/ui";
 
+// src/constants.ts
+var MIN_APP_BAR_WIDTH = 800;
+var DEFAULT_MAX_TOOLBAR_ACTIONS = {
+  tools: 5,
+  utilities: 4
+};
+
+// src/contexts/app-bar-size-context.tsx
+import * as React8 from "react";
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var AppBarSizeContext = createContext2(DEFAULT_MAX_TOOLBAR_ACTIONS);
+function AppBarSizeProvider({ value, children }) {
+  return /* @__PURE__ */ React8.createElement(AppBarSizeContext.Provider, { value }, children);
+}
+function useMaxToolbarActions() {
+  return useContext2(AppBarSizeContext);
+}
+
+// src/hooks/use-container-width.ts
+import { useEffect, useState } from "react";
+function useContainerWidth(ref) {
+  const [width, setWidth] = useState(0);
+  useEffect(() => {
+    const element = ref.current;
+    if (!element || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      if (entry) {
+        setWidth(entry.contentRect.width);
+      }
+    });
+    setWidth(element.getBoundingClientRect().width);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [ref]);
+  return width;
+}
+
+// src/utils/get-max-toolbar-actions.ts
+var BREAKPOINTS = [
+  { minWidth: 1200, ...DEFAULT_MAX_TOOLBAR_ACTIONS },
+  { minWidth: 950, tools: 3, utilities: 2 },
+  { minWidth: MIN_APP_BAR_WIDTH, tools: 1, utilities: 0 },
+  { minWidth: 0, tools: 0, utilities: 0 }
+];
+function getMaxToolbarActions(containerWidth) {
+  if (!containerWidth) {
+    return DEFAULT_MAX_TOOLBAR_ACTIONS;
+  }
+  const breakpoint = BREAKPOINTS.find(({ minWidth }) => containerWidth >= minWidth) ?? BREAKPOINTS.at(-1);
+  return { tools: breakpoint?.tools ?? 0, utilities: breakpoint?.utilities ?? 0 };
+}
+
 // src/components/locations/main-menu-location.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import { bindMenu, bindTrigger, Divider, Stack, usePopupState } from "@elementor/ui";
 
 // src/components/ui/popover-menu.tsx
-import * as React8 from "react";
+import * as React9 from "react";
 import { Menu } from "@elementor/ui";
 function PopoverMenu({ children, popupState, ...props }) {
-  return /* @__PURE__ */ React8.createElement(MenuContextProvider, { type: "popover", popupState }, /* @__PURE__ */ React8.createElement(
+  return /* @__PURE__ */ React9.createElement(MenuContextProvider, { type: "popover", popupState }, /* @__PURE__ */ React9.createElement(
     Menu,
     {
       PaperProps: {
@@ -218,12 +274,12 @@ function PopoverMenu({ children, popupState, ...props }) {
 }
 
 // src/components/ui/toolbar-logo.tsx
-import * as React9 from "react";
-import { useState } from "react";
+import * as React10 from "react";
+import { useState as useState2 } from "react";
 import { styled, SvgIcon, ToggleButton as ToggleButton2 } from "@elementor/ui";
 import { __ } from "@wordpress/i18n";
 var ElementorLogo = (props) => {
-  return /* @__PURE__ */ React9.createElement(SvgIcon, { viewBox: "0 0 32 32", ...props }, /* @__PURE__ */ React9.createElement("g", null, /* @__PURE__ */ React9.createElement("circle", { cx: "16", cy: "16", r: "16" }), /* @__PURE__ */ React9.createElement("path", { d: "M11.7 9H9V22.3H11.7V9Z" }), /* @__PURE__ */ React9.createElement("path", { d: "M22.4 9H9V11.7H22.4V9Z" }), /* @__PURE__ */ React9.createElement("path", { d: "M22.4 14.4004H9V17.1004H22.4V14.4004Z" }), /* @__PURE__ */ React9.createElement("path", { d: "M22.4 19.6992H9V22.3992H22.4V19.6992Z" })));
+  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 }) => ({
   padding: 0,
@@ -263,9 +319,9 @@ var StyledElementorLogo = styled(ElementorLogo, {
   }
 }));
 function ToolbarLogo(props) {
-  const [isHoverState, setIsHoverState] = useState(false);
+  const [isHoverState, setIsHoverState] = useState2(false);
   const showMenuIcon = props.selected || isHoverState;
-  return /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React10.createElement(
     StyledToggleButton,
     {
       ...props,
@@ -274,7 +330,7 @@ function ToolbarLogo(props) {
       onMouseEnter: () => setIsHoverState(true),
       onMouseLeave: () => setIsHoverState(false)
     },
-    /* @__PURE__ */ React9.createElement(
+    /* @__PURE__ */ React10.createElement(
       StyledElementorLogo,
       {
         fontSize: "large",
@@ -307,33 +363,33 @@ function MainMenuLocation() {
     }
     toolbarLogoProps.onClick(e);
   };
-  return /* @__PURE__ */ React10.createElement(Stack, { sx: { paddingInlineStart: 3 }, direction: "row", alignItems: "center" }, /* @__PURE__ */ React10.createElement(ToolbarLogo, { ...toolbarLogoProps, onClick: onToolbarClick, selected: popupState.isOpen }), /* @__PURE__ */ React10.createElement(PopoverMenu, { onClick: popupState.close, ...bindMenu(popupState), marginThreshold: 8 }, menuItems.default.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React10.createElement(MenuItem2, { key: id })), /* @__PURE__ */ React10.createElement(Divider, null), menuItems.help.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React10.createElement(MenuItem2, { key: id })), menuItems.exits.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React10.createElement(MenuItem2, { key: id }))));
+  return /* @__PURE__ */ React11.createElement(Stack, { sx: { paddingInlineStart: 3 }, direction: "row", alignItems: "center" }, /* @__PURE__ */ React11.createElement(ToolbarLogo, { ...toolbarLogoProps, onClick: onToolbarClick, selected: popupState.isOpen }), /* @__PURE__ */ React11.createElement(PopoverMenu, { onClick: popupState.close, ...bindMenu(popupState), marginThreshold: 8 }, menuItems.default.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React11.createElement(MenuItem2, { key: id })), /* @__PURE__ */ React11.createElement(Divider, null), menuItems.help.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React11.createElement(MenuItem2, { key: id })), menuItems.exits.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React11.createElement(MenuItem2, { key: id }))));
 }
 
 // src/components/locations/page-indication-location.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 function PageIndicationLocation() {
-  return /* @__PURE__ */ React11.createElement(PageIndicationSlot, null);
+  return /* @__PURE__ */ React12.createElement(PageIndicationSlot, null);
 }
 
 // src/components/locations/primary-action-location.tsx
-import * as React12 from "react";
+import * as React13 from "react";
 function PrimaryActionLocation() {
-  return /* @__PURE__ */ React12.createElement(PrimaryActionSlot, null);
+  return /* @__PURE__ */ React13.createElement(PrimaryActionSlot, null);
 }
 
 // src/components/locations/responsive-location.tsx
-import * as React13 from "react";
+import * as React14 from "react";
 function ResponsiveLocation() {
-  return /* @__PURE__ */ React13.createElement(ResponsiveSlot, null);
+  return /* @__PURE__ */ React14.createElement(ResponsiveSlot, null);
 }
 
 // src/components/locations/tools-menu-location.tsx
-import * as React20 from "react";
+import * as React21 from "react";
 
 // src/extensions/angie/components/angie-guide-location.tsx
-import * as React15 from "react";
-import { useEffect as useEffect2, useState as useState2 } from "react";
+import * as React16 from "react";
+import { useEffect as useEffect3, useState as useState3 } from "react";
 import { useCurrentUserCapabilities } from "@elementor/editor-current-user";
 import { ThemeProvider } from "@elementor/editor-ui";
 import { useMixpanel } from "@elementor/events";
@@ -354,11 +410,11 @@ var ANGIE_TOP_BAR_PROMOTION_IMAGE_URL = "https://assets.elementor.com/packages/v
 var ANGIE_TOP_BAR_DESCRIPTION = __2("Build custom widgets using simple instructions.", "elementor");
 
 // src/extensions/angie/components/angie-guide-card.tsx
-import * as React14 from "react";
+import * as React15 from "react";
 import { Button, Chip, ClickAwayListener, CloseButton, Image, Stack as Stack2, Typography } from "@elementor/ui";
 import { __ as __3 } from "@wordpress/i18n";
 function AngieGuideCard({ imageUrl, description, learnMoreUrl, onInstall, onClose }) {
-  return /* @__PURE__ */ React14.createElement(ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React14.createElement(Stack2, { sx: { width: 296 }, "data-testid": "e-angie-guide-card" }, /* @__PURE__ */ React14.createElement(Stack2, { direction: "row", alignItems: "center", gap: 1, py: 1, px: 2 }, /* @__PURE__ */ React14.createElement(Typography, { variant: "subtitle2" }, __3("Meet Angie", "elementor")), /* @__PURE__ */ React14.createElement(Chip, { label: __3("New", "elementor"), size: "small", color: "info", variant: "standard" }), /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React15.createElement(ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React15.createElement(Stack2, { sx: { width: 296 }, "data-testid": "e-angie-guide-card" }, /* @__PURE__ */ React15.createElement(Stack2, { direction: "row", alignItems: "center", gap: 1, py: 1, px: 2 }, /* @__PURE__ */ React15.createElement(Typography, { variant: "subtitle2" }, __3("Meet Angie", "elementor")), /* @__PURE__ */ React15.createElement(Chip, { label: __3("New", "elementor"), size: "small", color: "info", variant: "standard" }), /* @__PURE__ */ React15.createElement(
     CloseButton,
     {
       edge: "end",
@@ -366,7 +422,7 @@ function AngieGuideCard({ imageUrl, description, learnMoreUrl, onInstall, onClos
       slotProps: { icon: { fontSize: "small" } },
       onClick: onClose
     }
-  )), /* @__PURE__ */ React14.createElement(Image, { src: imageUrl, alt: __3("Angie", "elementor"), sx: { height: 150, width: "100%" } }), /* @__PURE__ */ React14.createElement(Stack2, { px: 2, pt: 1.5, pb: 1 }, /* @__PURE__ */ React14.createElement(Typography, { variant: "body2", color: "secondary" }, description)), /* @__PURE__ */ React14.createElement(Stack2, { direction: "row", justifyContent: "flex-end", gap: 1, pt: 1, pb: 1.5, px: 2 }, /* @__PURE__ */ React14.createElement(
+  )), /* @__PURE__ */ React15.createElement(Image, { src: imageUrl, alt: __3("Angie", "elementor"), sx: { height: 150, width: "100%" } }), /* @__PURE__ */ React15.createElement(Stack2, { px: 2, pt: 1.5, pb: 1 }, /* @__PURE__ */ React15.createElement(Typography, { variant: "body2", color: "secondary" }, description)), /* @__PURE__ */ React15.createElement(Stack2, { direction: "row", justifyContent: "flex-end", gap: 1, pt: 1, pb: 1.5, px: 2 }, /* @__PURE__ */ React15.createElement(
     Button,
     {
       variant: "text",
@@ -378,13 +434,13 @@ function AngieGuideCard({ imageUrl, description, learnMoreUrl, onInstall, onClos
       }
     },
     __3("Learn More", "elementor")
-  ), onInstall && /* @__PURE__ */ React14.createElement(Button, { variant: "contained", size: "small", color: "accent", onClick: onInstall }, __3("Try for free", "elementor")))));
+  ), onInstall && /* @__PURE__ */ React15.createElement(Button, { variant: "contained", size: "small", color: "accent", onClick: onInstall }, __3("Try for free", "elementor")))));
 }
 
 // src/extensions/angie/hooks/use-auto-show.ts
-import { useEffect } from "react";
+import { useEffect as useEffect2 } from "react";
 function useAutoShow() {
-  useEffect(() => {
+  useEffect2(() => {
     if (!window.elementor?.config?.angie?.autoShow) {
       return;
     }
@@ -398,11 +454,11 @@ function useAutoShow() {
 // src/extensions/angie/components/angie-guide-location.tsx
 function AngieGuideLocation() {
   useAutoShow();
-  const [anchorEl, setAnchorEl] = useState2(null);
+  const [anchorEl, setAnchorEl] = useState3(null);
   const { dispatchEvent: dispatchEvent2 } = useMixpanel();
   const { isAdmin } = useCurrentUserCapabilities();
   const isOpen = Boolean(anchorEl);
-  useEffect2(() => {
+  useEffect3(() => {
     const handleToggle = () => {
       setAnchorEl((prev) => {
         if (prev) {
@@ -430,10 +486,10 @@ function AngieGuideLocation() {
     );
     handleClose();
   };
-  return /* @__PURE__ */ React15.createElement(ThemeProvider, null, /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(ThemeProvider, null, /* @__PURE__ */ React16.createElement(
     Infotip,
     {
-      content: /* @__PURE__ */ React15.createElement(
+      content: /* @__PURE__ */ React16.createElement(
         AngieGuideCard,
         {
           imageUrl: ANGIE_TOP_BAR_PROMOTION_IMAGE_URL,
@@ -456,19 +512,19 @@ function AngieGuideLocation() {
         ]
       }
     },
-    /* @__PURE__ */ React15.createElement("span", null)
+    /* @__PURE__ */ React16.createElement("span", null)
   ));
 }
 
 // src/components/ui/toolbar-menu.tsx
-import * as React16 from "react";
+import * as React17 from "react";
 import { Stack as Stack3 } from "@elementor/ui";
 function ToolbarMenu({ children, ...props }) {
-  return /* @__PURE__ */ React16.createElement(MenuContextProvider, { type: "toolbar" }, /* @__PURE__ */ React16.createElement(Stack3, { sx: { px: 1.5 }, spacing: 1.5, direction: "row", alignItems: "center", ...props }, children));
+  return /* @__PURE__ */ React17.createElement(MenuContextProvider, { type: "toolbar" }, /* @__PURE__ */ React17.createElement(Stack3, { sx: { px: 1.5 }, spacing: 1.5, direction: "row", alignItems: "center", ...props }, children));
 }
 
 // src/components/ui/toolbar-menu-more.tsx
-import * as React17 from "react";
+import * as React18 from "react";
 import { DotsVerticalIcon } from "@elementor/icons";
 import { bindMenu as bindMenu2, bindTrigger as bindTrigger2, usePopupState as usePopupState2 } from "@elementor/ui";
 import { __ as __4 } from "@wordpress/i18n";
@@ -477,11 +533,11 @@ function ToolbarMenuMore({ children, id }) {
     variant: "popover",
     popupId: id
   });
-  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(ToolbarMenuItem, { ...bindTrigger2(popupState), title: __4("More", "elementor") }, /* @__PURE__ */ React17.createElement(DotsVerticalIcon, null)), /* @__PURE__ */ React17.createElement(PopoverMenu, { onClick: popupState.close, ...bindMenu2(popupState) }, children));
+  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(ToolbarMenuItem, { ...bindTrigger2(popupState), title: __4("More", "elementor") }, /* @__PURE__ */ React18.createElement(DotsVerticalIcon, null)), /* @__PURE__ */ React18.createElement(PopoverMenu, { onClick: popupState.close, ...bindMenu2(popupState) }, children));
 }
 
 // src/components/locations/integrations-menu-location.tsx
-import * as React18 from "react";
+import * as React19 from "react";
 import { PlugIcon } from "@elementor/icons";
 import { bindMenu as bindMenu3, bindTrigger as bindTrigger3, usePopupState as usePopupState3 } from "@elementor/ui";
 import { __ as __5 } from "@wordpress/i18n";
@@ -495,7 +551,7 @@ function IntegrationsMenuLocation() {
   if (menuItems.default.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(ToolbarMenuItem, { ...bindTrigger3(popupState), title: __5("Integrations", "elementor") }, /* @__PURE__ */ React18.createElement(PlugIcon, null)), /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(ToolbarMenuItem, { ...bindTrigger3(popupState), title: __5("Integrations", "elementor") }, /* @__PURE__ */ React19.createElement(PlugIcon, null)), /* @__PURE__ */ React19.createElement(
     PopoverMenu,
     {
       onClick: popupState.close,
@@ -503,13 +559,13 @@ function IntegrationsMenuLocation() {
       marginThreshold: 8,
       open: popupState.isOpen
     },
-    menuItems.default.map(({ MenuItem: IntegrationsMenuItem, id }) => /* @__PURE__ */ React18.createElement(IntegrationsMenuItem, { key: id }))
+    menuItems.default.map(({ MenuItem: IntegrationsMenuItem, id }) => /* @__PURE__ */ React19.createElement(IntegrationsMenuItem, { key: id }))
   ));
 }
 
 // src/components/locations/send-feedback-popup-location.tsx
-import * as React19 from "react";
-import { useEffect as useEffect3, useState as useState3 } from "react";
+import * as React20 from "react";
+import { useEffect as useEffect4, useState as useState4 } from "react";
 import { ThemeProvider as ThemeProvider2 } from "@elementor/editor-ui";
 import { isExperimentActive } from "@elementor/editor-v1-adapters";
 import { useMixpanel as useMixpanel2 } from "@elementor/events";
@@ -542,18 +598,18 @@ var checkIfUserIsConnected = () => {
 function SendFeedbackPopupLocation() {
   const isActive = isExperimentActive(EXPERIMENT_NAME);
   const extendedWindow = window;
-  const [isUserConnected, setIsUserConnected] = useState3(checkIfUserIsConnected());
+  const [isUserConnected, setIsUserConnected] = useState4(checkIfUserIsConnected());
   const connectUrl = extendedWindow?.elementor?.config.user.top_bar.connect_url;
-  const [feedbackContent, setFeedbackContent] = useState3("");
-  const [feedbackResult, setFeedbackResult] = useState3(null);
-  const [submitDisabled, setSubmitDisabled] = useState3(true);
+  const [feedbackContent, setFeedbackContent] = useState4("");
+  const [feedbackResult, setFeedbackResult] = useState4(null);
+  const [submitDisabled, setSubmitDisabled] = useState4(true);
   const { dispatchEvent: trackEvent2 = (...args) => void args } = useMixpanel2();
   const popupState = usePopupState4({
     variant: "dialog",
     popupId: FEEDBACK_TOGGLE_EVENT
   });
-  const [isFetching, setIsFetching] = useState3(false);
-  useEffect3(() => {
+  const [isFetching, setIsFetching] = useState4(false);
+  useEffect4(() => {
     const handler = () => {
       popupState.toggle();
       setIsUserConnected(checkIfUserIsConnected());
@@ -568,7 +624,7 @@ function SendFeedbackPopupLocation() {
       window.removeEventListener(FEEDBACK_TOGGLE_EVENT, handler);
     };
   }, [popupState, trackEvent2]);
-  useEffect3(() => {
+  useEffect4(() => {
     setSubmitDisabled(feedbackContent.trim().length < 10 || !isUserConnected || isFetching);
   }, [feedbackContent, feedbackResult, isUserConnected, isFetching]);
   const handleClose = () => {
@@ -603,7 +659,7 @@ function SendFeedbackPopupLocation() {
   if (!isActive) {
     return null;
   }
-  return /* @__PURE__ */ React19.createElement(ThemeProvider2, null, /* @__PURE__ */ React19.createElement(Popover, { ...bindDialog(popupState), onClose: () => handleClose() }, /* @__PURE__ */ React19.createElement(Dialog, { open: popupState.isOpen }, /* @__PURE__ */ React19.createElement(DialogHeader, { style: { width: "100%", minWidth: "35rem" } }, /* @__PURE__ */ React19.createElement(DialogTitle, { style: { width: "100%" } }, /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(ThemeProvider2, null, /* @__PURE__ */ React20.createElement(Popover, { ...bindDialog(popupState), onClose: () => handleClose() }, /* @__PURE__ */ React20.createElement(Dialog, { open: popupState.isOpen }, /* @__PURE__ */ React20.createElement(DialogHeader, { style: { width: "100%", minWidth: "35rem" } }, /* @__PURE__ */ React20.createElement(DialogTitle, { style: { width: "100%" } }, /* @__PURE__ */ React20.createElement(
     Stack4,
     {
       display: "flex",
@@ -613,8 +669,8 @@ function SendFeedbackPopupLocation() {
       width: "100%"
     },
     __6("Submit Feedback", "elementor"),
-    /* @__PURE__ */ React19.createElement(CloseButton2, { onClick: popupState.close })
-  ))), /* @__PURE__ */ React19.createElement(DialogContent, null, /* @__PURE__ */ React19.createElement(Stack4, { direction: "column", gap: 2 }, isUserConnected ? /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
+    /* @__PURE__ */ React20.createElement(CloseButton2, { onClick: popupState.close })
+  ))), /* @__PURE__ */ React20.createElement(DialogContent, null, /* @__PURE__ */ React20.createElement(Stack4, { direction: "column", gap: 2 }, isUserConnected ? /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(
     TextField,
     {
       autofocus: true,
@@ -632,7 +688,7 @@ function SendFeedbackPopupLocation() {
       onChange: (event) => setFeedbackContent(event.target.value),
       value: feedbackContent
     }
-  ), /* @__PURE__ */ React19.createElement(Stack4, { direction: "row", justifyContent: "flex-end", alignItems: "center", gap: 2 }, feedbackResult && /* @__PURE__ */ React19.createElement(React19.Fragment, null, feedbackResult.success ? /* @__PURE__ */ React19.createElement(CheckIcon, { color: "success" }) : /* @__PURE__ */ React19.createElement(AlertCircleIcon, { color: "error" }), feedbackResult.message), feedbackResult?.success ? /* @__PURE__ */ React19.createElement(Button2, { variant: "text", onClick: () => handleStartAnother() }, __6("Submit Another Feedback", "elementor")) : /* @__PURE__ */ React19.createElement(
+  ), /* @__PURE__ */ React20.createElement(Stack4, { direction: "row", justifyContent: "flex-end", alignItems: "center", gap: 2 }, feedbackResult && /* @__PURE__ */ React20.createElement(React20.Fragment, null, feedbackResult.success ? /* @__PURE__ */ React20.createElement(CheckIcon, { color: "success" }) : /* @__PURE__ */ React20.createElement(AlertCircleIcon, { color: "error" }), feedbackResult.message), feedbackResult?.success ? /* @__PURE__ */ React20.createElement(Button2, { variant: "text", onClick: () => handleStartAnother() }, __6("Submit Another Feedback", "elementor")) : /* @__PURE__ */ React20.createElement(
     Button2,
     {
       disabled: submitDisabled,
@@ -642,7 +698,7 @@ function SendFeedbackPopupLocation() {
       size: "small"
     },
     __6("Submit", "elementor")
-  ))) : /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
+  ))) : /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(
     Button2,
     {
       variant: "contained",
@@ -658,36 +714,59 @@ function SendFeedbackPopupLocation() {
 }
 
 // src/components/locations/tools-menu-location.tsx
-var MAX_TOOLBAR_ACTIONS = 5;
 var { useMenuItems: useMenuItems3 } = toolsMenu;
 function ToolsMenuLocation() {
   const menuItems = useMenuItems3();
-  const toolbarMenuItems = menuItems.default.slice(0, MAX_TOOLBAR_ACTIONS);
-  const popoverMenuItems = menuItems.default.slice(MAX_TOOLBAR_ACTIONS);
-  return /* @__PURE__ */ React20.createElement(ToolbarMenu, null, toolbarMenuItems.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React20.createElement(MenuItem2, { key: id })), /* @__PURE__ */ React20.createElement(AngieGuideLocation, null), /* @__PURE__ */ React20.createElement(SendFeedbackPopupLocation, null), /* @__PURE__ */ React20.createElement(IntegrationsMenuLocation, null), popoverMenuItems.length > 0 && /* @__PURE__ */ React20.createElement(ToolbarMenuMore, { id: "elementor-editor-app-bar-tools-more" }, popoverMenuItems.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React20.createElement(MenuItem2, { key: id }))));
+  const { tools: maxToolbarActions } = useMaxToolbarActions();
+  const toolbarMenuItems = menuItems.default.slice(0, maxToolbarActions);
+  const popoverMenuItems = menuItems.default.slice(maxToolbarActions);
+  return /* @__PURE__ */ React21.createElement(ToolbarMenu, null, toolbarMenuItems.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React21.createElement(MenuItem2, { key: id })), /* @__PURE__ */ React21.createElement(AngieGuideLocation, null), /* @__PURE__ */ React21.createElement(SendFeedbackPopupLocation, null), /* @__PURE__ */ React21.createElement(IntegrationsMenuLocation, null), popoverMenuItems.length > 0 && /* @__PURE__ */ React21.createElement(ToolbarMenuMore, { id: "elementor-editor-app-bar-tools-more" }, popoverMenuItems.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React21.createElement(MenuItem2, { key: id }))));
 }
 
 // src/components/locations/utilities-menu-location.tsx
-import * as React21 from "react";
+import * as React22 from "react";
 import { Fragment as Fragment4 } from "react";
-var MAX_TOOLBAR_ACTIONS2 = 4;
 var { useMenuItems: useMenuItems4 } = utilitiesMenu;
 function UtilitiesMenuLocation() {
   const menuItems = useMenuItems4();
-  const shouldUsePopover = menuItems.default.length > MAX_TOOLBAR_ACTIONS2 + 1;
-  const toolbarMenuItems = shouldUsePopover ? menuItems.default.slice(0, MAX_TOOLBAR_ACTIONS2) : menuItems.default;
-  const popoverMenuItems = shouldUsePopover ? menuItems.default.slice(MAX_TOOLBAR_ACTIONS2) : [];
-  return /* @__PURE__ */ React21.createElement(ToolbarMenu, null, toolbarMenuItems.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React21.createElement(Fragment4, { key: id }, /* @__PURE__ */ React21.createElement(MenuItem2, null))), popoverMenuItems.length > 0 && /* @__PURE__ */ React21.createElement(ToolbarMenuMore, { id: "elementor-editor-app-bar-utilities-more" }, popoverMenuItems.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React21.createElement(MenuItem2, { key: id }))));
+  const { utilities: maxToolbarActions } = useMaxToolbarActions();
+  const shouldUsePopover = menuItems.default.length > maxToolbarActions + 1;
+  const toolbarMenuItems = shouldUsePopover ? menuItems.default.slice(0, maxToolbarActions) : menuItems.default;
+  const popoverMenuItems = shouldUsePopover ? menuItems.default.slice(maxToolbarActions) : [];
+  return /* @__PURE__ */ React22.createElement(ToolbarMenu, null, toolbarMenuItems.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React22.createElement(Fragment4, { key: id }, /* @__PURE__ */ React22.createElement(MenuItem2, null))), popoverMenuItems.length > 0 && /* @__PURE__ */ React22.createElement(ToolbarMenuMore, { id: "elementor-editor-app-bar-utilities-more" }, popoverMenuItems.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React22.createElement(MenuItem2, { key: id }))));
 }
 
 // src/components/app-bar.tsx
 function AppBar() {
   const document2 = useActiveDocument();
-  return /* @__PURE__ */ React22.createElement(ThemeProvider3, { colorScheme: "dark" }, /* @__PURE__ */ React22.createElement(BaseAppBar, { position: "sticky" }, /* @__PURE__ */ React22.createElement(Toolbar, { disableGutters: true, variant: "dense" }, /* @__PURE__ */ React22.createElement(Box3, { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", flexGrow: 1 }, /* @__PURE__ */ React22.createElement(Grid, { container: true, flexWrap: "nowrap" }, /* @__PURE__ */ React22.createElement(MainMenuLocation, null), document2?.permissions?.allowAddingWidgets && /* @__PURE__ */ React22.createElement(ToolsMenuLocation, null)), /* @__PURE__ */ React22.createElement(Grid, { container: true, justifyContent: "center" }, /* @__PURE__ */ React22.createElement(ToolbarMenu, { spacing: 1.5 }, /* @__PURE__ */ React22.createElement(Divider2, { orientation: "vertical" }), /* @__PURE__ */ React22.createElement(PageIndicationLocation, null), /* @__PURE__ */ React22.createElement(Divider2, { orientation: "vertical" }), /* @__PURE__ */ React22.createElement(ResponsiveLocation, null), /* @__PURE__ */ React22.createElement(Divider2, { orientation: "vertical" }))), /* @__PURE__ */ React22.createElement(Grid, { container: true, justifyContent: "flex-end", flexWrap: "nowrap" }, /* @__PURE__ */ React22.createElement(UtilitiesMenuLocation, null), /* @__PURE__ */ React22.createElement(PrimaryActionLocation, null))))));
+  const containerRef = useRef(null);
+  const containerWidth = useContainerWidth(containerRef);
+  const maxToolbarActions = getMaxToolbarActions(containerWidth);
+  return /* @__PURE__ */ React23.createElement(ThemeProvider3, { colorScheme: "dark" }, /* @__PURE__ */ React23.createElement(BaseAppBar, { position: "sticky" }, /* @__PURE__ */ React23.createElement(Toolbar, { disableGutters: true, variant: "dense", sx: { overflowX: "auto" } }, /* @__PURE__ */ React23.createElement(
+    Box3,
+    {
+      ref: containerRef,
+      display: "grid",
+      gridTemplateColumns: "minmax(0, 1fr) auto minmax(0, 1fr)",
+      flexGrow: 1,
+      minWidth: `${MIN_APP_BAR_WIDTH}px`
+    },
+    /* @__PURE__ */ React23.createElement(AppBarSizeProvider, { value: maxToolbarActions }, /* @__PURE__ */ React23.createElement(Grid, { container: true, flexWrap: "nowrap", sx: { minWidth: 0, overflow: "hidden" } }, /* @__PURE__ */ React23.createElement(MainMenuLocation, null), document2?.permissions?.allowAddingWidgets && /* @__PURE__ */ React23.createElement(ToolsMenuLocation, null)), /* @__PURE__ */ React23.createElement(Grid, { container: true, justifyContent: "center" }, /* @__PURE__ */ React23.createElement(ToolbarMenu, { spacing: 1.5 }, /* @__PURE__ */ React23.createElement(Divider2, { orientation: "vertical" }), /* @__PURE__ */ React23.createElement(PageIndicationLocation, null), /* @__PURE__ */ React23.createElement(Divider2, { orientation: "vertical" }), /* @__PURE__ */ React23.createElement(ResponsiveLocation, null), /* @__PURE__ */ React23.createElement(Divider2, { orientation: "vertical" }))), /* @__PURE__ */ React23.createElement(
+      Grid,
+      {
+        container: true,
+        justifyContent: "flex-end",
+        flexWrap: "nowrap",
+        sx: { minWidth: 0, overflow: "hidden" }
+      },
+      /* @__PURE__ */ React23.createElement(UtilitiesMenuLocation, null),
+      /* @__PURE__ */ React23.createElement(PrimaryActionLocation, null)
+    ))
+  ))));
 }
 
 // src/extensions/angie/hooks/use-action-props.ts
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect5 } from "react";
 import { isAngieAvailable } from "@elementor/editor-mcp";
 import { trackEvent } from "@elementor/events";
 import { AngieIcon } from "@elementor/icons";
@@ -695,7 +774,7 @@ import { __ as __7 } from "@wordpress/i18n";
 function useActionProps() {
   const hasAngieInstalled = isAngieAvailable();
   const visible = !hasAngieInstalled;
-  useEffect4(() => {
+  useEffect5(() => {
     if (!visible) {
       return;
     }
@@ -845,7 +924,7 @@ function init3() {
 }
 
 // src/extensions/documents-save/components/primary-action.tsx
-import * as React24 from "react";
+import * as React25 from "react";
 import {
   __useActiveDocument as useActiveDocument3,
   __useActiveDocumentActions as useActiveDocumentActions
@@ -865,7 +944,7 @@ import {
 import { __ as __10 } from "@wordpress/i18n";
 
 // src/extensions/documents-save/components/primary-action-menu.tsx
-import * as React23 from "react";
+import * as React24 from "react";
 import { Divider as Divider3, styled as styled2 } from "@elementor/ui";
 var { useMenuItems: useMenuItems5 } = documentOptionsMenu;
 var StyledPopoverMenu = styled2(PopoverMenu)`
@@ -881,7 +960,7 @@ var StyledPopoverMenu = styled2(PopoverMenu)`
 `;
 function PrimaryActionMenu(props) {
   const { save: saveActions, default: defaultActions } = useMenuItems5();
-  return /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(
     StyledPopoverMenu,
     {
       ...props,
@@ -899,13 +978,13 @@ function PrimaryActionMenu(props) {
       }
     },
     saveActions.map(({ MenuItem: MenuItem2, id }, index) => [
-      index > 0 && /* @__PURE__ */ React23.createElement(Divider3, { key: `${id}-divider` }),
-      /* @__PURE__ */ React23.createElement(MenuItem2, { key: id })
+      index > 0 && /* @__PURE__ */ React24.createElement(Divider3, { key: `${id}-divider` }),
+      /* @__PURE__ */ React24.createElement(MenuItem2, { key: id })
     ]),
-    saveActions.length > 0 && defaultActions.length > 0 && /* @__PURE__ */ React23.createElement(Divider3, null),
+    saveActions.length > 0 && defaultActions.length > 0 && /* @__PURE__ */ React24.createElement(Divider3, null),
     defaultActions.map(({ MenuItem: MenuItem2, id }, index) => [
-      index > 0 && /* @__PURE__ */ React23.createElement(Divider3, { key: `${id}-divider` }),
-      /* @__PURE__ */ React23.createElement(MenuItem2, { key: id })
+      index > 0 && /* @__PURE__ */ React24.createElement(Divider3, { key: `${id}-divider` }),
+      /* @__PURE__ */ React24.createElement(MenuItem2, { key: id })
     ])
   );
 }
@@ -926,7 +1005,7 @@ function PrimaryAction() {
   const isPublishDisabled = !isEditMode || !isPublishEnabled(document2);
   const isSaveOptionsDisabled = !isEditMode || 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(
+  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(ButtonGroup, { size: "large", variant: "contained" }, /* @__PURE__ */ React25.createElement(
     Button3,
     {
       onClick: () => {
@@ -957,8 +1036,8 @@ function PrimaryAction() {
       },
       disabled: isPublishDisabled
     },
-    shouldShowSpinner ? /* @__PURE__ */ React24.createElement(CircularProgress, { color: "inherit", size: "1.5em" }) : getLabel(document2)
-  ), /* @__PURE__ */ React24.createElement(
+    shouldShowSpinner ? /* @__PURE__ */ React25.createElement(CircularProgress, { color: "inherit", size: "1.5em" }) : getLabel(document2)
+  ), /* @__PURE__ */ React25.createElement(
     Tooltip3,
     {
       title: __10("Save Options", "elementor"),
@@ -971,7 +1050,7 @@ function PrimaryAction() {
         }
       }
     },
-    /* @__PURE__ */ React24.createElement(Box4, { component: "span", "aria-label": void 0 }, /* @__PURE__ */ React24.createElement(
+    /* @__PURE__ */ React25.createElement(Box4, { component: "span", "aria-label": void 0 }, /* @__PURE__ */ React25.createElement(
       Button3,
       {
         size: "small",
@@ -980,9 +1059,9 @@ function PrimaryAction() {
         disabled: isSaveOptionsDisabled,
         "aria-label": __10("Save Options", "elementor")
       },
-      /* @__PURE__ */ React24.createElement(ChevronDownIcon, null)
+      /* @__PURE__ */ React25.createElement(ChevronDownIcon, null)
     ))
-  )), /* @__PURE__ */ React24.createElement(PrimaryActionMenu, { ...bindMenu4(popupState), onClick: popupState.close }));
+  )), /* @__PURE__ */ React25.createElement(PrimaryActionMenu, { ...bindMenu4(popupState), onClick: popupState.close }));
 }
 function getLabel(document2) {
   return document2.userCan.publish ? __10("Publish", "elementor") : __10("Submit", "elementor");
@@ -1451,7 +1530,7 @@ function init11() {
 }
 
 // src/extensions/responsive/components/breakpoints-switcher.tsx
-import * as React25 from "react";
+import * as React26 from "react";
 import {
   useActivateBreakpoint,
   useActiveBreakpoint,
@@ -1489,7 +1568,7 @@ function BreakpointsSwitcher() {
     }
     activateBreakpoint(value);
   };
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React26.createElement(
     Tabs,
     {
       textColor: "inherit",
@@ -1506,13 +1585,13 @@ function BreakpointsSwitcher() {
     breakpoints.map(({ id, label, type, width }) => {
       const Icon = iconsMap[id];
       const title = labelsMap[type || "default"].replace("%s", label).replace("%d", width?.toString() || "");
-      return /* @__PURE__ */ React25.createElement(
+      return /* @__PURE__ */ React26.createElement(
         Tab,
         {
           value: id,
           key: id,
           "aria-label": title,
-          icon: /* @__PURE__ */ React25.createElement(Tooltip4, { title }, /* @__PURE__ */ React25.createElement(Icon, null)),
+          icon: /* @__PURE__ */ React26.createElement(Tooltip4, { title }, /* @__PURE__ */ React26.createElement(Icon, null)),
           sx: { minWidth: "auto" },
           "data-testid": `switch-device-to-${id}`
         }
@@ -1521,7 +1600,7 @@ function BreakpointsSwitcher() {
   );
 }
 function Tooltip4(props) {
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React26.createElement(
     BaseTooltip2,
     {
       PopperProps: {
@@ -1568,10 +1647,10 @@ function init12() {
 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 {
   __privateIsRouteActive as isRouteActive2,
   __privateUseListenTo as useListenTo,
@@ -1587,14 +1666,14 @@ 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
@@ -1604,7 +1683,7 @@ import { __ as __24 } from "@wordpress/i18n";
 function PrimaryAction2() {
   const document2 = useActiveDocument8();
   const { save } = useActiveDocumentActions5();
-  return /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React28.createElement(
     Paper,
     {
       sx: {
@@ -1614,7 +1693,7 @@ function PrimaryAction2() {
         borderColor: "divider"
       }
     },
-    /* @__PURE__ */ React27.createElement(
+    /* @__PURE__ */ React28.createElement(
       Button4,
       {
         variant: "contained",
@@ -1623,14 +1702,14 @@ function PrimaryAction2() {
         sx: { width: "100%" },
         onClick: () => document2 && !document2.isSaving ? save() : null
       },
-      document2?.isSaving ? /* @__PURE__ */ React27.createElement(CircularProgress2, null) : __24("Save Changes", "elementor")
+      document2?.isSaving ? /* @__PURE__ */ React28.createElement(CircularProgress2, null) : __24("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