@elementor/editor-panels 0.1.0

package/README.md

@@ -0,0 +1,76 @@
+# Editor Panels
+
+> **Warning**
+> 
+> This package is under development and not ready for production use.
+
+## Usage
+
+Creating panel contains 3 steps:
+
+1. Creating the panel component
+```tsx
+// components/my-panel.tsx
+import { Panel, PanelHeader, PanelHeaderTitle, PanelBody } from '@elementor/editor-panels';
+
+export default function MyPanel() {
+    return (
+        <Panel>
+            <PanelHeader>
+                <PanelHeaderTitle>{/* Panel title */}</PanelHeaderTitle>
+            </PanelHeader>
+            <PanelBody>
+                {/* Here should be all the content of the panel */}
+            </PanelBody>
+        </Panel>
+    );
+}
+```
+
+2. Creating an instance of the panel
+```ts
+// panel.ts
+import { createPanel } from '@elementor/editor-panels';
+import MyPanel from './components/my-panel';
+
+export const {
+    panel,
+    usePanelStatus,
+    usePanelActions,
+} = createPanel( {
+    id: 'my-panel',
+    component: MyPanel
+} );
+```
+
+3. Registering the panel
+```ts
+// init.ts
+import { registerPanel } from '@elementor/editor-panels';
+import panel from './panel';
+
+function init() {
+    registerPanel( panel );
+}
+```
+
+### Using panel actions and state
+
+To change the state of a panel (open/close) or read the state of a panel, you can use 2 hooks that are being returned from the `createPanel` function.
+Let's assume that we have a button that should open the panel when clicked, and close it when clicked again.
+
+```tsx
+// components/my-panel-button.tsx
+import { usePanelStatus, usePanelActions } from '../panel';
+
+export default function MyPanelButton() {
+    const { isOpen, isBlocked } = usePanelStatus();
+    const { openPanel, closePanel } = usePanelActions();
+
+    return (
+        <button onClick={ isOpen ? closePanel : openPanel } disabled={ isBlocked }>
+            { isOpen ? 'Close panel' : 'Open panel' }
+        </button>
+    );
+}
+```

package/dist/index.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { ComponentType } from 'react';
+import { DrawerProps, BoxProps, TypographyProps } from '@elementor/ui';
+
+type PanelDeclaration = {
+    id: string;
+    component: ComponentType;
+};
+declare function createPanel({ id, component }: PanelDeclaration): {
+    panel: {
+        id: string;
+        component: ComponentType;
+    };
+    usePanelStatus: () => {
+        isOpen: boolean;
+        isBlocked: boolean;
+    };
+    usePanelActions: () => {
+        open: () => Promise<void>;
+        close: () => Promise<void>;
+    };
+};
+declare function registerPanel({ id, component }: Pick<PanelDeclaration, 'id' | 'component'>): void;
+
+declare function Panel({ children, sx, ...props }: DrawerProps): React.JSX.Element;
+
+declare function PanelHeader({ children, ...props }: BoxProps): React.JSX.Element;
+
+declare function PanelHeaderTitle({ children, ...props }: TypographyProps): React.JSX.Element;
+
+declare function PanelBody({ children, sx, ...props }: BoxProps): React.JSX.Element;
+
+export { Panel, PanelBody, PanelHeader, PanelHeaderTitle, createPanel, registerPanel };

package/dist/index.js

@@ -0,0 +1,351 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Panel: () => Panel,
+  PanelBody: () => PanelBody,
+  PanelHeader: () => PanelHeader,
+  PanelHeaderTitle: () => PanelHeaderTitle,
+  createPanel: () => createPanel,
+  registerPanel: () => registerPanel
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/init.ts
+var import_editor = require("@elementor/editor");
+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_store2 = require("@elementor/store");
+
+// src/location.ts
+var import_locations = require("@elementor/locations");
+var {
+  inject: injectIntoPanels,
+  useInjections: usePanelsInjections
+} = (0, import_locations.createLocation)();
+
+// src/store/selectors.ts
+var selectOpenId = (state) => state.panels.openId;
+
+// src/store/slice.ts
+var import_store = require("@elementor/store");
+var initialState = {
+  openId: null
+};
+var slice_default = (0, import_store.createSlice)({
+  name: "panels",
+  initialState,
+  reducers: {
+    open(state, action) {
+      state.openId = action.payload;
+    },
+    close(state, action) {
+      if (!action.payload || state.openId === action.payload) {
+        state.openId = null;
+      }
+    }
+  }
+});
+
+// src/hooks/use-open-panel-injection.ts
+var import_react = require("react");
+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_ui = require("@elementor/ui");
+var import_react2 = require("react");
+
+// src/sync.ts
+var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+var import_store4 = require("@elementor/store");
+var V2_PANEL = "panel/v2";
+function getPortalContainer() {
+  return document.querySelector("#elementor-panel-inner");
+}
+function useV1PanelStatus() {
+  return (0, import_editor_v1_adapters.useRouteStatus)(V2_PANEL, {
+    blockOnKitRoutes: true,
+    blockOnPreviewMode: true
+  });
+}
+function sync() {
+  (0, import_editor_v1_adapters.listenTo)(
+    (0, import_editor_v1_adapters.windowEvent)("elementor/panel/init"),
+    () => (0, import_editor_v1_adapters.registerRoute)(V2_PANEL)
+  );
+  (0, import_editor_v1_adapters.listenTo)(
+    (0, import_editor_v1_adapters.routeOpenEvent)(V2_PANEL),
+    () => {
+      getV1PanelElements().forEach((el) => {
+        el.setAttribute("hidden", "hidden");
+        el.setAttribute("aria-hidden", "true");
+      });
+    }
+  );
+  (0, import_editor_v1_adapters.listenTo)(
+    (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.listenTo)(
+    (0, import_editor_v1_adapters.routeCloseEvent)(V2_PANEL),
+    () => {
+      getV1PanelElements().forEach((el) => {
+        el.removeAttribute("hidden");
+        el.removeAttribute("aria-hidden");
+      });
+    }
+  );
+  (0, import_editor_v1_adapters.listenTo)(
+    (0, import_editor_v1_adapters.windowEvent)("elementor/panel/init"),
+    () => subscribe({
+      on: (state) => selectOpenId(state),
+      when: ({ prev, current }) => !!(!prev && current),
+      // is panel opened
+      callback: () => (0, import_editor_v1_adapters.openRoute)(V2_PANEL)
+    })
+  );
+  (0, import_editor_v1_adapters.listenTo)(
+    (0, import_editor_v1_adapters.windowEvent)("elementor/panel/init"),
+    () => subscribe({
+      on: (state) => selectOpenId(state),
+      when: ({ prev, current }) => !!(!current && prev),
+      // is panel closed
+      callback: () => (0, import_editor_v1_adapters.isRouteActive)(V2_PANEL) && (0, import_editor_v1_adapters.openRoute)(getDefaultRoute())
+    })
+  );
+}
+function getV1PanelElements() {
+  const v1ElementsSelector = [
+    "#elementor-panel-header-wrapper",
+    "#elementor-panel-content-wrapper",
+    "#elementor-panel-state-loading",
+    "#elementor-panel-footer"
+  ].join(", ");
+  return document.querySelectorAll(v1ElementsSelector);
+}
+function getDefaultRoute() {
+  const defaultRoute = window?.elementor?.documents?.getCurrent?.()?.config?.panel?.default_route;
+  return defaultRoute || "panel/elements/categories";
+}
+function subscribe({
+  on,
+  when,
+  callback
+}) {
+  let prev;
+  (0, import_store4.subscribe)(() => {
+    const current = on((0, import_store4.getState)());
+    if (when({ prev, current })) {
+      callback({ prev, current });
+    }
+    prev = current;
+  });
+}
+
+// src/components/internal/portal.tsx
+function Portal(props) {
+  const containerRef = (0, import_react2.useRef)(getPortalContainer);
+  if (!containerRef.current) {
+    return null;
+  }
+  return /* @__PURE__ */ React.createElement(import_ui.Portal, { container: containerRef.current, ...props });
+}
+
+// src/components/internal/panels.tsx
+function Panels() {
+  const openPanel = useOpenPanelInjection();
+  const Component = openPanel?.filler ?? null;
+  if (!Component) {
+    return null;
+  }
+  return /* @__PURE__ */ React2.createElement(Portal, null, /* @__PURE__ */ React2.createElement(Component, null));
+}
+
+// src/init.ts
+function init() {
+  sync();
+  (0, import_store6.registerSlice)(slice_default);
+  (0, import_editor.injectIntoTop)({ id: "panels", filler: Panels });
+}
+
+// src/api.ts
+var import_store9 = require("@elementor/store");
+function createPanel({ id, component }) {
+  const usePanelStatus = createUseStatus(id);
+  const usePanelActions = createUseActions(id, usePanelStatus);
+  return {
+    panel: {
+      id,
+      component
+    },
+    usePanelStatus,
+    usePanelActions
+  };
+}
+function registerPanel({ id, component }) {
+  injectIntoPanels({
+    id,
+    filler: component
+  });
+}
+function createUseStatus(id) {
+  return () => {
+    const openPanelId = (0, import_store9.useSelector)(selectOpenId);
+    const v1PanelStatus = useV1PanelStatus();
+    return {
+      isOpen: openPanelId === id && v1PanelStatus.isActive,
+      isBlocked: v1PanelStatus.isBlocked
+    };
+  };
+}
+function createUseActions(id, useStatus) {
+  return () => {
+    const dispatch2 = (0, import_store9.useDispatch)();
+    const { isBlocked } = useStatus();
+    return {
+      open: async () => {
+        if (isBlocked) {
+          return;
+        }
+        dispatch2(slice_default.actions.open(id));
+      },
+      close: async () => {
+        if (isBlocked) {
+          return;
+        }
+        dispatch2(slice_default.actions.close(id));
+      }
+    };
+  };
+}
+
+// src/components/external/panel.tsx
+var React3 = __toESM(require("react"));
+var import_ui2 = require("@elementor/ui");
+function Panel({ children, sx, ...props }) {
+  return /* @__PURE__ */ React3.createElement(
+    import_ui2.Drawer,
+    {
+      open: true,
+      variant: "persistent",
+      anchor: "left",
+      PaperProps: {
+        sx: {
+          position: "relative",
+          width: "100%",
+          bgcolor: "background.default",
+          border: "none"
+        }
+      },
+      sx: { height: "100%", ...sx },
+      ...props
+    },
+    children
+  );
+}
+
+// src/components/external/panel-header.tsx
+var React4 = __toESM(require("react"));
+var import_ui3 = require("@elementor/ui");
+var Header = (0, import_ui3.styled)(import_ui3.Box)(({ theme }) => ({
+  height: theme?.sizing?.["600"] || "48px",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center"
+}));
+function PanelHeader({ children, ...props }) {
+  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(Header, { component: "header", ...props }, children), /* @__PURE__ */ React4.createElement(import_ui3.Divider, null));
+}
+
+// src/components/external/panel-header-title.tsx
+var React5 = __toESM(require("react"));
+var import_ui4 = require("@elementor/ui");
+var Title = (0, import_ui4.styled)(import_ui4.Typography)(({ theme }) => ({
+  "&.MuiTypography-root": {
+    fontWeight: "bold",
+    fontSize: theme.typography.body1.fontSize
+  }
+}));
+function PanelHeaderTitle({ children, ...props }) {
+  return /* @__PURE__ */ React5.createElement(
+    Title,
+    {
+      component: "h2",
+      variant: "body1",
+      ...props
+    },
+    children
+  );
+}
+
+// src/components/external/panel-body.tsx
+var React6 = __toESM(require("react"));
+var import_ui5 = require("@elementor/ui");
+function PanelBody({ children, sx, ...props }) {
+  return /* @__PURE__ */ React6.createElement(
+    import_ui5.Box,
+    {
+      component: "main",
+      sx: {
+        overflowY: "auto",
+        height: "100%",
+        ...sx
+      },
+      ...props
+    },
+    children
+  );
+}
+
+// src/index.ts
+init();
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Panel,
+  PanelBody,
+  PanelHeader,
+  PanelHeaderTitle,
+  createPanel,
+  registerPanel
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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"],"sourcesContent":["import init from './init';\n\nexport { createPanel, registerPanel } from './api';\nexport * from './components/external';\n\ninit();\n","import { injectIntoTop } from '@elementor/editor';\nimport { registerSlice } from '@elementor/store';\nimport Panels from './components/internal/panels';\nimport { sync } from './sync';\nimport { slice } from './store';\n\nexport default function init() {\n\tsync();\n\n\tregisterSlice( slice );\n\n\tinjectIntoTop( { id: 'panels', filler: Panels } );\n}\n","import * as React from 'react';\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?.filler ?? 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 { useSelector } from '@elementor/store';\nimport { usePanelsInjections } from '../location';\nimport { selectOpenId } from '../store';\nimport { useMemo } from 'react';\n\nexport default function useOpenPanelInjection() {\n\tconst injections = usePanelsInjections();\n\tconst openId = useSelector( selectOpenId );\n\n\treturn useMemo(\n\t\t() => injections.find( ( injection ) => openId === injection.id ),\n\t\t[ injections, openId ]\n\t);\n}\n","import { createLocation } from '@elementor/locations';\n\nexport const {\n\tinject: injectIntoPanels,\n\tuseInjections: usePanelsInjections,\n} = createLocation();\n","import { SliceState } from '@elementor/store';\nimport slice from './slice';\n\ntype State = SliceState<typeof slice>;\n\nexport const selectOpenId = ( state: State ) => state.panels.openId;\n","import { createSlice, 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 { Portal as BasePortal, PortalProps } from '@elementor/ui';\nimport { useRef } from 'react';\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 (\n\t\t<BasePortal container={ containerRef.current } { ...props } />\n\t);\n}\n","import {\n\topenRoute,\n\tlistenTo,\n\trouteCloseEvent,\n\tuseRouteStatus,\n\trouteOpenEvent,\n\twindowEvent,\n\tregisterRoute,\n\tisRouteActive,\n} from '@elementor/editor-v1-adapters';\nimport { dispatch, getState, subscribe as originalSubscribe } from '@elementor/store';\nimport { selectOpenId, slice } from './store';\n\nconst V2_PANEL = 'panel/v2';\n\nexport function getPortalContainer() {\n\treturn document.querySelector( '#elementor-panel-inner' );\n}\n\nexport function useV1PanelStatus() {\n\t// For now supporting only panels that are not part of the kit and not in preview mode.\n\treturn useRouteStatus( V2_PANEL, {\n\t\tblockOnKitRoutes: true,\n\t\tblockOnPreviewMode: true,\n\t} );\n}\n\nexport function sync() {\n\t// Register the V2 panel route on panel init.\n\tlistenTo(\n\t\twindowEvent( 'elementor/panel/init' ),\n\t\t() => registerRoute( V2_PANEL )\n\t);\n\n\t// On empty route open, hide V1 panel elements.\n\tlistenTo(\n\t\trouteOpenEvent( V2_PANEL ),\n\t\t() => {\n\t\t\tgetV1PanelElements().forEach( ( el ) => {\n\t\t\t\tel.setAttribute( 'hidden', 'hidden' );\n\t\t\t\tel.setAttribute( 'aria-hidden', 'true' );\n\t\t\t} );\n\t\t},\n\t);\n\n\t// On empty route close, close the V2 panel.\n\tlistenTo(\n\t\trouteCloseEvent( V2_PANEL ),\n\t\t() => selectOpenId( getState() ) && dispatch( slice.actions.close() )\n\t);\n\n\t// On empty route close, show V1 panel elements.\n\tlistenTo(\n\t\trouteCloseEvent( V2_PANEL ),\n\t\t() => {\n\t\t\tgetV1PanelElements().forEach( ( el ) => {\n\t\t\t\tel.removeAttribute( 'hidden' );\n\t\t\t\tel.removeAttribute( 'aria-hidden' );\n\t\t\t} );\n\t\t},\n\t);\n\n\t// On V2 panel open, open the V2 panel route.\n\tlistenTo(\n\t\twindowEvent( 'elementor/panel/init' ),\n\t\t() => subscribe( {\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(\n\t\twindowEvent( 'elementor/panel/init' ),\n\t\t() => subscribe( {\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\t'#elementor-panel-footer',\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 )\n\t\t?.elementor\n\t\t?.documents\n\t\t?.getCurrent?.()\n\t\t?.config\n\t\t?.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 { ComponentType } from 'react';\nimport { injectIntoPanels } from './location';\nimport { selectOpenId, slice } from './store';\nimport { useSelector, useDispatch } from '@elementor/store';\nimport { useV1PanelStatus } from './sync';\n\nexport type PanelDeclaration = {\n\tid: string;\n\tcomponent: ComponentType;\n}\n\nexport function createPanel( { id, component }: PanelDeclaration ) {\n\tconst usePanelStatus = createUseStatus( id );\n\tconst usePanelActions = createUseActions( id, usePanelStatus );\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\tfiller: component,\n\t} );\n}\n\nfunction createUseStatus( id: PanelDeclaration['id'] ) {\n\treturn () => {\n\t\tconst openPanelId = useSelector( selectOpenId );\n\t\tconst v1PanelStatus = useV1PanelStatus();\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\nfunction createUseActions( id: PanelDeclaration['id'], useStatus: ReturnType<typeof createUseStatus> ) {\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\n\t\t\t\tdispatch( slice.actions.open( id ) );\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\t\t\t},\n\t\t};\n\t};\n}\n","import * as React from 'react';\nimport { Drawer, 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, BoxProps, Divider, styled } from '@elementor/ui';\n\nconst Header = styled( Box )( ( { theme } ) => ( {\n\theight: theme?.sizing?.[ '600' ] || '48px',\n\tdisplay: 'flex',\n\talignItems: 'center',\n\tjustifyContent: 'center',\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\t<Divider />\n\t\t</>\n\t);\n}\n","import * as React from 'react';\nimport { Typography, TypographyProps, styled } from '@elementor/ui';\n\nconst Title = styled( Typography )( ( { theme } ) => ( {\n\t'&.MuiTypography-root': {\n\t\tfontWeight: 'bold',\n\t\tfontSize: theme.typography.body1.fontSize,\n\t},\n} ) );\n\nexport default function PanelHeaderTitle( { children, ...props }: TypographyProps ) {\n\treturn (\n\t\t<Title\n\t\t\tcomponent=\"h2\"\n\t\t\tvariant=\"body1\"\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children }\n\t\t</Title>\n\t);\n}\n","import * as React from 'react';\nimport { Box, 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>{ children }</Box>\n\t);\n}\n"],"mappings":"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","names":["import_store","React","import_store","import_react","import_store","originalSubscribe","BasePortal","import_store","dispatch","React","import_ui","React","import_ui","React","import_ui","React","import_ui"]}