@elementor/editor-app-bar 0.3.0 → 0.4.0

package/src/extensions/theme-builder/index.ts

@@ -3,7 +3,7 @@ import useThemeBuilderActionProps from './hooks/use-action-props';
 
 export function init() {
 	mainMenu.registerAction( {
-		name: 'open-theme-builder',
+		id: 'open-theme-builder',
 		useProps: useThemeBuilderActionProps,
 	} );
 }

package/src/extensions/user-preferences/index.ts

@@ -3,7 +3,7 @@ import useActionProps from './hooks/use-action-props';
 
 export function init() {
 	mainMenu.registerToggleAction( {
-		name: 'open-user-preferences',
+		id: 'open-user-preferences',
 		priority: 30, // After history.
 		useProps: useActionProps,
 	} );

package/src/extensions/wordpress/index.ts

@@ -5,7 +5,7 @@ import { useActiveDocument } from '@elementor/editor-documents';
 
 export function init() {
 	mainMenu.registerLink( {
-		name: 'exit-to-wordpress',
+		id: 'exit-to-wordpress',
 		group: 'exits',
 		useProps: () => {
 			const document = useActiveDocument();

package/src/init.ts

@@ -9,7 +9,7 @@ export default function init() {
 	initExtensions();
 
 	injectIntoTop( {
-		name: 'app-bar',
+		id: 'app-bar',
 		filler: AppBar,
 	} );
 }

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

@@ -6,9 +6,7 @@ import { createMockMenuAction, createMockMenuLink, createMockMenuToggleAction }
 describe( '@elementor/editor-app-bar - Menus API', () => {
 	it( 'should create a menu with default group when not provided', () => {
 		// Act.
-		const menu = createMenu( {
-			name: 'test',
-		} );
+		const menu = createMenu();
 
 		menu.registerAction( createMockMenuAction() );
 
@@ -20,15 +18,16 @@ describe( '@elementor/editor-app-bar - Menus API', () => {
 
 	it( 'should create a menu with groups and append a default group', () => {
 		// Act.
-		const menu = createMenu( {
-			name: 'test',
-			groups: [ 'testGroup' ],
-		} );
+		const menu = createMenu( [ 'testGroup' ] );
 
-		menu.registerAction( createMockMenuAction() );
+		menu.registerAction( {
+			...createMockMenuAction(),
+			id: 'test',
+		} );
 
 		menu.registerLink( {
 			...createMockMenuLink(),
+			id: 'test1',
 			group: 'testGroup',
 		} );
 
@@ -44,9 +43,7 @@ describe( '@elementor/editor-app-bar - Menus API', () => {
 		const onClick = jest.fn();
 
 		// Act.
-		const menu = createMenu( {
-			name: 'test',
-		} );
+		const menu = createMenu();
 
 		menu.registerAction( createMockMenuAction( { onClick } ) );
 
@@ -67,9 +64,7 @@ describe( '@elementor/editor-app-bar - Menus API', () => {
 
 	it( 'should register a toggle action', () => {
 		// Act.
-		const menu = createMenu( {
-			name: 'test',
-		} );
+		const menu = createMenu();
 
 		menu.registerToggleAction( createMockMenuToggleAction() );
 
@@ -97,9 +92,7 @@ describe( '@elementor/editor-app-bar - Menus API', () => {
 
 	it( 'should register a link', () => {
 		// Act.
-		const menu = createMenu( {
-			name: 'test',
-		} );
+		const menu = createMenu();
 
 		menu.registerLink( createMockMenuLink() );
 
@@ -116,9 +109,7 @@ describe( '@elementor/editor-app-bar - Menus API', () => {
 
 	it( 'should not register an action when passing a non-existing group', () => {
 		// Act.
-		const menu = createMenu( {
-			name: 'test',
-		} );
+		const menu = createMenu();
 
 		menu.registerLink( {
 			...createMockMenuLink(),
@@ -133,9 +124,7 @@ describe( '@elementor/editor-app-bar - Menus API', () => {
 
 	it( 'should register an action tooltip', async () => {
 		// Arrange.
-		const menu = createMenu( {
-			name: 'test',
-		} );
+		const menu = createMenu();
 
 		// Act.
 		menu.registerAction( createMockMenuAction() );
@@ -161,9 +150,7 @@ describe( '@elementor/editor-app-bar - Menus API', () => {
 
 	it( 'should register an action icon', () => {
 		// Arrange.
-		const menu = createMenu( {
-			name: 'test',
-		} );
+		const menu = createMenu();
 
 		// Act.
 		menu.registerAction( createMockMenuAction() );
@@ -192,13 +179,11 @@ describe( '@elementor/editor-app-bar - Menus API', () => {
 		},
 	] as const )( 'should register a hidden $type', ( { type, action } ) => {
 		// Arrange.
-		const menu = createMenu( {
-			name: 'test',
-		} );
+		const menu = createMenu();
 
 		// Act.
 		menu[ action ]( {
-			name: 'hidden',
+			id: 'hidden',
 			useProps: () => ( {
 				title: `hidden-${ type }`,
 				icon: () => <div />,

package/src/locations/index.ts

@@ -1,29 +1,27 @@
 import { createMenu } from './menus';
-import { createInjectorFor } from '@elementor/locations';
-import { LOCATION_PAGE_INDICATION, LOCATION_PRIMARY_ACTION, LOCATION_RESPONSIVE } from './consts';
-
-export * from './consts';
+import { createLocation } from '@elementor/locations';
 
 export { createMenu } from './menus';
 
-export const injectIntoPageIndication = createInjectorFor( LOCATION_PAGE_INDICATION );
-export const injectIntoResponsive = createInjectorFor( LOCATION_RESPONSIVE );
-export const injectIntoPrimaryAction = createInjectorFor( LOCATION_PRIMARY_ACTION );
+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( {
-	name: 'main',
-	groups: [ 'exits' ],
-} );
+export const mainMenu = createMenu( [ 'exits' ] );
 
-export const toolsMenu = createMenu( {
-	name: 'tools',
-} );
+export const toolsMenu = createMenu();
 
-export const utilitiesMenu = createMenu( {
-	name: 'utilities',
-} );
+export const utilitiesMenu = createMenu();
 
-export const documentOptionsMenu = createMenu( {
-	name: 'document-options',
-	groups: [ 'save' ],
-} );
+export const documentOptionsMenu = createMenu( [ 'save' ] );

package/src/locations/menus.tsx

@@ -1,29 +1,23 @@
 import * as React from 'react';
 import { ComponentPropsWithoutRef, ElementType, useMemo } from 'react';
-import { inject, useInjectionsOf } from '@elementor/locations';
+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 MenuName = string;
 type GroupName = string;
 
-type Menu<TGroup extends GroupName = 'default'> = {
-	name: MenuName,
-	groups: TGroup[],
-};
-
-type MenuWithOptionalGroups<TGroup extends GroupName> = Omit<Menu<TGroup>, 'groups'> & { groups?: TGroup[] };
-
 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,
 > = {
-	name: string,
+	id: string,
 	group?: TGroup,
 	priority?: number,
 	overwrite?: boolean,
@@ -32,34 +26,42 @@ type MenuItem<
 	{ useProps: () => ComponentPropsWithoutRef<TComponent>, props?: never }
 )
 
-export function createMenu<TGroup extends GroupName = 'default'>( { name: menuName, groups = [] }: MenuWithOptionalGroups<TGroup> ) {
+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 registerAction = createRegisterMenuItem( {
-		menuName,
-		menuGroups,
-		component: Action,
-	} );
-
-	const registerToggleAction = createRegisterMenuItem( {
-		menuName,
-		menuGroups,
-		component: ToggleAction,
-	} );
-
-	const registerLink = createRegisterMenuItem( {
-		menuName,
-		menuGroups,
-		component: Link,
-	} );
-
-	const useMenuItems = createUseMenuItems( {
-		menuName,
-		menuGroups,
-	} );
+	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,
@@ -70,15 +72,14 @@ export function createMenu<TGroup extends GroupName = 'default'>( { name: menuNa
 }
 
 function createRegisterMenuItem<
-	TMenuName extends MenuName,
 	TGroup extends GroupName,
 	TComponent extends ElementType,
->( { menuName, menuGroups, component }: {
-	menuName: TMenuName,
+>( { locations, menuGroups, component }: {
+	locations: GroupLocationMap<TGroup>
 	menuGroups: MenuGroup<TGroup>[],
 	component: TComponent,
 } ) {
-	return ( { group = 'default', name, overwrite, priority, ...args }: MenuItem<MenuGroup<TGroup>, TComponent> ) => {
+	return ( { group = 'default', id, overwrite, priority, ...args }: MenuItem<MenuGroup<TGroup>, TComponent> ) => {
 		if ( ! menuGroups.includes( group ) ) {
 			return;
 		}
@@ -93,11 +94,8 @@ function createRegisterMenuItem<
 			return <Component { ...props } { ...componentProps } />;
 		};
 
-		const location = getMenuLocationId( menuName, group );
-
-		inject( {
-			location,
-			name,
+		locations[ group ].inject( {
+			id,
 			filler: Filler,
 			options: {
 				priority,
@@ -107,35 +105,25 @@ function createRegisterMenuItem<
 	};
 }
 
-function createUseMenuItems<
-	TMenuName extends MenuName,
-	TGroup extends GroupName,
->( { menuName, menuGroups }: {
-	menuName: TMenuName,
-	menuGroups: MenuGroup<TGroup>[],
-} ) {
-	const locations = menuGroups.map( ( group ) => getMenuLocationId( menuName, group ) );
-
+function createUseMenuItems<TGroup extends GroupName>( locations : GroupLocationMap<TGroup> ) {
 	return () => {
-		const injectionsGroups = useInjectionsOf( locations );
-
 		// Normalize the injections groups to an object with the groups as keys.
 		return useMemo( () => {
-			return injectionsGroups.reduce<GroupedItems<TGroup>>( ( acc, injections, index ) => {
-				const groupName = menuGroups[ index ];
-
-				return {
-					...acc,
-					[ groupName ]: injections.map( ( injection ) => ( {
-						id: injection.id,
-						MenuItem: injection.filler,
-					} ) ),
-				};
-			}, {} as GroupedItems<TGroup> );
-		}, [ injectionsGroups ] );
+			return Object.entries( locations ).reduce<GroupedItems<TGroup>>(
+				( carry, [ groupName, location ] ) => {
+					const items = location.getInjections()
+						.map( ( injection ) => ( {
+							id: injection.id,
+							MenuItem: injection.filler,
+						} ) );
+
+					return {
+						...carry,
+						[ groupName ]: items,
+					};
+				},
+				{} as GroupedItems<TGroup>
+			);
+		}, [] );
 	};
 }
-
-function getMenuLocationId( menu: MenuName, group: GroupName ) {
-	return `editor/app-bar/${ menu }/${ group }` as const;
-}

package/src/locations/consts.ts

@@ -1,4 +0,0 @@
-// Locations
-export const LOCATION_PAGE_INDICATION = 'editor/app-bar/page-indication' as const;
-export const LOCATION_RESPONSIVE = 'editor/app-bar/responsive' as const;
-export const LOCATION_PRIMARY_ACTION = 'editor/app-bar/primary-action' as const;