@elementor/editor-responsive 0.10.5 → 0.11.0

package/dist/index.mjs

@@ -1,269 +1,65 @@
-// src/store/index.ts
-import { __createSlice } from "@elementor/store";
-var initialState = {
-  entities: {},
-  activeId: null
-};
-var slice = __createSlice({
-  name: "breakpoints",
-  initialState,
-  reducers: {
-    init(state, action) {
-      state.activeId = action.payload.activeId;
-      state.entities = normalizeEntities(action.payload.entities);
-    },
-    activateBreakpoint(state, action) {
-      if (state.entities[action.payload]) {
-        state.activeId = action.payload;
-      }
-    }
-  }
-});
-function normalizeEntities(entities) {
-  return entities.reduce((acc, breakpoint) => {
-    return {
-      ...acc,
-      [breakpoint.id]: breakpoint
-    };
-  }, {});
-}
-
-// src/sync/sync-store.ts
-import { __dispatch } from "@elementor/store";
-import { __privateListenTo as listenTo, v1ReadyEvent, windowEvent } from "@elementor/editor-v1-adapters";
+// src/hooks/use-breakpoints.ts
 import { __ } from "@wordpress/i18n";
-function syncStore() {
-  syncInitialization();
-  syncOnChange();
-}
-function syncInitialization() {
-  const { init: init2 } = slice.actions;
-  listenTo(
-    v1ReadyEvent(),
-    () => {
-      __dispatch(init2({
-        entities: getBreakpoints(),
-        activeId: getActiveBreakpoint()
-      }));
-    }
-  );
-}
-function syncOnChange() {
-  const { activateBreakpoint } = slice.actions;
-  listenTo(
-    deviceModeChangeEvent(),
-    () => {
-      const activeBreakpoint = getActiveBreakpoint();
-      __dispatch(activateBreakpoint(activeBreakpoint));
-    }
-  );
+import { v1ReadyEvent, __privateUseListenTo as useListenTo } from "@elementor/editor-v1-adapters";
+function useBreakpoints() {
+  return useListenTo(v1ReadyEvent(), getBreakpoints);
 }
 function getBreakpoints() {
   const { breakpoints } = window.elementor?.config?.responsive || {};
-  if (!breakpoints) {
+  if (!breakpoints || Object.entries(breakpoints).length === 0) {
     return [];
   }
-  const entities = Object.entries(breakpoints).filter(([, breakpoint]) => breakpoint.is_enabled).map(([id, { value, direction, label }]) => {
-    return {
+  const minWidth = [];
+  const maxWidth = [];
+  const defaults = [
+    // Desktop breakpoint is not included in V1 config.
+    { id: "desktop", label: __("Desktop", "elementor") }
+  ];
+  Object.entries(breakpoints).forEach(([id, v1Breakpoint]) => {
+    if (!v1Breakpoint.is_enabled) {
+      return;
+    }
+    const breakpoint = {
       id,
-      label,
-      width: value,
-      type: direction === "min" ? "min-width" : "max-width"
+      label: v1Breakpoint.label,
+      width: v1Breakpoint.value,
+      type: v1Breakpoint.direction === "min" ? "min-width" : "max-width"
     };
+    if (!breakpoint.width) {
+      defaults.push(breakpoint);
+    } else if (breakpoint.type === "min-width") {
+      minWidth.push(breakpoint);
+    } else if (breakpoint.type === "max-width") {
+      maxWidth.push(breakpoint);
+    }
   });
-  entities.push({
-    id: "desktop",
-    label: __("Desktop", "elementor")
-  });
-  return entities;
+  const byWidth = (a, b) => {
+    return a.width && b.width ? b.width - a.width : 0;
+  };
+  return [...minWidth.sort(byWidth), ...defaults, ...maxWidth.sort(byWidth)];
+}
+
+// src/hooks/use-active-breakpoint.ts
+import { __privateUseListenTo as useListenTo2, windowEvent } from "@elementor/editor-v1-adapters";
+function useActiveBreakpoint() {
+  return useListenTo2(windowEvent("elementor/device-mode/change"), getActiveBreakpoint);
 }
 function getActiveBreakpoint() {
   const extendedWindow = window;
   return extendedWindow.elementor?.channels?.deviceMode?.request?.("currentMode") || null;
 }
-function deviceModeChangeEvent() {
-  return windowEvent("elementor/device-mode/change");
-}
-
-// src/init.ts
-import { injectIntoResponsive } from "@elementor/editor-app-bar";
-
-// src/components/breakpoints-switcher.tsx
-import * as React from "react";
-import { __ as __2 } from "@wordpress/i18n";
-
-// src/hooks/use-breakpoints.ts
-import { __useSelector as useSelector } from "@elementor/store";
-
-// src/store/selectors.ts
-import { __createSelector } from "@elementor/store";
-var selectEntities = (state) => state.breakpoints.entities;
-var selectActiveId = (state) => state.breakpoints.activeId;
-var selectActiveBreakpoint = __createSelector(
-  selectEntities,
-  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)
-    ];
-  }
-);
-
-// src/hooks/use-breakpoints.ts
-function useBreakpoints() {
-  const all = useSelector(selectSortedBreakpoints);
-  const active = useSelector(selectActiveBreakpoint);
-  return {
-    all,
-    active
-  };
-}
-
-// src/components/breakpoints-switcher.tsx
-import { Tab, Tabs, Tooltip as BaseTooltip } from "@elementor/ui";
-import {
-  DesktopIcon,
-  TabletPortraitIcon,
-  MobilePortraitIcon,
-  WidescreenIcon,
-  LaptopIcon,
-  TabletLandscapeIcon,
-  MobileLandscapeIcon
-} from "@elementor/icons";
 
-// src/hooks/use-breakpoints-actions.ts
+// src/hooks/use-activate-breakpoint.ts
 import { useCallback } from "react";
 import { __privateRunCommand as runCommand } from "@elementor/editor-v1-adapters";
-function useBreakpointsActions() {
-  const activate = useCallback((device) => {
-    return runCommand("panel/change-device-mode", { device });
+function useActivateBreakpoint() {
+  return useCallback((breakpoint) => {
+    return runCommand("panel/change-device-mode", { device: breakpoint });
   }, []);
-  return {
-    activate
-  };
-}
-
-// src/components/breakpoints-switcher.tsx
-function BreakpointsSwitcher() {
-  const { all, active } = useBreakpoints();
-  const { activate } = useBreakpointsActions();
-  if (!all.length || !active) {
-    return null;
-  }
-  const onChange = (_, value) => {
-    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
-        }
-      );
-    }
-    activate(value);
-  };
-  return /* @__PURE__ */ React.createElement(
-    Tabs,
-    {
-      textColor: "inherit",
-      indicatorColor: "secondary",
-      value: active.id,
-      onChange,
-      "aria-label": __2("Switch Device", "elementor"),
-      sx: {
-        "& .MuiTabs-indicator": {
-          backgroundColor: "text.primary"
-        }
-      }
-    },
-    all.map(({ id, label, type, width }) => {
-      const Icon = iconsMap[id];
-      const title = labelsMap[type || "default"].replace("%s", label).replace("%d", width?.toString() || "");
-      return /* @__PURE__ */ React.createElement(
-        Tab,
-        {
-          value: id,
-          key: id,
-          "aria-label": title,
-          icon: /* @__PURE__ */ React.createElement(Tooltip, { title }, /* @__PURE__ */ React.createElement(Icon, null)),
-          sx: { minWidth: "auto" },
-          "data-testid": `switch-device-to-${id}`
-        }
-      );
-    })
-  );
-}
-function Tooltip(props) {
-  return /* @__PURE__ */ React.createElement(
-    BaseTooltip,
-    {
-      PopperProps: {
-        sx: {
-          "&.MuiTooltip-popper .MuiTooltip-tooltip.MuiTooltip-tooltipPlacementBottom": {
-            mt: 2.5
-          }
-        }
-      },
-      ...props
-    }
-  );
 }
-var iconsMap = {
-  widescreen: WidescreenIcon,
-  desktop: DesktopIcon,
-  laptop: LaptopIcon,
-  tablet_extra: TabletLandscapeIcon,
-  tablet: TabletPortraitIcon,
-  mobile_extra: MobileLandscapeIcon,
-  mobile: MobilePortraitIcon
-};
-var labelsMap = {
-  default: "%s",
-  // translators: %s: Breakpoint label, %d: Breakpoint size.
-  "min-width": __2("%s (%dpx and up)", "elementor"),
-  // translators: %s: Breakpoint label, %d: Breakpoint size.
-  "max-width": __2("%s (up to %dpx)", "elementor")
+export {
+  useActivateBreakpoint,
+  useActiveBreakpoint,
+  useBreakpoints
 };
-
-// src/init.ts
-import { __registerSlice } from "@elementor/store";
-function init() {
-  initStore();
-  registerAppBarUI();
-}
-function initStore() {
-  __registerSlice(slice);
-  syncStore();
-}
-function registerAppBarUI() {
-  injectIntoResponsive({
-    id: "responsive-breakpoints-switcher",
-    component: BreakpointsSwitcher,
-    options: {
-      priority: 20
-      // After document indication.
-    }
-  });
-}
-
-// src/index.ts
-init();
 //# sourceMappingURL=index.mjs.map

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/hooks/use-breakpoints.ts","../src/hooks/use-active-breakpoint.ts","../src/hooks/use-activate-breakpoint.ts"],"sourcesContent":["import { __ } from '@wordpress/i18n';\nimport { Breakpoint, BreakpointId, ExtendedWindow } from '../types';\nimport { v1ReadyEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';\n\nexport function useBreakpoints() {\n\treturn useListenTo( v1ReadyEvent(), getBreakpoints );\n}\n\nfunction getBreakpoints() {\n\tconst { breakpoints } = ( window as unknown as ExtendedWindow ).elementor?.config?.responsive || {};\n\n\tif ( ! breakpoints || Object.entries( breakpoints ).length === 0 ) {\n\t\treturn [];\n\t}\n\n\tconst minWidth: Breakpoint[] = [];\n\tconst maxWidth: Breakpoint[] = [];\n\n\tconst defaults: Breakpoint[] = [\n\t\t// Desktop breakpoint is not included in V1 config.\n\t\t{ id: 'desktop', label: __( 'Desktop', 'elementor' ) },\n\t];\n\n\tObject.entries( breakpoints ).forEach( ( [ id, v1Breakpoint ] ) => {\n\t\tif ( ! v1Breakpoint.is_enabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst breakpoint: Breakpoint = {\n\t\t\tid: id as BreakpointId,\n\t\t\tlabel: v1Breakpoint.label,\n\t\t\twidth: v1Breakpoint.value,\n\t\t\ttype: v1Breakpoint.direction === 'min' ? 'min-width' : 'max-width',\n\t\t};\n\n\t\tif ( ! breakpoint.width ) {\n\t\t\tdefaults.push( breakpoint );\n\t\t} else if ( breakpoint.type === 'min-width' ) {\n\t\t\tminWidth.push( breakpoint );\n\t\t} else if ( breakpoint.type === 'max-width' ) {\n\t\t\tmaxWidth.push( breakpoint );\n\t\t}\n\t} );\n\n\tconst byWidth = ( a: Breakpoint, b: Breakpoint ) => {\n\t\treturn a.width && b.width ? b.width - a.width : 0;\n\t};\n\n\treturn [ ...minWidth.sort( byWidth ), ...defaults, ...maxWidth.sort( byWidth ) ];\n}\n","import { __privateUseListenTo as useListenTo, windowEvent } from '@elementor/editor-v1-adapters';\nimport { BreakpointId, ExtendedWindow } from '../types';\n\nexport function useActiveBreakpoint(): BreakpointId | null {\n\treturn useListenTo( windowEvent( 'elementor/device-mode/change' ), getActiveBreakpoint );\n}\n\nfunction getActiveBreakpoint() {\n\tconst extendedWindow = window as unknown as ExtendedWindow;\n\n\treturn extendedWindow.elementor?.channels?.deviceMode?.request?.( 'currentMode' ) || null;\n}\n","import { useCallback } from 'react';\nimport { BreakpointId } from '../types';\nimport { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\n\nexport function useActivateBreakpoint() {\n\treturn useCallback( ( breakpoint: BreakpointId ) => {\n\t\treturn runCommand( 'panel/change-device-mode', { device: breakpoint } );\n\t}, [] );\n}\n"],"mappings":";AAAA,SAAS,UAAU;AAEnB,SAAS,cAAc,wBAAwB,mBAAmB;AAE3D,SAAS,iBAAiB;AAChC,SAAO,YAAa,aAAa,GAAG,cAAe;AACpD;AAEA,SAAS,iBAAiB;AACzB,QAAM,EAAE,YAAY,IAAM,OAAsC,WAAW,QAAQ,cAAc,CAAC;AAElG,MAAK,CAAE,eAAe,OAAO,QAAS,WAAY,EAAE,WAAW,GAAI;AAClE,WAAO,CAAC;AAAA,EACT;AAEA,QAAM,WAAyB,CAAC;AAChC,QAAM,WAAyB,CAAC;AAEhC,QAAM,WAAyB;AAAA;AAAA,IAE9B,EAAE,IAAI,WAAW,OAAO,GAAI,WAAW,WAAY,EAAE;AAAA,EACtD;AAEA,SAAO,QAAS,WAAY,EAAE,QAAS,CAAE,CAAE,IAAI,YAAa,MAAO;AAClE,QAAK,CAAE,aAAa,YAAa;AAChC;AAAA,IACD;AAEA,UAAM,aAAyB;AAAA,MAC9B;AAAA,MACA,OAAO,aAAa;AAAA,MACpB,OAAO,aAAa;AAAA,MACpB,MAAM,aAAa,cAAc,QAAQ,cAAc;AAAA,IACxD;AAEA,QAAK,CAAE,WAAW,OAAQ;AACzB,eAAS,KAAM,UAAW;AAAA,IAC3B,WAAY,WAAW,SAAS,aAAc;AAC7C,eAAS,KAAM,UAAW;AAAA,IAC3B,WAAY,WAAW,SAAS,aAAc;AAC7C,eAAS,KAAM,UAAW;AAAA,IAC3B;AAAA,EACD,CAAE;AAEF,QAAM,UAAU,CAAE,GAAe,MAAmB;AACnD,WAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ;AAAA,EACjD;AAEA,SAAO,CAAE,GAAG,SAAS,KAAM,OAAQ,GAAG,GAAG,UAAU,GAAG,SAAS,KAAM,OAAQ,CAAE;AAChF;;;ACjDA,SAAS,wBAAwBA,cAAa,mBAAmB;AAG1D,SAAS,sBAA2C;AAC1D,SAAOA,aAAa,YAAa,8BAA+B,GAAG,mBAAoB;AACxF;AAEA,SAAS,sBAAsB;AAC9B,QAAM,iBAAiB;AAEvB,SAAO,eAAe,WAAW,UAAU,YAAY,UAAW,aAAc,KAAK;AACtF;;;ACXA,SAAS,mBAAmB;AAE5B,SAAS,uBAAuB,kBAAkB;AAE3C,SAAS,wBAAwB;AACvC,SAAO,YAAa,CAAE,eAA8B;AACnD,WAAO,WAAY,4BAA4B,EAAE,QAAQ,WAAW,CAAE;AAAA,EACvE,GAAG,CAAC,CAAE;AACP;","names":["useListenTo"]}

package/package.json

@@ -1,46 +1,42 @@
 {
-	"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.11.0",
+  "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/libs/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-v1-adapters": "^0.8.0",
+    "@wordpress/i18n": "^4.45.0"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1"
+  },
+  "gitHead": "7d626115b07f3425b679f7508230f7776f3fe17b"
 }

package/src/hooks/__tests__/{use-breakpoints-actions.test.tsx → use-activate-breakpoint.test.ts}

@@ -1,23 +1,20 @@
-import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
 import { renderHook } from '@testing-library/react';
-import useBreakpointsActions from '../use-breakpoints-actions';
+import { useActivateBreakpoint } from '../use-activate-breakpoint';
+import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
 
 jest.mock( '@elementor/editor-v1-adapters', () => ( {
 	__privateRunCommand: jest.fn(),
 } ) );
 
-describe( '@elementor/editor-responsive - useBreakpointsActions', () => {
+describe( 'useActivateBreakpoints', () => {
 	it( 'should activate a breakpoint', () => {
 		// Act.
-		const { result } = renderHook( () => useBreakpointsActions() );
+		const { result } = renderHook( useActivateBreakpoint );
 
-		result.current.activate( 'tablet' );
+		result.current( 'tablet' );
 
 		// 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-active-breakpoint.test.ts

@@ -0,0 +1,50 @@
+import { act, renderHook } from '@testing-library/react';
+import { useActiveBreakpoint } from '../use-active-breakpoint';
+import { BreakpointId, ExtendedWindow } from '../../types';
+import { dispatchWindowEvent } from 'test-utils';
+
+describe( 'useActiveBreakpoint', () => {
+	function setActiveBreakpoint( active: BreakpointId ) {
+		const extendedWindow = window as unknown as ExtendedWindow;
+
+		extendedWindow.elementor = {
+			channels: {
+				deviceMode: {
+					request: () => {
+						return active;
+					},
+				},
+			},
+		};
+
+		dispatchWindowEvent( 'elementor/device-mode/change' );
+	}
+
+	it( 'should return null when no breakpoint is active', () => {
+		// Arrange.
+		setActiveBreakpoint( undefined as never );
+
+		// Act.
+		const { result } = renderHook( useActiveBreakpoint );
+
+		// Assert.
+		expect( result.current ).toEqual( null );
+	} );
+
+	it( 'should return the active breakpoint', () => {
+		// Arrange.
+		setActiveBreakpoint( 'mobile' );
+
+		// Act.
+		const { result } = renderHook( useActiveBreakpoint );
+
+		// Assert.
+		expect( result.current ).toEqual( 'mobile' );
+
+		// Act.
+		act( () => setActiveBreakpoint( 'tablet' ) );
+
+		// Assert.
+		expect( result.current ).toEqual( 'tablet' );
+	} );
+} );

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

@@ -0,0 +1,90 @@
+import { useBreakpoints } from '../use-breakpoints';
+import { renderHook } from '@testing-library/react';
+import { ExtendedWindow, V1Breakpoints } from '../../types';
+
+describe( 'useBreakpoints', () => {
+	function setBreakpoints( breakpoints: Partial< V1Breakpoints > ) {
+		const extendedWindow = window as unknown as ExtendedWindow;
+
+		extendedWindow.elementor = {
+			config: {
+				responsive: {
+					breakpoints: breakpoints as V1Breakpoints,
+				},
+			},
+		};
+	}
+
+	it( 'should return an empty array if no breakpoints are available', () => {
+		// Arrange.
+		setBreakpoints( {} as never );
+
+		// Act.
+		const { result } = renderHook( useBreakpoints );
+
+		// Assert.
+		expect( result.current ).toEqual( [] );
+	} );
+
+	it( 'should filter out inactive breakpoints', () => {
+		// Arrange.
+		setBreakpoints( {
+			tablet: {
+				is_enabled: false,
+				value: 1024,
+				label: 'Tablet Portrait',
+				direction: 'max',
+			},
+			mobile: {
+				is_enabled: true,
+				value: 767,
+				label: 'Mobile Portrait',
+				direction: 'max',
+			},
+		} );
+
+		// Act.
+		const { result } = renderHook( useBreakpoints );
+
+		// Assert.
+		expect( result.current ).toEqual( [
+			{ id: 'desktop', label: 'Desktop' },
+			{ id: 'mobile', label: 'Mobile Portrait', width: 767, type: 'max-width' },
+		] );
+	} );
+
+	it( 'should return all breakpoints sorted by size', () => {
+		// Arrange.
+		setBreakpoints( {
+			tablet: {
+				is_enabled: true,
+				value: 1024,
+				label: 'Tablet Portrait',
+				direction: 'max',
+			},
+			mobile: {
+				is_enabled: true,
+				value: 767,
+				label: 'Mobile Portrait',
+				direction: 'max',
+			},
+			widescreen: {
+				is_enabled: true,
+				value: 2400,
+				label: 'Widescreen',
+				direction: 'min',
+			},
+		} );
+
+		// Act.
+		const { result } = renderHook( useBreakpoints );
+
+		// Assert.
+		expect( result.current ).toEqual( [
+			{ id: 'widescreen', label: 'Widescreen', width: 2400, type: 'min-width' },
+			{ id: 'desktop', label: 'Desktop' },
+			{ id: 'tablet', label: 'Tablet Portrait', width: 1024, type: 'max-width' },
+			{ id: 'mobile', label: 'Mobile Portrait', width: 767, type: 'max-width' },
+		] );
+	} );
+} );

package/src/hooks/use-activate-breakpoint.ts

@@ -0,0 +1,9 @@
+import { useCallback } from 'react';
+import { BreakpointId } from '../types';
+import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
+
+export function useActivateBreakpoint() {
+	return useCallback( ( breakpoint: BreakpointId ) => {
+		return runCommand( 'panel/change-device-mode', { device: breakpoint } );
+	}, [] );
+}

package/src/hooks/use-active-breakpoint.ts

@@ -0,0 +1,12 @@
+import { __privateUseListenTo as useListenTo, windowEvent } from '@elementor/editor-v1-adapters';
+import { BreakpointId, ExtendedWindow } from '../types';
+
+export function useActiveBreakpoint(): BreakpointId | null {
+	return useListenTo( windowEvent( 'elementor/device-mode/change' ), getActiveBreakpoint );
+}
+
+function getActiveBreakpoint() {
+	const extendedWindow = window as unknown as ExtendedWindow;
+
+	return extendedWindow.elementor?.channels?.deviceMode?.request?.( 'currentMode' ) || null;
+}