@elementor/editor-responsive 0.12.6 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Change Log
 
+## 0.13.0
+
+### Minor Changes
+
+- d99471a: Added tree representation for responsive breakdowns
+
+### Patch Changes
+
+- da38fa9: Remove unused exports and add missing dependencies.
+- Updated dependencies [da38fa9]
+- Updated dependencies [ad6fde0]
+- Updated dependencies [b8e2a85]
+  - @elementor/editor-v1-adapters@0.10.0
+
 ## 0.12.6
 
 ### Patch Changes

package/dist/index.d.mts

@@ -10,6 +10,9 @@ type Breakpoint = {
     type?: 'min-width' | 'max-width';
 };
 type BreakpointsMap = Record<BreakpointId, Breakpoint>;
+type BreakpointNode = Breakpoint & {
+    children: BreakpointNode[];
+};
 
 declare function useActiveBreakpoint(): BreakpointId | null;
 
@@ -17,6 +20,8 @@ declare function useActivateBreakpoint(): (breakpoint: BreakpointId) => Promise<
 
 declare function getBreakpoints(): Breakpoint[];
 
+declare function getBreakpointsTree(): BreakpointNode;
+
 declare function getBreakpointsMap(): BreakpointsMap;
 
-export { type Breakpoint, type BreakpointId, type BreakpointSize, type BreakpointsMap, getBreakpoints, getBreakpointsMap, useActivateBreakpoint, useActiveBreakpoint, useBreakpoints };
+export { type Breakpoint, type BreakpointId, type BreakpointNode, type BreakpointSize, type BreakpointsMap, getBreakpoints, getBreakpointsMap, getBreakpointsTree, useActivateBreakpoint, useActiveBreakpoint, useBreakpoints };

package/dist/index.d.ts

@@ -10,6 +10,9 @@ type Breakpoint = {
     type?: 'min-width' | 'max-width';
 };
 type BreakpointsMap = Record<BreakpointId, Breakpoint>;
+type BreakpointNode = Breakpoint & {
+    children: BreakpointNode[];
+};
 
 declare function useActiveBreakpoint(): BreakpointId | null;
 
@@ -17,6 +20,8 @@ declare function useActivateBreakpoint(): (breakpoint: BreakpointId) => Promise<
 
 declare function getBreakpoints(): Breakpoint[];
 
+declare function getBreakpointsTree(): BreakpointNode;
+
 declare function getBreakpointsMap(): BreakpointsMap;
 
-export { type Breakpoint, type BreakpointId, type BreakpointSize, type BreakpointsMap, getBreakpoints, getBreakpointsMap, useActivateBreakpoint, useActiveBreakpoint, useBreakpoints };
+export { type Breakpoint, type BreakpointId, type BreakpointNode, type BreakpointSize, type BreakpointsMap, getBreakpoints, getBreakpointsMap, getBreakpointsTree, useActivateBreakpoint, useActiveBreakpoint, useBreakpoints };

package/dist/index.js

@@ -22,6 +22,7 @@ var index_exports = {};
 __export(index_exports, {
   getBreakpoints: () => getBreakpoints,
   getBreakpointsMap: () => getBreakpointsMap,
+  getBreakpointsTree: () => getBreakpointsTree,
   useActivateBreakpoint: () => useActivateBreakpoint,
   useActiveBreakpoint: () => useActiveBreakpoint,
   useBreakpoints: () => useBreakpoints
@@ -31,12 +32,16 @@ module.exports = __toCommonJS(index_exports);
 // src/hooks/use-breakpoints.ts
 var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
 
-// src/sync/get-breakpoints.ts
+// src/sync/utils/get-breakpoints-by-widths.ts
 var import_i18n = require("@wordpress/i18n");
-function getBreakpoints() {
+function getBreakpointsByWidths() {
   const { breakpoints } = window.elementor?.config?.responsive || {};
   if (!breakpoints || Object.entries(breakpoints).length === 0) {
-    return [];
+    return {
+      minWidth: [],
+      defaults: [],
+      maxWidth: []
+    };
   }
   const minWidth = [];
   const maxWidth = [];
@@ -65,7 +70,17 @@ function getBreakpoints() {
   const byWidth = (a, b) => {
     return a.width && b.width ? b.width - a.width : 0;
   };
-  return [...minWidth.sort(byWidth), ...defaults, ...maxWidth.sort(byWidth)];
+  return {
+    minWidth: minWidth.sort(byWidth),
+    defaults,
+    maxWidth: maxWidth.sort(byWidth)
+  };
+}
+
+// src/sync/get-breakpoints.ts
+function getBreakpoints() {
+  const { minWidth, defaults, maxWidth } = getBreakpointsByWidths();
+  return [...minWidth, ...defaults, ...maxWidth];
 }
 
 // src/hooks/use-breakpoints.ts
@@ -92,6 +107,30 @@ function useActivateBreakpoint() {
   }, []);
 }
 
+// src/sync/get-breakpoints-tree.ts
+function getBreakpointsTree() {
+  const { minWidth, defaults, maxWidth } = getBreakpointsByWidths();
+  const [rootBreakpoint] = defaults;
+  const rootNode = {
+    ...rootBreakpoint,
+    children: []
+  };
+  const buildBranch = (breakpoints) => {
+    let last = rootNode;
+    breakpoints.forEach((breakpoint) => {
+      const newNode = {
+        ...breakpoint,
+        children: []
+      };
+      last.children.push(newNode);
+      last = newNode;
+    });
+  };
+  buildBranch(minWidth);
+  buildBranch(maxWidth);
+  return rootNode;
+}
+
 // src/sync/get-breakpoints-map.ts
 function getBreakpointsMap() {
   const breakpoints = getBreakpoints();
@@ -102,6 +141,7 @@ function getBreakpointsMap() {
 0 && (module.exports = {
   getBreakpoints,
   getBreakpointsMap,
+  getBreakpointsTree,
   useActivateBreakpoint,
   useActiveBreakpoint,
   useBreakpoints

package/dist/index.js.map

@@ -1 +1 @@
-{"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","../src/sync/get-breakpoints-map.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';\nexport { getBreakpointsMap } from './sync/get-breakpoints-map';\n\nexport type { BreakpointId, BreakpointSize, Breakpoint, BreakpointsMap } from './types';\n","import { __privateUseListenTo as useListenTo, v1ReadyEvent } from '@elementor/editor-v1-adapters';\n\nimport { getBreakpoints } from '../sync/get-breakpoints';\n\nexport function useBreakpoints() {\n\treturn useListenTo( v1ReadyEvent(), getBreakpoints );\n}\n","import { __ } from '@wordpress/i18n';\n\nimport { type Breakpoint, type BreakpointId, type ExtendedWindow } from '../types';\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';\n\nimport { type BreakpointId, type 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 { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\n\nimport { type BreakpointId } from '../types';\n\nexport function useActivateBreakpoint() {\n\treturn useCallback( ( breakpoint: BreakpointId ) => {\n\t\treturn runCommand( 'panel/change-device-mode', { device: breakpoint } );\n\t}, [] );\n}\n","import { type BreakpointsMap } from '../types';\nimport { getBreakpoints } from './get-breakpoints';\n\nexport function getBreakpointsMap(): BreakpointsMap {\n\tconst breakpoints = getBreakpoints();\n\n\tconst entries = breakpoints.map( ( breakpoint ) => [ breakpoint.id, breakpoint ] );\n\n\treturn Object.fromEntries( entries );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,gCAAkE;;;ACAlE,kBAAmB;AAIZ,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;;;AENA,IAAAC,6BAAiE;AAI1D,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;;;ACZA,mBAA4B;AAC5B,IAAAC,6BAAkD;AAI3C,SAAS,wBAAwB;AACvC,aAAO,0BAAa,CAAE,eAA8B;AACnD,eAAO,2BAAAC,qBAAY,4BAA4B,EAAE,QAAQ,WAAW,CAAE;AAAA,EACvE,GAAG,CAAC,CAAE;AACP;;;ACNO,SAAS,oBAAoC;AACnD,QAAM,cAAc,eAAe;AAEnC,QAAM,UAAU,YAAY,IAAK,CAAE,eAAgB,CAAE,WAAW,IAAI,UAAW,CAAE;AAEjF,SAAO,OAAO,YAAa,OAAQ;AACpC;","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/utils/get-breakpoints-by-widths.ts","../src/sync/get-breakpoints.ts","../src/hooks/use-active-breakpoint.ts","../src/hooks/use-activate-breakpoint.ts","../src/sync/get-breakpoints-tree.ts","../src/sync/get-breakpoints-map.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';\nexport { getBreakpointsTree } from './sync/get-breakpoints-tree';\nexport { getBreakpointsMap } from './sync/get-breakpoints-map';\n\nexport type { BreakpointId, BreakpointSize, Breakpoint, BreakpointsMap, BreakpointNode } from './types';\n","import { __privateUseListenTo as useListenTo, v1ReadyEvent } from '@elementor/editor-v1-adapters';\n\nimport { getBreakpoints } from '../sync/get-breakpoints';\n\nexport function useBreakpoints() {\n\treturn useListenTo( v1ReadyEvent(), getBreakpoints );\n}\n","import { __ } from '@wordpress/i18n';\n\nimport { type Breakpoint, type BreakpointId, type ExtendedWindow } from '../../types';\n\nexport function getBreakpointsByWidths(): { minWidth: Breakpoint[]; defaults: Breakpoint[]; maxWidth: Breakpoint[] } {\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\t\tminWidth: [],\n\t\t\tdefaults: [],\n\t\t\tmaxWidth: [],\n\t\t};\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 {\n\t\tminWidth: minWidth.sort( byWidth ),\n\t\tdefaults,\n\t\tmaxWidth: maxWidth.sort( byWidth ),\n\t};\n}\n","import { type Breakpoint } from '../types';\nimport { getBreakpointsByWidths } from './utils/get-breakpoints-by-widths';\n\nexport function getBreakpoints(): Breakpoint[] {\n\tconst { minWidth, defaults, maxWidth } = getBreakpointsByWidths();\n\treturn [ ...minWidth, ...defaults, ...maxWidth ];\n}\n","import { __privateUseListenTo as useListenTo, windowEvent } from '@elementor/editor-v1-adapters';\n\nimport { type BreakpointId, type 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 { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\n\nimport { type BreakpointId } from '../types';\n\nexport function useActivateBreakpoint() {\n\treturn useCallback( ( breakpoint: BreakpointId ) => {\n\t\treturn runCommand( 'panel/change-device-mode', { device: breakpoint } );\n\t}, [] );\n}\n","import { type Breakpoint, type BreakpointNode } from '../types';\nimport { getBreakpointsByWidths } from './utils/get-breakpoints-by-widths';\n\nexport function getBreakpointsTree(): BreakpointNode {\n\tconst { minWidth, defaults, maxWidth } = getBreakpointsByWidths();\n\n\tconst [ rootBreakpoint ] = defaults;\n\n\tconst rootNode: BreakpointNode = {\n\t\t...rootBreakpoint,\n\t\tchildren: [],\n\t};\n\n\t// gets an array of breakpoints and nest one in the prior breakpoint\n\tconst buildBranch = ( breakpoints: Breakpoint[] ) => {\n\t\tlet last: BreakpointNode = rootNode;\n\n\t\tbreakpoints.forEach( ( breakpoint ) => {\n\t\t\tconst newNode = {\n\t\t\t\t...breakpoint,\n\t\t\t\tchildren: [],\n\t\t\t};\n\n\t\t\tlast.children.push( newNode );\n\n\t\t\tlast = newNode;\n\t\t} );\n\t};\n\n\tbuildBranch( minWidth );\n\tbuildBranch( maxWidth );\n\n\treturn rootNode;\n}\n","import { type BreakpointsMap } from '../types';\nimport { getBreakpoints } from './get-breakpoints';\n\nexport function getBreakpointsMap(): BreakpointsMap {\n\tconst breakpoints = getBreakpoints();\n\n\tconst entries = breakpoints.map( ( breakpoint ) => [ breakpoint.id, breakpoint ] );\n\n\treturn Object.fromEntries( entries );\n}\n"],"mappings":"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","names":["useListenTo","import_editor_v1_adapters","useListenTo","import_editor_v1_adapters","runCommand"]}

package/dist/index.mjs

@@ -1,12 +1,16 @@
 // src/hooks/use-breakpoints.ts
 import { __privateUseListenTo as useListenTo, v1ReadyEvent } from "@elementor/editor-v1-adapters";
 
-// src/sync/get-breakpoints.ts
+// src/sync/utils/get-breakpoints-by-widths.ts
 import { __ } from "@wordpress/i18n";
-function getBreakpoints() {
+function getBreakpointsByWidths() {
   const { breakpoints } = window.elementor?.config?.responsive || {};
   if (!breakpoints || Object.entries(breakpoints).length === 0) {
-    return [];
+    return {
+      minWidth: [],
+      defaults: [],
+      maxWidth: []
+    };
   }
   const minWidth = [];
   const maxWidth = [];
@@ -35,7 +39,17 @@ function getBreakpoints() {
   const byWidth = (a, b) => {
     return a.width && b.width ? b.width - a.width : 0;
   };
-  return [...minWidth.sort(byWidth), ...defaults, ...maxWidth.sort(byWidth)];
+  return {
+    minWidth: minWidth.sort(byWidth),
+    defaults,
+    maxWidth: maxWidth.sort(byWidth)
+  };
+}
+
+// src/sync/get-breakpoints.ts
+function getBreakpoints() {
+  const { minWidth, defaults, maxWidth } = getBreakpointsByWidths();
+  return [...minWidth, ...defaults, ...maxWidth];
 }
 
 // src/hooks/use-breakpoints.ts
@@ -62,6 +76,30 @@ function useActivateBreakpoint() {
   }, []);
 }
 
+// src/sync/get-breakpoints-tree.ts
+function getBreakpointsTree() {
+  const { minWidth, defaults, maxWidth } = getBreakpointsByWidths();
+  const [rootBreakpoint] = defaults;
+  const rootNode = {
+    ...rootBreakpoint,
+    children: []
+  };
+  const buildBranch = (breakpoints) => {
+    let last = rootNode;
+    breakpoints.forEach((breakpoint) => {
+      const newNode = {
+        ...breakpoint,
+        children: []
+      };
+      last.children.push(newNode);
+      last = newNode;
+    });
+  };
+  buildBranch(minWidth);
+  buildBranch(maxWidth);
+  return rootNode;
+}
+
 // src/sync/get-breakpoints-map.ts
 function getBreakpointsMap() {
   const breakpoints = getBreakpoints();
@@ -71,6 +109,7 @@ function getBreakpointsMap() {
 export {
   getBreakpoints,
   getBreakpointsMap,
+  getBreakpointsTree,
   useActivateBreakpoint,
   useActiveBreakpoint,
   useBreakpoints

package/dist/index.mjs.map

@@ -1 +1 @@
-{"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","../src/sync/get-breakpoints-map.ts"],"sourcesContent":["import { __privateUseListenTo as useListenTo, v1ReadyEvent } from '@elementor/editor-v1-adapters';\n\nimport { getBreakpoints } from '../sync/get-breakpoints';\n\nexport function useBreakpoints() {\n\treturn useListenTo( v1ReadyEvent(), getBreakpoints );\n}\n","import { __ } from '@wordpress/i18n';\n\nimport { type Breakpoint, type BreakpointId, type ExtendedWindow } from '../types';\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';\n\nimport { type BreakpointId, type 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 { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\n\nimport { type BreakpointId } from '../types';\n\nexport function useActivateBreakpoint() {\n\treturn useCallback( ( breakpoint: BreakpointId ) => {\n\t\treturn runCommand( 'panel/change-device-mode', { device: breakpoint } );\n\t}, [] );\n}\n","import { type BreakpointsMap } from '../types';\nimport { getBreakpoints } from './get-breakpoints';\n\nexport function getBreakpointsMap(): BreakpointsMap {\n\tconst breakpoints = getBreakpoints();\n\n\tconst entries = breakpoints.map( ( breakpoint ) => [ breakpoint.id, breakpoint ] );\n\n\treturn Object.fromEntries( entries );\n}\n"],"mappings":";AAAA,SAAS,wBAAwB,aAAa,oBAAoB;;;ACAlE,SAAS,UAAU;AAIZ,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;;;AENA,SAAS,wBAAwBA,cAAa,mBAAmB;AAI1D,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;;;ACZA,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB,kBAAkB;AAI3C,SAAS,wBAAwB;AACvC,SAAO,YAAa,CAAE,eAA8B;AACnD,WAAO,WAAY,4BAA4B,EAAE,QAAQ,WAAW,CAAE;AAAA,EACvE,GAAG,CAAC,CAAE;AACP;;;ACNO,SAAS,oBAAoC;AACnD,QAAM,cAAc,eAAe;AAEnC,QAAM,UAAU,YAAY,IAAK,CAAE,eAAgB,CAAE,WAAW,IAAI,UAAW,CAAE;AAEjF,SAAO,OAAO,YAAa,OAAQ;AACpC;","names":["useListenTo"]}
+{"version":3,"sources":["../src/hooks/use-breakpoints.ts","../src/sync/utils/get-breakpoints-by-widths.ts","../src/sync/get-breakpoints.ts","../src/hooks/use-active-breakpoint.ts","../src/hooks/use-activate-breakpoint.ts","../src/sync/get-breakpoints-tree.ts","../src/sync/get-breakpoints-map.ts"],"sourcesContent":["import { __privateUseListenTo as useListenTo, v1ReadyEvent } from '@elementor/editor-v1-adapters';\n\nimport { getBreakpoints } from '../sync/get-breakpoints';\n\nexport function useBreakpoints() {\n\treturn useListenTo( v1ReadyEvent(), getBreakpoints );\n}\n","import { __ } from '@wordpress/i18n';\n\nimport { type Breakpoint, type BreakpointId, type ExtendedWindow } from '../../types';\n\nexport function getBreakpointsByWidths(): { minWidth: Breakpoint[]; defaults: Breakpoint[]; maxWidth: Breakpoint[] } {\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\t\tminWidth: [],\n\t\t\tdefaults: [],\n\t\t\tmaxWidth: [],\n\t\t};\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 {\n\t\tminWidth: minWidth.sort( byWidth ),\n\t\tdefaults,\n\t\tmaxWidth: maxWidth.sort( byWidth ),\n\t};\n}\n","import { type Breakpoint } from '../types';\nimport { getBreakpointsByWidths } from './utils/get-breakpoints-by-widths';\n\nexport function getBreakpoints(): Breakpoint[] {\n\tconst { minWidth, defaults, maxWidth } = getBreakpointsByWidths();\n\treturn [ ...minWidth, ...defaults, ...maxWidth ];\n}\n","import { __privateUseListenTo as useListenTo, windowEvent } from '@elementor/editor-v1-adapters';\n\nimport { type BreakpointId, type 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 { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';\n\nimport { type BreakpointId } from '../types';\n\nexport function useActivateBreakpoint() {\n\treturn useCallback( ( breakpoint: BreakpointId ) => {\n\t\treturn runCommand( 'panel/change-device-mode', { device: breakpoint } );\n\t}, [] );\n}\n","import { type Breakpoint, type BreakpointNode } from '../types';\nimport { getBreakpointsByWidths } from './utils/get-breakpoints-by-widths';\n\nexport function getBreakpointsTree(): BreakpointNode {\n\tconst { minWidth, defaults, maxWidth } = getBreakpointsByWidths();\n\n\tconst [ rootBreakpoint ] = defaults;\n\n\tconst rootNode: BreakpointNode = {\n\t\t...rootBreakpoint,\n\t\tchildren: [],\n\t};\n\n\t// gets an array of breakpoints and nest one in the prior breakpoint\n\tconst buildBranch = ( breakpoints: Breakpoint[] ) => {\n\t\tlet last: BreakpointNode = rootNode;\n\n\t\tbreakpoints.forEach( ( breakpoint ) => {\n\t\t\tconst newNode = {\n\t\t\t\t...breakpoint,\n\t\t\t\tchildren: [],\n\t\t\t};\n\n\t\t\tlast.children.push( newNode );\n\n\t\t\tlast = newNode;\n\t\t} );\n\t};\n\n\tbuildBranch( minWidth );\n\tbuildBranch( maxWidth );\n\n\treturn rootNode;\n}\n","import { type BreakpointsMap } from '../types';\nimport { getBreakpoints } from './get-breakpoints';\n\nexport function getBreakpointsMap(): BreakpointsMap {\n\tconst breakpoints = getBreakpoints();\n\n\tconst entries = breakpoints.map( ( breakpoint ) => [ breakpoint.id, breakpoint ] );\n\n\treturn Object.fromEntries( entries );\n}\n"],"mappings":"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","names":["useListenTo"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-responsive",
-  "version": "0.12.6",
+  "version": "0.13.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,10 +39,13 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-v1-adapters": "0.9.1",
+    "@elementor/editor-v1-adapters": "0.10.0",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {
     "react": "^18.3.1"
+  },
+  "devDependencies": {
+    "tsup": "^8.3.5"
   }
 }

package/src/index.ts

@@ -2,6 +2,7 @@ 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 { getBreakpointsTree } from './sync/get-breakpoints-tree';
 export { getBreakpointsMap } from './sync/get-breakpoints-map';
 
-export type { BreakpointId, BreakpointSize, Breakpoint, BreakpointsMap } from './types';
+export type { BreakpointId, BreakpointSize, Breakpoint, BreakpointsMap, BreakpointNode } from './types';

package/src/sync/get-breakpoints-tree.ts

@@ -0,0 +1,34 @@
+import { type Breakpoint, type BreakpointNode } from '../types';
+import { getBreakpointsByWidths } from './utils/get-breakpoints-by-widths';
+
+export function getBreakpointsTree(): BreakpointNode {
+	const { minWidth, defaults, maxWidth } = getBreakpointsByWidths();
+
+	const [ rootBreakpoint ] = defaults;
+
+	const rootNode: BreakpointNode = {
+		...rootBreakpoint,
+		children: [],
+	};
+
+	// gets an array of breakpoints and nest one in the prior breakpoint
+	const buildBranch = ( breakpoints: Breakpoint[] ) => {
+		let last: BreakpointNode = rootNode;
+
+		breakpoints.forEach( ( breakpoint ) => {
+			const newNode = {
+				...breakpoint,
+				children: [],
+			};
+
+			last.children.push( newNode );
+
+			last = newNode;
+		} );
+	};
+
+	buildBranch( minWidth );
+	buildBranch( maxWidth );
+
+	return rootNode;
+}

package/src/sync/get-breakpoints.ts

@@ -1,46 +1,7 @@
-import { __ } from '@wordpress/i18n';
+import { type Breakpoint } from '../types';
+import { getBreakpointsByWidths } from './utils/get-breakpoints-by-widths';
 
-import { type Breakpoint, type BreakpointId, type ExtendedWindow } from '../types';
-
-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 ) ];
+export function getBreakpoints(): Breakpoint[] {
+	const { minWidth, defaults, maxWidth } = getBreakpointsByWidths();
+	return [ ...minWidth, ...defaults, ...maxWidth ];
 }

package/src/sync/utils/get-breakpoints-by-widths.ts

@@ -0,0 +1,54 @@
+import { __ } from '@wordpress/i18n';
+
+import { type Breakpoint, type BreakpointId, type ExtendedWindow } from '../../types';
+
+export function getBreakpointsByWidths(): { minWidth: Breakpoint[]; defaults: Breakpoint[]; maxWidth: Breakpoint[] } {
+	const { breakpoints } = ( window as unknown as ExtendedWindow ).elementor?.config?.responsive || {};
+
+	if ( ! breakpoints || Object.entries( breakpoints ).length === 0 ) {
+		return {
+			minWidth: [],
+			defaults: [],
+			maxWidth: [],
+		};
+	}
+
+	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: minWidth.sort( byWidth ),
+		defaults,
+		maxWidth: maxWidth.sort( byWidth ),
+	};
+}

package/src/types.ts

@@ -2,7 +2,7 @@ export type BreakpointId = 'widescreen' | 'desktop' | 'laptop' | 'tablet_extra'
 
 export type BreakpointSize = number;
 
-export type BreakpointLabel = string;
+type BreakpointLabel = string;
 
 export type Breakpoint = {
 	id: BreakpointId;
@@ -13,7 +13,11 @@ export type Breakpoint = {
 
 export type BreakpointsMap = Record< BreakpointId, Breakpoint >;
 
-export type V1Breakpoint = {
+export type BreakpointNode = Breakpoint & {
+	children: BreakpointNode[];
+};
+
+type V1Breakpoint = {
 	direction: 'min' | 'max';
 	is_enabled: boolean;
 	value: BreakpointSize;