@elementor/editor-app-bar 0.15.1 → 0.16.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.16.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-app-bar@0.15.1...@elementor/editor-app-bar@0.16.0) (2024-08-05)
+
+### Bug Fixes
+
+- publish only necessary files to npm ([#226](https://github.com/elementor/elementor-packages/issues/226)) ([d808e2f](https://github.com/elementor/elementor-packages/commit/d808e2f60eb7ca2d7b8560d0b79c0e62c2f969a8))
+
+### Features
+
+- **editor-editing-panel:** change textarea component [EDS-311] ([#221](https://github.com/elementor/elementor-packages/issues/221)) ([a9ab0d5](https://github.com/elementor/elementor-packages/commit/a9ab0d53e87086e323c4f024dca0eae93005e1a1))
+- **editor-editing-panel:** settings and style tabs [EDS-277] ([#217](https://github.com/elementor/elementor-packages/issues/217)) ([c623797](https://github.com/elementor/elementor-packages/commit/c6237974d9940a2b58bdd1df3d835dc828e323f4))
+
 ## [0.15.1](https://github.com/elementor/elementor-packages/compare/@elementor/editor-app-bar@0.15.0...@elementor/editor-app-bar@0.15.1) (2024-07-23)
 
 **Note:** Version bump only for package @elementor/editor-app-bar

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-app-bar",
   "description": "App Bar extension for @elementor/editor",
-  "version": "0.15.1",
+  "version": "0.16.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -19,7 +19,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/elementor/elementor-packages.git",
+    "url": "git+https://github.com/elementor/elementor-packages.git",
     "directory": "packages/core/editor-app-bar"
   },
   "bugs": {
@@ -28,22 +28,29 @@
   "publishConfig": {
     "access": "public"
   },
+  "files": [
+    "README.md",
+    "CHANGELOG.md",
+    "/dist",
+    "/src",
+    "!**/__tests__"
+  ],
   "scripts": {
     "build": "tsup --config=../../tsup.build.ts",
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "^0.11.2",
-    "@elementor/editor-documents": "^0.11.5",
-    "@elementor/editor-responsive": "^0.11.0",
-    "@elementor/editor-v1-adapters": "^0.8.0",
+    "@elementor/editor": "^0.12.0",
+    "@elementor/editor-documents": "^0.11.6",
+    "@elementor/editor-responsive": "^0.11.1",
+    "@elementor/editor-v1-adapters": "^0.8.1",
     "@elementor/icons": "^1.1.4",
-    "@elementor/locations": "^0.7.4",
-    "@elementor/ui": "^1.4.61",
+    "@elementor/locations": "^0.7.5",
+    "@elementor/ui": "^1.14.2",
     "@wordpress/i18n": "^4.45.0"
   },
   "peerDependencies": {
     "react": "^18.3.1"
   },
-  "gitHead": "0784373d42942edecbb0ab43e62e7caaefe92c3a"
+  "gitHead": "f4ca33da0842a29d83736d0a173633085edddaee"
 }

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

@@ -1,27 +0,0 @@
-import * as React from 'react';
-import { render, screen } from '@testing-library/react';
-import AppBar from '../app-bar';
-import { __createStore, SliceState, Store, __StoreProvider as Provider } from '@elementor/store';
-import { slice } from '@elementor/editor-documents';
-
-describe( 'AppBar component', () => {
-	let store: Store< SliceState< typeof slice > >;
-
-	beforeEach( () => {
-		store = __createStore();
-	} );
-
-	it( 'should render elementor logo', () => {
-		// Act.
-		render(
-			<Provider store={ store }>
-				<AppBar />
-			</Provider>
-		);
-
-		// Assert.
-		const logoTitle = screen.queryByText( 'Elementor Logo' );
-
-		expect( logoTitle ).toBeInTheDocument();
-	} );
-} );

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( '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,153 +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, createMockSubMenu } from 'test-utils';
-
-describe( '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 tools menu if there are registered integrations', () => {
-			integrationsMenu.registerAction( {
-				...createMockMenuAction(),
-			} );
-
-			render( <ToolsMenuLocation /> );
-
-			expect( screen.getByLabelText( 'Integrations' ) ).toBeInTheDocument();
-
-			fireEvent.click( screen.getByLabelText( 'Integrations' ) ); // Opens the integrations menu.
-
-			expect( screen.getByText( 'Test' ) ).toBeInTheDocument();
-		} );
-
-		it( 'should render groups and nested groups of actions', () => {
-			const subMenu = integrationsMenu.registerSubMenu( {
-				...createMockSubMenu(),
-			} );
-			subMenu.registerAction( {
-				...createMockMenuAction(),
-				id: 'sub-group-action',
-			} );
-			const subMenuSubGroup = subMenu.registerSubMenu( {
-				...createMockSubMenu( { title: 'Sub group' } ),
-			} );
-			subMenuSubGroup.registerAction( {
-				...createMockMenuAction( { title: 'Sub group action' } ),
-				id: 'sub-sub-group-action',
-			} );
-
-			// Act.
-			render( <ToolsMenuLocation /> );
-
-			// Assert.
-			expect( screen.getByLabelText( 'Integrations' ) ).toBeInTheDocument();
-
-			// Act.
-			fireEvent.click( screen.getByLabelText( 'Integrations' ) ); // Opens the integrations menu.
-
-			// Assert.
-			expect( screen.getByText( 'Test Group' ) ).toBeInTheDocument();
-
-			// Act.
-			fireEvent.mouseOver( screen.getByText( 'Test Group' ) ); // Opens the Test Group menu.
-
-			// Assert.
-			expect( screen.getByText( 'Sub group' ) ).toBeInTheDocument();
-
-			// Act.
-			fireEvent.mouseOver( screen.getByText( 'Sub group' ) ); // Opens the Sub group menu.
-
-			expect( screen.getByText( 'Sub group action' ) ).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: 4,
-			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/extensions/documents-indicator/components/__tests__/settings-button.test.tsx

@@ -1,57 +0,0 @@
-import * as React from 'react';
-import SettingsButton from '../settings-button';
-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';
-
-jest.mock( '@elementor/editor-v1-adapters', () => ( {
-	__privateOpenRoute: jest.fn(),
-	__privateUseRouteStatus: jest.fn( () => ( { isActive: false, isBlocked: false } ) ),
-} ) );
-
-jest.mock( '@elementor/editor-documents', () => ( {
-	__useActiveDocument: jest.fn(),
-	__useHostDocument: jest.fn(),
-} ) );
-
-describe( '@elementor/editor-app-bar - App bar document settings button', () => {
-	beforeEach( () => {
-		jest.mocked( useActiveDocument ).mockReturnValue(
-			createMockDocument( {
-				type: { value: 'wp-page', label: 'Page' },
-			} )
-		);
-	} );
-
-	it( 'should open the document settings panel on click', () => {
-		// Arrange.
-		render( <SettingsButton /> );
-
-		// Act.
-		fireEvent.click( screen.getByRole( 'button' ) );
-
-		// Assert.
-		expect( openRoute ).toHaveBeenCalledTimes( 1 );
-		expect( openRoute ).toHaveBeenCalledWith( 'panel/page-settings/settings' );
-	} );
-
-	it( 'should have the correct props for disabled and selected', () => {
-		// Arrange.
-		jest.mocked( useRouteStatus ).mockReturnValue( { isActive: true, isBlocked: true } );
-
-		// Act.
-		render( <SettingsButton /> );
-
-		// Assert.
-		const button = screen.getByRole( 'button' );
-
-		expect( button ).toBeDisabled();
-		expect( button ).toHaveAttribute( 'aria-pressed', 'true' );
-		expect( useRouteStatus ).toHaveBeenCalledTimes( 1 );
-		expect( useRouteStatus ).toHaveBeenCalledWith( 'panel/page-settings' );
-	} );
-} );

package/src/extensions/documents-preview/hooks/__tests__/use-document-preview-props.test.ts

@@ -1,43 +0,0 @@
-import { renderHook } from '@testing-library/react';
-import useActionProps from '../use-action-props';
-import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
-import { createMockDocument } from 'test-utils';
-import { __useActiveDocument as useActiveDocument } from '@elementor/editor-documents';
-
-jest.mock( '@elementor/editor-documents', () => ( {
-	__useActiveDocument: jest.fn(),
-} ) );
-
-jest.mock( '@elementor/editor-v1-adapters', () => ( {
-	__privateRunCommand: jest.fn(),
-} ) );
-
-describe( '@elementor/editor-app-bar - useDocumentPreviewProps', () => {
-	it( 'should open the document preview', () => {
-		// Arrange.
-		jest.mocked( useActiveDocument ).mockReturnValue( createMockDocument() );
-
-		const command = 'editor/documents/preview';
-		const args = { id: 1, force: true };
-
-		// Act.
-		const { result } = renderHook( () => useActionProps() );
-		result.current.onClick();
-
-		// Assert.
-		expect( runCommand ).toBeCalledTimes( 1 );
-		expect( runCommand ).toHaveBeenCalledWith( command, args );
-	} );
-
-	it( 'should not run the command when there is no document', () => {
-		// Arrange.
-		jest.mocked( useActiveDocument ).mockReturnValue( null );
-
-		// Act.
-		const { result } = renderHook( () => useActionProps() );
-		result.current.onClick();
-
-		// Assert.
-		expect( runCommand ).toBeCalledTimes( 0 );
-	} );
-} );

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

@@ -1,39 +0,0 @@
-import * as React from 'react';
-import { render, screen } from '@testing-library/react';
-import PrimaryActionMenu from '../primary-action-menu';
-import { documentOptionsMenu } from '../../locations';
-
-jest.mock( '@elementor/editor-documents' );
-
-describe( '@elementor/editor-app-bar - Primary action menu', () => {
-	it( 'should render the actions ordered properly (save, default)', () => {
-		// Arrange.
-		documentOptionsMenu.registerAction( {
-			id: 'test--first-action',
-			group: 'save',
-			props: {
-				title: 'First action',
-				icon: () => <span>a</span>,
-			},
-		} );
-
-		documentOptionsMenu.registerAction( {
-			id: 'test--second-action',
-			group: 'default',
-			props: {
-				title: 'Second action',
-				icon: () => <span>a</span>,
-			},
-		} );
-
-		// Act.
-		render( <PrimaryActionMenu open={ true } anchorEl={ document.body } /> );
-
-		// Assert.
-		const menuItems = screen.getAllByRole( 'menuitem' );
-
-		expect( menuItems ).toHaveLength( 2 );
-		expect( menuItems[ 0 ] ).toHaveTextContent( 'First action' );
-		expect( menuItems[ 1 ] ).toHaveTextContent( 'Second action' );
-	} );
-} );

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

@@ -1,222 +0,0 @@
-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 { __privateUseIsPreviewMode as useIsPreviewMode } from '@elementor/editor-v1-adapters';
-
-jest.mock( '@elementor/editor-documents', () => ( {
-	__useActiveDocument: jest.fn(),
-	__useActiveDocumentActions: jest.fn(),
-} ) );
-
-jest.mock( '@elementor/editor-v1-adapters', () => ( {
-	__privateUseIsPreviewMode: jest.fn(),
-} ) );
-
-const actionsMock = {
-	save: jest.fn(),
-	saveDraft: jest.fn(),
-	saveTemplate: jest.fn(),
-	copyAndShare: jest.fn(),
-};
-
-describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
-	beforeEach( () => {
-		jest.mocked( useActiveDocumentActions ).mockReturnValue( actionsMock );
-		jest.mocked( useIsPreviewMode ).mockReturnValue( false );
-	} );
-
-	afterEach( () => {
-		jest.clearAllMocks();
-	} );
-
-	it( 'should not render when there is no active document', () => {
-		// Arrange.
-		jest.mocked( useActiveDocument ).mockReturnValue( null );
-
-		// Act.
-		const { container } = render( <PrimaryAction /> );
-
-		// Assert.
-		expect( container ).toBeEmptyDOMElement();
-	} );
-
-	it( 'should have "Submit" text when the user cannot publish the document', () => {
-		// Arrange.
-		const mockDocument = createMockDocument( {
-			userCan: {
-				publish: false,
-			},
-		} );
-
-		jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
-
-		// Act.
-		render( <PrimaryAction /> );
-
-		// Assert.
-		expect( screen.getAllByRole( 'button' )[ 0 ] ).toHaveTextContent( 'Submit' );
-	} );
-
-	it( 'should have "Publish" text when the user can publish the document', () => {
-		// Arrange.
-		const mockDocument = createMockDocument( {
-			userCan: {
-				publish: true,
-			},
-		} );
-
-		jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
-
-		// Act.
-		render( <PrimaryAction /> );
-
-		// Assert.
-		expect( screen.getAllByRole( 'button' )[ 0 ] ).toHaveTextContent( 'Publish' );
-	} );
-
-	it( 'should disable main and the menu buttons when the document is a Kit', () => {
-		// Arrange.
-		const mockDocument = createMockDocument( {
-			isDirty: true,
-			type: {
-				value: 'kit',
-				label: 'Kit',
-			},
-		} );
-
-		jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
-
-		// Act.
-		render( <PrimaryAction /> );
-
-		// Assert.
-		const mainButton = screen.getByText( 'Publish' );
-		const menuButton = screen.getByLabelText( 'Save Options' );
-
-		expect( mainButton ).toBeDisabled();
-		expect( menuButton ).toBeDisabled();
-	} );
-
-	it( 'should disable main and the menu buttons when in preview mode', () => {
-		// Arrange.
-		const mockDocument = createMockDocument();
-
-		jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
-		jest.mocked( useIsPreviewMode ).mockReturnValue( true );
-
-		// Act.
-		render( <PrimaryAction /> );
-
-		// Assert.
-		const mainButton = screen.getByText( 'Publish' );
-		const menuButton = screen.getByLabelText( 'Save Options' );
-
-		expect( mainButton ).toBeDisabled();
-		expect( menuButton ).toBeDisabled();
-	} );
-
-	it( 'should disable only the main button when the document is pristine', () => {
-		// Arrange.
-		const mockDocument = createMockDocument( { isDirty: false } );
-
-		jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
-
-		// Act.
-		render( <PrimaryAction /> );
-
-		// Assert.
-		const mainButton = screen.getByText( 'Publish' );
-		const menuButton = screen.getByLabelText( 'Save Options' );
-
-		expect( mainButton ).toBeDisabled();
-		expect( menuButton ).toBeEnabled();
-	} );
-
-	it( 'should always enable main and menu buttons when the document status is draft', () => {
-		// Arrange.
-		const mockDocument = createMockDocument( {
-			isDirty: false,
-			status: {
-				value: 'draft',
-				label: 'Draft',
-			},
-		} );
-
-		jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
-
-		// Act.
-		render( <PrimaryAction /> );
-
-		// Assert.
-		const mainButton = screen.getByText( 'Publish' );
-		const menuButton = screen.getByLabelText( 'Save Options' );
-
-		expect( mainButton ).toBeEnabled();
-		expect( menuButton ).toBeEnabled();
-	} );
-
-	it( 'should save the active document on click', () => {
-		// Arrange.
-		const mockDocument = createMockDocument( { isDirty: true } );
-
-		jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
-
-		// Act.
-		render( <PrimaryAction /> );
-
-		fireEvent.click( screen.getAllByRole( 'button' )[ 0 ] );
-
-		// Assert.
-		expect( actionsMock.save ).toHaveBeenCalledTimes( 1 );
-	} );
-
-	it( 'should show a loader & not save when there is save in progress', () => {
-		// Arrange.
-		const mockDocument = createMockDocument( {
-			isDirty: true,
-			isSaving: true,
-		} );
-
-		jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
-
-		// Act.
-		render( <PrimaryAction /> );
-
-		const button = screen.getAllByRole( 'button' )[ 0 ];
-		const loader = screen.getAllByRole( 'progressbar' )[ 0 ];
-
-		fireEvent.click( button );
-
-		// Assert.
-		expect( actionsMock.save ).not.toHaveBeenCalled();
-		expect( loader ).toBeInTheDocument();
-		expect( button ).toHaveTextContent( '' );
-	} );
-
-	it( 'should not show a loader when the button is disabled', () => {
-		// Arrange.
-		const mockDocument = createMockDocument( {
-			type: {
-				value: 'kit',
-				label: 'Kit',
-			}, // Disables the button.
-			isSaving: true,
-		} );
-
-		jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
-
-		// Act.
-		render( <PrimaryAction /> );
-		const button = screen.getAllByRole( 'button' )[ 0 ];
-		const loader = screen.queryByRole( 'progressbar' );
-
-		// Assert.
-		expect( loader ).not.toBeInTheDocument();
-		expect( button ).not.toHaveTextContent( '' );
-	} );
-} );