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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-app-bar",
   "description": "App Bar extension for @elementor/editor",
-  "version": "4.3.0-986",
+  "version": "4.3.0-988",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,18 +40,18 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.3.0-986",
-    "@elementor/editor-ui": "4.3.0-986",
-    "@elementor/http-client": "4.3.0-986",
-    "@elementor/editor": "4.3.0-986",
-    "@elementor/editor-documents": "4.3.0-986",
-    "@elementor/editor-mcp": "4.3.0-986",
-    "@elementor/editor-responsive": "4.3.0-986",
-    "@elementor/editor-v1-adapters": "4.3.0-986",
+    "@elementor/editor-current-user": "4.3.0-988",
+    "@elementor/editor-ui": "4.3.0-988",
+    "@elementor/http-client": "4.3.0-988",
+    "@elementor/editor": "4.3.0-988",
+    "@elementor/editor-documents": "4.3.0-988",
+    "@elementor/editor-mcp": "4.3.0-988",
+    "@elementor/editor-responsive": "4.3.0-988",
+    "@elementor/editor-v1-adapters": "4.3.0-988",
     "@elementor/icons": "~1.75.1",
-    "@elementor/locations": "4.3.0-986",
-    "@elementor/menus": "4.3.0-986",
-    "@elementor/events": "4.3.0-986",
+    "@elementor/locations": "4.3.0-988",
+    "@elementor/menus": "4.3.0-988",
+    "@elementor/events": "4.3.0-988",
     "@elementor/ui": "1.37.5",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/components/app-bar.tsx

@@ -1,7 +1,12 @@
 import * as React from 'react';
+import { useRef } from 'react';
 import { __useActiveDocument as useActiveDocument } from '@elementor/editor-documents';
 import { AppBar as BaseAppBar, Box, Divider, Grid, ThemeProvider, Toolbar } from '@elementor/ui';
 
+import { MIN_APP_BAR_WIDTH } from '../constants';
+import { AppBarSizeProvider } from '../contexts/app-bar-size-context';
+import { useContainerWidth } from '../hooks/use-container-width';
+import { getMaxToolbarActions } from '../utils/get-max-toolbar-actions';
 import MainMenuLocation from './locations/main-menu-location';
 import PageIndicationLocation from './locations/page-indication-location';
 import PrimaryActionLocation from './locations/primary-action-location';
@@ -12,28 +17,45 @@ import ToolbarMenu from './ui/toolbar-menu';
 
 export default function AppBar() {
 	const document = useActiveDocument();
+	const containerRef = useRef< HTMLDivElement >( null );
+	const containerWidth = useContainerWidth( containerRef );
+	const maxToolbarActions = getMaxToolbarActions( containerWidth );
+
 	return (
 		<ThemeProvider colorScheme="dark">
 			<BaseAppBar position="sticky">
-				<Toolbar disableGutters variant="dense">
-					<Box display="grid" gridTemplateColumns="repeat(3, 1fr)" flexGrow={ 1 }>
-						<Grid container flexWrap="nowrap">
-							<MainMenuLocation />
-							{ document?.permissions?.allowAddingWidgets && <ToolsMenuLocation /> }
-						</Grid>
-						<Grid container justifyContent="center">
-							<ToolbarMenu spacing={ 1.5 }>
-								<Divider orientation="vertical" />
-								<PageIndicationLocation />
-								<Divider orientation="vertical" />
-								<ResponsiveLocation />
-								<Divider orientation="vertical" />
-							</ToolbarMenu>
-						</Grid>
-						<Grid container justifyContent="flex-end" flexWrap="nowrap">
-							<UtilitiesMenuLocation />
-							<PrimaryActionLocation />
-						</Grid>
+				<Toolbar disableGutters variant="dense" sx={ { overflowX: 'auto' } }>
+					<Box
+						ref={ containerRef }
+						display="grid"
+						gridTemplateColumns="minmax(0, 1fr) auto minmax(0, 1fr)"
+						flexGrow={ 1 }
+						minWidth={ `${ MIN_APP_BAR_WIDTH }px` }
+					>
+						<AppBarSizeProvider value={ maxToolbarActions }>
+							<Grid container flexWrap="nowrap" sx={ { minWidth: 0, overflow: 'hidden' } }>
+								<MainMenuLocation />
+								{ document?.permissions?.allowAddingWidgets && <ToolsMenuLocation /> }
+							</Grid>
+							<Grid container justifyContent="center">
+								<ToolbarMenu spacing={ 1.5 }>
+									<Divider orientation="vertical" />
+									<PageIndicationLocation />
+									<Divider orientation="vertical" />
+									<ResponsiveLocation />
+									<Divider orientation="vertical" />
+								</ToolbarMenu>
+							</Grid>
+							<Grid
+								container
+								justifyContent="flex-end"
+								flexWrap="nowrap"
+								sx={ { minWidth: 0, overflow: 'hidden' } }
+							>
+								<UtilitiesMenuLocation />
+								<PrimaryActionLocation />
+							</Grid>
+						</AppBarSizeProvider>
 					</Box>
 				</Toolbar>
 			</BaseAppBar>

package/src/components/locations/tools-menu-location.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 
+import { useMaxToolbarActions } from '../../contexts/app-bar-size-context';
 import { AngieGuideLocation } from '../../extensions/angie/components/angie-guide-location';
 import { toolsMenu } from '../../locations';
 import ToolbarMenu from '../ui/toolbar-menu';
@@ -7,15 +8,14 @@ import ToolbarMenuMore from '../ui/toolbar-menu-more';
 import IntegrationsMenuLocation from './integrations-menu-location';
 import SendFeedbackPopupLocation from './send-feedback-popup-location';
 
-const MAX_TOOLBAR_ACTIONS = 5;
-
 const { useMenuItems } = toolsMenu;
 
 export default function ToolsMenuLocation() {
 	const menuItems = useMenuItems();
+	const { tools: maxToolbarActions } = useMaxToolbarActions();
 
-	const toolbarMenuItems = menuItems.default.slice( 0, MAX_TOOLBAR_ACTIONS );
-	const popoverMenuItems = menuItems.default.slice( MAX_TOOLBAR_ACTIONS );
+	const toolbarMenuItems = menuItems.default.slice( 0, maxToolbarActions );
+	const popoverMenuItems = menuItems.default.slice( maxToolbarActions );
 
 	return (
 		<ToolbarMenu>

package/src/components/locations/utilities-menu-location.tsx

@@ -1,23 +1,23 @@
 import * as React from 'react';
 import { Fragment } from 'react';
 
+import { useMaxToolbarActions } from '../../contexts/app-bar-size-context';
 import { utilitiesMenu } from '../../locations';
 import ToolbarMenu from '../ui/toolbar-menu';
 import ToolbarMenuMore from '../ui/toolbar-menu-more';
 
-const MAX_TOOLBAR_ACTIONS = 4;
-
 const { useMenuItems } = utilitiesMenu;
 
 export default function UtilitiesMenuLocation() {
 	const menuItems = useMenuItems();
+	const { utilities: maxToolbarActions } = useMaxToolbarActions();
 
-	// If there are more than 5 items, show the first 4 inline and the rest in the popover.
+	// If there are more items than the allowed max, show the max inline and the rest in the popover.
 	// Otherwise, display all items inline.
-	const shouldUsePopover = menuItems.default.length > MAX_TOOLBAR_ACTIONS + 1;
+	const shouldUsePopover = menuItems.default.length > maxToolbarActions + 1;
 
-	const toolbarMenuItems = shouldUsePopover ? menuItems.default.slice( 0, MAX_TOOLBAR_ACTIONS ) : menuItems.default;
-	const popoverMenuItems = shouldUsePopover ? menuItems.default.slice( MAX_TOOLBAR_ACTIONS ) : [];
+	const toolbarMenuItems = shouldUsePopover ? menuItems.default.slice( 0, maxToolbarActions ) : menuItems.default;
+	const popoverMenuItems = shouldUsePopover ? menuItems.default.slice( maxToolbarActions ) : [];
 
 	return (
 		<ToolbarMenu>

package/src/constants.ts

@@ -0,0 +1,14 @@
+// Below this width the app bar stops shrinking and scrolls horizontally instead, since the
+// center section (document title, breakpoints switcher) can't shrink further without becoming
+// unusable.
+export const MIN_APP_BAR_WIDTH = 800;
+
+export type MaxToolbarActions = {
+	tools: number;
+	utilities: number;
+};
+
+export const DEFAULT_MAX_TOOLBAR_ACTIONS: MaxToolbarActions = {
+	tools: 5,
+	utilities: 4,
+};

package/src/contexts/app-bar-size-context.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { createContext, type PropsWithChildren, useContext } from 'react';
+
+import { DEFAULT_MAX_TOOLBAR_ACTIONS, type MaxToolbarActions } from '../constants';
+
+const AppBarSizeContext = createContext< MaxToolbarActions >( DEFAULT_MAX_TOOLBAR_ACTIONS );
+
+export function AppBarSizeProvider( { value, children }: PropsWithChildren< { value: MaxToolbarActions } > ) {
+	return <AppBarSizeContext.Provider value={ value }>{ children }</AppBarSizeContext.Provider>;
+}
+
+export function useMaxToolbarActions() {
+	return useContext( AppBarSizeContext );
+}

package/src/hooks/use-container-width.ts

@@ -0,0 +1,29 @@
+import { type RefObject, useEffect, useState } from 'react';
+
+export function useContainerWidth( ref: RefObject< HTMLElement | null > ) {
+	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;
+}

package/src/utils/get-max-toolbar-actions.ts

@@ -0,0 +1,25 @@
+import { DEFAULT_MAX_TOOLBAR_ACTIONS, type MaxToolbarActions, MIN_APP_BAR_WIDTH } from '../constants';
+
+// Breakpoints are checked from the widest to the narrowest, so items in the left ("tools") and
+// right ("utilities") sections of the app bar collapse into their "More" popover as the app bar
+// narrows, freeing up space for the center section (document title, breakpoints switcher).
+//
+// The utilities section also holds the primary action (e.g. "Publish"), which has a fixed
+// minimum width and can't shrink, so it gets fewer inline items than tools at the same width.
+const BREAKPOINTS: Array< { minWidth: number } & MaxToolbarActions > = [
+	{ 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 },
+];
+
+export function getMaxToolbarActions( containerWidth: number ): MaxToolbarActions {
+	// Avoid collapsing the toolbar before its width has been measured.
+	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 };
+}