@elementor/editor-responsive 0.2.2 → 0.3.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.3.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-responsive@0.2.2...@elementor/editor-responsive@0.3.0) (2023-05-21)
+
+
+### Features
+
+* **locations:** change api to support props for slots [ED-10730] ([#38](https://github.com/elementor/elementor-packages/issues/38)) ([44bec3c](https://github.com/elementor/elementor-packages/commit/44bec3cda1020037ba7105c6f05ce4baa8e3b376))
+
+
+
+
+
 ## 0.2.2 (2023-05-16)
 
 

package/dist/index.js

@@ -239,7 +239,7 @@ function initStore() {
 }
 function registerAppBarUI() {
   (0, import_editor_app_bar.injectIntoResponsive)({
-    name: "responsive-breakpoints-switcher",
+    id: "responsive-breakpoints-switcher",
     filler: BreakpointsSwitcher,
     options: {
       priority: 20

package/dist/index.js.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 { addSlice, 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 function createSlice() {\n\treturn addSlice( {\n\t\tname: 'breakpoints',\n\t\tinitialState,\n\t\treducers: {\n\t\t\tinit( state, action: PayloadAction<{\n\t\t\t\tentities: Breakpoint[],\n\t\t\t\tactiveId: State['activeId'],\n\t\t\t}> ) {\n\t\t\t\tstate.activeId = action.payload.activeId;\n\t\t\t\tstate.entities = normalizeEntities( action.payload.entities );\n\t\t\t},\n\n\t\t\tactivateBreakpoint( state, action: PayloadAction<BreakpointId> ) {\n\t\t\t\tif ( state.entities[ action.payload ] ) {\n\t\t\t\t\tstate.activeId = action.payload;\n\t\t\t\t}\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 { dispatch } from '@elementor/store';\nimport { Breakpoint, ExtendedWindow, Slice } from '../types';\nimport { listenTo, v1ReadyEvent, windowEvent } from '@elementor/editor-v1-adapters';\nimport { __ } from '@wordpress/i18n';\n\nexport default function syncStore( slice: Slice ) {\n\tsyncInitialization( slice );\n\tsyncOnChange( slice );\n}\n\nfunction syncInitialization( slice: Slice ) {\n\tconst { init } = slice.actions;\n\n\tlistenTo(\n\t\tv1ReadyEvent(),\n\t\t() => {\n\t\t\tdispatch( 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( slice: Slice ) {\n\tconst { activateBreakpoint } = slice.actions;\n\n\tlistenTo(\n\t\tdeviceModeChangeEvent(),\n\t\t() => {\n\t\t\tconst activeBreakpoint = getActiveBreakpoint();\n\n\t\t\tdispatch( 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 { createSlice } from './store';\nimport syncStore from './sync/sync-store';\nimport { injectIntoResponsive } from '@elementor/editor-app-bar';\nimport BreakpointsSwitcher from './components/breakpoints-switcher';\n\nexport default function init() {\n\tinitStore();\n\n\tregisterAppBarUI();\n}\n\nfunction initStore() {\n\tconst slice = createSlice();\n\n\tsyncStore( slice );\n}\n\nfunction registerAppBarUI() {\n\tinjectIntoResponsive( {\n\t\tname: 'responsive-breakpoints-switcher',\n\t\tfiller: 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 } 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 ) => activate( value );\n\n\treturn (\n\t\t<Tabs value={ active.id } onChange={ onChange } aria-label={ __( 'Switch Device', 'elementor' ) }>\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/>\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: 7,\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 } 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 { Breakpoint, Slice } from '../types';\nimport { createSelector, SliceState } from '@elementor/store';\n\ntype State = SliceState<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 { 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":["import_store","init","import_i18n","import_store","import_store","import_editor_v1_adapters","BaseTooltip"]}
+{"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 { addSlice, 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 function createSlice() {\n\treturn addSlice( {\n\t\tname: 'breakpoints',\n\t\tinitialState,\n\t\treducers: {\n\t\t\tinit( state, action: PayloadAction<{\n\t\t\t\tentities: Breakpoint[],\n\t\t\t\tactiveId: State['activeId'],\n\t\t\t}> ) {\n\t\t\t\tstate.activeId = action.payload.activeId;\n\t\t\t\tstate.entities = normalizeEntities( action.payload.entities );\n\t\t\t},\n\n\t\t\tactivateBreakpoint( state, action: PayloadAction<BreakpointId> ) {\n\t\t\t\tif ( state.entities[ action.payload ] ) {\n\t\t\t\t\tstate.activeId = action.payload;\n\t\t\t\t}\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 { dispatch } from '@elementor/store';\nimport { Breakpoint, ExtendedWindow, Slice } from '../types';\nimport { listenTo, v1ReadyEvent, windowEvent } from '@elementor/editor-v1-adapters';\nimport { __ } from '@wordpress/i18n';\n\nexport default function syncStore( slice: Slice ) {\n\tsyncInitialization( slice );\n\tsyncOnChange( slice );\n}\n\nfunction syncInitialization( slice: Slice ) {\n\tconst { init } = slice.actions;\n\n\tlistenTo(\n\t\tv1ReadyEvent(),\n\t\t() => {\n\t\t\tdispatch( 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( slice: Slice ) {\n\tconst { activateBreakpoint } = slice.actions;\n\n\tlistenTo(\n\t\tdeviceModeChangeEvent(),\n\t\t() => {\n\t\t\tconst activeBreakpoint = getActiveBreakpoint();\n\n\t\t\tdispatch( 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 { createSlice } from './store';\nimport syncStore from './sync/sync-store';\nimport { injectIntoResponsive } from '@elementor/editor-app-bar';\nimport BreakpointsSwitcher from './components/breakpoints-switcher';\n\nexport default function init() {\n\tinitStore();\n\n\tregisterAppBarUI();\n}\n\nfunction initStore() {\n\tconst slice = createSlice();\n\n\tsyncStore( slice );\n}\n\nfunction registerAppBarUI() {\n\tinjectIntoResponsive( {\n\t\tid: 'responsive-breakpoints-switcher',\n\t\tfiller: 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 } 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 ) => activate( value );\n\n\treturn (\n\t\t<Tabs value={ active.id } onChange={ onChange } aria-label={ __( 'Switch Device', 'elementor' ) }>\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/>\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: 7,\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 } 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 { Breakpoint, Slice } from '../types';\nimport { createSelector, SliceState } from '@elementor/store';\n\ntype State = SliceState<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 { 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":["import_store","init","import_i18n","import_store","import_store","import_editor_v1_adapters","BaseTooltip"]}

package/dist/index.mjs

@@ -223,7 +223,7 @@ function initStore() {
 }
 function registerAppBarUI() {
   injectIntoResponsive({
-    name: "responsive-breakpoints-switcher",
+    id: "responsive-breakpoints-switcher",
     filler: BreakpointsSwitcher,
     options: {
       priority: 20

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 { addSlice, 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 function createSlice() {\n\treturn addSlice( {\n\t\tname: 'breakpoints',\n\t\tinitialState,\n\t\treducers: {\n\t\t\tinit( state, action: PayloadAction<{\n\t\t\t\tentities: Breakpoint[],\n\t\t\t\tactiveId: State['activeId'],\n\t\t\t}> ) {\n\t\t\t\tstate.activeId = action.payload.activeId;\n\t\t\t\tstate.entities = normalizeEntities( action.payload.entities );\n\t\t\t},\n\n\t\t\tactivateBreakpoint( state, action: PayloadAction<BreakpointId> ) {\n\t\t\t\tif ( state.entities[ action.payload ] ) {\n\t\t\t\t\tstate.activeId = action.payload;\n\t\t\t\t}\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 { dispatch } from '@elementor/store';\nimport { Breakpoint, ExtendedWindow, Slice } from '../types';\nimport { listenTo, v1ReadyEvent, windowEvent } from '@elementor/editor-v1-adapters';\nimport { __ } from '@wordpress/i18n';\n\nexport default function syncStore( slice: Slice ) {\n\tsyncInitialization( slice );\n\tsyncOnChange( slice );\n}\n\nfunction syncInitialization( slice: Slice ) {\n\tconst { init } = slice.actions;\n\n\tlistenTo(\n\t\tv1ReadyEvent(),\n\t\t() => {\n\t\t\tdispatch( 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( slice: Slice ) {\n\tconst { activateBreakpoint } = slice.actions;\n\n\tlistenTo(\n\t\tdeviceModeChangeEvent(),\n\t\t() => {\n\t\t\tconst activeBreakpoint = getActiveBreakpoint();\n\n\t\t\tdispatch( 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 { createSlice } from './store';\nimport syncStore from './sync/sync-store';\nimport { injectIntoResponsive } from '@elementor/editor-app-bar';\nimport BreakpointsSwitcher from './components/breakpoints-switcher';\n\nexport default function init() {\n\tinitStore();\n\n\tregisterAppBarUI();\n}\n\nfunction initStore() {\n\tconst slice = createSlice();\n\n\tsyncStore( slice );\n}\n\nfunction registerAppBarUI() {\n\tinjectIntoResponsive( {\n\t\tname: 'responsive-breakpoints-switcher',\n\t\tfiller: 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 } 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 ) => activate( value );\n\n\treturn (\n\t\t<Tabs value={ active.id } onChange={ onChange } aria-label={ __( 'Switch Device', 'elementor' ) }>\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/>\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: 7,\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 } 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 { Breakpoint, Slice } from '../types';\nimport { createSelector, SliceState } from '@elementor/store';\n\ntype State = SliceState<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 { 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 { addSlice, 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 function createSlice() {\n\treturn addSlice( {\n\t\tname: 'breakpoints',\n\t\tinitialState,\n\t\treducers: {\n\t\t\tinit( state, action: PayloadAction<{\n\t\t\t\tentities: Breakpoint[],\n\t\t\t\tactiveId: State['activeId'],\n\t\t\t}> ) {\n\t\t\t\tstate.activeId = action.payload.activeId;\n\t\t\t\tstate.entities = normalizeEntities( action.payload.entities );\n\t\t\t},\n\n\t\t\tactivateBreakpoint( state, action: PayloadAction<BreakpointId> ) {\n\t\t\t\tif ( state.entities[ action.payload ] ) {\n\t\t\t\t\tstate.activeId = action.payload;\n\t\t\t\t}\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 { dispatch } from '@elementor/store';\nimport { Breakpoint, ExtendedWindow, Slice } from '../types';\nimport { listenTo, v1ReadyEvent, windowEvent } from '@elementor/editor-v1-adapters';\nimport { __ } from '@wordpress/i18n';\n\nexport default function syncStore( slice: Slice ) {\n\tsyncInitialization( slice );\n\tsyncOnChange( slice );\n}\n\nfunction syncInitialization( slice: Slice ) {\n\tconst { init } = slice.actions;\n\n\tlistenTo(\n\t\tv1ReadyEvent(),\n\t\t() => {\n\t\t\tdispatch( 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( slice: Slice ) {\n\tconst { activateBreakpoint } = slice.actions;\n\n\tlistenTo(\n\t\tdeviceModeChangeEvent(),\n\t\t() => {\n\t\t\tconst activeBreakpoint = getActiveBreakpoint();\n\n\t\t\tdispatch( 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 { createSlice } from './store';\nimport syncStore from './sync/sync-store';\nimport { injectIntoResponsive } from '@elementor/editor-app-bar';\nimport BreakpointsSwitcher from './components/breakpoints-switcher';\n\nexport default function init() {\n\tinitStore();\n\n\tregisterAppBarUI();\n}\n\nfunction initStore() {\n\tconst slice = createSlice();\n\n\tsyncStore( slice );\n}\n\nfunction registerAppBarUI() {\n\tinjectIntoResponsive( {\n\t\tid: 'responsive-breakpoints-switcher',\n\t\tfiller: 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 } 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 ) => activate( value );\n\n\treturn (\n\t\t<Tabs value={ active.id } onChange={ onChange } aria-label={ __( 'Switch Device', 'elementor' ) }>\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/>\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: 7,\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 } 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 { Breakpoint, Slice } from '../types';\nimport { createSelector, SliceState } from '@elementor/store';\n\ntype State = SliceState<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 { 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,6 +1,6 @@
 {
 	"name": "@elementor/editor-responsive",
-	"version": "0.2.2",
+	"version": "0.3.0",
 	"private": false,
 	"author": "Elementor Team",
 	"homepage": "https://elementor.com/",
@@ -32,7 +32,7 @@
 		"dev": "tsup --config=../../tsup.dev.ts"
 	},
 	"dependencies": {
-		"@elementor/editor-app-bar": "^0.3.0",
+		"@elementor/editor-app-bar": "^0.4.0",
 		"@elementor/editor-v1-adapters": "^0.2.0",
 		"@elementor/icons": "^0.2.1",
 		"@elementor/store": "^0.2.0",
@@ -45,5 +45,5 @@
 	"elementor": {
 		"type": "extension"
 	},
-	"gitHead": "ccd6099031737d52202ba98812e21d16fac4bef2"
+	"gitHead": "45afd449fda346eea0f8a431ebca7d6c1d518dd1"
 }

package/src/init.ts

@@ -17,7 +17,7 @@ function initStore() {
 
 function registerAppBarUI() {
 	injectIntoResponsive( {
-		name: 'responsive-breakpoints-switcher',
+		id: 'responsive-breakpoints-switcher',
 		filler: BreakpointsSwitcher,
 		options: {
 			priority: 20, // After document indication.