@elementor/editor-app-bar 0.14.4 → 0.14.6

package/src/components/__tests__/app-bar.test.tsx

@@ -5,7 +5,7 @@ import { __createStore, SliceState, Store, __StoreProvider as Provider } from '@
 import { slice } from '@elementor/editor-documents';
 
 describe( 'AppBar component', () => {
-	let store: Store<SliceState<typeof slice>>;
+	let store: Store< SliceState< typeof slice > >;
 
 	beforeEach( () => {
 		store = __createStore();
@@ -13,7 +13,11 @@ describe( 'AppBar component', () => {
 
 	it( 'should render elementor logo', () => {
 		// Act.
-		render( <Provider store={ store }><AppBar /></Provider> );
+		render(
+			<Provider store={ store }>
+				<AppBar />
+			</Provider>
+		);
 
 		// Assert.
 		const logoTitle = screen.queryByText( 'Elementor Logo' );

package/src/components/actions/action.tsx

@@ -24,10 +24,6 @@ export default function Action( { icon: Icon, title, visible = true, ...props }:
 			<Icon />
 		</ToolbarMenuItem>
 	) : (
-		<PopoverMenuItem
-			{ ...props }
-			text={ title }
-			icon={ <Icon /> }
-		/>
+		<PopoverMenuItem { ...props } text={ title } icon={ <Icon /> } />
 	);
 }

package/src/components/actions/actions-group.tsx

@@ -42,7 +42,9 @@ export default function ActionsGroup( { icon: Icon, title, visible = true, items
 					open={ popupState.isOpen }
 					popupState={ popupState }
 				>
-					{ items.map( ( { MenuItem, id: key } ) => <MenuItem key={ key } /> ) }
+					{ items.map( ( { MenuItem, id: key } ) => (
+						<MenuItem key={ key } />
+					) ) }
 				</PopoverMenu>
 			</>
 		);
@@ -57,12 +59,10 @@ export default function ActionsGroup( { icon: Icon, title, visible = true, items
 				icon={ <Icon /> }
 				isGroupParent
 			/>
-			<PopoverSubMenu
-				{ ...props }
-				{ ...bindPopover( popupState ) }
-				popupState={ popupState }
-			>
-				{ items.map( ( { MenuItem, id: key } ) => <MenuItem key={ key } /> ) }
+			<PopoverSubMenu { ...props } { ...bindPopover( popupState ) } popupState={ popupState }>
+				{ items.map( ( { MenuItem, id: key } ) => (
+					<MenuItem key={ key } />
+				) ) }
 			</PopoverSubMenu>
 		</>
 	);

package/src/components/actions/link.tsx

@@ -10,7 +10,7 @@ export type Props = {
 	href?: string;
 	visible?: boolean;
 	target?: string;
-}
+};
 
 export default function Link( { icon: Icon, title, visible = true, ...props }: Props ) {
 	const { type } = useMenuContext();
@@ -24,10 +24,6 @@ export default function Link( { icon: Icon, title, visible = true, ...props }: P
 			<Icon />
 		</ToolbarMenuItem>
 	) : (
-		<PopoverMenuItem
-			{ ...props }
-			text={ title }
-			icon={ <Icon /> }
-		/>
+		<PopoverMenuItem { ...props } text={ title } icon={ <Icon /> } />
 	);
 }

package/src/components/actions/toggle-action.tsx

@@ -26,10 +26,6 @@ export default function ToggleAction( { icon: Icon, title, value, visible = true
 			<Icon />
 		</ToolbarMenuToggleItem>
 	) : (
-		<PopoverMenuItem
-			{ ...props }
-			text={ title }
-			icon={ <Icon /> }
-		/>
+		<PopoverMenuItem { ...props } text={ title } icon={ <Icon /> } />
 	);
 }

package/src/components/app-bar.tsx

@@ -18,8 +18,7 @@ export default function AppBar() {
 					<Box display="grid" gridTemplateColumns="repeat(3, 1fr)" flexGrow={ 1 }>
 						<Grid container>
 							<MainMenuLocation />
-							{ document?.permissions?.allowAddingWidgets &&
-								<ToolsMenuLocation /> }
+							{ document?.permissions?.allowAddingWidgets && <ToolsMenuLocation /> }
 						</Grid>
 						<Grid container justifyContent="center">
 							<ToolbarMenu spacing={ 1.5 }>

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

@@ -4,12 +4,7 @@ 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';
+import { createMockMenuAction, createMockMenuLink, createMockMenuToggleAction, createMockSubMenu } from 'test-utils';
 
 describe( 'Menus components', () => {
 	describe( 'Main menu', () => {

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

@@ -1,10 +1,6 @@
 import * as React from 'react';
 import { integrationsMenu } from '../../locations';
-import {
-	bindMenu,
-	bindTrigger,
-	usePopupState,
-} from '@elementor/ui';
+import { bindMenu, bindTrigger, usePopupState } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 import { PlugIcon } from '@elementor/icons';
 import PopoverMenu from '../ui/popover-menu';
@@ -35,9 +31,9 @@ export default function IntegrationsMenuLocation() {
 				marginThreshold={ 8 }
 				open={ popupState.isOpen }
 			>
-				{ menuItems.default.map(
-					( { MenuItem: IntegrationsMenuItem, id } ) => <IntegrationsMenuItem key={ id } />
-				) }
+				{ menuItems.default.map( ( { MenuItem: IntegrationsMenuItem, id } ) => (
+					<IntegrationsMenuItem key={ id } />
+				) ) }
 			</PopoverMenu>
 		</>
 	);

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

@@ -22,15 +22,12 @@ export default function MainMenuLocation() {
 		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,
-				},
-			);
+			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 );
@@ -38,19 +35,15 @@ export default function MainMenuLocation() {
 
 	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 } /> ) }
+			<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 } /> ) }
+				{ menuItems.exits.map( ( { MenuItem, id } ) => (
+					<MenuItem key={ id } />
+				) ) }
 			</PopoverMenu>
 		</Stack>
 	);

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

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

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

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

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

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

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

@@ -16,11 +16,15 @@ export default function ToolsMenuLocation() {
 
 	return (
 		<ToolbarMenu>
-			{ toolbarMenuItems.map( ( { MenuItem, id } ) => <MenuItem key={ id } /> ) }
+			{ 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 } /> ) }
+					{ popoverMenuItems.map( ( { MenuItem, id } ) => (
+						<MenuItem key={ id } />
+					) ) }
 				</ToolbarMenuMore>
 			) }
 		</ToolbarMenu>

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

@@ -17,17 +17,17 @@ export default function UtilitiesMenuLocation() {
 
 	return (
 		<ToolbarMenu>
-			{ toolbarMenuItems.map(
-				( { MenuItem, id }, index ) => (
-					<Fragment key={ id }>
-						{ index === 0 && <Divider orientation="vertical" /> }
-						<MenuItem />
-					</Fragment>
-				)
-			) }
+			{ 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 } /> ) }
+					{ popoverMenuItems.map( ( { MenuItem, id } ) => (
+						<MenuItem key={ id } />
+					) ) }
 				</ToolbarMenuMore>
 			) }
 		</ToolbarMenu>

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

@@ -1,11 +1,5 @@
 import * as React from 'react';
-import {
-	MenuItem,
-	MenuItemProps,
-	ListItemText,
-	ListItemIcon,
-	withDirection,
-} from '@elementor/ui';
+import { MenuItem, MenuItemProps, ListItemText, ListItemIcon, withDirection } from '@elementor/ui';
 import { ArrowUpRightIcon, ChevronRightIcon } from '@elementor/icons';
 
 type ExtraProps = {
@@ -14,14 +8,23 @@ type ExtraProps = {
 	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 ) {
+export default function PopoverMenuItem( {
+	text,
+	icon,
+	onClick,
+	href,
+	target,
+	disabled,
+	isGroupParent,
+	...props
+}: PopoverMenuItemProps ) {
 	const isExternalLink = href && target === '_blank';
 
 	return (

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

@@ -3,7 +3,7 @@ import { Menu, MenuProps, PopupState } from '@elementor/ui';
 import { MenuContextProvider } from '../../contexts/menu-context';
 
 export type PopoverMenuProps = MenuProps & {
-	popupState?: PopupState
+	popupState?: PopupState;
 };
 
 export default function PopoverMenu( { children, popupState, ...props }: PopoverMenuProps ) {

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

@@ -12,10 +12,7 @@ export default function PopoverSubMenu( { children, ...props }: PopoverMenuProps
 			PaperProps={ {
 				sx: {
 					// This is a workaround to support RTL in PopoverMenu, since it doesn't support it yet.
-					...( isRTL
-						? { marginInlineEnd: -1 }
-						: { marginInlineStart: 1 }
-					),
+					...( isRTL ? { marginInlineEnd: -1 } : { marginInlineStart: 1 } ),
 					pointerEvents: 'auto',
 				},
 			} }

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

@@ -7,7 +7,7 @@ interface StyledElementorLogoProps extends SvgIconProps {
 	showMenuIcon?: boolean;
 }
 
-type ToolbarLogoProps = Omit<ToggleButtonProps, 'value'>;
+type ToolbarLogoProps = Omit< ToggleButtonProps, 'value' >;
 
 const ElementorLogo = ( props: SvgIconProps ) => {
 	return (
@@ -37,7 +37,7 @@ const StyledToggleButton = styled( ToggleButton )( ( { theme } ) => ( {
 
 const StyledElementorLogo = styled( ElementorLogo, {
 	shouldForwardProp: ( prop ) => prop !== 'showMenuIcon',
-} )<StyledElementorLogoProps>( ( { theme, showMenuIcon } ) => ( {
+} )< StyledElementorLogoProps >( ( { theme, showMenuIcon } ) => ( {
 	'& path': {
 		fill: theme.palette.background.default,
 		transition: 'all 0.2s linear',

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

@@ -4,7 +4,7 @@ import { Box, IconButton, IconButtonProps, Tooltip as BaseTooltip, TooltipProps
 export type ToolbarMenuItemProps = IconButtonProps & {
 	title?: string;
 	selected?: boolean;
-}
+};
 
 export default function ToolbarMenuItem( { title, ...props }: ToolbarMenuItemProps ) {
 	return (
@@ -32,14 +32,16 @@ export default function ToolbarMenuItem( { title, ...props }: ToolbarMenuItemPro
 }
 
 function Tooltip( props: TooltipProps ) {
-	return <BaseTooltip
-		PopperProps={ {
-			sx: {
-				'&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom': {
-					mt: 2,
+	return (
+		<BaseTooltip
+			PopperProps={ {
+				sx: {
+					'&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom': {
+						mt: 2,
+					},
 				},
-			},
-		} }
-		{ ...props }
-	/>;
+			} }
+			{ ...props }
+		/>
+	);
 }

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

@@ -6,9 +6,9 @@ import { __ } from '@wordpress/i18n';
 import { DotsVerticalIcon } from '@elementor/icons';
 import PopoverMenu from './popover-menu';
 
-export type ToolbarMenuMoreProps = PropsWithChildren<{
+export type ToolbarMenuMoreProps = PropsWithChildren< {
 	id: string;
-}>
+} >;
 
 export default function ToolbarMenuMore( { children, id }: ToolbarMenuMoreProps ) {
 	const popupState = usePopupState( {

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { Box, ToggleButton, ToggleButtonProps, Tooltip } from '@elementor/ui';
 
-export type ToolbarMenuToggleItemProps = Omit<ToggleButtonProps, 'onChange'> & {
+export type ToolbarMenuToggleItemProps = Omit< ToggleButtonProps, 'onChange' > & {
 	title?: string;
 	onClick?: () => void;
-}
+};
 
 export default function ToolbarMenuToggleItem( { title, onClick, ...props }: ToolbarMenuToggleItemProps ) {
 	return (

package/src/contexts/menu-context.tsx

@@ -5,18 +5,14 @@ import { PopupState } from '@elementor/ui';
 type MenuContextValue = {
 	type: 'toolbar' | 'popover';
 	popupState?: PopupState;
-}
+};
 
-const MenuContext = createContext<MenuContextValue>( {
+const MenuContext = createContext< MenuContextValue >( {
 	type: 'toolbar',
 } );
 
-export function MenuContextProvider( { type, popupState, children }: PropsWithChildren<MenuContextValue> ) {
-	return (
-		<MenuContext.Provider value={ { type, popupState } }>
-			{ children }
-		</MenuContext.Provider>
-	);
+export function MenuContextProvider( { type, popupState, children }: PropsWithChildren< MenuContextValue > ) {
+	return <MenuContext.Provider value={ { type, popupState } }>{ children }</MenuContext.Provider>;
 }
 
 export function useMenuContext() {

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

@@ -1,6 +1,9 @@
 import * as React from 'react';
 import SettingsButton from '../settings-button';
-import { __privateOpenRoute as openRoute, __privateUseRouteStatus as useRouteStatus } from '@elementor/editor-v1-adapters';
+import {
+	__privateOpenRoute as openRoute,
+	__privateUseRouteStatus as useRouteStatus,
+} from '@elementor/editor-v1-adapters';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { __useActiveDocument as useActiveDocument } from '@elementor/editor-documents';
 import { createMockDocument } from 'test-utils';
@@ -17,9 +20,11 @@ jest.mock( '@elementor/editor-documents', () => ( {
 
 describe( '@elementor/editor-app-bar - App bar document settings button', () => {
 	beforeEach( () => {
-		jest.mocked( useActiveDocument ).mockReturnValue( createMockDocument( {
-			type: { value: 'wp-page', label: 'Page' },
-		} ) );
+		jest.mocked( useActiveDocument ).mockReturnValue(
+			createMockDocument( {
+				type: { value: 'wp-page', label: 'Page' },
+			} )
+		);
 	} );
 
 	it( 'should open the document settings panel on click', () => {

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

@@ -1,18 +1,22 @@
 import * as React from 'react';
 import { Box, ToggleButton, Tooltip as BaseTooltip, TooltipProps } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
-import { __privateOpenRoute as openRoute, __privateUseRouteStatus as useRouteStatus } from '@elementor/editor-v1-adapters';
+import {
+	__privateOpenRoute as openRoute,
+	__privateUseRouteStatus as useRouteStatus,
+} from '@elementor/editor-v1-adapters';
 import { SettingsIcon } from '@elementor/icons';
-import { __useActiveDocument as useActiveDocument, __useHostDocument as useHostDocument } from '@elementor/editor-documents';
+import {
+	__useActiveDocument as useActiveDocument,
+	__useHostDocument as useHostDocument,
+} from '@elementor/editor-documents';
 import { ExtendedWindow } from '../../../types';
 
 export default function SettingsButton() {
 	const activeDocument = useActiveDocument();
 	const hostDocument = useHostDocument();
 
-	const document = activeDocument && activeDocument.type.value !== 'kit'
-		? activeDocument
-		: hostDocument;
+	const document = activeDocument && activeDocument.type.value !== 'kit' ? activeDocument : hostDocument;
 
 	const { isActive, isBlocked } = useRouteStatus( 'panel/page-settings' );
 
@@ -21,8 +25,7 @@ export default function SettingsButton() {
 	}
 
 	/* translators: %s: Post type label. */
-	const title = __( '%s Settings', 'elementor' )
-		.replace( '%s', document.type.label );
+	const title = __( '%s Settings', 'elementor' ).replace( '%s', document.type.label );
 
 	return (
 		<Tooltip title={ title }>
@@ -37,15 +40,12 @@ export default function SettingsButton() {
 						const config = extendedWindow?.elementor?.editorEvents?.config;
 
 						if ( config ) {
-							extendedWindow.elementor.editorEvents.dispatchEvent(
-								config.names.topBar.documentSettings,
-								{
-									location: config.locations.topBar,
-									secondaryLocation: config.secondaryLocations[ 'document-settings' ],
-									trigger: config.triggers.click,
-									element: config.elements.buttonIcon,
-								},
-							);
+							extendedWindow.elementor.editorEvents.dispatchEvent( config.names.topBar.documentSettings, {
+								location: config.locations.topBar,
+								secondaryLocation: config.secondaryLocations[ 'document-settings' ],
+								trigger: config.triggers.click,
+								element: config.elements.buttonIcon,
+							} );
 						}
 
 						openRoute( 'panel/page-settings/settings' );
@@ -67,14 +67,16 @@ export default function SettingsButton() {
 }
 
 function Tooltip( props: TooltipProps ) {
-	return <BaseTooltip
-		PopperProps={ {
-			sx: {
-				'&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom': {
-					mt: 1.7,
+	return (
+		<BaseTooltip
+			PopperProps={ {
+				sx: {
+					'&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom': {
+						mt: 1.7,
+					},
 				},
-			},
-		} }
-		{ ...props }
-	/>;
+			} }
+			{ ...props }
+		/>
+	);
 }

package/src/extensions/documents-preview/hooks/use-action-props.ts

@@ -15,15 +15,12 @@ export default function useActionProps() {
 			const config = extendedWindow?.elementor?.editorEvents?.config;
 
 			if ( config ) {
-				extendedWindow.elementor.editorEvents.dispatchEvent(
-					config.names.topBar.previewPage,
-					{
-						location: config.locations.topBar,
-						secondaryLocation: config.secondaryLocations[ 'preview-page' ],
-						trigger: config.triggers.click,
-						element: config.elements.buttonIcon,
-					},
-				);
+				extendedWindow.elementor.editorEvents.dispatchEvent( config.names.topBar.previewPage, {
+					location: config.locations.topBar,
+					secondaryLocation: config.secondaryLocations[ 'preview-page' ],
+					trigger: config.triggers.click,
+					element: config.elements.buttonIcon,
+				} );
 			}
 
 			if ( document ) {

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

@@ -2,7 +2,10 @@ import * as React from 'react';
 import PrimaryAction from '../primary-action';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { createMockDocument } from 'test-utils';
-import { __useActiveDocument as useActiveDocument, __useActiveDocumentActions as useActiveDocumentActions } from '@elementor/editor-documents';
+import {
+	__useActiveDocument as useActiveDocument,
+	__useActiveDocumentActions as useActiveDocumentActions,
+} from '@elementor/editor-documents';
 import { __privateUseIsPreviewMode as useIsPreviewMode } from '@elementor/editor-v1-adapters';
 
 jest.mock( '@elementor/editor-documents', () => ( {

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

@@ -12,7 +12,7 @@ const StyledPopoverMenu = styled( PopoverMenu )`
 			display: none;
 		}
 
-		& > *:not(.MuiDivider-root):not(:last-of-type) + .MuiDivider-root {
+		& > *:not( .MuiDivider-root ):not( :last-of-type ) + .MuiDivider-root {
 			display: block;
 		}
 	}
@@ -37,17 +37,17 @@ export default function PrimaryActionMenu( props: PopoverMenuProps ) {
 				sx: { mt: 0.5 },
 			} }
 		>
-			{ saveActions.map( ( { MenuItem, id }, index ) => ( [
-				( index > 0 ) && <Divider key={ `${ id }-divider` } />,
+			{ saveActions.map( ( { MenuItem, id }, index ) => [
+				index > 0 && <Divider key={ `${ id }-divider` } />,
 				<MenuItem key={ id } />,
-			] ) ) }
+			] ) }
 
 			{ saveActions.length > 0 && defaultActions.length > 0 && <Divider /> }
 
-			{ defaultActions.map( ( { MenuItem, id }, index ) => ( [
-				( index > 0 ) && <Divider key={ `${ id }-divider` } />,
+			{ defaultActions.map( ( { MenuItem, id }, index ) => [
+				index > 0 && <Divider key={ `${ id }-divider` } />,
 				<MenuItem key={ id } />,
-			] ) ) }
+			] ) }
 		</StyledPopoverMenu>
 	);
 }