@elementor/editor-app-bar 0.9.7 → 0.10.0

package/src/components/actions/action.tsx

@@ -1,33 +0,0 @@
-import * as React from 'react';
-import { useMenuContext } from '../../contexts/menu-context';
-import ToolbarMenuItem from '../ui/toolbar-menu-item';
-import PopoverMenuItem from '../ui/popover-menu-item';
-import { ElementType } from 'react';
-
-export type Props = {
-	title: string;
-	icon: ElementType;
-	disabled?: boolean;
-	visible?: boolean;
-	onClick?: () => void;
-};
-
-export default function Action( { icon: Icon, title, visible = true, ...props }: Props ) {
-	const { type } = useMenuContext();
-
-	if ( ! visible ) {
-		return null;
-	}
-
-	return type === 'toolbar' ? (
-		<ToolbarMenuItem title={ title } { ...props }>
-			<Icon />
-		</ToolbarMenuItem>
-	) : (
-		<PopoverMenuItem
-			{ ...props }
-			text={ title }
-			icon={ <Icon /> }
-		/>
-	);
-}

package/src/components/actions/link.tsx

@@ -1,33 +0,0 @@
-import * as React from 'react';
-import { useMenuContext } from '../../contexts/menu-context';
-import ToolbarMenuItem from '../ui/toolbar-menu-item';
-import PopoverMenuItem from '../ui/popover-menu-item';
-import { ElementType } from 'react';
-
-export type Props = {
-	title: string;
-	icon: ElementType;
-	href?: string;
-	visible?: boolean;
-	target?: string;
-}
-
-export default function Link( { icon: Icon, title, visible = true, ...props }: Props ) {
-	const { type } = useMenuContext();
-
-	if ( ! visible ) {
-		return null;
-	}
-
-	return type === 'toolbar' ? (
-		<ToolbarMenuItem title={ title } { ...props }>
-			<Icon />
-		</ToolbarMenuItem>
-	) : (
-		<PopoverMenuItem
-			{ ...props }
-			text={ title }
-			icon={ <Icon /> }
-		/>
-	);
-}

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

@@ -1,35 +0,0 @@
-import * as React from 'react';
-import { useMenuContext } from '../../contexts/menu-context';
-import PopoverMenuItem from '../ui/popover-menu-item';
-import ToolbarMenuToggleItem from '../ui/toolbar-menu-toggle-item';
-import { ElementType } from 'react';
-
-export type Props = {
-	title: string;
-	icon: ElementType;
-	selected?: boolean;
-	disabled?: boolean;
-	visible?: boolean;
-	onClick?: () => void;
-	value?: string;
-};
-
-export default function ToggleAction( { icon: Icon, title, value, visible = true, ...props }: Props ) {
-	const { type } = useMenuContext();
-
-	if ( ! visible ) {
-		return null;
-	}
-
-	return type === 'toolbar' ? (
-		<ToolbarMenuToggleItem value={ value || title } title={ title } { ...props }>
-			<Icon />
-		</ToolbarMenuToggleItem>
-	) : (
-		<PopoverMenuItem
-			{ ...props }
-			text={ title }
-			icon={ <Icon /> }
-		/>
-	);
-}

package/src/components/app-bar.tsx

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { AppBar as BaseAppBar, Box, Divider, Grid, ThemeProvider } 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';
-
-export default function AppBar() {
-	return (
-		<ThemeProvider colorScheme="dark">
-			<BaseAppBar position="sticky">
-				<Box display="grid" gridTemplateColumns="repeat(3, 1fr)">
-					<Grid container>
-						<MainMenuLocation />
-						<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>
-			</BaseAppBar>
-		</ThemeProvider>
-	);
-}

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

@@ -1,37 +0,0 @@
-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( '@elementor/editor-app-bar - 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

@@ -1,120 +0,0 @@
-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 } from 'test-utils';
-
-describe( '@elementor/editor-app-bar - 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 main menu if there are registered integrations', () => {
-			// Arrange.
-			integrationsMenu.registerAction( {
-				...createMockMenuAction(),
-			} );
-
-			// Act.
-			render( <MainMenuLocation /> );
-
-			fireEvent.click( screen.getByRole( 'button' ) ); // Opens the popover menu
-
-			// Assert.
-			expect( screen.getByText( 'Integrations' ) ).toBeInTheDocument();
-
-			// Act.
-			fireEvent.mouseOver( screen.getByText( 'Integrations' ) ); // Opens the integrations menu.
-
-			// Assert.
-			expect( screen.getByText( 'Test' ) ).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: 3,
-			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

@@ -1,59 +0,0 @@
-import * as React from 'react';
-import { integrationsMenu } from '../../locations';
-import {
-	bindMenu,
-	Divider,
-	ListItemIcon,
-	ListItemText,
-	MenuItem,
-	usePopupState,
-	bindHover,
-	bindFocus,
-	withDirection,
-} from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-import { ChevronRightIcon, PlugIcon } from '@elementor/icons';
-import PopoverSubMenu from '../ui/popover-sub-menu';
-
-type Props = {
-	parentPopupState: ReturnType<typeof usePopupState>;
-}
-
-const { useMenuItems } = integrationsMenu;
-
-const DirectionalChevronIcon = withDirection( ChevronRightIcon );
-
-export default function IntegrationsMenuLocation( { parentPopupState }: Props ) {
-	const menuItems = useMenuItems();
-
-	const popupState = usePopupState( {
-		parentPopupState,
-		variant: 'popover',
-		popupId: 'elementor-v2-app-bar-integrations',
-	} );
-
-	if ( menuItems.default.length === 0 ) {
-		return null;
-	}
-
-	return (
-		<>
-			<Divider />
-			<MenuItem
-				{ ...bindHover( popupState ) }
-				{ ...bindFocus( popupState ) }
-			>
-				<ListItemIcon>
-					<PlugIcon />
-				</ListItemIcon>
-				<ListItemText primary={ __( 'Integrations', 'elementor' ) } />
-				<DirectionalChevronIcon />
-				<PopoverSubMenu { ...bindMenu( popupState ) } onClick={ popupState.close }>
-					{ menuItems.default.map(
-						( { MenuItem: IntegrationsMenuItem, id } ) => <IntegrationsMenuItem key={ id } />
-					) }
-				</PopoverSubMenu>
-			</MenuItem>
-		</>
-	);
-}

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

@@ -1,38 +0,0 @@
-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 IntegrationsMenuLocation from './integrations-menu-location';
-
-const { useMenuItems } = mainMenu;
-
-export default function MainMenuLocation() {
-	const menuItems = useMenuItems();
-
-	const popupState = usePopupState( {
-		variant: 'popover',
-		popupId: 'elementor-v2-app-bar-main-menu',
-	} );
-
-	return (
-		<Stack sx={ { paddingInlineStart: 3 } } direction="row" alignItems="center">
-			<ToolbarLogo
-				{ ...bindTrigger( popupState ) }
-				selected={ popupState.isOpen }
-			/>
-			<PopoverMenu
-				onClick={ popupState.close }
-				{ ...bindMenu( popupState ) }
-				marginThreshold={ 8 }
-			>
-				{ 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/locations/page-indication-location.tsx

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

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

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

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

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

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

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import { toolsMenu } from '../../locations';
-import ToolbarMenu from '../ui/toolbar-menu';
-import ToolbarMenuMore from '../ui/toolbar-menu-more';
-
-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 } /> ) }
-			{ 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

@@ -1,35 +0,0 @@
-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 = 3;
-
-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

@@ -1,44 +0,0 @@
-import * as React from 'react';
-import {
-	MenuItem,
-	MenuItemProps,
-	ListItemText,
-	ListItemIcon,
-	withDirection,
-} from '@elementor/ui';
-import { ArrowUpRightIcon } from '@elementor/icons';
-
-type ExtraProps = {
-	href?: string;
-	target?: string;
-	text?: string;
-	icon?: JSX.Element;
-}
-
-export type PopoverMenuItemProps = MenuItemProps & ExtraProps;
-
-const DirectionalArrowIcon = withDirection( ArrowUpRightIcon );
-
-export default function PopoverMenuItem( { text, icon, onClick, href, target, disabled, ...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 /> }
-		</MenuItem>
-	);
-}

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

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

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

@@ -1,29 +0,0 @@
-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

@@ -1,84 +0,0 @@
-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>
-	);
-}