@elementor/editor-app-bar 0.14.0 → 0.14.2

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

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

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

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { createContext, PropsWithChildren, useContext } from 'react';
+import { PopupState } from '@elementor/ui';
+
+type MenuContextValue = {
+	type: 'toolbar' | 'popover';
+	popupState?: PopupState;
+}
+
+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 useMenuContext() {
+	return useContext( MenuContext );
+}

package/src/extensions/documents-indicator/index.ts

@@ -1,4 +1,4 @@
-import { __privateInjectIntoPageIndication as injectIntoPageIndication } from '@elementor/editor-app-bar-ui';
+import { injectIntoPageIndication } from '../../locations';
 import SettingsButton from './components/settings-button';
 
 export function init() {

package/src/extensions/documents-preview/index.ts

@@ -1,4 +1,4 @@
-import { __privateUtilitiesMenu as utilitiesMenu } from '@elementor/editor-app-bar-ui';
+import { utilitiesMenu } from '../../locations';
 import useDocumentPreviewProps from './hooks/use-action-props';
 
 export function init() {

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Divider, styled } from '@elementor/ui';
-import { __privatePopoverMenu as PopoverMenu, PopoverMenuProps } from '@elementor/editor-app-bar-ui';
+import { default as PopoverMenu, PopoverMenuProps } from '../../../components/ui/popover-menu';
 import { documentOptionsMenu } from '../locations';
 
 const { useMenuItems } = documentOptionsMenu;

package/src/extensions/documents-save/hooks/use-document-copy-and-share-props.ts

@@ -1,5 +1,5 @@
 import { __ } from '@wordpress/i18n';
-import { ActionProps } from '@elementor/editor-app-bar-ui';
+import { ActionProps } from '../../../types';
 import { LinkIcon } from '@elementor/icons';
 import { __useActiveDocument as useActiveDocument, __useActiveDocumentActions as useActiveDocumentActions } from '@elementor/editor-documents';
 

package/src/extensions/documents-save/hooks/use-document-save-draft-props.ts

@@ -1,5 +1,5 @@
 import { __ } from '@wordpress/i18n';
-import { ActionProps } from '@elementor/editor-app-bar-ui';
+import { ActionProps } from '../../../types';
 import { FileReportIcon } from '@elementor/icons';
 import { __useActiveDocument as useActiveDocument, __useActiveDocumentActions as useActiveDocumentActions } from '@elementor/editor-documents';
 

package/src/extensions/documents-save/hooks/use-document-save-template-props.ts

@@ -1,5 +1,5 @@
 import { __ } from '@wordpress/i18n';
-import { ActionProps } from '@elementor/editor-app-bar-ui';
+import { ActionProps } from '../../../types';
 import { FolderIcon } from '@elementor/icons';
 import { __useActiveDocumentActions as useActiveDocumentActions } from '@elementor/editor-documents';
 

package/src/extensions/documents-save/index.ts

@@ -1,4 +1,4 @@
-import { __privateInjectIntoPrimaryAction as injectIntoPrimaryAction } from '@elementor/editor-app-bar-ui';
+import { injectIntoPrimaryAction } from '../../locations';
 import useDocumentSaveDraftProps from './hooks/use-document-save-draft-props';
 import useDocumentSaveTemplateProps from './hooks/use-document-save-template-props';
 import useDocumentViewPageProps from './hooks/use-document-view-page-props';

package/src/extensions/documents-save/locations.ts

@@ -1,3 +1,3 @@
-import { __privateCreateMenu as createMenu } from '@elementor/editor-app-bar-ui';
+import { createMenu } from '../../locations';
 
 export const documentOptionsMenu = createMenu( [ 'save' ] );

package/src/extensions/elements/index.ts

@@ -1,5 +1,5 @@
 import syncPanelTitle from './sync/sync-panel-title';
-import { __privateToolsMenu as toolsMenu } from '@elementor/editor-app-bar-ui';
+import { toolsMenu } from '../../locations';
 import useActionProps from './hooks/use-action-props';
 
 export function init() {

package/src/extensions/finder/index.ts

@@ -1,4 +1,4 @@
-import { __privateUtilitiesMenu as utilitiesMenu } from '@elementor/editor-app-bar-ui';
+import { utilitiesMenu } from '../../locations';
 import useActionProps from './hooks/use-action-props';
 
 export function init() {

package/src/extensions/help/index.ts

@@ -1,4 +1,4 @@
-import { __privateUtilitiesMenu as utilitiesMenu } from '@elementor/editor-app-bar-ui';
+import { utilitiesMenu } from '../../locations';
 import { __ } from '@wordpress/i18n';
 import { HelpIcon } from '@elementor/icons';
 import { ExtendedWindow } from '../../types';

package/src/extensions/history/index.ts

@@ -1,4 +1,4 @@
-import { __privateMainMenu as mainMenu } from '@elementor/editor-app-bar-ui';
+import { mainMenu } from '../../locations';
 import useActionProps from './hooks/use-action-props';
 
 export function init() {

package/src/extensions/keyboard-shortcuts/hooks/use-action-props.ts

@@ -1,8 +1,7 @@
 import { __ } from '@wordpress/i18n';
-import { ActionProps } from '@elementor/editor-app-bar-ui';
 import { KeyboardIcon } from '@elementor/icons';
 import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
-import { ExtendedWindow } from '../../../types';
+import { ExtendedWindow, ActionProps } from '../../../types';
 
 export default function useActionProps(): ActionProps {
 	return {

package/src/extensions/keyboard-shortcuts/index.ts

@@ -1,4 +1,4 @@
-import { __privateMainMenu as mainMenu } from '@elementor/editor-app-bar-ui';
+import { mainMenu } from '../../locations';
 import useActionProps from './hooks/use-action-props';
 
 export function init() {

package/src/extensions/site-settings/hooks/use-action-props.ts

@@ -1,8 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import { __privateRunCommand as runCommand, __privateUseRouteStatus as useRouteStatus } from '@elementor/editor-v1-adapters';
-import { ToggleActionProps } from '@elementor/editor-app-bar-ui';
 import { AdjustmentsHorizontalIcon } from '@elementor/icons';
-import { ExtendedWindow } from '../../../types';
+import { ExtendedWindow, ToggleActionProps } from '../../../types';
 
 export default function useActionProps(): ToggleActionProps {
 	const { isActive, isBlocked } = useRouteStatus( 'panel/global', {

package/src/extensions/site-settings/index.ts

@@ -1,6 +1,6 @@
 import { injectIntoTop } from '@elementor/editor';
 import PortalledPrimaryAction from './components/portalled-primary-action';
-import { __privateToolsMenu as toolsMenu } from '@elementor/editor-app-bar-ui';
+import { toolsMenu } from '../../locations';
 import useActionProps from './hooks/use-action-props';
 
 export function init() {

package/src/extensions/structure/hooks/use-action-props.ts

@@ -1,8 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import { __privateRunCommand as runCommand, __privateUseRouteStatus as useRouteStatus } from '@elementor/editor-v1-adapters';
 import { StructureIcon } from '@elementor/icons';
-import { ToggleActionProps } from '@elementor/editor-app-bar-ui';
-import { ExtendedWindow } from '../../../types';
+import { ExtendedWindow, ToggleActionProps } from '../../../types';
 
 export default function useActionProps(): ToggleActionProps {
 	const { isActive, isBlocked } = useRouteStatus( 'navigator' );

package/src/extensions/structure/index.ts

@@ -1,4 +1,4 @@
-import { __privateToolsMenu as toolsMenu } from '@elementor/editor-app-bar-ui';
+import { toolsMenu } from '../../locations';
 import useActionProps from './hooks/use-action-props';
 
 export function init() {

package/src/extensions/theme-builder/hooks/use-action-props.ts

@@ -1,8 +1,7 @@
 import { __ } from '@wordpress/i18n';
 import { ThemeBuilderIcon } from '@elementor/icons';
 import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
-import { ActionProps } from '@elementor/editor-app-bar-ui';
-import { ExtendedWindow } from '../../../types';
+import { ExtendedWindow, ActionProps } from '../../../types';
 
 export default function useActionProps(): ActionProps {
 	return {

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

@@ -1,4 +1,4 @@
-import { __privateMainMenu as mainMenu } from '@elementor/editor-app-bar-ui';
+import { mainMenu } from '../../locations';
 import useThemeBuilderActionProps from './hooks/use-action-props';
 
 export function init() {

package/src/extensions/user-preferences/hooks/use-action-props.ts

@@ -1,8 +1,7 @@
 import { __ } from '@wordpress/i18n';
-import { ToggleActionProps } from '@elementor/editor-app-bar-ui';
 import { ToggleRightIcon } from '@elementor/icons';
 import { __privateOpenRoute as openRoute, __privateUseRouteStatus as useRouteStatus } from '@elementor/editor-v1-adapters';
-import { ExtendedWindow } from '../../../types';
+import { ExtendedWindow, ToggleActionProps } from '../../../types';
 
 export default function useActionProps(): ToggleActionProps {
 	const { isActive, isBlocked } = useRouteStatus( 'panel/editor-preferences' );

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

@@ -1,4 +1,4 @@
-import { __privateMainMenu as mainMenu } from '@elementor/editor-app-bar-ui';
+import { mainMenu } from '../../locations';
 import useActionProps from './hooks/use-action-props';
 
 export function init() {

package/src/extensions/wordpress/index.ts

@@ -1,4 +1,4 @@
-import { __privateMainMenu as mainMenu } from '@elementor/editor-app-bar-ui';
+import { mainMenu } from '../../locations';
 import { __ } from '@wordpress/i18n';
 import { WordpressIcon } from '@elementor/icons';
 import { __useActiveDocument as useActiveDocument } from '@elementor/editor-documents';

package/src/index.ts

@@ -1,17 +1,21 @@
-// Re-exporting the menus & locations from `@elementor/editor-app-bar-ui`
-// to expose the API for other packages to use.
 export {
-	__privateMainMenu as mainMenu,
-	__privateToolsMenu as toolsMenu,
-	__privateUtilitiesMenu as utilitiesMenu,
-	__privateIntegrationsMenu as integrationsMenu,
-	__privateInjectIntoPageIndication as injectIntoPageIndication,
-	__privateInjectIntoResponsive as injectIntoResponsive,
-	__privateInjectIntoPrimaryAction as injectIntoPrimaryAction,
-} from '@elementor/editor-app-bar-ui';
+	mainMenu,
+	toolsMenu,
+	utilitiesMenu,
+	integrationsMenu,
+	injectIntoPageIndication,
+	injectIntoResponsive,
+	injectIntoPrimaryAction,
+} from './locations';
 
 export { documentOptionsMenu } from './extensions/documents-save/locations';
 
+export type {
+	ActionProps,
+	LinkProps,
+	ToggleActionProps,
+} from './types';
+
 import init from './init';
 
 init();

package/src/init.ts

@@ -1,4 +1,4 @@
-import { __privateAppBar as AppBar } from '@elementor/editor-app-bar-ui';
+import AppBar from './components/app-bar';
 import { injectIntoTop } from '@elementor/editor';
 import redirectOldMenus from './sync/redirect-old-menus';
 import { init as initExtensions } from './extensions';

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

@@ -0,0 +1,212 @@
+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( '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

@@ -0,0 +1,27 @@
+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();