@elementor/editor-responsive 0.11.0 → 0.12.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.12.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-responsive@0.11.1...@elementor/editor-responsive@0.12.0) (2024-08-06)
+
+### Features
+
+- **editor-style:** style renderer package for atomic widgets [EDS-278] ([#213](https://github.com/elementor/elementor-packages/issues/213)) ([f80501b](https://github.com/elementor/elementor-packages/commit/f80501b17567fe3bb427655ee77013a61168f88f))
+
+## [0.11.1](https://github.com/elementor/elementor-packages/compare/@elementor/editor-responsive@0.11.0...@elementor/editor-responsive@0.11.1) (2024-08-05)
+
+### Bug Fixes
+
+- publish only necessary files to npm ([#226](https://github.com/elementor/elementor-packages/issues/226)) ([d808e2f](https://github.com/elementor/elementor-packages/commit/d808e2f60eb7ca2d7b8560d0b79c0e62c2f969a8))
+
 # [0.11.0](https://github.com/elementor/elementor-packages/compare/@elementor/editor-responsive@0.10.6...@elementor/editor-responsive@0.11.0) (2024-07-18)
 
 ### Features

package/dist/index.d.mts

@@ -1,3 +1,5 @@
+declare function useBreakpoints(): Breakpoint[];
+
 type BreakpointId = 'widescreen' | 'desktop' | 'laptop' | 'tablet_extra' | 'tablet' | 'mobile_extra' | 'mobile';
 type BreakpointSize = number;
 type BreakpointLabel = string;
@@ -7,11 +9,12 @@ type Breakpoint = {
     width?: BreakpointSize;
     type?: 'min-width' | 'max-width';
 };
-
-declare function useBreakpoints(): Breakpoint[];
+type Breakpoints = Record<BreakpointId, Breakpoint>;
 
 declare function useActiveBreakpoint(): BreakpointId | null;
 
 declare function useActivateBreakpoint(): (breakpoint: BreakpointId) => Promise<any>;
 
-export { Breakpoint, BreakpointId, BreakpointSize, useActivateBreakpoint, useActiveBreakpoint, useBreakpoints };
+declare function getBreakpoints(): Breakpoint[];
+
+export { Breakpoint, BreakpointId, BreakpointSize, Breakpoints, getBreakpoints, useActivateBreakpoint, useActiveBreakpoint, useBreakpoints };

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+declare function useBreakpoints(): Breakpoint[];
+
 type BreakpointId = 'widescreen' | 'desktop' | 'laptop' | 'tablet_extra' | 'tablet' | 'mobile_extra' | 'mobile';
 type BreakpointSize = number;
 type BreakpointLabel = string;
@@ -7,11 +9,12 @@ type Breakpoint = {
     width?: BreakpointSize;
     type?: 'min-width' | 'max-width';
 };
-
-declare function useBreakpoints(): Breakpoint[];
+type Breakpoints = Record<BreakpointId, Breakpoint>;
 
 declare function useActiveBreakpoint(): BreakpointId | null;
 
 declare function useActivateBreakpoint(): (breakpoint: BreakpointId) => Promise<any>;
 
-export { Breakpoint, BreakpointId, BreakpointSize, useActivateBreakpoint, useActiveBreakpoint, useBreakpoints };
+declare function getBreakpoints(): Breakpoint[];
+
+export { Breakpoint, BreakpointId, BreakpointSize, Breakpoints, getBreakpoints, useActivateBreakpoint, useActiveBreakpoint, useBreakpoints };

package/dist/index.js

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  getBreakpoints: () => getBreakpoints,
   useActivateBreakpoint: () => useActivateBreakpoint,
   useActiveBreakpoint: () => useActiveBreakpoint,
   useBreakpoints: () => useBreakpoints
@@ -27,11 +28,10 @@ __export(src_exports, {
 module.exports = __toCommonJS(src_exports);
 
 // src/hooks/use-breakpoints.ts
-var import_i18n = require("@wordpress/i18n");
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
-function useBreakpoints() {
-  return (0, import_editor_v1_adapters.__privateUseListenTo)((0, import_editor_v1_adapters.v1ReadyEvent)(), getBreakpoints);
-}
+
+// src/sync/get-breakpoints.ts
+var import_i18n = require("@wordpress/i18n");
 function getBreakpoints() {
   const { breakpoints } = window.elementor?.config?.responsive || {};
   if (!breakpoints || Object.entries(breakpoints).length === 0) {
@@ -67,6 +67,11 @@ function getBreakpoints() {
   return [...minWidth.sort(byWidth), ...defaults, ...maxWidth.sort(byWidth)];
 }
 
+// src/hooks/use-breakpoints.ts
+function useBreakpoints() {
+  return (0, import_editor_v1_adapters.__privateUseListenTo)((0, import_editor_v1_adapters.v1ReadyEvent)(), getBreakpoints);
+}
+
 // src/hooks/use-active-breakpoint.ts
 var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 function useActiveBreakpoint() {
@@ -87,6 +92,7 @@ function useActivateBreakpoint() {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  getBreakpoints,
   useActivateBreakpoint,
   useActiveBreakpoint,
   useBreakpoints

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/hooks/use-breakpoints.ts","../src/hooks/use-active-breakpoint.ts","../src/hooks/use-activate-breakpoint.ts"],"sourcesContent":["export { useBreakpoints } from './hooks/use-breakpoints';\nexport { useActiveBreakpoint } from './hooks/use-active-breakpoint';\nexport { useActivateBreakpoint } from './hooks/use-activate-breakpoint';\n\nexport type { BreakpointId, BreakpointSize, Breakpoint } from './types';\n","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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,kBAAmB;AAEnB,gCAAkE;AAE3D,SAAS,iBAAiB;AAChC,aAAO,0BAAAA,0BAAa,wCAAa,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,WAAO,gBAAI,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,IAAAC,6BAAiE;AAG1D,SAAS,sBAA2C;AAC1D,aAAO,2BAAAC,0BAAa,wCAAa,8BAA+B,GAAG,mBAAoB;AACxF;AAEA,SAAS,sBAAsB;AAC9B,QAAM,iBAAiB;AAEvB,SAAO,eAAe,WAAW,UAAU,YAAY,UAAW,aAAc,KAAK;AACtF;;;ACXA,mBAA4B;AAE5B,IAAAC,6BAAkD;AAE3C,SAAS,wBAAwB;AACvC,aAAO,0BAAa,CAAE,eAA8B;AACnD,eAAO,2BAAAC,qBAAY,4BAA4B,EAAE,QAAQ,WAAW,CAAE;AAAA,EACvE,GAAG,CAAC,CAAE;AACP;","names":["useListenTo","import_editor_v1_adapters","useListenTo","import_editor_v1_adapters","runCommand"]}
+{"version":3,"sources":["../src/index.ts","../src/hooks/use-breakpoints.ts","../src/sync/get-breakpoints.ts","../src/hooks/use-active-breakpoint.ts","../src/hooks/use-activate-breakpoint.ts"],"sourcesContent":["export { useBreakpoints } from './hooks/use-breakpoints';\nexport { useActiveBreakpoint } from './hooks/use-active-breakpoint';\nexport { useActivateBreakpoint } from './hooks/use-activate-breakpoint';\nexport { getBreakpoints } from './sync/get-breakpoints';\n\nexport type { BreakpointId, BreakpointSize, Breakpoint, Breakpoints } from './types';\n","import { v1ReadyEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';\nimport { getBreakpoints } from '../sync/get-breakpoints';\n\nexport function useBreakpoints() {\n\treturn useListenTo( v1ReadyEvent(), getBreakpoints );\n}\n","import { Breakpoint, BreakpointId, ExtendedWindow } from '../types';\nimport { __ } from '@wordpress/i18n';\n\nexport function 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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,gCAAkE;;;ACClE,kBAAmB;AAEZ,SAAS,iBAAiB;AAChC,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,WAAO,gBAAI,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;;;ADzCO,SAAS,iBAAiB;AAChC,aAAO,0BAAAA,0BAAa,wCAAa,GAAG,cAAe;AACpD;;;AELA,IAAAC,6BAAiE;AAG1D,SAAS,sBAA2C;AAC1D,aAAO,2BAAAC,0BAAa,wCAAa,8BAA+B,GAAG,mBAAoB;AACxF;AAEA,SAAS,sBAAsB;AAC9B,QAAM,iBAAiB;AAEvB,SAAO,eAAe,WAAW,UAAU,YAAY,UAAW,aAAc,KAAK;AACtF;;;ACXA,mBAA4B;AAE5B,IAAAC,6BAAkD;AAE3C,SAAS,wBAAwB;AACvC,aAAO,0BAAa,CAAE,eAA8B;AACnD,eAAO,2BAAAC,qBAAY,4BAA4B,EAAE,QAAQ,WAAW,CAAE;AAAA,EACvE,GAAG,CAAC,CAAE;AACP;","names":["useListenTo","import_editor_v1_adapters","useListenTo","import_editor_v1_adapters","runCommand"]}

package/dist/index.mjs

@@ -1,9 +1,8 @@
 // src/hooks/use-breakpoints.ts
-import { __ } from "@wordpress/i18n";
 import { v1ReadyEvent, __privateUseListenTo as useListenTo } from "@elementor/editor-v1-adapters";
-function useBreakpoints() {
-  return useListenTo(v1ReadyEvent(), getBreakpoints);
-}
+
+// src/sync/get-breakpoints.ts
+import { __ } from "@wordpress/i18n";
 function getBreakpoints() {
   const { breakpoints } = window.elementor?.config?.responsive || {};
   if (!breakpoints || Object.entries(breakpoints).length === 0) {
@@ -39,6 +38,11 @@ function getBreakpoints() {
   return [...minWidth.sort(byWidth), ...defaults, ...maxWidth.sort(byWidth)];
 }
 
+// src/hooks/use-breakpoints.ts
+function useBreakpoints() {
+  return useListenTo(v1ReadyEvent(), getBreakpoints);
+}
+
 // src/hooks/use-active-breakpoint.ts
 import { __privateUseListenTo as useListenTo2, windowEvent } from "@elementor/editor-v1-adapters";
 function useActiveBreakpoint() {
@@ -58,6 +62,7 @@ function useActivateBreakpoint() {
   }, []);
 }
 export {
+  getBreakpoints,
   useActivateBreakpoint,
   useActiveBreakpoint,
   useBreakpoints

package/dist/index.mjs.map

@@ -1 +1 @@
-{"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"]}
+{"version":3,"sources":["../src/hooks/use-breakpoints.ts","../src/sync/get-breakpoints.ts","../src/hooks/use-active-breakpoint.ts","../src/hooks/use-activate-breakpoint.ts"],"sourcesContent":["import { v1ReadyEvent, __privateUseListenTo as useListenTo } from '@elementor/editor-v1-adapters';\nimport { getBreakpoints } from '../sync/get-breakpoints';\n\nexport function useBreakpoints() {\n\treturn useListenTo( v1ReadyEvent(), getBreakpoints );\n}\n","import { Breakpoint, BreakpointId, ExtendedWindow } from '../types';\nimport { __ } from '@wordpress/i18n';\n\nexport function 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,cAAc,wBAAwB,mBAAmB;;;ACClE,SAAS,UAAU;AAEZ,SAAS,iBAAiB;AAChC,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;;;ADzCO,SAAS,iBAAiB;AAChC,SAAO,YAAa,aAAa,GAAG,cAAe;AACpD;;;AELA,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,6 +1,6 @@
 {
   "name": "@elementor/editor-responsive",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -18,7 +18,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/elementor/elementor-packages.git",
+    "url": "git+https://github.com/elementor/elementor-packages.git",
     "directory": "packages/libs/editor-responsive"
   },
   "bugs": {
@@ -27,16 +27,23 @@
   "publishConfig": {
     "access": "public"
   },
+  "files": [
+    "README.md",
+    "CHANGELOG.md",
+    "/dist",
+    "/src",
+    "!**/__tests__"
+  ],
   "scripts": {
     "build": "tsup --config=../../tsup.build.ts",
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-v1-adapters": "^0.8.0",
+    "@elementor/editor-v1-adapters": "^0.8.1",
     "@wordpress/i18n": "^4.45.0"
   },
   "peerDependencies": {
     "react": "^18.3.1"
   },
-  "gitHead": "7d626115b07f3425b679f7508230f7776f3fe17b"
+  "gitHead": "9bb2a2ab74c81e97ba6a060ab2867efb15b9e5c4"
 }

package/src/hooks/use-breakpoints.ts

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

package/src/index.ts

@@ -1,5 +1,6 @@
 export { useBreakpoints } from './hooks/use-breakpoints';
 export { useActiveBreakpoint } from './hooks/use-active-breakpoint';
 export { useActivateBreakpoint } from './hooks/use-activate-breakpoint';
+export { getBreakpoints } from './sync/get-breakpoints';
 
-export type { BreakpointId, BreakpointSize, Breakpoint } from './types';
+export type { BreakpointId, BreakpointSize, Breakpoint, Breakpoints } from './types';

package/src/sync/get-breakpoints.ts

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

package/src/types.ts

@@ -11,6 +11,8 @@ export type Breakpoint = {
 	type?: 'min-width' | 'max-width';
 };
 
+export type Breakpoints = Record< BreakpointId, Breakpoint >;
+
 export type V1Breakpoint = {
 	direction: 'min' | 'max';
 	is_enabled: boolean;

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

@@ -1,20 +0,0 @@
-import { renderHook } from '@testing-library/react';
-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( 'useActivateBreakpoints', () => {
-	it( 'should activate a breakpoint', () => {
-		// Act.
-		const { result } = renderHook( useActivateBreakpoint );
-
-		result.current( 'tablet' );
-
-		// Assert.
-		expect( jest.mocked( runCommand ) ).toHaveBeenCalledTimes( 1 );
-		expect( jest.mocked( runCommand ) ).toHaveBeenCalledWith( 'panel/change-device-mode', { device: 'tablet' } );
-	} );
-} );

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

@@ -1,50 +0,0 @@
-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

@@ -1,90 +0,0 @@
-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' },
-		] );
-	} );
-} );