@elementor/editor-responsive 3.35.0-340 → 3.35.0-341
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +25 -4
- package/dist/index.d.ts +25 -4
- package/dist/index.js +21 -21
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +21 -21
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -2
- package/src/index.ts +4 -3
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
declare function useBreakpoints(): Breakpoint[];
|
|
2
|
-
|
|
3
1
|
type BreakpointId = 'widescreen' | 'desktop' | 'laptop' | 'tablet_extra' | 'tablet' | 'mobile_extra' | 'mobile';
|
|
4
2
|
type BreakpointSize = number;
|
|
5
3
|
type BreakpointLabel = string;
|
|
@@ -13,10 +11,33 @@ type BreakpointsMap = Record<BreakpointId, Breakpoint>;
|
|
|
13
11
|
type BreakpointNode = Breakpoint & {
|
|
14
12
|
children: BreakpointNode[];
|
|
15
13
|
};
|
|
14
|
+
type V1Breakpoint = {
|
|
15
|
+
direction: 'min' | 'max';
|
|
16
|
+
is_enabled: boolean;
|
|
17
|
+
value: BreakpointSize;
|
|
18
|
+
label: BreakpointLabel;
|
|
19
|
+
};
|
|
20
|
+
type V1Breakpoints = Record<Exclude<BreakpointId, 'desktop'>, V1Breakpoint>;
|
|
21
|
+
type ExtendedWindow = Window & {
|
|
22
|
+
elementor?: {
|
|
23
|
+
config?: {
|
|
24
|
+
responsive?: {
|
|
25
|
+
breakpoints?: V1Breakpoints;
|
|
26
|
+
};
|
|
27
|
+
};
|
|
28
|
+
channels?: {
|
|
29
|
+
deviceMode?: {
|
|
30
|
+
request?: (request: 'currentMode') => BreakpointId;
|
|
31
|
+
};
|
|
32
|
+
};
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
declare function useActivateBreakpoint(): (breakpoint: BreakpointId) => Promise<any>;
|
|
16
37
|
|
|
17
38
|
declare function useActiveBreakpoint(): BreakpointId | null;
|
|
18
39
|
|
|
19
|
-
declare function
|
|
40
|
+
declare function useBreakpoints(): Breakpoint[];
|
|
20
41
|
|
|
21
42
|
declare function useBreakpointsMap(): BreakpointsMap;
|
|
22
43
|
|
|
@@ -24,4 +45,4 @@ declare function getBreakpoints(): Breakpoint[];
|
|
|
24
45
|
|
|
25
46
|
declare function getBreakpointsTree(): BreakpointNode;
|
|
26
47
|
|
|
27
|
-
export { type Breakpoint, type BreakpointId, type BreakpointNode, type BreakpointSize, type BreakpointsMap, getBreakpoints, getBreakpointsTree, useActivateBreakpoint, useActiveBreakpoint, useBreakpoints, useBreakpointsMap };
|
|
48
|
+
export { type Breakpoint, type BreakpointId, type BreakpointNode, type BreakpointSize, type BreakpointsMap, type ExtendedWindow, getBreakpoints, getBreakpointsTree, useActivateBreakpoint, useActiveBreakpoint, useBreakpoints, useBreakpointsMap };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
declare function useBreakpoints(): Breakpoint[];
|
|
2
|
-
|
|
3
1
|
type BreakpointId = 'widescreen' | 'desktop' | 'laptop' | 'tablet_extra' | 'tablet' | 'mobile_extra' | 'mobile';
|
|
4
2
|
type BreakpointSize = number;
|
|
5
3
|
type BreakpointLabel = string;
|
|
@@ -13,10 +11,33 @@ type BreakpointsMap = Record<BreakpointId, Breakpoint>;
|
|
|
13
11
|
type BreakpointNode = Breakpoint & {
|
|
14
12
|
children: BreakpointNode[];
|
|
15
13
|
};
|
|
14
|
+
type V1Breakpoint = {
|
|
15
|
+
direction: 'min' | 'max';
|
|
16
|
+
is_enabled: boolean;
|
|
17
|
+
value: BreakpointSize;
|
|
18
|
+
label: BreakpointLabel;
|
|
19
|
+
};
|
|
20
|
+
type V1Breakpoints = Record<Exclude<BreakpointId, 'desktop'>, V1Breakpoint>;
|
|
21
|
+
type ExtendedWindow = Window & {
|
|
22
|
+
elementor?: {
|
|
23
|
+
config?: {
|
|
24
|
+
responsive?: {
|
|
25
|
+
breakpoints?: V1Breakpoints;
|
|
26
|
+
};
|
|
27
|
+
};
|
|
28
|
+
channels?: {
|
|
29
|
+
deviceMode?: {
|
|
30
|
+
request?: (request: 'currentMode') => BreakpointId;
|
|
31
|
+
};
|
|
32
|
+
};
|
|
33
|
+
};
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
declare function useActivateBreakpoint(): (breakpoint: BreakpointId) => Promise<any>;
|
|
16
37
|
|
|
17
38
|
declare function useActiveBreakpoint(): BreakpointId | null;
|
|
18
39
|
|
|
19
|
-
declare function
|
|
40
|
+
declare function useBreakpoints(): Breakpoint[];
|
|
20
41
|
|
|
21
42
|
declare function useBreakpointsMap(): BreakpointsMap;
|
|
22
43
|
|
|
@@ -24,4 +45,4 @@ declare function getBreakpoints(): Breakpoint[];
|
|
|
24
45
|
|
|
25
46
|
declare function getBreakpointsTree(): BreakpointNode;
|
|
26
47
|
|
|
27
|
-
export { type Breakpoint, type BreakpointId, type BreakpointNode, type BreakpointSize, type BreakpointsMap, getBreakpoints, getBreakpointsTree, useActivateBreakpoint, useActiveBreakpoint, useBreakpoints, useBreakpointsMap };
|
|
48
|
+
export { type Breakpoint, type BreakpointId, type BreakpointNode, type BreakpointSize, type BreakpointsMap, type ExtendedWindow, getBreakpoints, getBreakpointsTree, useActivateBreakpoint, useActiveBreakpoint, useBreakpoints, useBreakpointsMap };
|
package/dist/index.js
CHANGED
|
@@ -29,8 +29,27 @@ __export(index_exports, {
|
|
|
29
29
|
});
|
|
30
30
|
module.exports = __toCommonJS(index_exports);
|
|
31
31
|
|
|
32
|
-
// src/hooks/use-
|
|
32
|
+
// src/hooks/use-activate-breakpoint.ts
|
|
33
|
+
var import_react = require("react");
|
|
33
34
|
var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
|
|
35
|
+
function useActivateBreakpoint() {
|
|
36
|
+
return (0, import_react.useCallback)((breakpoint) => {
|
|
37
|
+
return (0, import_editor_v1_adapters.__privateRunCommand)("panel/change-device-mode", { device: breakpoint });
|
|
38
|
+
}, []);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
// src/hooks/use-active-breakpoint.ts
|
|
42
|
+
var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
|
|
43
|
+
function useActiveBreakpoint() {
|
|
44
|
+
return (0, import_editor_v1_adapters2.__privateUseListenTo)((0, import_editor_v1_adapters2.windowEvent)("elementor/device-mode/change"), getActiveBreakpoint);
|
|
45
|
+
}
|
|
46
|
+
function getActiveBreakpoint() {
|
|
47
|
+
const extendedWindow = window;
|
|
48
|
+
return extendedWindow.elementor?.channels?.deviceMode?.request?.("currentMode") || null;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
// src/hooks/use-breakpoints.ts
|
|
52
|
+
var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
|
|
34
53
|
|
|
35
54
|
// src/sync/utils/get-breakpoints-by-widths.ts
|
|
36
55
|
var import_i18n = require("@wordpress/i18n");
|
|
@@ -85,26 +104,7 @@ function getBreakpoints() {
|
|
|
85
104
|
|
|
86
105
|
// src/hooks/use-breakpoints.ts
|
|
87
106
|
function useBreakpoints() {
|
|
88
|
-
return (0,
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
// src/hooks/use-active-breakpoint.ts
|
|
92
|
-
var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
|
|
93
|
-
function useActiveBreakpoint() {
|
|
94
|
-
return (0, import_editor_v1_adapters2.__privateUseListenTo)((0, import_editor_v1_adapters2.windowEvent)("elementor/device-mode/change"), getActiveBreakpoint);
|
|
95
|
-
}
|
|
96
|
-
function getActiveBreakpoint() {
|
|
97
|
-
const extendedWindow = window;
|
|
98
|
-
return extendedWindow.elementor?.channels?.deviceMode?.request?.("currentMode") || null;
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
// src/hooks/use-activate-breakpoint.ts
|
|
102
|
-
var import_react = require("react");
|
|
103
|
-
var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
|
|
104
|
-
function useActivateBreakpoint() {
|
|
105
|
-
return (0, import_react.useCallback)((breakpoint) => {
|
|
106
|
-
return (0, import_editor_v1_adapters3.__privateRunCommand)("panel/change-device-mode", { device: breakpoint });
|
|
107
|
-
}, []);
|
|
107
|
+
return (0, import_editor_v1_adapters3.__privateUseListenTo)((0, import_editor_v1_adapters3.v1ReadyEvent)(), getBreakpoints);
|
|
108
108
|
}
|
|
109
109
|
|
|
110
110
|
// src/hooks/use-breakpoints-map.ts
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/hooks/use-
|
|
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"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
|
+
// src/hooks/use-activate-breakpoint.ts
|
|
2
|
+
import { useCallback } from "react";
|
|
3
|
+
import { __privateRunCommand as runCommand } from "@elementor/editor-v1-adapters";
|
|
4
|
+
function useActivateBreakpoint() {
|
|
5
|
+
return useCallback((breakpoint) => {
|
|
6
|
+
return runCommand("panel/change-device-mode", { device: breakpoint });
|
|
7
|
+
}, []);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
// src/hooks/use-active-breakpoint.ts
|
|
11
|
+
import { __privateUseListenTo as useListenTo, windowEvent } from "@elementor/editor-v1-adapters";
|
|
12
|
+
function useActiveBreakpoint() {
|
|
13
|
+
return useListenTo(windowEvent("elementor/device-mode/change"), getActiveBreakpoint);
|
|
14
|
+
}
|
|
15
|
+
function getActiveBreakpoint() {
|
|
16
|
+
const extendedWindow = window;
|
|
17
|
+
return extendedWindow.elementor?.channels?.deviceMode?.request?.("currentMode") || null;
|
|
18
|
+
}
|
|
19
|
+
|
|
1
20
|
// src/hooks/use-breakpoints.ts
|
|
2
|
-
import { __privateUseListenTo as
|
|
21
|
+
import { __privateUseListenTo as useListenTo2, v1ReadyEvent } from "@elementor/editor-v1-adapters";
|
|
3
22
|
|
|
4
23
|
// src/sync/utils/get-breakpoints-by-widths.ts
|
|
5
24
|
import { __ } from "@wordpress/i18n";
|
|
@@ -54,26 +73,7 @@ function getBreakpoints() {
|
|
|
54
73
|
|
|
55
74
|
// src/hooks/use-breakpoints.ts
|
|
56
75
|
function useBreakpoints() {
|
|
57
|
-
return
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
// src/hooks/use-active-breakpoint.ts
|
|
61
|
-
import { __privateUseListenTo as useListenTo2, windowEvent } from "@elementor/editor-v1-adapters";
|
|
62
|
-
function useActiveBreakpoint() {
|
|
63
|
-
return useListenTo2(windowEvent("elementor/device-mode/change"), getActiveBreakpoint);
|
|
64
|
-
}
|
|
65
|
-
function getActiveBreakpoint() {
|
|
66
|
-
const extendedWindow = window;
|
|
67
|
-
return extendedWindow.elementor?.channels?.deviceMode?.request?.("currentMode") || null;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
// src/hooks/use-activate-breakpoint.ts
|
|
71
|
-
import { useCallback } from "react";
|
|
72
|
-
import { __privateRunCommand as runCommand } from "@elementor/editor-v1-adapters";
|
|
73
|
-
function useActivateBreakpoint() {
|
|
74
|
-
return useCallback((breakpoint) => {
|
|
75
|
-
return runCommand("panel/change-device-mode", { device: breakpoint });
|
|
76
|
-
}, []);
|
|
76
|
+
return useListenTo2(v1ReadyEvent(), getBreakpoints);
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
// src/hooks/use-breakpoints-map.ts
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/use-
|
|
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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elementor/editor-responsive",
|
|
3
|
-
"version": "3.35.0-
|
|
3
|
+
"version": "3.35.0-341",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Elementor Team",
|
|
6
6
|
"homepage": "https://elementor.com/",
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"dev": "tsup --config=../../tsup.dev.ts"
|
|
40
40
|
},
|
|
41
41
|
"dependencies": {
|
|
42
|
-
"@elementor/editor-v1-adapters": "3.35.0-
|
|
42
|
+
"@elementor/editor-v1-adapters": "3.35.0-341",
|
|
43
43
|
"@wordpress/i18n": "^5.13.0"
|
|
44
44
|
},
|
|
45
45
|
"peerDependencies": {
|
package/src/index.ts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
|
-
export { useBreakpoints } from './hooks/use-breakpoints';
|
|
2
|
-
export { useActiveBreakpoint } from './hooks/use-active-breakpoint';
|
|
3
1
|
export { useActivateBreakpoint } from './hooks/use-activate-breakpoint';
|
|
2
|
+
export { useActiveBreakpoint } from './hooks/use-active-breakpoint';
|
|
3
|
+
export { useBreakpoints } from './hooks/use-breakpoints';
|
|
4
4
|
export { useBreakpointsMap } from './hooks/use-breakpoints-map';
|
|
5
5
|
export { getBreakpoints } from './sync/get-breakpoints';
|
|
6
6
|
export { getBreakpointsTree } from './sync/get-breakpoints-tree';
|
|
7
7
|
|
|
8
|
-
export
|
|
8
|
+
export { type ExtendedWindow } from './types';
|
|
9
|
+
export type { Breakpoint, BreakpointId, BreakpointNode, BreakpointSize, BreakpointsMap } from './types';
|