@elementor/editor-site-navigation 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.9.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.8.1...@elementor/editor-site-navigation@0.9.0) (2023-06-26)
+
+
+### Features
+
+* added panel infrastructure to pages panel [ED-10863] ([#65](https://github.com/elementor/elementor-packages/issues/65)) ([e743522](https://github.com/elementor/elementor-packages/commit/e743522558b9e7cdf40e2c2dcf71e4049c815992))
+
+
+
+
+
+## [0.8.1](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.8.0...@elementor/editor-site-navigation@0.8.1) (2023-06-25)
+
+
+### Bug Fixes
+
+* comment out pages panel [ED-10871] ([#64](https://github.com/elementor/elementor-packages/issues/64)) ([3a8b890](https://github.com/elementor/elementor-packages/commit/3a8b890d8f21ac816d3c0b961b37372bcb91caff))
+
+
+
+
+
 # [0.8.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-site-navigation@0.7.0...@elementor/editor-site-navigation@0.8.0) (2023-06-25)
 
 

package/dist/index.js

@@ -248,12 +248,19 @@ function RecentlyEdited() {
 
 // src/init.ts
 var import_editor_app_bar = require("@elementor/editor-app-bar");
-var import_editor = require("@elementor/editor");
+
+// src/hooks/useToggleButtonProps.ts
+var import_i18n9 = require("@wordpress/i18n");
+var import_icons14 = require("@elementor/icons");
+
+// src/components/panel/panel.ts
+var import_editor_panels2 = require("@elementor/editor-panels");
 
 // src/components/panel/shell.tsx
 var React18 = __toESM(require("react"));
 var import_ui12 = require("@elementor/ui");
 var import_icons13 = require("@elementor/icons");
+var import_editor_panels = require("@elementor/editor-panels");
 
 // src/components/panel/pages-list/pages-collapsible-list.tsx
 var React17 = __toESM(require("react"));
@@ -537,6 +544,7 @@ function PagesCollapsibleList({ pages, isOpenByDefault = false }) {
 }
 
 // src/components/panel/shell.tsx
+var import_i18n8 = require("@wordpress/i18n");
 var mockPages = [
   {
     id: 1,
@@ -550,16 +558,7 @@ var mockPages = [
   { id: 5, type: "page", title: "FAQ", status: "publish" }
 ];
 var Shell = () => {
-  return /* @__PURE__ */ React18.createElement(import_ui12.ThemeProvider, { colorScheme: "light" }, /* @__PURE__ */ React18.createElement(import_ui12.Box, { sx: { width: "100%", maxWidth: 360 } }, /* @__PURE__ */ React18.createElement(import_ui12.Paper, null, /* @__PURE__ */ React18.createElement(
-    import_ui12.Grid,
-    {
-      container: true,
-      justifyContent: "center",
-      alignItems: "center",
-      sx: { height: 51 }
-    },
-    /* @__PURE__ */ React18.createElement(import_ui12.Typography, { variant: "h6" }, "Pages")
-  ), /* @__PURE__ */ React18.createElement(import_ui12.Divider, null), /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React18.createElement(import_editor_panels.Panel, null, /* @__PURE__ */ React18.createElement(import_editor_panels.PanelHeader, null, /* @__PURE__ */ React18.createElement(import_editor_panels.PanelHeaderTitle, null, (0, import_i18n8.__)("Pages", "elementor"))), /* @__PURE__ */ React18.createElement(import_editor_panels.PanelBody, null, /* @__PURE__ */ React18.createElement(
     import_ui12.Box,
     {
       display: "flex",
@@ -574,14 +573,49 @@ var Shell = () => {
       },
       "Add New"
     )
-  ), /* @__PURE__ */ React18.createElement(import_ui12.Box, { sx: { width: "100%", maxWidth: 360 } }, /* @__PURE__ */ React18.createElement(import_ui12.List, { dense: true }, /* @__PURE__ */ React18.createElement(PagesCollapsibleList, { pages: mockPages, isOpenByDefault: true }))), /* @__PURE__ */ React18.createElement(import_ui12.Divider, null))));
+  ), /* @__PURE__ */ React18.createElement(import_ui12.List, { dense: true }, /* @__PURE__ */ React18.createElement(PagesCollapsibleList, { pages: mockPages, isOpenByDefault: true }))));
 };
 var shell_default = Shell;
 
+// src/components/panel/panel.ts
+var {
+  panel,
+  usePanelStatus,
+  usePanelActions
+} = (0, import_editor_panels2.createPanel)({
+  id: "site-navigation-panel",
+  component: shell_default
+});
+
+// src/hooks/useToggleButtonProps.ts
+function useToggleButtonProps() {
+  const { isOpen, isBlocked } = usePanelStatus();
+  const { open, close } = usePanelActions();
+  return {
+    title: (0, import_i18n9.__)("Pages", "elementor"),
+    icon: import_icons14.PagesIcon,
+    onClick: () => isOpen ? close() : open(),
+    selected: isOpen,
+    disabled: isBlocked
+  };
+}
+
+// src/init.ts
+var import_editor_panels3 = require("@elementor/editor-panels");
+
+// src/env.ts
+var import_env = require("@elementor/env");
+var { env, validateEnv } = (0, import_env.parseEnv)("@elementor/editor-site-navigation", (envData) => {
+  return envData;
+});
+
 // src/init.ts
 function init() {
   registerTopBarMenuItems();
-  registerPanel();
+  if (env.is_panel_active) {
+    (0, import_editor_panels3.registerPanel)(panel);
+    registerButton();
+  }
 }
 function registerTopBarMenuItems() {
   (0, import_editor_app_bar.injectIntoPageIndication)({
@@ -589,10 +623,11 @@ function registerTopBarMenuItems() {
     filler: RecentlyEdited
   });
 }
-function registerPanel() {
-  (0, import_editor.injectIntoTop)({
-    id: "navigation-panel",
-    filler: shell_default
+function registerButton() {
+  import_editor_app_bar.toolsMenu.registerToggleAction({
+    id: "toggle-site-navigation-panel",
+    priority: 2,
+    useProps: useToggleButtonProps
   });
 }
 

package/dist/index.mjs

@@ -229,13 +229,20 @@ function RecentlyEdited() {
 }
 
 // src/init.ts
-import { injectIntoPageIndication } from "@elementor/editor-app-bar";
-import { injectIntoTop } from "@elementor/editor";
+import { injectIntoPageIndication, toolsMenu } from "@elementor/editor-app-bar";
+
+// src/hooks/useToggleButtonProps.ts
+import { __ as __9 } from "@wordpress/i18n";
+import { PagesIcon } from "@elementor/icons";
+
+// src/components/panel/panel.ts
+import { createPanel } from "@elementor/editor-panels";
 
 // src/components/panel/shell.tsx
 import * as React18 from "react";
-import { Box as Box3, Button as Button2, Divider as Divider3, Grid, List as List2, Paper, ThemeProvider, Typography as Typography4 } from "@elementor/ui";
+import { Box as Box3, Button as Button2, List as List2 } from "@elementor/ui";
 import { PlusIcon as PlusIcon2 } from "@elementor/icons";
+import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from "@elementor/editor-panels";
 
 // src/components/panel/pages-list/pages-collapsible-list.tsx
 import * as React17 from "react";
@@ -528,6 +535,7 @@ function PagesCollapsibleList({ pages, isOpenByDefault = false }) {
 }
 
 // src/components/panel/shell.tsx
+import { __ as __8 } from "@wordpress/i18n";
 var mockPages = [
   {
     id: 1,
@@ -541,16 +549,7 @@ var mockPages = [
   { id: 5, type: "page", title: "FAQ", status: "publish" }
 ];
 var Shell = () => {
-  return /* @__PURE__ */ React18.createElement(ThemeProvider, { colorScheme: "light" }, /* @__PURE__ */ React18.createElement(Box3, { sx: { width: "100%", maxWidth: 360 } }, /* @__PURE__ */ React18.createElement(Paper, null, /* @__PURE__ */ React18.createElement(
-    Grid,
-    {
-      container: true,
-      justifyContent: "center",
-      alignItems: "center",
-      sx: { height: 51 }
-    },
-    /* @__PURE__ */ React18.createElement(Typography4, { variant: "h6" }, "Pages")
-  ), /* @__PURE__ */ React18.createElement(Divider3, null), /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React18.createElement(Panel, null, /* @__PURE__ */ React18.createElement(PanelHeader, null, /* @__PURE__ */ React18.createElement(PanelHeaderTitle, null, __8("Pages", "elementor"))), /* @__PURE__ */ React18.createElement(PanelBody, null, /* @__PURE__ */ React18.createElement(
     Box3,
     {
       display: "flex",
@@ -565,14 +564,49 @@ var Shell = () => {
       },
       "Add New"
     )
-  ), /* @__PURE__ */ React18.createElement(Box3, { sx: { width: "100%", maxWidth: 360 } }, /* @__PURE__ */ React18.createElement(List2, { dense: true }, /* @__PURE__ */ React18.createElement(PagesCollapsibleList, { pages: mockPages, isOpenByDefault: true }))), /* @__PURE__ */ React18.createElement(Divider3, null))));
+  ), /* @__PURE__ */ React18.createElement(List2, { dense: true }, /* @__PURE__ */ React18.createElement(PagesCollapsibleList, { pages: mockPages, isOpenByDefault: true }))));
 };
 var shell_default = Shell;
 
+// src/components/panel/panel.ts
+var {
+  panel,
+  usePanelStatus,
+  usePanelActions
+} = createPanel({
+  id: "site-navigation-panel",
+  component: shell_default
+});
+
+// src/hooks/useToggleButtonProps.ts
+function useToggleButtonProps() {
+  const { isOpen, isBlocked } = usePanelStatus();
+  const { open, close } = usePanelActions();
+  return {
+    title: __9("Pages", "elementor"),
+    icon: PagesIcon,
+    onClick: () => isOpen ? close() : open(),
+    selected: isOpen,
+    disabled: isBlocked
+  };
+}
+
+// src/init.ts
+import { registerPanel } from "@elementor/editor-panels";
+
+// src/env.ts
+import { parseEnv } from "@elementor/env";
+var { env, validateEnv } = parseEnv("@elementor/editor-site-navigation", (envData) => {
+  return envData;
+});
+
 // src/init.ts
 function init() {
   registerTopBarMenuItems();
-  registerPanel();
+  if (env.is_panel_active) {
+    registerPanel(panel);
+    registerButton();
+  }
 }
 function registerTopBarMenuItems() {
   injectIntoPageIndication({
@@ -580,10 +614,11 @@ function registerTopBarMenuItems() {
     filler: RecentlyEdited
   });
 }
-function registerPanel() {
-  injectIntoTop({
-    id: "navigation-panel",
-    filler: shell_default
+function registerButton() {
+  toolsMenu.registerToggleAction({
+    id: "toggle-site-navigation-panel",
+    priority: 2,
+    useProps: useToggleButtonProps
   });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@elementor/editor-site-navigation",
-	"version": "0.8.0",
+	"version": "0.9.0",
 	"private": false,
 	"author": "Elementor Team",
 	"homepage": "https://elementor.com/",
@@ -32,10 +32,11 @@
 		"dev": "tsup --config=../../tsup.dev.ts"
 	},
 	"dependencies": {
-		"@elementor/editor": "^0.6.1",
-		"@elementor/editor-app-bar": "^0.6.3",
+		"@elementor/editor-app-bar": "^0.6.4",
 		"@elementor/editor-documents": "^0.8.2",
-		"@elementor/icons": "^0.5.0",
+		"@elementor/editor-panels": "^0.1.1",
+		"@elementor/env": "^0.2.0",
+		"@elementor/icons": "^0.6.0",
 		"@elementor/ui": "^1.4.53",
 		"@wordpress/api-fetch": "^6.27.0",
 		"@wordpress/i18n": "^4.31.0",
@@ -47,5 +48,5 @@
 	"elementor": {
 		"type": "extension"
 	},
-	"gitHead": "d15192c0e60703e9831f7813d0a32d5943fe6c28"
+	"gitHead": "ed96d6908a9c9d3bab7fe15df52dba55bd64dff5"
 }

package/src/components/panel/panel.ts

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

package/src/components/panel/shell.tsx

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import { Box, Button, Divider, Grid, List, Paper, ThemeProvider, Typography } from '@elementor/ui';
+import { Box, Button, List } from '@elementor/ui';
 import { PlusIcon } from '@elementor/icons';
 import { Page } from '../../types';
+import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';
 import PagesCollapsibleList from './pages-list/pages-collapsible-list';
+import { __ } from '@wordpress/i18n';
 
 // TODO: Remove once connected to real data fetching.
 const mockPages: Page[] = [
@@ -20,38 +22,28 @@ const mockPages: Page[] = [
 
 const Shell = () => {
 	return (
-		<ThemeProvider colorScheme="light">
-			<Box sx={ { width: '100%', maxWidth: 360 } }>
-				<Paper>
-					<Grid
-						container
-						justifyContent="center"
-						alignItems="center"
-						sx={ { height: 51 } }>
-						<Typography variant="h6">Pages</Typography>
-					</Grid>
-					<Divider />
-					<Box
-						display="flex"
-						justifyContent="flex-end"
-						alignItems="center"
+		<Panel>
+			<PanelHeader>
+				<PanelHeaderTitle>{ __( 'Pages', 'elementor' ) }</PanelHeaderTitle>
+			</PanelHeader>
+			<PanelBody>
+				<Box
+					display="flex"
+					justifyContent="flex-end"
+					alignItems="center"
+				>
+					<Button
+						sx={ { mt: 4, mb: 4, mr: 5 } }
+						startIcon={ <PlusIcon /> }
 					>
-						<Button
-							sx={ { mt: 4, mb: 4, mr: 5 } }
-							startIcon={ <PlusIcon /> }
-						>
-							Add New
-						</Button>
-					</Box>
-					<Box sx={ { width: '100%', maxWidth: 360 } }>
-						<List dense>
-							<PagesCollapsibleList pages={ mockPages } isOpenByDefault={ true } />
-						</List>
-					</Box>
-					<Divider />
-				</Paper>
-			</Box>
-		</ThemeProvider>
+						Add New
+					</Button>
+				</Box>
+				<List dense>
+					<PagesCollapsibleList pages={ mockPages } isOpenByDefault={ true } />
+				</List>
+			</PanelBody>
+		</Panel>
 	);
 };
 

package/src/env.ts

@@ -0,0 +1,9 @@
+import { parseEnv } from '@elementor/env';
+
+export const { env, validateEnv } = parseEnv<{
+	is_panel_active: boolean;
+}>( '@elementor/editor-site-navigation', ( envData ) => {
+	return envData as {
+		is_panel_active: boolean;
+	};
+} );

package/src/hooks/useToggleButtonProps.ts

@@ -0,0 +1,20 @@
+import { __ } from '@wordpress/i18n';
+import { PagesIcon } from '@elementor/icons';
+import { usePanelActions, usePanelStatus } from '../components/panel/panel';
+
+export function useToggleButtonProps() {
+	const { isOpen, isBlocked } = usePanelStatus();
+	const { open, close } = usePanelActions();
+
+	return {
+		title: __( 'Pages', 'elementor' ),
+		icon: PagesIcon,
+		onClick: () => (
+			isOpen
+				? close()
+				: open()
+		),
+		selected: isOpen,
+		disabled: isBlocked,
+	};
+}

package/src/init.ts

@@ -1,12 +1,17 @@
 import RecentlyEdited from './components/top-bar/recently-edited';
-import { injectIntoPageIndication } from '@elementor/editor-app-bar';
-import { injectIntoTop } from '@elementor/editor';
-import Shell from './components/panel/shell';
+import { injectIntoPageIndication, toolsMenu } from '@elementor/editor-app-bar';
+import { useToggleButtonProps } from './hooks/useToggleButtonProps';
+import { registerPanel } from '@elementor/editor-panels';
+import { panel } from './components/panel/panel';
+import { env } from './env';
 
 export default function init() {
 	registerTopBarMenuItems();
-	// TODO 06/06/2023 : uncomment registerPanel() when we are ready to release
-	registerPanel();
+	// TODO 06/06/2023 :  remove if when we are production ready
+	if ( env.is_panel_active ) {
+		registerPanel( panel );
+		registerButton();
+	}
 }
 
 function registerTopBarMenuItems() {
@@ -16,10 +21,10 @@ function registerTopBarMenuItems() {
 	} );
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function registerPanel() {
-	injectIntoTop( {
-		id: 'navigation-panel',
-		filler: Shell,
+function registerButton() {
+	toolsMenu.registerToggleAction( {
+		id: 'toggle-site-navigation-panel',
+		priority: 2,
+		useProps: useToggleButtonProps,
 	} );
 }