@elementor/editor-app-bar 0.7.3 → 0.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/index.js +122 -37
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +130 -45
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +5 -5
  7. package/src/components/__tests__/top-bar.test.tsx +2 -0
  8. package/src/components/app-bar.tsx +1 -1
  9. package/src/components/ui/popover-menu-item.tsx +5 -0
  10. package/src/components/ui/popover-menu.tsx +1 -1
  11. package/src/components/ui/toolbar-logo.tsx +10 -6
  12. package/src/components/ui/toolbar-menu-item.tsx +27 -2
  13. package/src/components/ui/toolbar-menu-toggle-item.tsx +15 -1
  14. package/src/components/ui/toolbar-menu.tsx +1 -1
  15. package/src/extensions/documents-indicator/components/__tests__/settings-button.test.tsx +10 -4
  16. package/src/extensions/documents-indicator/components/settings-button.tsx +24 -5
  17. package/src/extensions/documents-preview/hooks/__tests__/use-document-preview-props.test.ts +4 -4
  18. package/src/extensions/documents-preview/hooks/use-action-props.ts +2 -2
  19. package/src/extensions/documents-save/components/__tests__/primary-action-menu.test.tsx +1 -3
  20. package/src/extensions/documents-save/components/__tests__/primary-action.test.tsx +14 -15
  21. package/src/extensions/documents-save/components/primary-action-menu.tsx +2 -2
  22. package/src/extensions/documents-save/components/primary-action.tsx +10 -9
  23. package/src/extensions/documents-save/hooks/__tests__/use-document-save-draft-props.test.ts +6 -6
  24. package/src/extensions/documents-save/hooks/__tests__/use-document-save-template-props.test.ts +3 -3
  25. package/src/extensions/documents-save/hooks/use-document-save-draft-props.ts +3 -3
  26. package/src/extensions/documents-save/hooks/use-document-save-template-props.ts +2 -2
  27. package/src/extensions/finder/hooks/__tests__/use-action-props.test.ts +0 -1
  28. package/src/extensions/finder/hooks/use-action-props.ts +1 -2
  29. package/src/extensions/finder/index.ts +1 -1
  30. package/src/extensions/site-settings/components/__tests__/portalled-primary-action.test.tsx +10 -6
  31. package/src/extensions/site-settings/components/__tests__/primary-action.test.tsx +10 -10
  32. package/src/extensions/site-settings/components/primary-action.tsx +3 -3
  33. package/src/extensions/wordpress/index.ts +2 -2
@@ -1,13 +1,13 @@
1
1
  import * as React from 'react';
2
- import { Box, ToggleButton, Tooltip } from '@elementor/ui';
2
+ import { Box, ToggleButton, Tooltip as BaseTooltip, TooltipProps } from '@elementor/ui';
3
3
  import { __ } from '@wordpress/i18n';
4
4
  import { openRoute, useRouteStatus } from '@elementor/editor-v1-adapters';
5
5
  import { SettingsIcon } from '@elementor/icons';
6
- import { useActiveDocument, useHostDocument } from '@elementor/editor-documents';
6
+ import { __useActiveDocument, __useHostDocument } from '@elementor/editor-documents';
7
7
 
8
8
  export default function SettingsButton() {
9
- const activeDocument = useActiveDocument();
10
- const hostDocument = useHostDocument();
9
+ const activeDocument = __useActiveDocument();
10
+ const hostDocument = __useHostDocument();
11
11
 
12
12
  const document = activeDocument && activeDocument.type.value !== 'kit'
13
13
  ? activeDocument
@@ -34,10 +34,29 @@ export default function SettingsButton() {
34
34
  onChange={ () => openRoute( 'panel/page-settings/settings' ) }
35
35
  aria-label={ title }
36
36
  size="small"
37
+ sx={ {
38
+ border: 0, // Temp fix until the style of the ToggleButton component will be decided.
39
+ '&.Mui-disabled': {
40
+ border: 0, // Temp fix until the style of the ToggleButton component will be decided.
41
+ },
42
+ } }
37
43
  >
38
- <SettingsIcon />
44
+ <SettingsIcon fontSize="small" />
39
45
  </ToggleButton>
40
46
  </Box>
41
47
  </Tooltip>
42
48
  );
43
49
  }
50
+
51
+ function Tooltip( props: TooltipProps ) {
52
+ return <BaseTooltip
53
+ PopperProps={ {
54
+ sx: {
55
+ '&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom': {
56
+ mt: 1.7,
57
+ },
58
+ },
59
+ } }
60
+ { ...props }
61
+ />;
62
+ }
@@ -2,10 +2,10 @@ import { renderHook } from '@testing-library/react';
2
2
  import useActionProps from '../use-action-props';
3
3
  import { runCommand } from '@elementor/editor-v1-adapters';
4
4
  import { createMockDocument } from 'test-utils';
5
- import { useActiveDocument } from '@elementor/editor-documents';
5
+ import { __useActiveDocument } from '@elementor/editor-documents';
6
6
 
7
7
  jest.mock( '@elementor/editor-documents', () => ( {
8
- useActiveDocument: jest.fn(),
8
+ __useActiveDocument: jest.fn(),
9
9
  } ) );
10
10
 
11
11
  jest.mock( '@elementor/editor-v1-adapters', () => ( {
@@ -15,7 +15,7 @@ jest.mock( '@elementor/editor-v1-adapters', () => ( {
15
15
  describe( '@elementor/editor-app-bar - useDocumentPreviewProps', () => {
16
16
  it( 'should open the document preview', () => {
17
17
  // Arrange.
18
- jest.mocked( useActiveDocument ).mockReturnValue( createMockDocument() );
18
+ jest.mocked( __useActiveDocument ).mockReturnValue( createMockDocument() );
19
19
 
20
20
  const command = 'editor/documents/preview';
21
21
  const args = { id: 1, force: true };
@@ -31,7 +31,7 @@ describe( '@elementor/editor-app-bar - useDocumentPreviewProps', () => {
31
31
 
32
32
  it( 'should not run the command when there is no document', () => {
33
33
  // Arrange.
34
- jest.mocked( useActiveDocument ).mockReturnValue( null );
34
+ jest.mocked( __useActiveDocument ).mockReturnValue( null );
35
35
 
36
36
  // Act.
37
37
  const { result } = renderHook( () => useActionProps() );
@@ -1,10 +1,10 @@
1
1
  import { __ } from '@wordpress/i18n';
2
2
  import { EyeIcon } from '@elementor/icons';
3
3
  import { runCommand } from '@elementor/editor-v1-adapters';
4
- import { useActiveDocument } from '@elementor/editor-documents';
4
+ import { __useActiveDocument } from '@elementor/editor-documents';
5
5
 
6
6
  export default function useActionProps() {
7
- const document = useActiveDocument();
7
+ const document = __useActiveDocument();
8
8
 
9
9
  return {
10
10
  icon: EyeIcon,
@@ -3,9 +3,7 @@ import { render, screen } from '@testing-library/react';
3
3
  import PrimaryActionMenu from '../primary-action-menu';
4
4
  import { documentOptionsMenu } from '../../../../locations';
5
5
 
6
- jest.mock( '@elementor/editor-documents', () => ( {
7
- useActiveDocument: jest.fn(),
8
- } ) );
6
+ jest.mock( '@elementor/editor-documents' );
9
7
 
10
8
  describe( '@elementor/editor-app-bar - Primary action menu', () => {
11
9
  it( 'should render the actions ordered properly (save, default)', () => {
@@ -2,12 +2,12 @@ import * as React from 'react';
2
2
  import PrimaryAction from '../primary-action';
3
3
  import { fireEvent, render, screen } from '@testing-library/react';
4
4
  import { createMockDocument } from 'test-utils';
5
- import { useActiveDocument, useActiveDocumentActions } from '@elementor/editor-documents';
5
+ import { __useActiveDocument, __useActiveDocumentActions } from '@elementor/editor-documents';
6
6
  import { useIsPreviewMode } from '@elementor/editor-v1-adapters';
7
7
 
8
8
  jest.mock( '@elementor/editor-documents', () => ( {
9
- useActiveDocument: jest.fn(),
10
- useActiveDocumentActions: jest.fn(),
9
+ __useActiveDocument: jest.fn(),
10
+ __useActiveDocumentActions: jest.fn(),
11
11
  } ) );
12
12
 
13
13
  jest.mock( '@elementor/editor-v1-adapters', () => ( {
@@ -20,10 +20,9 @@ const actionsMock = {
20
20
  saveTemplate: jest.fn(),
21
21
  };
22
22
 
23
- jest.mocked( useActiveDocumentActions ).mockReturnValue( actionsMock );
24
-
25
23
  describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
26
24
  beforeEach( () => {
25
+ jest.mocked( __useActiveDocumentActions ).mockReturnValue( actionsMock );
27
26
  jest.mocked( useIsPreviewMode ).mockReturnValue( false );
28
27
  } );
29
28
 
@@ -33,7 +32,7 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
33
32
 
34
33
  it( 'should not render when there is no active document', () => {
35
34
  // Arrange.
36
- jest.mocked( useActiveDocument ).mockReturnValue( null );
35
+ jest.mocked( __useActiveDocument ).mockReturnValue( null );
37
36
 
38
37
  // Act.
39
38
  const { container } = render( <PrimaryAction /> );
@@ -50,7 +49,7 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
50
49
  },
51
50
  } );
52
51
 
53
- jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
52
+ jest.mocked( __useActiveDocument ).mockReturnValue( mockDocument );
54
53
 
55
54
  // Act.
56
55
  render( <PrimaryAction /> );
@@ -67,7 +66,7 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
67
66
  },
68
67
  } );
69
68
 
70
- jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
69
+ jest.mocked( __useActiveDocument ).mockReturnValue( mockDocument );
71
70
 
72
71
  // Act.
73
72
  render( <PrimaryAction /> );
@@ -86,7 +85,7 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
86
85
  },
87
86
  } );
88
87
 
89
- jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
88
+ jest.mocked( __useActiveDocument ).mockReturnValue( mockDocument );
90
89
 
91
90
  // Act.
92
91
  render( <PrimaryAction /> );
@@ -103,7 +102,7 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
103
102
  // Arrange.
104
103
  const mockDocument = createMockDocument();
105
104
 
106
- jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
105
+ jest.mocked( __useActiveDocument ).mockReturnValue( mockDocument );
107
106
  jest.mocked( useIsPreviewMode ).mockReturnValue( true );
108
107
 
109
108
  // Act.
@@ -121,7 +120,7 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
121
120
  // Arrange.
122
121
  const mockDocument = createMockDocument( { isDirty: false } );
123
122
 
124
- jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
123
+ jest.mocked( __useActiveDocument ).mockReturnValue( mockDocument );
125
124
 
126
125
  // Act.
127
126
  render( <PrimaryAction /> );
@@ -144,7 +143,7 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
144
143
  },
145
144
  } );
146
145
 
147
- jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
146
+ jest.mocked( __useActiveDocument ).mockReturnValue( mockDocument );
148
147
 
149
148
  // Act.
150
149
  render( <PrimaryAction /> );
@@ -161,7 +160,7 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
161
160
  // Arrange.
162
161
  const mockDocument = createMockDocument( { isDirty: true } );
163
162
 
164
- jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
163
+ jest.mocked( __useActiveDocument ).mockReturnValue( mockDocument );
165
164
 
166
165
  // Act.
167
166
  render( <PrimaryAction /> );
@@ -179,7 +178,7 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
179
178
  isSaving: true,
180
179
  } );
181
180
 
182
- jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
181
+ jest.mocked( __useActiveDocument ).mockReturnValue( mockDocument );
183
182
 
184
183
  // Act.
185
184
  render( <PrimaryAction /> );
@@ -205,7 +204,7 @@ describe( '@elementor/editor-app-bar - Top Bar Primary Action', () => {
205
204
  isSaving: true,
206
205
  } );
207
206
 
208
- jest.mocked( useActiveDocument ).mockReturnValue( mockDocument );
207
+ jest.mocked( __useActiveDocument ).mockReturnValue( mockDocument );
209
208
 
210
209
  // Act.
211
210
  render( <PrimaryAction /> );
@@ -31,9 +31,9 @@ export default function PrimaryActionMenu( props: PopoverMenuProps ) {
31
31
  vertical: 'top',
32
32
  horizontal: 'right',
33
33
  } }
34
- marginThreshold={ 8 }
34
+ marginThreshold={ 4 }
35
35
  PaperProps={ {
36
- sx: { mt: 2 },
36
+ sx: { mt: 0.5 },
37
37
  } }
38
38
  >
39
39
  { saveActions.map( ( { MenuItem, id }, index ) => ( [
@@ -11,13 +11,13 @@ import {
11
11
  Tooltip,
12
12
  usePopupState,
13
13
  } from '@elementor/ui';
14
- import { Document, useActiveDocument, useActiveDocumentActions } from '@elementor/editor-documents';
14
+ import { Document, __useActiveDocument, __useActiveDocumentActions } from '@elementor/editor-documents';
15
15
  import { ChevronDownIcon } from '@elementor/icons';
16
16
  import { useIsPreviewMode } from '@elementor/editor-v1-adapters';
17
17
 
18
18
  export default function PrimaryAction() {
19
- const document = useActiveDocument();
20
- const { save } = useActiveDocumentActions();
19
+ const document = __useActiveDocument();
20
+ const { save } = __useActiveDocumentActions();
21
21
  const isPreviewMode = useIsPreviewMode();
22
22
 
23
23
  const popupState = usePopupState( {
@@ -38,12 +38,12 @@ export default function PrimaryAction() {
38
38
 
39
39
  return (
40
40
  <>
41
- <ButtonGroup size="medium" variant="contained">
41
+ <ButtonGroup size="large" variant="contained">
42
42
  <Button
43
43
  onClick={ () => ! document.isSaving && save() }
44
44
  sx={ {
45
- px: 7,
46
45
  height: '100%',
46
+ borderRadius: 0,
47
47
  maxWidth: '158px',
48
48
  '&.MuiButtonBase-root.MuiButtonGroup-grouped': {
49
49
  minWidth: '110px',
@@ -51,7 +51,7 @@ export default function PrimaryAction() {
51
51
  } }
52
52
  disabled={ isPublishDisabled }
53
53
  >
54
- { shouldShowSpinner ? <CircularProgress /> : getLabel( document ) }
54
+ { shouldShowSpinner ? <CircularProgress color="inherit" size="1.5em" /> : getLabel( document ) }
55
55
  </Button>
56
56
 
57
57
  <Tooltip
@@ -59,16 +59,17 @@ export default function PrimaryAction() {
59
59
  PopperProps={ {
60
60
  sx: {
61
61
  '&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom': {
62
- mt: 3,
63
- mr: 1,
62
+ mt: 1,
63
+ mr: 0.25,
64
64
  },
65
65
  },
66
66
  } }
67
67
  >
68
68
  <Box component="span" aria-label={ undefined }>
69
69
  <Button
70
+ size="small"
70
71
  { ...bindTrigger( popupState ) }
71
- sx={ { px: 0, height: '100%' } }
72
+ sx={ { px: 0, height: '100%', borderRadius: 0 } }
72
73
  disabled={ isSaveOptionsDisabled }
73
74
  aria-label={ __( 'Save Options', 'elementor' ) }
74
75
  >
@@ -1,11 +1,11 @@
1
1
  import { createMockDocument } from 'test-utils';
2
2
  import { renderHook } from '@testing-library/react';
3
3
  import useDocumentSaveDraftProps from '../use-document-save-draft-props';
4
- import { useActiveDocument, useActiveDocumentActions } from '@elementor/editor-documents';
4
+ import { __useActiveDocument, __useActiveDocumentActions } from '@elementor/editor-documents';
5
5
 
6
6
  jest.mock( '@elementor/editor-documents', () => ( {
7
- useActiveDocument: jest.fn(),
8
- useActiveDocumentActions: jest.fn(),
7
+ __useActiveDocument: jest.fn(),
8
+ __useActiveDocumentActions: jest.fn(),
9
9
  } ) );
10
10
 
11
11
  const documentActions = {
@@ -17,8 +17,8 @@ const documentActions = {
17
17
  describe( '@elementor/editor-app-bar - useDocumentSaveDraftProps', () => {
18
18
  it( 'should save a draft of the current document', () => {
19
19
  // Arrange.
20
- jest.mocked( useActiveDocumentActions ).mockReturnValue( documentActions );
21
- jest.mocked( useActiveDocument ).mockReturnValue( createMockDocument() );
20
+ jest.mocked( __useActiveDocumentActions ).mockReturnValue( documentActions );
21
+ jest.mocked( __useActiveDocument ).mockReturnValue( createMockDocument() );
22
22
 
23
23
  // Act.
24
24
  const { result } = renderHook( () => useDocumentSaveDraftProps() );
@@ -53,7 +53,7 @@ describe( '@elementor/editor-app-bar - useDocumentSaveDraftProps', () => {
53
53
  },
54
54
  ] )( 'should be disabled when $condition', ( { document } ) => {
55
55
  // Arrange.
56
- jest.mocked( useActiveDocument ).mockReturnValue( document );
56
+ jest.mocked( __useActiveDocument ).mockReturnValue( document );
57
57
 
58
58
  // Act.
59
59
  const { result } = renderHook( () => useDocumentSaveDraftProps() );
@@ -1,9 +1,9 @@
1
1
  import { renderHook } from '@testing-library/react';
2
- import { useActiveDocumentActions } from '@elementor/editor-documents';
2
+ import { __useActiveDocumentActions } from '@elementor/editor-documents';
3
3
  import useDocumentSaveTemplateProps from '../use-document-save-template-props';
4
4
 
5
5
  jest.mock( '@elementor/editor-documents', () => ( {
6
- useActiveDocumentActions: jest.fn(),
6
+ __useActiveDocumentActions: jest.fn(),
7
7
  } ) );
8
8
 
9
9
  const documentActions = {
@@ -15,7 +15,7 @@ const documentActions = {
15
15
  describe( '@elementor/editor-app-bar - useDocumentSaveTemplateProps', () => {
16
16
  it( 'should open the "save as template" modal', () => {
17
17
  // Arrange.
18
- jest.mocked( useActiveDocumentActions ).mockReturnValue( documentActions );
18
+ jest.mocked( __useActiveDocumentActions ).mockReturnValue( documentActions );
19
19
 
20
20
  // Act.
21
21
  const { result } = renderHook( () => useDocumentSaveTemplateProps() );
@@ -1,11 +1,11 @@
1
1
  import { __ } from '@wordpress/i18n';
2
2
  import { ActionProps } from '../../../types';
3
3
  import { FileReportIcon } from '@elementor/icons';
4
- import { useActiveDocument, useActiveDocumentActions } from '@elementor/editor-documents';
4
+ import { __useActiveDocument, __useActiveDocumentActions } from '@elementor/editor-documents';
5
5
 
6
6
  export default function useDocumentSaveDraftProps(): ActionProps {
7
- const document = useActiveDocument();
8
- const { saveDraft } = useActiveDocumentActions();
7
+ const document = __useActiveDocument();
8
+ const { saveDraft } = __useActiveDocumentActions();
9
9
 
10
10
  return {
11
11
  icon: FileReportIcon,
@@ -1,10 +1,10 @@
1
1
  import { __ } from '@wordpress/i18n';
2
2
  import { ActionProps } from '../../../types';
3
3
  import { FolderIcon } from '@elementor/icons';
4
- import { useActiveDocumentActions } from '@elementor/editor-documents';
4
+ import { __useActiveDocumentActions } from '@elementor/editor-documents';
5
5
 
6
6
  export default function useDocumentSaveTemplateProps(): ActionProps {
7
- const { saveTemplate } = useActiveDocumentActions();
7
+ const { saveTemplate } = __useActiveDocumentActions();
8
8
 
9
9
  return {
10
10
  icon: FolderIcon,
@@ -25,7 +25,6 @@ describe( '@elementor/editor-app-bar - useFinderActionProps', () => {
25
25
  const { result } = renderHook( () => useActionProps() );
26
26
 
27
27
  // Assert.
28
- expect( result.current.selected ).toBe( true );
29
28
  expect( result.current.disabled ).toBe( true );
30
29
  expect( useRouteStatus ).toHaveBeenCalledTimes( 1 );
31
30
  expect( useRouteStatus ).toHaveBeenCalledWith( 'finder', {
@@ -3,7 +3,7 @@ import { SearchIcon } from '@elementor/icons';
3
3
  import { runCommand, useRouteStatus } from '@elementor/editor-v1-adapters';
4
4
 
5
5
  export default function useActionProps() {
6
- const { isActive, isBlocked } = useRouteStatus( 'finder', {
6
+ const { isBlocked } = useRouteStatus( 'finder', {
7
7
  blockOnKitRoutes: false,
8
8
  blockOnPreviewMode: false,
9
9
  } );
@@ -12,7 +12,6 @@ export default function useActionProps() {
12
12
  title: __( 'Finder', 'elementor' ),
13
13
  icon: SearchIcon,
14
14
  onClick: () => runCommand( 'finder/toggle' ),
15
- selected: isActive,
16
15
  disabled: isBlocked,
17
16
  };
18
17
  }
@@ -2,7 +2,7 @@ import { utilitiesMenu } from '../../locations';
2
2
  import useActionProps from './hooks/use-action-props';
3
3
 
4
4
  export function init() {
5
- utilitiesMenu.registerToggleAction( {
5
+ utilitiesMenu.registerAction( {
6
6
  id: 'toggle-finder',
7
7
  priority: 10, // Before help.
8
8
  useProps: useActionProps,
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import { act, render, screen } from '@testing-library/react';
3
3
  import { isRouteActive } from '@elementor/editor-v1-adapters';
4
- import { useActiveDocument } from '@elementor/editor-documents';
4
+ import { __useActiveDocument, __useActiveDocumentActions } from '@elementor/editor-documents';
5
5
  import PortalledPrimaryAction from '../portalled-primary-action';
6
6
  import { createMockDocument } from 'test-utils';
7
7
 
@@ -11,15 +11,19 @@ jest.mock( '@elementor/editor-v1-adapters', () => ( {
11
11
  } ) );
12
12
 
13
13
  jest.mock( '@elementor/editor-documents', () => ( {
14
- useActiveDocument: jest.fn(),
15
- useActiveDocumentActions: jest.fn( () => ( {
16
- save: jest.fn(),
17
- } ) ),
14
+ __useActiveDocument: jest.fn(),
15
+ __useActiveDocumentActions: jest.fn(),
18
16
  } ) );
19
17
 
20
18
  describe( '@elementor/editor-app-bar - Portalled primary action', () => {
21
19
  beforeEach( () => {
22
- jest.mocked( useActiveDocument ).mockImplementation( () => createMockDocument() );
20
+ jest.mocked( __useActiveDocument ).mockReturnValue( createMockDocument() );
21
+
22
+ jest.mocked( __useActiveDocumentActions ).mockReturnValue( {
23
+ save: jest.fn(),
24
+ saveDraft: jest.fn(),
25
+ saveTemplate: jest.fn(),
26
+ } );
23
27
  } );
24
28
 
25
29
  afterEach( () => {
@@ -2,11 +2,11 @@ import * as React from 'react';
2
2
  import { fireEvent, render, screen } from '@testing-library/react';
3
3
  import PrimaryAction from '../primary-action';
4
4
  import { createMockDocument } from 'test-utils';
5
- import { useActiveDocument, useActiveDocumentActions } from '@elementor/editor-documents';
5
+ import { __useActiveDocument, __useActiveDocumentActions } from '@elementor/editor-documents';
6
6
 
7
7
  jest.mock( '@elementor/editor-documents', () => ( {
8
- useActiveDocument: jest.fn(),
9
- useActiveDocumentActions: jest.fn(),
8
+ __useActiveDocument: jest.fn(),
9
+ __useActiveDocumentActions: jest.fn(),
10
10
  } ) );
11
11
 
12
12
  describe( '@elementor/editor-app-bar - Primary action', () => {
@@ -15,17 +15,17 @@ describe( '@elementor/editor-app-bar - Primary action', () => {
15
15
  beforeEach( () => {
16
16
  saveFn = jest.fn( () => Promise.resolve() );
17
17
 
18
- jest.mocked( useActiveDocument ).mockImplementation( () => createMockDocument() );
19
- jest.mocked( useActiveDocumentActions ).mockImplementation( () => ( {
18
+ jest.mocked( __useActiveDocument ).mockReturnValue( createMockDocument() );
19
+ jest.mocked( __useActiveDocumentActions ).mockReturnValue( {
20
20
  save: saveFn,
21
21
  saveTemplate: jest.fn(),
22
22
  saveDraft: jest.fn(),
23
- } ) );
23
+ } );
24
24
  } );
25
25
 
26
26
  it( 'should save site settings on click', () => {
27
27
  // Arrange.
28
- jest.mocked( useActiveDocument ).mockImplementation( () => createMockDocument( { isDirty: true } ) );
28
+ jest.mocked( __useActiveDocument ).mockReturnValue( createMockDocument( { isDirty: true } ) );
29
29
 
30
30
  render( <PrimaryAction /> );
31
31
 
@@ -51,7 +51,7 @@ describe( '@elementor/editor-app-bar - Primary action', () => {
51
51
  },
52
52
  ] )( 'should not save site settings when $title', ( { document } ) => {
53
53
  // Arrange.
54
- jest.mocked( useActiveDocument ).mockImplementation( () => document );
54
+ jest.mocked( __useActiveDocument ).mockReturnValue( document );
55
55
 
56
56
  render( <PrimaryAction /> );
57
57
 
@@ -73,7 +73,7 @@ describe( '@elementor/editor-app-bar - Primary action', () => {
73
73
  },
74
74
  ] )( 'should be disabled when $title', ( { document } ) => {
75
75
  // Arrange.
76
- jest.mocked( useActiveDocument ).mockImplementation( () => document );
76
+ jest.mocked( __useActiveDocument ).mockReturnValue( document );
77
77
 
78
78
  // Act.
79
79
  render( <PrimaryAction /> );
@@ -84,7 +84,7 @@ describe( '@elementor/editor-app-bar - Primary action', () => {
84
84
 
85
85
  it( 'should show a loader when saving site settings', () => {
86
86
  // Arrange.
87
- jest.mocked( useActiveDocument ).mockImplementation( () => createMockDocument( {
87
+ jest.mocked( __useActiveDocument ).mockReturnValue( createMockDocument( {
88
88
  isDirty: true,
89
89
  isSaving: true,
90
90
  } ) );
@@ -1,11 +1,11 @@
1
1
  import * as React from 'react';
2
- import { useActiveDocument, useActiveDocumentActions } from '@elementor/editor-documents';
2
+ import { __useActiveDocument, __useActiveDocumentActions } from '@elementor/editor-documents';
3
3
  import { Button, CircularProgress, Paper } from '@elementor/ui';
4
4
  import { __ } from '@wordpress/i18n';
5
5
 
6
6
  export default function PrimaryAction() {
7
- const document = useActiveDocument();
8
- const { save } = useActiveDocumentActions();
7
+ const document = __useActiveDocument();
8
+ const { save } = __useActiveDocumentActions();
9
9
 
10
10
  return (
11
11
  <Paper sx={ {
@@ -1,14 +1,14 @@
1
1
  import { mainMenu } from '../../locations';
2
2
  import { __ } from '@wordpress/i18n';
3
3
  import { WordpressIcon } from '@elementor/icons';
4
- import { useActiveDocument } from '@elementor/editor-documents';
4
+ import { __useActiveDocument } from '@elementor/editor-documents';
5
5
 
6
6
  export function init() {
7
7
  mainMenu.registerLink( {
8
8
  id: 'exit-to-wordpress',
9
9
  group: 'exits',
10
10
  useProps: () => {
11
- const document = useActiveDocument();
11
+ const document = __useActiveDocument();
12
12
 
13
13
  return {
14
14
  title: __( 'Exit to WordPress', 'elementor' ),