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

package/dist/index.js

@@ -233,19 +233,75 @@ var documentOptionsMenu = (0, import_menus2.createMenu)({
 var import_editor2 = require("@elementor/editor");
 
 // src/components/app-bar.tsx
-var React22 = __toESM(require("react"));
+var React23 = __toESM(require("react"));
+var import_react9 = require("react");
 var import_editor_documents = require("@elementor/editor-documents");
 var import_ui13 = require("@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
+var React8 = __toESM(require("react"));
+var import_react2 = require("react");
+var AppBarSizeContext = (0, import_react2.createContext)(DEFAULT_MAX_TOOLBAR_ACTIONS);
+function AppBarSizeProvider({ value, children }) {
+  return /* @__PURE__ */ React8.createElement(AppBarSizeContext.Provider, { value }, children);
+}
+function useMaxToolbarActions() {
+  return (0, import_react2.useContext)(AppBarSizeContext);
+}
+
+// src/hooks/use-container-width.ts
+var import_react3 = require("react");
+function useContainerWidth(ref) {
+  const [width, setWidth] = (0, import_react3.useState)(0);
+  (0, import_react3.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
-var React10 = __toESM(require("react"));
+var React11 = __toESM(require("react"));
 var import_ui6 = require("@elementor/ui");
 
 // src/components/ui/popover-menu.tsx
-var React8 = __toESM(require("react"));
+var React9 = __toESM(require("react"));
 var import_ui4 = require("@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(
     import_ui4.Menu,
     {
       PaperProps: {
@@ -262,12 +318,12 @@ function PopoverMenu({ children, popupState, ...props }) {
 }
 
 // src/components/ui/toolbar-logo.tsx
-var React9 = __toESM(require("react"));
-var import_react2 = require("react");
+var React10 = __toESM(require("react"));
+var import_react4 = require("react");
 var import_ui5 = require("@elementor/ui");
 var import_i18n = require("@wordpress/i18n");
 var ElementorLogo = (props) => {
-  return /* @__PURE__ */ React9.createElement(import_ui5.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(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 }) => ({
   padding: 0,
@@ -307,9 +363,9 @@ var StyledElementorLogo = (0, import_ui5.styled)(ElementorLogo, {
   }
 }));
 function ToolbarLogo(props) {
-  const [isHoverState, setIsHoverState] = (0, import_react2.useState)(false);
+  const [isHoverState, setIsHoverState] = (0, import_react4.useState)(false);
   const showMenuIcon = props.selected || isHoverState;
-  return /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React10.createElement(
     StyledToggleButton,
     {
       ...props,
@@ -318,7 +374,7 @@ function ToolbarLogo(props) {
       onMouseEnter: () => setIsHoverState(true),
       onMouseLeave: () => setIsHoverState(false)
     },
-    /* @__PURE__ */ React9.createElement(
+    /* @__PURE__ */ React10.createElement(
       StyledElementorLogo,
       {
         fontSize: "large",
@@ -351,33 +407,33 @@ function MainMenuLocation() {
     }
     toolbarLogoProps.onClick(e);
   };
-  return /* @__PURE__ */ React10.createElement(import_ui6.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, ...(0, import_ui6.bindMenu)(popupState), marginThreshold: 8 }, menuItems.default.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React10.createElement(MenuItem2, { key: id })), /* @__PURE__ */ React10.createElement(import_ui6.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(import_ui6.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, ...(0, import_ui6.bindMenu)(popupState), marginThreshold: 8 }, menuItems.default.map(({ MenuItem: MenuItem2, id }) => /* @__PURE__ */ React11.createElement(MenuItem2, { key: id })), /* @__PURE__ */ React11.createElement(import_ui6.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
-var React11 = __toESM(require("react"));
+var React12 = __toESM(require("react"));
 function PageIndicationLocation() {
-  return /* @__PURE__ */ React11.createElement(PageIndicationSlot, null);
+  return /* @__PURE__ */ React12.createElement(PageIndicationSlot, null);
 }
 
 // src/components/locations/primary-action-location.tsx
-var React12 = __toESM(require("react"));
+var React13 = __toESM(require("react"));
 function PrimaryActionLocation() {
-  return /* @__PURE__ */ React12.createElement(PrimaryActionSlot, null);
+  return /* @__PURE__ */ React13.createElement(PrimaryActionSlot, null);
 }
 
 // src/components/locations/responsive-location.tsx
-var React13 = __toESM(require("react"));
+var React14 = __toESM(require("react"));
 function ResponsiveLocation() {
-  return /* @__PURE__ */ React13.createElement(ResponsiveSlot, null);
+  return /* @__PURE__ */ React14.createElement(ResponsiveSlot, null);
 }
 
 // src/components/locations/tools-menu-location.tsx
-var React20 = __toESM(require("react"));
+var React21 = __toESM(require("react"));
 
 // src/extensions/angie/components/angie-guide-location.tsx
-var React15 = __toESM(require("react"));
-var import_react4 = require("react");
+var React16 = __toESM(require("react"));
+var import_react6 = require("react");
 var import_editor_current_user = require("@elementor/editor-current-user");
 var import_editor_ui = require("@elementor/editor-ui");
 var import_events = require("@elementor/events");
@@ -398,11 +454,11 @@ var ANGIE_TOP_BAR_PROMOTION_IMAGE_URL = "https://assets.elementor.com/packages/v
 var ANGIE_TOP_BAR_DESCRIPTION = (0, import_i18n2.__)("Build custom widgets using simple instructions.", "elementor");
 
 // src/extensions/angie/components/angie-guide-card.tsx
-var React14 = __toESM(require("react"));
+var React15 = __toESM(require("react"));
 var import_ui7 = require("@elementor/ui");
 var import_i18n3 = require("@wordpress/i18n");
 function AngieGuideCard({ imageUrl, description, learnMoreUrl, onInstall, onClose }) {
-  return /* @__PURE__ */ React14.createElement(import_ui7.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React14.createElement(import_ui7.Stack, { sx: { width: 296 }, "data-testid": "e-angie-guide-card" }, /* @__PURE__ */ React14.createElement(import_ui7.Stack, { direction: "row", alignItems: "center", gap: 1, py: 1, px: 2 }, /* @__PURE__ */ React14.createElement(import_ui7.Typography, { variant: "subtitle2" }, (0, import_i18n3.__)("Meet Angie", "elementor")), /* @__PURE__ */ React14.createElement(import_ui7.Chip, { label: (0, import_i18n3.__)("New", "elementor"), size: "small", color: "info", variant: "standard" }), /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React15.createElement(import_ui7.ClickAwayListener, { onClickAway: onClose }, /* @__PURE__ */ React15.createElement(import_ui7.Stack, { sx: { width: 296 }, "data-testid": "e-angie-guide-card" }, /* @__PURE__ */ React15.createElement(import_ui7.Stack, { direction: "row", alignItems: "center", gap: 1, py: 1, px: 2 }, /* @__PURE__ */ React15.createElement(import_ui7.Typography, { variant: "subtitle2" }, (0, import_i18n3.__)("Meet Angie", "elementor")), /* @__PURE__ */ React15.createElement(import_ui7.Chip, { label: (0, import_i18n3.__)("New", "elementor"), size: "small", color: "info", variant: "standard" }), /* @__PURE__ */ React15.createElement(
     import_ui7.CloseButton,
     {
       edge: "end",
@@ -410,7 +466,7 @@ function AngieGuideCard({ imageUrl, description, learnMoreUrl, onInstall, onClos
       slotProps: { icon: { fontSize: "small" } },
       onClick: onClose
     }
-  )), /* @__PURE__ */ React14.createElement(import_ui7.Image, { src: imageUrl, alt: (0, import_i18n3.__)("Angie", "elementor"), sx: { height: 150, width: "100%" } }), /* @__PURE__ */ React14.createElement(import_ui7.Stack, { px: 2, pt: 1.5, pb: 1 }, /* @__PURE__ */ React14.createElement(import_ui7.Typography, { variant: "body2", color: "secondary" }, description)), /* @__PURE__ */ React14.createElement(import_ui7.Stack, { direction: "row", justifyContent: "flex-end", gap: 1, pt: 1, pb: 1.5, px: 2 }, /* @__PURE__ */ React14.createElement(
+  )), /* @__PURE__ */ React15.createElement(import_ui7.Image, { src: imageUrl, alt: (0, import_i18n3.__)("Angie", "elementor"), sx: { height: 150, width: "100%" } }), /* @__PURE__ */ React15.createElement(import_ui7.Stack, { px: 2, pt: 1.5, pb: 1 }, /* @__PURE__ */ React15.createElement(import_ui7.Typography, { variant: "body2", color: "secondary" }, description)), /* @__PURE__ */ React15.createElement(import_ui7.Stack, { direction: "row", justifyContent: "flex-end", gap: 1, pt: 1, pb: 1.5, px: 2 }, /* @__PURE__ */ React15.createElement(
     import_ui7.Button,
     {
       variant: "text",
@@ -422,13 +478,13 @@ function AngieGuideCard({ imageUrl, description, learnMoreUrl, onInstall, onClos
       }
     },
     (0, import_i18n3.__)("Learn More", "elementor")
-  ), onInstall && /* @__PURE__ */ React14.createElement(import_ui7.Button, { variant: "contained", size: "small", color: "accent", onClick: onInstall }, (0, import_i18n3.__)("Try for free", "elementor")))));
+  ), onInstall && /* @__PURE__ */ React15.createElement(import_ui7.Button, { variant: "contained", size: "small", color: "accent", onClick: onInstall }, (0, import_i18n3.__)("Try for free", "elementor")))));
 }
 
 // src/extensions/angie/hooks/use-auto-show.ts
-var import_react3 = require("react");
+var import_react5 = require("react");
 function useAutoShow() {
-  (0, import_react3.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!window.elementor?.config?.angie?.autoShow) {
       return;
     }
@@ -442,11 +498,11 @@ function useAutoShow() {
 // src/extensions/angie/components/angie-guide-location.tsx
 function AngieGuideLocation() {
   useAutoShow();
-  const [anchorEl, setAnchorEl] = (0, import_react4.useState)(null);
+  const [anchorEl, setAnchorEl] = (0, import_react6.useState)(null);
   const { dispatchEvent: dispatchEvent2 } = (0, import_events.useMixpanel)();
   const { isAdmin } = (0, import_editor_current_user.useCurrentUserCapabilities)();
   const isOpen = Boolean(anchorEl);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react6.useEffect)(() => {
     const handleToggle = () => {
       setAnchorEl((prev) => {
         if (prev) {
@@ -474,10 +530,10 @@ function AngieGuideLocation() {
     );
     handleClose();
   };
-  return /* @__PURE__ */ React15.createElement(import_editor_ui.ThemeProvider, null, /* @__PURE__ */ React15.createElement(
+  return /* @__PURE__ */ React16.createElement(import_editor_ui.ThemeProvider, null, /* @__PURE__ */ React16.createElement(
     import_ui8.Infotip,
     {
-      content: /* @__PURE__ */ React15.createElement(
+      content: /* @__PURE__ */ React16.createElement(
         AngieGuideCard,
         {
           imageUrl: ANGIE_TOP_BAR_PROMOTION_IMAGE_URL,
@@ -500,19 +556,19 @@ function AngieGuideLocation() {
         ]
       }
     },
-    /* @__PURE__ */ React15.createElement("span", null)
+    /* @__PURE__ */ React16.createElement("span", null)
   ));
 }
 
 // src/components/ui/toolbar-menu.tsx
-var React16 = __toESM(require("react"));
+var React17 = __toESM(require("react"));
 var import_ui9 = require("@elementor/ui");
 function ToolbarMenu({ children, ...props }) {
-  return /* @__PURE__ */ React16.createElement(MenuContextProvider, { type: "toolbar" }, /* @__PURE__ */ React16.createElement(import_ui9.Stack, { sx: { px: 1.5 }, spacing: 1.5, direction: "row", alignItems: "center", ...props }, children));
+  return /* @__PURE__ */ React17.createElement(MenuContextProvider, { type: "toolbar" }, /* @__PURE__ */ React17.createElement(import_ui9.Stack, { sx: { px: 1.5 }, spacing: 1.5, direction: "row", alignItems: "center", ...props }, children));
 }
 
 // src/components/ui/toolbar-menu-more.tsx
-var React17 = __toESM(require("react"));
+var React18 = __toESM(require("react"));
 var import_icons2 = require("@elementor/icons");
 var import_ui10 = require("@elementor/ui");
 var import_i18n4 = require("@wordpress/i18n");
@@ -521,11 +577,11 @@ function ToolbarMenuMore({ children, id }) {
     variant: "popover",
     popupId: id
   });
-  return /* @__PURE__ */ React17.createElement(React17.Fragment, null, /* @__PURE__ */ React17.createElement(ToolbarMenuItem, { ...(0, import_ui10.bindTrigger)(popupState), title: (0, import_i18n4.__)("More", "elementor") }, /* @__PURE__ */ React17.createElement(import_icons2.DotsVerticalIcon, null)), /* @__PURE__ */ React17.createElement(PopoverMenu, { onClick: popupState.close, ...(0, import_ui10.bindMenu)(popupState) }, children));
+  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(ToolbarMenuItem, { ...(0, import_ui10.bindTrigger)(popupState), title: (0, import_i18n4.__)("More", "elementor") }, /* @__PURE__ */ React18.createElement(import_icons2.DotsVerticalIcon, null)), /* @__PURE__ */ React18.createElement(PopoverMenu, { onClick: popupState.close, ...(0, import_ui10.bindMenu)(popupState) }, children));
 }
 
 // src/components/locations/integrations-menu-location.tsx
-var React18 = __toESM(require("react"));
+var React19 = __toESM(require("react"));
 var import_icons3 = require("@elementor/icons");
 var import_ui11 = require("@elementor/ui");
 var import_i18n5 = require("@wordpress/i18n");
@@ -539,7 +595,7 @@ function IntegrationsMenuLocation() {
   if (menuItems.default.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(ToolbarMenuItem, { ...(0, import_ui11.bindTrigger)(popupState), title: (0, import_i18n5.__)("Integrations", "elementor") }, /* @__PURE__ */ React18.createElement(import_icons3.PlugIcon, null)), /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(ToolbarMenuItem, { ...(0, import_ui11.bindTrigger)(popupState), title: (0, import_i18n5.__)("Integrations", "elementor") }, /* @__PURE__ */ React19.createElement(import_icons3.PlugIcon, null)), /* @__PURE__ */ React19.createElement(
     PopoverMenu,
     {
       onClick: popupState.close,
@@ -547,13 +603,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
-var React19 = __toESM(require("react"));
-var import_react5 = require("react");
+var React20 = __toESM(require("react"));
+var import_react7 = require("react");
 var import_editor_ui2 = require("@elementor/editor-ui");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 var import_events2 = require("@elementor/events");
@@ -574,18 +630,18 @@ var checkIfUserIsConnected = () => {
 function SendFeedbackPopupLocation() {
   const isActive = (0, import_editor_v1_adapters.isExperimentActive)(EXPERIMENT_NAME);
   const extendedWindow = window;
-  const [isUserConnected, setIsUserConnected] = (0, import_react5.useState)(checkIfUserIsConnected());
+  const [isUserConnected, setIsUserConnected] = (0, import_react7.useState)(checkIfUserIsConnected());
   const connectUrl = extendedWindow?.elementor?.config.user.top_bar.connect_url;
-  const [feedbackContent, setFeedbackContent] = (0, import_react5.useState)("");
-  const [feedbackResult, setFeedbackResult] = (0, import_react5.useState)(null);
-  const [submitDisabled, setSubmitDisabled] = (0, import_react5.useState)(true);
+  const [feedbackContent, setFeedbackContent] = (0, import_react7.useState)("");
+  const [feedbackResult, setFeedbackResult] = (0, import_react7.useState)(null);
+  const [submitDisabled, setSubmitDisabled] = (0, import_react7.useState)(true);
   const { dispatchEvent: trackEvent2 = (...args) => void args } = (0, import_events2.useMixpanel)();
   const popupState = (0, import_ui12.usePopupState)({
     variant: "dialog",
     popupId: FEEDBACK_TOGGLE_EVENT
   });
-  const [isFetching, setIsFetching] = (0, import_react5.useState)(false);
-  (0, import_react5.useEffect)(() => {
+  const [isFetching, setIsFetching] = (0, import_react7.useState)(false);
+  (0, import_react7.useEffect)(() => {
     const handler = () => {
       popupState.toggle();
       setIsUserConnected(checkIfUserIsConnected());
@@ -600,7 +656,7 @@ function SendFeedbackPopupLocation() {
       window.removeEventListener(FEEDBACK_TOGGLE_EVENT, handler);
     };
   }, [popupState, trackEvent2]);
-  (0, import_react5.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     setSubmitDisabled(feedbackContent.trim().length < 10 || !isUserConnected || isFetching);
   }, [feedbackContent, feedbackResult, isUserConnected, isFetching]);
   const handleClose = () => {
@@ -635,7 +691,7 @@ function SendFeedbackPopupLocation() {
   if (!isActive) {
     return null;
   }
-  return /* @__PURE__ */ React19.createElement(import_editor_ui2.ThemeProvider, null, /* @__PURE__ */ React19.createElement(import_ui12.Popover, { ...(0, import_ui12.bindDialog)(popupState), onClose: () => handleClose() }, /* @__PURE__ */ React19.createElement(import_ui12.Dialog, { open: popupState.isOpen }, /* @__PURE__ */ React19.createElement(import_ui12.DialogHeader, { style: { width: "100%", minWidth: "35rem" } }, /* @__PURE__ */ React19.createElement(import_ui12.DialogTitle, { style: { width: "100%" } }, /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(import_editor_ui2.ThemeProvider, null, /* @__PURE__ */ React20.createElement(import_ui12.Popover, { ...(0, import_ui12.bindDialog)(popupState), onClose: () => handleClose() }, /* @__PURE__ */ React20.createElement(import_ui12.Dialog, { open: popupState.isOpen }, /* @__PURE__ */ React20.createElement(import_ui12.DialogHeader, { style: { width: "100%", minWidth: "35rem" } }, /* @__PURE__ */ React20.createElement(import_ui12.DialogTitle, { style: { width: "100%" } }, /* @__PURE__ */ React20.createElement(
     import_ui12.Stack,
     {
       display: "flex",
@@ -645,8 +701,8 @@ function SendFeedbackPopupLocation() {
       width: "100%"
     },
     (0, import_i18n6.__)("Submit Feedback", "elementor"),
-    /* @__PURE__ */ React19.createElement(import_ui12.CloseButton, { onClick: popupState.close })
-  ))), /* @__PURE__ */ React19.createElement(import_ui12.DialogContent, null, /* @__PURE__ */ React19.createElement(import_ui12.Stack, { direction: "column", gap: 2 }, isUserConnected ? /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
+    /* @__PURE__ */ React20.createElement(import_ui12.CloseButton, { onClick: popupState.close })
+  ))), /* @__PURE__ */ React20.createElement(import_ui12.DialogContent, null, /* @__PURE__ */ React20.createElement(import_ui12.Stack, { direction: "column", gap: 2 }, isUserConnected ? /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(
     import_ui12.TextField,
     {
       autofocus: true,
@@ -664,7 +720,7 @@ function SendFeedbackPopupLocation() {
       onChange: (event) => setFeedbackContent(event.target.value),
       value: feedbackContent
     }
-  ), /* @__PURE__ */ React19.createElement(import_ui12.Stack, { direction: "row", justifyContent: "flex-end", alignItems: "center", gap: 2 }, feedbackResult && /* @__PURE__ */ React19.createElement(React19.Fragment, null, feedbackResult.success ? /* @__PURE__ */ React19.createElement(import_icons4.CheckIcon, { color: "success" }) : /* @__PURE__ */ React19.createElement(import_icons4.AlertCircleIcon, { color: "error" }), feedbackResult.message), feedbackResult?.success ? /* @__PURE__ */ React19.createElement(import_ui12.Button, { variant: "text", onClick: () => handleStartAnother() }, (0, import_i18n6.__)("Submit Another Feedback", "elementor")) : /* @__PURE__ */ React19.createElement(
+  ), /* @__PURE__ */ React20.createElement(import_ui12.Stack, { direction: "row", justifyContent: "flex-end", alignItems: "center", gap: 2 }, feedbackResult && /* @__PURE__ */ React20.createElement(React20.Fragment, null, feedbackResult.success ? /* @__PURE__ */ React20.createElement(import_icons4.CheckIcon, { color: "success" }) : /* @__PURE__ */ React20.createElement(import_icons4.AlertCircleIcon, { color: "error" }), feedbackResult.message), feedbackResult?.success ? /* @__PURE__ */ React20.createElement(import_ui12.Button, { variant: "text", onClick: () => handleStartAnother() }, (0, import_i18n6.__)("Submit Another Feedback", "elementor")) : /* @__PURE__ */ React20.createElement(
     import_ui12.Button,
     {
       disabled: submitDisabled,
@@ -674,7 +730,7 @@ function SendFeedbackPopupLocation() {
       size: "small"
     },
     (0, import_i18n6.__)("Submit", "elementor")
-  ))) : /* @__PURE__ */ React19.createElement(React19.Fragment, null, /* @__PURE__ */ React19.createElement(
+  ))) : /* @__PURE__ */ React20.createElement(React20.Fragment, null, /* @__PURE__ */ React20.createElement(
     import_ui12.Button,
     {
       variant: "contained",
@@ -690,36 +746,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
-var React21 = __toESM(require("react"));
-var import_react6 = require("react");
-var MAX_TOOLBAR_ACTIONS2 = 4;
+var React22 = __toESM(require("react"));
+var import_react8 = require("react");
 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(import_react6.Fragment, { 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(import_react8.Fragment, { 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 = (0, import_editor_documents.__useActiveDocument)();
-  return /* @__PURE__ */ React22.createElement(import_ui13.ThemeProvider, { colorScheme: "dark" }, /* @__PURE__ */ React22.createElement(import_ui13.AppBar, { position: "sticky" }, /* @__PURE__ */ React22.createElement(import_ui13.Toolbar, { disableGutters: true, variant: "dense" }, /* @__PURE__ */ React22.createElement(import_ui13.Box, { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", flexGrow: 1 }, /* @__PURE__ */ React22.createElement(import_ui13.Grid, { container: true, flexWrap: "nowrap" }, /* @__PURE__ */ React22.createElement(MainMenuLocation, null), document2?.permissions?.allowAddingWidgets && /* @__PURE__ */ React22.createElement(ToolsMenuLocation, null)), /* @__PURE__ */ React22.createElement(import_ui13.Grid, { container: true, justifyContent: "center" }, /* @__PURE__ */ React22.createElement(ToolbarMenu, { spacing: 1.5 }, /* @__PURE__ */ React22.createElement(import_ui13.Divider, { orientation: "vertical" }), /* @__PURE__ */ React22.createElement(PageIndicationLocation, null), /* @__PURE__ */ React22.createElement(import_ui13.Divider, { orientation: "vertical" }), /* @__PURE__ */ React22.createElement(ResponsiveLocation, null), /* @__PURE__ */ React22.createElement(import_ui13.Divider, { orientation: "vertical" }))), /* @__PURE__ */ React22.createElement(import_ui13.Grid, { container: true, justifyContent: "flex-end", flexWrap: "nowrap" }, /* @__PURE__ */ React22.createElement(UtilitiesMenuLocation, null), /* @__PURE__ */ React22.createElement(PrimaryActionLocation, null))))));
+  const containerRef = (0, import_react9.useRef)(null);
+  const containerWidth = useContainerWidth(containerRef);
+  const maxToolbarActions = getMaxToolbarActions(containerWidth);
+  return /* @__PURE__ */ React23.createElement(import_ui13.ThemeProvider, { colorScheme: "dark" }, /* @__PURE__ */ React23.createElement(import_ui13.AppBar, { position: "sticky" }, /* @__PURE__ */ React23.createElement(import_ui13.Toolbar, { disableGutters: true, variant: "dense", sx: { overflowX: "auto" } }, /* @__PURE__ */ React23.createElement(
+    import_ui13.Box,
+    {
+      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(import_ui13.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(import_ui13.Grid, { container: true, justifyContent: "center" }, /* @__PURE__ */ React23.createElement(ToolbarMenu, { spacing: 1.5 }, /* @__PURE__ */ React23.createElement(import_ui13.Divider, { orientation: "vertical" }), /* @__PURE__ */ React23.createElement(PageIndicationLocation, null), /* @__PURE__ */ React23.createElement(import_ui13.Divider, { orientation: "vertical" }), /* @__PURE__ */ React23.createElement(ResponsiveLocation, null), /* @__PURE__ */ React23.createElement(import_ui13.Divider, { orientation: "vertical" }))), /* @__PURE__ */ React23.createElement(
+      import_ui13.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
-var import_react7 = require("react");
+var import_react10 = require("react");
 var import_editor_mcp = require("@elementor/editor-mcp");
 var import_events3 = require("@elementor/events");
 var import_icons5 = require("@elementor/icons");
@@ -727,7 +806,7 @@ var import_i18n7 = require("@wordpress/i18n");
 function useActionProps() {
   const hasAngieInstalled = (0, import_editor_mcp.isAngieAvailable)();
   const visible = !hasAngieInstalled;
-  (0, import_react7.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (!visible) {
       return;
     }
@@ -758,7 +837,7 @@ function init() {
 }
 
 // src/extensions/connect/hooks/use-connect-link-config.tsx
-var import_react8 = require("react");
+var import_react11 = require("react");
 var import_icons6 = require("@elementor/icons");
 var import_i18n8 = require("@wordpress/i18n");
 var dispatchConnectClickEvent = (eventName) => {
@@ -788,7 +867,7 @@ function useConnectLinkConfig() {
     isUserConnected = extendedWindow?.elementorCommon?.config.library_connect.is_connected ?? false;
     target = "_self";
   }
-  const handleConnectClick = (0, import_react8.useCallback)(
+  const handleConnectClick = (0, import_react11.useCallback)(
     (event) => {
       event.preventDefault();
       if (extendedWindow.jQuery && extendedWindow.jQuery.fn?.elementorConnect) {
@@ -877,7 +956,7 @@ function init3() {
 }
 
 // src/extensions/documents-save/components/primary-action.tsx
-var React24 = __toESM(require("react"));
+var React25 = __toESM(require("react"));
 var import_editor_documents3 = require("@elementor/editor-documents");
 var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
 var import_icons8 = require("@elementor/icons");
@@ -885,7 +964,7 @@ var import_ui15 = require("@elementor/ui");
 var import_i18n10 = require("@wordpress/i18n");
 
 // src/extensions/documents-save/components/primary-action-menu.tsx
-var React23 = __toESM(require("react"));
+var React24 = __toESM(require("react"));
 var import_ui14 = require("@elementor/ui");
 var { useMenuItems: useMenuItems5 } = documentOptionsMenu;
 var StyledPopoverMenu = (0, import_ui14.styled)(PopoverMenu)`
@@ -901,7 +980,7 @@ var StyledPopoverMenu = (0, import_ui14.styled)(PopoverMenu)`
 `;
 function PrimaryActionMenu(props) {
   const { save: saveActions, default: defaultActions } = useMenuItems5();
-  return /* @__PURE__ */ React23.createElement(
+  return /* @__PURE__ */ React24.createElement(
     StyledPopoverMenu,
     {
       ...props,
@@ -919,13 +998,13 @@ function PrimaryActionMenu(props) {
       }
     },
     saveActions.map(({ MenuItem: MenuItem2, id }, index) => [
-      index > 0 && /* @__PURE__ */ React23.createElement(import_ui14.Divider, { key: `${id}-divider` }),
-      /* @__PURE__ */ React23.createElement(MenuItem2, { key: id })
+      index > 0 && /* @__PURE__ */ React24.createElement(import_ui14.Divider, { key: `${id}-divider` }),
+      /* @__PURE__ */ React24.createElement(MenuItem2, { key: id })
     ]),
-    saveActions.length > 0 && defaultActions.length > 0 && /* @__PURE__ */ React23.createElement(import_ui14.Divider, null),
+    saveActions.length > 0 && defaultActions.length > 0 && /* @__PURE__ */ React24.createElement(import_ui14.Divider, null),
     defaultActions.map(({ MenuItem: MenuItem2, id }, index) => [
-      index > 0 && /* @__PURE__ */ React23.createElement(import_ui14.Divider, { key: `${id}-divider` }),
-      /* @__PURE__ */ React23.createElement(MenuItem2, { key: id })
+      index > 0 && /* @__PURE__ */ React24.createElement(import_ui14.Divider, { key: `${id}-divider` }),
+      /* @__PURE__ */ React24.createElement(MenuItem2, { key: id })
     ])
   );
 }
@@ -946,7 +1025,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(import_ui15.ButtonGroup, { size: "large", variant: "contained" }, /* @__PURE__ */ React24.createElement(
+  return /* @__PURE__ */ React25.createElement(React25.Fragment, null, /* @__PURE__ */ React25.createElement(import_ui15.ButtonGroup, { size: "large", variant: "contained" }, /* @__PURE__ */ React25.createElement(
     import_ui15.Button,
     {
       onClick: () => {
@@ -977,8 +1056,8 @@ function PrimaryAction() {
       },
       disabled: isPublishDisabled
     },
-    shouldShowSpinner ? /* @__PURE__ */ React24.createElement(import_ui15.CircularProgress, { color: "inherit", size: "1.5em" }) : getLabel(document2)
-  ), /* @__PURE__ */ React24.createElement(
+    shouldShowSpinner ? /* @__PURE__ */ React25.createElement(import_ui15.CircularProgress, { color: "inherit", size: "1.5em" }) : getLabel(document2)
+  ), /* @__PURE__ */ React25.createElement(
     import_ui15.Tooltip,
     {
       title: (0, import_i18n10.__)("Save Options", "elementor"),
@@ -991,7 +1070,7 @@ function PrimaryAction() {
         }
       }
     },
-    /* @__PURE__ */ React24.createElement(import_ui15.Box, { component: "span", "aria-label": void 0 }, /* @__PURE__ */ React24.createElement(
+    /* @__PURE__ */ React25.createElement(import_ui15.Box, { component: "span", "aria-label": void 0 }, /* @__PURE__ */ React25.createElement(
       import_ui15.Button,
       {
         size: "small",
@@ -1000,9 +1079,9 @@ function PrimaryAction() {
         disabled: isSaveOptionsDisabled,
         "aria-label": (0, import_i18n10.__)("Save Options", "elementor")
       },
-      /* @__PURE__ */ React24.createElement(import_icons8.ChevronDownIcon, null)
+      /* @__PURE__ */ React25.createElement(import_icons8.ChevronDownIcon, null)
     ))
-  )), /* @__PURE__ */ React24.createElement(PrimaryActionMenu, { ...(0, import_ui15.bindMenu)(popupState), onClick: popupState.close }));
+  )), /* @__PURE__ */ React25.createElement(PrimaryActionMenu, { ...(0, import_ui15.bindMenu)(popupState), onClick: popupState.close }));
 }
 function getLabel(document2) {
   return document2.userCan.publish ? (0, import_i18n10.__)("Publish", "elementor") : (0, import_i18n10.__)("Submit", "elementor");
@@ -1448,7 +1527,7 @@ function init11() {
 }
 
 // src/extensions/responsive/components/breakpoints-switcher.tsx
-var React25 = __toESM(require("react"));
+var React26 = __toESM(require("react"));
 var import_editor_responsive = require("@elementor/editor-responsive");
 var import_icons20 = require("@elementor/icons");
 var import_ui16 = require("@elementor/ui");
@@ -1474,7 +1553,7 @@ function BreakpointsSwitcher() {
     }
     activateBreakpoint(value);
   };
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React26.createElement(
     import_ui16.Tabs,
     {
       textColor: "inherit",
@@ -1491,13 +1570,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(
         import_ui16.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}`
         }
@@ -1506,7 +1585,7 @@ function BreakpointsSwitcher() {
   );
 }
 function Tooltip4(props) {
-  return /* @__PURE__ */ React25.createElement(
+  return /* @__PURE__ */ React26.createElement(
     import_ui16.Tooltip,
     {
       PopperProps: {
@@ -1553,10 +1632,10 @@ function init12() {
 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 React27 = __toESM(require("react"));
 var import_editor_v1_adapters12 = require("@elementor/editor-v1-adapters");
 var import_ui17 = require("@elementor/ui");
 function Portal(props) {
@@ -1567,21 +1646,21 @@ function Portal(props) {
   if (!containerRef.current) {
     return null;
   }
-  return /* @__PURE__ */ React26.createElement(import_ui17.Portal, { container: containerRef.current, ...props });
+  return /* @__PURE__ */ React27.createElement(import_ui17.Portal, { container: containerRef.current, ...props });
 }
 function getContainerRef() {
   return (0, import_editor_v1_adapters12.__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_i18n24 = require("@wordpress/i18n");
 function PrimaryAction2() {
   const document2 = (0, import_editor_documents9.__useActiveDocument)();
   const { save } = (0, import_editor_documents9.__useActiveDocumentActions)();
-  return /* @__PURE__ */ React27.createElement(
+  return /* @__PURE__ */ React28.createElement(
     import_ui18.Paper,
     {
       sx: {
@@ -1591,7 +1670,7 @@ function PrimaryAction2() {
         borderColor: "divider"
       }
     },
-    /* @__PURE__ */ React27.createElement(
+    /* @__PURE__ */ React28.createElement(
       import_ui18.Button,
       {
         variant: "contained",
@@ -1600,14 +1679,14 @@ function PrimaryAction2() {
         sx: { width: "100%" },
         onClick: () => document2 && !document2.isSaving ? save() : null
       },
-      document2?.isSaving ? /* @__PURE__ */ React27.createElement(import_ui18.CircularProgress, null) : (0, import_i18n24.__)("Save Changes", "elementor")
+      document2?.isSaving ? /* @__PURE__ */ React28.createElement(import_ui18.CircularProgress, null) : (0, import_i18n24.__)("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