@elementor/editor-panels 4.3.0-998 → 4.4.0-1064

package/dist/index.d.mts

@@ -9,11 +9,13 @@ type PanelDeclaration<TOnOpenReturn = unknown> = {
     id: string;
     component: ComponentType;
     isOpenPreviousElement?: boolean;
+    keepMounted?: boolean;
 } & UseActionsOptions<TOnOpenReturn> & UseRouteStatusOptions;
-declare function createPanel<TOnOpenReturn>({ id, component, onOpen, onClose, allowedEditModes, blockOnKitRoutes, isOpenPreviousElement, }: PanelDeclaration<TOnOpenReturn>): {
+declare function createPanel<TOnOpenReturn>({ id, component, onOpen, onClose, allowedEditModes, blockOnKitRoutes, isOpenPreviousElement, keepMounted, }: PanelDeclaration<TOnOpenReturn>): {
     panel: {
         id: string;
         component: ComponentType;
+        keepMounted: boolean;
     };
     usePanelStatus: UseStatus;
     usePanelActions: () => {
@@ -21,7 +23,7 @@ declare function createPanel<TOnOpenReturn>({ id, component, onOpen, onClose, al
         close: () => Promise<void>;
     };
 };
-declare function registerPanel({ id, component }: Pick<PanelDeclaration, 'id' | 'component'>): void;
+declare function registerPanel({ id, component, keepMounted, }: Pick<PanelDeclaration, 'id' | 'component' | 'keepMounted'>): void;
 type UseStatus = () => {
     isOpen: boolean;
     isBlocked: boolean;
@@ -41,4 +43,4 @@ declare function PanelBody({ children, sx, ...props }: BoxProps): React.JSX.Elem
 
 declare function PanelFooter({ children, sx, ...props }: BoxProps): React.JSX.Element;
 
-export { Panel, PanelBody, PanelFooter, PanelHeader, PanelHeaderTitle, createPanel as __createPanel, registerPanel as __registerPanel, init };
+export { Panel, PanelBody, PanelFooter, PanelHeader, PanelHeaderTitle, createPanel as __createPanel, registerPanel as __registerPanel, createPanel, init, registerPanel };

package/dist/index.d.ts

@@ -9,11 +9,13 @@ type PanelDeclaration<TOnOpenReturn = unknown> = {
     id: string;
     component: ComponentType;
     isOpenPreviousElement?: boolean;
+    keepMounted?: boolean;
 } & UseActionsOptions<TOnOpenReturn> & UseRouteStatusOptions;
-declare function createPanel<TOnOpenReturn>({ id, component, onOpen, onClose, allowedEditModes, blockOnKitRoutes, isOpenPreviousElement, }: PanelDeclaration<TOnOpenReturn>): {
+declare function createPanel<TOnOpenReturn>({ id, component, onOpen, onClose, allowedEditModes, blockOnKitRoutes, isOpenPreviousElement, keepMounted, }: PanelDeclaration<TOnOpenReturn>): {
     panel: {
         id: string;
         component: ComponentType;
+        keepMounted: boolean;
     };
     usePanelStatus: UseStatus;
     usePanelActions: () => {
@@ -21,7 +23,7 @@ declare function createPanel<TOnOpenReturn>({ id, component, onOpen, onClose, al
         close: () => Promise<void>;
     };
 };
-declare function registerPanel({ id, component }: Pick<PanelDeclaration, 'id' | 'component'>): void;
+declare function registerPanel({ id, component, keepMounted, }: Pick<PanelDeclaration, 'id' | 'component' | 'keepMounted'>): void;
 type UseStatus = () => {
     isOpen: boolean;
     isBlocked: boolean;
@@ -41,4 +43,4 @@ declare function PanelBody({ children, sx, ...props }: BoxProps): React.JSX.Elem
 
 declare function PanelFooter({ children, sx, ...props }: BoxProps): React.JSX.Element;
 
-export { Panel, PanelBody, PanelFooter, PanelHeader, PanelHeaderTitle, createPanel as __createPanel, registerPanel as __registerPanel, init };
+export { Panel, PanelBody, PanelFooter, PanelHeader, PanelHeaderTitle, createPanel as __createPanel, registerPanel as __registerPanel, createPanel, init, registerPanel };

package/dist/index.js

@@ -37,7 +37,9 @@ __export(index_exports, {
   PanelHeaderTitle: () => panel_header_title_default,
   __createPanel: () => createPanel,
   __registerPanel: () => registerPanel,
-  init: () => init
+  createPanel: () => createPanel,
+  init: () => init,
+  registerPanel: () => registerPanel
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -47,14 +49,33 @@ var import_store6 = require("@elementor/store");
 
 // src/components/internal/panels.tsx
 var React2 = __toESM(require("react"));
-
-// src/hooks/use-open-panel-injection.ts
-var import_react = require("react");
-var import_store2 = require("@elementor/store");
+var import_store4 = require("@elementor/store");
 
 // src/location.ts
 var import_locations = require("@elementor/locations");
-var { inject: injectIntoPanels, useInjections: usePanelsInjections } = (0, import_locations.createLocation)();
+var panelsMeta = /* @__PURE__ */ new Map();
+var { inject: baseInject, useInjections: baseUseInjections, getInjections } = (0, import_locations.createLocation)();
+(0, import_locations.__registerFlushInjections)(() => {
+  panelsMeta.clear();
+});
+function injectIntoPanels({
+  id,
+  component,
+  keepMounted
+}) {
+  const existedBefore = getInjections().some((injection) => injection.id === id);
+  baseInject({ id, component });
+  if (!existedBefore) {
+    panelsMeta.set(id, { keepMounted });
+  }
+}
+function usePanelsInjections() {
+  const injections = baseUseInjections();
+  return injections.map((injection) => ({
+    ...injection,
+    keepMounted: panelsMeta.get(injection.id)?.keepMounted ?? false
+  }));
+}
 
 // src/store/selectors.ts
 var selectOpenId = (state) => state.panels.openId;
@@ -79,21 +100,14 @@ var slice_default = (0, import_store.__createSlice)({
   }
 });
 
-// src/hooks/use-open-panel-injection.ts
-function useOpenPanelInjection() {
-  const injections = usePanelsInjections();
-  const openId = (0, import_store2.__useSelector)(selectOpenId);
-  return (0, import_react.useMemo)(() => injections.find((injection) => openId === injection.id), [injections, openId]);
-}
-
 // src/components/internal/portal.tsx
 var React = __toESM(require("react"));
-var import_react2 = require("react");
+var import_react = require("react");
 var import_ui = require("@elementor/ui");
 
 // src/sync.ts
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
-var import_store4 = require("@elementor/store");
+var import_store2 = require("@elementor/store");
 var V2_PANEL = "panel/v2";
 function getPortalContainer() {
   return document.querySelector("#elementor-panel-inner");
@@ -106,7 +120,7 @@ function sync() {
       el.setAttribute("inert", "true");
     });
   });
-  (0, import_editor_v1_adapters.__privateListenTo)((0, import_editor_v1_adapters.routeCloseEvent)(V2_PANEL), () => selectOpenId((0, import_store4.__getState)()) && (0, import_store4.__dispatch)(slice_default.actions.close()));
+  (0, import_editor_v1_adapters.__privateListenTo)((0, import_editor_v1_adapters.routeCloseEvent)(V2_PANEL), () => selectOpenId((0, import_store2.__getState)()) && (0, import_store2.__dispatch)(slice_default.actions.close()));
   (0, import_editor_v1_adapters.__privateListenTo)((0, import_editor_v1_adapters.routeCloseEvent)(V2_PANEL), () => {
     getV1PanelElements().forEach((el) => {
       el.removeAttribute("hidden");
@@ -150,8 +164,8 @@ function subscribe({
   callback
 }) {
   let prev;
-  (0, import_store4.__subscribe)(() => {
-    const current = on((0, import_store4.__getState)());
+  (0, import_store2.__subscribe)(() => {
+    const current = on((0, import_store2.__getState)());
     if (when({ prev, current })) {
       callback({ prev, current });
     }
@@ -161,21 +175,39 @@ function subscribe({
 
 // src/components/internal/portal.tsx
 function Portal(props) {
-  const containerRef = (0, import_react2.useRef)(getPortalContainer);
-  if (!containerRef.current) {
+  const [container, setContainer] = (0, import_react.useState)(() => getPortalContainer());
+  (0, import_react.useEffect)(() => {
+    if (container) {
+      return;
+    }
+    const resolveContainer = () => {
+      const portalContainer = getPortalContainer();
+      if (portalContainer) {
+        setContainer(portalContainer);
+      }
+    };
+    window.addEventListener("elementor/panel/init", resolveContainer);
+    resolveContainer();
+    return () => {
+      window.removeEventListener("elementor/panel/init", resolveContainer);
+    };
+  }, [container]);
+  if (!container) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement(import_ui.Portal, { container: containerRef.current, ...props });
+  return /* @__PURE__ */ React.createElement(import_ui.Portal, { container, ...props });
 }
 
 // src/components/internal/panels.tsx
 function Panels() {
-  const openPanel = useOpenPanelInjection();
-  const Component = openPanel?.component ?? null;
-  if (!Component) {
+  const injections = usePanelsInjections();
+  const openId = (0, import_store4.__useSelector)(selectOpenId);
+  const persistentInjections = injections.filter((injection) => injection.keepMounted);
+  const openInjection = injections.find((injection) => openId === injection.id);
+  if (!persistentInjections.length && !openInjection) {
     return null;
   }
-  return /* @__PURE__ */ React2.createElement(Portal, null, /* @__PURE__ */ React2.createElement(Component, null));
+  return /* @__PURE__ */ React2.createElement(Portal, null, persistentInjections.map(({ id, component: Component }) => /* @__PURE__ */ React2.createElement("div", { key: id, style: { display: openId === id ? "contents" : "none" } }, /* @__PURE__ */ React2.createElement(Component, null))), openInjection && !openInjection.keepMounted && /* @__PURE__ */ React2.createElement(openInjection.component, null));
 }
 
 // src/init.ts
@@ -195,7 +227,8 @@ function createPanel({
   onClose,
   allowedEditModes,
   blockOnKitRoutes,
-  isOpenPreviousElement = false
+  isOpenPreviousElement = false,
+  keepMounted = false
 }) {
   const usePanelStatus = createUseStatus(id, {
     allowedEditModes,
@@ -213,16 +246,22 @@ function createPanel({
   return {
     panel: {
       id,
-      component
+      component,
+      keepMounted
     },
     usePanelStatus,
     usePanelActions
   };
 }
-function registerPanel({ id, component }) {
+function registerPanel({
+  id,
+  component,
+  keepMounted
+}) {
   injectIntoPanels({
     id,
-    component
+    component,
+    keepMounted
   });
 }
 function createUseStatus(id, options = {}) {
@@ -312,7 +351,7 @@ function PanelHeader({ children, ...props }) {
 
 // src/components/external/panel-header-title.tsx
 var React5 = __toESM(require("react"));
-var import_react3 = require("react");
+var import_react2 = require("react");
 var import_ui4 = require("@elementor/ui");
 var Typography = (0, import_ui4.styled)(import_ui4.Typography)(({ theme, variant = "body1" }) => {
   if (variant === "inherit") {
@@ -324,7 +363,7 @@ var Typography = (0, import_ui4.styled)(import_ui4.Typography)(({ theme, variant
     }
   };
 });
-var PanelHeaderTitle = (0, import_react3.forwardRef)(({ children, ...props }, ref) => {
+var PanelHeaderTitle = (0, import_react2.forwardRef)(({ children, ...props }, ref) => {
   return /* @__PURE__ */ React5.createElement(Typography, { ref, component: "h2", variant: "subtitle1", ...props }, children);
 });
 var panel_header_title_default = PanelHeaderTitle;
@@ -377,6 +416,8 @@ function PanelFooter({ children, sx, ...props }) {
   PanelHeaderTitle,
   __createPanel,
   __registerPanel,
-  init
+  createPanel,
+  init,
+  registerPanel
 });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/init.ts","../src/components/internal/panels.tsx","../src/hooks/use-open-panel-injection.ts","../src/location.ts","../src/store/selectors.ts","../src/store/slice.ts","../src/components/internal/portal.tsx","../src/sync.ts","../src/api.ts","../src/components/external/panel.tsx","../src/components/external/panel-header.tsx","../src/components/external/panel-header-title.tsx","../src/components/external/panel-body.tsx","../src/components/external/panel-footer.tsx"],"sourcesContent":["export { init } from './init';\n\nexport { createPanel as __createPanel, registerPanel as __registerPanel } from './api';\n\nexport * from './components/external';\n","import { injectIntoTop } from '@elementor/editor';\nimport { __registerSlice } from '@elementor/store';\n\nimport Panels from './components/internal/panels';\nimport { slice } from './store';\nimport { sync } from './sync';\n\nexport function init() {\n\tsync();\n\n\t__registerSlice( slice );\n\n\tinjectIntoTop( { id: 'panels', component: Panels } );\n}\n","import * as React from 'react';\n\nimport useOpenPanelInjection from '../../hooks/use-open-panel-injection';\nimport Portal from './portal';\n\nexport default function Panels() {\n\tconst openPanel = useOpenPanelInjection();\n\tconst Component = openPanel?.component ?? null;\n\n\tif ( ! Component ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Portal>\n\t\t\t<Component />\n\t\t</Portal>\n\t);\n}\n","import { useMemo } from 'react';\nimport { __useSelector as useSelector } from '@elementor/store';\n\nimport { usePanelsInjections } from '../location';\nimport { selectOpenId } from '../store';\n\nexport default function useOpenPanelInjection() {\n\tconst injections = usePanelsInjections();\n\tconst openId = useSelector( selectOpenId );\n\n\treturn useMemo( () => injections.find( ( injection ) => openId === injection.id ), [ injections, openId ] );\n}\n","import { createLocation } from '@elementor/locations';\n\nexport const { inject: injectIntoPanels, useInjections: usePanelsInjections } = createLocation();\n","import { type SliceState } from '@elementor/store';\n\nimport type slice from './slice';\n\ntype State = SliceState< typeof slice >;\n\nexport const selectOpenId = ( state: State ) => state.panels.openId;\n","import { __createSlice, type PayloadAction } from '@elementor/store';\n\nconst initialState: {\n\topenId: string | null;\n} = {\n\topenId: null,\n};\n\nexport default __createSlice( {\n\tname: 'panels',\n\tinitialState,\n\treducers: {\n\t\topen( state, action: PayloadAction< string > ) {\n\t\t\tstate.openId = action.payload;\n\t\t},\n\t\tclose( state, action: PayloadAction< string | undefined > ) {\n\t\t\tif ( ! action.payload || state.openId === action.payload ) {\n\t\t\t\tstate.openId = null;\n\t\t\t}\n\t\t},\n\t},\n} );\n","import * as React from 'react';\nimport { useRef } from 'react';\nimport { Portal as BasePortal, type PortalProps } from '@elementor/ui';\n\nimport { getPortalContainer } from '../../sync';\n\ntype Props = Omit< PortalProps, 'container' >;\n\nexport default function Portal( props: Props ) {\n\tconst containerRef = useRef( getPortalContainer );\n\n\tif ( ! containerRef.current ) {\n\t\treturn null;\n\t}\n\n\treturn <BasePortal container={ containerRef.current } { ...props } />;\n}\n","import {\n\t__privateIsRouteActive as isRouteActive,\n\t__privateListenTo as listenTo,\n\t__privateOpenRoute as openRoute,\n\t__privateRegisterRoute as registerRoute,\n\trouteCloseEvent,\n\trouteOpenEvent,\n\twindowEvent,\n} from '@elementor/editor-v1-adapters';\nimport { __dispatch, __getState, __subscribe as originalSubscribe } from '@elementor/store';\n\nimport { selectOpenId, slice } from './store';\n\nexport const V2_PANEL = 'panel/v2';\n\nexport function getPortalContainer() {\n\treturn document.querySelector( '#elementor-panel-inner' );\n}\n\nexport function sync() {\n\t// Register the V2 panel route on panel init.\n\tlistenTo( windowEvent( 'elementor/panel/init' ), () => registerRoute( V2_PANEL ) );\n\n\t// On empty route open, hide V1 panel elements.\n\tlistenTo( routeOpenEvent( V2_PANEL ), () => {\n\t\tgetV1PanelElements().forEach( ( el ) => {\n\t\t\tel.setAttribute( 'hidden', 'hidden' );\n\t\t\tel.setAttribute( 'inert', 'true' );\n\t\t} );\n\t} );\n\n\t// On empty route close, close the V2 panel.\n\tlistenTo( routeCloseEvent( V2_PANEL ), () => selectOpenId( __getState() ) && __dispatch( slice.actions.close() ) );\n\n\t// On empty route close, show V1 panel elements.\n\tlistenTo( routeCloseEvent( V2_PANEL ), () => {\n\t\tgetV1PanelElements().forEach( ( el ) => {\n\t\t\tel.removeAttribute( 'hidden' );\n\t\t\tel.removeAttribute( 'inert' );\n\t\t} );\n\t} );\n\n\t// On V2 panel open, open the V2 panel route.\n\tlistenTo( windowEvent( 'elementor/panel/init' ), () =>\n\t\tsubscribe( {\n\t\t\ton: ( state ) => selectOpenId( state ),\n\t\t\twhen: ( { prev, current } ) => !! ( ! prev && current ), // is panel opened\n\t\t\tcallback: () => openRoute( V2_PANEL ),\n\t\t} )\n\t);\n\n\t// On V2 panel close, close the V2 panel route.\n\tlistenTo( windowEvent( 'elementor/panel/init' ), () =>\n\t\tsubscribe( {\n\t\t\ton: ( state ) => selectOpenId( state ),\n\t\t\twhen: ( { prev, current } ) => !! ( ! current && prev ), // is panel closed\n\t\t\tcallback: () => isRouteActive( V2_PANEL ) && openRoute( getDefaultRoute() ),\n\t\t} )\n\t);\n}\n\nfunction getV1PanelElements() {\n\tconst v1ElementsSelector = [\n\t\t'#elementor-panel-header-wrapper',\n\t\t'#elementor-panel-content-wrapper',\n\t\t'#elementor-panel-state-loading',\n\t].join( ', ' );\n\n\treturn document.querySelectorAll( v1ElementsSelector );\n}\n\nfunction getDefaultRoute() {\n\ttype ExtendedWindow = Window & {\n\t\telementor?: {\n\t\t\tdocuments?: {\n\t\t\t\tgetCurrent?: () => {\n\t\t\t\t\tconfig?: {\n\t\t\t\t\t\tpanel?: {\n\t\t\t\t\t\t\tdefault_route?: string;\n\t\t\t\t\t\t};\n\t\t\t\t\t};\n\t\t\t\t};\n\t\t\t};\n\t\t};\n\t};\n\n\tconst defaultRoute = ( window as unknown as ExtendedWindow )?.elementor?.documents?.getCurrent?.()?.config?.panel\n\t\t?.default_route;\n\n\treturn defaultRoute || 'panel/elements/categories';\n}\n\nfunction subscribe< TVal >( {\n\ton,\n\twhen,\n\tcallback,\n}: {\n\ton: ( state: ReturnType< typeof __getState > ) => TVal;\n\twhen: ( { prev, current }: { prev: TVal; current: TVal } ) => boolean;\n\tcallback: ( { prev, current }: { prev: TVal; current: TVal } ) => void;\n} ) {\n\tlet prev: TVal;\n\n\toriginalSubscribe( () => {\n\t\tconst current = on( __getState() );\n\n\t\tif ( when( { prev, current } ) ) {\n\t\t\tcallback( { prev, current } );\n\t\t}\n\n\t\tprev = current;\n\t} );\n}\n","import { type ComponentType } from 'react';\nimport {\n\t__privateRunCommand as runCommand,\n\t__privateUseRouteStatus as useRouteStatus,\n\ttype UseRouteStatusOptions,\n} from '@elementor/editor-v1-adapters';\nimport { __useDispatch as useDispatch, __useSelector as useSelector } from '@elementor/store';\n\nimport { injectIntoPanels } from './location';\nimport { selectOpenId, slice } from './store';\nimport { V2_PANEL } from './sync';\n\nexport type PanelDeclaration< TOnOpenReturn = unknown > = {\n\tid: string;\n\tcomponent: ComponentType;\n\tisOpenPreviousElement?: boolean;\n} & UseActionsOptions< TOnOpenReturn > &\n\tUseRouteStatusOptions;\n\nexport function createPanel< TOnOpenReturn >( {\n\tid,\n\tcomponent,\n\tonOpen,\n\tonClose,\n\tallowedEditModes,\n\tblockOnKitRoutes,\n\tisOpenPreviousElement = false,\n}: PanelDeclaration< TOnOpenReturn > ) {\n\tconst usePanelStatus = createUseStatus( id, {\n\t\tallowedEditModes,\n\t\tblockOnKitRoutes,\n\t} );\n\n\tconst usePanelActions = createUseActions(\n\t\tid,\n\t\tusePanelStatus,\n\t\t{\n\t\t\tonOpen,\n\t\t\tonClose,\n\t\t},\n\t\tisOpenPreviousElement\n\t);\n\n\treturn {\n\t\tpanel: {\n\t\t\tid,\n\t\t\tcomponent,\n\t\t},\n\t\tusePanelStatus,\n\t\tusePanelActions,\n\t};\n}\n\nexport function registerPanel( { id, component }: Pick< PanelDeclaration, 'id' | 'component' > ) {\n\tinjectIntoPanels( {\n\t\tid,\n\t\tcomponent,\n\t} );\n}\n\ntype UseStatus = () => {\n\tisOpen: boolean;\n\tisBlocked: boolean;\n};\n\nfunction createUseStatus( id: PanelDeclaration[ 'id' ], options: UseRouteStatusOptions = {} ): UseStatus {\n\treturn () => {\n\t\tconst openPanelId = useSelector( selectOpenId );\n\t\tconst v1PanelStatus = useRouteStatus( V2_PANEL, options );\n\n\t\treturn {\n\t\t\tisOpen: openPanelId === id && v1PanelStatus.isActive,\n\t\t\tisBlocked: v1PanelStatus.isBlocked,\n\t\t};\n\t};\n}\n\ntype UseActionsOptions< TOnOpenReturn > = {\n\tonOpen?: () => TOnOpenReturn;\n\tonClose?: ( state: TOnOpenReturn ) => Promise< void >;\n};\n\nfunction createUseActions< TOnOpenReturn >(\n\tid: PanelDeclaration[ 'id' ],\n\tuseStatus: UseStatus,\n\toptions: UseActionsOptions< TOnOpenReturn > = {},\n\tisOpenPreviousElement?: boolean\n) {\n\tlet stateSnapshot: TOnOpenReturn | null = null;\n\tlet previousSelectedElement: string | null = null;\n\n\treturn () => {\n\t\tconst dispatch = useDispatch();\n\t\tconst { isBlocked } = useStatus();\n\n\t\treturn {\n\t\t\topen: async () => {\n\t\t\t\tif ( isBlocked ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif ( isOpenPreviousElement ) {\n\t\t\t\t\tpreviousSelectedElement =\n\t\t\t\t\t\twindow.elementor?.selection?.getElements?.()[ 0 ]?.model.get( 'id' ) ?? null;\n\t\t\t\t}\n\n\t\t\t\tdispatch( slice.actions.open( id ) );\n\n\t\t\t\tstateSnapshot = options.onOpen?.() ?? null;\n\t\t\t},\n\t\t\tclose: async () => {\n\t\t\t\tif ( isBlocked ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tdispatch( slice.actions.close( id ) );\n\n\t\t\t\tawait options.onClose?.( stateSnapshot as TOnOpenReturn );\n\n\t\t\t\tif ( previousSelectedElement ) {\n\t\t\t\t\ttry {\n\t\t\t\t\t\tconst container = window.elementor?.getContainer?.( previousSelectedElement );\n\t\t\t\t\t\trunCommand( 'document/elements/select', { container } );\n\t\t\t\t\t} catch {}\n\t\t\t\t\tpreviousSelectedElement = null;\n\t\t\t\t}\n\t\t\t},\n\t\t};\n\t};\n}\n","import * as React from 'react';\nimport { Drawer, type DrawerProps } from '@elementor/ui';\n\nexport default function Panel( { children, sx, ...props }: DrawerProps ) {\n\treturn (\n\t\t<Drawer\n\t\t\topen={ true }\n\t\t\tvariant=\"persistent\"\n\t\t\tanchor=\"left\"\n\t\t\tPaperProps={ {\n\t\t\t\tsx: {\n\t\t\t\t\tposition: 'relative',\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\tbgcolor: 'background.default',\n\t\t\t\t\tborder: 'none',\n\t\t\t\t},\n\t\t\t} }\n\t\t\tsx={ { height: '100%', ...sx } }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children }\n\t\t</Drawer>\n\t);\n}\n","import * as React from 'react';\nimport { Box, type BoxProps, styled } from '@elementor/ui';\n\nconst Header = styled( Box )( ( { theme } ) => ( {\n\theight: theme?.spacing( 6 ) || '48px',\n\tdisplay: 'flex',\n\talignItems: 'center',\n\tjustifyContent: 'center',\n\tgap: theme?.spacing( 0.5 ) || '4px',\n} ) );\n\nexport default function PanelHeader( { children, ...props }: BoxProps ) {\n\treturn (\n\t\t<>\n\t\t\t<Header component=\"header\" { ...props }>\n\t\t\t\t{ children }\n\t\t\t</Header>\n\t\t</>\n\t);\n}\n","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { styled, Typography as TypographySource, type TypographyProps } from '@elementor/ui';\n\n// This is to override Editor reset.scss that overrides eui styles\nconst Typography = styled( TypographySource )< TypographyProps >( ( { theme, variant = 'body1' } ) => {\n\tif ( variant === 'inherit' ) {\n\t\treturn {};\n\t}\n\n\treturn {\n\t\t'&.MuiTypography-root': {\n\t\t\t...theme.typography[ variant ],\n\t\t},\n\t};\n} );\n\nconst PanelHeaderTitle = forwardRef< HTMLHeadingElement, TypographyProps >( ( { children, ...props }, ref ) => {\n\treturn (\n\t\t<Typography ref={ ref } component=\"h2\" variant=\"subtitle1\" { ...props }>\n\t\t\t{ children }\n\t\t</Typography>\n\t);\n} );\n\nexport default PanelHeaderTitle;\n","import * as React from 'react';\nimport { Box, type BoxProps } from '@elementor/ui';\n\nexport default function PanelBody( { children, sx, ...props }: BoxProps ) {\n\treturn (\n\t\t<Box\n\t\t\tcomponent=\"main\"\n\t\t\tsx={ {\n\t\t\t\toverflowY: 'auto',\n\t\t\t\theight: '100%',\n\t\t\t\t...sx,\n\t\t\t} }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children }\n\t\t</Box>\n\t);\n}\n","import * as React from 'react';\nimport { Box, type BoxProps, Divider } from '@elementor/ui';\n\nexport default function PanelFooter( { children, sx, ...props }: BoxProps ) {\n\treturn (\n\t\t<>\n\t\t\t<Divider />\n\t\t\t<Box\n\t\t\t\tcomponent=\"footer\"\n\t\t\t\tsx={ {\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tposition: 'sticky',\n\t\t\t\t\tbottom: 0,\n\t\t\t\t\tpx: 2,\n\t\t\t\t\tpy: 1.5,\n\t\t\t\t} }\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Box>\n\t\t</>\n\t);\n}\n"],"mappings":"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","names":["import_store","React","import_store","useSelector","import_react","import_store","listenTo","registerRoute","openRoute","isRouteActive","originalSubscribe","BasePortal","import_editor_v1_adapters","import_store","useSelector","useRouteStatus","useDispatch","runCommand","React","import_ui","React","import_ui","React","import_react","import_ui","TypographySource","React","import_ui","React","import_ui"]}
+{"version":3,"sources":["../src/index.ts","../src/init.ts","../src/components/internal/panels.tsx","../src/location.ts","../src/store/selectors.ts","../src/store/slice.ts","../src/components/internal/portal.tsx","../src/sync.ts","../src/api.ts","../src/components/external/panel.tsx","../src/components/external/panel-header.tsx","../src/components/external/panel-header-title.tsx","../src/components/external/panel-body.tsx","../src/components/external/panel-footer.tsx"],"sourcesContent":["export { init } from './init';\n\nexport { createPanel, registerPanel } from './api';\nexport { createPanel as __createPanel, registerPanel as __registerPanel } from './api';\n\nexport * from './components/external';\n","import { injectIntoTop } from '@elementor/editor';\nimport { __registerSlice } from '@elementor/store';\n\nimport Panels from './components/internal/panels';\nimport { slice } from './store';\nimport { sync } from './sync';\n\nexport function init() {\n\tsync();\n\n\t__registerSlice( slice );\n\n\tinjectIntoTop( { id: 'panels', component: Panels } );\n}\n","import * as React from 'react';\nimport { __useSelector as useSelector } from '@elementor/store';\n\nimport { usePanelsInjections } from '../../location';\nimport { selectOpenId } from '../../store';\nimport Portal from './portal';\n\nexport default function Panels() {\n\tconst injections = usePanelsInjections();\n\tconst openId = useSelector( selectOpenId );\n\n\tconst persistentInjections = injections.filter( ( injection ) => injection.keepMounted );\n\tconst openInjection = injections.find( ( injection ) => openId === injection.id );\n\n\tif ( ! persistentInjections.length && ! openInjection ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Portal>\n\t\t\t{ persistentInjections.map( ( { id, component: Component } ) => (\n\t\t\t\t<div key={ id } style={ { display: openId === id ? 'contents' : 'none' } }>\n\t\t\t\t\t<Component />\n\t\t\t\t</div>\n\t\t\t) ) }\n\t\t\t{ openInjection && ! openInjection.keepMounted && <openInjection.component /> }\n\t\t</Portal>\n\t);\n}\n","import { type ComponentType } from 'react';\nimport { __registerFlushInjections, createLocation } from '@elementor/locations';\n\ntype PanelsInjectionMeta = {\n\tkeepMounted?: boolean;\n};\n\nexport type PanelsInjection = {\n\tid: string;\n\tcomponent: ComponentType;\n\tkeepMounted?: boolean;\n};\n\nconst panelsMeta = new Map< string, PanelsInjectionMeta >();\n\nconst { inject: baseInject, useInjections: baseUseInjections, getInjections } = createLocation();\n\n__registerFlushInjections( () => {\n\tpanelsMeta.clear();\n} );\n\nexport function injectIntoPanels( {\n\tid,\n\tcomponent,\n\tkeepMounted,\n}: {\n\tid: string;\n\tcomponent: ComponentType;\n\tkeepMounted?: boolean;\n} ) {\n\tconst existedBefore = getInjections().some( ( injection ) => injection.id === id );\n\n\tbaseInject( { id, component } );\n\n\tif ( ! existedBefore ) {\n\t\tpanelsMeta.set( id, { keepMounted } );\n\t}\n}\n\nexport function usePanelsInjections(): PanelsInjection[] {\n\tconst injections = baseUseInjections();\n\n\treturn injections.map( ( injection ) => ( {\n\t\t...injection,\n\t\tkeepMounted: panelsMeta.get( injection.id )?.keepMounted ?? false,\n\t} ) );\n}\n","import { type SliceState } from '@elementor/store';\n\nimport type slice from './slice';\n\ntype State = SliceState< typeof slice >;\n\nexport const selectOpenId = ( state: State ) => state.panels.openId;\n","import { __createSlice, type PayloadAction } from '@elementor/store';\n\nconst initialState: {\n\topenId: string | null;\n} = {\n\topenId: null,\n};\n\nexport default __createSlice( {\n\tname: 'panels',\n\tinitialState,\n\treducers: {\n\t\topen( state, action: PayloadAction< string > ) {\n\t\t\tstate.openId = action.payload;\n\t\t},\n\t\tclose( state, action: PayloadAction< string | undefined > ) {\n\t\t\tif ( ! action.payload || state.openId === action.payload ) {\n\t\t\t\tstate.openId = null;\n\t\t\t}\n\t\t},\n\t},\n} );\n","import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { Portal as BasePortal, type PortalProps } from '@elementor/ui';\n\nimport { getPortalContainer } from '../../sync';\n\ntype Props = Omit< PortalProps, 'container' >;\n\nexport default function Portal( props: Props ) {\n\tconst [ container, setContainer ] = useState( () => getPortalContainer() );\n\n\tuseEffect( () => {\n\t\tif ( container ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst resolveContainer = () => {\n\t\t\tconst portalContainer = getPortalContainer();\n\n\t\t\tif ( portalContainer ) {\n\t\t\t\tsetContainer( portalContainer );\n\t\t\t}\n\t\t};\n\n\t\twindow.addEventListener( 'elementor/panel/init', resolveContainer );\n\t\tresolveContainer();\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener( 'elementor/panel/init', resolveContainer );\n\t\t};\n\t}, [ container ] );\n\n\tif ( ! container ) {\n\t\treturn null;\n\t}\n\n\treturn <BasePortal container={ container } { ...props } />;\n}\n","import {\n\t__privateIsRouteActive as isRouteActive,\n\t__privateListenTo as listenTo,\n\t__privateOpenRoute as openRoute,\n\t__privateRegisterRoute as registerRoute,\n\trouteCloseEvent,\n\trouteOpenEvent,\n\twindowEvent,\n} from '@elementor/editor-v1-adapters';\nimport { __dispatch, __getState, __subscribe as originalSubscribe } from '@elementor/store';\n\nimport { selectOpenId, slice } from './store';\n\nexport const V2_PANEL = 'panel/v2';\n\nexport function getPortalContainer() {\n\treturn document.querySelector( '#elementor-panel-inner' );\n}\n\nexport function sync() {\n\t// Register the V2 panel route on panel init.\n\tlistenTo( windowEvent( 'elementor/panel/init' ), () => registerRoute( V2_PANEL ) );\n\n\t// On empty route open, hide V1 panel elements.\n\tlistenTo( routeOpenEvent( V2_PANEL ), () => {\n\t\tgetV1PanelElements().forEach( ( el ) => {\n\t\t\tel.setAttribute( 'hidden', 'hidden' );\n\t\t\tel.setAttribute( 'inert', 'true' );\n\t\t} );\n\t} );\n\n\t// On empty route close, close the V2 panel.\n\tlistenTo( routeCloseEvent( V2_PANEL ), () => selectOpenId( __getState() ) && __dispatch( slice.actions.close() ) );\n\n\t// On empty route close, show V1 panel elements.\n\tlistenTo( routeCloseEvent( V2_PANEL ), () => {\n\t\tgetV1PanelElements().forEach( ( el ) => {\n\t\t\tel.removeAttribute( 'hidden' );\n\t\t\tel.removeAttribute( 'inert' );\n\t\t} );\n\t} );\n\n\t// On V2 panel open, open the V2 panel route.\n\tlistenTo( windowEvent( 'elementor/panel/init' ), () =>\n\t\tsubscribe( {\n\t\t\ton: ( state ) => selectOpenId( state ),\n\t\t\twhen: ( { prev, current } ) => !! ( ! prev && current ), // is panel opened\n\t\t\tcallback: () => openRoute( V2_PANEL ),\n\t\t} )\n\t);\n\n\t// On V2 panel close, close the V2 panel route.\n\tlistenTo( windowEvent( 'elementor/panel/init' ), () =>\n\t\tsubscribe( {\n\t\t\ton: ( state ) => selectOpenId( state ),\n\t\t\twhen: ( { prev, current } ) => !! ( ! current && prev ), // is panel closed\n\t\t\tcallback: () => isRouteActive( V2_PANEL ) && openRoute( getDefaultRoute() ),\n\t\t} )\n\t);\n}\n\nfunction getV1PanelElements() {\n\tconst v1ElementsSelector = [\n\t\t'#elementor-panel-header-wrapper',\n\t\t'#elementor-panel-content-wrapper',\n\t\t'#elementor-panel-state-loading',\n\t].join( ', ' );\n\n\treturn document.querySelectorAll( v1ElementsSelector );\n}\n\nfunction getDefaultRoute() {\n\ttype ExtendedWindow = Window & {\n\t\telementor?: {\n\t\t\tdocuments?: {\n\t\t\t\tgetCurrent?: () => {\n\t\t\t\t\tconfig?: {\n\t\t\t\t\t\tpanel?: {\n\t\t\t\t\t\t\tdefault_route?: string;\n\t\t\t\t\t\t};\n\t\t\t\t\t};\n\t\t\t\t};\n\t\t\t};\n\t\t};\n\t};\n\n\tconst defaultRoute = ( window as unknown as ExtendedWindow )?.elementor?.documents?.getCurrent?.()?.config?.panel\n\t\t?.default_route;\n\n\treturn defaultRoute || 'panel/elements/categories';\n}\n\nfunction subscribe< TVal >( {\n\ton,\n\twhen,\n\tcallback,\n}: {\n\ton: ( state: ReturnType< typeof __getState > ) => TVal;\n\twhen: ( { prev, current }: { prev: TVal; current: TVal } ) => boolean;\n\tcallback: ( { prev, current }: { prev: TVal; current: TVal } ) => void;\n} ) {\n\tlet prev: TVal;\n\n\toriginalSubscribe( () => {\n\t\tconst current = on( __getState() );\n\n\t\tif ( when( { prev, current } ) ) {\n\t\t\tcallback( { prev, current } );\n\t\t}\n\n\t\tprev = current;\n\t} );\n}\n","import { type ComponentType } from 'react';\nimport {\n\t__privateRunCommand as runCommand,\n\t__privateUseRouteStatus as useRouteStatus,\n\ttype UseRouteStatusOptions,\n} from '@elementor/editor-v1-adapters';\nimport { __useDispatch as useDispatch, __useSelector as useSelector } from '@elementor/store';\n\nimport { injectIntoPanels } from './location';\nimport { selectOpenId, slice } from './store';\nimport { V2_PANEL } from './sync';\n\nexport type PanelDeclaration< TOnOpenReturn = unknown > = {\n\tid: string;\n\tcomponent: ComponentType;\n\tisOpenPreviousElement?: boolean;\n\tkeepMounted?: boolean;\n} & UseActionsOptions< TOnOpenReturn > &\n\tUseRouteStatusOptions;\n\nexport function createPanel< TOnOpenReturn >( {\n\tid,\n\tcomponent,\n\tonOpen,\n\tonClose,\n\tallowedEditModes,\n\tblockOnKitRoutes,\n\tisOpenPreviousElement = false,\n\tkeepMounted = false,\n}: PanelDeclaration< TOnOpenReturn > ) {\n\tconst usePanelStatus = createUseStatus( id, {\n\t\tallowedEditModes,\n\t\tblockOnKitRoutes,\n\t} );\n\n\tconst usePanelActions = createUseActions(\n\t\tid,\n\t\tusePanelStatus,\n\t\t{\n\t\t\tonOpen,\n\t\t\tonClose,\n\t\t},\n\t\tisOpenPreviousElement\n\t);\n\n\treturn {\n\t\tpanel: {\n\t\t\tid,\n\t\t\tcomponent,\n\t\t\tkeepMounted,\n\t\t},\n\t\tusePanelStatus,\n\t\tusePanelActions,\n\t};\n}\n\nexport function registerPanel( {\n\tid,\n\tcomponent,\n\tkeepMounted,\n}: Pick< PanelDeclaration, 'id' | 'component' | 'keepMounted' > ) {\n\tinjectIntoPanels( {\n\t\tid,\n\t\tcomponent,\n\t\tkeepMounted,\n\t} );\n}\n\ntype UseStatus = () => {\n\tisOpen: boolean;\n\tisBlocked: boolean;\n};\n\nfunction createUseStatus( id: PanelDeclaration[ 'id' ], options: UseRouteStatusOptions = {} ): UseStatus {\n\treturn () => {\n\t\tconst openPanelId = useSelector( selectOpenId );\n\t\tconst v1PanelStatus = useRouteStatus( V2_PANEL, options );\n\n\t\treturn {\n\t\t\tisOpen: openPanelId === id && v1PanelStatus.isActive,\n\t\t\tisBlocked: v1PanelStatus.isBlocked,\n\t\t};\n\t};\n}\n\ntype UseActionsOptions< TOnOpenReturn > = {\n\tonOpen?: () => TOnOpenReturn;\n\tonClose?: ( state: TOnOpenReturn ) => Promise< void >;\n};\n\nfunction createUseActions< TOnOpenReturn >(\n\tid: PanelDeclaration[ 'id' ],\n\tuseStatus: UseStatus,\n\toptions: UseActionsOptions< TOnOpenReturn > = {},\n\tisOpenPreviousElement?: boolean\n) {\n\tlet stateSnapshot: TOnOpenReturn | null = null;\n\tlet previousSelectedElement: string | null = null;\n\n\treturn () => {\n\t\tconst dispatch = useDispatch();\n\t\tconst { isBlocked } = useStatus();\n\n\t\treturn {\n\t\t\topen: async () => {\n\t\t\t\tif ( isBlocked ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif ( isOpenPreviousElement ) {\n\t\t\t\t\tpreviousSelectedElement =\n\t\t\t\t\t\twindow.elementor?.selection?.getElements?.()[ 0 ]?.model.get( 'id' ) ?? null;\n\t\t\t\t}\n\n\t\t\t\tdispatch( slice.actions.open( id ) );\n\n\t\t\t\tstateSnapshot = options.onOpen?.() ?? null;\n\t\t\t},\n\t\t\tclose: async () => {\n\t\t\t\tif ( isBlocked ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tdispatch( slice.actions.close( id ) );\n\n\t\t\t\tawait options.onClose?.( stateSnapshot as TOnOpenReturn );\n\n\t\t\t\tif ( previousSelectedElement ) {\n\t\t\t\t\ttry {\n\t\t\t\t\t\tconst container = window.elementor?.getContainer?.( previousSelectedElement );\n\t\t\t\t\t\trunCommand( 'document/elements/select', { container } );\n\t\t\t\t\t} catch {}\n\t\t\t\t\tpreviousSelectedElement = null;\n\t\t\t\t}\n\t\t\t},\n\t\t};\n\t};\n}\n","import * as React from 'react';\nimport { Drawer, type DrawerProps } from '@elementor/ui';\n\nexport default function Panel( { children, sx, ...props }: DrawerProps ) {\n\treturn (\n\t\t<Drawer\n\t\t\topen={ true }\n\t\t\tvariant=\"persistent\"\n\t\t\tanchor=\"left\"\n\t\t\tPaperProps={ {\n\t\t\t\tsx: {\n\t\t\t\t\tposition: 'relative',\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\tbgcolor: 'background.default',\n\t\t\t\t\tborder: 'none',\n\t\t\t\t},\n\t\t\t} }\n\t\t\tsx={ { height: '100%', ...sx } }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children }\n\t\t</Drawer>\n\t);\n}\n","import * as React from 'react';\nimport { Box, type BoxProps, styled } from '@elementor/ui';\n\nconst Header = styled( Box )( ( { theme } ) => ( {\n\theight: theme?.spacing( 6 ) || '48px',\n\tdisplay: 'flex',\n\talignItems: 'center',\n\tjustifyContent: 'center',\n\tgap: theme?.spacing( 0.5 ) || '4px',\n} ) );\n\nexport default function PanelHeader( { children, ...props }: BoxProps ) {\n\treturn (\n\t\t<>\n\t\t\t<Header component=\"header\" { ...props }>\n\t\t\t\t{ children }\n\t\t\t</Header>\n\t\t</>\n\t);\n}\n","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { styled, Typography as TypographySource, type TypographyProps } from '@elementor/ui';\n\n// This is to override Editor reset.scss that overrides eui styles\nconst Typography = styled( TypographySource )< TypographyProps >( ( { theme, variant = 'body1' } ) => {\n\tif ( variant === 'inherit' ) {\n\t\treturn {};\n\t}\n\n\treturn {\n\t\t'&.MuiTypography-root': {\n\t\t\t...theme.typography[ variant ],\n\t\t},\n\t};\n} );\n\nconst PanelHeaderTitle = forwardRef< HTMLHeadingElement, TypographyProps >( ( { children, ...props }, ref ) => {\n\treturn (\n\t\t<Typography ref={ ref } component=\"h2\" variant=\"subtitle1\" { ...props }>\n\t\t\t{ children }\n\t\t</Typography>\n\t);\n} );\n\nexport default PanelHeaderTitle;\n","import * as React from 'react';\nimport { Box, type BoxProps } from '@elementor/ui';\n\nexport default function PanelBody( { children, sx, ...props }: BoxProps ) {\n\treturn (\n\t\t<Box\n\t\t\tcomponent=\"main\"\n\t\t\tsx={ {\n\t\t\t\toverflowY: 'auto',\n\t\t\t\theight: '100%',\n\t\t\t\t...sx,\n\t\t\t} }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children }\n\t\t</Box>\n\t);\n}\n","import * as React from 'react';\nimport { Box, type BoxProps, Divider } from '@elementor/ui';\n\nexport default function PanelFooter( { children, sx, ...props }: BoxProps ) {\n\treturn (\n\t\t<>\n\t\t\t<Divider />\n\t\t\t<Box\n\t\t\t\tcomponent=\"footer\"\n\t\t\t\tsx={ {\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tposition: 'sticky',\n\t\t\t\t\tbottom: 0,\n\t\t\t\t\tpx: 2,\n\t\t\t\t\tpy: 1.5,\n\t\t\t\t} }\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Box>\n\t\t</>\n\t);\n}\n"],"mappings":"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","names":["import_store","React","import_store","import_store","listenTo","registerRoute","openRoute","isRouteActive","originalSubscribe","BasePortal","useSelector","import_editor_v1_adapters","import_store","useSelector","useRouteStatus","useDispatch","runCommand","React","import_ui","React","import_ui","React","import_react","import_ui","TypographySource","React","import_ui","React","import_ui"]}

package/dist/index.mjs

@@ -4,14 +4,33 @@ import { __registerSlice } from "@elementor/store";
 
 // src/components/internal/panels.tsx
 import * as React2 from "react";
-
-// src/hooks/use-open-panel-injection.ts
-import { useMemo } from "react";
 import { __useSelector as useSelector } from "@elementor/store";
 
 // src/location.ts
-import { createLocation } from "@elementor/locations";
-var { inject: injectIntoPanels, useInjections: usePanelsInjections } = createLocation();
+import { __registerFlushInjections, createLocation } from "@elementor/locations";
+var panelsMeta = /* @__PURE__ */ new Map();
+var { inject: baseInject, useInjections: baseUseInjections, getInjections } = createLocation();
+__registerFlushInjections(() => {
+  panelsMeta.clear();
+});
+function injectIntoPanels({
+  id,
+  component,
+  keepMounted
+}) {
+  const existedBefore = getInjections().some((injection) => injection.id === id);
+  baseInject({ id, component });
+  if (!existedBefore) {
+    panelsMeta.set(id, { keepMounted });
+  }
+}
+function usePanelsInjections() {
+  const injections = baseUseInjections();
+  return injections.map((injection) => ({
+    ...injection,
+    keepMounted: panelsMeta.get(injection.id)?.keepMounted ?? false
+  }));
+}
 
 // src/store/selectors.ts
 var selectOpenId = (state) => state.panels.openId;
@@ -36,16 +55,9 @@ var slice_default = __createSlice({
   }
 });
 
-// src/hooks/use-open-panel-injection.ts
-function useOpenPanelInjection() {
-  const injections = usePanelsInjections();
-  const openId = useSelector(selectOpenId);
-  return useMemo(() => injections.find((injection) => openId === injection.id), [injections, openId]);
-}
-
 // src/components/internal/portal.tsx
 import * as React from "react";
-import { useRef } from "react";
+import { useEffect, useState } from "react";
 import { Portal as BasePortal } from "@elementor/ui";
 
 // src/sync.ts
@@ -126,21 +138,39 @@ function subscribe({
 
 // src/components/internal/portal.tsx
 function Portal(props) {
-  const containerRef = useRef(getPortalContainer);
-  if (!containerRef.current) {
+  const [container, setContainer] = useState(() => getPortalContainer());
+  useEffect(() => {
+    if (container) {
+      return;
+    }
+    const resolveContainer = () => {
+      const portalContainer = getPortalContainer();
+      if (portalContainer) {
+        setContainer(portalContainer);
+      }
+    };
+    window.addEventListener("elementor/panel/init", resolveContainer);
+    resolveContainer();
+    return () => {
+      window.removeEventListener("elementor/panel/init", resolveContainer);
+    };
+  }, [container]);
+  if (!container) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement(BasePortal, { container: containerRef.current, ...props });
+  return /* @__PURE__ */ React.createElement(BasePortal, { container, ...props });
 }
 
 // src/components/internal/panels.tsx
 function Panels() {
-  const openPanel = useOpenPanelInjection();
-  const Component = openPanel?.component ?? null;
-  if (!Component) {
+  const injections = usePanelsInjections();
+  const openId = useSelector(selectOpenId);
+  const persistentInjections = injections.filter((injection) => injection.keepMounted);
+  const openInjection = injections.find((injection) => openId === injection.id);
+  if (!persistentInjections.length && !openInjection) {
     return null;
   }
-  return /* @__PURE__ */ React2.createElement(Portal, null, /* @__PURE__ */ React2.createElement(Component, null));
+  return /* @__PURE__ */ React2.createElement(Portal, null, persistentInjections.map(({ id, component: Component }) => /* @__PURE__ */ React2.createElement("div", { key: id, style: { display: openId === id ? "contents" : "none" } }, /* @__PURE__ */ React2.createElement(Component, null))), openInjection && !openInjection.keepMounted && /* @__PURE__ */ React2.createElement(openInjection.component, null));
 }
 
 // src/init.ts
@@ -163,7 +193,8 @@ function createPanel({
   onClose,
   allowedEditModes,
   blockOnKitRoutes,
-  isOpenPreviousElement = false
+  isOpenPreviousElement = false,
+  keepMounted = false
 }) {
   const usePanelStatus = createUseStatus(id, {
     allowedEditModes,
@@ -181,16 +212,22 @@ function createPanel({
   return {
     panel: {
       id,
-      component
+      component,
+      keepMounted
     },
     usePanelStatus,
     usePanelActions
   };
 }
-function registerPanel({ id, component }) {
+function registerPanel({
+  id,
+  component,
+  keepMounted
+}) {
   injectIntoPanels({
     id,
-    component
+    component,
+    keepMounted
   });
 }
 function createUseStatus(id, options = {}) {
@@ -344,6 +381,8 @@ export {
   panel_header_title_default as PanelHeaderTitle,
   createPanel as __createPanel,
   registerPanel as __registerPanel,
-  init
+  createPanel,
+  init,
+  registerPanel
 };
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/init.ts","../src/components/internal/panels.tsx","../src/hooks/use-open-panel-injection.ts","../src/location.ts","../src/store/selectors.ts","../src/store/slice.ts","../src/components/internal/portal.tsx","../src/sync.ts","../src/api.ts","../src/components/external/panel.tsx","../src/components/external/panel-header.tsx","../src/components/external/panel-header-title.tsx","../src/components/external/panel-body.tsx","../src/components/external/panel-footer.tsx"],"sourcesContent":["import { injectIntoTop } from '@elementor/editor';\nimport { __registerSlice } from '@elementor/store';\n\nimport Panels from './components/internal/panels';\nimport { slice } from './store';\nimport { sync } from './sync';\n\nexport function init() {\n\tsync();\n\n\t__registerSlice( slice );\n\n\tinjectIntoTop( { id: 'panels', component: Panels } );\n}\n","import * as React from 'react';\n\nimport useOpenPanelInjection from '../../hooks/use-open-panel-injection';\nimport Portal from './portal';\n\nexport default function Panels() {\n\tconst openPanel = useOpenPanelInjection();\n\tconst Component = openPanel?.component ?? null;\n\n\tif ( ! Component ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Portal>\n\t\t\t<Component />\n\t\t</Portal>\n\t);\n}\n","import { useMemo } from 'react';\nimport { __useSelector as useSelector } from '@elementor/store';\n\nimport { usePanelsInjections } from '../location';\nimport { selectOpenId } from '../store';\n\nexport default function useOpenPanelInjection() {\n\tconst injections = usePanelsInjections();\n\tconst openId = useSelector( selectOpenId );\n\n\treturn useMemo( () => injections.find( ( injection ) => openId === injection.id ), [ injections, openId ] );\n}\n","import { createLocation } from '@elementor/locations';\n\nexport const { inject: injectIntoPanels, useInjections: usePanelsInjections } = createLocation();\n","import { type SliceState } from '@elementor/store';\n\nimport type slice from './slice';\n\ntype State = SliceState< typeof slice >;\n\nexport const selectOpenId = ( state: State ) => state.panels.openId;\n","import { __createSlice, type PayloadAction } from '@elementor/store';\n\nconst initialState: {\n\topenId: string | null;\n} = {\n\topenId: null,\n};\n\nexport default __createSlice( {\n\tname: 'panels',\n\tinitialState,\n\treducers: {\n\t\topen( state, action: PayloadAction< string > ) {\n\t\t\tstate.openId = action.payload;\n\t\t},\n\t\tclose( state, action: PayloadAction< string | undefined > ) {\n\t\t\tif ( ! action.payload || state.openId === action.payload ) {\n\t\t\t\tstate.openId = null;\n\t\t\t}\n\t\t},\n\t},\n} );\n","import * as React from 'react';\nimport { useRef } from 'react';\nimport { Portal as BasePortal, type PortalProps } from '@elementor/ui';\n\nimport { getPortalContainer } from '../../sync';\n\ntype Props = Omit< PortalProps, 'container' >;\n\nexport default function Portal( props: Props ) {\n\tconst containerRef = useRef( getPortalContainer );\n\n\tif ( ! containerRef.current ) {\n\t\treturn null;\n\t}\n\n\treturn <BasePortal container={ containerRef.current } { ...props } />;\n}\n","import {\n\t__privateIsRouteActive as isRouteActive,\n\t__privateListenTo as listenTo,\n\t__privateOpenRoute as openRoute,\n\t__privateRegisterRoute as registerRoute,\n\trouteCloseEvent,\n\trouteOpenEvent,\n\twindowEvent,\n} from '@elementor/editor-v1-adapters';\nimport { __dispatch, __getState, __subscribe as originalSubscribe } from '@elementor/store';\n\nimport { selectOpenId, slice } from './store';\n\nexport const V2_PANEL = 'panel/v2';\n\nexport function getPortalContainer() {\n\treturn document.querySelector( '#elementor-panel-inner' );\n}\n\nexport function sync() {\n\t// Register the V2 panel route on panel init.\n\tlistenTo( windowEvent( 'elementor/panel/init' ), () => registerRoute( V2_PANEL ) );\n\n\t// On empty route open, hide V1 panel elements.\n\tlistenTo( routeOpenEvent( V2_PANEL ), () => {\n\t\tgetV1PanelElements().forEach( ( el ) => {\n\t\t\tel.setAttribute( 'hidden', 'hidden' );\n\t\t\tel.setAttribute( 'inert', 'true' );\n\t\t} );\n\t} );\n\n\t// On empty route close, close the V2 panel.\n\tlistenTo( routeCloseEvent( V2_PANEL ), () => selectOpenId( __getState() ) && __dispatch( slice.actions.close() ) );\n\n\t// On empty route close, show V1 panel elements.\n\tlistenTo( routeCloseEvent( V2_PANEL ), () => {\n\t\tgetV1PanelElements().forEach( ( el ) => {\n\t\t\tel.removeAttribute( 'hidden' );\n\t\t\tel.removeAttribute( 'inert' );\n\t\t} );\n\t} );\n\n\t// On V2 panel open, open the V2 panel route.\n\tlistenTo( windowEvent( 'elementor/panel/init' ), () =>\n\t\tsubscribe( {\n\t\t\ton: ( state ) => selectOpenId( state ),\n\t\t\twhen: ( { prev, current } ) => !! ( ! prev && current ), // is panel opened\n\t\t\tcallback: () => openRoute( V2_PANEL ),\n\t\t} )\n\t);\n\n\t// On V2 panel close, close the V2 panel route.\n\tlistenTo( windowEvent( 'elementor/panel/init' ), () =>\n\t\tsubscribe( {\n\t\t\ton: ( state ) => selectOpenId( state ),\n\t\t\twhen: ( { prev, current } ) => !! ( ! current && prev ), // is panel closed\n\t\t\tcallback: () => isRouteActive( V2_PANEL ) && openRoute( getDefaultRoute() ),\n\t\t} )\n\t);\n}\n\nfunction getV1PanelElements() {\n\tconst v1ElementsSelector = [\n\t\t'#elementor-panel-header-wrapper',\n\t\t'#elementor-panel-content-wrapper',\n\t\t'#elementor-panel-state-loading',\n\t].join( ', ' );\n\n\treturn document.querySelectorAll( v1ElementsSelector );\n}\n\nfunction getDefaultRoute() {\n\ttype ExtendedWindow = Window & {\n\t\telementor?: {\n\t\t\tdocuments?: {\n\t\t\t\tgetCurrent?: () => {\n\t\t\t\t\tconfig?: {\n\t\t\t\t\t\tpanel?: {\n\t\t\t\t\t\t\tdefault_route?: string;\n\t\t\t\t\t\t};\n\t\t\t\t\t};\n\t\t\t\t};\n\t\t\t};\n\t\t};\n\t};\n\n\tconst defaultRoute = ( window as unknown as ExtendedWindow )?.elementor?.documents?.getCurrent?.()?.config?.panel\n\t\t?.default_route;\n\n\treturn defaultRoute || 'panel/elements/categories';\n}\n\nfunction subscribe< TVal >( {\n\ton,\n\twhen,\n\tcallback,\n}: {\n\ton: ( state: ReturnType< typeof __getState > ) => TVal;\n\twhen: ( { prev, current }: { prev: TVal; current: TVal } ) => boolean;\n\tcallback: ( { prev, current }: { prev: TVal; current: TVal } ) => void;\n} ) {\n\tlet prev: TVal;\n\n\toriginalSubscribe( () => {\n\t\tconst current = on( __getState() );\n\n\t\tif ( when( { prev, current } ) ) {\n\t\t\tcallback( { prev, current } );\n\t\t}\n\n\t\tprev = current;\n\t} );\n}\n","import { type ComponentType } from 'react';\nimport {\n\t__privateRunCommand as runCommand,\n\t__privateUseRouteStatus as useRouteStatus,\n\ttype UseRouteStatusOptions,\n} from '@elementor/editor-v1-adapters';\nimport { __useDispatch as useDispatch, __useSelector as useSelector } from '@elementor/store';\n\nimport { injectIntoPanels } from './location';\nimport { selectOpenId, slice } from './store';\nimport { V2_PANEL } from './sync';\n\nexport type PanelDeclaration< TOnOpenReturn = unknown > = {\n\tid: string;\n\tcomponent: ComponentType;\n\tisOpenPreviousElement?: boolean;\n} & UseActionsOptions< TOnOpenReturn > &\n\tUseRouteStatusOptions;\n\nexport function createPanel< TOnOpenReturn >( {\n\tid,\n\tcomponent,\n\tonOpen,\n\tonClose,\n\tallowedEditModes,\n\tblockOnKitRoutes,\n\tisOpenPreviousElement = false,\n}: PanelDeclaration< TOnOpenReturn > ) {\n\tconst usePanelStatus = createUseStatus( id, {\n\t\tallowedEditModes,\n\t\tblockOnKitRoutes,\n\t} );\n\n\tconst usePanelActions = createUseActions(\n\t\tid,\n\t\tusePanelStatus,\n\t\t{\n\t\t\tonOpen,\n\t\t\tonClose,\n\t\t},\n\t\tisOpenPreviousElement\n\t);\n\n\treturn {\n\t\tpanel: {\n\t\t\tid,\n\t\t\tcomponent,\n\t\t},\n\t\tusePanelStatus,\n\t\tusePanelActions,\n\t};\n}\n\nexport function registerPanel( { id, component }: Pick< PanelDeclaration, 'id' | 'component' > ) {\n\tinjectIntoPanels( {\n\t\tid,\n\t\tcomponent,\n\t} );\n}\n\ntype UseStatus = () => {\n\tisOpen: boolean;\n\tisBlocked: boolean;\n};\n\nfunction createUseStatus( id: PanelDeclaration[ 'id' ], options: UseRouteStatusOptions = {} ): UseStatus {\n\treturn () => {\n\t\tconst openPanelId = useSelector( selectOpenId );\n\t\tconst v1PanelStatus = useRouteStatus( V2_PANEL, options );\n\n\t\treturn {\n\t\t\tisOpen: openPanelId === id && v1PanelStatus.isActive,\n\t\t\tisBlocked: v1PanelStatus.isBlocked,\n\t\t};\n\t};\n}\n\ntype UseActionsOptions< TOnOpenReturn > = {\n\tonOpen?: () => TOnOpenReturn;\n\tonClose?: ( state: TOnOpenReturn ) => Promise< void >;\n};\n\nfunction createUseActions< TOnOpenReturn >(\n\tid: PanelDeclaration[ 'id' ],\n\tuseStatus: UseStatus,\n\toptions: UseActionsOptions< TOnOpenReturn > = {},\n\tisOpenPreviousElement?: boolean\n) {\n\tlet stateSnapshot: TOnOpenReturn | null = null;\n\tlet previousSelectedElement: string | null = null;\n\n\treturn () => {\n\t\tconst dispatch = useDispatch();\n\t\tconst { isBlocked } = useStatus();\n\n\t\treturn {\n\t\t\topen: async () => {\n\t\t\t\tif ( isBlocked ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif ( isOpenPreviousElement ) {\n\t\t\t\t\tpreviousSelectedElement =\n\t\t\t\t\t\twindow.elementor?.selection?.getElements?.()[ 0 ]?.model.get( 'id' ) ?? null;\n\t\t\t\t}\n\n\t\t\t\tdispatch( slice.actions.open( id ) );\n\n\t\t\t\tstateSnapshot = options.onOpen?.() ?? null;\n\t\t\t},\n\t\t\tclose: async () => {\n\t\t\t\tif ( isBlocked ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tdispatch( slice.actions.close( id ) );\n\n\t\t\t\tawait options.onClose?.( stateSnapshot as TOnOpenReturn );\n\n\t\t\t\tif ( previousSelectedElement ) {\n\t\t\t\t\ttry {\n\t\t\t\t\t\tconst container = window.elementor?.getContainer?.( previousSelectedElement );\n\t\t\t\t\t\trunCommand( 'document/elements/select', { container } );\n\t\t\t\t\t} catch {}\n\t\t\t\t\tpreviousSelectedElement = null;\n\t\t\t\t}\n\t\t\t},\n\t\t};\n\t};\n}\n","import * as React from 'react';\nimport { Drawer, type DrawerProps } from '@elementor/ui';\n\nexport default function Panel( { children, sx, ...props }: DrawerProps ) {\n\treturn (\n\t\t<Drawer\n\t\t\topen={ true }\n\t\t\tvariant=\"persistent\"\n\t\t\tanchor=\"left\"\n\t\t\tPaperProps={ {\n\t\t\t\tsx: {\n\t\t\t\t\tposition: 'relative',\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\tbgcolor: 'background.default',\n\t\t\t\t\tborder: 'none',\n\t\t\t\t},\n\t\t\t} }\n\t\t\tsx={ { height: '100%', ...sx } }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children }\n\t\t</Drawer>\n\t);\n}\n","import * as React from 'react';\nimport { Box, type BoxProps, styled } from '@elementor/ui';\n\nconst Header = styled( Box )( ( { theme } ) => ( {\n\theight: theme?.spacing( 6 ) || '48px',\n\tdisplay: 'flex',\n\talignItems: 'center',\n\tjustifyContent: 'center',\n\tgap: theme?.spacing( 0.5 ) || '4px',\n} ) );\n\nexport default function PanelHeader( { children, ...props }: BoxProps ) {\n\treturn (\n\t\t<>\n\t\t\t<Header component=\"header\" { ...props }>\n\t\t\t\t{ children }\n\t\t\t</Header>\n\t\t</>\n\t);\n}\n","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { styled, Typography as TypographySource, type TypographyProps } from '@elementor/ui';\n\n// This is to override Editor reset.scss that overrides eui styles\nconst Typography = styled( TypographySource )< TypographyProps >( ( { theme, variant = 'body1' } ) => {\n\tif ( variant === 'inherit' ) {\n\t\treturn {};\n\t}\n\n\treturn {\n\t\t'&.MuiTypography-root': {\n\t\t\t...theme.typography[ variant ],\n\t\t},\n\t};\n} );\n\nconst PanelHeaderTitle = forwardRef< HTMLHeadingElement, TypographyProps >( ( { children, ...props }, ref ) => {\n\treturn (\n\t\t<Typography ref={ ref } component=\"h2\" variant=\"subtitle1\" { ...props }>\n\t\t\t{ children }\n\t\t</Typography>\n\t);\n} );\n\nexport default PanelHeaderTitle;\n","import * as React from 'react';\nimport { Box, type BoxProps } from '@elementor/ui';\n\nexport default function PanelBody( { children, sx, ...props }: BoxProps ) {\n\treturn (\n\t\t<Box\n\t\t\tcomponent=\"main\"\n\t\t\tsx={ {\n\t\t\t\toverflowY: 'auto',\n\t\t\t\theight: '100%',\n\t\t\t\t...sx,\n\t\t\t} }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children }\n\t\t</Box>\n\t);\n}\n","import * as React from 'react';\nimport { Box, type BoxProps, Divider } from '@elementor/ui';\n\nexport default function PanelFooter( { children, sx, ...props }: BoxProps ) {\n\treturn (\n\t\t<>\n\t\t\t<Divider />\n\t\t\t<Box\n\t\t\t\tcomponent=\"footer\"\n\t\t\t\tsx={ {\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tposition: 'sticky',\n\t\t\t\t\tbottom: 0,\n\t\t\t\t\tpx: 2,\n\t\t\t\t\tpy: 1.5,\n\t\t\t\t} }\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Box>\n\t\t</>\n\t);\n}\n"],"mappings":";AAAA,SAAS,qBAAqB;AAC9B,SAAS,uBAAuB;;;ACDhC,YAAYA,YAAW;;;ACAvB,SAAS,eAAe;AACxB,SAAS,iBAAiB,mBAAmB;;;ACD7C,SAAS,sBAAsB;AAExB,IAAM,EAAE,QAAQ,kBAAkB,eAAe,oBAAoB,IAAI,eAAe;;;ACIxF,IAAM,eAAe,CAAE,UAAkB,MAAM,OAAO;;;ACN7D,SAAS,qBAAyC;AAElD,IAAM,eAEF;AAAA,EACH,QAAQ;AACT;AAEA,IAAO,gBAAQ,cAAe;AAAA,EAC7B,MAAM;AAAA,EACN;AAAA,EACA,UAAU;AAAA,IACT,KAAM,OAAO,QAAkC;AAC9C,YAAM,SAAS,OAAO;AAAA,IACvB;AAAA,IACA,MAAO,OAAO,QAA8C;AAC3D,UAAK,CAAE,OAAO,WAAW,MAAM,WAAW,OAAO,SAAU;AAC1D,cAAM,SAAS;AAAA,MAChB;AAAA,IACD;AAAA,EACD;AACD,CAAE;;;AHfa,SAAR,wBAAyC;AAC/C,QAAM,aAAa,oBAAoB;AACvC,QAAM,SAAS,YAAa,YAAa;AAEzC,SAAO,QAAS,MAAM,WAAW,KAAM,CAAE,cAAe,WAAW,UAAU,EAAG,GAAG,CAAE,YAAY,MAAO,CAAE;AAC3G;;;AIXA,YAAY,WAAW;AACvB,SAAS,cAAc;AACvB,SAAS,UAAU,kBAAoC;;;ACFvD;AAAA,EACC,0BAA0B;AAAA,EAC1B,qBAAqB;AAAA,EACrB,sBAAsB;AAAA,EACtB,0BAA0B;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,YAAY,YAAY,eAAe,yBAAyB;AAIlE,IAAM,WAAW;AAEjB,SAAS,qBAAqB;AACpC,SAAO,SAAS,cAAe,wBAAyB;AACzD;AAEO,SAAS,OAAO;AAEtB,WAAU,YAAa,sBAAuB,GAAG,MAAM,cAAe,QAAS,CAAE;AAGjF,WAAU,eAAgB,QAAS,GAAG,MAAM;AAC3C,uBAAmB,EAAE,QAAS,CAAE,OAAQ;AACvC,SAAG,aAAc,UAAU,QAAS;AACpC,SAAG,aAAc,SAAS,MAAO;AAAA,IAClC,CAAE;AAAA,EACH,CAAE;AAGF,WAAU,gBAAiB,QAAS,GAAG,MAAM,aAAc,WAAW,CAAE,KAAK,WAAY,cAAM,QAAQ,MAAM,CAAE,CAAE;AAGjH,WAAU,gBAAiB,QAAS,GAAG,MAAM;AAC5C,uBAAmB,EAAE,QAAS,CAAE,OAAQ;AACvC,SAAG,gBAAiB,QAAS;AAC7B,SAAG,gBAAiB,OAAQ;AAAA,IAC7B,CAAE;AAAA,EACH,CAAE;AAGF;AAAA,IAAU,YAAa,sBAAuB;AAAA,IAAG,MAChD,UAAW;AAAA,MACV,IAAI,CAAE,UAAW,aAAc,KAAM;AAAA,MACrC,MAAM,CAAE,EAAE,MAAM,QAAQ,MAAO,CAAC,EAAI,CAAE,QAAQ;AAAA;AAAA,MAC9C,UAAU,MAAM,UAAW,QAAS;AAAA,IACrC,CAAE;AAAA,EACH;AAGA;AAAA,IAAU,YAAa,sBAAuB;AAAA,IAAG,MAChD,UAAW;AAAA,MACV,IAAI,CAAE,UAAW,aAAc,KAAM;AAAA,MACrC,MAAM,CAAE,EAAE,MAAM,QAAQ,MAAO,CAAC,EAAI,CAAE,WAAW;AAAA;AAAA,MACjD,UAAU,MAAM,cAAe,QAAS,KAAK,UAAW,gBAAgB,CAAE;AAAA,IAC3E,CAAE;AAAA,EACH;AACD;AAEA,SAAS,qBAAqB;AAC7B,QAAM,qBAAqB;AAAA,IAC1B;AAAA,IACA;AAAA,IACA;AAAA,EACD,EAAE,KAAM,IAAK;AAEb,SAAO,SAAS,iBAAkB,kBAAmB;AACtD;AAEA,SAAS,kBAAkB;AAe1B,QAAM,eAAiB,QAAuC,WAAW,WAAW,aAAa,GAAG,QAAQ,OACzG;AAEH,SAAO,gBAAgB;AACxB;AAEA,SAAS,UAAmB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AACD,GAII;AACH,MAAI;AAEJ,oBAAmB,MAAM;AACxB,UAAM,UAAU,GAAI,WAAW,CAAE;AAEjC,QAAK,KAAM,EAAE,MAAM,QAAQ,CAAE,GAAI;AAChC,eAAU,EAAE,MAAM,QAAQ,CAAE;AAAA,IAC7B;AAEA,WAAO;AAAA,EACR,CAAE;AACH;;;ADxGe,SAAR,OAAyB,OAAe;AAC9C,QAAM,eAAe,OAAQ,kBAAmB;AAEhD,MAAK,CAAE,aAAa,SAAU;AAC7B,WAAO;AAAA,EACR;AAEA,SAAO,oCAAC,cAAW,WAAY,aAAa,SAAY,GAAG,OAAQ;AACpE;;;ALXe,SAAR,SAA0B;AAChC,QAAM,YAAY,sBAAsB;AACxC,QAAM,YAAY,WAAW,aAAa;AAE1C,MAAK,CAAE,WAAY;AAClB,WAAO;AAAA,EACR;AAEA,SACC,qCAAC,cACA,qCAAC,eAAU,CACZ;AAEF;;;ADXO,SAAS,OAAO;AACtB,OAAK;AAEL,kBAAiB,aAAM;AAEvB,gBAAe,EAAE,IAAI,UAAU,WAAW,OAAO,CAAE;AACpD;;;AQZA;AAAA,EACC,uBAAuB;AAAA,EACvB,2BAA2B;AAAA,OAErB;AACP,SAAS,iBAAiB,aAAa,iBAAiBC,oBAAmB;AAapE,SAAS,YAA8B;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,wBAAwB;AACzB,GAAuC;AACtC,QAAM,iBAAiB,gBAAiB,IAAI;AAAA,IAC3C;AAAA,IACA;AAAA,EACD,CAAE;AAEF,QAAM,kBAAkB;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,MACC;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,EACD;AAEA,SAAO;AAAA,IACN,OAAO;AAAA,MACN;AAAA,MACA;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;AAEO,SAAS,cAAe,EAAE,IAAI,UAAU,GAAkD;AAChG,mBAAkB;AAAA,IACjB;AAAA,IACA;AAAA,EACD,CAAE;AACH;AAOA,SAAS,gBAAiB,IAA8B,UAAiC,CAAC,GAAe;AACxG,SAAO,MAAM;AACZ,UAAM,cAAcC,aAAa,YAAa;AAC9C,UAAM,gBAAgB,eAAgB,UAAU,OAAQ;AAExD,WAAO;AAAA,MACN,QAAQ,gBAAgB,MAAM,cAAc;AAAA,MAC5C,WAAW,cAAc;AAAA,IAC1B;AAAA,EACD;AACD;AAOA,SAAS,iBACR,IACA,WACA,UAA8C,CAAC,GAC/C,uBACC;AACD,MAAI,gBAAsC;AAC1C,MAAI,0BAAyC;AAE7C,SAAO,MAAM;AACZ,UAAM,WAAW,YAAY;AAC7B,UAAM,EAAE,UAAU,IAAI,UAAU;AAEhC,WAAO;AAAA,MACN,MAAM,YAAY;AACjB,YAAK,WAAY;AAChB;AAAA,QACD;AACA,YAAK,uBAAwB;AAC5B,oCACC,OAAO,WAAW,WAAW,cAAc,EAAG,CAAE,GAAG,MAAM,IAAK,IAAK,KAAK;AAAA,QAC1E;AAEA,iBAAU,cAAM,QAAQ,KAAM,EAAG,CAAE;AAEnC,wBAAgB,QAAQ,SAAS,KAAK;AAAA,MACvC;AAAA,MACA,OAAO,YAAY;AAClB,YAAK,WAAY;AAChB;AAAA,QACD;AAEA,iBAAU,cAAM,QAAQ,MAAO,EAAG,CAAE;AAEpC,cAAM,QAAQ,UAAW,aAA+B;AAExD,YAAK,yBAA0B;AAC9B,cAAI;AACH,kBAAM,YAAY,OAAO,WAAW,eAAgB,uBAAwB;AAC5E,uBAAY,4BAA4B,EAAE,UAAU,CAAE;AAAA,UACvD,QAAQ;AAAA,UAAC;AACT,oCAA0B;AAAA,QAC3B;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACD;;;AChIA,YAAYC,YAAW;AACvB,SAAS,cAAgC;AAE1B,SAAR,MAAwB,EAAE,UAAU,IAAI,GAAG,MAAM,GAAiB;AACxE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAO;AAAA,MACP,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,YAAa;AAAA,QACZ,IAAI;AAAA,UACH,UAAU;AAAA,UACV,OAAO;AAAA,UACP,SAAS;AAAA,UACT,QAAQ;AAAA,QACT;AAAA,MACD;AAAA,MACA,IAAK,EAAE,QAAQ,QAAQ,GAAG,GAAG;AAAA,MAC3B,GAAG;AAAA;AAAA,IAEH;AAAA,EACH;AAEF;;;ACvBA,YAAYC,YAAW;AACvB,SAAS,KAAoB,cAAc;AAE3C,IAAM,SAAS,OAAQ,GAAI,EAAG,CAAE,EAAE,MAAM,OAAS;AAAA,EAChD,QAAQ,OAAO,QAAS,CAAE,KAAK;AAAA,EAC/B,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB,KAAK,OAAO,QAAS,GAAI,KAAK;AAC/B,EAAI;AAEW,SAAR,YAA8B,EAAE,UAAU,GAAG,MAAM,GAAc;AACvE,SACC,4DACC,qCAAC,UAAO,WAAU,UAAW,GAAG,SAC7B,QACH,CACD;AAEF;;;ACnBA,YAAYC,YAAW;AACvB,SAAS,kBAAkB;AAC3B,SAAS,UAAAC,SAAQ,cAAc,wBAA8C;AAG7E,IAAM,aAAaA,QAAQ,gBAAiB,EAAsB,CAAE,EAAE,OAAO,UAAU,QAAQ,MAAO;AACrG,MAAK,YAAY,WAAY;AAC5B,WAAO,CAAC;AAAA,EACT;AAEA,SAAO;AAAA,IACN,wBAAwB;AAAA,MACvB,GAAG,MAAM,WAAY,OAAQ;AAAA,IAC9B;AAAA,EACD;AACD,CAAE;AAEF,IAAM,mBAAmB,WAAmD,CAAE,EAAE,UAAU,GAAG,MAAM,GAAG,QAAS;AAC9G,SACC,qCAAC,cAAW,KAAY,WAAU,MAAK,SAAQ,aAAc,GAAG,SAC7D,QACH;AAEF,CAAE;AAEF,IAAO,6BAAQ;;;ACzBf,YAAYC,YAAW;AACvB,SAAS,OAAAC,YAA0B;AAEpB,SAAR,UAA4B,EAAE,UAAU,IAAI,GAAG,MAAM,GAAc;AACzE,SACC;AAAA,IAACA;AAAA,IAAA;AAAA,MACA,WAAU;AAAA,MACV,IAAK;AAAA,QACJ,WAAW;AAAA,QACX,QAAQ;AAAA,QACR,GAAG;AAAA,MACJ;AAAA,MACE,GAAG;AAAA;AAAA,IAEH;AAAA,EACH;AAEF;;;ACjBA,YAAYC,YAAW;AACvB,SAAS,OAAAC,MAAoB,eAAe;AAE7B,SAAR,YAA8B,EAAE,UAAU,IAAI,GAAG,MAAM,GAAc;AAC3E,SACC,4DACC,qCAAC,aAAQ,GACT;AAAA,IAACA;AAAA,IAAA;AAAA,MACA,WAAU;AAAA,MACV,IAAK;AAAA,QACJ,SAAS;AAAA,QACT,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,IAAI;AAAA,QACJ,IAAI;AAAA,MACL;AAAA,MACE,GAAG;AAAA;AAAA,IAEH;AAAA,EACH,CACD;AAEF;","names":["React","useSelector","useSelector","React","React","React","styled","React","Box","React","Box"]}
+{"version":3,"sources":["../src/init.ts","../src/components/internal/panels.tsx","../src/location.ts","../src/store/selectors.ts","../src/store/slice.ts","../src/components/internal/portal.tsx","../src/sync.ts","../src/api.ts","../src/components/external/panel.tsx","../src/components/external/panel-header.tsx","../src/components/external/panel-header-title.tsx","../src/components/external/panel-body.tsx","../src/components/external/panel-footer.tsx"],"sourcesContent":["import { injectIntoTop } from '@elementor/editor';\nimport { __registerSlice } from '@elementor/store';\n\nimport Panels from './components/internal/panels';\nimport { slice } from './store';\nimport { sync } from './sync';\n\nexport function init() {\n\tsync();\n\n\t__registerSlice( slice );\n\n\tinjectIntoTop( { id: 'panels', component: Panels } );\n}\n","import * as React from 'react';\nimport { __useSelector as useSelector } from '@elementor/store';\n\nimport { usePanelsInjections } from '../../location';\nimport { selectOpenId } from '../../store';\nimport Portal from './portal';\n\nexport default function Panels() {\n\tconst injections = usePanelsInjections();\n\tconst openId = useSelector( selectOpenId );\n\n\tconst persistentInjections = injections.filter( ( injection ) => injection.keepMounted );\n\tconst openInjection = injections.find( ( injection ) => openId === injection.id );\n\n\tif ( ! persistentInjections.length && ! openInjection ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Portal>\n\t\t\t{ persistentInjections.map( ( { id, component: Component } ) => (\n\t\t\t\t<div key={ id } style={ { display: openId === id ? 'contents' : 'none' } }>\n\t\t\t\t\t<Component />\n\t\t\t\t</div>\n\t\t\t) ) }\n\t\t\t{ openInjection && ! openInjection.keepMounted && <openInjection.component /> }\n\t\t</Portal>\n\t);\n}\n","import { type ComponentType } from 'react';\nimport { __registerFlushInjections, createLocation } from '@elementor/locations';\n\ntype PanelsInjectionMeta = {\n\tkeepMounted?: boolean;\n};\n\nexport type PanelsInjection = {\n\tid: string;\n\tcomponent: ComponentType;\n\tkeepMounted?: boolean;\n};\n\nconst panelsMeta = new Map< string, PanelsInjectionMeta >();\n\nconst { inject: baseInject, useInjections: baseUseInjections, getInjections } = createLocation();\n\n__registerFlushInjections( () => {\n\tpanelsMeta.clear();\n} );\n\nexport function injectIntoPanels( {\n\tid,\n\tcomponent,\n\tkeepMounted,\n}: {\n\tid: string;\n\tcomponent: ComponentType;\n\tkeepMounted?: boolean;\n} ) {\n\tconst existedBefore = getInjections().some( ( injection ) => injection.id === id );\n\n\tbaseInject( { id, component } );\n\n\tif ( ! existedBefore ) {\n\t\tpanelsMeta.set( id, { keepMounted } );\n\t}\n}\n\nexport function usePanelsInjections(): PanelsInjection[] {\n\tconst injections = baseUseInjections();\n\n\treturn injections.map( ( injection ) => ( {\n\t\t...injection,\n\t\tkeepMounted: panelsMeta.get( injection.id )?.keepMounted ?? false,\n\t} ) );\n}\n","import { type SliceState } from '@elementor/store';\n\nimport type slice from './slice';\n\ntype State = SliceState< typeof slice >;\n\nexport const selectOpenId = ( state: State ) => state.panels.openId;\n","import { __createSlice, type PayloadAction } from '@elementor/store';\n\nconst initialState: {\n\topenId: string | null;\n} = {\n\topenId: null,\n};\n\nexport default __createSlice( {\n\tname: 'panels',\n\tinitialState,\n\treducers: {\n\t\topen( state, action: PayloadAction< string > ) {\n\t\t\tstate.openId = action.payload;\n\t\t},\n\t\tclose( state, action: PayloadAction< string | undefined > ) {\n\t\t\tif ( ! action.payload || state.openId === action.payload ) {\n\t\t\t\tstate.openId = null;\n\t\t\t}\n\t\t},\n\t},\n} );\n","import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { Portal as BasePortal, type PortalProps } from '@elementor/ui';\n\nimport { getPortalContainer } from '../../sync';\n\ntype Props = Omit< PortalProps, 'container' >;\n\nexport default function Portal( props: Props ) {\n\tconst [ container, setContainer ] = useState( () => getPortalContainer() );\n\n\tuseEffect( () => {\n\t\tif ( container ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst resolveContainer = () => {\n\t\t\tconst portalContainer = getPortalContainer();\n\n\t\t\tif ( portalContainer ) {\n\t\t\t\tsetContainer( portalContainer );\n\t\t\t}\n\t\t};\n\n\t\twindow.addEventListener( 'elementor/panel/init', resolveContainer );\n\t\tresolveContainer();\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener( 'elementor/panel/init', resolveContainer );\n\t\t};\n\t}, [ container ] );\n\n\tif ( ! container ) {\n\t\treturn null;\n\t}\n\n\treturn <BasePortal container={ container } { ...props } />;\n}\n","import {\n\t__privateIsRouteActive as isRouteActive,\n\t__privateListenTo as listenTo,\n\t__privateOpenRoute as openRoute,\n\t__privateRegisterRoute as registerRoute,\n\trouteCloseEvent,\n\trouteOpenEvent,\n\twindowEvent,\n} from '@elementor/editor-v1-adapters';\nimport { __dispatch, __getState, __subscribe as originalSubscribe } from '@elementor/store';\n\nimport { selectOpenId, slice } from './store';\n\nexport const V2_PANEL = 'panel/v2';\n\nexport function getPortalContainer() {\n\treturn document.querySelector( '#elementor-panel-inner' );\n}\n\nexport function sync() {\n\t// Register the V2 panel route on panel init.\n\tlistenTo( windowEvent( 'elementor/panel/init' ), () => registerRoute( V2_PANEL ) );\n\n\t// On empty route open, hide V1 panel elements.\n\tlistenTo( routeOpenEvent( V2_PANEL ), () => {\n\t\tgetV1PanelElements().forEach( ( el ) => {\n\t\t\tel.setAttribute( 'hidden', 'hidden' );\n\t\t\tel.setAttribute( 'inert', 'true' );\n\t\t} );\n\t} );\n\n\t// On empty route close, close the V2 panel.\n\tlistenTo( routeCloseEvent( V2_PANEL ), () => selectOpenId( __getState() ) && __dispatch( slice.actions.close() ) );\n\n\t// On empty route close, show V1 panel elements.\n\tlistenTo( routeCloseEvent( V2_PANEL ), () => {\n\t\tgetV1PanelElements().forEach( ( el ) => {\n\t\t\tel.removeAttribute( 'hidden' );\n\t\t\tel.removeAttribute( 'inert' );\n\t\t} );\n\t} );\n\n\t// On V2 panel open, open the V2 panel route.\n\tlistenTo( windowEvent( 'elementor/panel/init' ), () =>\n\t\tsubscribe( {\n\t\t\ton: ( state ) => selectOpenId( state ),\n\t\t\twhen: ( { prev, current } ) => !! ( ! prev && current ), // is panel opened\n\t\t\tcallback: () => openRoute( V2_PANEL ),\n\t\t} )\n\t);\n\n\t// On V2 panel close, close the V2 panel route.\n\tlistenTo( windowEvent( 'elementor/panel/init' ), () =>\n\t\tsubscribe( {\n\t\t\ton: ( state ) => selectOpenId( state ),\n\t\t\twhen: ( { prev, current } ) => !! ( ! current && prev ), // is panel closed\n\t\t\tcallback: () => isRouteActive( V2_PANEL ) && openRoute( getDefaultRoute() ),\n\t\t} )\n\t);\n}\n\nfunction getV1PanelElements() {\n\tconst v1ElementsSelector = [\n\t\t'#elementor-panel-header-wrapper',\n\t\t'#elementor-panel-content-wrapper',\n\t\t'#elementor-panel-state-loading',\n\t].join( ', ' );\n\n\treturn document.querySelectorAll( v1ElementsSelector );\n}\n\nfunction getDefaultRoute() {\n\ttype ExtendedWindow = Window & {\n\t\telementor?: {\n\t\t\tdocuments?: {\n\t\t\t\tgetCurrent?: () => {\n\t\t\t\t\tconfig?: {\n\t\t\t\t\t\tpanel?: {\n\t\t\t\t\t\t\tdefault_route?: string;\n\t\t\t\t\t\t};\n\t\t\t\t\t};\n\t\t\t\t};\n\t\t\t};\n\t\t};\n\t};\n\n\tconst defaultRoute = ( window as unknown as ExtendedWindow )?.elementor?.documents?.getCurrent?.()?.config?.panel\n\t\t?.default_route;\n\n\treturn defaultRoute || 'panel/elements/categories';\n}\n\nfunction subscribe< TVal >( {\n\ton,\n\twhen,\n\tcallback,\n}: {\n\ton: ( state: ReturnType< typeof __getState > ) => TVal;\n\twhen: ( { prev, current }: { prev: TVal; current: TVal } ) => boolean;\n\tcallback: ( { prev, current }: { prev: TVal; current: TVal } ) => void;\n} ) {\n\tlet prev: TVal;\n\n\toriginalSubscribe( () => {\n\t\tconst current = on( __getState() );\n\n\t\tif ( when( { prev, current } ) ) {\n\t\t\tcallback( { prev, current } );\n\t\t}\n\n\t\tprev = current;\n\t} );\n}\n","import { type ComponentType } from 'react';\nimport {\n\t__privateRunCommand as runCommand,\n\t__privateUseRouteStatus as useRouteStatus,\n\ttype UseRouteStatusOptions,\n} from '@elementor/editor-v1-adapters';\nimport { __useDispatch as useDispatch, __useSelector as useSelector } from '@elementor/store';\n\nimport { injectIntoPanels } from './location';\nimport { selectOpenId, slice } from './store';\nimport { V2_PANEL } from './sync';\n\nexport type PanelDeclaration< TOnOpenReturn = unknown > = {\n\tid: string;\n\tcomponent: ComponentType;\n\tisOpenPreviousElement?: boolean;\n\tkeepMounted?: boolean;\n} & UseActionsOptions< TOnOpenReturn > &\n\tUseRouteStatusOptions;\n\nexport function createPanel< TOnOpenReturn >( {\n\tid,\n\tcomponent,\n\tonOpen,\n\tonClose,\n\tallowedEditModes,\n\tblockOnKitRoutes,\n\tisOpenPreviousElement = false,\n\tkeepMounted = false,\n}: PanelDeclaration< TOnOpenReturn > ) {\n\tconst usePanelStatus = createUseStatus( id, {\n\t\tallowedEditModes,\n\t\tblockOnKitRoutes,\n\t} );\n\n\tconst usePanelActions = createUseActions(\n\t\tid,\n\t\tusePanelStatus,\n\t\t{\n\t\t\tonOpen,\n\t\t\tonClose,\n\t\t},\n\t\tisOpenPreviousElement\n\t);\n\n\treturn {\n\t\tpanel: {\n\t\t\tid,\n\t\t\tcomponent,\n\t\t\tkeepMounted,\n\t\t},\n\t\tusePanelStatus,\n\t\tusePanelActions,\n\t};\n}\n\nexport function registerPanel( {\n\tid,\n\tcomponent,\n\tkeepMounted,\n}: Pick< PanelDeclaration, 'id' | 'component' | 'keepMounted' > ) {\n\tinjectIntoPanels( {\n\t\tid,\n\t\tcomponent,\n\t\tkeepMounted,\n\t} );\n}\n\ntype UseStatus = () => {\n\tisOpen: boolean;\n\tisBlocked: boolean;\n};\n\nfunction createUseStatus( id: PanelDeclaration[ 'id' ], options: UseRouteStatusOptions = {} ): UseStatus {\n\treturn () => {\n\t\tconst openPanelId = useSelector( selectOpenId );\n\t\tconst v1PanelStatus = useRouteStatus( V2_PANEL, options );\n\n\t\treturn {\n\t\t\tisOpen: openPanelId === id && v1PanelStatus.isActive,\n\t\t\tisBlocked: v1PanelStatus.isBlocked,\n\t\t};\n\t};\n}\n\ntype UseActionsOptions< TOnOpenReturn > = {\n\tonOpen?: () => TOnOpenReturn;\n\tonClose?: ( state: TOnOpenReturn ) => Promise< void >;\n};\n\nfunction createUseActions< TOnOpenReturn >(\n\tid: PanelDeclaration[ 'id' ],\n\tuseStatus: UseStatus,\n\toptions: UseActionsOptions< TOnOpenReturn > = {},\n\tisOpenPreviousElement?: boolean\n) {\n\tlet stateSnapshot: TOnOpenReturn | null = null;\n\tlet previousSelectedElement: string | null = null;\n\n\treturn () => {\n\t\tconst dispatch = useDispatch();\n\t\tconst { isBlocked } = useStatus();\n\n\t\treturn {\n\t\t\topen: async () => {\n\t\t\t\tif ( isBlocked ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\tif ( isOpenPreviousElement ) {\n\t\t\t\t\tpreviousSelectedElement =\n\t\t\t\t\t\twindow.elementor?.selection?.getElements?.()[ 0 ]?.model.get( 'id' ) ?? null;\n\t\t\t\t}\n\n\t\t\t\tdispatch( slice.actions.open( id ) );\n\n\t\t\t\tstateSnapshot = options.onOpen?.() ?? null;\n\t\t\t},\n\t\t\tclose: async () => {\n\t\t\t\tif ( isBlocked ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tdispatch( slice.actions.close( id ) );\n\n\t\t\t\tawait options.onClose?.( stateSnapshot as TOnOpenReturn );\n\n\t\t\t\tif ( previousSelectedElement ) {\n\t\t\t\t\ttry {\n\t\t\t\t\t\tconst container = window.elementor?.getContainer?.( previousSelectedElement );\n\t\t\t\t\t\trunCommand( 'document/elements/select', { container } );\n\t\t\t\t\t} catch {}\n\t\t\t\t\tpreviousSelectedElement = null;\n\t\t\t\t}\n\t\t\t},\n\t\t};\n\t};\n}\n","import * as React from 'react';\nimport { Drawer, type DrawerProps } from '@elementor/ui';\n\nexport default function Panel( { children, sx, ...props }: DrawerProps ) {\n\treturn (\n\t\t<Drawer\n\t\t\topen={ true }\n\t\t\tvariant=\"persistent\"\n\t\t\tanchor=\"left\"\n\t\t\tPaperProps={ {\n\t\t\t\tsx: {\n\t\t\t\t\tposition: 'relative',\n\t\t\t\t\twidth: '100%',\n\t\t\t\t\tbgcolor: 'background.default',\n\t\t\t\t\tborder: 'none',\n\t\t\t\t},\n\t\t\t} }\n\t\t\tsx={ { height: '100%', ...sx } }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children }\n\t\t</Drawer>\n\t);\n}\n","import * as React from 'react';\nimport { Box, type BoxProps, styled } from '@elementor/ui';\n\nconst Header = styled( Box )( ( { theme } ) => ( {\n\theight: theme?.spacing( 6 ) || '48px',\n\tdisplay: 'flex',\n\talignItems: 'center',\n\tjustifyContent: 'center',\n\tgap: theme?.spacing( 0.5 ) || '4px',\n} ) );\n\nexport default function PanelHeader( { children, ...props }: BoxProps ) {\n\treturn (\n\t\t<>\n\t\t\t<Header component=\"header\" { ...props }>\n\t\t\t\t{ children }\n\t\t\t</Header>\n\t\t</>\n\t);\n}\n","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { styled, Typography as TypographySource, type TypographyProps } from '@elementor/ui';\n\n// This is to override Editor reset.scss that overrides eui styles\nconst Typography = styled( TypographySource )< TypographyProps >( ( { theme, variant = 'body1' } ) => {\n\tif ( variant === 'inherit' ) {\n\t\treturn {};\n\t}\n\n\treturn {\n\t\t'&.MuiTypography-root': {\n\t\t\t...theme.typography[ variant ],\n\t\t},\n\t};\n} );\n\nconst PanelHeaderTitle = forwardRef< HTMLHeadingElement, TypographyProps >( ( { children, ...props }, ref ) => {\n\treturn (\n\t\t<Typography ref={ ref } component=\"h2\" variant=\"subtitle1\" { ...props }>\n\t\t\t{ children }\n\t\t</Typography>\n\t);\n} );\n\nexport default PanelHeaderTitle;\n","import * as React from 'react';\nimport { Box, type BoxProps } from '@elementor/ui';\n\nexport default function PanelBody( { children, sx, ...props }: BoxProps ) {\n\treturn (\n\t\t<Box\n\t\t\tcomponent=\"main\"\n\t\t\tsx={ {\n\t\t\t\toverflowY: 'auto',\n\t\t\t\theight: '100%',\n\t\t\t\t...sx,\n\t\t\t} }\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children }\n\t\t</Box>\n\t);\n}\n","import * as React from 'react';\nimport { Box, type BoxProps, Divider } from '@elementor/ui';\n\nexport default function PanelFooter( { children, sx, ...props }: BoxProps ) {\n\treturn (\n\t\t<>\n\t\t\t<Divider />\n\t\t\t<Box\n\t\t\t\tcomponent=\"footer\"\n\t\t\t\tsx={ {\n\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\tposition: 'sticky',\n\t\t\t\t\tbottom: 0,\n\t\t\t\t\tpx: 2,\n\t\t\t\t\tpy: 1.5,\n\t\t\t\t} }\n\t\t\t\t{ ...props }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Box>\n\t\t</>\n\t);\n}\n"],"mappings":"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","names":["React","useSelector","useSelector","React","React","React","styled","React","Box","React","Box"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-panels",
-  "version": "4.3.0-998",
+  "version": "4.4.0-1064",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,10 +39,10 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.3.0-998",
-    "@elementor/editor-v1-adapters": "4.3.0-998",
-    "@elementor/locations": "4.3.0-998",
-    "@elementor/store": "4.3.0-998",
+    "@elementor/editor": "4.4.0-1064",
+    "@elementor/editor-v1-adapters": "4.4.0-1064",
+    "@elementor/locations": "4.4.0-1064",
+    "@elementor/store": "4.4.0-1064",
     "@elementor/ui": "1.37.5"
   },
   "peerDependencies": {

package/src/api.ts

@@ -14,6 +14,7 @@ export type PanelDeclaration< TOnOpenReturn = unknown > = {
 	id: string;
 	component: ComponentType;
 	isOpenPreviousElement?: boolean;
+	keepMounted?: boolean;
 } & UseActionsOptions< TOnOpenReturn > &
 	UseRouteStatusOptions;
 
@@ -25,6 +26,7 @@ export function createPanel< TOnOpenReturn >( {
 	allowedEditModes,
 	blockOnKitRoutes,
 	isOpenPreviousElement = false,
+	keepMounted = false,
 }: PanelDeclaration< TOnOpenReturn > ) {
 	const usePanelStatus = createUseStatus( id, {
 		allowedEditModes,
@@ -45,16 +47,22 @@ export function createPanel< TOnOpenReturn >( {
 		panel: {
 			id,
 			component,
+			keepMounted,
 		},
 		usePanelStatus,
 		usePanelActions,
 	};
 }
 
-export function registerPanel( { id, component }: Pick< PanelDeclaration, 'id' | 'component' > ) {
+export function registerPanel( {
+	id,
+	component,
+	keepMounted,
+}: Pick< PanelDeclaration, 'id' | 'component' | 'keepMounted' > ) {
 	injectIntoPanels( {
 		id,
 		component,
+		keepMounted,
 	} );
 }
 

package/src/components/internal/panels.tsx

@@ -1,19 +1,29 @@
 import * as React from 'react';
+import { __useSelector as useSelector } from '@elementor/store';
 
-import useOpenPanelInjection from '../../hooks/use-open-panel-injection';
+import { usePanelsInjections } from '../../location';
+import { selectOpenId } from '../../store';
 import Portal from './portal';
 
 export default function Panels() {
-	const openPanel = useOpenPanelInjection();
-	const Component = openPanel?.component ?? null;
+	const injections = usePanelsInjections();
+	const openId = useSelector( selectOpenId );
 
-	if ( ! Component ) {
+	const persistentInjections = injections.filter( ( injection ) => injection.keepMounted );
+	const openInjection = injections.find( ( injection ) => openId === injection.id );
+
+	if ( ! persistentInjections.length && ! openInjection ) {
 		return null;
 	}
 
 	return (
 		<Portal>
-			<Component />
+			{ persistentInjections.map( ( { id, component: Component } ) => (
+				<div key={ id } style={ { display: openId === id ? 'contents' : 'none' } }>
+					<Component />
+				</div>
+			) ) }
+			{ openInjection && ! openInjection.keepMounted && <openInjection.component /> }
 		</Portal>
 	);
 }

package/src/components/internal/portal.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useRef } from 'react';
+import { useEffect, useState } from 'react';
 import { Portal as BasePortal, type PortalProps } from '@elementor/ui';
 
 import { getPortalContainer } from '../../sync';
@@ -7,11 +7,32 @@ import { getPortalContainer } from '../../sync';
 type Props = Omit< PortalProps, 'container' >;
 
 export default function Portal( props: Props ) {
-	const containerRef = useRef( getPortalContainer );
+	const [ container, setContainer ] = useState( () => getPortalContainer() );
 
-	if ( ! containerRef.current ) {
+	useEffect( () => {
+		if ( container ) {
+			return;
+		}
+
+		const resolveContainer = () => {
+			const portalContainer = getPortalContainer();
+
+			if ( portalContainer ) {
+				setContainer( portalContainer );
+			}
+		};
+
+		window.addEventListener( 'elementor/panel/init', resolveContainer );
+		resolveContainer();
+
+		return () => {
+			window.removeEventListener( 'elementor/panel/init', resolveContainer );
+		};
+	}, [ container ] );
+
+	if ( ! container ) {
 		return null;
 	}
 
-	return <BasePortal container={ containerRef.current } { ...props } />;
+	return <BasePortal container={ container } { ...props } />;
 }

package/src/index.ts

@@ -1,5 +1,6 @@
 export { init } from './init';
 
+export { createPanel, registerPanel } from './api';
 export { createPanel as __createPanel, registerPanel as __registerPanel } from './api';
 
 export * from './components/external';

package/src/location.ts

@@ -1,3 +1,47 @@
-import { createLocation } from '@elementor/locations';
+import { type ComponentType } from 'react';
+import { __registerFlushInjections, createLocation } from '@elementor/locations';
 
-export const { inject: injectIntoPanels, useInjections: usePanelsInjections } = createLocation();
+type PanelsInjectionMeta = {
+	keepMounted?: boolean;
+};
+
+export type PanelsInjection = {
+	id: string;
+	component: ComponentType;
+	keepMounted?: boolean;
+};
+
+const panelsMeta = new Map< string, PanelsInjectionMeta >();
+
+const { inject: baseInject, useInjections: baseUseInjections, getInjections } = createLocation();
+
+__registerFlushInjections( () => {
+	panelsMeta.clear();
+} );
+
+export function injectIntoPanels( {
+	id,
+	component,
+	keepMounted,
+}: {
+	id: string;
+	component: ComponentType;
+	keepMounted?: boolean;
+} ) {
+	const existedBefore = getInjections().some( ( injection ) => injection.id === id );
+
+	baseInject( { id, component } );
+
+	if ( ! existedBefore ) {
+		panelsMeta.set( id, { keepMounted } );
+	}
+}
+
+export function usePanelsInjections(): PanelsInjection[] {
+	const injections = baseUseInjections();
+
+	return injections.map( ( injection ) => ( {
+		...injection,
+		keepMounted: panelsMeta.get( injection.id )?.keepMounted ?? false,
+	} ) );
+}