@elementor/editor-responsive 0.10.6 → 0.11.0

package/src/types.ts

@@ -11,36 +11,25 @@ export type Breakpoint = {
 	type?: 'min-width' | 'max-width';
 };
 
+export type V1Breakpoint = {
+	direction: 'min' | 'max';
+	is_enabled: boolean;
+	value: BreakpointSize;
+	label: BreakpointLabel;
+};
+
+export type V1Breakpoints = Record< Exclude< BreakpointId, 'desktop' >, V1Breakpoint >;
+
 export type ExtendedWindow = Window & {
-	elementor: {
-		config: {
-			responsive: {
-				breakpoints: Record<
-					Exclude< BreakpointId, 'desktop' >,
-					{
-						direction: 'min' | 'max';
-						is_enabled: boolean;
-						value: BreakpointSize;
-						label: BreakpointLabel;
-					}
-				>;
-			};
-		};
-		channels: {
-			deviceMode: {
-				request: ( request: 'currentMode' ) => BreakpointId;
+	elementor?: {
+		config?: {
+			responsive?: {
+				breakpoints?: V1Breakpoints;
 			};
 		};
-		editorEvents: {
-			dispatchEvent: ( name: string, data: Record< string, string > ) => void;
-			config: {
-				locations: Record< string, string >;
-				secondaryLocations: Record< string, string >;
-				triggers: Record< string, string >;
-				elements: Record< string, string >;
-				names: {
-					topBar: Record< string, string >;
-				};
+		channels?: {
+			deviceMode?: {
+				request?: ( request: 'currentMode' ) => BreakpointId;
 			};
 		};
 	};

package/src/components/__tests__/breakpoints-switcher.test.tsx

@@ -1,125 +0,0 @@
-import * as React from 'react';
-import { Breakpoint } from '../../types';
-import { fireEvent, render, screen } from '@testing-library/react';
-import useBreakpoints from '../../hooks/use-breakpoints';
-import BreakpointsSwitcher from '../breakpoints-switcher';
-import useBreakpointsActions from '../../hooks/use-breakpoints-actions';
-
-jest.mock( '../../hooks/use-breakpoints', () => jest.fn() );
-jest.mock( '../../hooks/use-breakpoints-actions', () =>
-	jest.fn().mockReturnValue( {
-		activate: jest.fn(),
-	} )
-);
-
-describe( '@elementor/editor-responsive - Breakpoints Switcher', () => {
-	it( 'should not render when there are no breakpoints', () => {
-		// Arrange.
-		jest.mocked( useBreakpoints ).mockReturnValue( {
-			all: [],
-			active: {
-				id: 'desktop',
-				label: 'Desktop',
-			},
-		} );
-
-		// Act.
-		const { container } = render( <BreakpointsSwitcher /> );
-
-		// Assert.
-		expect( container ).toBeEmptyDOMElement();
-	} );
-
-	it( 'should not render when there is no active breakpoint', () => {
-		// Arrange.
-		jest.mocked( useBreakpoints ).mockReturnValue( {
-			active: null,
-			all: [
-				{
-					id: 'desktop',
-					label: 'Desktop',
-				},
-			],
-		} );
-
-		// Act.
-		const { container } = render( <BreakpointsSwitcher /> );
-
-		// Assert.
-		expect( container ).toBeEmptyDOMElement();
-	} );
-
-	it( 'should render all of the breakpoints', () => {
-		// Arrange.
-		const sortedBreakpoints: Breakpoint[] = [
-			{ id: 'widescreen', label: 'Widescreen', width: 2400, type: 'min-width' },
-			{ id: 'desktop', label: 'Desktop' },
-			{ id: 'laptop', label: 'Laptop', width: 1366, type: 'max-width' },
-			{ id: 'tablet_extra', label: 'Tablet Landscape', width: 1200, type: 'max-width' },
-			{ id: 'tablet', label: 'Tablet Portrait', width: 1024, type: 'max-width' },
-			{ id: 'mobile_extra', label: 'Mobile Landscape', width: 880, type: 'max-width' },
-			{ id: 'mobile', label: 'Mobile Portrait', width: 767, type: 'max-width' },
-		];
-
-		jest.mocked( useBreakpoints ).mockReturnValue( {
-			all: sortedBreakpoints,
-			active: { id: 'desktop', label: 'Desktop' },
-		} );
-
-		// Act.
-		render( <BreakpointsSwitcher /> );
-
-		// Assert.
-		const tabs = screen.getAllByRole( 'tab' );
-		const expectedLabels = [
-			'Widescreen (2400px and up)',
-			'Desktop',
-			'Laptop (up to 1366px)',
-			'Tablet Landscape (up to 1200px)',
-			'Tablet Portrait (up to 1024px)',
-			'Mobile Landscape (up to 880px)',
-			'Mobile Portrait (up to 767px)',
-		];
-
-		expect( tabs ).toHaveLength( 7 );
-
-		tabs.forEach( ( tab, index ) => {
-			expect( tab ).toHaveAttribute( 'aria-label', expectedLabels[ index ] );
-		} );
-
-		// Desktop should be active.
-		expect( tabs[ 1 ] ).toHaveAttribute( 'aria-selected', 'true' );
-	} );
-
-	it( 'should activate a breakpoint on click', () => {
-		// Arrange.
-		const activate = jest.fn();
-
-		jest.mocked( useBreakpointsActions ).mockReturnValue( {
-			activate,
-		} );
-
-		jest.mocked( useBreakpoints ).mockReturnValue( {
-			active: {
-				id: 'desktop',
-				label: 'Desktop',
-			},
-			all: [
-				{ id: 'mobile', label: 'Mobile Portrait' },
-				{ id: 'desktop', label: 'Desktop' },
-			],
-		} );
-
-		// Act.
-		render( <BreakpointsSwitcher /> );
-
-		const mobileTab = screen.getByLabelText( 'Mobile Portrait', {
-			selector: 'button',
-		} );
-
-		fireEvent.click( mobileTab );
-
-		// Assert.
-		expect( activate ).toHaveBeenCalledWith( 'mobile' );
-	} );
-} );

package/src/components/breakpoints-switcher.tsx

@@ -1,113 +0,0 @@
-import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import { BreakpointId, ExtendedWindow } from '../types';
-import useBreakpoints from '../hooks/use-breakpoints';
-import { Tab, Tabs, Tooltip as BaseTooltip, TooltipProps } from '@elementor/ui';
-import {
-	DesktopIcon,
-	TabletPortraitIcon,
-	MobilePortraitIcon,
-	WidescreenIcon,
-	LaptopIcon,
-	TabletLandscapeIcon,
-	MobileLandscapeIcon,
-} from '@elementor/icons';
-import useBreakpointsActions from '../hooks/use-breakpoints-actions';
-
-export default function BreakpointsSwitcher() {
-	const { all, active } = useBreakpoints();
-	const { activate } = useBreakpointsActions();
-
-	if ( ! all.length || ! active ) {
-		return null;
-	}
-
-	const onChange = ( _: unknown, value: BreakpointId ) => {
-		const extendedWindow = window as unknown as ExtendedWindow;
-		const config = extendedWindow?.elementor?.editorEvents?.config;
-
-		if ( config ) {
-			extendedWindow.elementor.editorEvents.dispatchEvent( config.names.topBar.responsiveControls, {
-				location: config.locations.topBar,
-				secondaryLocation: config.secondaryLocations.responsiveControls,
-				trigger: config.triggers.click,
-				element: config.elements.buttonIcon,
-				mode: value,
-			} );
-		}
-
-		activate( value );
-	};
-
-	return (
-		<Tabs
-			textColor="inherit"
-			indicatorColor="secondary"
-			value={ active.id }
-			onChange={ onChange }
-			aria-label={ __( 'Switch Device', 'elementor' ) }
-			sx={ {
-				'& .MuiTabs-indicator': {
-					backgroundColor: 'text.primary',
-				},
-			} }
-		>
-			{ all.map( ( { id, label, type, width } ) => {
-				const Icon = iconsMap[ id ];
-
-				const title = labelsMap[ type || 'default' ]
-					.replace( '%s', label )
-					.replace( '%d', width?.toString() || '' );
-
-				return (
-					<Tab
-						value={ id }
-						key={ id }
-						aria-label={ title }
-						icon={
-							<Tooltip title={ title }>
-								<Icon />
-							</Tooltip>
-						}
-						sx={ { minWidth: 'auto' } }
-						data-testid={ `switch-device-to-${ id }` }
-					/>
-				);
-			} ) }
-		</Tabs>
-	);
-}
-
-function Tooltip( props: TooltipProps ) {
-	return (
-		<BaseTooltip
-			PopperProps={ {
-				sx: {
-					'&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom': {
-						mt: 2.5,
-					},
-				},
-			} }
-			{ ...props }
-		/>
-	);
-}
-
-const iconsMap = {
-	widescreen: WidescreenIcon,
-	desktop: DesktopIcon,
-	laptop: LaptopIcon,
-	tablet_extra: TabletLandscapeIcon,
-	tablet: TabletPortraitIcon,
-	mobile_extra: MobileLandscapeIcon,
-	mobile: MobilePortraitIcon,
-};
-
-const labelsMap = {
-	default: '%s',
-	// translators: %s: Breakpoint label, %d: Breakpoint size.
-	'min-width': __( '%s (%dpx and up)', 'elementor' ),
-
-	// translators: %s: Breakpoint label, %d: Breakpoint size.
-	'max-width': __( '%s (up to %dpx)', 'elementor' ),
-} as const;

package/src/hooks/__tests__/use-breakpoints.test.tsx

@@ -1,84 +0,0 @@
-import * as React from 'react';
-import { PropsWithChildren } from 'react';
-import { slice } from '../../store';
-import useBreakpoints from '../use-breakpoints';
-import { renderHook } from '@testing-library/react';
-import {
-	__createStore,
-	__dispatch,
-	__registerSlice,
-	SliceState,
-	Store,
-	__StoreProvider as StoreProvider,
-} from '@elementor/store';
-
-jest.mock( '@elementor/editor-v1-adapters', () => ( {
-	__privateRunCommand: jest.fn(),
-} ) );
-
-describe( '@elementor/editor-responsive - useBreakpoints', () => {
-	let store: Store< SliceState< typeof slice > >;
-
-	beforeEach( () => {
-		__registerSlice( slice );
-		store = __createStore();
-	} );
-
-	it( 'should return all breakpoints sorted by size', () => {
-		// Arrange.
-		__dispatch(
-			slice.actions.init( {
-				activeId: null,
-				entities: [
-					{ id: 'tablet', label: 'Tablet Portrait', width: 1024, type: 'max-width' },
-					{ id: 'mobile', label: 'Mobile Portrait', width: 767, type: 'max-width' },
-					{ id: 'widescreen', label: 'Widescreen', width: 2400, type: 'min-width' },
-					{ id: 'desktop', label: 'Desktop' },
-				],
-			} )
-		);
-
-		// Act.
-		const { result } = renderHookWithStore( () => useBreakpoints(), store );
-
-		// Assert.
-		expect( result.current.all ).toEqual( [
-			{ id: 'widescreen', label: 'Widescreen', width: 2400, type: 'min-width' },
-			{ id: 'desktop', label: 'Desktop' },
-			{ id: 'tablet', label: 'Tablet Portrait', width: 1024, type: 'max-width' },
-			{ id: 'mobile', label: 'Mobile Portrait', width: 767, type: 'max-width' },
-		] );
-	} );
-
-	it( 'should return the active breakpoint', () => {
-		// Arrange.
-		__dispatch(
-			slice.actions.init( {
-				activeId: 'tablet',
-				entities: [
-					{ id: 'desktop', label: 'Desktop' },
-					{ id: 'tablet', label: 'Tablet Portrait', type: 'max-width', width: 1024 },
-				],
-			} )
-		);
-
-		// Act.
-		const { result } = renderHookWithStore( () => useBreakpoints(), store );
-
-		// Assert.
-		expect( result.current.active ).toEqual( {
-			id: 'tablet',
-			label: 'Tablet Portrait',
-			type: 'max-width',
-			width: 1024,
-		} );
-	} );
-} );
-
-function renderHookWithStore< T >( hook: () => T, store: Store ) {
-	const wrapper = ( { children }: PropsWithChildren< unknown > ) => (
-		<StoreProvider store={ store }>{ children }</StoreProvider>
-	);
-
-	return renderHook( hook, { wrapper } );
-}

package/src/hooks/use-breakpoints-actions.ts

@@ -1,13 +0,0 @@
-import { useCallback } from 'react';
-import { BreakpointId } from '../types';
-import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
-
-export default function useBreakpointsActions() {
-	const activate = useCallback( ( device: BreakpointId ) => {
-		return runCommand( 'panel/change-device-mode', { device } );
-	}, [] );
-
-	return {
-		activate,
-	};
-}

package/src/init.ts

@@ -1,27 +0,0 @@
-import { slice } from './store';
-import syncStore from './sync/sync-store';
-import { injectIntoResponsive } from '@elementor/editor-app-bar';
-import BreakpointsSwitcher from './components/breakpoints-switcher';
-import { __registerSlice } from '@elementor/store';
-
-export default function init() {
-	initStore();
-
-	registerAppBarUI();
-}
-
-function initStore() {
-	__registerSlice( slice );
-
-	syncStore();
-}
-
-function registerAppBarUI() {
-	injectIntoResponsive( {
-		id: 'responsive-breakpoints-switcher',
-		component: BreakpointsSwitcher,
-		options: {
-			priority: 20, // After document indication.
-		},
-	} );
-}

package/src/store/index.ts

@@ -1,46 +0,0 @@
-import { __createSlice, PayloadAction } from '@elementor/store';
-import { Breakpoint, BreakpointId } from '../types';
-
-export type State = {
-	entities: Record< BreakpointId, Breakpoint >;
-	activeId: BreakpointId | null;
-};
-const initialState: State = {
-	entities: {} as State[ 'entities' ],
-	activeId: null,
-};
-
-export const slice = __createSlice( {
-	name: 'breakpoints',
-	initialState,
-	reducers: {
-		init(
-			state,
-			action: PayloadAction< {
-				entities: Breakpoint[];
-				activeId: State[ 'activeId' ];
-			} >
-		) {
-			state.activeId = action.payload.activeId;
-			state.entities = normalizeEntities( action.payload.entities );
-		},
-
-		activateBreakpoint( state, action: PayloadAction< BreakpointId > ) {
-			if ( state.entities[ action.payload ] ) {
-				state.activeId = action.payload;
-			}
-		},
-	},
-} );
-
-function normalizeEntities( entities: Breakpoint[] ) {
-	return entities.reduce(
-		( acc, breakpoint ) => {
-			return {
-				...acc,
-				[ breakpoint.id ]: breakpoint,
-			};
-		},
-		{} as State[ 'entities' ]
-	);
-}

package/src/store/selectors.ts

@@ -1,27 +0,0 @@
-import { slice } from './index';
-import { Breakpoint } from '../types';
-import { __createSelector, SliceState } from '@elementor/store';
-
-type State = SliceState< typeof slice >;
-
-export const selectEntities = ( state: State ) => state.breakpoints.entities;
-export const selectActiveId = ( state: State ) => state.breakpoints.activeId;
-
-export const selectActiveBreakpoint = __createSelector( selectEntities, selectActiveId, ( entities, activeId ) =>
-	activeId && entities[ activeId ] ? entities[ activeId ] : null
-);
-
-export const selectSortedBreakpoints = __createSelector( selectEntities, ( entities ) => {
-	const byWidth = ( a: Breakpoint, b: Breakpoint ) => {
-		return a.width && b.width ? b.width - a.width : 0;
-	};
-
-	const all = Object.values( entities );
-
-	const defaults = all.filter( ( breakpoint ) => ! breakpoint.width ); // AKA Desktop.
-	const minWidth = all.filter( ( breakpoint ) => breakpoint.type === 'min-width' );
-	const maxWidth = all.filter( ( breakpoint ) => breakpoint.type === 'max-width' );
-
-	// Sort by size, big to small.
-	return [ ...minWidth.sort( byWidth ), ...defaults, ...maxWidth.sort( byWidth ) ];
-} );

package/src/sync/__tests__/sync-store.test.ts

@@ -1,162 +0,0 @@
-import syncStore from '../sync-store';
-import { slice } from '../../store';
-import { BreakpointId, ExtendedWindow } from '../../types';
-import { __createStore, __dispatch, __registerSlice, SliceState, Store } from '@elementor/store';
-import { selectActiveBreakpoint, selectEntities } from '../../store/selectors';
-
-describe( '@elementor/editor-responsive - Sync Store', () => {
-	let store: Store< SliceState< typeof slice > >;
-	let extendedWindow: ExtendedWindow;
-
-	beforeEach( () => {
-		__registerSlice( slice );
-		store = __createStore();
-
-		syncStore();
-
-		extendedWindow = window as unknown as ExtendedWindow;
-	} );
-
-	it( 'should initialize the store when V1 is ready', () => {
-		// Arrange.
-		mockV1BreakpointsConfig();
-
-		// Act.
-		dispatchEvent( new CustomEvent( 'elementor/initialized' ) );
-
-		// Assert.
-		expect( selectEntities( store.getState() ) ).toEqual( {
-			desktop: { id: 'desktop', label: 'Desktop' },
-			mobile: { id: 'mobile', label: 'Mobile Portrait', width: 767, type: 'max-width' },
-			tablet: { id: 'tablet', label: 'Tablet Portrait', width: 1024, type: 'max-width' },
-			laptop: { id: 'laptop', label: 'Laptop', width: 1366, type: 'max-width' },
-			widescreen: { id: 'widescreen', label: 'Widescreen', width: 2400, type: 'min-width' },
-			mobile_extra: { id: 'mobile_extra', label: 'Mobile Landscape', width: 880, type: 'max-width' },
-			tablet_extra: { id: 'tablet_extra', label: 'Tablet Landscape', width: 1200, type: 'max-width' },
-		} );
-
-		expect( extendedWindow.elementor.channels.deviceMode.request ).toHaveBeenCalledTimes( 1 );
-		expect( extendedWindow.elementor.channels.deviceMode.request ).toHaveBeenCalledWith( 'currentMode' );
-
-		expect( selectActiveBreakpoint( store.getState() ) ).toEqual( {
-			id: 'mobile',
-			label: 'Mobile Portrait',
-			width: 767,
-			type: 'max-width',
-		} );
-	} );
-
-	it( 'should initialize an empty store when V1 breakpoints config is not available', () => {
-		// Act.
-		dispatchEvent( new CustomEvent( 'elementor/initialized' ) );
-
-		// Assert.
-		expect( selectEntities( store.getState() ) ).toEqual( {} );
-	} );
-
-	it( 'should sync the active breakpoint on change', () => {
-		// Arrange.
-		mockV1BreakpointsConfig();
-
-		__dispatch(
-			slice.actions.init( {
-				entities: [
-					{ id: 'desktop', label: 'Desktop' },
-					{ id: 'mobile', label: 'Mobile Portrait', width: 767, type: 'max-width' },
-				],
-				activeId: 'mobile',
-			} )
-		);
-
-		// Act - Mock a change.
-		jest.mocked( extendedWindow.elementor.channels.deviceMode.request ).mockReturnValue( 'desktop' );
-		dispatchEvent( new CustomEvent( 'elementor/device-mode/change' ) );
-
-		// Assert.
-		expect( selectActiveBreakpoint( store.getState() ) ).toEqual( { id: 'desktop', label: 'Desktop' } );
-	} );
-
-	it( "should not change the active breakpoint when it's empty", () => {
-		// Arrange.
-		mockV1BreakpointsConfig();
-
-		__dispatch(
-			slice.actions.init( {
-				entities: [
-					{ id: 'desktop', label: 'Desktop' },
-					{ id: 'mobile', label: 'Mobile Portrait', width: 767, type: 'max-width' },
-				],
-				activeId: 'desktop',
-			} )
-		);
-
-		// Act - Mock a change.
-		jest.mocked( extendedWindow.elementor.channels.deviceMode.request ).mockReturnValue( '' as BreakpointId );
-		dispatchEvent( new CustomEvent( 'elementor/device-mode/change' ) );
-
-		// Assert.
-		expect( selectActiveBreakpoint( store.getState() ) ).toEqual( { id: 'desktop', label: 'Desktop' } );
-	} );
-} );
-
-function mockV1BreakpointsConfig() {
-	( window as unknown as ExtendedWindow ).elementor = {
-		channels: {
-			deviceMode: { request: jest.fn( () => 'mobile' ) },
-		},
-		config: {
-			responsive: {
-				breakpoints: {
-					mobile: {
-						label: 'Mobile Portrait',
-						value: 767,
-						direction: 'max',
-						is_enabled: true,
-					},
-					mobile_extra: {
-						label: 'Mobile Landscape',
-						value: 880,
-						direction: 'max',
-						is_enabled: true,
-					},
-					tablet: {
-						label: 'Tablet Portrait',
-						value: 1024,
-						direction: 'max',
-						is_enabled: true,
-					},
-					tablet_extra: {
-						label: 'Tablet Landscape',
-						value: 1200,
-						direction: 'max',
-						is_enabled: true,
-					},
-					laptop: {
-						label: 'Laptop',
-						value: 1366,
-						direction: 'max',
-						is_enabled: true,
-					},
-					widescreen: {
-						label: 'Widescreen',
-						value: 2400,
-						direction: 'min',
-						is_enabled: true,
-					},
-				} as const,
-			},
-		},
-		editorEvents: {
-			config: {
-				elements: {},
-				locations: {},
-				names: {
-					topBar: {},
-				},
-				secondaryLocations: {},
-				triggers: {},
-			},
-			dispatchEvent: () => null,
-		},
-	};
-}