@elementor/editor-app-bar 0.6.9 → 0.7.1

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

@@ -3,24 +3,20 @@ import { usePopupState, bindMenu, bindTrigger, Stack, Divider } from '@elementor
 import { mainMenu } from '../../locations';
 import PopoverMenu from '../ui/popover-menu';
 import ToolbarLogo from '../ui/toolbar-logo';
+import IntegrationsMenuLocation from './integrations-menu-location';
 
 const { useMenuItems } = mainMenu;
 
 export default function MainMenuLocation() {
 	const menuItems = useMenuItems();
 
-	const orderedGroups = [
-		menuItems.default,
-		menuItems.exits,
-	];
-
 	const popupState = usePopupState( {
 		variant: 'popover',
 		popupId: 'elementor-v2-app-bar-main-menu',
 	} );
 
 	return (
-		<Stack sx={ { paddingInlineStart: 4 } } direction="row" alignItems="center">
+		<Stack sx={ { paddingInlineStart: 3 } } direction="row" alignItems="center">
 			<ToolbarLogo
 				{ ...bindTrigger( popupState ) }
 				selected={ popupState.isOpen }
@@ -28,22 +24,14 @@ export default function MainMenuLocation() {
 			<PopoverMenu
 				onClick={ popupState.close }
 				{ ...bindMenu( popupState ) }
-				PaperProps={ {
-					sx: { mt: 4, marginInlineStart: -2 },
-				} }
+				marginThreshold={ 8 }
 			>
-				{
-					orderedGroups
-						.filter( ( group ) => group.length )
-						.map( ( group, index ) => {
-							return [
-								index > 0 ? <Divider key={ index } orientation="horizontal" /> : null,
-								...group.map(
-									( { MenuItem, id } ) => <MenuItem key={ id } />
-								),
-							];
-						} )
-				}
+				{ menuItems.default.map( ( { MenuItem, id } ) => <MenuItem key={ id } /> ) }
+
+				<IntegrationsMenuLocation key="integrations-location" parentPopupState={ popupState } />
+
+				{ menuItems.exits.length > 0 && <Divider /> }
+				{ menuItems.exits.map( ( { MenuItem, id } ) => <MenuItem key={ id } /> ) }
 			</PopoverMenu>
 		</Stack>
 	);

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: -2 }
+						: { marginInlineStart: 2 }
+					),
+					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

@@ -23,8 +23,8 @@ const ElementorLogo = ( props: SvgIconProps ) => {
 	);
 };
 
-const StyledToggleButton = styled( ToggleButton )( () => ( {
-	padding: 0,
+const StyledToggleButton = styled( ToggleButton )( ( { theme } ) => ( {
+	paddingInline: theme.spacing( 1 ),
 	'&.MuiToggleButton-root:hover': {
 		backgroundColor: 'initial',
 	},

package/src/extensions/documents-indicator/components/__tests__/settings-button.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import SettingsButton from '../settings-button';
 import { openRoute, useRouteStatus } from '@elementor/editor-v1-adapters';
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 
 jest.mock( '@elementor/editor-v1-adapters', () => ( {
 	openRoute: jest.fn(),
@@ -18,10 +18,10 @@ jest.mock( '@elementor/editor-documents', () => ( {
 describe( '@elementor/editor-app-bar - App bar document settings button', () => {
 	it( 'should open the document settings panel on click', () => {
 		// Arrange.
-		const { getByRole } = render( <SettingsButton /> );
+		render( <SettingsButton /> );
 
 		// Act.
-		fireEvent.click( getByRole( 'button' ) );
+		fireEvent.click( screen.getByRole( 'button' ) );
 
 		// Assert.
 		expect( openRoute ).toHaveBeenCalledTimes( 1 );
@@ -33,12 +33,12 @@ describe( '@elementor/editor-app-bar - App bar document settings button', () =>
 		jest.mocked( useRouteStatus ).mockReturnValue( { isActive: true, isBlocked: true } );
 
 		// Act.
-		const { getByRole } = render( <SettingsButton /> );
+		render( <SettingsButton /> );
 
 		// Assert.
-		const button = getByRole( 'button' );
+		const button = screen.getByRole( 'button' );
 
-		expect( button ).toHaveAttribute( 'disabled' );
+		expect( button ).toBeDisabled();
 		expect( button ).toHaveAttribute( 'aria-pressed', 'true' );
 		expect( useRouteStatus ).toHaveBeenCalledTimes( 1 );
 		expect( useRouteStatus ).toHaveBeenCalledWith( 'panel/page-settings' );

package/src/extensions/documents-save/components/__tests__/primary-action-menu.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import PrimaryActionMenu from '../primary-action-menu';
 import { documentOptionsMenu } from '../../../../locations';
 
@@ -29,10 +29,10 @@ describe( '@elementor/editor-app-bar - Primary action menu', () => {
 		} );
 
 		// Act.
-		const { getAllByRole } = render( <PrimaryActionMenu open={ true } anchorEl={ document.body } /> );
+		render( <PrimaryActionMenu open={ true } anchorEl={ document.body } /> );
 
 		// Assert.
-		const menuItems = getAllByRole( 'menuitem' );
+		const menuItems = screen.getAllByRole( 'menuitem' );
 
 		expect( menuItems ).toHaveLength( 2 );
 		expect( menuItems[ 0 ] ).toHaveTextContent( 'First action' );

package/src/extensions/documents-save/components/__tests__/primary-action.test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PrimaryAction from '../primary-action';
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { createMockDocument } from 'test-utils';
 import { useActiveDocument, useActiveDocumentActions } from '@elementor/editor-documents';
 
@@ -40,10 +40,10 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
 		jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
 
 		// Act.
-		const { getAllByRole } = render( <PrimaryAction /> );
+		render( <PrimaryAction /> );
 
 		// Assert.
-		expect( getAllByRole( 'button' )[ 0 ] ).toHaveTextContent( 'Submit' );
+		expect( screen.getAllByRole( 'button' )[ 0 ] ).toHaveTextContent( 'Submit' );
 	} );
 
 	it( 'should have "Publish" text when the user can publish the document', () => {
@@ -57,10 +57,10 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
 		jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
 
 		// Act.
-		const { getAllByRole } = render( <PrimaryAction /> );
+		render( <PrimaryAction /> );
 
 		// Assert.
-		expect( getAllByRole( 'button' )[ 0 ] ).toHaveTextContent( 'Publish' );
+		expect( screen.getAllByRole( 'button' )[ 0 ] ).toHaveTextContent( 'Publish' );
 	} );
 
 	it( 'should disable main and the menu buttons when the document is a Kit', () => {
@@ -76,11 +76,11 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
 		jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
 
 		// Act.
-		const { getByText, getByLabelText } = render( <PrimaryAction /> );
+		render( <PrimaryAction /> );
 
 		// Assert.
-		const mainButton = getByText( 'Publish' );
-		const menuButton = getByLabelText( 'Save Options' );
+		const mainButton = screen.getByText( 'Publish' );
+		const menuButton = screen.getByLabelText( 'Save Options' );
 
 		expect( mainButton ).toBeDisabled();
 		expect( menuButton ).toBeDisabled();
@@ -93,11 +93,11 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
 		jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
 
 		// Act.
-		const { getByText, getByLabelText } = render( <PrimaryAction /> );
+		render( <PrimaryAction /> );
 
 		// Assert.
-		const mainButton = getByText( 'Publish' );
-		const menuButton = getByLabelText( 'Save Options' );
+		const mainButton = screen.getByText( 'Publish' );
+		const menuButton = screen.getByLabelText( 'Save Options' );
 
 		expect( mainButton ).toBeDisabled();
 		expect( menuButton ).toBeEnabled();
@@ -116,11 +116,11 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
 		jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
 
 		// Act.
-		const { getByText, getByLabelText } = render( <PrimaryAction /> );
+		render( <PrimaryAction /> );
 
 		// Assert.
-		const mainButton = getByText( 'Publish' );
-		const menuButton = getByLabelText( 'Save Options' );
+		const mainButton = screen.getByText( 'Publish' );
+		const menuButton = screen.getByLabelText( 'Save Options' );
 
 		expect( mainButton ).toBeEnabled();
 		expect( menuButton ).toBeEnabled();
@@ -133,9 +133,9 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
 		jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
 
 		// Act.
-		const { getAllByRole } = render( <PrimaryAction /> );
+		render( <PrimaryAction /> );
 
-		fireEvent.click( getAllByRole( 'button' )[ 0 ] );
+		fireEvent.click( screen.getAllByRole( 'button' )[ 0 ] );
 
 		// Assert.
 		expect( actionsMock.save ).toHaveBeenCalledTimes( 1 );
@@ -151,17 +151,17 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
 		jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
 
 		// Act.
-		const { getAllByRole } = render( <PrimaryAction /> );
+		render( <PrimaryAction /> );
 
-		const button = getAllByRole( 'button' )[ 0 ];
-		const loader = getAllByRole( 'progressbar' )[ 0 ];
+		const button = screen.getAllByRole( 'button' )[ 0 ];
+		const loader = screen.getAllByRole( 'progressbar' )[ 0 ];
 
 		fireEvent.click( button );
 
 		// Assert.
 		expect( actionsMock.save ).not.toHaveBeenCalled();
 		expect( loader ).toBeInTheDocument();
-		expect( button.textContent ).toBe( '' );
+		expect( button ).toHaveTextContent( '' );
 	} );
 
 	it( 'should not show a loader when the button is disabled', () => {
@@ -177,12 +177,12 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
 		jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
 
 		// Act.
-		const { getAllByRole, queryByRole } = render( <PrimaryAction /> );
-		const button = getAllByRole( 'button' )[ 0 ];
-		const loader = queryByRole( 'progressbar' );
+		render( <PrimaryAction /> );
+		const button = screen.getAllByRole( 'button' )[ 0 ];
+		const loader = screen.queryByRole( 'progressbar' );
 
 		// Assert.
 		expect( loader ).not.toBeInTheDocument();
-		expect( button.textContent ).not.toBe( '' );
+		expect( button ).not.toHaveTextContent( '' );
 	} );
 } );

package/src/extensions/documents-save/components/primary-action-menu.tsx

@@ -31,8 +31,9 @@ export default function PrimaryActionMenu( props: PopoverMenuProps ) {
 				vertical: 'top',
 				horizontal: 'right',
 			} }
+			marginThreshold={ 8 }
 			PaperProps={ {
-				sx: { mt: 2, ml: 3 },
+				sx: { mt: 2 },
 			} }
 		>
 			{ saveActions.map( ( { MenuItem, id }, index ) => ( [

package/src/extensions/site-settings/components/__tests__/portalled-primary-action.test.tsx

@@ -41,7 +41,7 @@ describe( '@elementor/editor-app-bar - Portalled primary action', () => {
 		navigateTo( 'panel/global/menu' );
 
 		// Assert.
-		expect( screen.queryByRole( 'button' ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'button' ) ).toBeInTheDocument();
 	} );
 
 	it( 'should not render the button when opening another panel', () => {

package/src/extensions/site-settings/components/__tests__/primary-action.test.tsx

@@ -90,9 +90,9 @@ describe( '@elementor/editor-app-bar - Primary action', () => {
 		} ) );
 
 		// Act.
-		const { getByRole } = render( <PrimaryAction /> );
+		render( <PrimaryAction /> );
 
-		const loader = getByRole( 'progressbar' );
+		const loader = screen.getByRole( 'progressbar' );
 
 		// Assert.
 		expect( loader ).toBeInTheDocument();

package/src/index.ts

@@ -3,6 +3,7 @@ export {
 	toolsMenu,
 	utilitiesMenu,
 	documentOptionsMenu,
+	integrationsMenu,
 	injectIntoPageIndication,
 	injectIntoResponsive,
 	injectIntoPrimaryAction,

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createMenu } from '../menus';
-import { act, fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import { createMockMenuAction, createMockMenuLink, createMockMenuToggleAction } from 'test-utils';
 
 describe( '@elementor/editor-app-bar - Menus API', () => {
@@ -10,10 +10,10 @@ describe( '@elementor/editor-app-bar - Menus API', () => {
 
 		menu.registerAction( createMockMenuAction() );
 
-		const { getByRole } = renderMenu( menu );
+		renderMenu( menu );
 
 		// Assert.
-		expect( getByRole( 'button' ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'button' ) ).toBeInTheDocument();
 	} );
 
 	it( 'should create a menu with groups and append a default group', () => {
@@ -31,11 +31,11 @@ describe( '@elementor/editor-app-bar - Menus API', () => {
 			group: 'testGroup',
 		} );
 
-		const { getByRole } = renderMenu( menu );
+		renderMenu( menu );
 
 		// Assert.
-		expect( getByRole( 'button' ) ).toBeInTheDocument();
-		expect( getByRole( 'link' ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'button' ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'link' ) ).toBeInTheDocument();
 	} );
 
 	it( 'should register an action', () => {
@@ -47,10 +47,10 @@ describe( '@elementor/editor-app-bar - Menus API', () => {
 
 		menu.registerAction( createMockMenuAction( { onClick } ) );
 
-		const { getByRole } = renderMenu( menu );
+		renderMenu( menu );
 
 		// Assert.
-		const action = getByRole( 'button' );
+		const action = screen.getByRole( 'button' );
 
 		expect( action ).toBeInTheDocument();
 		expect( action ).toHaveAttribute( 'aria-label', 'Test' );
@@ -68,13 +68,13 @@ describe( '@elementor/editor-app-bar - Menus API', () => {
 
 		menu.registerToggleAction( createMockMenuToggleAction() );
 
-		const { getByRole } = renderMenu( menu );
+		renderMenu( menu );
 
 		// Assert.
-		const toggleAction = getByRole( 'button' );
+		const toggleAction = screen.getByRole( 'button' );
 
 		expect( toggleAction ).toHaveAttribute( 'aria-pressed', 'false' );
-		expect( toggleAction ).toHaveAttribute( 'value', 'test-value' );
+		expect( toggleAction ).toHaveValue( 'test-value' );
 
 		// Act.
 		fireEvent.click( toggleAction );
@@ -87,7 +87,7 @@ describe( '@elementor/editor-app-bar - Menus API', () => {
 
 		// Assert.
 		expect( toggleAction ).toHaveAttribute( 'aria-pressed', 'false' );
-		expect( toggleAction ).toHaveAttribute( 'disabled' );
+		expect( toggleAction ).toBeDisabled();
 	} );
 
 	it( 'should register a link', () => {
@@ -96,10 +96,10 @@ describe( '@elementor/editor-app-bar - Menus API', () => {
 
 		menu.registerLink( createMockMenuLink() );
 
-		const { getByRole } = renderMenu( menu );
+		renderMenu( menu );
 
 		// Assert.
-		const link = getByRole( 'link' );
+		const link = screen.getByRole( 'link' );
 
 		expect( link ).toBeInTheDocument();
 		expect( link ).toHaveAttribute( 'href', 'https://elementor.com' );
@@ -116,10 +116,10 @@ describe( '@elementor/editor-app-bar - Menus API', () => {
 			group: 'non-existing-group' as 'default', // Emulate a runtime error.
 		} );
 
-		const { queryByRole } = renderMenu( menu );
+		renderMenu( menu );
 
 		// Assert.
-		expect( queryByRole( 'link' ) ).not.toBeInTheDocument();
+		expect( screen.queryByRole( 'link' ) ).not.toBeInTheDocument();
 	} );
 
 	it( 'should register an action tooltip', async () => {
@@ -130,22 +130,20 @@ describe( '@elementor/editor-app-bar - Menus API', () => {
 		menu.registerAction( createMockMenuAction() );
 
 		// Assert.
-		const { getByLabelText, queryByRole, findByRole } = renderMenu( menu );
+		renderMenu( menu );
 
-		const button = getByLabelText( 'Test' );
+		const button = screen.getByLabelText( 'Test' );
 
-		expect( queryByRole( 'tooltip' ) ).not.toBeInTheDocument();
+		expect( screen.queryByRole( 'tooltip' ) ).not.toBeInTheDocument();
 
 		// Act.
-		act( () => {
-			fireEvent(
-				button,
-				new MouseEvent( 'mouseover', { bubbles: true } ),
-			);
-		} );
+		fireEvent.mouseOver(
+			button,
+			{ bubbles: true },
+		);
 
 		// Assert.
-		expect( await findByRole( 'tooltip' ) ).toHaveTextContent( 'Test' );
+		expect( await screen.findByRole( 'tooltip' ) ).toHaveTextContent( 'Test' );
 	} );
 
 	it( 'should register an action icon', () => {
@@ -156,9 +154,9 @@ describe( '@elementor/editor-app-bar - Menus API', () => {
 		menu.registerAction( createMockMenuAction() );
 
 		// Assert.
-		const { queryByText } = renderMenu( menu );
+		renderMenu( menu );
 
-		const icon = queryByText( 'a' );
+		const icon = screen.queryByText( 'a' );
 
 		expect( icon ).toBeInTheDocument();
 		expect( icon ).toHaveTextContent( 'a' );
@@ -192,9 +190,9 @@ describe( '@elementor/editor-app-bar - Menus API', () => {
 		} );
 
 		// Assert.
-		const { queryByLabelText } = renderMenu( menu );
+		renderMenu( menu );
 
-		expect( queryByLabelText( `hidden-${ type }` ) ).not.toBeInTheDocument();
+		expect( screen.queryByLabelText( `hidden-${ type }` ) ).not.toBeInTheDocument();
 	} );
 } );
 

package/src/locations/index.ts

@@ -24,4 +24,6 @@ export const toolsMenu = createMenu();
 
 export const utilitiesMenu = createMenu();
 
+export const integrationsMenu = createMenu();
+
 export const documentOptionsMenu = createMenu( [ 'save' ] );