@elementor/editor-elements-panel 4.0.0-manual → 4.1.0-684

package/dist/index.d.mts

@@ -11,10 +11,13 @@ type Config = {
 declare function injectTab({ id, label, component, position }: Config): void;
 
 type Tab = {
-    id: string;
     label: string;
     component: ComponentType;
+    priority: number;
 };
-declare function registerTab(tab: Tab): void;
+declare function registerTab({ id, priority, ...props }: Omit<Tab, 'priority'> & {
+    id: string;
+    priority?: number;
+}): void;
 
 export { init, injectTab, registerTab };

package/dist/index.d.ts

@@ -11,10 +11,13 @@ type Config = {
 declare function injectTab({ id, label, component, position }: Config): void;
 
 type Tab = {
-    id: string;
     label: string;
     component: ComponentType;
+    priority: number;
 };
-declare function registerTab(tab: Tab): void;
+declare function registerTab({ id, priority, ...props }: Omit<Tab, 'priority'> & {
+    id: string;
+    priority?: number;
+}): void;
 
 export { init, injectTab, registerTab };

package/dist/index.js

@@ -51,12 +51,20 @@ 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;
+var registry = /* @__PURE__ */ new Map();
+var DEFAULT_PRIORITY = 10;
+function registerTab({
+  id,
+  priority = DEFAULT_PRIORITY,
+  ...props
+}) {
+  const existing = registry.get(id);
+  if (!existing || priority <= existing.priority) {
+    registry.set(id, { ...props, priority });
+  }
 }
 function getTab(id) {
-  return tabs[id] || null;
+  return registry.get(id) ?? null;
 }
 
 // src/utils/get-window.ts

package/dist/index.js.map

@@ -1 +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';\nexport { registerTab } from './tabs';\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\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';\n\ntype Config = {\n\tid: string;\n\tlabel: string;\n\tcomponent: ComponentType;\n\tposition?: number;\n};\n\nexport function injectTab( { id, label, component, position }: Config ) {\n\tregisterTab( { id, label, component } );\n\n\tlistenTo( v1ReadyEvent(), () => {\n\t\twindow.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\tposition,\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\tposition?: number;\n};\n\nexport function createTabNavItem( { id, label, route, isActive, position }: 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\tif ( position !== undefined && wrapper.children[ position ] ) {\n\t\twrapper.insertBefore( btn, wrapper.children[ position ] );\n\t} else {\n\t\twrapper.appendChild( btn );\n\t}\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"]}
+{"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';\nexport { registerTab } from './tabs';\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\tlabel: string;\n\tcomponent: ComponentType;\n\tpriority: number;\n};\n\nconst registry = new Map< string, Tab >();\n\nconst DEFAULT_PRIORITY = 10;\n\nexport function registerTab( {\n\tid,\n\tpriority = DEFAULT_PRIORITY,\n\t...props\n}: Omit< Tab, 'priority' > & { id: string; priority?: number } ) {\n\tconst existing = registry.get( id );\n\n\tif ( ! existing || priority <= existing.priority ) {\n\t\tregistry.set( id, { ...props, priority } );\n\t}\n}\n\nexport function getTab( id: string ): Tab | null {\n\treturn registry.get( 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\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';\n\ntype Config = {\n\tid: string;\n\tlabel: string;\n\tcomponent: ComponentType;\n\tposition?: number;\n};\n\nexport function injectTab( { id, label, component, position }: Config ) {\n\tregisterTab( { id, label, component } );\n\n\tlistenTo( v1ReadyEvent(), () => {\n\t\twindow.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\tposition,\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\tposition?: number;\n};\n\nexport function createTabNavItem( { id, label, route, isActive, position }: 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\tif ( position !== undefined && wrapper.children[ position ] ) {\n\t\twrapper.insertBefore( btn, wrapper.children[ position ] );\n\t} else {\n\t\twrapper.appendChild( btn );\n\t}\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

@@ -18,12 +18,20 @@ 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;
+var registry = /* @__PURE__ */ new Map();
+var DEFAULT_PRIORITY = 10;
+function registerTab({
+  id,
+  priority = DEFAULT_PRIORITY,
+  ...props
+}) {
+  const existing = registry.get(id);
+  if (!existing || priority <= existing.priority) {
+    registry.set(id, { ...props, priority });
+  }
 }
 function getTab(id) {
-  return tabs[id] || null;
+  return registry.get(id) ?? null;
 }
 
 // src/utils/get-window.ts

package/dist/index.mjs.map

@@ -1 +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\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';\n\ntype Config = {\n\tid: string;\n\tlabel: string;\n\tcomponent: ComponentType;\n\tposition?: number;\n};\n\nexport function injectTab( { id, label, component, position }: Config ) {\n\tregisterTab( { id, label, component } );\n\n\tlistenTo( v1ReadyEvent(), () => {\n\t\twindow.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\tposition,\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\tposition?: number;\n};\n\nexport function createTabNavItem( { id, label, route, isActive, position }: 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\tif ( position !== undefined && wrapper.children[ position ] ) {\n\t\twrapper.insertBefore( btn, wrapper.children[ position ] );\n\t} else {\n\t\twrapper.appendChild( btn );\n\t}\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"]}
+{"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\tlabel: string;\n\tcomponent: ComponentType;\n\tpriority: number;\n};\n\nconst registry = new Map< string, Tab >();\n\nconst DEFAULT_PRIORITY = 10;\n\nexport function registerTab( {\n\tid,\n\tpriority = DEFAULT_PRIORITY,\n\t...props\n}: Omit< Tab, 'priority' > & { id: string; priority?: number } ) {\n\tconst existing = registry.get( id );\n\n\tif ( ! existing || priority <= existing.priority ) {\n\t\tregistry.set( id, { ...props, priority } );\n\t}\n}\n\nexport function getTab( id: string ): Tab | null {\n\treturn registry.get( 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\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';\n\ntype Config = {\n\tid: string;\n\tlabel: string;\n\tcomponent: ComponentType;\n\tposition?: number;\n};\n\nexport function injectTab( { id, label, component, position }: Config ) {\n\tregisterTab( { id, label, component } );\n\n\tlistenTo( v1ReadyEvent(), () => {\n\t\twindow.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\tposition,\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\tposition?: number;\n};\n\nexport function createTabNavItem( { id, label, route, isActive, position }: 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\tif ( position !== undefined && wrapper.children[ position ] ) {\n\t\twrapper.insertBefore( btn, wrapper.children[ position ] );\n\t} else {\n\t\twrapper.appendChild( btn );\n\t}\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

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-elements-panel",
-  "version": "4.0.0-manual",
+  "version": "4.1.0-684",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,9 +40,9 @@
   },
   "dependencies": {
     "@elementor/ui": "1.36.17",
-    "@elementor/editor": "4.0.0-manual",
-    "@elementor/editor-v1-adapters": "4.0.0-manual",
-    "@elementor/utils": "4.0.0-manual"
+    "@elementor/editor": "4.1.0-684",
+    "@elementor/editor-v1-adapters": "4.1.0-684",
+    "@elementor/utils": "4.1.0-684"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/tabs.ts

@@ -1,17 +1,27 @@
 import { type ComponentType } from 'react';
 
 type Tab = {
-	id: string;
 	label: string;
 	component: ComponentType;
+	priority: number;
 };
 
-const tabs: Record< Tab[ 'id' ], Tab > = {};
+const registry = new Map< string, Tab >();
 
-export function registerTab( tab: Tab ) {
-	tabs[ tab.id ] = tab;
+const DEFAULT_PRIORITY = 10;
+
+export function registerTab( {
+	id,
+	priority = DEFAULT_PRIORITY,
+	...props
+}: Omit< Tab, 'priority' > & { id: string; priority?: number } ) {
+	const existing = registry.get( id );
+
+	if ( ! existing || priority <= existing.priority ) {
+		registry.set( id, { ...props, priority } );
+	}
 }
 
 export function getTab( id: string ): Tab | null {
-	return tabs[ id ] || null;
+	return registry.get( id ) ?? null;
 }