@elementor/editor-responsive 0.10.5 → 0.10.6

package/dist/index.mjs

@@ -20,12 +20,15 @@ var slice = __createSlice({
   }
 });
 function normalizeEntities(entities) {
-  return entities.reduce((acc, breakpoint) => {
-    return {
-      ...acc,
-      [breakpoint.id]: breakpoint
-    };
-  }, {});
+  return entities.reduce(
+    (acc, breakpoint) => {
+      return {
+        ...acc,
+        [breakpoint.id]: breakpoint
+      };
+    },
+    {}
+  );
 }
 
 // src/sync/sync-store.ts
@@ -38,25 +41,21 @@ function syncStore() {
 }
 function syncInitialization() {
   const { init: init2 } = slice.actions;
-  listenTo(
-    v1ReadyEvent(),
-    () => {
-      __dispatch(init2({
+  listenTo(v1ReadyEvent(), () => {
+    __dispatch(
+      init2({
         entities: getBreakpoints(),
         activeId: getActiveBreakpoint()
-      }));
-    }
-  );
+      })
+    );
+  });
 }
 function syncOnChange() {
   const { activateBreakpoint } = slice.actions;
-  listenTo(
-    deviceModeChangeEvent(),
-    () => {
-      const activeBreakpoint = getActiveBreakpoint();
-      __dispatch(activateBreakpoint(activeBreakpoint));
-    }
-  );
+  listenTo(deviceModeChangeEvent(), () => {
+    const activeBreakpoint = getActiveBreakpoint();
+    __dispatch(activateBreakpoint(activeBreakpoint));
+  });
 }
 function getBreakpoints() {
   const { breakpoints } = window.elementor?.config?.responsive || {};
@@ -104,23 +103,16 @@ var selectActiveBreakpoint = __createSelector(
   selectActiveId,
   (entities, activeId) => activeId && entities[activeId] ? entities[activeId] : null
 );
-var selectSortedBreakpoints = __createSelector(
-  selectEntities,
-  (entities) => {
-    const byWidth = (a, b) => {
-      return a.width && b.width ? b.width - a.width : 0;
-    };
-    const all = Object.values(entities);
-    const defaults = all.filter((breakpoint) => !breakpoint.width);
-    const minWidth = all.filter((breakpoint) => breakpoint.type === "min-width");
-    const maxWidth = all.filter((breakpoint) => breakpoint.type === "max-width");
-    return [
-      ...minWidth.sort(byWidth),
-      ...defaults,
-      ...maxWidth.sort(byWidth)
-    ];
-  }
-);
+var selectSortedBreakpoints = __createSelector(selectEntities, (entities) => {
+  const byWidth = (a, b) => {
+    return a.width && b.width ? b.width - a.width : 0;
+  };
+  const all = Object.values(entities);
+  const defaults = all.filter((breakpoint) => !breakpoint.width);
+  const minWidth = all.filter((breakpoint) => breakpoint.type === "min-width");
+  const maxWidth = all.filter((breakpoint) => breakpoint.type === "max-width");
+  return [...minWidth.sort(byWidth), ...defaults, ...maxWidth.sort(byWidth)];
+});
 
 // src/hooks/use-breakpoints.ts
 function useBreakpoints() {
@@ -167,16 +159,13 @@ function BreakpointsSwitcher() {
     const extendedWindow = window;
     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
-        }
-      );
+      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);
   };

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/store/index.ts","../src/sync/sync-store.ts","../src/init.ts","../src/components/breakpoints-switcher.tsx","../src/hooks/use-breakpoints.ts","../src/store/selectors.ts","../src/hooks/use-breakpoints-actions.ts","../src/index.ts"],"sourcesContent":["import { __createSlice, PayloadAction } from '@elementor/store';\nimport { Breakpoint, BreakpointId } from '../types';\n\nexport type State = {\n\tentities: Record<BreakpointId, Breakpoint>,\n\tactiveId: BreakpointId | null,\n}\nconst initialState: State = {\n\tentities: {} as State['entities'],\n\tactiveId: null,\n};\n\nexport const slice = __createSlice( {\n\tname: 'breakpoints',\n\tinitialState,\n\treducers: {\n\t\tinit( state, action: PayloadAction<{\n\t\t\tentities: Breakpoint[],\n\t\t\tactiveId: State['activeId'],\n\t\t}> ) {\n\t\t\tstate.activeId = action.payload.activeId;\n\t\t\tstate.entities = normalizeEntities( action.payload.entities );\n\t\t},\n\n\t\tactivateBreakpoint( state, action: PayloadAction<BreakpointId> ) {\n\t\t\tif ( state.entities[ action.payload ] ) {\n\t\t\t\tstate.activeId = action.payload;\n\t\t\t}\n\t\t},\n\t},\n} );\n\nfunction normalizeEntities( entities: Breakpoint[] ) {\n\treturn entities.reduce( ( acc, breakpoint ) => {\n\t\treturn {\n\t\t\t...acc,\n\t\t\t[ breakpoint.id ]: breakpoint,\n\t\t};\n\t}, {} as State['entities'] );\n}\n","import { slice } from '../store';\nimport { __dispatch } from '@elementor/store';\nimport { Breakpoint, ExtendedWindow } from '../types';\nimport { __privateListenTo as listenTo, v1ReadyEvent, windowEvent } from '@elementor/editor-v1-adapters';\nimport { __ } from '@wordpress/i18n';\n\nexport default function syncStore() {\n\tsyncInitialization();\n\tsyncOnChange();\n}\n\nfunction syncInitialization() {\n\tconst { init } = slice.actions;\n\n\tlistenTo(\n\t\tv1ReadyEvent(),\n\t\t() => {\n\t\t\t__dispatch( init( {\n\t\t\t\tentities: getBreakpoints(),\n\t\t\t\tactiveId: getActiveBreakpoint(),\n\t\t\t} ) );\n\t\t}\n\t);\n}\n\nfunction syncOnChange() {\n\tconst { activateBreakpoint } = slice.actions;\n\n\tlistenTo(\n\t\tdeviceModeChangeEvent(),\n\t\t() => {\n\t\t\tconst activeBreakpoint = getActiveBreakpoint();\n\n\t\t\t__dispatch( activateBreakpoint( activeBreakpoint ) );\n\t\t},\n\t);\n}\n\nfunction getBreakpoints() {\n\tconst { breakpoints } = ( window as unknown as ExtendedWindow ).elementor?.config?.responsive || {};\n\n\tif ( ! breakpoints ) {\n\t\treturn [];\n\t}\n\n\tconst entities = Object\n\t\t.entries( breakpoints )\n\t\t.filter( ( [ , breakpoint ] ) => breakpoint.is_enabled )\n\t\t.map( ( [ id, { value, direction, label } ] ) => {\n\t\t\treturn {\n\t\t\t\tid,\n\t\t\t\tlabel,\n\t\t\t\twidth: value,\n\t\t\t\ttype: direction === 'min' ? 'min-width' : 'max-width',\n\t\t\t} as Breakpoint;\n\t\t} );\n\n\t// Desktop breakpoint is not included in V1 config.\n\tentities.push( {\n\t\tid: 'desktop',\n\t\tlabel: __( 'Desktop', 'elementor' ),\n\t} );\n\n\treturn entities;\n}\n\nfunction getActiveBreakpoint() {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\treturn extendedWindow.elementor?.channels?.deviceMode?.request?.( 'currentMode' ) || null;\n}\n\nfunction deviceModeChangeEvent() {\n\treturn windowEvent( 'elementor/device-mode/change' );\n}\n","import { slice } from './store';\nimport syncStore from './sync/sync-store';\nimport { injectIntoResponsive } from '@elementor/editor-app-bar';\nimport BreakpointsSwitcher from './components/breakpoints-switcher';\nimport { __registerSlice } from '@elementor/store';\n\nexport default function init() {\n\tinitStore();\n\n\tregisterAppBarUI();\n}\n\nfunction initStore() {\n\t__registerSlice( slice );\n\n\tsyncStore();\n}\n\nfunction registerAppBarUI() {\n\tinjectIntoResponsive( {\n\t\tid: 'responsive-breakpoints-switcher',\n\t\tcomponent: BreakpointsSwitcher,\n\t\toptions: {\n\t\t\tpriority: 20, // After document indication.\n\t\t},\n\t} );\n}\n","import * as React from 'react';\nimport { __ } from '@wordpress/i18n';\nimport { BreakpointId, ExtendedWindow } from '../types';\nimport useBreakpoints from '../hooks/use-breakpoints';\nimport { Tab, Tabs, Tooltip as BaseTooltip, TooltipProps } from '@elementor/ui';\nimport {\n\tDesktopIcon,\n\tTabletPortraitIcon,\n\tMobilePortraitIcon,\n\tWidescreenIcon,\n\tLaptopIcon,\n\tTabletLandscapeIcon,\n\tMobileLandscapeIcon,\n} from '@elementor/icons';\nimport useBreakpointsActions from '../hooks/use-breakpoints-actions';\n\nexport default function BreakpointsSwitcher() {\n\tconst { all, active } = useBreakpoints();\n\tconst { activate } = useBreakpointsActions();\n\n\tif ( ! all.length || ! active ) {\n\t\treturn null;\n\t}\n\n\tconst onChange = ( _: unknown, value: BreakpointId ) => {\n\t\tconst extendedWindow = window as unknown as ExtendedWindow;\n\t\tconst config = extendedWindow?.elementor?.editorEvents?.config;\n\n\t\tif ( config ) {\n\t\t\textendedWindow.elementor.editorEvents.dispatchEvent(\n\t\t\t\tconfig.names.topBar.responsiveControls,\n\t\t\t\t{\n\t\t\t\t\tlocation: config.locations.topBar,\n\t\t\t\t\tsecondaryLocation: config.secondaryLocations.responsiveControls,\n\t\t\t\t\ttrigger: config.triggers.click,\n\t\t\t\t\telement: config.elements.buttonIcon,\n\t\t\t\t\tmode: value,\n\t\t\t\t},\n\t\t\t);\n\t\t}\n\n\t\tactivate( value );\n\t};\n\n\treturn (\n\t\t<Tabs\n\t\t\ttextColor=\"inherit\"\n\t\t\tindicatorColor=\"secondary\"\n\t\t\tvalue={ active.id }\n\t\t\tonChange={ onChange }\n\t\t\taria-label={ __( 'Switch Device', 'elementor' ) }\n\t\t\tsx={ {\n\t\t\t\t'& .MuiTabs-indicator': {\n\t\t\t\t\tbackgroundColor: 'text.primary',\n\t\t\t\t},\n\t\t\t} }\n\t\t>\n\t\t\t{\n\t\t\t\tall.map( ( { id, label, type, width } ) => {\n\t\t\t\t\tconst Icon = iconsMap[ id ];\n\n\t\t\t\t\tconst title = labelsMap[ type || 'default' ]\n\t\t\t\t\t\t.replace( '%s', label )\n\t\t\t\t\t\t.replace( '%d', width?.toString() || '' );\n\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Tab value={ id }\n\t\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\t\taria-label={ title }\n\t\t\t\t\t\t\ticon={ <Tooltip title={ title }><Icon /></Tooltip> }\n\t\t\t\t\t\t\tsx={ { minWidth: 'auto' } }\n\t\t\t\t\t\t\tdata-testid={ `switch-device-to-${ id }` }\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</Tabs>\n\n\t);\n}\n\nfunction Tooltip( props: TooltipProps ) {\n\treturn <BaseTooltip\n\t\tPopperProps={ {\n\t\t\tsx: {\n\t\t\t\t'&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom': {\n\t\t\t\t\tmt: 2.5,\n\t\t\t\t},\n\t\t\t},\n\t\t} }\n\t\t{ ...props }\n\t/>;\n}\n\nconst iconsMap = {\n\twidescreen: WidescreenIcon,\n\tdesktop: DesktopIcon,\n\tlaptop: LaptopIcon,\n\ttablet_extra: TabletLandscapeIcon,\n\ttablet: TabletPortraitIcon,\n\tmobile_extra: MobileLandscapeIcon,\n\tmobile: MobilePortraitIcon,\n};\n\nconst labelsMap = {\n\tdefault: '%s',\n\t// translators: %s: Breakpoint label, %d: Breakpoint size.\n\t'min-width': __( '%s (%dpx and up)', 'elementor' ),\n\n\t// translators: %s: Breakpoint label, %d: Breakpoint size.\n\t'max-width': __( '%s (up to %dpx)', 'elementor' ),\n} as const;\n","import { __useSelector as useSelector } from '@elementor/store';\nimport { selectActiveBreakpoint, selectSortedBreakpoints } from '../store/selectors';\n\nexport default function useBreakpoints() {\n\tconst all = useSelector( selectSortedBreakpoints );\n\tconst active = useSelector( selectActiveBreakpoint );\n\n\treturn {\n\t\tall,\n\t\tactive,\n\t};\n}\n","import { slice } from './index';\nimport { Breakpoint } from '../types';\nimport { __createSelector, SliceState } from '@elementor/store';\n\ntype State = SliceState<typeof slice>;\n\nexport const selectEntities = ( state: State ) => state.breakpoints.entities;\nexport const selectActiveId = ( state: State ) => state.breakpoints.activeId;\n\nexport const selectActiveBreakpoint = __createSelector(\n\tselectEntities,\n\tselectActiveId,\n\t( entities, activeId ) => activeId && entities[ activeId ]\n\t\t? entities[ activeId ]\n\t\t: null,\n);\n\nexport const selectSortedBreakpoints = __createSelector(\n\tselectEntities,\n\t( entities ) => {\n\t\tconst byWidth = ( a: Breakpoint, b: Breakpoint ) => {\n\t\t\treturn ( a.width && b.width ) ? b.width - a.width : 0;\n\t\t};\n\n\t\tconst all = Object.values( entities );\n\n\t\tconst defaults = all.filter( ( breakpoint ) => ! breakpoint.width ); // AKA Desktop.\n\t\tconst minWidth = all.filter( ( breakpoint ) => breakpoint.type === 'min-width' );\n\t\tconst maxWidth = all.filter( ( breakpoint ) => breakpoint.type === 'max-width' );\n\n\t\t// Sort by size, big to small.\n\t\treturn [\n\t\t\t...minWidth.sort( byWidth ),\n\t\t\t...defaults,\n\t\t\t...maxWidth.sort( byWidth ),\n\t\t];\n\t},\n);\n","import { useCallback } from 'react';\nimport { BreakpointId } from '../types';\nimport { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\n\nexport default function useBreakpointsActions() {\n\tconst activate = useCallback( ( device: BreakpointId ) => {\n\t\treturn runCommand( 'panel/change-device-mode', { device } );\n\t}, [] );\n\n\treturn {\n\t\tactivate,\n\t};\n}\n","import init from './init';\n\ninit();\n"],"mappings":"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","names":["init","__","__"]}
+{"version":3,"sources":["../src/store/index.ts","../src/sync/sync-store.ts","../src/init.ts","../src/components/breakpoints-switcher.tsx","../src/hooks/use-breakpoints.ts","../src/store/selectors.ts","../src/hooks/use-breakpoints-actions.ts","../src/index.ts"],"sourcesContent":["import { __createSlice, PayloadAction } from '@elementor/store';\nimport { Breakpoint, BreakpointId } from '../types';\n\nexport type State = {\n\tentities: Record< BreakpointId, Breakpoint >;\n\tactiveId: BreakpointId | null;\n};\nconst initialState: State = {\n\tentities: {} as State[ 'entities' ],\n\tactiveId: null,\n};\n\nexport const slice = __createSlice( {\n\tname: 'breakpoints',\n\tinitialState,\n\treducers: {\n\t\tinit(\n\t\t\tstate,\n\t\t\taction: PayloadAction< {\n\t\t\t\tentities: Breakpoint[];\n\t\t\t\tactiveId: State[ 'activeId' ];\n\t\t\t} >\n\t\t) {\n\t\t\tstate.activeId = action.payload.activeId;\n\t\t\tstate.entities = normalizeEntities( action.payload.entities );\n\t\t},\n\n\t\tactivateBreakpoint( state, action: PayloadAction< BreakpointId > ) {\n\t\t\tif ( state.entities[ action.payload ] ) {\n\t\t\t\tstate.activeId = action.payload;\n\t\t\t}\n\t\t},\n\t},\n} );\n\nfunction normalizeEntities( entities: Breakpoint[] ) {\n\treturn entities.reduce(\n\t\t( acc, breakpoint ) => {\n\t\t\treturn {\n\t\t\t\t...acc,\n\t\t\t\t[ breakpoint.id ]: breakpoint,\n\t\t\t};\n\t\t},\n\t\t{} as State[ 'entities' ]\n\t);\n}\n","import { slice } from '../store';\nimport { __dispatch } from '@elementor/store';\nimport { Breakpoint, ExtendedWindow } from '../types';\nimport { __privateListenTo as listenTo, v1ReadyEvent, windowEvent } from '@elementor/editor-v1-adapters';\nimport { __ } from '@wordpress/i18n';\n\nexport default function syncStore() {\n\tsyncInitialization();\n\tsyncOnChange();\n}\n\nfunction syncInitialization() {\n\tconst { init } = slice.actions;\n\n\tlistenTo( v1ReadyEvent(), () => {\n\t\t__dispatch(\n\t\t\tinit( {\n\t\t\t\tentities: getBreakpoints(),\n\t\t\t\tactiveId: getActiveBreakpoint(),\n\t\t\t} )\n\t\t);\n\t} );\n}\n\nfunction syncOnChange() {\n\tconst { activateBreakpoint } = slice.actions;\n\n\tlistenTo( deviceModeChangeEvent(), () => {\n\t\tconst activeBreakpoint = getActiveBreakpoint();\n\n\t\t__dispatch( activateBreakpoint( activeBreakpoint ) );\n\t} );\n}\n\nfunction getBreakpoints() {\n\tconst { breakpoints } = ( window as unknown as ExtendedWindow ).elementor?.config?.responsive || {};\n\n\tif ( ! breakpoints ) {\n\t\treturn [];\n\t}\n\n\tconst entities = Object.entries( breakpoints )\n\t\t.filter( ( [ , breakpoint ] ) => breakpoint.is_enabled )\n\t\t.map( ( [ id, { value, direction, label } ] ) => {\n\t\t\treturn {\n\t\t\t\tid,\n\t\t\t\tlabel,\n\t\t\t\twidth: value,\n\t\t\t\ttype: direction === 'min' ? 'min-width' : 'max-width',\n\t\t\t} as Breakpoint;\n\t\t} );\n\n\t// Desktop breakpoint is not included in V1 config.\n\tentities.push( {\n\t\tid: 'desktop',\n\t\tlabel: __( 'Desktop', 'elementor' ),\n\t} );\n\n\treturn entities;\n}\n\nfunction getActiveBreakpoint() {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\treturn extendedWindow.elementor?.channels?.deviceMode?.request?.( 'currentMode' ) || null;\n}\n\nfunction deviceModeChangeEvent() {\n\treturn windowEvent( 'elementor/device-mode/change' );\n}\n","import { slice } from './store';\nimport syncStore from './sync/sync-store';\nimport { injectIntoResponsive } from '@elementor/editor-app-bar';\nimport BreakpointsSwitcher from './components/breakpoints-switcher';\nimport { __registerSlice } from '@elementor/store';\n\nexport default function init() {\n\tinitStore();\n\n\tregisterAppBarUI();\n}\n\nfunction initStore() {\n\t__registerSlice( slice );\n\n\tsyncStore();\n}\n\nfunction registerAppBarUI() {\n\tinjectIntoResponsive( {\n\t\tid: 'responsive-breakpoints-switcher',\n\t\tcomponent: BreakpointsSwitcher,\n\t\toptions: {\n\t\t\tpriority: 20, // After document indication.\n\t\t},\n\t} );\n}\n","import * as React from 'react';\nimport { __ } from '@wordpress/i18n';\nimport { BreakpointId, ExtendedWindow } from '../types';\nimport useBreakpoints from '../hooks/use-breakpoints';\nimport { Tab, Tabs, Tooltip as BaseTooltip, TooltipProps } from '@elementor/ui';\nimport {\n\tDesktopIcon,\n\tTabletPortraitIcon,\n\tMobilePortraitIcon,\n\tWidescreenIcon,\n\tLaptopIcon,\n\tTabletLandscapeIcon,\n\tMobileLandscapeIcon,\n} from '@elementor/icons';\nimport useBreakpointsActions from '../hooks/use-breakpoints-actions';\n\nexport default function BreakpointsSwitcher() {\n\tconst { all, active } = useBreakpoints();\n\tconst { activate } = useBreakpointsActions();\n\n\tif ( ! all.length || ! active ) {\n\t\treturn null;\n\t}\n\n\tconst onChange = ( _: unknown, value: BreakpointId ) => {\n\t\tconst extendedWindow = window as unknown as ExtendedWindow;\n\t\tconst config = extendedWindow?.elementor?.editorEvents?.config;\n\n\t\tif ( config ) {\n\t\t\textendedWindow.elementor.editorEvents.dispatchEvent( config.names.topBar.responsiveControls, {\n\t\t\t\tlocation: config.locations.topBar,\n\t\t\t\tsecondaryLocation: config.secondaryLocations.responsiveControls,\n\t\t\t\ttrigger: config.triggers.click,\n\t\t\t\telement: config.elements.buttonIcon,\n\t\t\t\tmode: value,\n\t\t\t} );\n\t\t}\n\n\t\tactivate( value );\n\t};\n\n\treturn (\n\t\t<Tabs\n\t\t\ttextColor=\"inherit\"\n\t\t\tindicatorColor=\"secondary\"\n\t\t\tvalue={ active.id }\n\t\t\tonChange={ onChange }\n\t\t\taria-label={ __( 'Switch Device', 'elementor' ) }\n\t\t\tsx={ {\n\t\t\t\t'& .MuiTabs-indicator': {\n\t\t\t\t\tbackgroundColor: 'text.primary',\n\t\t\t\t},\n\t\t\t} }\n\t\t>\n\t\t\t{ all.map( ( { id, label, type, width } ) => {\n\t\t\t\tconst Icon = iconsMap[ id ];\n\n\t\t\t\tconst title = labelsMap[ type || 'default' ]\n\t\t\t\t\t.replace( '%s', label )\n\t\t\t\t\t.replace( '%d', width?.toString() || '' );\n\n\t\t\t\treturn (\n\t\t\t\t\t<Tab\n\t\t\t\t\t\tvalue={ id }\n\t\t\t\t\t\tkey={ id }\n\t\t\t\t\t\taria-label={ title }\n\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t<Tooltip title={ title }>\n\t\t\t\t\t\t\t\t<Icon />\n\t\t\t\t\t\t\t</Tooltip>\n\t\t\t\t\t\t}\n\t\t\t\t\t\tsx={ { minWidth: 'auto' } }\n\t\t\t\t\t\tdata-testid={ `switch-device-to-${ id }` }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} ) }\n\t\t</Tabs>\n\t);\n}\n\nfunction Tooltip( props: TooltipProps ) {\n\treturn (\n\t\t<BaseTooltip\n\t\t\tPopperProps={ {\n\t\t\t\tsx: {\n\t\t\t\t\t'&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom': {\n\t\t\t\t\t\tmt: 2.5,\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t} }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nconst iconsMap = {\n\twidescreen: WidescreenIcon,\n\tdesktop: DesktopIcon,\n\tlaptop: LaptopIcon,\n\ttablet_extra: TabletLandscapeIcon,\n\ttablet: TabletPortraitIcon,\n\tmobile_extra: MobileLandscapeIcon,\n\tmobile: MobilePortraitIcon,\n};\n\nconst labelsMap = {\n\tdefault: '%s',\n\t// translators: %s: Breakpoint label, %d: Breakpoint size.\n\t'min-width': __( '%s (%dpx and up)', 'elementor' ),\n\n\t// translators: %s: Breakpoint label, %d: Breakpoint size.\n\t'max-width': __( '%s (up to %dpx)', 'elementor' ),\n} as const;\n","import { __useSelector as useSelector } from '@elementor/store';\nimport { selectActiveBreakpoint, selectSortedBreakpoints } from '../store/selectors';\n\nexport default function useBreakpoints() {\n\tconst all = useSelector( selectSortedBreakpoints );\n\tconst active = useSelector( selectActiveBreakpoint );\n\n\treturn {\n\t\tall,\n\t\tactive,\n\t};\n}\n","import { slice } from './index';\nimport { Breakpoint } from '../types';\nimport { __createSelector, SliceState } from '@elementor/store';\n\ntype State = SliceState< typeof slice >;\n\nexport const selectEntities = ( state: State ) => state.breakpoints.entities;\nexport const selectActiveId = ( state: State ) => state.breakpoints.activeId;\n\nexport const selectActiveBreakpoint = __createSelector( selectEntities, selectActiveId, ( entities, activeId ) =>\n\tactiveId && entities[ activeId ] ? entities[ activeId ] : null\n);\n\nexport const selectSortedBreakpoints = __createSelector( selectEntities, ( entities ) => {\n\tconst byWidth = ( a: Breakpoint, b: Breakpoint ) => {\n\t\treturn a.width && b.width ? b.width - a.width : 0;\n\t};\n\n\tconst all = Object.values( entities );\n\n\tconst defaults = all.filter( ( breakpoint ) => ! breakpoint.width ); // AKA Desktop.\n\tconst minWidth = all.filter( ( breakpoint ) => breakpoint.type === 'min-width' );\n\tconst maxWidth = all.filter( ( breakpoint ) => breakpoint.type === 'max-width' );\n\n\t// Sort by size, big to small.\n\treturn [ ...minWidth.sort( byWidth ), ...defaults, ...maxWidth.sort( byWidth ) ];\n} );\n","import { useCallback } from 'react';\nimport { BreakpointId } from '../types';\nimport { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\n\nexport default function useBreakpointsActions() {\n\tconst activate = useCallback( ( device: BreakpointId ) => {\n\t\treturn runCommand( 'panel/change-device-mode', { device } );\n\t}, [] );\n\n\treturn {\n\t\tactivate,\n\t};\n}\n","import init from './init';\n\ninit();\n"],"mappings":"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","names":["init","__","__"]}

package/package.json

@@ -1,46 +1,46 @@
 {
-	"name": "@elementor/editor-responsive",
-	"version": "0.10.5",
-	"private": false,
-	"author": "Elementor Team",
-	"homepage": "https://elementor.com/",
-	"license": "GPL-3.0-or-later",
-	"main": "dist/index.js",
-	"module": "dist/index.mjs",
-	"types": "dist/index.d.ts",
-	"exports": {
-		".": {
-			"import": "./dist/index.mjs",
-			"require": "./dist/index.js",
-			"types": "./dist/index.d.ts"
-		},
-		"./package.json": "./package.json"
-	},
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/elementor/elementor-packages.git",
-		"directory": "packages/core/editor-responsive"
-	},
-	"bugs": {
-		"url": "https://github.com/elementor/elementor-packages/issues"
-	},
-	"publishConfig": {
-		"access": "public"
-	},
-	"scripts": {
-		"build": "tsup --config=../../tsup.build.ts",
-		"dev": "tsup --config=../../tsup.dev.ts"
-	},
-	"dependencies": {
-		"@elementor/editor-app-bar": "^0.14.5",
-		"@elementor/editor-v1-adapters": "^0.7.0",
-		"@elementor/icons": "^0.8.1",
-		"@elementor/store": "^0.8.3",
-		"@elementor/ui": "^1.4.61",
-		"@wordpress/i18n": "^4.45.0"
-	},
-	"peerDependencies": {
-		"react": "^18.3.1"
-	},
-	"gitHead": "ea48212f4a9084fa323c3e70af093c5c0f6aa2d1"
+  "name": "@elementor/editor-responsive",
+  "version": "0.10.6",
+  "private": false,
+  "author": "Elementor Team",
+  "homepage": "https://elementor.com/",
+  "license": "GPL-3.0-or-later",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/elementor/elementor-packages.git",
+    "directory": "packages/core/editor-responsive"
+  },
+  "bugs": {
+    "url": "https://github.com/elementor/elementor-packages/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsup --config=../../tsup.build.ts",
+    "dev": "tsup --config=../../tsup.dev.ts"
+  },
+  "dependencies": {
+    "@elementor/editor-app-bar": "^0.14.6",
+    "@elementor/editor-v1-adapters": "^0.8.0",
+    "@elementor/icons": "^0.8.2",
+    "@elementor/store": "^0.8.4",
+    "@elementor/ui": "^1.4.61",
+    "@wordpress/i18n": "^4.45.0"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1"
+  },
+  "gitHead": "10fd8663495a9ced2521f27a74879684ed0cf322"
 }

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

@@ -6,9 +6,11 @@ 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(),
-} ) );
+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', () => {
@@ -32,10 +34,12 @@ describe( '@elementor/editor-responsive - Breakpoints Switcher', () => {
 		// Arrange.
 		jest.mocked( useBreakpoints ).mockReturnValue( {
 			active: null,
-			all: [ {
-				id: 'desktop',
-				label: 'Desktop',
-			} ],
+			all: [
+				{
+					id: 'desktop',
+					label: 'Desktop',
+				},
+			],
 		} );
 
 		// Act.

package/src/components/breakpoints-switcher.tsx

@@ -27,16 +27,13 @@ export default function BreakpointsSwitcher() {
 		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,
-				},
-			);
+			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 );
@@ -55,41 +52,45 @@ export default function BreakpointsSwitcher() {
 				},
 			} }
 		>
-			{
-				all.map( ( { id, label, type, width } ) => {
-					const Icon = iconsMap[ id ];
+			{ all.map( ( { id, label, type, width } ) => {
+				const Icon = iconsMap[ id ];
 
-					const title = labelsMap[ type || 'default' ]
-						.replace( '%s', label )
-						.replace( '%d', width?.toString() || '' );
+				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 }` }
-						/>
-					);
-				} )
-			}
+				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,
+	return (
+		<BaseTooltip
+			PopperProps={ {
+				sx: {
+					'&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom': {
+						mt: 2.5,
+					},
 				},
-			},
-		} }
-		{ ...props }
-	/>;
+			} }
+			{ ...props }
+		/>
+	);
 }
 
 const iconsMap = {

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

@@ -15,9 +15,6 @@ describe( '@elementor/editor-responsive - useBreakpointsActions', () => {
 
 		// Assert.
 		expect( jest.mocked( runCommand ) ).toHaveBeenCalledTimes( 1 );
-		expect( jest.mocked( runCommand ) ).toHaveBeenCalledWith(
-			'panel/change-device-mode',
-			{ device: 'tablet' }
-		);
+		expect( jest.mocked( runCommand ) ).toHaveBeenCalledWith( 'panel/change-device-mode', { device: 'tablet' } );
 	} );
 } );

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

@@ -3,14 +3,21 @@ 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';
+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>>;
+	let store: Store< SliceState< typeof slice > >;
 
 	beforeEach( () => {
 		__registerSlice( slice );
@@ -19,15 +26,17 @@ describe( '@elementor/editor-responsive - useBreakpoints', () => {
 
 	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' },
-			],
-		} ) );
+		__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 );
@@ -43,13 +52,15 @@ describe( '@elementor/editor-responsive - useBreakpoints', () => {
 
 	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 },
-			],
-		} ) );
+		__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 );
@@ -64,11 +75,9 @@ describe( '@elementor/editor-responsive - useBreakpoints', () => {
 	} );
 } );
 
-function renderHookWithStore<T>( hook: () => T, store: Store ) {
-	const wrapper = ( { children }: PropsWithChildren<unknown> ) => (
-		<StoreProvider store={ store }>
-			{ children }
-		</StoreProvider>
+function renderHookWithStore< T >( hook: () => T, store: Store ) {
+	const wrapper = ( { children }: PropsWithChildren< unknown > ) => (
+		<StoreProvider store={ store }>{ children }</StoreProvider>
 	);
 
 	return renderHook( hook, { wrapper } );

package/src/store/index.ts

@@ -2,11 +2,11 @@ import { __createSlice, PayloadAction } from '@elementor/store';
 import { Breakpoint, BreakpointId } from '../types';
 
 export type State = {
-	entities: Record<BreakpointId, Breakpoint>,
-	activeId: BreakpointId | null,
-}
+	entities: Record< BreakpointId, Breakpoint >;
+	activeId: BreakpointId | null;
+};
 const initialState: State = {
-	entities: {} as State['entities'],
+	entities: {} as State[ 'entities' ],
 	activeId: null,
 };
 
@@ -14,15 +14,18 @@ export const slice = __createSlice( {
 	name: 'breakpoints',
 	initialState,
 	reducers: {
-		init( state, action: PayloadAction<{
-			entities: Breakpoint[],
-			activeId: State['activeId'],
-		}> ) {
+		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> ) {
+		activateBreakpoint( state, action: PayloadAction< BreakpointId > ) {
 			if ( state.entities[ action.payload ] ) {
 				state.activeId = action.payload;
 			}
@@ -31,10 +34,13 @@ export const slice = __createSlice( {
 } );
 
 function normalizeEntities( entities: Breakpoint[] ) {
-	return entities.reduce( ( acc, breakpoint ) => {
-		return {
-			...acc,
-			[ breakpoint.id ]: breakpoint,
-		};
-	}, {} as State['entities'] );
+	return entities.reduce(
+		( acc, breakpoint ) => {
+			return {
+				...acc,
+				[ breakpoint.id ]: breakpoint,
+			};
+		},
+		{} as State[ 'entities' ]
+	);
 }

package/src/store/selectors.ts

@@ -2,37 +2,26 @@ import { slice } from './index';
 import { Breakpoint } from '../types';
 import { __createSelector, SliceState } from '@elementor/store';
 
-type State = SliceState<typeof slice>;
+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 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;
-		};
+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 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' );
+	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 ),
-		];
-	},
-);
+	// Sort by size, big to small.
+	return [ ...minWidth.sort( byWidth ), ...defaults, ...maxWidth.sort( byWidth ) ];
+} );