@elementor/editor-app-bar 0.9.7 → 0.10.0

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

@@ -1,45 +0,0 @@
-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 }
-	/>;
-}

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

@@ -1,29 +0,0 @@
-import * as React from 'react';
-import { PropsWithChildren } from 'react';
-import { bindMenu, bindTrigger, usePopupState } from '@elementor/ui';
-import ToolbarMenuItem from './toolbar-menu-item';
-import { __ } from '@wordpress/i18n';
-import { DotsVerticalIcon } from '@elementor/icons';
-import PopoverMenu from './popover-menu';
-
-export type ToolbarMenuMoreProps = PropsWithChildren<{
-	id: string;
-}>
-
-export default function ToolbarMenuMore( { children, id }: ToolbarMenuMoreProps ) {
-	const popupState = usePopupState( {
-		variant: 'popover',
-		popupId: id,
-	} );
-
-	return (
-		<>
-			<ToolbarMenuItem { ...bindTrigger( popupState ) } title={ __( 'More', 'elementor' ) }>
-				<DotsVerticalIcon />
-			</ToolbarMenuItem>
-			<PopoverMenu onClick={ popupState.close } { ...bindMenu( popupState ) }>
-				{ children }
-			</PopoverMenu>
-		</>
-	);
-}

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

@@ -1,34 +0,0 @@
-import * as React from 'react';
-import { Box, ToggleButton, ToggleButtonProps, Tooltip } from '@elementor/ui';
-
-export type ToolbarMenuToggleItemProps = Omit<ToggleButtonProps, 'onChange'> & {
-	title?: string;
-	onClick?: () => void;
-}
-
-export default function ToolbarMenuToggleItem( { title, onClick, ...props }: ToolbarMenuToggleItemProps ) {
-	return (
-		<Tooltip title={ title }>
-			{ /* @see https://mui.com/material-ui/react-tooltip/#disabled-elements */ }
-			<Box component="span" aria-label={ undefined }>
-				<ToggleButton
-					{ ...props }
-					onChange={ onClick }
-					aria-label={ title }
-					size="small"
-					sx={ {
-						border: 0, // Temp fix until the style of the ToggleButton component will be decided.
-						'&.Mui-disabled': {
-							border: 0, // Temp fix until the style of the ToggleButton component will be decided.
-						},
-						'& svg': {
-							fontSize: '1.25rem',
-							height: '1em',
-							width: '1em',
-						},
-					} }
-				/>
-			</Box>
-		</Tooltip>
-	);
-}

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

@@ -1,15 +0,0 @@
-import * as React from 'react';
-import { Stack, StackProps } from '@elementor/ui';
-import { MenuContextProvider } from '../../contexts/menu-context';
-
-export type ToolbarMenuProps = StackProps;
-
-export default function ToolbarMenu( { children, ...props }: ToolbarMenuProps ) {
-	return (
-		<MenuContextProvider type={ 'toolbar' }>
-			<Stack sx={ { px: 1.5 } } spacing={ 1.5 } direction="row" alignItems="center" { ...props }>
-				{ children }
-			</Stack>
-		</MenuContextProvider>
-	);
-}

package/src/contexts/menu-context.tsx

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { createContext, PropsWithChildren, useContext } from 'react';
-
-type MenuContextValue = {
-	type: 'toolbar' | 'popover';
-}
-
-const MenuContext = createContext<MenuContextValue>( { type: 'toolbar' } );
-
-export function MenuContextProvider( { type, children }: PropsWithChildren<MenuContextValue> ) {
-	return (
-		<MenuContext.Provider value={ { type } }>
-			{ children }
-		</MenuContext.Provider>
-	);
-}
-
-export function useMenuContext() {
-	return useContext( MenuContext );
-}

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

@@ -1,212 +0,0 @@
-import * as React from 'react';
-import { createMenu } from '../menus';
-import { fireEvent, render, screen } from '@testing-library/react';
-import { createMockMenuAction, createMockMenuLink, createMockMenuToggleAction } from 'test-utils';
-
-describe( '@elementor/editor-app-bar - Menus API', () => {
-	it( 'should create a menu with default group when not provided', () => {
-		// Act.
-		const menu = createMenu();
-
-		menu.registerAction( createMockMenuAction() );
-
-		renderMenu( menu );
-
-		// Assert.
-		expect( screen.getByRole( 'button' ) ).toBeInTheDocument();
-	} );
-
-	it( 'should create a menu with groups and append a default group', () => {
-		// Act.
-		const menu = createMenu( [ 'testGroup' ] );
-
-		menu.registerAction( {
-			...createMockMenuAction(),
-			id: 'test',
-		} );
-
-		menu.registerLink( {
-			...createMockMenuLink(),
-			id: 'test1',
-			group: 'testGroup',
-		} );
-
-		renderMenu( menu );
-
-		// Assert.
-		expect( screen.getByRole( 'button' ) ).toBeInTheDocument();
-		expect( screen.getByRole( 'link' ) ).toBeInTheDocument();
-	} );
-
-	it( 'should register an action', () => {
-		// Arrange.
-		const onClick = jest.fn();
-
-		// Act.
-		const menu = createMenu();
-
-		menu.registerAction( createMockMenuAction( { onClick } ) );
-
-		renderMenu( menu );
-
-		// Assert.
-		const action = screen.getByRole( 'button' );
-
-		expect( action ).toBeInTheDocument();
-		expect( action ).toHaveAttribute( 'aria-label', 'Test' );
-
-		// Act.
-		fireEvent.click( action );
-
-		// Assert.
-		expect( onClick ).toHaveBeenCalled();
-	} );
-
-	it( 'should register a toggle action', () => {
-		// Act.
-		const menu = createMenu();
-
-		menu.registerToggleAction( createMockMenuToggleAction() );
-
-		renderMenu( menu );
-
-		// Assert.
-		const toggleAction = screen.getByRole( 'button' );
-
-		expect( toggleAction ).toHaveAttribute( 'aria-pressed', 'false' );
-		expect( toggleAction ).toHaveValue( 'test-value' );
-
-		// Act.
-		fireEvent.click( toggleAction );
-
-		// Assert.
-		expect( toggleAction ).toHaveAttribute( 'aria-pressed', 'true' );
-
-		// Act.
-		fireEvent.click( toggleAction );
-
-		// Assert.
-		expect( toggleAction ).toHaveAttribute( 'aria-pressed', 'false' );
-		expect( toggleAction ).toBeDisabled();
-	} );
-
-	it( 'should register a link', () => {
-		// Act.
-		const menu = createMenu();
-
-		menu.registerLink( createMockMenuLink() );
-
-		renderMenu( menu );
-
-		// Assert.
-		const link = screen.getByRole( 'link' );
-
-		expect( link ).toBeInTheDocument();
-		expect( link ).toHaveAttribute( 'href', 'https://elementor.com' );
-		expect( link ).toHaveAttribute( 'target', '_blank' );
-		expect( link ).toHaveAttribute( 'aria-label', 'Test' );
-	} );
-
-	it( 'should not register an action when passing a non-existing group', () => {
-		// Act.
-		const menu = createMenu();
-
-		menu.registerLink( {
-			...createMockMenuLink(),
-			group: 'non-existing-group' as 'default', // Emulate a runtime error.
-		} );
-
-		renderMenu( menu );
-
-		// Assert.
-		expect( screen.queryByRole( 'link' ) ).not.toBeInTheDocument();
-	} );
-
-	it( 'should register an action tooltip', async () => {
-		// Arrange.
-		const menu = createMenu();
-
-		// Act.
-		menu.registerAction( createMockMenuAction() );
-
-		// Assert.
-		renderMenu( menu );
-
-		const button = screen.getByLabelText( 'Test' );
-
-		expect( screen.queryByRole( 'tooltip' ) ).not.toBeInTheDocument();
-
-		// Act.
-		fireEvent.mouseOver(
-			button,
-			{ bubbles: true },
-		);
-
-		// Assert.
-		expect( await screen.findByRole( 'tooltip' ) ).toHaveTextContent( 'Test' );
-	} );
-
-	it( 'should register an action icon', () => {
-		// Arrange.
-		const menu = createMenu();
-
-		// Act.
-		menu.registerAction( createMockMenuAction() );
-
-		// Assert.
-		renderMenu( menu );
-
-		const icon = screen.queryByText( 'a' );
-
-		expect( icon ).toBeInTheDocument();
-		expect( icon ).toHaveTextContent( 'a' );
-	} );
-
-	it.each( [
-		{
-			type: 'action',
-			action: 'registerAction',
-		},
-		{
-			type: 'toggle action',
-			action: 'registerToggleAction',
-		},
-		{
-			type: 'link',
-			action: 'registerLink',
-		},
-	] as const )( 'should register a hidden $type', ( { type, action } ) => {
-		// Arrange.
-		const menu = createMenu();
-
-		// Act.
-		menu[ action ]( {
-			id: 'hidden',
-			useProps: () => ( {
-				title: `hidden-${ type }`,
-				icon: () => <div />,
-				visible: false,
-			} ),
-		} );
-
-		// Assert.
-		renderMenu( menu );
-
-		expect( screen.queryByLabelText( `hidden-${ type }` ) ).not.toBeInTheDocument();
-	} );
-} );
-
-function renderMenu<TGroup extends string>( menu: ReturnType<typeof createMenu<TGroup>> ) {
-	const MenuComponent = () => {
-		const groupedItems = menu.useMenuItems();
-		const allItems = Object.values( groupedItems ).flat();
-
-		return (
-			<div>
-				{ allItems.map( ( { MenuItem, id } ) => <MenuItem key={ id } /> ) }
-			</div>
-		);
-	};
-
-	return render( <MenuComponent /> );
-}

package/src/locations/index.ts

@@ -1,29 +0,0 @@
-import { createMenu } from './menus';
-import { createLocation } from '@elementor/locations';
-
-export { createMenu } from './menus';
-
-export const {
-	inject: injectIntoPageIndication,
-	Slot: PageIndicationSlot,
-} = createLocation();
-
-export const {
-	inject: injectIntoResponsive,
-	Slot: ResponsiveSlot,
-} = createLocation();
-
-export const {
-	inject: injectIntoPrimaryAction,
-	Slot: PrimaryActionSlot,
-} = createLocation();
-
-export const mainMenu = createMenu( [ 'exits' ] );
-
-export const toolsMenu = createMenu();
-
-export const utilitiesMenu = createMenu();
-
-export const integrationsMenu = createMenu();
-
-export const documentOptionsMenu = createMenu( [ 'save' ] );

package/src/locations/menus.tsx

@@ -1,129 +0,0 @@
-import * as React from 'react';
-import { ComponentPropsWithoutRef, ElementType, useMemo } from 'react';
-import { createLocation, Location } from '@elementor/locations';
-import Action from '../components/actions/action';
-import ToggleAction from '../components/actions/toggle-action';
-import Link from '../components/actions/link';
-
-type GroupName = string;
-
-type MenuGroup<TGroup extends GroupName> = TGroup | 'default';
-
-type GroupedItems<TGroup extends GroupName> = Record<MenuGroup<TGroup>, Array<{ id: string, MenuItem: ElementType }>>;
-
-type GroupLocationMap<TGroup extends GroupName> = Record<MenuGroup<TGroup>, Location>;
-
-type MenuItem<
-	TGroup extends GroupName,
-	TComponent extends ElementType,
-> = {
-	id: string,
-	group?: TGroup,
-	priority?: number,
-	overwrite?: boolean,
-} & (
-	{ props: ComponentPropsWithoutRef<TComponent>, useProps?: never } |
-	{ useProps: () => ComponentPropsWithoutRef<TComponent>, props?: never }
-)
-
-type MenuActions<TGroup extends GroupName> = {
-	registerAction: ( args: MenuItem<TGroup, typeof Action> ) => void,
-	registerToggleAction: ( args: MenuItem<TGroup, typeof ToggleAction> ) => void,
-	registerLink: ( args: MenuItem<TGroup, typeof Link> ) => void,
-	useMenuItems: () => GroupedItems<TGroup>,
-}
-
-export function createMenu<
-	TGroup extends GroupName = 'default'
->( groups: TGroup[] = [] ): MenuActions<MenuGroup<TGroup>> {
-	const menuGroups: MenuGroup<TGroup>[] = [
-		...groups,
-		'default' as const,
-	];
-
-	const locations = menuGroups.reduce(
-		( carry, group ) => ( {
-			...carry,
-			[ group ]: createLocation(),
-		} ),
-		{} as GroupLocationMap<TGroup>
-	);
-
-	const [
-		registerAction,
-		registerToggleAction,
-		registerLink,
-	] = [ Action, ToggleAction, Link ].map(
-		( Component ) => createRegisterMenuItem( {
-			locations,
-			menuGroups,
-			component: Component,
-		} )
-	);
-
-	const useMenuItems = createUseMenuItems( locations );
-
-	return {
-		registerAction,
-		registerToggleAction,
-		registerLink,
-		useMenuItems,
-	};
-}
-
-function createRegisterMenuItem<
-	TGroup extends GroupName,
-	TComponent extends ElementType,
->( { locations, menuGroups, component }: {
-	locations: GroupLocationMap<TGroup>
-	menuGroups: MenuGroup<TGroup>[],
-	component: TComponent,
-} ) {
-	return ( { group = 'default', id, overwrite, priority, ...args }: MenuItem<MenuGroup<TGroup>, TComponent> ) => {
-		if ( ! menuGroups.includes( group ) ) {
-			return;
-		}
-
-		const useProps = 'props' in args ? () => args.props : args.useProps;
-
-		const Component = component as ElementType;
-
-		const InjectedComponent = ( props: object ) => {
-			const componentProps = useProps();
-
-			return <Component { ...props } { ...componentProps } />;
-		};
-
-		locations[ group ].inject( {
-			id,
-			component: InjectedComponent,
-			options: {
-				priority,
-				overwrite,
-			},
-		} );
-	};
-}
-
-function createUseMenuItems<TGroup extends GroupName>( locations : GroupLocationMap<TGroup> ) {
-	return () => {
-		// Normalize the injections groups to an object with the groups as keys.
-		return useMemo( () => {
-			return Object.entries( locations ).reduce<GroupedItems<TGroup>>(
-				( carry, [ groupName, location ] ) => {
-					const items = location.getInjections()
-						.map( ( injection ) => ( {
-							id: injection.id,
-							MenuItem: injection.component,
-						} ) );
-
-					return {
-						...carry,
-						[ groupName ]: items,
-					};
-				},
-				{} as GroupedItems<TGroup>
-			);
-		}, [] );
-	};
-}

package/src/types.ts

@@ -1,3 +0,0 @@
-export type { Props as ActionProps } from './components/actions/action';
-export type { Props as ToggleActionProps } from './components/actions/toggle-action';
-export type { Props as LinkProps } from './components/actions/link';