@elementor/editor-responsive - npm Package Compare versions

Comparing version 0.11.1 to 0.12.0

CHANGELOG.md

@@ -6,2 +6,8 @@ # Change Log
 
+# [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)
@@ -8,0 +14,0 @@

dist/index.d.ts

@@ -0,1 +1,3 @@
+declare function useBreakpoints(): Breakpoint[];
+
 type BreakpointId = 'widescreen' | 'desktop' | 'laptop' | 'tablet_extra' | 'tablet' | 'mobile_extra' | 'mobile';
@@ -10,5 +12,4 @@ type BreakpointSize = number;
 };
+type Breakpoints = Record<BreakpointId, Breakpoint>;
 
-declare function useBreakpoints(): Breakpoint[];
-
 declare function useActiveBreakpoint(): BreakpointId | null;
@@ -18,2 +19,4 @@
 
-export { Breakpoint, BreakpointId, BreakpointSize, useActivateBreakpoint, useActiveBreakpoint, useBreakpoints };
+declare function getBreakpoints(): Breakpoint[];
+
+export { Breakpoint, BreakpointId, BreakpointSize, Breakpoints, getBreakpoints, useActivateBreakpoint, useActiveBreakpoint, useBreakpoints };

dist/index.js

@@ -23,2 +23,3 @@ "use strict";
 __export(src_exports, {
+  getBreakpoints: () => getBreakpoints,
   useActivateBreakpoint: () => useActivateBreakpoint,
@@ -31,7 +32,6 @@ useActiveBreakpoint: () => useActiveBreakpoint,
 // src/hooks/use-breakpoints.ts
+var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
+
+// src/sync/get-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);
-}
 function getBreakpoints() {
@@ -72,2 +72,7 @@ const { breakpoints } = window.elementor?.config?.responsive || {};
 
+// 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
@@ -93,2 +98,3 @@ var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
 0 && (module.exports = {
+  getBreakpoints,
   useActivateBreakpoint,
@@ -95,0 +101,0 @@ useActiveBreakpoint,

package.json

 {
   "name": "@elementor/editor-responsive",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "private": false,
@@ -48,3 +48,3 @@ "author": "Elementor Team",
   },
-  "gitHead": "f4ca33da0842a29d83736d0a173633085edddaee"
+  "gitHead": "9bb2a2ab74c81e97ba6a060ab2867efb15b9e5c4"
 }

src/hooks/use-breakpoints.ts

@@ -1,4 +0,3 @@
-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';
 
@@ -8,44 +7,1 @@ export function useBreakpoints() {
 }
-
-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 ) ];
-}

src/index.ts

 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';

src/types.ts

@@ -14,2 +14,4 @@ export type BreakpointId = 'widescreen' | 'desktop' | 'laptop' | 'tablet_extra' | 'tablet' | 'mobile_extra' | 'mobile';
 
+export type Breakpoints = Record< BreakpointId, Breakpoint >;
+
 export type V1Breakpoint = {
@@ -16,0 +18,0 @@ direction: 'min' | 'max';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

70923

increased by1.98%

Number of package files

16

increased by6.67%

Lines of code

267

increased by4.71%

No dependency changes