@elementor/editor-app-bar 0.14.0 → 0.14.2

package/src/components/app-bar.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { AppBar as BaseAppBar, Box, Divider, Grid, ThemeProvider, Toolbar } from '@elementor/ui';
+import MainMenuLocation from './locations/main-menu-location';
+import ToolsMenuLocation from './locations/tools-menu-location';
+import UtilitiesMenuLocation from './locations/utilities-menu-location';
+import PrimaryActionLocation from './locations/primary-action-location';
+import ToolbarMenu from './ui/toolbar-menu';
+import PageIndicationLocation from './locations/page-indication-location';
+import ResponsiveLocation from './locations/responsive-location';
+import { __useActiveDocument as useActiveDocument } from '@elementor/editor-documents';
+
+export default function AppBar() {
+	const document = useActiveDocument();
+	return (
+		<ThemeProvider colorScheme="dark">
+			<BaseAppBar position="sticky">
+				<Toolbar disableGutters variant="dense">
+					<Box display="grid" gridTemplateColumns="repeat(3, 1fr)" flexGrow={ 1 }>
+						<Grid container>
+							<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">
+							<UtilitiesMenuLocation />
+							<PrimaryActionLocation />
+						</Grid>
+					</Box>
+				</Toolbar>
+			</BaseAppBar>
+		</ThemeProvider>
+	);
+}

package/src/components/locations/__tests__/locations-components.test.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import ResponsiveLocation from '../responsive-location';
+import PrimaryActionLocation from '../primary-action-location';
+import PageIndicationLocation from '../page-indication-location';
+import { injectIntoPageIndication, injectIntoPrimaryAction, injectIntoResponsive } from '../../../locations';
+
+describe( 'Locations components', () => {
+	it.each( [
+		{
+			name: 'page indication',
+			component: PageIndicationLocation,
+			inject: injectIntoPageIndication,
+		},
+		{
+			name: 'responsive',
+			component: ResponsiveLocation,
+			inject: injectIntoResponsive,
+		},
+		{
+			name: 'primary action',
+			component: PrimaryActionLocation,
+			inject: injectIntoPrimaryAction,
+		},
+	] )( 'should inject into $name', ( { inject, component: Component } ) => {
+		// Act.
+		inject( {
+			id: 'test',
+			component: () => <span>test</span>,
+		} );
+
+		// Assert.
+		render( <Component /> );
+
+		expect( screen.getByText( 'test' ) ).toBeInTheDocument();
+	} );
+} );

package/src/components/locations/__tests__/menus.test.tsx

@@ -0,0 +1,158 @@
+import * as React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import MainMenuLocation from '../main-menu-location';
+import ToolsMenuLocation from '../tools-menu-location';
+import UtilitiesMenuLocation from '../utilities-menu-location';
+import { integrationsMenu, mainMenu, toolsMenu, utilitiesMenu } from '../../../locations';
+import {
+	createMockMenuAction,
+	createMockMenuLink,
+	createMockMenuToggleAction,
+	createMockSubMenu,
+} from 'test-utils';
+
+describe( 'Menus components', () => {
+	describe( 'Main menu', () => {
+		it( 'should render ordered menu items in a popover', () => {
+			// Arrange.
+			mainMenu.registerAction( {
+				...createMockMenuAction(),
+				id: 'test-action',
+			} );
+
+			mainMenu.registerToggleAction( {
+				...createMockMenuToggleAction(),
+				id: 'test-toggle-action',
+			} );
+
+			mainMenu.registerLink( {
+				...createMockMenuLink(),
+				group: 'exits',
+				id: 'test-link',
+			} );
+
+			// Act.
+			render( <MainMenuLocation /> );
+
+			fireEvent.click( screen.getByRole( 'button' ) ); // Opens the popover menu
+
+			// Assert.
+			const menuItems = screen.getAllByRole( 'menuitem' );
+
+			expect( menuItems ).toHaveLength( 3 );
+
+			// Ensure the last one is the link, so the order is correct (`default`, then `exits`).
+			expect( menuItems[ 2 ] ).toHaveAttribute( 'href', 'https://elementor.com' );
+		} );
+
+		it( 'should render the integrations menu inside the tools menu if there are registered integrations', () => {
+			integrationsMenu.registerAction( {
+				...createMockMenuAction(),
+			} );
+
+			render( <ToolsMenuLocation /> );
+
+			expect( screen.getByLabelText( 'Integrations' ) ).toBeInTheDocument();
+
+			fireEvent.click( screen.getByLabelText( 'Integrations' ) ); // Opens the integrations menu.
+
+			expect( screen.getByText( 'Test' ) ).toBeInTheDocument();
+		} );
+
+		it( 'should render groups and nested groups of actions', () => {
+			const subMenu = integrationsMenu.registerSubMenu( {
+				...createMockSubMenu(),
+			} );
+			subMenu.registerAction( {
+				...createMockMenuAction(),
+				id: 'sub-group-action',
+			} );
+			const subMenuSubGroup = subMenu.registerSubMenu( {
+				...createMockSubMenu( { title: 'Sub group' } ),
+			} );
+			subMenuSubGroup.registerAction( {
+				...createMockMenuAction( { title: 'Sub group action' } ),
+				id: 'sub-sub-group-action',
+			} );
+
+			// Act.
+			render( <ToolsMenuLocation /> );
+
+			// Assert.
+			expect( screen.getByLabelText( 'Integrations' ) ).toBeInTheDocument();
+
+			// Act.
+			fireEvent.click( screen.getByLabelText( 'Integrations' ) ); // Opens the integrations menu.
+
+			// Assert.
+			expect( screen.getByText( 'Test Group' ) ).toBeInTheDocument();
+
+			// Act.
+			fireEvent.mouseOver( screen.getByText( 'Test Group' ) ); // Opens the Test Group menu.
+
+			// Assert.
+			expect( screen.getByText( 'Sub group' ) ).toBeInTheDocument();
+
+			// Act.
+			fireEvent.mouseOver( screen.getByText( 'Sub group' ) ); // Opens the Sub group menu.
+
+			expect( screen.getByText( 'Sub group action' ) ).toBeInTheDocument();
+		} );
+
+		it( 'should NOT render the integrations menu inside if there are no registered integrations', () => {
+			// Act.
+			render( <MainMenuLocation /> );
+
+			fireEvent.click( screen.getByRole( 'button' ) ); // Opens the popover menu
+
+			// Assert.
+			expect( screen.queryByText( 'Integrations' ) ).not.toBeInTheDocument();
+		} );
+	} );
+
+	describe.each( [
+		{
+			menuName: 'Tools',
+			menu: toolsMenu,
+			maxItems: 5,
+			Component: ToolsMenuLocation,
+		},
+		{
+			menuName: 'Utilities',
+			menu: utilitiesMenu,
+			maxItems: 4,
+			Component: UtilitiesMenuLocation,
+		},
+	] )( '$menuName menu', ( { maxItems, menu, Component } ) => {
+		it( `should render ${ maxItems } menu items in a toolbar and the rest in a popover`, () => {
+			// Arrange.
+			const extraAfterMax = 2;
+
+			for ( let i = 0; i < maxItems + extraAfterMax; i++ ) {
+				menu.registerAction( {
+					id: `test-${ i }`,
+					props: {
+						title: `Test ${ i }`,
+						icon: () => <span>a</span>,
+					},
+				} );
+			}
+
+			// Act.
+			render( <Component /> );
+
+			// Assert.
+			const toolbarButtons = screen.getAllByRole( 'button' );
+			const popoverButton = toolbarButtons[ maxItems ];
+
+			expect( toolbarButtons ).toHaveLength( maxItems + 1 ); // Including the popover button.
+			expect( popoverButton ).toHaveAttribute( 'aria-label', 'More' );
+
+			// Act.
+			fireEvent.click( popoverButton );
+
+			// Assert.
+			expect( screen.getAllByRole( 'menuitem' ) ).toHaveLength( extraAfterMax );
+		} );
+	} );
+} );

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

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { integrationsMenu } from '../../locations';
+import {
+	bindMenu,
+	bindTrigger,
+	usePopupState,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+import { PlugIcon } from '@elementor/icons';
+import PopoverMenu from '../ui/popover-menu';
+import ToolbarMenuItem from '../ui/toolbar-menu-item';
+
+const { useMenuItems } = integrationsMenu;
+
+export default function IntegrationsMenuLocation() {
+	const menuItems = useMenuItems();
+
+	const popupState = usePopupState( {
+		variant: 'popover',
+		popupId: 'elementor-v2-app-bar-integrations',
+	} );
+
+	if ( menuItems.default.length === 0 ) {
+		return null;
+	}
+
+	return (
+		<>
+			<ToolbarMenuItem { ...bindTrigger( popupState ) } title={ __( 'Integrations', 'elementor' ) }>
+				<PlugIcon />
+			</ToolbarMenuItem>
+			<PopoverMenu
+				onClick={ popupState.close }
+				{ ...bindMenu( popupState ) }
+				marginThreshold={ 8 }
+				open={ popupState.isOpen }
+			>
+				{ menuItems.default.map(
+					( { MenuItem: IntegrationsMenuItem, id } ) => <IntegrationsMenuItem key={ id } />
+				) }
+			</PopoverMenu>
+		</>
+	);
+}

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

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { usePopupState, bindMenu, bindTrigger, Stack, Divider } from '@elementor/ui';
+import { mainMenu } from '../../locations';
+import PopoverMenu from '../ui/popover-menu';
+import ToolbarLogo from '../ui/toolbar-logo';
+import { ExtendedWindow } from '../../types';
+
+const { useMenuItems } = mainMenu;
+
+export default function MainMenuLocation() {
+	const menuItems = useMenuItems();
+
+	const popupState = usePopupState( {
+		variant: 'popover',
+		popupId: 'elementor-v2-app-bar-main-menu',
+	} );
+
+	const toolbarLogoProps = bindTrigger( popupState );
+
+	const onToolbarClick: React.MouseEventHandler = ( e ) => {
+		const extendedWindow = window as unknown as ExtendedWindow;
+		const config = extendedWindow?.elementor?.editorEvents?.config;
+
+		if ( config ) {
+			extendedWindow.elementor.editorEvents.dispatchEvent(
+				config.names.topBar.elementorLogoDropdown,
+				{
+					location: config.locations.topBar,
+					secondaryLocation: config.secondaryLocations.elementorLogo,
+					trigger: config.triggers.dropdownClick,
+					element: config.elements.buttonIcon,
+				},
+			);
+		}
+
+		toolbarLogoProps.onClick( e );
+	};
+
+	return (
+		<Stack sx={ { paddingInlineStart: 3 } } direction="row" alignItems="center">
+			<ToolbarLogo
+				{ ...toolbarLogoProps }
+				onClick={ onToolbarClick }
+				selected={ popupState.isOpen }
+			/>
+			<PopoverMenu
+				onClick={ popupState.close }
+				{ ...bindMenu( popupState ) }
+				marginThreshold={ 8 }
+			>
+				{ menuItems.default.map( ( { MenuItem, id } ) => <MenuItem key={ id } /> ) }
+				{ menuItems.exits.length > 0 && <Divider /> }
+				{ menuItems.exits.map( ( { MenuItem, id } ) => <MenuItem key={ id } /> ) }
+			</PopoverMenu>
+		</Stack>
+	);
+}

package/src/components/locations/page-indication-location.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { PageIndicationSlot } from '../../locations';
+
+export default function PageIndicationLocation() {
+	return (
+		<PageIndicationSlot />
+	);
+}

package/src/components/locations/primary-action-location.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { PrimaryActionSlot } from '../../locations';
+
+export default function PrimaryActionLocation() {
+	return (
+		<PrimaryActionSlot />
+	);
+}

package/src/components/locations/responsive-location.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { ResponsiveSlot } from '../../locations';
+
+export default function ResponsiveLocation() {
+	return (
+		<ResponsiveSlot />
+	);
+}

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { toolsMenu } from '../../locations';
+import ToolbarMenu from '../ui/toolbar-menu';
+import ToolbarMenuMore from '../ui/toolbar-menu-more';
+import IntegrationsMenuLocation from './integrations-menu-location';
+
+const MAX_TOOLBAR_ACTIONS = 5;
+
+const { useMenuItems } = toolsMenu;
+
+export default function ToolsMenuLocation() {
+	const menuItems = useMenuItems();
+
+	const toolbarMenuItems = menuItems.default.slice( 0, MAX_TOOLBAR_ACTIONS );
+	const popoverMenuItems = menuItems.default.slice( MAX_TOOLBAR_ACTIONS );
+
+	return (
+		<ToolbarMenu>
+			{ toolbarMenuItems.map( ( { MenuItem, id } ) => <MenuItem key={ id } /> ) }
+			<IntegrationsMenuLocation />
+			{ popoverMenuItems.length > 0 && (
+				<ToolbarMenuMore id="elementor-editor-app-bar-tools-more">
+					{ popoverMenuItems.map( ( { MenuItem, id } ) => <MenuItem key={ id } /> ) }
+				</ToolbarMenuMore>
+			) }
+		</ToolbarMenu>
+	);
+}

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

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { Fragment } from 'react';
+import ToolbarMenu from '../ui/toolbar-menu';
+import { utilitiesMenu } from '../../locations';
+import { Divider } from '@elementor/ui';
+import ToolbarMenuMore from '../ui/toolbar-menu-more';
+
+const MAX_TOOLBAR_ACTIONS = 4;
+
+const { useMenuItems } = utilitiesMenu;
+
+export default function UtilitiesMenuLocation() {
+	const menuItems = useMenuItems();
+
+	const toolbarMenuItems = menuItems.default.slice( 0, MAX_TOOLBAR_ACTIONS );
+	const popoverMenuItems = menuItems.default.slice( MAX_TOOLBAR_ACTIONS );
+
+	return (
+		<ToolbarMenu>
+			{ toolbarMenuItems.map(
+				( { MenuItem, id }, index ) => (
+					<Fragment key={ id }>
+						{ index === 0 && <Divider orientation="vertical" /> }
+						<MenuItem />
+					</Fragment>
+				)
+			) }
+			{ popoverMenuItems.length > 0 && (
+				<ToolbarMenuMore id="elementor-editor-app-bar-utilities-more">
+					{ popoverMenuItems.map( ( { MenuItem, id } ) => <MenuItem key={ id } /> ) }
+				</ToolbarMenuMore>
+			) }
+		</ToolbarMenu>
+	);
+}

package/src/components/ui/popover-menu-item.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import {
+	MenuItem,
+	MenuItemProps,
+	ListItemText,
+	ListItemIcon,
+	withDirection,
+} from '@elementor/ui';
+import { ArrowUpRightIcon, ChevronRightIcon } from '@elementor/icons';
+
+type ExtraProps = {
+	href?: string;
+	target?: string;
+	text?: string;
+	icon?: JSX.Element;
+	isGroupParent?: boolean;
+}
+
+export type PopoverMenuItemProps = MenuItemProps & ExtraProps;
+
+const DirectionalArrowIcon = withDirection( ArrowUpRightIcon );
+const DirectionalChevronIcon = withDirection( ChevronRightIcon );
+
+export default function PopoverMenuItem( { text, icon, onClick, href, target, disabled, isGroupParent, ...props }: PopoverMenuItemProps ) {
+	const isExternalLink = href && target === '_blank';
+
+	return (
+		<MenuItem
+			{ ...props }
+			disabled={ disabled }
+			onClick={ onClick }
+			component={ href ? 'a' : 'div' }
+			href={ href }
+			target={ target }
+			sx={ {
+				'&:hover': {
+					color: 'text.primary', // Overriding global CSS from the editor.
+				},
+			} }
+		>
+			<ListItemIcon>{ icon }</ListItemIcon>
+			<ListItemText primary={ text } />
+			{ isExternalLink && <DirectionalArrowIcon /> }
+			{ isGroupParent && <DirectionalChevronIcon /> }
+		</MenuItem>
+	);
+}

package/src/components/ui/popover-menu.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Menu, MenuProps, PopupState } from '@elementor/ui';
+import { MenuContextProvider } from '../../contexts/menu-context';
+
+export type PopoverMenuProps = MenuProps & {
+	popupState?: PopupState
+};
+
+export default function PopoverMenu( { children, popupState, ...props }: PopoverMenuProps ) {
+	return (
+		<MenuContextProvider type={ 'popover' } popupState={ popupState }>
+			<Menu
+				PaperProps={ {
+					sx: { mt: 1.5 },
+				} }
+				{ ...props }
+				MenuListProps={ {
+					component: 'div',
+					dense: true,
+				} }
+			>
+				{ children }
+			</Menu>
+		</MenuContextProvider>
+	);
+}

package/src/components/ui/popover-sub-menu.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import PopoverMenu, { PopoverMenuProps } from './popover-menu';
+import { useTheme } from '@elementor/ui';
+
+export default function PopoverSubMenu( { children, ...props }: PopoverMenuProps ) {
+	const theme = useTheme();
+	const isRTL = theme.direction === 'rtl';
+
+	return (
+		<PopoverMenu
+			sx={ { pointerEvents: 'none' } }
+			PaperProps={ {
+				sx: {
+					// This is a workaround to support RTL in PopoverMenu, since it doesn't support it yet.
+					...( isRTL
+						? { marginInlineEnd: -1 }
+						: { marginInlineStart: 1 }
+					),
+					pointerEvents: 'auto',
+				},
+			} }
+			anchorOrigin={ { vertical: 'center', horizontal: isRTL ? 'left' : 'right' } }
+			transformOrigin={ { vertical: 'center', horizontal: isRTL ? 'right' : 'left' } }
+			{ ...props }
+		>
+			{ children }
+		</PopoverMenu>
+	);
+}

package/src/components/ui/toolbar-logo.tsx

@@ -0,0 +1,84 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { __ } from '@wordpress/i18n';
+import { ToggleButton, ToggleButtonProps, SvgIconProps, SvgIcon, styled } from '@elementor/ui';
+
+interface StyledElementorLogoProps extends SvgIconProps {
+	showMenuIcon?: boolean;
+}
+
+type ToolbarLogoProps = Omit<ToggleButtonProps, 'value'>;
+
+const ElementorLogo = ( props: SvgIconProps ) => {
+	return (
+		<SvgIcon viewBox="0 0 32 32" { ...props }>
+			<g>
+				<circle cx="16" cy="16" r="16" />
+				<path d="M11.7 9H9V22.3H11.7V9Z" />
+				<path d="M22.4 9H9V11.7H22.4V9Z" />
+				<path d="M22.4 14.4004H9V17.1004H22.4V14.4004Z" />
+				<path d="M22.4 19.6992H9V22.3992H22.4V19.6992Z" />
+			</g>
+		</SvgIcon>
+	);
+};
+
+const StyledToggleButton = styled( ToggleButton )( ( { theme } ) => ( {
+	padding: 0,
+	border: 0,
+	color: theme.palette.text.primary,
+	'&.MuiToggleButton-root:hover': {
+		backgroundColor: 'initial',
+	},
+	'&.MuiToggleButton-root.Mui-selected': {
+		backgroundColor: 'initial',
+	},
+} ) );
+
+const StyledElementorLogo = styled( ElementorLogo, {
+	shouldForwardProp: ( prop ) => prop !== 'showMenuIcon',
+} )<StyledElementorLogoProps>( ( { theme, showMenuIcon } ) => ( {
+	'& path': {
+		fill: theme.palette.background.default,
+		transition: 'all 0.2s linear',
+		transformOrigin: 'bottom left',
+		'&:first-of-type': {
+			transitionDelay: ! showMenuIcon && '0.2s',
+			transform: showMenuIcon && 'translateY(-9px) scaleY(0)',
+		},
+		'&:not(:first-of-type)': {
+			// Emotion automatically change 4 to -4 in RTL moode.
+			transform: ! showMenuIcon && `translateX(${ theme.direction === 'rtl' ? '4' : '9' }px) scaleX(0.6)`,
+		},
+		'&:nth-of-type(2)': {
+			transitionDelay: showMenuIcon ? '0' : '0.2s',
+		},
+		'&:nth-of-type(3)': {
+			transitionDelay: '0.1s',
+		},
+		'&:nth-of-type(4)': {
+			transitionDelay: showMenuIcon ? '0.2s' : '0',
+		},
+	},
+} ) );
+
+export default function ToolbarLogo( props: ToolbarLogoProps ) {
+	const [ isHoverState, setIsHoverState ] = useState( false );
+	const showMenuIcon = props.selected || isHoverState;
+
+	return (
+		<StyledToggleButton
+			{ ...props }
+			value="selected"
+			size="large"
+			onMouseEnter={ () => setIsHoverState( true ) }
+			onMouseLeave={ () => setIsHoverState( false ) }
+		>
+			<StyledElementorLogo
+				fontSize="large"
+				showMenuIcon={ showMenuIcon }
+				titleAccess={ __( 'Elementor Logo', 'elementor' ) }
+			/>
+		</StyledToggleButton>
+	);
+}

package/src/components/ui/toolbar-menu-item.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { Box, IconButton, IconButtonProps, Tooltip as BaseTooltip, TooltipProps } from '@elementor/ui';
+
+export type ToolbarMenuItemProps = IconButtonProps & {
+	title?: string;
+	selected?: boolean;
+}
+
+export default function ToolbarMenuItem( { title, ...props }: ToolbarMenuItemProps ) {
+	return (
+		<Tooltip title={ title }>
+			{ /* @see https://mui.com/material-ui/react-tooltip/#disabled-elements */ }
+			<Box component="span" aria-label={ undefined }>
+				<IconButton
+					{ ...props }
+					aria-label={ title }
+					size="medium"
+					sx={ {
+						'& svg': {
+							fontSize: '1.25rem',
+							height: '1em',
+							width: '1em',
+						},
+						'&:hover': {
+							color: 'text.primary',
+						},
+					} }
+				/>
+			</Box>
+		</Tooltip>
+	);
+}
+
+function Tooltip( props: TooltipProps ) {
+	return <BaseTooltip
+		PopperProps={ {
+			sx: {
+				'&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom': {
+					mt: 2,
+				},
+			},
+		} }
+		{ ...props }
+	/>;
+}