@elementor/editor-panels 4.3.0-1037 → 4.3.0-1038

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/index.d.mts +4 -2
  2. package/dist/index.d.ts +4 -2
  3. package/dist/index.js +61 -30
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +54 -23
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +5 -5
  8. package/src/api.ts +9 -1
  9. package/src/components/internal/panels.tsx +15 -5
  10. package/src/components/internal/portal.tsx +25 -4
  11. package/src/location.ts +36 -1
package/dist/index.d.mts CHANGED
@@ -9,11 +9,13 @@ type PanelDeclaration<TOnOpenReturn = unknown> = {
9
9
  id: string;
10
10
  component: ComponentType;
11
11
  isOpenPreviousElement?: boolean;
12
+ keepMounted?: boolean;
12
13
  } & UseActionsOptions<TOnOpenReturn> & UseRouteStatusOptions;
13
- declare function createPanel<TOnOpenReturn>({ id, component, onOpen, onClose, allowedEditModes, blockOnKitRoutes, isOpenPreviousElement, }: PanelDeclaration<TOnOpenReturn>): {
14
+ declare function createPanel<TOnOpenReturn>({ id, component, onOpen, onClose, allowedEditModes, blockOnKitRoutes, isOpenPreviousElement, keepMounted, }: PanelDeclaration<TOnOpenReturn>): {
14
15
  panel: {
15
16
  id: string;
16
17
  component: ComponentType;
18
+ keepMounted: boolean;
17
19
  };
18
20
  usePanelStatus: UseStatus;
19
21
  usePanelActions: () => {
@@ -21,7 +23,7 @@ declare function createPanel<TOnOpenReturn>({ id, component, onOpen, onClose, al
21
23
  close: () => Promise<void>;
22
24
  };
23
25
  };
24
- declare function registerPanel({ id, component }: Pick<PanelDeclaration, 'id' | 'component'>): void;
26
+ declare function registerPanel({ id, component, keepMounted, }: Pick<PanelDeclaration, 'id' | 'component' | 'keepMounted'>): void;
25
27
  type UseStatus = () => {
26
28
  isOpen: boolean;
27
29
  isBlocked: boolean;
package/dist/index.d.ts CHANGED
@@ -9,11 +9,13 @@ type PanelDeclaration<TOnOpenReturn = unknown> = {
9
9
  id: string;
10
10
  component: ComponentType;
11
11
  isOpenPreviousElement?: boolean;
12
+ keepMounted?: boolean;
12
13
  } & UseActionsOptions<TOnOpenReturn> & UseRouteStatusOptions;
13
- declare function createPanel<TOnOpenReturn>({ id, component, onOpen, onClose, allowedEditModes, blockOnKitRoutes, isOpenPreviousElement, }: PanelDeclaration<TOnOpenReturn>): {
14
+ declare function createPanel<TOnOpenReturn>({ id, component, onOpen, onClose, allowedEditModes, blockOnKitRoutes, isOpenPreviousElement, keepMounted, }: PanelDeclaration<TOnOpenReturn>): {
14
15
  panel: {
15
16
  id: string;
16
17
  component: ComponentType;
18
+ keepMounted: boolean;
17
19
  };
18
20
  usePanelStatus: UseStatus;
19
21
  usePanelActions: () => {
@@ -21,7 +23,7 @@ declare function createPanel<TOnOpenReturn>({ id, component, onOpen, onClose, al
21
23
  close: () => Promise<void>;
22
24
  };
23
25
  };
24
- declare function registerPanel({ id, component }: Pick<PanelDeclaration, 'id' | 'component'>): void;
26
+ declare function registerPanel({ id, component, keepMounted, }: Pick<PanelDeclaration, 'id' | 'component' | 'keepMounted'>): void;
25
27
  type UseStatus = () => {
26
28
  isOpen: boolean;
27
29
  isBlocked: boolean;
package/dist/index.js CHANGED
@@ -49,14 +49,27 @@ var import_store6 = require("@elementor/store");
49
49
 
50
50
  // src/components/internal/panels.tsx
51
51
  var React2 = __toESM(require("react"));
52
-
53
- // src/hooks/use-open-panel-injection.ts
54
- var import_react = require("react");
55
- var import_store2 = require("@elementor/store");
52
+ var import_store4 = require("@elementor/store");
56
53
 
57
54
  // src/location.ts
58
55
  var import_locations = require("@elementor/locations");
59
- var { inject: injectIntoPanels, useInjections: usePanelsInjections } = (0, import_locations.createLocation)();
56
+ var panelsMeta = /* @__PURE__ */ new Map();
57
+ var { inject: baseInject, useInjections: baseUseInjections } = (0, import_locations.createLocation)();
58
+ function injectIntoPanels({
59
+ id,
60
+ component,
61
+ keepMounted
62
+ }) {
63
+ panelsMeta.set(id, { keepMounted });
64
+ baseInject({ id, component });
65
+ }
66
+ function usePanelsInjections() {
67
+ const injections = baseUseInjections();
68
+ return injections.map((injection) => ({
69
+ ...injection,
70
+ keepMounted: panelsMeta.get(injection.id)?.keepMounted ?? false
71
+ }));
72
+ }
60
73
 
61
74
  // src/store/selectors.ts
62
75
  var selectOpenId = (state) => state.panels.openId;
@@ -81,21 +94,14 @@ var slice_default = (0, import_store.__createSlice)({
81
94
  }
82
95
  });
83
96
 
84
- // src/hooks/use-open-panel-injection.ts
85
- function useOpenPanelInjection() {
86
- const injections = usePanelsInjections();
87
- const openId = (0, import_store2.__useSelector)(selectOpenId);
88
- return (0, import_react.useMemo)(() => injections.find((injection) => openId === injection.id), [injections, openId]);
89
- }
90
-
91
97
  // src/components/internal/portal.tsx
92
98
  var React = __toESM(require("react"));
93
- var import_react2 = require("react");
99
+ var import_react = require("react");
94
100
  var import_ui = require("@elementor/ui");
95
101
 
96
102
  // src/sync.ts
97
103
  var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
98
- var import_store4 = require("@elementor/store");
104
+ var import_store2 = require("@elementor/store");
99
105
  var V2_PANEL = "panel/v2";
100
106
  function getPortalContainer() {
101
107
  return document.querySelector("#elementor-panel-inner");
@@ -108,7 +114,7 @@ function sync() {
108
114
  el.setAttribute("inert", "true");
109
115
  });
110
116
  });
111
- (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()));
117
+ (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()));
112
118
  (0, import_editor_v1_adapters.__privateListenTo)((0, import_editor_v1_adapters.routeCloseEvent)(V2_PANEL), () => {
113
119
  getV1PanelElements().forEach((el) => {
114
120
  el.removeAttribute("hidden");
@@ -152,8 +158,8 @@ function subscribe({
152
158
  callback
153
159
  }) {
154
160
  let prev;
155
- (0, import_store4.__subscribe)(() => {
156
- const current = on((0, import_store4.__getState)());
161
+ (0, import_store2.__subscribe)(() => {
162
+ const current = on((0, import_store2.__getState)());
157
163
  if (when({ prev, current })) {
158
164
  callback({ prev, current });
159
165
  }
@@ -163,21 +169,39 @@ function subscribe({
163
169
 
164
170
  // src/components/internal/portal.tsx
165
171
  function Portal(props) {
166
- const containerRef = (0, import_react2.useRef)(getPortalContainer);
167
- if (!containerRef.current) {
172
+ const [container, setContainer] = (0, import_react.useState)(() => getPortalContainer());
173
+ (0, import_react.useEffect)(() => {
174
+ if (container) {
175
+ return;
176
+ }
177
+ const resolveContainer = () => {
178
+ const portalContainer = getPortalContainer();
179
+ if (portalContainer) {
180
+ setContainer(portalContainer);
181
+ }
182
+ };
183
+ window.addEventListener("elementor/panel/init", resolveContainer);
184
+ resolveContainer();
185
+ return () => {
186
+ window.removeEventListener("elementor/panel/init", resolveContainer);
187
+ };
188
+ }, [container]);
189
+ if (!container) {
168
190
  return null;
169
191
  }
170
- return /* @__PURE__ */ React.createElement(import_ui.Portal, { container: containerRef.current, ...props });
192
+ return /* @__PURE__ */ React.createElement(import_ui.Portal, { container, ...props });
171
193
  }
172
194
 
173
195
  // src/components/internal/panels.tsx
174
196
  function Panels() {
175
- const openPanel = useOpenPanelInjection();
176
- const Component = openPanel?.component ?? null;
177
- if (!Component) {
197
+ const injections = usePanelsInjections();
198
+ const openId = (0, import_store4.__useSelector)(selectOpenId);
199
+ const persistentInjections = injections.filter((injection) => injection.keepMounted);
200
+ const openInjection = injections.find((injection) => openId === injection.id);
201
+ if (!persistentInjections.length && !openInjection) {
178
202
  return null;
179
203
  }
180
- return /* @__PURE__ */ React2.createElement(Portal, null, /* @__PURE__ */ React2.createElement(Component, null));
204
+ 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));
181
205
  }
182
206
 
183
207
  // src/init.ts
@@ -197,7 +221,8 @@ function createPanel({
197
221
  onClose,
198
222
  allowedEditModes,
199
223
  blockOnKitRoutes,
200
- isOpenPreviousElement = false
224
+ isOpenPreviousElement = false,
225
+ keepMounted = false
201
226
  }) {
202
227
  const usePanelStatus = createUseStatus(id, {
203
228
  allowedEditModes,
@@ -215,16 +240,22 @@ function createPanel({
215
240
  return {
216
241
  panel: {
217
242
  id,
218
- component
243
+ component,
244
+ keepMounted
219
245
  },
220
246
  usePanelStatus,
221
247
  usePanelActions
222
248
  };
223
249
  }
224
- function registerPanel({ id, component }) {
250
+ function registerPanel({
251
+ id,
252
+ component,
253
+ keepMounted
254
+ }) {
225
255
  injectIntoPanels({
226
256
  id,
227
- component
257
+ component,
258
+ keepMounted
228
259
  });
229
260
  }
230
261
  function createUseStatus(id, options = {}) {
@@ -314,7 +345,7 @@ function PanelHeader({ children, ...props }) {
314
345
 
315
346
  // src/components/external/panel-header-title.tsx
316
347
  var React5 = __toESM(require("react"));
317
- var import_react3 = require("react");
348
+ var import_react2 = require("react");
318
349
  var import_ui4 = require("@elementor/ui");
319
350
  var Typography = (0, import_ui4.styled)(import_ui4.Typography)(({ theme, variant = "body1" }) => {
320
351
  if (variant === "inherit") {
@@ -326,7 +357,7 @@ var Typography = (0, import_ui4.styled)(import_ui4.Typography)(({ theme, variant
326
357
  }
327
358
  };
328
359
  });
329
- var PanelHeaderTitle = (0, import_react3.forwardRef)(({ children, ...props }, ref) => {
360
+ var PanelHeaderTitle = (0, import_react2.forwardRef)(({ children, ...props }, ref) => {
330
361
  return /* @__PURE__ */ React5.createElement(Typography, { ref, component: "h2", variant: "subtitle1", ...props }, children);
331
362
  });
332
363
  var panel_header_title_default = PanelHeaderTitle;
package/dist/index.js.map CHANGED
@@ -1 +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, 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';\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"]}
1
+ {"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 { 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 } = createLocation();\n\nexport function injectIntoPanels( {\n\tid,\n\tcomponent,\n\tkeepMounted,\n}: {\n\tid: string;\n\tcomponent: ComponentType;\n\tkeepMounted?: boolean;\n} ) {\n\tpanelsMeta.set( id, { keepMounted } );\n\tbaseInject( { id, component } );\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,oBAA8B;AAC9B,IAAAA,gBAAgC;;;ACDhC,IAAAC,SAAuB;AACvB,IAAAC,gBAA6C;;;ACA7C,uBAA+B;AAY/B,IAAM,aAAa,oBAAI,IAAmC;AAE1D,IAAM,EAAE,QAAQ,YAAY,eAAe,kBAAkB,QAAI,iCAAe;AAEzE,SAAS,iBAAkB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AACD,GAII;AACH,aAAW,IAAK,IAAI,EAAE,YAAY,CAAE;AACpC,aAAY,EAAE,IAAI,UAAU,CAAE;AAC/B;AAEO,SAAS,sBAAyC;AACxD,QAAM,aAAa,kBAAkB;AAErC,SAAO,WAAW,IAAK,CAAE,eAAiB;AAAA,IACzC,GAAG;AAAA,IACH,aAAa,WAAW,IAAK,UAAU,EAAG,GAAG,eAAe;AAAA,EAC7D,EAAI;AACL;;;AC/BO,IAAM,eAAe,CAAE,UAAkB,MAAM,OAAO;;;ACN7D,mBAAkD;AAElD,IAAM,eAEF;AAAA,EACH,QAAQ;AACT;AAEA,IAAO,oBAAQ,4BAAe;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;;;ACrBF,YAAuB;AACvB,mBAAoC;AACpC,gBAAuD;;;ACFvD,gCAQO;AACP,IAAAC,gBAAyE;AAIlE,IAAM,WAAW;AAEjB,SAAS,qBAAqB;AACpC,SAAO,SAAS,cAAe,wBAAyB;AACzD;AAEO,SAAS,OAAO;AAEtB,gCAAAC,uBAAU,uCAAa,sBAAuB,GAAG,UAAM,0BAAAC,wBAAe,QAAS,CAAE;AAGjF,gCAAAD,uBAAU,0CAAgB,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,gCAAAA,uBAAU,2CAAiB,QAAS,GAAG,MAAM,iBAAc,0BAAW,CAAE,SAAK,0BAAY,cAAM,QAAQ,MAAM,CAAE,CAAE;AAGjH,gCAAAA,uBAAU,2CAAiB,QAAS,GAAG,MAAM;AAC5C,uBAAmB,EAAE,QAAS,CAAE,OAAQ;AACvC,SAAG,gBAAiB,QAAS;AAC7B,SAAG,gBAAiB,OAAQ;AAAA,IAC7B,CAAE;AAAA,EACH,CAAE;AAGF,gCAAAA;AAAA,QAAU,uCAAa,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,UAAM,0BAAAE,oBAAW,QAAS;AAAA,IACrC,CAAE;AAAA,EACH;AAGA,gCAAAF;AAAA,QAAU,uCAAa,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,UAAM,0BAAAG,wBAAe,QAAS,SAAK,0BAAAD,oBAAW,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,oBAAAE,aAAmB,MAAM;AACxB,UAAM,UAAU,OAAI,0BAAW,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,CAAE,WAAW,YAAa,QAAI,uBAAU,MAAM,mBAAmB,CAAE;AAEzE,8BAAW,MAAM;AAChB,QAAK,WAAY;AAChB;AAAA,IACD;AAEA,UAAM,mBAAmB,MAAM;AAC9B,YAAM,kBAAkB,mBAAmB;AAE3C,UAAK,iBAAkB;AACtB,qBAAc,eAAgB;AAAA,MAC/B;AAAA,IACD;AAEA,WAAO,iBAAkB,wBAAwB,gBAAiB;AAClE,qBAAiB;AAEjB,WAAO,MAAM;AACZ,aAAO,oBAAqB,wBAAwB,gBAAiB;AAAA,IACtE;AAAA,EACD,GAAG,CAAE,SAAU,CAAE;AAEjB,MAAK,CAAE,WAAY;AAClB,WAAO;AAAA,EACR;AAEA,SAAO,oCAAC,UAAAC,QAAA,EAAW,WAA0B,GAAG,OAAQ;AACzD;;;AJ9Be,SAAR,SAA0B;AAChC,QAAM,aAAa,oBAAoB;AACvC,QAAM,aAAS,cAAAC,eAAa,YAAa;AAEzC,QAAM,uBAAuB,WAAW,OAAQ,CAAE,cAAe,UAAU,WAAY;AACvF,QAAM,gBAAgB,WAAW,KAAM,CAAE,cAAe,WAAW,UAAU,EAAG;AAEhF,MAAK,CAAE,qBAAqB,UAAU,CAAE,eAAgB;AACvD,WAAO;AAAA,EACR;AAEA,SACC,qCAAC,cACE,qBAAqB,IAAK,CAAE,EAAE,IAAI,WAAW,UAAU,MACxD,qCAAC,SAAI,KAAM,IAAK,OAAQ,EAAE,SAAS,WAAW,KAAK,aAAa,OAAO,KACtE,qCAAC,eAAU,CACZ,CACC,GACA,iBAAiB,CAAE,cAAc,eAAe,qCAAC,cAAc,WAAd,IAAwB,CAC5E;AAEF;;;ADrBO,SAAS,OAAO;AACtB,OAAK;AAEL,qCAAiB,aAAM;AAEvB,mCAAe,EAAE,IAAI,UAAU,WAAW,OAAO,CAAE;AACpD;;;AOZA,IAAAC,6BAIO;AACP,IAAAC,gBAA2E;AAcpE,SAAS,YAA8B;AAAA,EAC7C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,wBAAwB;AAAA,EACxB,cAAc;AACf,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,MACA;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;AAEO,SAAS,cAAe;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AACD,GAAkE;AACjE,mBAAkB;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AACH;AAOA,SAAS,gBAAiB,IAA8B,UAAiC,CAAC,GAAe;AACxG,SAAO,MAAM;AACZ,UAAM,kBAAc,cAAAC,eAAa,YAAa;AAC9C,UAAM,oBAAgB,2BAAAC,yBAAgB,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,eAAW,cAAAC,eAAY;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,2CAAAC,qBAAY,4BAA4B,EAAE,UAAU,CAAE;AAAA,UACvD,QAAQ;AAAA,UAAC;AACT,oCAA0B;AAAA,QAC3B;AAAA,MACD;AAAA,IACD;AAAA,EACD;AACD;;;ACxIA,IAAAC,SAAuB;AACvB,IAAAC,aAAyC;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,IAAAC,SAAuB;AACvB,IAAAC,aAA2C;AAE3C,IAAM,aAAS,mBAAQ,cAAI,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,IAAAC,SAAuB;AACvB,IAAAC,gBAA2B;AAC3B,IAAAC,aAA6E;AAG7E,IAAM,iBAAa,mBAAQ,WAAAC,UAAiB,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,uBAAmB,0BAAmD,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,IAAAC,SAAuB;AACvB,IAAAC,aAAmC;AAEpB,SAAR,UAA4B,EAAE,UAAU,IAAI,GAAG,MAAM,GAAc;AACzE,SACC;AAAA,IAAC;AAAA;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,IAAAC,SAAuB;AACvB,IAAAC,aAA4C;AAE7B,SAAR,YAA8B,EAAE,UAAU,IAAI,GAAG,MAAM,GAAc;AAC3E,SACC,4DACC,qCAAC,wBAAQ,GACT;AAAA,IAAC;AAAA;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":["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 CHANGED
@@ -4,14 +4,27 @@ import { __registerSlice } from "@elementor/store";
4
4
 
5
5
  // src/components/internal/panels.tsx
6
6
  import * as React2 from "react";
7
-
8
- // src/hooks/use-open-panel-injection.ts
9
- import { useMemo } from "react";
10
7
  import { __useSelector as useSelector } from "@elementor/store";
11
8
 
12
9
  // src/location.ts
13
10
  import { createLocation } from "@elementor/locations";
14
- var { inject: injectIntoPanels, useInjections: usePanelsInjections } = createLocation();
11
+ var panelsMeta = /* @__PURE__ */ new Map();
12
+ var { inject: baseInject, useInjections: baseUseInjections } = createLocation();
13
+ function injectIntoPanels({
14
+ id,
15
+ component,
16
+ keepMounted
17
+ }) {
18
+ panelsMeta.set(id, { keepMounted });
19
+ baseInject({ id, component });
20
+ }
21
+ function usePanelsInjections() {
22
+ const injections = baseUseInjections();
23
+ return injections.map((injection) => ({
24
+ ...injection,
25
+ keepMounted: panelsMeta.get(injection.id)?.keepMounted ?? false
26
+ }));
27
+ }
15
28
 
16
29
  // src/store/selectors.ts
17
30
  var selectOpenId = (state) => state.panels.openId;
@@ -36,16 +49,9 @@ var slice_default = __createSlice({
36
49
  }
37
50
  });
38
51
 
39
- // src/hooks/use-open-panel-injection.ts
40
- function useOpenPanelInjection() {
41
- const injections = usePanelsInjections();
42
- const openId = useSelector(selectOpenId);
43
- return useMemo(() => injections.find((injection) => openId === injection.id), [injections, openId]);
44
- }
45
-
46
52
  // src/components/internal/portal.tsx
47
53
  import * as React from "react";
48
- import { useRef } from "react";
54
+ import { useEffect, useState } from "react";
49
55
  import { Portal as BasePortal } from "@elementor/ui";
50
56
 
51
57
  // src/sync.ts
@@ -126,21 +132,39 @@ function subscribe({
126
132
 
127
133
  // src/components/internal/portal.tsx
128
134
  function Portal(props) {
129
- const containerRef = useRef(getPortalContainer);
130
- if (!containerRef.current) {
135
+ const [container, setContainer] = useState(() => getPortalContainer());
136
+ useEffect(() => {
137
+ if (container) {
138
+ return;
139
+ }
140
+ const resolveContainer = () => {
141
+ const portalContainer = getPortalContainer();
142
+ if (portalContainer) {
143
+ setContainer(portalContainer);
144
+ }
145
+ };
146
+ window.addEventListener("elementor/panel/init", resolveContainer);
147
+ resolveContainer();
148
+ return () => {
149
+ window.removeEventListener("elementor/panel/init", resolveContainer);
150
+ };
151
+ }, [container]);
152
+ if (!container) {
131
153
  return null;
132
154
  }
133
- return /* @__PURE__ */ React.createElement(BasePortal, { container: containerRef.current, ...props });
155
+ return /* @__PURE__ */ React.createElement(BasePortal, { container, ...props });
134
156
  }
135
157
 
136
158
  // src/components/internal/panels.tsx
137
159
  function Panels() {
138
- const openPanel = useOpenPanelInjection();
139
- const Component = openPanel?.component ?? null;
140
- if (!Component) {
160
+ const injections = usePanelsInjections();
161
+ const openId = useSelector(selectOpenId);
162
+ const persistentInjections = injections.filter((injection) => injection.keepMounted);
163
+ const openInjection = injections.find((injection) => openId === injection.id);
164
+ if (!persistentInjections.length && !openInjection) {
141
165
  return null;
142
166
  }
143
- return /* @__PURE__ */ React2.createElement(Portal, null, /* @__PURE__ */ React2.createElement(Component, null));
167
+ 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));
144
168
  }
145
169
 
146
170
  // src/init.ts
@@ -163,7 +187,8 @@ function createPanel({
163
187
  onClose,
164
188
  allowedEditModes,
165
189
  blockOnKitRoutes,
166
- isOpenPreviousElement = false
190
+ isOpenPreviousElement = false,
191
+ keepMounted = false
167
192
  }) {
168
193
  const usePanelStatus = createUseStatus(id, {
169
194
  allowedEditModes,
@@ -181,16 +206,22 @@ function createPanel({
181
206
  return {
182
207
  panel: {
183
208
  id,
184
- component
209
+ component,
210
+ keepMounted
185
211
  },
186
212
  usePanelStatus,
187
213
  usePanelActions
188
214
  };
189
215
  }
190
- function registerPanel({ id, component }) {
216
+ function registerPanel({
217
+ id,
218
+ component,
219
+ keepMounted
220
+ }) {
191
221
  injectIntoPanels({
192
222
  id,
193
- component
223
+ component,
224
+ keepMounted
194
225
  });
195
226
  }
196
227
  function createUseStatus(id, options = {}) {
package/dist/index.mjs.map CHANGED
@@ -1 +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"]}
1
+ {"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 { 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 } = createLocation();\n\nexport function injectIntoPanels( {\n\tid,\n\tcomponent,\n\tkeepMounted,\n}: {\n\tid: string;\n\tcomponent: ComponentType;\n\tkeepMounted?: boolean;\n} ) {\n\tpanelsMeta.set( id, { keepMounted } );\n\tbaseInject( { id, component } );\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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elementor/editor-panels",
3
- "version": "4.3.0-1037",
3
+ "version": "4.3.0-1038",
4
4
  "private": false,
5
5
  "author": "Elementor Team",
6
6
  "homepage": "https://elementor.com/",
@@ -39,10 +39,10 @@
39
39
  "dev": "tsup --config=../../tsup.dev.ts"
40
40
  },
41
41
  "dependencies": {
42
- "@elementor/editor": "4.3.0-1037",
43
- "@elementor/editor-v1-adapters": "4.3.0-1037",
44
- "@elementor/locations": "4.3.0-1037",
45
- "@elementor/store": "4.3.0-1037",
42
+ "@elementor/editor": "4.3.0-1038",
43
+ "@elementor/editor-v1-adapters": "4.3.0-1038",
44
+ "@elementor/locations": "4.3.0-1038",
45
+ "@elementor/store": "4.3.0-1038",
46
46
  "@elementor/ui": "1.37.5"
47
47
  },
48
48
  "peerDependencies": {
package/src/api.ts CHANGED
@@ -14,6 +14,7 @@ export type PanelDeclaration< TOnOpenReturn = unknown > = {
14
14
  id: string;
15
15
  component: ComponentType;
16
16
  isOpenPreviousElement?: boolean;
17
+ keepMounted?: boolean;
17
18
  } & UseActionsOptions< TOnOpenReturn > &
18
19
  UseRouteStatusOptions;
19
20
 
@@ -25,6 +26,7 @@ export function createPanel< TOnOpenReturn >( {
25
26
  allowedEditModes,
26
27
  blockOnKitRoutes,
27
28
  isOpenPreviousElement = false,
29
+ keepMounted = false,
28
30
  }: PanelDeclaration< TOnOpenReturn > ) {
29
31
  const usePanelStatus = createUseStatus( id, {
30
32
  allowedEditModes,
@@ -45,16 +47,22 @@ export function createPanel< TOnOpenReturn >( {
45
47
  panel: {
46
48
  id,
47
49
  component,
50
+ keepMounted,
48
51
  },
49
52
  usePanelStatus,
50
53
  usePanelActions,
51
54
  };
52
55
  }
53
56
 
54
- export function registerPanel( { id, component }: Pick< PanelDeclaration, 'id' | 'component' > ) {
57
+ export function registerPanel( {
58
+ id,
59
+ component,
60
+ keepMounted,
61
+ }: Pick< PanelDeclaration, 'id' | 'component' | 'keepMounted' > ) {
55
62
  injectIntoPanels( {
56
63
  id,
57
64
  component,
65
+ keepMounted,
58
66
  } );
59
67
  }
60
68
 
package/src/components/internal/panels.tsx CHANGED
@@ -1,19 +1,29 @@
1
1
  import * as React from 'react';
2
+ import { __useSelector as useSelector } from '@elementor/store';
2
3
 
3
- import useOpenPanelInjection from '../../hooks/use-open-panel-injection';
4
+ import { usePanelsInjections } from '../../location';
5
+ import { selectOpenId } from '../../store';
4
6
  import Portal from './portal';
5
7
 
6
8
  export default function Panels() {
7
- const openPanel = useOpenPanelInjection();
8
- const Component = openPanel?.component ?? null;
9
+ const injections = usePanelsInjections();
10
+ const openId = useSelector( selectOpenId );
9
11
 
10
- if ( ! Component ) {
12
+ const persistentInjections = injections.filter( ( injection ) => injection.keepMounted );
13
+ const openInjection = injections.find( ( injection ) => openId === injection.id );
14
+
15
+ if ( ! persistentInjections.length && ! openInjection ) {
11
16
  return null;
12
17
  }
13
18
 
14
19
  return (
15
20
  <Portal>
16
- <Component />
21
+ { persistentInjections.map( ( { id, component: Component } ) => (
22
+ <div key={ id } style={ { display: openId === id ? 'contents' : 'none' } }>
23
+ <Component />
24
+ </div>
25
+ ) ) }
26
+ { openInjection && ! openInjection.keepMounted && <openInjection.component /> }
17
27
  </Portal>
18
28
  );
19
29
  }
package/src/components/internal/portal.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { useRef } from 'react';
2
+ import { useEffect, useState } from 'react';
3
3
  import { Portal as BasePortal, type PortalProps } from '@elementor/ui';
4
4
 
5
5
  import { getPortalContainer } from '../../sync';
@@ -7,11 +7,32 @@ import { getPortalContainer } from '../../sync';
7
7
  type Props = Omit< PortalProps, 'container' >;
8
8
 
9
9
  export default function Portal( props: Props ) {
10
- const containerRef = useRef( getPortalContainer );
10
+ const [ container, setContainer ] = useState( () => getPortalContainer() );
11
11
 
12
- if ( ! containerRef.current ) {
12
+ useEffect( () => {
13
+ if ( container ) {
14
+ return;
15
+ }
16
+
17
+ const resolveContainer = () => {
18
+ const portalContainer = getPortalContainer();
19
+
20
+ if ( portalContainer ) {
21
+ setContainer( portalContainer );
22
+ }
23
+ };
24
+
25
+ window.addEventListener( 'elementor/panel/init', resolveContainer );
26
+ resolveContainer();
27
+
28
+ return () => {
29
+ window.removeEventListener( 'elementor/panel/init', resolveContainer );
30
+ };
31
+ }, [ container ] );
32
+
33
+ if ( ! container ) {
13
34
  return null;
14
35
  }
15
36
 
16
- return <BasePortal container={ containerRef.current } { ...props } />;
37
+ return <BasePortal container={ container } { ...props } />;
17
38
  }
package/src/location.ts CHANGED
@@ -1,3 +1,38 @@
1
+ import { type ComponentType } from 'react';
1
2
  import { createLocation } from '@elementor/locations';
2
3
 
3
- export const { inject: injectIntoPanels, useInjections: usePanelsInjections } = createLocation();
4
+ type PanelsInjectionMeta = {
5
+ keepMounted?: boolean;
6
+ };
7
+
8
+ export type PanelsInjection = {
9
+ id: string;
10
+ component: ComponentType;
11
+ keepMounted?: boolean;
12
+ };
13
+
14
+ const panelsMeta = new Map< string, PanelsInjectionMeta >();
15
+
16
+ const { inject: baseInject, useInjections: baseUseInjections } = createLocation();
17
+
18
+ export function injectIntoPanels( {
19
+ id,
20
+ component,
21
+ keepMounted,
22
+ }: {
23
+ id: string;
24
+ component: ComponentType;
25
+ keepMounted?: boolean;
26
+ } ) {
27
+ panelsMeta.set( id, { keepMounted } );
28
+ baseInject( { id, component } );
29
+ }
30
+
31
+ export function usePanelsInjections(): PanelsInjection[] {
32
+ const injections = baseUseInjections();
33
+
34
+ return injections.map( ( injection ) => ( {
35
+ ...injection,
36
+ keepMounted: panelsMeta.get( injection.id )?.keepMounted ?? false,
37
+ } ) );
38
+ }