@elementor/editor-responsive 4.0.0-609 → 4.0.0-621

package/dist/index.js

@@ -108,10 +108,13 @@ function useBreakpoints() {
 }
 
 // src/hooks/use-breakpoints-map.ts
+var import_react2 = require("react");
 function useBreakpointsMap() {
   const breakpoints = useBreakpoints();
-  const entries = breakpoints.map((breakpoint) => [breakpoint.id, breakpoint]);
-  return Object.fromEntries(entries);
+  return (0, import_react2.useMemo)(() => {
+    const entries = breakpoints.map((breakpoint) => [breakpoint.id, breakpoint]);
+    return Object.fromEntries(entries);
+  }, [breakpoints]);
 }
 
 // src/sync/get-breakpoints-tree.ts

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/hooks/use-activate-breakpoint.ts","../src/hooks/use-active-breakpoint.ts","../src/hooks/use-breakpoints.ts","../src/sync/utils/get-breakpoints-by-widths.ts","../src/sync/get-breakpoints.ts","../src/hooks/use-breakpoints-map.ts","../src/sync/get-breakpoints-tree.ts"],"sourcesContent":["export { useActivateBreakpoint } from './hooks/use-activate-breakpoint';\nexport { useActiveBreakpoint } from './hooks/use-active-breakpoint';\nexport { useBreakpoints } from './hooks/use-breakpoints';\nexport { useBreakpointsMap } from './hooks/use-breakpoints-map';\nexport { getBreakpoints } from './sync/get-breakpoints';\nexport { getBreakpointsTree } from './sync/get-breakpoints-tree';\n\nexport { type ExtendedWindow } from './types';\nexport type { Breakpoint, BreakpointId, BreakpointNode, BreakpointSize, BreakpointsMap } from './types';\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 { __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 { __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 { type BreakpointsMap } from '../types';\nimport { useBreakpoints } from './use-breakpoints';\n\nexport function useBreakpointsMap(): BreakpointsMap {\n\tconst breakpoints = useBreakpoints();\n\n\tconst entries = breakpoints.map( ( breakpoint ) => [ breakpoint.id, breakpoint ] );\n\n\treturn Object.fromEntries( entries );\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"],"mappings":"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","names":["runCommand","import_editor_v1_adapters","useListenTo","import_editor_v1_adapters","useListenTo"]}
+{"version":3,"sources":["../src/index.ts","../src/hooks/use-activate-breakpoint.ts","../src/hooks/use-active-breakpoint.ts","../src/hooks/use-breakpoints.ts","../src/sync/utils/get-breakpoints-by-widths.ts","../src/sync/get-breakpoints.ts","../src/hooks/use-breakpoints-map.ts","../src/sync/get-breakpoints-tree.ts"],"sourcesContent":["export { useActivateBreakpoint } from './hooks/use-activate-breakpoint';\nexport { useActiveBreakpoint } from './hooks/use-active-breakpoint';\nexport { useBreakpoints } from './hooks/use-breakpoints';\nexport { useBreakpointsMap } from './hooks/use-breakpoints-map';\nexport { getBreakpoints } from './sync/get-breakpoints';\nexport { getBreakpointsTree } from './sync/get-breakpoints-tree';\n\nexport { type ExtendedWindow } from './types';\nexport type { Breakpoint, BreakpointId, BreakpointNode, BreakpointSize, BreakpointsMap } from './types';\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 { __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 { __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 { useMemo } from 'react';\n\nimport { type BreakpointsMap } from '../types';\nimport { useBreakpoints } from './use-breakpoints';\n\nexport function useBreakpointsMap(): BreakpointsMap {\n\tconst breakpoints = useBreakpoints();\n\n\treturn useMemo( () => {\n\t\tconst entries = breakpoints.map( ( breakpoint ) => [ breakpoint.id, breakpoint ] );\n\n\t\treturn Object.fromEntries( entries );\n\t}, [ breakpoints ] );\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"],"mappings":"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","names":["runCommand","import_editor_v1_adapters","useListenTo","import_editor_v1_adapters","useListenTo","import_react"]}

package/dist/index.mjs

@@ -77,10 +77,13 @@ function useBreakpoints() {
 }
 
 // src/hooks/use-breakpoints-map.ts
+import { useMemo } from "react";
 function useBreakpointsMap() {
   const breakpoints = useBreakpoints();
-  const entries = breakpoints.map((breakpoint) => [breakpoint.id, breakpoint]);
-  return Object.fromEntries(entries);
+  return useMemo(() => {
+    const entries = breakpoints.map((breakpoint) => [breakpoint.id, breakpoint]);
+    return Object.fromEntries(entries);
+  }, [breakpoints]);
 }
 
 // src/sync/get-breakpoints-tree.ts

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/use-activate-breakpoint.ts","../src/hooks/use-active-breakpoint.ts","../src/hooks/use-breakpoints.ts","../src/sync/utils/get-breakpoints-by-widths.ts","../src/sync/get-breakpoints.ts","../src/hooks/use-breakpoints-map.ts","../src/sync/get-breakpoints-tree.ts"],"sourcesContent":["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 { __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 { __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 { type BreakpointsMap } from '../types';\nimport { useBreakpoints } from './use-breakpoints';\n\nexport function useBreakpointsMap(): BreakpointsMap {\n\tconst breakpoints = useBreakpoints();\n\n\tconst entries = breakpoints.map( ( breakpoint ) => [ breakpoint.id, breakpoint ] );\n\n\treturn Object.fromEntries( entries );\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"],"mappings":"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","names":["useListenTo","useListenTo"]}
+{"version":3,"sources":["../src/hooks/use-activate-breakpoint.ts","../src/hooks/use-active-breakpoint.ts","../src/hooks/use-breakpoints.ts","../src/sync/utils/get-breakpoints-by-widths.ts","../src/sync/get-breakpoints.ts","../src/hooks/use-breakpoints-map.ts","../src/sync/get-breakpoints-tree.ts"],"sourcesContent":["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 { __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 { __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 { useMemo } from 'react';\n\nimport { type BreakpointsMap } from '../types';\nimport { useBreakpoints } from './use-breakpoints';\n\nexport function useBreakpointsMap(): BreakpointsMap {\n\tconst breakpoints = useBreakpoints();\n\n\treturn useMemo( () => {\n\t\tconst entries = breakpoints.map( ( breakpoint ) => [ breakpoint.id, breakpoint ] );\n\n\t\treturn Object.fromEntries( entries );\n\t}, [ breakpoints ] );\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"],"mappings":"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","names":["useListenTo","useListenTo"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-responsive",
-  "version": "4.0.0-609",
+  "version": "4.0.0-621",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,7 +39,7 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-v1-adapters": "4.0.0-609",
+    "@elementor/editor-v1-adapters": "4.0.0-621",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/hooks/use-breakpoints-map.ts

@@ -1,10 +1,14 @@
+import { useMemo } from 'react';
+
 import { type BreakpointsMap } from '../types';
 import { useBreakpoints } from './use-breakpoints';
 
 export function useBreakpointsMap(): BreakpointsMap {
 	const breakpoints = useBreakpoints();
 
-	const entries = breakpoints.map( ( breakpoint ) => [ breakpoint.id, breakpoint ] );
+	return useMemo( () => {
+		const entries = breakpoints.map( ( breakpoint ) => [ breakpoint.id, breakpoint ] );
 
-	return Object.fromEntries( entries );
+		return Object.fromEntries( entries );
+	}, [ breakpoints ] );
 }