@elementor/editor-responsive 0.10.5 → 0.11.0

package/src/hooks/use-breakpoints.ts

@@ -1,12 +1,50 @@
-import { __useSelector as useSelector } from '@elementor/store';
-import { selectActiveBreakpoint, selectSortedBreakpoints } from '../store/selectors';
+import { __ } from '@wordpress/i18n';
+import { Breakpoint, BreakpointId, ExtendedWindow } from '../types';
+import { v1ReadyEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';
 
-export default function useBreakpoints() {
-	const all = useSelector( selectSortedBreakpoints );
-	const active = useSelector( selectActiveBreakpoint );
+export function useBreakpoints() {
+	return useListenTo( v1ReadyEvent(), getBreakpoints );
+}
+
+function getBreakpoints() {
+	const { breakpoints } = ( window as unknown as ExtendedWindow ).elementor?.config?.responsive || {};
+
+	if ( ! breakpoints || Object.entries( breakpoints ).length === 0 ) {
+		return [];
+	}
+
+	const minWidth: Breakpoint[] = [];
+	const maxWidth: Breakpoint[] = [];
+
+	const defaults: Breakpoint[] = [
+		// Desktop breakpoint is not included in V1 config.
+		{ id: 'desktop', label: __( 'Desktop', 'elementor' ) },
+	];
 
-	return {
-		all,
-		active,
+	Object.entries( breakpoints ).forEach( ( [ id, v1Breakpoint ] ) => {
+		if ( ! v1Breakpoint.is_enabled ) {
+			return;
+		}
+
+		const breakpoint: Breakpoint = {
+			id: id as BreakpointId,
+			label: v1Breakpoint.label,
+			width: v1Breakpoint.value,
+			type: v1Breakpoint.direction === 'min' ? 'min-width' : 'max-width',
+		};
+
+		if ( ! breakpoint.width ) {
+			defaults.push( breakpoint );
+		} else if ( breakpoint.type === 'min-width' ) {
+			minWidth.push( breakpoint );
+		} else if ( breakpoint.type === 'max-width' ) {
+			maxWidth.push( breakpoint );
+		}
+	} );
+
+	const byWidth = ( a: Breakpoint, b: Breakpoint ) => {
+		return a.width && b.width ? b.width - a.width : 0;
 	};
+
+	return [ ...minWidth.sort( byWidth ), ...defaults, ...maxWidth.sort( byWidth ) ];
 }

package/src/index.ts

@@ -1,3 +1,5 @@
-import init from './init';
+export { useBreakpoints } from './hooks/use-breakpoints';
+export { useActiveBreakpoint } from './hooks/use-active-breakpoint';
+export { useActivateBreakpoint } from './hooks/use-activate-breakpoint';
 
-init();
+export type { BreakpointId, BreakpointSize, Breakpoint } from './types';

package/src/types.ts

@@ -5,40 +5,32 @@ export type BreakpointSize = number;
 export type BreakpointLabel = string;
 
 export type Breakpoint = {
-	id: BreakpointId,
-	label: BreakpointLabel,
-	width?: BreakpointSize,
-	type?: 'min-width' | 'max-width',
-}
+	id: BreakpointId;
+	label: BreakpointLabel;
+	width?: BreakpointSize;
+	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,
-			}
-		},
-		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>
-				}
-			}
-		}
-	}
-}
+	elementor?: {
+		config?: {
+			responsive?: {
+				breakpoints?: V1Breakpoints;
+			};
+		};
+		channels?: {
+			deviceMode?: {
+				request?: ( request: 'currentMode' ) => BreakpointId;
+			};
+		};
+	};
+};

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

@@ -1,121 +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,112 +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,75 +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,40 +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,38 +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 ),
-		];
-	},
-);