@elementor/editor-app-bar 0.7.2 → 0.8.0

package/src/extensions/documents-indicator/components/settings-button.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { Box, ToggleButton, Tooltip } from '@elementor/ui';
+import { Box, ToggleButton, Tooltip as BaseTooltip, TooltipProps } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 import { openRoute, useRouteStatus } from '@elementor/editor-v1-adapters';
 import { SettingsIcon } from '@elementor/icons';
-import { useActiveDocument, useHostDocument } from '@elementor/editor-documents';
+import { __useActiveDocument, __useHostDocument } from '@elementor/editor-documents';
 
 export default function SettingsButton() {
-	const activeDocument = useActiveDocument();
-	const hostDocument = useHostDocument();
+	const activeDocument = __useActiveDocument();
+	const hostDocument = __useHostDocument();
 
 	const document = activeDocument && activeDocument.type.value !== 'kit'
 		? activeDocument
@@ -34,10 +34,29 @@ export default function SettingsButton() {
 					onChange={ () => openRoute( 'panel/page-settings/settings' ) }
 					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.
+						},
+					} }
 				>
-					<SettingsIcon />
+					<SettingsIcon fontSize="small" />
 				</ToggleButton>
 			</Box>
 		</Tooltip>
 	);
 }
+
+function Tooltip( props: TooltipProps ) {
+	return <BaseTooltip
+		PopperProps={ {
+			sx: {
+				'&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom': {
+					mt: 1.7,
+				},
+			},
+		} }
+		{ ...props }
+	/>;
+}

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

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

package/src/extensions/documents-preview/hooks/use-action-props.ts

@@ -1,10 +1,10 @@
 import { __ } from '@wordpress/i18n';
 import { EyeIcon } from '@elementor/icons';
 import { runCommand } from '@elementor/editor-v1-adapters';
-import { useActiveDocument } from '@elementor/editor-documents';
+import { __useActiveDocument } from '@elementor/editor-documents';
 
 export default function useActionProps() {
-	const document = useActiveDocument();
+	const document = __useActiveDocument();
 
 	return {
 		icon: EyeIcon,

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

@@ -3,9 +3,7 @@ import { render, screen } from '@testing-library/react';
 import PrimaryActionMenu from '../primary-action-menu';
 import { documentOptionsMenu } from '../../../../locations';
 
-jest.mock( '@elementor/editor-documents', () => ( {
-	useActiveDocument: jest.fn(),
-} ) );
+jest.mock( '@elementor/editor-documents' );
 
 describe( '@elementor/editor-app-bar - Primary action menu', () => {
 	it( 'should render the actions ordered properly (save, default)', () => {

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

@@ -2,11 +2,16 @@ 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, useActiveDocumentActions } from '@elementor/editor-documents';
+import { __useActiveDocument, __useActiveDocumentActions } from '@elementor/editor-documents';
+import { useIsPreviewMode } from '@elementor/editor-v1-adapters';
 
 jest.mock( '@elementor/editor-documents', () => ( {
-	useActiveDocument: jest.fn(),
-	useActiveDocumentActions: jest.fn(),
+	__useActiveDocument: jest.fn(),
+	__useActiveDocumentActions: jest.fn(),
+} ) );
+
+jest.mock( '@elementor/editor-v1-adapters', () => ( {
+	useIsPreviewMode: jest.fn(),
 } ) );
 
 const actionsMock = {
@@ -15,12 +20,19 @@ const actionsMock = {
 	saveTemplate: jest.fn(),
 };
 
-jest.mocked( useActiveDocumentActions ).mockReturnValue( actionsMock );
-
 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 );
+		jest.mocked( __useActiveDocument ).mockReturnValue( null );
 
 		// Act.
 		const { container } = render( <PrimaryAction /> );
@@ -37,7 +49,7 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
 			},
 		} );
 
-		jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
+		jest.mocked( __useActiveDocument ).mockReturnValue( mockDocument );
 
 		// Act.
 		render( <PrimaryAction /> );
@@ -54,7 +66,7 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
 			},
 		} );
 
-		jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
+		jest.mocked( __useActiveDocument ).mockReturnValue( mockDocument );
 
 		// Act.
 		render( <PrimaryAction /> );
@@ -73,7 +85,25 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
 			},
 		} );
 
-		jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
+		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 /> );
@@ -90,7 +120,7 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
 		// Arrange.
 		const mockDocument = createMockDocument( { isDirty: false } );
 
-		jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
+		jest.mocked( __useActiveDocument ).mockReturnValue( mockDocument );
 
 		// Act.
 		render( <PrimaryAction /> );
@@ -113,7 +143,7 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
 			},
 		} );
 
-		jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
+		jest.mocked( __useActiveDocument ).mockReturnValue( mockDocument );
 
 		// Act.
 		render( <PrimaryAction /> );
@@ -130,7 +160,7 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
 		// Arrange.
 		const mockDocument = createMockDocument( { isDirty: true } );
 
-		jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
+		jest.mocked( __useActiveDocument ).mockReturnValue( mockDocument );
 
 		// Act.
 		render( <PrimaryAction /> );
@@ -148,7 +178,7 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
 			isSaving: true,
 		} );
 
-		jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
+		jest.mocked( __useActiveDocument ).mockReturnValue( mockDocument );
 
 		// Act.
 		render( <PrimaryAction /> );
@@ -174,7 +204,7 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
 			isSaving: true,
 		} );
 
-		jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
+		jest.mocked( __useActiveDocument ).mockReturnValue( mockDocument );
 
 		// Act.
 		render( <PrimaryAction /> );

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

@@ -31,9 +31,9 @@ export default function PrimaryActionMenu( props: PopoverMenuProps ) {
 				vertical: 'top',
 				horizontal: 'right',
 			} }
-			marginThreshold={ 8 }
+			marginThreshold={ 4 }
 			PaperProps={ {
-				sx: { mt: 2 },
+				sx: { mt: 0.5 },
 			} }
 		>
 			{ saveActions.map( ( { MenuItem, id }, index ) => ( [

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

@@ -11,12 +11,14 @@ import {
 	Tooltip,
 	usePopupState,
 } from '@elementor/ui';
-import { Document, useActiveDocument, useActiveDocumentActions } from '@elementor/editor-documents';
+import { Document, __useActiveDocument, __useActiveDocumentActions } from '@elementor/editor-documents';
 import { ChevronDownIcon } from '@elementor/icons';
+import { useIsPreviewMode } from '@elementor/editor-v1-adapters';
 
 export default function PrimaryAction() {
-	const document = useActiveDocument();
-	const { save } = useActiveDocumentActions();
+	const document = __useActiveDocument();
+	const { save } = __useActiveDocumentActions();
+	const isPreviewMode = useIsPreviewMode();
 
 	const popupState = usePopupState( {
 		variant: 'popover',
@@ -27,28 +29,29 @@ export default function PrimaryAction() {
 		return null;
 	}
 
-	const isDisabled = ! isEnabled( document );
+	const isPublishDisabled = isPreviewMode || ! isPublishEnabled( document );
+	const isSaveOptionsDisabled = isPreviewMode || document.type.value === 'kit';
 
 	// When the document is being saved, the spinner should not appear.
 	// Usually happens when the Kit is being saved.
-	const shouldShowSpinner = document.isSaving && ! isDisabled;
+	const shouldShowSpinner = document.isSaving && ! isPublishDisabled;
 
 	return (
 		<>
-			<ButtonGroup size="medium" variant="contained">
+			<ButtonGroup size="large" variant="contained">
 				<Button
 					onClick={ () => ! document.isSaving && save() }
 					sx={ {
-						px: 7,
 						height: '100%',
+						borderRadius: 0,
 						maxWidth: '158px',
 						'&.MuiButtonBase-root.MuiButtonGroup-grouped': {
 							minWidth: '110px',
 						},
 					} }
-					disabled={ isDisabled }
+					disabled={ isPublishDisabled }
 				>
-					{ shouldShowSpinner ? <CircularProgress /> : getLabel( document ) }
+					{ shouldShowSpinner ? <CircularProgress color="inherit" size="1.5em" /> : getLabel( document ) }
 				</Button>
 
 				<Tooltip
@@ -56,17 +59,18 @@ export default function PrimaryAction() {
 					PopperProps={ {
 						sx: {
 							'&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom': {
-								mt: 3,
-								mr: 1,
+								mt: 1,
+								mr: 0.25,
 							},
 						},
 					} }
 				>
 					<Box component="span" aria-label={ undefined }>
 						<Button
+							size="small"
 							{ ...bindTrigger( popupState ) }
-							sx={ { px: 0, height: '100%' } }
-							disabled={ document.type.value === 'kit' }
+							sx={ { px: 0, height: '100%', borderRadius: 0 } }
+							disabled={ isSaveOptionsDisabled }
 							aria-label={ __( 'Save Options', 'elementor' ) }
 						>
 							<ChevronDownIcon />
@@ -85,7 +89,7 @@ function getLabel( document: Document ) {
 		: __( 'Submit', 'elementor' );
 }
 
-function isEnabled( document: Document ) {
+function isPublishEnabled( document: Document ) {
 	if ( document.type.value === 'kit' ) {
 		return false;
 	}

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

@@ -1,11 +1,11 @@
 import { createMockDocument } from 'test-utils';
 import { renderHook } from '@testing-library/react';
 import useDocumentSaveDraftProps from '../use-document-save-draft-props';
-import { useActiveDocument, useActiveDocumentActions } from '@elementor/editor-documents';
+import { __useActiveDocument, __useActiveDocumentActions } from '@elementor/editor-documents';
 
 jest.mock( '@elementor/editor-documents', () => ( {
-	useActiveDocument: jest.fn(),
-	useActiveDocumentActions: jest.fn(),
+	__useActiveDocument: jest.fn(),
+	__useActiveDocumentActions: jest.fn(),
 } ) );
 
 const documentActions = {
@@ -17,8 +17,8 @@ const documentActions = {
 describe( '@elementor/editor-app-bar - useDocumentSaveDraftProps', () => {
 	it( 'should save a draft of the current document', () => {
 		// Arrange.
-		jest.mocked( useActiveDocumentActions ).mockReturnValue( documentActions );
-		jest.mocked( useActiveDocument ).mockReturnValue( createMockDocument() );
+		jest.mocked( __useActiveDocumentActions ).mockReturnValue( documentActions );
+		jest.mocked( __useActiveDocument ).mockReturnValue( createMockDocument() );
 
 		// Act.
 		const { result } = renderHook( () => useDocumentSaveDraftProps() );
@@ -53,7 +53,7 @@ describe( '@elementor/editor-app-bar - useDocumentSaveDraftProps', () => {
 		},
 	] )( 'should be disabled when $condition', ( { document } ) => {
 		// Arrange.
-		jest.mocked( useActiveDocument ).mockReturnValue( document );
+		jest.mocked( __useActiveDocument ).mockReturnValue( document );
 
 		// Act.
 		const { result } = renderHook( () => useDocumentSaveDraftProps() );

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

@@ -1,9 +1,9 @@
 import { renderHook } from '@testing-library/react';
-import { useActiveDocumentActions } from '@elementor/editor-documents';
+import { __useActiveDocumentActions } from '@elementor/editor-documents';
 import useDocumentSaveTemplateProps from '../use-document-save-template-props';
 
 jest.mock( '@elementor/editor-documents', () => ( {
-	useActiveDocumentActions: jest.fn(),
+	__useActiveDocumentActions: jest.fn(),
 } ) );
 
 const documentActions = {
@@ -15,7 +15,7 @@ const documentActions = {
 describe( '@elementor/editor-app-bar - useDocumentSaveTemplateProps', () => {
 	it( 'should open the "save as template" modal', () => {
 		// Arrange.
-		jest.mocked( useActiveDocumentActions ).mockReturnValue( documentActions );
+		jest.mocked( __useActiveDocumentActions ).mockReturnValue( documentActions );
 
 		// Act.
 		const { result } = renderHook( () => useDocumentSaveTemplateProps() );

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

@@ -1,11 +1,11 @@
 import { __ } from '@wordpress/i18n';
 import { ActionProps } from '../../../types';
 import { FileReportIcon } from '@elementor/icons';
-import { useActiveDocument, useActiveDocumentActions } from '@elementor/editor-documents';
+import { __useActiveDocument, __useActiveDocumentActions } from '@elementor/editor-documents';
 
 export default function useDocumentSaveDraftProps(): ActionProps {
-	const document = useActiveDocument();
-	const { saveDraft } = useActiveDocumentActions();
+	const document = __useActiveDocument();
+	const { saveDraft } = __useActiveDocumentActions();
 
 	return {
 		icon: FileReportIcon,

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

@@ -1,10 +1,10 @@
 import { __ } from '@wordpress/i18n';
 import { ActionProps } from '../../../types';
 import { FolderIcon } from '@elementor/icons';
-import { useActiveDocumentActions } from '@elementor/editor-documents';
+import { __useActiveDocumentActions } from '@elementor/editor-documents';
 
 export default function useDocumentSaveTemplateProps(): ActionProps {
-	const { saveTemplate } = useActiveDocumentActions();
+	const { saveTemplate } = __useActiveDocumentActions();
 
 	return {
 		icon: FolderIcon,

package/src/extensions/finder/hooks/__tests__/use-action-props.test.ts

@@ -25,7 +25,6 @@ describe( '@elementor/editor-app-bar - useFinderActionProps', () => {
 		const { result } = renderHook( () => useActionProps() );
 
 		// Assert.
-		expect( result.current.selected ).toBe( true );
 		expect( result.current.disabled ).toBe( true );
 		expect( useRouteStatus ).toHaveBeenCalledTimes( 1 );
 		expect( useRouteStatus ).toHaveBeenCalledWith( 'finder', {

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

@@ -3,7 +3,7 @@ import { SearchIcon } from '@elementor/icons';
 import { runCommand, useRouteStatus } from '@elementor/editor-v1-adapters';
 
 export default function useActionProps() {
-	const { isActive, isBlocked } = useRouteStatus( 'finder', {
+	const { isBlocked } = useRouteStatus( 'finder', {
 		blockOnKitRoutes: false,
 		blockOnPreviewMode: false,
 	} );
@@ -12,7 +12,6 @@ export default function useActionProps() {
 		title: __( 'Finder', 'elementor' ),
 		icon: SearchIcon,
 		onClick: () => runCommand( 'finder/toggle' ),
-		selected: isActive,
 		disabled: isBlocked,
 	};
 }

package/src/extensions/finder/index.ts

@@ -2,7 +2,7 @@ import { utilitiesMenu } from '../../locations';
 import useActionProps from './hooks/use-action-props';
 
 export function init() {
-	utilitiesMenu.registerToggleAction( {
+	utilitiesMenu.registerAction( {
 		id: 'toggle-finder',
 		priority: 10, // Before help.
 		useProps: useActionProps,

package/src/extensions/site-settings/components/__tests__/portalled-primary-action.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { act, render, screen } from '@testing-library/react';
 import { isRouteActive } from '@elementor/editor-v1-adapters';
-import { useActiveDocument } from '@elementor/editor-documents';
+import { __useActiveDocument, __useActiveDocumentActions } from '@elementor/editor-documents';
 import PortalledPrimaryAction from '../portalled-primary-action';
 import { createMockDocument } from 'test-utils';
 
@@ -11,15 +11,19 @@ jest.mock( '@elementor/editor-v1-adapters', () => ( {
 } ) );
 
 jest.mock( '@elementor/editor-documents', () => ( {
-	useActiveDocument: jest.fn(),
-	useActiveDocumentActions: jest.fn( () => ( {
-		save: jest.fn(),
-	} ) ),
+	__useActiveDocument: jest.fn(),
+	__useActiveDocumentActions: jest.fn(),
 } ) );
 
 describe( '@elementor/editor-app-bar - Portalled primary action', () => {
 	beforeEach( () => {
-		jest.mocked( useActiveDocument ).mockImplementation( () => createMockDocument() );
+		jest.mocked( __useActiveDocument ).mockReturnValue( createMockDocument() );
+
+		jest.mocked( __useActiveDocumentActions ).mockReturnValue( {
+			save: jest.fn(),
+			saveDraft: jest.fn(),
+			saveTemplate: jest.fn(),
+		} );
 	} );
 
 	afterEach( () => {

package/src/extensions/site-settings/components/__tests__/primary-action.test.tsx

@@ -2,11 +2,11 @@ import * as React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import PrimaryAction from '../primary-action';
 import { createMockDocument } from 'test-utils';
-import { useActiveDocument, useActiveDocumentActions } from '@elementor/editor-documents';
+import { __useActiveDocument, __useActiveDocumentActions } from '@elementor/editor-documents';
 
 jest.mock( '@elementor/editor-documents', () => ( {
-	useActiveDocument: jest.fn(),
-	useActiveDocumentActions: jest.fn(),
+	__useActiveDocument: jest.fn(),
+	__useActiveDocumentActions: jest.fn(),
 } ) );
 
 describe( '@elementor/editor-app-bar - Primary action', () => {
@@ -15,17 +15,17 @@ describe( '@elementor/editor-app-bar - Primary action', () => {
 	beforeEach( () => {
 		saveFn = jest.fn( () => Promise.resolve() );
 
-		jest.mocked( useActiveDocument ).mockImplementation( () => createMockDocument() );
-		jest.mocked( useActiveDocumentActions ).mockImplementation( () => ( {
+		jest.mocked( __useActiveDocument ).mockReturnValue( createMockDocument() );
+		jest.mocked( __useActiveDocumentActions ).mockReturnValue( {
 			save: saveFn,
 			saveTemplate: jest.fn(),
 			saveDraft: jest.fn(),
-		} ) );
+		} );
 	} );
 
 	it( 'should save site settings on click', () => {
 		// Arrange.
-		jest.mocked( useActiveDocument ).mockImplementation( () => createMockDocument( { isDirty: true } ) );
+		jest.mocked( __useActiveDocument ).mockReturnValue( createMockDocument( { isDirty: true } ) );
 
 		render( <PrimaryAction /> );
 
@@ -51,7 +51,7 @@ describe( '@elementor/editor-app-bar - Primary action', () => {
 		},
 	] )( 'should not save site settings when $title', ( { document } ) => {
 		// Arrange.
-		jest.mocked( useActiveDocument ).mockImplementation( () => document );
+		jest.mocked( __useActiveDocument ).mockReturnValue( document );
 
 		render( <PrimaryAction /> );
 
@@ -73,7 +73,7 @@ describe( '@elementor/editor-app-bar - Primary action', () => {
 		},
 	] )( 'should be disabled when $title', ( { document } ) => {
 		// Arrange.
-		jest.mocked( useActiveDocument ).mockImplementation( () => document );
+		jest.mocked( __useActiveDocument ).mockReturnValue( document );
 
 		// Act.
 		render( <PrimaryAction /> );
@@ -84,7 +84,7 @@ describe( '@elementor/editor-app-bar - Primary action', () => {
 
 	it( 'should show a loader when saving site settings', () => {
 		// Arrange.
-		jest.mocked( useActiveDocument ).mockImplementation( () => createMockDocument( {
+		jest.mocked( __useActiveDocument ).mockReturnValue( createMockDocument( {
 			isDirty: true,
 			isSaving: true,
 		} ) );

package/src/extensions/site-settings/components/primary-action.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { useActiveDocument, useActiveDocumentActions } from '@elementor/editor-documents';
+import { __useActiveDocument, __useActiveDocumentActions } from '@elementor/editor-documents';
 import { Button, CircularProgress, Paper } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 export default function PrimaryAction() {
-	const document = useActiveDocument();
-	const { save } = useActiveDocumentActions();
+	const document = __useActiveDocument();
+	const { save } = __useActiveDocumentActions();
 
 	return (
 		<Paper sx={ {

package/src/extensions/wordpress/index.ts

@@ -1,14 +1,14 @@
 import { mainMenu } from '../../locations';
 import { __ } from '@wordpress/i18n';
 import { WordpressIcon } from '@elementor/icons';
-import { useActiveDocument } from '@elementor/editor-documents';
+import { __useActiveDocument } from '@elementor/editor-documents';
 
 export function init() {
 	mainMenu.registerLink( {
 		id: 'exit-to-wordpress',
 		group: 'exits',
 		useProps: () => {
-			const document = useActiveDocument();
+			const document = __useActiveDocument();
 
 			return {
 				title: __( 'Exit to WordPress', 'elementor' ),