@elementor/editor-responsive 0.9.0 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/index.js +2 -1
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +2 -1
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +2 -2
  7. package/src/components/breakpoints-switcher.tsx +1 -0
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [0.10.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-responsive@0.9.0...@elementor/editor-responsive@0.10.0) (2024-06-16)
7
+
8
+
9
+ ### Features
10
+
11
+ * **editor-app-bar:** add value to each responsive device switcher [ED-14367] ([#185](https://github.com/elementor/elementor-packages/issues/185)) ([4df9deb](https://github.com/elementor/elementor-packages/commit/4df9deb57d71e43aadbcd311be178bf395ac1cdc))
12
+
13
+
14
+
15
+
16
+
6
17
  # [0.9.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-responsive@0.8.21...@elementor/editor-responsive@0.9.0) (2024-06-04)
7
18
 
8
19
 
package/dist/index.js CHANGED
@@ -220,7 +220,8 @@ function BreakpointsSwitcher() {
220
220
  key: id,
221
221
  "aria-label": title,
222
222
  icon: /* @__PURE__ */ React.createElement(Tooltip, { title }, /* @__PURE__ */ React.createElement(Icon, null)),
223
- sx: { minWidth: "auto" }
223
+ sx: { minWidth: "auto" },
224
+ "data-testid": `switch-device-to-${id}`
224
225
  }
225
226
  );
226
227
  })
package/dist/index.js.map CHANGED
@@ -1 +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/>\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":["import_store","init","listenTo","import_i18n","import_store","import_store","useSelector","import_editor_v1_adapters","runCommand","BaseTooltip","import_store"]}
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":";;;;;;;;;;;;;;;;;;;;;;;;;AAAA,mBAA6C;AAO7C,IAAM,eAAsB;AAAA,EAC3B,UAAU,CAAC;AAAA,EACX,UAAU;AACX;AAEO,IAAM,YAAQ,4BAAe;AAAA,EACnC,MAAM;AAAA,EACN;AAAA,EACA,UAAU;AAAA,IACT,KAAM,OAAO,QAGR;AACJ,YAAM,WAAW,OAAO,QAAQ;AAChC,YAAM,WAAW,kBAAmB,OAAO,QAAQ,QAAS;AAAA,IAC7D;AAAA,IAEA,mBAAoB,OAAO,QAAsC;AAChE,UAAK,MAAM,SAAU,OAAO,OAAQ,GAAI;AACvC,cAAM,WAAW,OAAO;AAAA,MACzB;AAAA,IACD;AAAA,EACD;AACD,CAAE;AAEF,SAAS,kBAAmB,UAAyB;AACpD,SAAO,SAAS,OAAQ,CAAE,KAAK,eAAgB;AAC9C,WAAO;AAAA,MACN,GAAG;AAAA,MACH,CAAE,WAAW,EAAG,GAAG;AAAA,IACpB;AAAA,EACD,GAAG,CAAC,CAAuB;AAC5B;;;ACtCA,IAAAA,gBAA2B;AAE3B,gCAAyE;AACzE,kBAAmB;AAEJ,SAAR,YAA6B;AACnC,qBAAmB;AACnB,eAAa;AACd;AAEA,SAAS,qBAAqB;AAC7B,QAAM,EAAE,MAAAC,MAAK,IAAI,MAAM;AAEvB,gCAAAC;AAAA,QACC,wCAAa;AAAA,IACb,MAAM;AACL,oCAAYD,MAAM;AAAA,QACjB,UAAU,eAAe;AAAA,QACzB,UAAU,oBAAoB;AAAA,MAC/B,CAAE,CAAE;AAAA,IACL;AAAA,EACD;AACD;AAEA,SAAS,eAAe;AACvB,QAAM,EAAE,mBAAmB,IAAI,MAAM;AAErC,gCAAAC;AAAA,IACC,sBAAsB;AAAA,IACtB,MAAM;AACL,YAAM,mBAAmB,oBAAoB;AAE7C,oCAAY,mBAAoB,gBAAiB,CAAE;AAAA,IACpD;AAAA,EACD;AACD;AAEA,SAAS,iBAAiB;AACzB,QAAM,EAAE,YAAY,IAAM,OAAsC,WAAW,QAAQ,cAAc,CAAC;AAElG,MAAK,CAAE,aAAc;AACpB,WAAO,CAAC;AAAA,EACT;AAEA,QAAM,WAAW,OACf,QAAS,WAAY,EACrB,OAAQ,CAAE,CAAE,EAAE,UAAW,MAAO,WAAW,UAAW,EACtD,IAAK,CAAE,CAAE,IAAI,EAAE,OAAO,WAAW,MAAM,CAAE,MAAO;AAChD,WAAO;AAAA,MACN;AAAA,MACA;AAAA,MACA,OAAO;AAAA,MACP,MAAM,cAAc,QAAQ,cAAc;AAAA,IAC3C;AAAA,EACD,CAAE;AAGH,WAAS,KAAM;AAAA,IACd,IAAI;AAAA,IACJ,WAAO,gBAAI,WAAW,WAAY;AAAA,EACnC,CAAE;AAEF,SAAO;AACR;AAEA,SAAS,sBAAsB;AAC9B,QAAM,iBAAiB;AAEvB,SAAO,eAAe,WAAW,UAAU,YAAY,UAAW,aAAc,KAAK;AACtF;AAEA,SAAS,wBAAwB;AAChC,aAAO,uCAAa,8BAA+B;AACpD;;;ACxEA,4BAAqC;;;ACFrC,YAAuB;AACvB,IAAAC,eAAmB;;;ACDnB,IAAAC,gBAA6C;;;ACE7C,IAAAC,gBAA6C;AAItC,IAAM,iBAAiB,CAAE,UAAkB,MAAM,YAAY;AAC7D,IAAM,iBAAiB,CAAE,UAAkB,MAAM,YAAY;AAE7D,IAAM,6BAAyB;AAAA,EACrC;AAAA,EACA;AAAA,EACA,CAAE,UAAU,aAAc,YAAY,SAAU,QAAS,IACtD,SAAU,QAAS,IACnB;AACJ;AAEO,IAAM,8BAA0B;AAAA,EACtC;AAAA,EACA,CAAE,aAAc;AACf,UAAM,UAAU,CAAE,GAAe,MAAmB;AACnD,aAAS,EAAE,SAAS,EAAE,QAAU,EAAE,QAAQ,EAAE,QAAQ;AAAA,IACrD;AAEA,UAAM,MAAM,OAAO,OAAQ,QAAS;AAEpC,UAAM,WAAW,IAAI,OAAQ,CAAE,eAAgB,CAAE,WAAW,KAAM;AAClE,UAAM,WAAW,IAAI,OAAQ,CAAE,eAAgB,WAAW,SAAS,WAAY;AAC/E,UAAM,WAAW,IAAI,OAAQ,CAAE,eAAgB,WAAW,SAAS,WAAY;AAG/E,WAAO;AAAA,MACN,GAAG,SAAS,KAAM,OAAQ;AAAA,MAC1B,GAAG;AAAA,MACH,GAAG,SAAS,KAAM,OAAQ;AAAA,IAC3B;AAAA,EACD;AACD;;;ADlCe,SAAR,iBAAkC;AACxC,QAAM,UAAM,cAAAC,eAAa,uBAAwB;AACjD,QAAM,aAAS,cAAAA,eAAa,sBAAuB;AAEnD,SAAO;AAAA,IACN;AAAA,IACA;AAAA,EACD;AACD;;;ADPA,gBAAgE;AAChE,mBAQO;;;AGbP,mBAA4B;AAE5B,IAAAC,6BAAkD;AAEnC,SAAR,wBAAyC;AAC/C,QAAM,eAAW,0BAAa,CAAE,WAA0B;AACzD,eAAO,2BAAAC,qBAAY,4BAA4B,EAAE,OAAO,CAAE;AAAA,EAC3D,GAAG,CAAC,CAAE;AAEN,SAAO;AAAA,IACN;AAAA,EACD;AACD;;;AHIe,SAAR,sBAAuC;AAC7C,QAAM,EAAE,KAAK,OAAO,IAAI,eAAe;AACvC,QAAM,EAAE,SAAS,IAAI,sBAAsB;AAE3C,MAAK,CAAE,IAAI,UAAU,CAAE,QAAS;AAC/B,WAAO;AAAA,EACR;AAEA,QAAM,WAAW,CAAE,GAAY,UAAyB;AACvD,UAAM,iBAAiB;AACvB,UAAM,SAAS,gBAAgB,WAAW,cAAc;AAExD,QAAK,QAAS;AACb,qBAAe,UAAU,aAAa;AAAA,QACrC,OAAO,MAAM,OAAO;AAAA,QACpB;AAAA,UACC,UAAU,OAAO,UAAU;AAAA,UAC3B,mBAAmB,OAAO,mBAAmB;AAAA,UAC7C,SAAS,OAAO,SAAS;AAAA,UACzB,SAAS,OAAO,SAAS;AAAA,UACzB,MAAM;AAAA,QACP;AAAA,MACD;AAAA,IACD;AAEA,aAAU,KAAM;AAAA,EACjB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAU;AAAA,MACV,gBAAe;AAAA,MACf,OAAQ,OAAO;AAAA,MACf;AAAA,MACA,kBAAa,iBAAI,iBAAiB,WAAY;AAAA,MAC9C,IAAK;AAAA,QACJ,wBAAwB;AAAA,UACvB,iBAAiB;AAAA,QAClB;AAAA,MACD;AAAA;AAAA,IAGC,IAAI,IAAK,CAAE,EAAE,IAAI,OAAO,MAAM,MAAM,MAAO;AAC1C,YAAM,OAAO,SAAU,EAAG;AAE1B,YAAM,QAAQ,UAAW,QAAQ,SAAU,EACzC,QAAS,MAAM,KAAM,EACrB,QAAS,MAAM,OAAO,SAAS,KAAK,EAAG;AAEzC,aACC;AAAA,QAAC;AAAA;AAAA,UAAI,OAAQ;AAAA,UACZ,KAAM;AAAA,UACN,cAAa;AAAA,UACb,MAAO,oCAAC,WAAQ,SAAgB,oCAAC,UAAK,CAAE;AAAA,UACxC,IAAK,EAAE,UAAU,OAAO;AAAA,UACxB,eAAc,oBAAqB,EAAG;AAAA;AAAA,MACvC;AAAA,IAEF,CAAE;AAAA,EAEJ;AAGF;AAEA,SAAS,QAAS,OAAsB;AACvC,SAAO;AAAA,IAAC,UAAAC;AAAA,IAAA;AAAA,MACP,aAAc;AAAA,QACb,IAAI;AAAA,UACH,6EAA6E;AAAA,YAC5E,IAAI;AAAA,UACL;AAAA,QACD;AAAA,MACD;AAAA,MACE,GAAG;AAAA;AAAA,EACN;AACD;AAEA,IAAM,WAAW;AAAA,EAChB,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,QAAQ;AACT;AAEA,IAAM,YAAY;AAAA,EACjB,SAAS;AAAA;AAAA,EAET,iBAAa,iBAAI,oBAAoB,WAAY;AAAA;AAAA,EAGjD,iBAAa,iBAAI,mBAAmB,WAAY;AACjD;;;AD3GA,IAAAC,gBAAgC;AAEjB,SAAR,OAAwB;AAC9B,YAAU;AAEV,mBAAiB;AAClB;AAEA,SAAS,YAAY;AACpB,qCAAiB,KAAM;AAEvB,YAAU;AACX;AAEA,SAAS,mBAAmB;AAC3B,kDAAsB;AAAA,IACrB,IAAI;AAAA,IACJ,WAAW;AAAA,IACX,SAAS;AAAA,MACR,UAAU;AAAA;AAAA,IACX;AAAA,EACD,CAAE;AACH;;;AKxBA,KAAK;","names":["import_store","init","listenTo","import_i18n","import_store","import_store","useSelector","import_editor_v1_adapters","runCommand","BaseTooltip","import_store"]}
package/dist/index.mjs CHANGED
@@ -204,7 +204,8 @@ function BreakpointsSwitcher() {
204
204
  key: id,
205
205
  "aria-label": title,
206
206
  icon: /* @__PURE__ */ React.createElement(Tooltip, { title }, /* @__PURE__ */ React.createElement(Icon, null)),
207
- sx: { minWidth: "auto" }
207
+ sx: { minWidth: "auto" },
208
+ "data-testid": `switch-device-to-${id}`
208
209
  }
209
210
  );
210
211
  })
package/dist/index.mjs.map CHANGED
@@ -1 +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/>\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","__","__"]}
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","__","__"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elementor/editor-responsive",
3
- "version": "0.9.0",
3
+ "version": "0.10.0",
4
4
  "private": false,
5
5
  "author": "Elementor Team",
6
6
  "homepage": "https://elementor.com/",
@@ -45,5 +45,5 @@
45
45
  "elementor": {
46
46
  "type": "extension"
47
47
  },
48
- "gitHead": "d1675ce63120e7854ff74f8611e41011f97a96a0"
48
+ "gitHead": "0699daadbf92e177bd12619b4f03ed4aba581017"
49
49
  }
package/src/components/breakpoints-switcher.tsx CHANGED
@@ -69,6 +69,7 @@ export default function BreakpointsSwitcher() {
69
69
  aria-label={ title }
70
70
  icon={ <Tooltip title={ title }><Icon /></Tooltip> }
71
71
  sx={ { minWidth: 'auto' } }
72
+ data-testid={ `switch-device-to-${ id }` }
72
73
  />
73
74
  );
74
75
  } )