@elementor/editor-panels 0.1.0

package/src/api.ts

@@ -0,0 +1,67 @@
+import { ComponentType } from 'react';
+import { injectIntoPanels } from './location';
+import { selectOpenId, slice } from './store';
+import { useSelector, useDispatch } from '@elementor/store';
+import { useV1PanelStatus } from './sync';
+
+export type PanelDeclaration = {
+	id: string;
+	component: ComponentType;
+}
+
+export function createPanel( { id, component }: PanelDeclaration ) {
+	const usePanelStatus = createUseStatus( id );
+	const usePanelActions = createUseActions( id, usePanelStatus );
+
+	return {
+		panel: {
+			id,
+			component,
+		},
+		usePanelStatus,
+		usePanelActions,
+	};
+}
+
+export function registerPanel( { id, component }: Pick<PanelDeclaration, 'id' | 'component'> ) {
+	injectIntoPanels( {
+		id,
+		filler: component,
+	} );
+}
+
+function createUseStatus( id: PanelDeclaration['id'] ) {
+	return () => {
+		const openPanelId = useSelector( selectOpenId );
+		const v1PanelStatus = useV1PanelStatus();
+
+		return {
+			isOpen: openPanelId === id && v1PanelStatus.isActive,
+			isBlocked: v1PanelStatus.isBlocked,
+		};
+	};
+}
+
+function createUseActions( id: PanelDeclaration['id'], useStatus: ReturnType<typeof createUseStatus> ) {
+	return () => {
+		const dispatch = useDispatch();
+		const { isBlocked } = useStatus();
+
+		return {
+			open: async () => {
+				if ( isBlocked ) {
+					return;
+				}
+
+				dispatch( slice.actions.open( id ) );
+			},
+			close: async () => {
+				if ( isBlocked ) {
+					return;
+				}
+
+				dispatch( slice.actions.close( id ) );
+			},
+		};
+	};
+}

package/src/components/external/index.ts

@@ -0,0 +1,4 @@
+export { default as Panel } from './panel';
+export { default as PanelHeader } from './panel-header';
+export { default as PanelHeaderTitle } from './panel-header-title';
+export { default as PanelBody } from './panel-body';

package/src/components/external/panel-body.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Box, BoxProps } from '@elementor/ui';
+
+export default function PanelBody( { children, sx, ...props }: BoxProps ) {
+	return (
+		<Box
+			component="main"
+			sx={ {
+				overflowY: 'auto',
+				height: '100%',
+				...sx,
+			} }
+			{ ...props }
+		>{ children }</Box>
+	);
+}

package/src/components/external/panel-header-title.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Typography, TypographyProps, styled } from '@elementor/ui';
+
+const Title = styled( Typography )( ( { theme } ) => ( {
+	'&.MuiTypography-root': {
+		fontWeight: 'bold',
+		fontSize: theme.typography.body1.fontSize,
+	},
+} ) );
+
+export default function PanelHeaderTitle( { children, ...props }: TypographyProps ) {
+	return (
+		<Title
+			component="h2"
+			variant="body1"
+			{ ...props }
+		>
+			{ children }
+		</Title>
+	);
+}

package/src/components/external/panel-header.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { Box, BoxProps, Divider, styled } from '@elementor/ui';
+
+const Header = styled( Box )( ( { theme } ) => ( {
+	height: theme?.sizing?.[ '600' ] || '48px',
+	display: 'flex',
+	alignItems: 'center',
+	justifyContent: 'center',
+} ) );
+
+export default function PanelHeader( { children, ...props }: BoxProps ) {
+	return (
+		<>
+			<Header component="header" { ...props }>
+				{ children }
+			</Header>
+			<Divider />
+		</>
+	);
+}

package/src/components/external/panel.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { Drawer, DrawerProps } from '@elementor/ui';
+
+export default function Panel( { children, sx, ...props }: DrawerProps ) {
+	return (
+		<Drawer
+			open={ true }
+			variant="persistent"
+			anchor="left"
+			PaperProps={ {
+				sx: {
+					position: 'relative',
+					width: '100%',
+					bgcolor: 'background.default',
+					border: 'none',
+				},
+			} }
+			sx={ { height: '100%', ...sx } }
+			{ ...props }
+		>
+			{ children }
+		</Drawer>
+	);
+}

package/src/components/internal/panels.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import useOpenPanelInjection from '../../hooks/use-open-panel-injection';
+import Portal from './portal';
+
+export default function Panels() {
+	const openPanel = useOpenPanelInjection();
+	const Component = openPanel?.filler ?? null;
+
+	if ( ! Component ) {
+		return null;
+	}
+
+	return (
+		<Portal>
+			<Component />
+		</Portal>
+	);
+}

package/src/components/internal/portal.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Portal as BasePortal, PortalProps } from '@elementor/ui';
+import { useRef } from 'react';
+import { getPortalContainer } from '../../sync';
+
+type Props = Omit<PortalProps, 'container'>;
+
+export default function Portal( props: Props ) {
+	const containerRef = useRef( getPortalContainer );
+
+	if ( ! containerRef.current ) {
+		return null;
+	}
+
+	return (
+		<BasePortal container={ containerRef.current } { ...props } />
+	);
+}

package/src/hooks/use-open-panel-injection.ts

@@ -0,0 +1,14 @@
+import { useSelector } from '@elementor/store';
+import { usePanelsInjections } from '../location';
+import { selectOpenId } from '../store';
+import { useMemo } from 'react';
+
+export default function useOpenPanelInjection() {
+	const injections = usePanelsInjections();
+	const openId = useSelector( selectOpenId );
+
+	return useMemo(
+		() => injections.find( ( injection ) => openId === injection.id ),
+		[ injections, openId ]
+	);
+}

package/src/index.ts

@@ -0,0 +1,6 @@
+import init from './init';
+
+export { createPanel, registerPanel } from './api';
+export * from './components/external';
+
+init();

package/src/init.ts

@@ -0,0 +1,13 @@
+import { injectIntoTop } from '@elementor/editor';
+import { registerSlice } from '@elementor/store';
+import Panels from './components/internal/panels';
+import { sync } from './sync';
+import { slice } from './store';
+
+export default function init() {
+	sync();
+
+	registerSlice( slice );
+
+	injectIntoTop( { id: 'panels', filler: Panels } );
+}

package/src/location.ts

@@ -0,0 +1,6 @@
+import { createLocation } from '@elementor/locations';
+
+export const {
+	inject: injectIntoPanels,
+	useInjections: usePanelsInjections,
+} = createLocation();

package/src/store/index.ts

@@ -0,0 +1,2 @@
+export { selectOpenId } from './selectors';
+export { default as slice } from './slice';

package/src/store/selectors.ts

@@ -0,0 +1,6 @@
+import { SliceState } from '@elementor/store';
+import slice from './slice';
+
+type State = SliceState<typeof slice>;
+
+export const selectOpenId = ( state: State ) => state.panels.openId;

package/src/store/slice.ts

@@ -0,0 +1,22 @@
+import { createSlice, PayloadAction } from '@elementor/store';
+
+const initialState: {
+	openId: string | null;
+} = {
+	openId: null,
+};
+
+export default createSlice( {
+	name: 'panels',
+	initialState,
+	reducers: {
+		open( state, action: PayloadAction<string> ) {
+			state.openId = action.payload;
+		},
+		close( state, action: PayloadAction<string | undefined> ) {
+			if ( ! action.payload || state.openId === action.payload ) {
+				state.openId = null;
+			}
+		},
+	},
+} );

package/src/sync.ts

@@ -0,0 +1,141 @@
+import {
+	openRoute,
+	listenTo,
+	routeCloseEvent,
+	useRouteStatus,
+	routeOpenEvent,
+	windowEvent,
+	registerRoute,
+	isRouteActive,
+} from '@elementor/editor-v1-adapters';
+import { dispatch, getState, subscribe as originalSubscribe } from '@elementor/store';
+import { selectOpenId, slice } from './store';
+
+const V2_PANEL = 'panel/v2';
+
+export function getPortalContainer() {
+	return document.querySelector( '#elementor-panel-inner' );
+}
+
+export function useV1PanelStatus() {
+	// For now supporting only panels that are not part of the kit and not in preview mode.
+	return useRouteStatus( V2_PANEL, {
+		blockOnKitRoutes: true,
+		blockOnPreviewMode: true,
+	} );
+}
+
+export function sync() {
+	// Register the V2 panel route on panel init.
+	listenTo(
+		windowEvent( 'elementor/panel/init' ),
+		() => registerRoute( V2_PANEL )
+	);
+
+	// On empty route open, hide V1 panel elements.
+	listenTo(
+		routeOpenEvent( V2_PANEL ),
+		() => {
+			getV1PanelElements().forEach( ( el ) => {
+				el.setAttribute( 'hidden', 'hidden' );
+				el.setAttribute( 'aria-hidden', 'true' );
+			} );
+		},
+	);
+
+	// On empty route close, close the V2 panel.
+	listenTo(
+		routeCloseEvent( V2_PANEL ),
+		() => selectOpenId( getState() ) && dispatch( slice.actions.close() )
+	);
+
+	// On empty route close, show V1 panel elements.
+	listenTo(
+		routeCloseEvent( V2_PANEL ),
+		() => {
+			getV1PanelElements().forEach( ( el ) => {
+				el.removeAttribute( 'hidden' );
+				el.removeAttribute( 'aria-hidden' );
+			} );
+		},
+	);
+
+	// On V2 panel open, open the V2 panel route.
+	listenTo(
+		windowEvent( 'elementor/panel/init' ),
+		() => subscribe( {
+			on: ( state ) => selectOpenId( state ),
+			when: ( { prev, current } ) => !! ( ! prev && current ), // is panel opened
+			callback: () => openRoute( V2_PANEL ),
+		} )
+	);
+
+	// On V2 panel close, close the V2 panel route.
+	listenTo(
+		windowEvent( 'elementor/panel/init' ),
+		() => subscribe( {
+			on: ( state ) => selectOpenId( state ),
+			when: ( { prev, current } ) => !! ( ! current && prev ), // is panel closed
+			callback: () => isRouteActive( V2_PANEL ) && 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() {
+	type ExtendedWindow = Window & {
+		elementor?: {
+			documents?: {
+				getCurrent?: () => {
+					config?: {
+						panel?: {
+							default_route?: string,
+						}
+					}
+				},
+			}
+		}
+	}
+
+	const defaultRoute = ( window as unknown as ExtendedWindow )
+		?.elementor
+		?.documents
+		?.getCurrent?.()
+		?.config
+		?.panel
+		?.default_route;
+
+	return defaultRoute || 'panel/elements/categories';
+}
+
+function subscribe<TVal>( {
+	on,
+	when,
+	callback,
+}: {
+	on: ( state: ReturnType<typeof getState> ) => TVal,
+	when: ( { prev, current }: { prev: TVal, current: TVal } ) => boolean,
+	callback: ( { prev, current }: { prev: TVal, current: TVal } ) => void,
+} ) {
+	let prev: TVal;
+
+	originalSubscribe( () => {
+		const current = on( getState() );
+
+		if ( when( { prev, current } ) ) {
+			callback( { prev, current } );
+		}
+
+		prev = current;
+	} );
+}