@elementor/editor-site-navigation 0.18.4 → 0.19.0

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.19.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.18.4...@elementor/editor-site-navigation@0.19.0) (2023-09-11)
+
+
+### Bug Fixes
+
+* ui adaptations [ED-11933] ([#107](https://github.com/elementor/elementor-packages/issues/107)) ([18ef329](https://github.com/elementor/elementor-packages/commit/18ef32928cbe921d7f5340c37c3c965b117d8d63))
+
+
+### Features
+
+* **editor-documents:** mark experimental functions [ED-12066] ([#112](https://github.com/elementor/elementor-packages/issues/112)) ([f4b7a9a](https://github.com/elementor/elementor-packages/commit/f4b7a9ac7953a2b48062349495acff05b5640de3))
+* **editor-panels:** mark experimental functions [ED-12067] ([#113](https://github.com/elementor/elementor-packages/issues/113)) ([152ef9f](https://github.com/elementor/elementor-packages/commit/152ef9f6980cd27571537db1738c69de63e2d4bb))
+
+
+
+
+
 ## [0.18.4](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.18.3...@elementor/editor-site-navigation@0.18.4) (2023-08-22)
 
 **Note:** Version bump only for package @elementor/editor-site-navigation

package/dist/index.js

@@ -61,7 +61,7 @@ var import_editor_documents3 = require("@elementor/editor-documents");
 var React = __toESM(require("react"));
 var import_ui = require("@elementor/ui");
 function Indicator({ title, status }) {
-  return /* @__PURE__ */ React.createElement(Tooltip, { title }, /* @__PURE__ */ React.createElement(import_ui.Stack, { component: "span", direction: "row", alignItems: "center", spacing: 2 }, /* @__PURE__ */ React.createElement(import_ui.Typography, { component: "span", variant: "body2", sx: { maxWidth: "120px" }, noWrap: true }, title), status.value !== "publish" && /* @__PURE__ */ React.createElement(import_ui.Typography, { component: "span", variant: "body2", sx: { fontStyle: "italic" } }, "(", status.label, ")")));
+  return /* @__PURE__ */ React.createElement(Tooltip, { title }, /* @__PURE__ */ React.createElement(import_ui.Stack, { component: "span", direction: "row", alignItems: "center", spacing: 0.5 }, /* @__PURE__ */ React.createElement(import_ui.Typography, { component: "span", variant: "body2", sx: { maxWidth: "120px" }, noWrap: true }, title), status.value !== "publish" && /* @__PURE__ */ React.createElement(import_ui.Typography, { component: "span", variant: "body2", sx: { fontStyle: "italic" } }, "(", status.label, ")")));
 }
 function Tooltip(props) {
   return /* @__PURE__ */ React.createElement(
@@ -70,7 +70,7 @@ function Tooltip(props) {
       PopperProps: {
         sx: {
           "&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom": {
-            mt: 7
+            mt: 2.7
           }
         }
       },
@@ -126,13 +126,13 @@ function DocTypeChip({ postType, docType, label }) {
     import_ui2.Chip,
     {
       component: "span",
-      size: "medium",
+      size: "small",
       variant: "standard",
       label,
       "data-value": docType,
       color,
       icon: /* @__PURE__ */ React2.createElement(Icon, null),
-      sx: { ml: 3, cursor: "inherit" }
+      sx: { ml: 1, cursor: "inherit" }
     }
   );
 }
@@ -156,7 +156,7 @@ function useReverseHtmlEntities(escapedHTML = "") {
 
 // src/components/top-bar/post-list-item.tsx
 function PostListItem({ post, closePopup, ...props }) {
-  const navigateToDocument = (0, import_editor_documents.useNavigateToDocument)();
+  const navigateToDocument = (0, import_editor_documents.__useNavigateToDocument)();
   const postTitle = useReverseHtmlEntities(post.title);
   return /* @__PURE__ */ React3.createElement(
     import_ui3.MenuItem,
@@ -218,7 +218,7 @@ var import_i18n = require("@wordpress/i18n");
 var import_editor_documents2 = require("@elementor/editor-documents");
 function CreatePostListItem({ closePopup, ...props }) {
   const { create, isLoading } = useCreatePage();
-  const navigateToDocument = (0, import_editor_documents2.useNavigateToDocument)();
+  const navigateToDocument = (0, import_editor_documents2.__useNavigateToDocument)();
   return /* @__PURE__ */ React4.createElement(
     import_ui4.MenuItem,
     {
@@ -236,8 +236,8 @@ function CreatePostListItem({ closePopup, ...props }) {
 
 // src/components/top-bar/recently-edited.tsx
 function RecentlyEdited() {
-  const activeDocument = (0, import_editor_documents3.useActiveDocument)();
-  const hostDocument = (0, import_editor_documents3.useHostDocument)();
+  const activeDocument = (0, import_editor_documents3.__useActiveDocument)();
+  const hostDocument = (0, import_editor_documents3.__useHostDocument)();
   const document2 = activeDocument && activeDocument.type.value !== "kit" ? activeDocument : hostDocument;
   const { recentPosts } = useRecentPosts(document2?.id);
   const popupState = (0, import_ui5.usePopupState)({
@@ -267,10 +267,9 @@ function RecentlyEdited() {
     import_ui5.Menu,
     {
       MenuListProps: {
-        dense: true,
-        subheader: /* @__PURE__ */ React5.createElement(import_ui5.ListSubheader, { sx: { fontStyle: "italic", fontWeight: "300" } }, (0, import_i18n2.__)("Recent", "elementor"))
+        subheader: /* @__PURE__ */ React5.createElement(import_ui5.ListSubheader, { color: "primary", sx: { fontStyle: "italic", fontWeight: "300" } }, (0, import_i18n2.__)("Recent", "elementor"))
       },
-      PaperProps: { sx: { mt: 4, width: 320 } },
+      PaperProps: { sx: { mt: 2.5, width: 320 } },
       ...(0, import_ui5.bindMenu)(popupState)
     },
     recentPosts.map((post) => /* @__PURE__ */ React5.createElement(PostListItem, { key: post.id, post, closePopup: popupState.close })),
@@ -595,7 +594,7 @@ var import_editor_documents4 = require("@elementor/editor-documents");
 function ListItemCreate() {
   const { type, resetEditMode } = usePostListContext();
   const { createPost } = usePostActions(type);
-  const navigateToDocument = (0, import_editor_documents4.useNavigateToDocument)();
+  const navigateToDocument = (0, import_editor_documents4.__useNavigateToDocument)();
   const createPostCallback = (inputValue) => {
     createPost.mutateAsync({
       title: inputValue,
@@ -616,7 +615,7 @@ var import_i18n6 = require("@wordpress/i18n");
 var import_editor_documents5 = require("@elementor/editor-documents");
 function ListItemDuplicate() {
   const { type, editMode, resetEditMode } = usePostListContext();
-  const navigateToDocument = (0, import_editor_documents5.useNavigateToDocument)();
+  const navigateToDocument = (0, import_editor_documents5.__useNavigateToDocument)();
   const { duplicatePost } = usePostActions(type);
   if ("duplicate" !== editMode.mode) {
     return null;
@@ -762,7 +761,7 @@ var import_react7 = require("react");
 var import_editor_documents6 = require("@elementor/editor-documents");
 function Delete({ post }) {
   const [isDialogOpen, setIsDialogOpen] = (0, import_react7.useState)(false);
-  const activeDocument = (0, import_editor_documents6.useActiveDocument)();
+  const activeDocument = (0, import_editor_documents6.__useActiveDocument)();
   const isPostActive = activeDocument?.id === post.id;
   return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
     ActionMenuItem,
@@ -901,8 +900,8 @@ function SetHome({ post }) {
 // src/components/panel/posts-list/list-items/list-item-view.tsx
 var import_i18n12 = require("@wordpress/i18n");
 function ListItemView({ post }) {
-  const activeDocument = (0, import_editor_documents7.useActiveDocument)();
-  const navigateToDocument = (0, import_editor_documents7.useNavigateToDocument)();
+  const activeDocument = (0, import_editor_documents7.__useActiveDocument)();
+  const navigateToDocument = (0, import_editor_documents7.__useNavigateToDocument)();
   const popupState = (0, import_ui12.usePopupState)({
     variant: "popover",
     popupId: "post-actions",
@@ -1055,7 +1054,7 @@ var {
   panel,
   usePanelStatus,
   usePanelActions
-} = (0, import_editor_panels2.createPanel)({
+} = (0, import_editor_panels2.__createPanel)({
   id: "site-navigation-panel",
   component: shell_default
 });
@@ -1086,7 +1085,7 @@ var { env, validateEnv } = (0, import_env.parseEnv)("@elementor/editor-site-navi
 function init() {
   registerTopBarMenuItems();
   if (env.is_pages_panel_active) {
-    (0, import_editor_panels3.registerPanel)(panel);
+    (0, import_editor_panels3.__registerPanel)(panel);
     registerButton();
   }
 }

package/dist/index.mjs

@@ -35,13 +35,13 @@ import {
   MenuItem as MenuItem3
 } from "@elementor/ui";
 import { ChevronDownIcon } from "@elementor/icons";
-import { useActiveDocument, useHostDocument } from "@elementor/editor-documents";
+import { __useActiveDocument, __useHostDocument } from "@elementor/editor-documents";
 
 // src/components/top-bar/indicator.tsx
 import * as React from "react";
 import { Typography, Stack, Tooltip as BaseTooltip } from "@elementor/ui";
 function Indicator({ title, status }) {
-  return /* @__PURE__ */ React.createElement(Tooltip, { title }, /* @__PURE__ */ React.createElement(Stack, { component: "span", direction: "row", alignItems: "center", spacing: 2 }, /* @__PURE__ */ React.createElement(Typography, { component: "span", variant: "body2", sx: { maxWidth: "120px" }, noWrap: true }, title), status.value !== "publish" && /* @__PURE__ */ React.createElement(Typography, { component: "span", variant: "body2", sx: { fontStyle: "italic" } }, "(", status.label, ")")));
+  return /* @__PURE__ */ React.createElement(Tooltip, { title }, /* @__PURE__ */ React.createElement(Stack, { component: "span", direction: "row", alignItems: "center", spacing: 0.5 }, /* @__PURE__ */ React.createElement(Typography, { component: "span", variant: "body2", sx: { maxWidth: "120px" }, noWrap: true }, title), status.value !== "publish" && /* @__PURE__ */ React.createElement(Typography, { component: "span", variant: "body2", sx: { fontStyle: "italic" } }, "(", status.label, ")")));
 }
 function Tooltip(props) {
   return /* @__PURE__ */ React.createElement(
@@ -50,7 +50,7 @@ function Tooltip(props) {
       PopperProps: {
         sx: {
           "&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom": {
-            mt: 7
+            mt: 2.7
           }
         }
       },
@@ -108,13 +108,13 @@ function DocTypeChip({ postType, docType, label }) {
     Chip,
     {
       component: "span",
-      size: "medium",
+      size: "small",
       variant: "standard",
       label,
       "data-value": docType,
       color,
       icon: /* @__PURE__ */ React2.createElement(Icon, null),
-      sx: { ml: 3, cursor: "inherit" }
+      sx: { ml: 1, cursor: "inherit" }
     }
   );
 }
@@ -122,7 +122,7 @@ function DocTypeChip({ postType, docType, label }) {
 // src/components/top-bar/post-list-item.tsx
 import { MenuItem, ListItemText } from "@elementor/ui";
 import * as React3 from "react";
-import { useNavigateToDocument } from "@elementor/editor-documents";
+import { __useNavigateToDocument } from "@elementor/editor-documents";
 
 // src/hooks/use-reverse-html-entities.ts
 import { useMemo } from "react";
@@ -138,7 +138,7 @@ function useReverseHtmlEntities(escapedHTML = "") {
 
 // src/components/top-bar/post-list-item.tsx
 function PostListItem({ post, closePopup, ...props }) {
-  const navigateToDocument = useNavigateToDocument();
+  const navigateToDocument = __useNavigateToDocument();
   const postTitle = useReverseHtmlEntities(post.title);
   return /* @__PURE__ */ React3.createElement(
     MenuItem,
@@ -197,10 +197,10 @@ async function addNewPage() {
 // src/components/top-bar/create-post-list-item.tsx
 import { PlusIcon } from "@elementor/icons";
 import { __ } from "@wordpress/i18n";
-import { useNavigateToDocument as useNavigateToDocument2 } from "@elementor/editor-documents";
+import { __useNavigateToDocument as __useNavigateToDocument2 } from "@elementor/editor-documents";
 function CreatePostListItem({ closePopup, ...props }) {
   const { create, isLoading } = useCreatePage();
-  const navigateToDocument = useNavigateToDocument2();
+  const navigateToDocument = __useNavigateToDocument2();
   return /* @__PURE__ */ React4.createElement(
     MenuItem2,
     {
@@ -218,8 +218,8 @@ function CreatePostListItem({ closePopup, ...props }) {
 
 // src/components/top-bar/recently-edited.tsx
 function RecentlyEdited() {
-  const activeDocument = useActiveDocument();
-  const hostDocument = useHostDocument();
+  const activeDocument = __useActiveDocument();
+  const hostDocument = __useHostDocument();
   const document2 = activeDocument && activeDocument.type.value !== "kit" ? activeDocument : hostDocument;
   const { recentPosts } = useRecentPosts(document2?.id);
   const popupState = usePopupState({
@@ -249,10 +249,9 @@ function RecentlyEdited() {
     Menu,
     {
       MenuListProps: {
-        dense: true,
-        subheader: /* @__PURE__ */ React5.createElement(ListSubheader, { sx: { fontStyle: "italic", fontWeight: "300" } }, __2("Recent", "elementor"))
+        subheader: /* @__PURE__ */ React5.createElement(ListSubheader, { color: "primary", sx: { fontStyle: "italic", fontWeight: "300" } }, __2("Recent", "elementor"))
       },
-      PaperProps: { sx: { mt: 4, width: 320 } },
+      PaperProps: { sx: { mt: 2.5, width: 320 } },
       ...bindMenu(popupState)
     },
     recentPosts.map((post) => /* @__PURE__ */ React5.createElement(PostListItem, { key: post.id, post, closePopup: popupState.close })),
@@ -279,7 +278,7 @@ import { __ as __15 } from "@wordpress/i18n";
 import { PagesIcon } from "@elementor/icons";
 
 // src/components/panel/panel.ts
-import { createPanel } from "@elementor/editor-panels";
+import { __createPanel } from "@elementor/editor-panels";
 
 // src/components/panel/shell.tsx
 import * as React23 from "react";
@@ -579,11 +578,11 @@ function ListItemRename({ post }) {
 // src/components/panel/posts-list/list-items/list-item-create.tsx
 import * as React10 from "react";
 import { __ as __5 } from "@wordpress/i18n";
-import { useNavigateToDocument as useNavigateToDocument3 } from "@elementor/editor-documents";
+import { __useNavigateToDocument as __useNavigateToDocument3 } from "@elementor/editor-documents";
 function ListItemCreate() {
   const { type, resetEditMode } = usePostListContext();
   const { createPost } = usePostActions(type);
-  const navigateToDocument = useNavigateToDocument3();
+  const navigateToDocument = __useNavigateToDocument3();
   const createPostCallback = (inputValue) => {
     createPost.mutateAsync({
       title: inputValue,
@@ -601,10 +600,10 @@ function ListItemCreate() {
 // src/components/panel/posts-list/list-items/list-item-duplicate.tsx
 import * as React11 from "react";
 import { __ as __6 } from "@wordpress/i18n";
-import { useNavigateToDocument as useNavigateToDocument4 } from "@elementor/editor-documents";
+import { __useNavigateToDocument as __useNavigateToDocument4 } from "@elementor/editor-documents";
 function ListItemDuplicate() {
   const { type, editMode, resetEditMode } = usePostListContext();
-  const navigateToDocument = useNavigateToDocument4();
+  const navigateToDocument = __useNavigateToDocument4();
   const { duplicatePost } = usePostActions(type);
   if ("duplicate" !== editMode.mode) {
     return null;
@@ -638,7 +637,7 @@ import {
   usePopupState as usePopupState2
 } from "@elementor/ui";
 import { DotsVerticalIcon, HomeIcon as HomeIcon2 } from "@elementor/icons";
-import { useActiveDocument as useActiveDocument3, useNavigateToDocument as useNavigateToDocument5 } from "@elementor/editor-documents";
+import { __useActiveDocument as __useActiveDocument3, __useNavigateToDocument as __useNavigateToDocument5 } from "@elementor/editor-documents";
 
 // src/components/shared/page-title-and-status.tsx
 import * as React12 from "react";
@@ -772,10 +771,10 @@ import {
   Divider as Divider3
 } from "@elementor/ui";
 import { useState as useState6 } from "react";
-import { useActiveDocument as useActiveDocument2 } from "@elementor/editor-documents";
+import { __useActiveDocument as __useActiveDocument2 } from "@elementor/editor-documents";
 function Delete({ post }) {
   const [isDialogOpen, setIsDialogOpen] = useState6(false);
-  const activeDocument = useActiveDocument2();
+  const activeDocument = __useActiveDocument2();
   const isPostActive = activeDocument?.id === post.id;
   return /* @__PURE__ */ React16.createElement(React16.Fragment, null, /* @__PURE__ */ React16.createElement(
     ActionMenuItem,
@@ -914,8 +913,8 @@ function SetHome({ post }) {
 // src/components/panel/posts-list/list-items/list-item-view.tsx
 import { __ as __12 } from "@wordpress/i18n";
 function ListItemView({ post }) {
-  const activeDocument = useActiveDocument3();
-  const navigateToDocument = useNavigateToDocument5();
+  const activeDocument = __useActiveDocument3();
+  const navigateToDocument = __useNavigateToDocument5();
   const popupState = usePopupState2({
     variant: "popover",
     popupId: "post-actions",
@@ -1068,7 +1067,7 @@ var {
   panel,
   usePanelStatus,
   usePanelActions
-} = createPanel({
+} = __createPanel({
   id: "site-navigation-panel",
   component: shell_default
 });
@@ -1087,7 +1086,7 @@ function useToggleButtonProps() {
 }
 
 // src/init.ts
-import { registerPanel } from "@elementor/editor-panels";
+import { __registerPanel } from "@elementor/editor-panels";
 
 // src/env.ts
 import { parseEnv } from "@elementor/env";
@@ -1099,7 +1098,7 @@ var { env, validateEnv } = parseEnv("@elementor/editor-site-navigation", (envDat
 function init() {
   registerTopBarMenuItems();
   if (env.is_pages_panel_active) {
-    registerPanel(panel);
+    __registerPanel(panel);
     registerButton();
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@elementor/editor-site-navigation",
-	"version": "0.18.4",
+	"version": "0.19.0",
 	"private": false,
 	"author": "Elementor Team",
 	"homepage": "https://elementor.com/",
@@ -32,10 +32,10 @@
 		"dev": "tsup --config=../../tsup.dev.ts"
 	},
 	"dependencies": {
-		"@elementor/editor-app-bar": "^0.7.3",
-		"@elementor/editor-documents": "^0.8.3",
-		"@elementor/editor-panels": "^0.2.1",
-		"@elementor/env": "^0.2.0",
+		"@elementor/editor-app-bar": "^0.8.0",
+		"@elementor/editor-documents": "^0.9.0",
+		"@elementor/editor-panels": "^0.3.0",
+		"@elementor/env": "^0.3.0",
 		"@elementor/icons": "^0.7.0",
 		"@elementor/query": "^0.1.1",
 		"@elementor/ui": "^1.4.53",
@@ -49,5 +49,5 @@
 	"elementor": {
 		"type": "extension"
 	},
-	"gitHead": "dd77d56ac1157b6287657ae652f1579e1f362b49"
+	"gitHead": "7dc3971d2dd061848d6547aa2caed8332e7b9167"
 }

package/src/components/panel/actions-menu/actions/__tests__/delete.test.tsx

@@ -14,7 +14,7 @@ jest.mock( '../../../../../hooks/use-posts-actions', () => ( {
 } ) );
 
 jest.mock( '@elementor/editor-documents', () => ( {
-	useActiveDocument: jest.fn(),
+	__useActiveDocument: jest.fn(),
 } ) );
 
 describe( '@elementor/editor-site-navigation/pages-panel-actions - Delete', () => {

package/src/components/panel/actions-menu/actions/delete.tsx

@@ -16,11 +16,11 @@ import {
 } from '@elementor/ui';
 import { usePostListContext } from '../../../../contexts/post-list-context';
 import { useState } from 'react';
-import { useActiveDocument } from '@elementor/editor-documents';
+import { __useActiveDocument } from '@elementor/editor-documents';
 
 export default function Delete( { post }: { post: Post } ) {
 	const [ isDialogOpen, setIsDialogOpen ] = useState( false );
-	const activeDocument = useActiveDocument();
+	const activeDocument = __useActiveDocument();
 
 	const isPostActive = activeDocument?.id === post.id;
 

package/src/components/panel/panel.ts

@@ -1,11 +1,11 @@
-import { createPanel } from '@elementor/editor-panels';
+import { __createPanel } from '@elementor/editor-panels';
 import Shell from './shell';
 
 export const {
 	panel,
 	usePanelStatus,
 	usePanelActions,
-} = createPanel( {
+} = __createPanel( {
 	id: 'site-navigation-panel',
 	component: Shell,
 } );

package/src/components/panel/posts-list/__tests__/post-list-item.test.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { act, fireEvent, screen, waitFor } from '@testing-library/react';
 import { Post } from '../../../../types';
 import PostListItem from '../post-list-item';
-import { useNavigateToDocument } from '@elementor/editor-documents';
+import { __useNavigateToDocument } from '@elementor/editor-documents';
 import { renderWithQuery } from 'test-utils';
 import { PostListContextProvider } from '../../../../contexts/post-list-context';
 
@@ -17,8 +17,8 @@ jest.mock( '../../../../hooks/use-posts-actions', () => ( {
 } ) );
 
 jest.mock( '@elementor/editor-documents', () => ( {
-	useActiveDocument: jest.fn(),
-	useNavigateToDocument: jest.fn(),
+	__useActiveDocument: jest.fn(),
+	__useNavigateToDocument: jest.fn(),
 } ) );
 
 describe( '@elementor/editor-site-navigation - PostListItem', () => {
@@ -105,7 +105,7 @@ describe( '@elementor/editor-site-navigation - PostListItem', () => {
 	it( 'should navigate to document on click', () => {
 		// Arrange.
 		const navigateToDocument = jest.fn();
-		jest.mocked( useNavigateToDocument ).mockReturnValue( navigateToDocument );
+		jest.mocked( __useNavigateToDocument ).mockReturnValue( navigateToDocument );
 
 		const id = 10;
 

package/src/components/panel/posts-list/__tests__/posts-collapsible-list.test.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { fireEvent, screen, waitFor } from '@testing-library/react';
 import PostsCollapsibleList from '../posts-collapsible-list';
-import { renderWithQuery } from 'test-utils';
+import { createMockDocument, renderWithQuery } from 'test-utils';
 import { PostListContextProvider } from '../../../../contexts/post-list-context';
+import { __useActiveDocument } from '@elementor/editor-documents';
 
 const mockMutateAsync = jest.fn();
 jest.mock( '../../../../hooks/use-posts-actions', () => ( {
@@ -41,14 +42,17 @@ jest.mock( '../../../../hooks/use-homepage', () => ( {
 } ) );
 
 jest.mock( '@elementor/editor-documents', () => ( {
-	__esModule: true,
-	useActiveDocument: jest.fn( () => ( {
-		id: 2,
-	} ) ),
-	useNavigateToDocument: jest.fn(),
+	__useActiveDocument: jest.fn(),
+	__useNavigateToDocument: jest.fn(),
 } ) );
 
 describe( '@elementor/editor-site-navigation - PostsCollapsibleList', () => {
+	beforeEach( () => {
+		jest.mocked( __useActiveDocument ).mockReturnValue( createMockDocument( ( {
+			id: 2,
+		} ) ) );
+	} );
+
 	afterEach( () => {
 		jest.clearAllMocks();
 	} );

package/src/components/panel/posts-list/list-items/list-item-create.tsx

@@ -3,12 +3,12 @@ import { __ } from '@wordpress/i18n';
 import { usePostListContext } from '../../../../contexts/post-list-context';
 import { usePostActions } from '../../../../hooks/use-posts-actions';
 import EditModeTemplate from './edit-mode-template';
-import { useNavigateToDocument } from '@elementor/editor-documents';
+import { __useNavigateToDocument } from '@elementor/editor-documents';
 
 export default function ListItemCreate() {
 	const { type, resetEditMode } = usePostListContext();
 	const { createPost } = usePostActions( type );
-	const navigateToDocument = useNavigateToDocument();
+	const navigateToDocument = __useNavigateToDocument();
 
 	const createPostCallback = ( inputValue: string ) => {
 		createPost.mutateAsync( {

package/src/components/panel/posts-list/list-items/list-item-duplicate.tsx

@@ -3,11 +3,11 @@ import { __ } from '@wordpress/i18n';
 import { usePostListContext } from '../../../../contexts/post-list-context';
 import { usePostActions } from '../../../../hooks/use-posts-actions';
 import EditModeTemplate from './edit-mode-template';
-import { useNavigateToDocument } from '@elementor/editor-documents';
+import { __useNavigateToDocument } from '@elementor/editor-documents';
 
 export default function ListItemDuplicate() {
 	const { type, editMode, resetEditMode } = usePostListContext();
-	const navigateToDocument = useNavigateToDocument();
+	const navigateToDocument = __useNavigateToDocument();
 	const { duplicatePost } = usePostActions( type );
 
 	if ( 'duplicate' !== editMode.mode ) {

package/src/components/panel/posts-list/list-items/list-item-view.tsx

@@ -12,7 +12,7 @@ import {
 	usePopupState,
 } from '@elementor/ui';
 import { DotsVerticalIcon, HomeIcon } from '@elementor/icons';
-import { useActiveDocument, useNavigateToDocument } from '@elementor/editor-documents';
+import { __useActiveDocument, __useNavigateToDocument } from '@elementor/editor-documents';
 import PageTitleAndStatus from '../../../shared/page-title-and-status';
 import Rename from '../../actions-menu/actions/rename';
 import Duplicate from '../../actions-menu/actions/duplicate';
@@ -23,8 +23,8 @@ import { Post } from '../../../../types';
 import { __ } from '@wordpress/i18n';
 
 export default function ListItemView( { post }: { post: Post } ) {
-	const activeDocument = useActiveDocument();
-	const navigateToDocument = useNavigateToDocument();
+	const activeDocument = __useActiveDocument();
+	const navigateToDocument = __useNavigateToDocument();
 
 	const popupState = usePopupState( {
 		variant: 'popover',

package/src/components/top-bar/__tests__/add-new-page.test.tsx

@@ -1,45 +1,34 @@
 import * as React from 'react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
-import { useHostDocument, useActiveDocument, useNavigateToDocument } from '@elementor/editor-documents';
+import { __useActiveDocument, __useNavigateToDocument } from '@elementor/editor-documents';
 import RecentlyEdited from '../recently-edited';
 import { createMockDocument } from 'test-utils';
 import useRecentPosts, { Post } from '../../../hooks/use-recent-posts';
 import useCreatePage from '../../../hooks/use-create-page';
 
 jest.mock( '@elementor/editor-documents', () => ( {
-	useActiveDocument: jest.fn(),
-	useHostDocument: jest.fn(),
-	useNavigateToDocument: jest.fn(),
+	__useActiveDocument: jest.fn(),
+	__useHostDocument: jest.fn(),
+	__useNavigateToDocument: jest.fn(),
 } ) );
 
-jest.mock( '../../../hooks/use-recent-posts', () => (
-	{
-		default: jest.fn( () => ( { isLoading: false, recentPosts: [] } ) ),
-		__esModule: true,
-	}
-) );
-jest.mock( '../../../hooks/use-create-page', () => (
-	{
-		default: jest.fn( () => ( { create: jest.fn(), isLoading: false } ) ),
-		__esModule: true,
-	}
-) );
+jest.mock( '../../../hooks/use-recent-posts', () => ( {
+	__esModule: true,
+	default: jest.fn( () => ( { isLoading: false, recentPosts: [] } ) ),
+} ) );
+
+jest.mock( '../../../hooks/use-create-page', () => ( {
+	__esModule: true,
+	default: jest.fn( () => ( { create: jest.fn(), isLoading: false } ) ),
+} ) );
 
 describe( '@elementor/recently-edited - Top bar add new page', () => {
 	beforeEach( () => {
-		jest.mocked( useActiveDocument ).mockImplementation( () =>
-			createMockDocument( { id: 1, title: 'Active Document' } )
-		);
-
-		jest.mocked( useHostDocument ).mockImplementation( () =>
-			createMockDocument( { id: 2, title: 'Host Document' } )
-		);
+		jest.mocked( __useActiveDocument ).mockReturnValue( createMockDocument() );
 	} );
 
 	it( 'should render add new page button', () => {
 		// Arrange.
-		mockActiveDocument();
-
 		const isLoading = false;
 		const recentPosts: Post[] = [];
 
@@ -58,8 +47,6 @@ describe( '@elementor/recently-edited - Top bar add new page', () => {
 
 	it( 'should trigger create page hook on click', async () => {
 		// Arrange.
-		mockActiveDocument();
-
 		const isLoading = false;
 		const recentPosts: Post[] = [];
 		const create = jest.fn().mockReturnValue( Promise.resolve( { id: 123 } ) );
@@ -67,7 +54,7 @@ describe( '@elementor/recently-edited - Top bar add new page', () => {
 
 		jest.mocked( useRecentPosts ).mockReturnValue( { isLoading, recentPosts } );
 		jest.mocked( useCreatePage ).mockReturnValue( { isLoading, create } );
-		jest.mocked( useNavigateToDocument ).mockReturnValue( navigateToDocument );
+		jest.mocked( __useNavigateToDocument ).mockReturnValue( navigateToDocument );
 
 		render( <RecentlyEdited /> );
 
@@ -86,16 +73,3 @@ describe( '@elementor/recently-edited - Top bar add new page', () => {
 		expect( navigateToDocument ).toHaveBeenCalledWith( 123 );
 	} );
 } );
-
-function mockActiveDocument() {
-	jest.mocked( useActiveDocument ).mockImplementation( () =>
-		createMockDocument( {
-			id: 1,
-			title: 'Header',
-			type: {
-				value: 'header',
-				label: 'Header',
-			},
-		} )
-	);
-}

package/src/components/top-bar/__tests__/recently-edited.test.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
-import { useHostDocument, useActiveDocument, useNavigateToDocument } from '@elementor/editor-documents';
+import { __useHostDocument, __useActiveDocument, __useNavigateToDocument } from '@elementor/editor-documents';
 import RecentlyEdited from '../recently-edited';
 import { createMockDocument } from 'test-utils';
 import useRecentPosts, { Post } from '../../../hooks/use-recent-posts';
 
 jest.mock( '@elementor/editor-documents', () => ( {
-	useActiveDocument: jest.fn(),
-	useHostDocument: jest.fn(),
-	useNavigateToDocument: jest.fn(),
+	__useActiveDocument: jest.fn(),
+	__useHostDocument: jest.fn(),
+	__useNavigateToDocument: jest.fn(),
 } ) );
 
 jest.mock( '../../../hooks/use-recent-posts', () => (
@@ -19,17 +19,13 @@ jest.mock( '../../../hooks/use-recent-posts', () => (
 ) );
 
 describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
-	beforeEach( () => {
-		jest.mocked( useActiveDocument ).mockImplementation( () =>
-			createMockDocument( { id: 1, title: 'Active Document' } )
-		);
-
-		jest.mocked( useHostDocument ).mockImplementation( () =>
-			createMockDocument( { id: 2, title: 'Host Document' } )
-		);
-	} );
-
 	it( 'should show the title of the active document without its status when the document is published', async () => {
+		// Arrange.
+		jest.mocked( __useActiveDocument ).mockReturnValue( createMockDocument( {
+			id: 1,
+			title: 'Active Document',
+		} ) );
+
 		// Act.
 		render( <RecentlyEdited /> );
 
@@ -40,16 +36,14 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 
 	it( 'should show the title of the active document with its status when the document is not published', async () => {
 		// Arrange.
-		jest.mocked( useActiveDocument ).mockImplementation( () =>
-			createMockDocument( {
-				id: 1,
-				title: 'Active Document',
-				status: {
-					value: 'draft',
-					label: 'Draft',
-				},
-			} )
-		);
+		jest.mocked( __useActiveDocument ).mockReturnValue( createMockDocument( {
+			id: 1,
+			title: 'Active Document',
+			status: {
+				value: 'draft',
+				label: 'Draft',
+			},
+		} ) );
 
 		// Act.
 		render( <RecentlyEdited /> );
@@ -61,7 +55,12 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 
 	it( 'should show the title of the host document when there is no active document', () => {
 		// Arrange.
-		jest.mocked( useActiveDocument ).mockImplementation( () => null );
+		jest.mocked( __useActiveDocument ).mockReturnValue( null );
+
+		jest.mocked( __useHostDocument ).mockReturnValue( createMockDocument( {
+			id: 1,
+			title: 'Host Document',
+		} ) );
 
 		// Act.
 		render( <RecentlyEdited /> );
@@ -72,17 +71,19 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 
 	it( 'should show the title of the host document when the active document is kit', () => {
 		// Arrange.
+		jest.mocked( __useActiveDocument ).mockReturnValue( createMockDocument( {
+			id: 1,
+			title: 'Active Document',
+			type: {
+				value: 'kit',
+				label: 'Kit',
+			},
+		} ) );
 
-		jest.mocked( useActiveDocument ).mockImplementation( () =>
-			createMockDocument( {
-				id: 1,
-				title: 'Active Document',
-				type: {
-					value: 'kit',
-					label: 'Kit',
-				},
-			} )
-		);
+		jest.mocked( __useHostDocument ).mockReturnValue( createMockDocument( {
+			id: 2,
+			title: 'Host Document',
+		} ) );
 
 		// Act.
 		render( <RecentlyEdited /> );
@@ -93,8 +94,8 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 
 	it( 'should show nothing if there are no documents', () => {
 		// Arrange.
-		jest.mocked( useActiveDocument ).mockImplementation( () => null );
-		jest.mocked( useHostDocument ).mockImplementation( () => null );
+		jest.mocked( __useActiveDocument ).mockReturnValue( null );
+		jest.mocked( __useHostDocument ).mockReturnValue( null );
 
 		// Act.
 		render( <RecentlyEdited /> );
@@ -106,16 +107,14 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 
 	it( 'should show empty state', () => {
 		// Arrange.
-		jest.mocked( useActiveDocument ).mockImplementation( () =>
-			createMockDocument( {
-				id: 1,
-				title: 'Header',
-				type: {
-					value: 'header',
-					label: 'Header',
-				},
-			} )
-		);
+		jest.mocked( __useActiveDocument ).mockReturnValue( createMockDocument( {
+			id: 1,
+			title: 'Header',
+			type: {
+				value: 'header',
+				label: 'Header',
+			},
+		} ) );
 
 		const isLoading = false;
 		const recentPosts: Post[] = [];
@@ -135,16 +134,14 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 
 	it( 'should open the recently edited menu on click', () => {
 		// Arrange.
-		jest.mocked( useActiveDocument ).mockImplementation( () =>
-			createMockDocument( {
-				id: 1,
-				title: 'Header',
-				type: {
-					value: 'header',
-					label: 'Header',
-				},
-			} )
-		);
+		jest.mocked( __useActiveDocument ).mockReturnValue( createMockDocument( {
+			id: 1,
+			title: 'Header',
+			type: {
+				value: 'header',
+				label: 'Header',
+			},
+		} ) );
 
 		const isLoading = false;
 		const recentPosts: Post[] = [ {
@@ -179,16 +176,14 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 
 	it( 'should render titles with HTML entities', () => {
 		// Arrange.
-		jest.mocked( useActiveDocument ).mockImplementation( () =>
-			createMockDocument( {
-				id: 1,
-				title: 'Header title with special char &#165;',
-				type: {
-					value: 'header',
-					label: 'Header',
-				},
-			} )
-		);
+		jest.mocked( __useActiveDocument ).mockReturnValue( createMockDocument( {
+			id: 1,
+			title: 'Header title with special char &#165;',
+			type: {
+				value: 'header',
+				label: 'Header',
+			},
+		} ) );
 
 		const isLoading = false;
 		const recentPosts: Post[] = [
@@ -236,7 +231,7 @@ describe( '@elementor/recently-edited - Top bar Recently Edited', () => {
 		// Arrange.
 		const navigateToDocument = jest.fn();
 
-		jest.mocked( useNavigateToDocument ).mockReturnValue( navigateToDocument );
+		jest.mocked( __useNavigateToDocument ).mockReturnValue( navigateToDocument );
 
 		jest.mocked( useRecentPosts ).mockReturnValue( {
 			isLoading: false,

package/src/components/top-bar/chip-doc-type.tsx

@@ -20,13 +20,13 @@ export default function DocTypeChip( { postType, docType, label }: Props ) {
 	return (
 		<Chip
 			component="span"
-			size="medium"
+			size="small"
 			variant="standard"
 			label={ label }
 			data-value={ docType }
 			color={ color }
 			icon={ <Icon /> }
-			sx={ { ml: 3, cursor: 'inherit' } }
+			sx={ { ml: 1, cursor: 'inherit' } }
 		/>
 	);
 }

package/src/components/top-bar/create-post-list-item.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import useCreatePage from '../../hooks/use-create-page';
 import { PlusIcon } from '@elementor/icons';
 import { __ } from '@wordpress/i18n';
-import { useNavigateToDocument } from '@elementor/editor-documents';
+import { __useNavigateToDocument } from '@elementor/editor-documents';
 
 type Props = MenuItemProps & {
 	closePopup: () => void;
@@ -11,7 +11,7 @@ type Props = MenuItemProps & {
 
 export function CreatePostListItem( { closePopup, ...props }: Props ) {
 	const { create, isLoading } = useCreatePage();
-	const navigateToDocument = useNavigateToDocument();
+	const navigateToDocument = __useNavigateToDocument();
 
 	return (
 		<MenuItem

package/src/components/top-bar/indicator.tsx

@@ -10,7 +10,7 @@ type Props = {
 export default function Indicator( { title, status }: Props ) {
 	return (
 		<Tooltip title={ title }>
-			<Stack component="span"	 direction="row" alignItems="center" spacing={ 2 }>
+			<Stack component="span"	 direction="row" alignItems="center" spacing={ 0.5 }>
 				<Typography component="span" variant="body2" sx={ { maxWidth: '120px' } } noWrap>
 					{ title }
 				</Typography>
@@ -29,7 +29,7 @@ function Tooltip( props: TooltipProps ) {
 		PopperProps={ {
 			sx: {
 				'&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom': {
-					mt: 7,
+					mt: 2.7,
 				},
 			},
 		} }

package/src/components/top-bar/post-list-item.tsx

@@ -2,7 +2,7 @@ import DocTypeChip from './chip-doc-type';
 import { MenuItem, MenuItemProps, ListItemText } from '@elementor/ui';
 import * as React from 'react';
 import { Post } from '../../hooks/use-recent-posts';
-import { useNavigateToDocument } from '@elementor/editor-documents';
+import { __useNavigateToDocument } from '@elementor/editor-documents';
 import { useReverseHtmlEntities } from '../../hooks/use-reverse-html-entities';
 
 type Props = MenuItemProps & {
@@ -11,7 +11,7 @@ type Props = MenuItemProps & {
 }
 
 export function PostListItem( { post, closePopup, ...props }: Props ) {
-	const navigateToDocument = useNavigateToDocument();
+	const navigateToDocument = __useNavigateToDocument();
 	const postTitle = useReverseHtmlEntities( post.title );
 
 	return (

package/src/components/top-bar/recently-edited.tsx

@@ -11,7 +11,7 @@ import {
 	MenuItem,
 } from '@elementor/ui';
 import { ChevronDownIcon } from '@elementor/icons';
-import { useActiveDocument, useHostDocument } from '@elementor/editor-documents';
+import { __useActiveDocument, __useHostDocument } from '@elementor/editor-documents';
 import Indicator from './indicator';
 import useRecentPosts from '../../hooks/use-recent-posts';
 import { __ } from '@wordpress/i18n';
@@ -20,8 +20,8 @@ import { CreatePostListItem } from './create-post-list-item';
 import { useReverseHtmlEntities } from '../../hooks/use-reverse-html-entities';
 
 export default function RecentlyEdited() {
-	const activeDocument = useActiveDocument();
-	const hostDocument = useHostDocument();
+	const activeDocument = __useActiveDocument();
+	const hostDocument = __useHostDocument();
 	const document = activeDocument && activeDocument.type.value !== 'kit'
 		? activeDocument
 		: hostDocument;
@@ -54,14 +54,13 @@ export default function RecentlyEdited() {
 			</Button>
 			<Menu
 				MenuListProps={ {
-					dense: true,
 					subheader: (
-						<ListSubheader sx={ { fontStyle: 'italic', fontWeight: '300' } }>
+						<ListSubheader color="primary" sx={ { fontStyle: 'italic', fontWeight: '300' } }>
 							{ __( 'Recent', 'elementor' ) }
 						</ListSubheader>
 					),
 				} }
-				PaperProps={ { sx: { mt: 4, width: 320 } } }
+				PaperProps={ { sx: { mt: 2.5, width: 320 } } }
 				{ ...bindMenu( popupState ) }
 			>
 				{ recentPosts.map( ( post ) => (

package/src/init.ts

@@ -1,7 +1,7 @@
 import RecentlyEdited from './components/top-bar/recently-edited';
 import { injectIntoPageIndication, toolsMenu } from '@elementor/editor-app-bar';
 import { useToggleButtonProps } from './hooks/use-toggle-button-props';
-import { registerPanel } from '@elementor/editor-panels';
+import { __registerPanel } from '@elementor/editor-panels';
 import { panel } from './components/panel/panel';
 import { env } from './env';
 
@@ -9,7 +9,7 @@ export default function init() {
 	registerTopBarMenuItems();
 	// TODO 06/06/2023 :  remove if when we are production ready
 	if ( env.is_pages_panel_active ) {
-		registerPanel( panel );
+		__registerPanel( panel );
 		registerButton();
 	}
 }