@elementor/editor-responsive 0.10.6 → 0.11.1

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-actions.test.tsx

@@ -1,20 +0,0 @@
-import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
-import { renderHook } from '@testing-library/react';
-import useBreakpointsActions from '../use-breakpoints-actions';
-
-jest.mock( '@elementor/editor-v1-adapters', () => ( {
-	__privateRunCommand: jest.fn(),
-} ) );
-
-describe( '@elementor/editor-responsive - useBreakpointsActions', () => {
-	it( 'should activate a breakpoint', () => {
-		// Act.
-		const { result } = renderHook( () => useBreakpointsActions() );
-
-		result.current.activate( 'tablet' );
-
-		// Assert.
-		expect( jest.mocked( runCommand ) ).toHaveBeenCalledTimes( 1 );
-		expect( jest.mocked( runCommand ) ).toHaveBeenCalledWith( 'panel/change-device-mode', { device: 'tablet' } );
-	} );
-} );

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,
-		},
-	};
-}

package/src/sync/sync-store.ts

@@ -1,70 +0,0 @@
-import { slice } from '../store';
-import { __dispatch } from '@elementor/store';
-import { Breakpoint, ExtendedWindow } from '../types';
-import { __privateListenTo as listenTo, v1ReadyEvent, windowEvent } from '@elementor/editor-v1-adapters';
-import { __ } from '@wordpress/i18n';
-
-export default function syncStore() {
-	syncInitialization();
-	syncOnChange();
-}
-
-function syncInitialization() {
-	const { init } = slice.actions;
-
-	listenTo( v1ReadyEvent(), () => {
-		__dispatch(
-			init( {
-				entities: getBreakpoints(),
-				activeId: getActiveBreakpoint(),
-			} )
-		);
-	} );
-}
-
-function syncOnChange() {
-	const { activateBreakpoint } = slice.actions;
-
-	listenTo( deviceModeChangeEvent(), () => {
-		const activeBreakpoint = getActiveBreakpoint();
-
-		__dispatch( activateBreakpoint( activeBreakpoint ) );
-	} );
-}
-
-function getBreakpoints() {
-	const { breakpoints } = ( window as unknown as ExtendedWindow ).elementor?.config?.responsive || {};
-
-	if ( ! breakpoints ) {
-		return [];
-	}
-
-	const entities = Object.entries( breakpoints )
-		.filter( ( [ , breakpoint ] ) => breakpoint.is_enabled )
-		.map( ( [ id, { value, direction, label } ] ) => {
-			return {
-				id,
-				label,
-				width: value,
-				type: direction === 'min' ? 'min-width' : 'max-width',
-			} as Breakpoint;
-		} );
-
-	// Desktop breakpoint is not included in V1 config.
-	entities.push( {
-		id: 'desktop',
-		label: __( 'Desktop', 'elementor' ),
-	} );
-
-	return entities;
-}
-
-function getActiveBreakpoint() {
-	const extendedWindow = window as unknown as ExtendedWindow;
-
-	return extendedWindow.elementor?.channels?.deviceMode?.request?.( 'currentMode' ) || null;
-}
-
-function deviceModeChangeEvent() {
-	return windowEvent( 'elementor/device-mode/change' );
-}