@elementor/editor-elements-panel 3.32.0-51

package/README.md

@@ -0,0 +1,4 @@
+# Editor Elements Panel
+
+> [!WARNING]
+> This package is under development and not ready for production use.

package/dist/index.d.mts

@@ -0,0 +1,12 @@
+import { ComponentType } from 'react';
+
+declare function init(): void;
+
+type Config = {
+    id: string;
+    label: string;
+    component: ComponentType;
+};
+declare function injectTab({ id, label, component }: Config): void;
+
+export { init, injectTab };

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+import { ComponentType } from 'react';
+
+declare function init(): void;
+
+type Config = {
+    id: string;
+    label: string;
+    component: ComponentType;
+};
+declare function injectTab({ id, label, component }: Config): void;
+
+export { init, injectTab };

package/dist/index.js

@@ -0,0 +1,184 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  init: () => init,
+  injectTab: () => injectTab
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/init.ts
+var import_editor = require("@elementor/editor");
+
+// src/components/elements-panel-tab.tsx
+var React = __toESM(require("react"));
+var import_ui = require("@elementor/ui");
+
+// src/hooks/use-active-tab.ts
+var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+
+// src/consts.ts
+var LEGACY_ELEMENTS_PANEL_COMPONENT_NAME = "panel/elements";
+var LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX = `${LEGACY_ELEMENTS_PANEL_COMPONENT_NAME}/`;
+
+// src/tabs.ts
+var tabs = {};
+function registerTab(tab) {
+  tabs[tab.id] = tab;
+}
+function getTab(id) {
+  return tabs[id] || null;
+}
+
+// src/utils/get-window.ts
+function getWindow() {
+  return window;
+}
+
+// src/hooks/use-active-tab.ts
+function useActiveTab() {
+  return (0, import_editor_v1_adapters.__privateUseListenTo)(
+    [
+      (0, import_editor_v1_adapters.v1ReadyEvent)(),
+      (0, import_editor_v1_adapters.routeOpenEvent)(LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX),
+      (0, import_editor_v1_adapters.routeCloseEvent)(LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX)
+    ],
+    () => {
+      const panelRoute = getWindow().$e.routes.getCurrent()?.panel;
+      if (!panelRoute || !panelRoute.startsWith(LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX)) {
+        return null;
+      }
+      const tab = panelRoute.replace(LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX, "");
+      return getTab(tab) ?? null;
+    }
+  );
+}
+
+// src/components/elements-panel-tab.tsx
+var PANEL_WRAPPER_ID = "elementor-panel-elements-wrapper";
+function ElementsPanelTab() {
+  const tab = useActiveTab();
+  const TabComponent = tab?.component;
+  const container = document.getElementById(PANEL_WRAPPER_ID);
+  return TabComponent && container ? /* @__PURE__ */ React.createElement(import_ui.Portal, { container }, /* @__PURE__ */ React.createElement(TabComponent, null)) : null;
+}
+
+// src/init.ts
+function init() {
+  (0, import_editor.injectIntoTop)({
+    id: "editor-elements-panel-tab",
+    component: ElementsPanelTab
+  });
+}
+
+// src/inject-tab.ts
+var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
+
+// src/utils/create-legacy-view.ts
+function createLegacyView() {
+  return getWindow().Marionette.CompositeView.extend({
+    template: `<div></div>`,
+    initialize() {
+      getWindow().elementor.getPanelView().getCurrentPageView().search.reset();
+    }
+  });
+}
+
+// src/utils/get-navigation-wrapper-element.ts
+var import_utils = require("@elementor/utils");
+var NAVIGATION_WRAPPER_ID = "elementor-panel-elements-navigation";
+var ElementsPanelWrapperElementNotFoundError = (0, import_utils.createError)({
+  code: "elements_panel_wrapper_element_not_found",
+  message: "Elementor Elements Panel wrapper element not found"
+});
+function getNavigationWrapperElement() {
+  const wrapper = document.getElementById(NAVIGATION_WRAPPER_ID);
+  if (!wrapper) {
+    throw new ElementsPanelWrapperElementNotFoundError();
+  }
+  return wrapper;
+}
+
+// src/utils/create-tab-nav-item.ts
+function createTabNavItem({ id, label, route, isActive }) {
+  const wrapper = getNavigationWrapperElement();
+  const btn = document.createElement("button");
+  btn.className = ["elementor-component-tab", "elementor-panel-navigation-tab", isActive ? "elementor-active" : ""].filter(Boolean).join(" ");
+  btn.setAttribute("data-tab", id);
+  btn.textContent = label;
+  btn.addEventListener("click", () => {
+    getWindow().$e.route(route);
+  });
+  wrapper.appendChild(btn);
+}
+
+// src/utils/get-legacy-elements-panel-component.ts
+var import_utils2 = require("@elementor/utils");
+var ComponentNotFoundError = (0, import_utils2.createError)({
+  code: "e_component_not_found",
+  message: "Elementor component not found"
+});
+function getLegacyElementsPanelComponent() {
+  const eComponent = getWindow().$e.components.get(LEGACY_ELEMENTS_PANEL_COMPONENT_NAME);
+  if (!eComponent) {
+    throw new ComponentNotFoundError({ context: { componentId: LEGACY_ELEMENTS_PANEL_COMPONENT_NAME } });
+  }
+  return eComponent;
+}
+
+// src/inject-tab.ts
+function injectTab({ id, label, component }) {
+  registerTab({ id, label, component });
+  (0, import_editor_v1_adapters2.__privateListenTo)((0, import_editor_v1_adapters2.v1ReadyEvent)(), () => {
+    getWindow().elementor.hooks.addFilter("panel/elements/regionViews", (regions, { elements }) => {
+      regions[id] = { region: elements, view: createLegacyView() };
+      return regions;
+    });
+  });
+  (0, import_editor_v1_adapters2.__privateListenTo)((0, import_editor_v1_adapters2.windowEvent)("elementor/panel/init"), () => {
+    getLegacyElementsPanelComponent().addTab(id, { title: label });
+  });
+  (0, import_editor_v1_adapters2.__privateListenTo)((0, import_editor_v1_adapters2.routeOpenEvent)(LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX), (e) => {
+    const route = `${LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX}${id}`;
+    createTabNavItem({
+      id,
+      label,
+      route,
+      isActive: "route" in e && e.route === route
+    });
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  init,
+  injectTab
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/init.ts","../src/components/elements-panel-tab.tsx","../src/hooks/use-active-tab.ts","../src/consts.ts","../src/tabs.ts","../src/utils/get-window.ts","../src/inject-tab.ts","../src/utils/create-legacy-view.ts","../src/utils/get-navigation-wrapper-element.ts","../src/utils/create-tab-nav-item.ts","../src/utils/get-legacy-elements-panel-component.ts"],"sourcesContent":["export { init } from './init';\nexport { injectTab } from './inject-tab';\n","import { injectIntoTop } from '@elementor/editor';\n\nimport { ElementsPanelTab } from './components/elements-panel-tab';\n\nexport function init() {\n\tinjectIntoTop( {\n\t\tid: 'editor-elements-panel-tab',\n\t\tcomponent: ElementsPanelTab,\n\t} );\n}\n","import * as React from 'react';\nimport { Portal } from '@elementor/ui';\n\nimport { useActiveTab } from '../hooks/use-active-tab';\n\nconst PANEL_WRAPPER_ID = 'elementor-panel-elements-wrapper';\n\nexport function ElementsPanelTab() {\n\tconst tab = useActiveTab();\n\n\tconst TabComponent = tab?.component;\n\tconst container = document.getElementById( PANEL_WRAPPER_ID );\n\n\treturn TabComponent && container ? (\n\t\t<Portal container={ container }>\n\t\t\t<TabComponent />\n\t\t</Portal>\n\t) : null;\n}\n","import {\n\t__privateUseListenTo as useListenTo,\n\trouteCloseEvent,\n\trouteOpenEvent,\n\tv1ReadyEvent,\n} from '@elementor/editor-v1-adapters';\n\nimport { LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX } from '../consts';\nimport { getTab } from '../tabs';\nimport { getWindow } from '../utils/get-window';\n\nexport function useActiveTab() {\n\treturn useListenTo(\n\t\t[\n\t\t\tv1ReadyEvent(),\n\t\t\trouteOpenEvent( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX ),\n\t\t\trouteCloseEvent( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX ),\n\t\t],\n\t\t() => {\n\t\t\tconst panelRoute = getWindow().$e.routes.getCurrent()?.panel;\n\n\t\t\tif ( ! panelRoute || ! panelRoute.startsWith( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX ) ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst tab = panelRoute.replace( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX, '' );\n\n\t\t\treturn getTab( tab ) ?? null;\n\t\t}\n\t);\n}\n","export const LEGACY_ELEMENTS_PANEL_COMPONENT_NAME = 'panel/elements';\nexport const LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX = `${ LEGACY_ELEMENTS_PANEL_COMPONENT_NAME }/`;\n","import { type ComponentType } from 'react';\n\ntype Tab = {\n\tid: string;\n\tlabel: string;\n\tcomponent: ComponentType;\n};\n\nconst tabs: Record< Tab[ 'id' ], Tab > = {};\n\nexport function registerTab( tab: Tab ) {\n\ttabs[ tab.id ] = tab;\n}\n\nexport function getTab( id: string ): Tab | null {\n\treturn tabs[ id ] || null;\n}\n","type EditorElementsPanelExtendsWindow = Window & {\n\tMarionette: {\n\t\tCompositeView: {\n\t\t\textend: ( options: { template: string; initialize: () => void } ) => {\n\t\t\t\tnew (): {\n\t\t\t\t\ttemplate: string;\n\t\t\t\t\tinitialize: () => void;\n\t\t\t\t};\n\t\t\t};\n\t\t};\n\t};\n\n\telementor: {\n\t\thooks: {\n\t\t\taddFilter: (\n\t\t\t\tfilterName: string,\n\t\t\t\tcallback: (\n\t\t\t\t\tregions: Record< string, unknown >,\n\t\t\t\t\toptions: { elements: unknown }\n\t\t\t\t) => Record< string, unknown >\n\t\t\t) => void;\n\t\t};\n\n\t\tgetPanelView: () => {\n\t\t\tgetCurrentPageView: () => {\n\t\t\t\tsearch: {\n\t\t\t\t\treset: () => void;\n\t\t\t\t};\n\t\t\t};\n\t\t};\n\t};\n\n\t$e: {\n\t\troutes: {\n\t\t\tgetCurrent: () => Record< string, string >;\n\t\t};\n\n\t\troute: ( route: string ) => void;\n\n\t\tcomponents: {\n\t\t\tget: ( componentName: string ) =>\n\t\t\t\t| {\n\t\t\t\t\t\taddTab: ( id: string, options: { title: string } ) => void;\n\t\t\t\t\t\tremoveTab: ( id: string ) => void;\n\t\t\t\t  }\n\t\t\t\t| undefined;\n\t\t};\n\t};\n};\n\nexport function getWindow() {\n\treturn window as unknown as EditorElementsPanelExtendsWindow;\n}\n","import { type ComponentType } from 'react';\nimport {\n\t__privateListenTo as listenTo,\n\trouteOpenEvent,\n\tv1ReadyEvent,\n\twindowEvent,\n} from '@elementor/editor-v1-adapters';\n\nimport { LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX } from './consts';\nimport { registerTab } from './tabs';\nimport { createLegacyView } from './utils/create-legacy-view';\nimport { createTabNavItem } from './utils/create-tab-nav-item';\nimport { getLegacyElementsPanelComponent } from './utils/get-legacy-elements-panel-component';\nimport { getWindow } from './utils/get-window';\n\ntype Config = {\n\tid: string;\n\tlabel: string;\n\tcomponent: ComponentType;\n};\n\nexport function injectTab( { id, label, component }: Config ) {\n\tregisterTab( { id, label, component } );\n\n\tlistenTo( v1ReadyEvent(), () => {\n\t\tgetWindow().elementor.hooks.addFilter( 'panel/elements/regionViews', ( regions, { elements } ) => {\n\t\t\t// Creating a empty legacy view that will be replaced by react component.\n\t\t\tregions[ id ] = { region: elements, view: createLegacyView() };\n\n\t\t\treturn regions;\n\t\t} );\n\t} );\n\n\tlistenTo( windowEvent( 'elementor/panel/init' ), () => {\n\t\t// when adding a tab to the legacy elements panel, it will generate new route based on the id.\n\t\tgetLegacyElementsPanelComponent().addTab( id, { title: label } );\n\t} );\n\n\tlistenTo( routeOpenEvent( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX ), ( e ) => {\n\t\tconst route = `${ LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX }${ id }`;\n\n\t\tcreateTabNavItem( {\n\t\t\tid,\n\t\t\tlabel,\n\t\t\troute,\n\t\t\tisActive: 'route' in e && e.route === route,\n\t\t} );\n\t} );\n}\n","import { getWindow } from './get-window';\n\nexport function createLegacyView() {\n\treturn getWindow().Marionette.CompositeView.extend( {\n\t\ttemplate: `<div></div>`,\n\n\t\tinitialize() {\n\t\t\tgetWindow().elementor.getPanelView().getCurrentPageView().search.reset();\n\t\t},\n\t} );\n}\n","import { createError } from '@elementor/utils';\n\nconst NAVIGATION_WRAPPER_ID = 'elementor-panel-elements-navigation';\n\nconst ElementsPanelWrapperElementNotFoundError = createError( {\n\tcode: 'elements_panel_wrapper_element_not_found',\n\tmessage: 'Elementor Elements Panel wrapper element not found',\n} );\n\nexport function getNavigationWrapperElement() {\n\tconst wrapper = document.getElementById( NAVIGATION_WRAPPER_ID );\n\n\tif ( ! wrapper ) {\n\t\tthrow new ElementsPanelWrapperElementNotFoundError();\n\t}\n\n\treturn wrapper;\n}\n","import { getNavigationWrapperElement } from './get-navigation-wrapper-element';\nimport { getWindow } from './get-window';\n\ntype Args = {\n\tid: string;\n\tlabel: string;\n\troute: string;\n\tisActive: boolean;\n};\n\nexport function createTabNavItem( { id, label, route, isActive }: Args ): void {\n\tconst wrapper = getNavigationWrapperElement();\n\n\tconst btn = document.createElement( 'button' );\n\n\tbtn.className = [ 'elementor-component-tab', 'elementor-panel-navigation-tab', isActive ? 'elementor-active' : '' ]\n\t\t.filter( Boolean )\n\t\t.join( ' ' );\n\n\tbtn.setAttribute( 'data-tab', id );\n\n\tbtn.textContent = label;\n\n\tbtn.addEventListener( 'click', () => {\n\t\tgetWindow().$e.route( route );\n\t} );\n\n\twrapper.appendChild( btn );\n}\n","import { createError } from '@elementor/utils';\n\nimport { LEGACY_ELEMENTS_PANEL_COMPONENT_NAME } from '../consts';\nimport { getWindow } from './get-window';\n\nconst ComponentNotFoundError = createError< { componentId: string } >( {\n\tcode: 'e_component_not_found',\n\tmessage: 'Elementor component not found',\n} );\n\nexport function getLegacyElementsPanelComponent() {\n\tconst eComponent = getWindow().$e.components.get( LEGACY_ELEMENTS_PANEL_COMPONENT_NAME );\n\n\tif ( ! eComponent ) {\n\t\tthrow new ComponentNotFoundError( { context: { componentId: LEGACY_ELEMENTS_PANEL_COMPONENT_NAME } } );\n\t}\n\n\treturn eComponent;\n}\n"],"mappings":"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","names":["useListenTo","import_editor_v1_adapters","import_utils","listenTo"]}

package/dist/index.mjs

@@ -0,0 +1,156 @@
+// src/init.ts
+import { injectIntoTop } from "@elementor/editor";
+
+// src/components/elements-panel-tab.tsx
+import * as React from "react";
+import { Portal } from "@elementor/ui";
+
+// src/hooks/use-active-tab.ts
+import {
+  __privateUseListenTo as useListenTo,
+  routeCloseEvent,
+  routeOpenEvent,
+  v1ReadyEvent
+} from "@elementor/editor-v1-adapters";
+
+// src/consts.ts
+var LEGACY_ELEMENTS_PANEL_COMPONENT_NAME = "panel/elements";
+var LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX = `${LEGACY_ELEMENTS_PANEL_COMPONENT_NAME}/`;
+
+// src/tabs.ts
+var tabs = {};
+function registerTab(tab) {
+  tabs[tab.id] = tab;
+}
+function getTab(id) {
+  return tabs[id] || null;
+}
+
+// src/utils/get-window.ts
+function getWindow() {
+  return window;
+}
+
+// src/hooks/use-active-tab.ts
+function useActiveTab() {
+  return useListenTo(
+    [
+      v1ReadyEvent(),
+      routeOpenEvent(LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX),
+      routeCloseEvent(LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX)
+    ],
+    () => {
+      const panelRoute = getWindow().$e.routes.getCurrent()?.panel;
+      if (!panelRoute || !panelRoute.startsWith(LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX)) {
+        return null;
+      }
+      const tab = panelRoute.replace(LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX, "");
+      return getTab(tab) ?? null;
+    }
+  );
+}
+
+// src/components/elements-panel-tab.tsx
+var PANEL_WRAPPER_ID = "elementor-panel-elements-wrapper";
+function ElementsPanelTab() {
+  const tab = useActiveTab();
+  const TabComponent = tab?.component;
+  const container = document.getElementById(PANEL_WRAPPER_ID);
+  return TabComponent && container ? /* @__PURE__ */ React.createElement(Portal, { container }, /* @__PURE__ */ React.createElement(TabComponent, null)) : null;
+}
+
+// src/init.ts
+function init() {
+  injectIntoTop({
+    id: "editor-elements-panel-tab",
+    component: ElementsPanelTab
+  });
+}
+
+// src/inject-tab.ts
+import {
+  __privateListenTo as listenTo,
+  routeOpenEvent as routeOpenEvent2,
+  v1ReadyEvent as v1ReadyEvent2,
+  windowEvent
+} from "@elementor/editor-v1-adapters";
+
+// src/utils/create-legacy-view.ts
+function createLegacyView() {
+  return getWindow().Marionette.CompositeView.extend({
+    template: `<div></div>`,
+    initialize() {
+      getWindow().elementor.getPanelView().getCurrentPageView().search.reset();
+    }
+  });
+}
+
+// src/utils/get-navigation-wrapper-element.ts
+import { createError } from "@elementor/utils";
+var NAVIGATION_WRAPPER_ID = "elementor-panel-elements-navigation";
+var ElementsPanelWrapperElementNotFoundError = createError({
+  code: "elements_panel_wrapper_element_not_found",
+  message: "Elementor Elements Panel wrapper element not found"
+});
+function getNavigationWrapperElement() {
+  const wrapper = document.getElementById(NAVIGATION_WRAPPER_ID);
+  if (!wrapper) {
+    throw new ElementsPanelWrapperElementNotFoundError();
+  }
+  return wrapper;
+}
+
+// src/utils/create-tab-nav-item.ts
+function createTabNavItem({ id, label, route, isActive }) {
+  const wrapper = getNavigationWrapperElement();
+  const btn = document.createElement("button");
+  btn.className = ["elementor-component-tab", "elementor-panel-navigation-tab", isActive ? "elementor-active" : ""].filter(Boolean).join(" ");
+  btn.setAttribute("data-tab", id);
+  btn.textContent = label;
+  btn.addEventListener("click", () => {
+    getWindow().$e.route(route);
+  });
+  wrapper.appendChild(btn);
+}
+
+// src/utils/get-legacy-elements-panel-component.ts
+import { createError as createError2 } from "@elementor/utils";
+var ComponentNotFoundError = createError2({
+  code: "e_component_not_found",
+  message: "Elementor component not found"
+});
+function getLegacyElementsPanelComponent() {
+  const eComponent = getWindow().$e.components.get(LEGACY_ELEMENTS_PANEL_COMPONENT_NAME);
+  if (!eComponent) {
+    throw new ComponentNotFoundError({ context: { componentId: LEGACY_ELEMENTS_PANEL_COMPONENT_NAME } });
+  }
+  return eComponent;
+}
+
+// src/inject-tab.ts
+function injectTab({ id, label, component }) {
+  registerTab({ id, label, component });
+  listenTo(v1ReadyEvent2(), () => {
+    getWindow().elementor.hooks.addFilter("panel/elements/regionViews", (regions, { elements }) => {
+      regions[id] = { region: elements, view: createLegacyView() };
+      return regions;
+    });
+  });
+  listenTo(windowEvent("elementor/panel/init"), () => {
+    getLegacyElementsPanelComponent().addTab(id, { title: label });
+  });
+  listenTo(routeOpenEvent2(LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX), (e) => {
+    const route = `${LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX}${id}`;
+    createTabNavItem({
+      id,
+      label,
+      route,
+      isActive: "route" in e && e.route === route
+    });
+  });
+}
+export {
+  init,
+  injectTab
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/init.ts","../src/components/elements-panel-tab.tsx","../src/hooks/use-active-tab.ts","../src/consts.ts","../src/tabs.ts","../src/utils/get-window.ts","../src/inject-tab.ts","../src/utils/create-legacy-view.ts","../src/utils/get-navigation-wrapper-element.ts","../src/utils/create-tab-nav-item.ts","../src/utils/get-legacy-elements-panel-component.ts"],"sourcesContent":["import { injectIntoTop } from '@elementor/editor';\n\nimport { ElementsPanelTab } from './components/elements-panel-tab';\n\nexport function init() {\n\tinjectIntoTop( {\n\t\tid: 'editor-elements-panel-tab',\n\t\tcomponent: ElementsPanelTab,\n\t} );\n}\n","import * as React from 'react';\nimport { Portal } from '@elementor/ui';\n\nimport { useActiveTab } from '../hooks/use-active-tab';\n\nconst PANEL_WRAPPER_ID = 'elementor-panel-elements-wrapper';\n\nexport function ElementsPanelTab() {\n\tconst tab = useActiveTab();\n\n\tconst TabComponent = tab?.component;\n\tconst container = document.getElementById( PANEL_WRAPPER_ID );\n\n\treturn TabComponent && container ? (\n\t\t<Portal container={ container }>\n\t\t\t<TabComponent />\n\t\t</Portal>\n\t) : null;\n}\n","import {\n\t__privateUseListenTo as useListenTo,\n\trouteCloseEvent,\n\trouteOpenEvent,\n\tv1ReadyEvent,\n} from '@elementor/editor-v1-adapters';\n\nimport { LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX } from '../consts';\nimport { getTab } from '../tabs';\nimport { getWindow } from '../utils/get-window';\n\nexport function useActiveTab() {\n\treturn useListenTo(\n\t\t[\n\t\t\tv1ReadyEvent(),\n\t\t\trouteOpenEvent( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX ),\n\t\t\trouteCloseEvent( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX ),\n\t\t],\n\t\t() => {\n\t\t\tconst panelRoute = getWindow().$e.routes.getCurrent()?.panel;\n\n\t\t\tif ( ! panelRoute || ! panelRoute.startsWith( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX ) ) {\n\t\t\t\treturn null;\n\t\t\t}\n\n\t\t\tconst tab = panelRoute.replace( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX, '' );\n\n\t\t\treturn getTab( tab ) ?? null;\n\t\t}\n\t);\n}\n","export const LEGACY_ELEMENTS_PANEL_COMPONENT_NAME = 'panel/elements';\nexport const LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX = `${ LEGACY_ELEMENTS_PANEL_COMPONENT_NAME }/`;\n","import { type ComponentType } from 'react';\n\ntype Tab = {\n\tid: string;\n\tlabel: string;\n\tcomponent: ComponentType;\n};\n\nconst tabs: Record< Tab[ 'id' ], Tab > = {};\n\nexport function registerTab( tab: Tab ) {\n\ttabs[ tab.id ] = tab;\n}\n\nexport function getTab( id: string ): Tab | null {\n\treturn tabs[ id ] || null;\n}\n","type EditorElementsPanelExtendsWindow = Window & {\n\tMarionette: {\n\t\tCompositeView: {\n\t\t\textend: ( options: { template: string; initialize: () => void } ) => {\n\t\t\t\tnew (): {\n\t\t\t\t\ttemplate: string;\n\t\t\t\t\tinitialize: () => void;\n\t\t\t\t};\n\t\t\t};\n\t\t};\n\t};\n\n\telementor: {\n\t\thooks: {\n\t\t\taddFilter: (\n\t\t\t\tfilterName: string,\n\t\t\t\tcallback: (\n\t\t\t\t\tregions: Record< string, unknown >,\n\t\t\t\t\toptions: { elements: unknown }\n\t\t\t\t) => Record< string, unknown >\n\t\t\t) => void;\n\t\t};\n\n\t\tgetPanelView: () => {\n\t\t\tgetCurrentPageView: () => {\n\t\t\t\tsearch: {\n\t\t\t\t\treset: () => void;\n\t\t\t\t};\n\t\t\t};\n\t\t};\n\t};\n\n\t$e: {\n\t\troutes: {\n\t\t\tgetCurrent: () => Record< string, string >;\n\t\t};\n\n\t\troute: ( route: string ) => void;\n\n\t\tcomponents: {\n\t\t\tget: ( componentName: string ) =>\n\t\t\t\t| {\n\t\t\t\t\t\taddTab: ( id: string, options: { title: string } ) => void;\n\t\t\t\t\t\tremoveTab: ( id: string ) => void;\n\t\t\t\t  }\n\t\t\t\t| undefined;\n\t\t};\n\t};\n};\n\nexport function getWindow() {\n\treturn window as unknown as EditorElementsPanelExtendsWindow;\n}\n","import { type ComponentType } from 'react';\nimport {\n\t__privateListenTo as listenTo,\n\trouteOpenEvent,\n\tv1ReadyEvent,\n\twindowEvent,\n} from '@elementor/editor-v1-adapters';\n\nimport { LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX } from './consts';\nimport { registerTab } from './tabs';\nimport { createLegacyView } from './utils/create-legacy-view';\nimport { createTabNavItem } from './utils/create-tab-nav-item';\nimport { getLegacyElementsPanelComponent } from './utils/get-legacy-elements-panel-component';\nimport { getWindow } from './utils/get-window';\n\ntype Config = {\n\tid: string;\n\tlabel: string;\n\tcomponent: ComponentType;\n};\n\nexport function injectTab( { id, label, component }: Config ) {\n\tregisterTab( { id, label, component } );\n\n\tlistenTo( v1ReadyEvent(), () => {\n\t\tgetWindow().elementor.hooks.addFilter( 'panel/elements/regionViews', ( regions, { elements } ) => {\n\t\t\t// Creating a empty legacy view that will be replaced by react component.\n\t\t\tregions[ id ] = { region: elements, view: createLegacyView() };\n\n\t\t\treturn regions;\n\t\t} );\n\t} );\n\n\tlistenTo( windowEvent( 'elementor/panel/init' ), () => {\n\t\t// when adding a tab to the legacy elements panel, it will generate new route based on the id.\n\t\tgetLegacyElementsPanelComponent().addTab( id, { title: label } );\n\t} );\n\n\tlistenTo( routeOpenEvent( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX ), ( e ) => {\n\t\tconst route = `${ LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX }${ id }`;\n\n\t\tcreateTabNavItem( {\n\t\t\tid,\n\t\t\tlabel,\n\t\t\troute,\n\t\t\tisActive: 'route' in e && e.route === route,\n\t\t} );\n\t} );\n}\n","import { getWindow } from './get-window';\n\nexport function createLegacyView() {\n\treturn getWindow().Marionette.CompositeView.extend( {\n\t\ttemplate: `<div></div>`,\n\n\t\tinitialize() {\n\t\t\tgetWindow().elementor.getPanelView().getCurrentPageView().search.reset();\n\t\t},\n\t} );\n}\n","import { createError } from '@elementor/utils';\n\nconst NAVIGATION_WRAPPER_ID = 'elementor-panel-elements-navigation';\n\nconst ElementsPanelWrapperElementNotFoundError = createError( {\n\tcode: 'elements_panel_wrapper_element_not_found',\n\tmessage: 'Elementor Elements Panel wrapper element not found',\n} );\n\nexport function getNavigationWrapperElement() {\n\tconst wrapper = document.getElementById( NAVIGATION_WRAPPER_ID );\n\n\tif ( ! wrapper ) {\n\t\tthrow new ElementsPanelWrapperElementNotFoundError();\n\t}\n\n\treturn wrapper;\n}\n","import { getNavigationWrapperElement } from './get-navigation-wrapper-element';\nimport { getWindow } from './get-window';\n\ntype Args = {\n\tid: string;\n\tlabel: string;\n\troute: string;\n\tisActive: boolean;\n};\n\nexport function createTabNavItem( { id, label, route, isActive }: Args ): void {\n\tconst wrapper = getNavigationWrapperElement();\n\n\tconst btn = document.createElement( 'button' );\n\n\tbtn.className = [ 'elementor-component-tab', 'elementor-panel-navigation-tab', isActive ? 'elementor-active' : '' ]\n\t\t.filter( Boolean )\n\t\t.join( ' ' );\n\n\tbtn.setAttribute( 'data-tab', id );\n\n\tbtn.textContent = label;\n\n\tbtn.addEventListener( 'click', () => {\n\t\tgetWindow().$e.route( route );\n\t} );\n\n\twrapper.appendChild( btn );\n}\n","import { createError } from '@elementor/utils';\n\nimport { LEGACY_ELEMENTS_PANEL_COMPONENT_NAME } from '../consts';\nimport { getWindow } from './get-window';\n\nconst ComponentNotFoundError = createError< { componentId: string } >( {\n\tcode: 'e_component_not_found',\n\tmessage: 'Elementor component not found',\n} );\n\nexport function getLegacyElementsPanelComponent() {\n\tconst eComponent = getWindow().$e.components.get( LEGACY_ELEMENTS_PANEL_COMPONENT_NAME );\n\n\tif ( ! eComponent ) {\n\t\tthrow new ComponentNotFoundError( { context: { componentId: LEGACY_ELEMENTS_PANEL_COMPONENT_NAME } } );\n\t}\n\n\treturn eComponent;\n}\n"],"mappings":"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","names":["routeOpenEvent","v1ReadyEvent","createError","createError","v1ReadyEvent","routeOpenEvent"]}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@elementor/editor-elements-panel",
+  "version": "3.32.0-51",
+  "private": false,
+  "author": "Elementor Team",
+  "homepage": "https://elementor.com/",
+  "license": "GPL-3.0-or-later",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/elementor/elementor.git",
+    "directory": "packages/core/editor-elements-panel"
+  },
+  "bugs": {
+    "url": "https://github.com/elementor/elementor/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "README.md",
+    "CHANGELOG.md",
+    "/dist",
+    "/src",
+    "!**/__tests__"
+  ],
+  "scripts": {
+    "build": "tsup --config=../../tsup.build.ts",
+    "dev": "tsup --config=../../tsup.dev.ts"
+  },
+  "dependencies": {
+    "@elementor/ui": "1.36.8",
+    "@elementor/editor": "3.32.0-51",
+    "@elementor/editor-v1-adapters": "3.32.0-51",
+    "@elementor/utils": "3.32.0-51"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5"
+  }
+}

package/src/components/elements-panel-tab.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Portal } from '@elementor/ui';
+
+import { useActiveTab } from '../hooks/use-active-tab';
+
+const PANEL_WRAPPER_ID = 'elementor-panel-elements-wrapper';
+
+export function ElementsPanelTab() {
+	const tab = useActiveTab();
+
+	const TabComponent = tab?.component;
+	const container = document.getElementById( PANEL_WRAPPER_ID );
+
+	return TabComponent && container ? (
+		<Portal container={ container }>
+			<TabComponent />
+		</Portal>
+	) : null;
+}

package/src/consts.ts

@@ -0,0 +1,2 @@
+export const LEGACY_ELEMENTS_PANEL_COMPONENT_NAME = 'panel/elements';
+export const LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX = `${ LEGACY_ELEMENTS_PANEL_COMPONENT_NAME }/`;

package/src/hooks/use-active-tab.ts

@@ -0,0 +1,31 @@
+import {
+	__privateUseListenTo as useListenTo,
+	routeCloseEvent,
+	routeOpenEvent,
+	v1ReadyEvent,
+} from '@elementor/editor-v1-adapters';
+
+import { LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX } from '../consts';
+import { getTab } from '../tabs';
+import { getWindow } from '../utils/get-window';
+
+export function useActiveTab() {
+	return useListenTo(
+		[
+			v1ReadyEvent(),
+			routeOpenEvent( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX ),
+			routeCloseEvent( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX ),
+		],
+		() => {
+			const panelRoute = getWindow().$e.routes.getCurrent()?.panel;
+
+			if ( ! panelRoute || ! panelRoute.startsWith( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX ) ) {
+				return null;
+			}
+
+			const tab = panelRoute.replace( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX, '' );
+
+			return getTab( tab ) ?? null;
+		}
+	);
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export { init } from './init';
+export { injectTab } from './inject-tab';

package/src/init.ts

@@ -0,0 +1,10 @@
+import { injectIntoTop } from '@elementor/editor';
+
+import { ElementsPanelTab } from './components/elements-panel-tab';
+
+export function init() {
+	injectIntoTop( {
+		id: 'editor-elements-panel-tab',
+		component: ElementsPanelTab,
+	} );
+}

package/src/inject-tab.ts

@@ -0,0 +1,49 @@
+import { type ComponentType } from 'react';
+import {
+	__privateListenTo as listenTo,
+	routeOpenEvent,
+	v1ReadyEvent,
+	windowEvent,
+} from '@elementor/editor-v1-adapters';
+
+import { LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX } from './consts';
+import { registerTab } from './tabs';
+import { createLegacyView } from './utils/create-legacy-view';
+import { createTabNavItem } from './utils/create-tab-nav-item';
+import { getLegacyElementsPanelComponent } from './utils/get-legacy-elements-panel-component';
+import { getWindow } from './utils/get-window';
+
+type Config = {
+	id: string;
+	label: string;
+	component: ComponentType;
+};
+
+export function injectTab( { id, label, component }: Config ) {
+	registerTab( { id, label, component } );
+
+	listenTo( v1ReadyEvent(), () => {
+		getWindow().elementor.hooks.addFilter( 'panel/elements/regionViews', ( regions, { elements } ) => {
+			// Creating a empty legacy view that will be replaced by react component.
+			regions[ id ] = { region: elements, view: createLegacyView() };
+
+			return regions;
+		} );
+	} );
+
+	listenTo( windowEvent( 'elementor/panel/init' ), () => {
+		// when adding a tab to the legacy elements panel, it will generate new route based on the id.
+		getLegacyElementsPanelComponent().addTab( id, { title: label } );
+	} );
+
+	listenTo( routeOpenEvent( LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX ), ( e ) => {
+		const route = `${ LEGACY_ELEMENTS_PANEL_ROUTE_PREFIX }${ id }`;
+
+		createTabNavItem( {
+			id,
+			label,
+			route,
+			isActive: 'route' in e && e.route === route,
+		} );
+	} );
+}

package/src/tabs.ts

@@ -0,0 +1,17 @@
+import { type ComponentType } from 'react';
+
+type Tab = {
+	id: string;
+	label: string;
+	component: ComponentType;
+};
+
+const tabs: Record< Tab[ 'id' ], Tab > = {};
+
+export function registerTab( tab: Tab ) {
+	tabs[ tab.id ] = tab;
+}
+
+export function getTab( id: string ): Tab | null {
+	return tabs[ id ] || null;
+}

package/src/utils/create-legacy-view.ts

@@ -0,0 +1,11 @@
+import { getWindow } from './get-window';
+
+export function createLegacyView() {
+	return getWindow().Marionette.CompositeView.extend( {
+		template: `<div></div>`,
+
+		initialize() {
+			getWindow().elementor.getPanelView().getCurrentPageView().search.reset();
+		},
+	} );
+}

package/src/utils/create-tab-nav-item.ts

@@ -0,0 +1,29 @@
+import { getNavigationWrapperElement } from './get-navigation-wrapper-element';
+import { getWindow } from './get-window';
+
+type Args = {
+	id: string;
+	label: string;
+	route: string;
+	isActive: boolean;
+};
+
+export function createTabNavItem( { id, label, route, isActive }: Args ): void {
+	const wrapper = getNavigationWrapperElement();
+
+	const btn = document.createElement( 'button' );
+
+	btn.className = [ 'elementor-component-tab', 'elementor-panel-navigation-tab', isActive ? 'elementor-active' : '' ]
+		.filter( Boolean )
+		.join( ' ' );
+
+	btn.setAttribute( 'data-tab', id );
+
+	btn.textContent = label;
+
+	btn.addEventListener( 'click', () => {
+		getWindow().$e.route( route );
+	} );
+
+	wrapper.appendChild( btn );
+}

package/src/utils/get-legacy-elements-panel-component.ts

@@ -0,0 +1,19 @@
+import { createError } from '@elementor/utils';
+
+import { LEGACY_ELEMENTS_PANEL_COMPONENT_NAME } from '../consts';
+import { getWindow } from './get-window';
+
+const ComponentNotFoundError = createError< { componentId: string } >( {
+	code: 'e_component_not_found',
+	message: 'Elementor component not found',
+} );
+
+export function getLegacyElementsPanelComponent() {
+	const eComponent = getWindow().$e.components.get( LEGACY_ELEMENTS_PANEL_COMPONENT_NAME );
+
+	if ( ! eComponent ) {
+		throw new ComponentNotFoundError( { context: { componentId: LEGACY_ELEMENTS_PANEL_COMPONENT_NAME } } );
+	}
+
+	return eComponent;
+}

package/src/utils/get-navigation-wrapper-element.ts

@@ -0,0 +1,18 @@
+import { createError } from '@elementor/utils';
+
+const NAVIGATION_WRAPPER_ID = 'elementor-panel-elements-navigation';
+
+const ElementsPanelWrapperElementNotFoundError = createError( {
+	code: 'elements_panel_wrapper_element_not_found',
+	message: 'Elementor Elements Panel wrapper element not found',
+} );
+
+export function getNavigationWrapperElement() {
+	const wrapper = document.getElementById( NAVIGATION_WRAPPER_ID );
+
+	if ( ! wrapper ) {
+		throw new ElementsPanelWrapperElementNotFoundError();
+	}
+
+	return wrapper;
+}

package/src/utils/get-window.ts

@@ -0,0 +1,53 @@
+type EditorElementsPanelExtendsWindow = Window & {
+	Marionette: {
+		CompositeView: {
+			extend: ( options: { template: string; initialize: () => void } ) => {
+				new (): {
+					template: string;
+					initialize: () => void;
+				};
+			};
+		};
+	};
+
+	elementor: {
+		hooks: {
+			addFilter: (
+				filterName: string,
+				callback: (
+					regions: Record< string, unknown >,
+					options: { elements: unknown }
+				) => Record< string, unknown >
+			) => void;
+		};
+
+		getPanelView: () => {
+			getCurrentPageView: () => {
+				search: {
+					reset: () => void;
+				};
+			};
+		};
+	};
+
+	$e: {
+		routes: {
+			getCurrent: () => Record< string, string >;
+		};
+
+		route: ( route: string ) => void;
+
+		components: {
+			get: ( componentName: string ) =>
+				| {
+						addTab: ( id: string, options: { title: string } ) => void;
+						removeTab: ( id: string ) => void;
+				  }
+				| undefined;
+		};
+	};
+};
+
+export function getWindow() {
+	return window as unknown as EditorElementsPanelExtendsWindow;
+}