@bsuite/page-builder 2.1.0-next.0 → 2.2.0
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.
|
@@ -21,17 +21,37 @@ export type ResponsiveBreakpoint = (typeof RESPONSIVE_BREAKPOINTS)[number];
|
|
|
21
21
|
* and the SE resize handle could not widen a card that was already at the grid
|
|
22
22
|
* bound nor narrow one whose `minW` had been clamped up to `cols`.
|
|
23
23
|
*
|
|
24
|
-
* `md` and `sm` therefore mirror `lg
|
|
25
|
-
*
|
|
26
|
-
*
|
|
27
|
-
*
|
|
24
|
+
* `md` and `sm` therefore mirror `lg`. So does `xs`, as of 2026-08-26 — the
|
|
25
|
+
* 2026-08-13 fix stopped ONE BREAKPOINT SHORT of the sessions D-75 was reported
|
|
26
|
+
* from, and the operator kept reporting it.
|
|
27
|
+
*
|
|
28
|
+
* MEASURED on production crm.crm7.app/dashboard, signed in, with a positive
|
|
29
|
+
* control in both directions at a SINGLE viewport (1024x1000) where the only
|
|
30
|
+
* variable is the sidebar:
|
|
31
|
+
*
|
|
32
|
+
* sidebar expanded -> container 664px -> `xs` -> the columns control was
|
|
33
|
+
* INERT: presets 2/4/12 each produced the identical
|
|
34
|
+
* single-column layout.
|
|
35
|
+
* sidebar collapsed -> container 872px -> `sm` -> the control ACTED: three
|
|
36
|
+
* presets, three distinct layouts.
|
|
37
|
+
*
|
|
38
|
+
* Same page, same viewport, same control. And in the inert case the control
|
|
39
|
+
* stayed fully interactive — it accepted the click and updated its own
|
|
40
|
+
* `aria-pressed`/`data-active` while nothing on screen moved.
|
|
41
|
+
*
|
|
42
|
+
* `xs` spans a 480-768px container. At 664px a two-column arrangement is ~330px
|
|
43
|
+
* a side, which is not the "unreadable sliver" the stacking rule was written to
|
|
44
|
+
* prevent; that rationale was about phones, and a 1024px laptop with a sidebar
|
|
45
|
+
* open is not a phone. Only `xxs` (< 480px container) genuinely is, so only
|
|
46
|
+
* `xxs` still stacks.
|
|
28
47
|
*/
|
|
29
|
-
export declare const MIRRORED_BREAKPOINTS: readonly ["md", "sm"];
|
|
48
|
+
export declare const MIRRORED_BREAKPOINTS: readonly ["md", "sm", "xs"];
|
|
30
49
|
/**
|
|
31
50
|
* Breakpoints derived as a single full-width stack — narrow enough that a
|
|
32
|
-
* multi-column arrangement cannot be read.
|
|
51
|
+
* multi-column arrangement genuinely cannot be read. Below a 480px container
|
|
52
|
+
* even two columns are ~230px a side before margins, which is the sliver case.
|
|
33
53
|
*/
|
|
34
|
-
export declare const STACKED_BREAKPOINTS: readonly ["
|
|
54
|
+
export declare const STACKED_BREAKPOINTS: readonly ["xxs"];
|
|
35
55
|
/**
|
|
36
56
|
* Every breakpoint this module DERIVES from `lg`.
|
|
37
57
|
*
|
|
@@ -60,10 +80,11 @@ export interface BuildResponsiveLayoutsOptions {
|
|
|
60
80
|
* Ensure a GridLayouts object has entries for all responsive breakpoints
|
|
61
81
|
* (lg, md, sm, xs, xxs).
|
|
62
82
|
*
|
|
63
|
-
* - `md` and `
|
|
64
|
-
* every desktop and tablet container width (see
|
|
65
|
-
*
|
|
66
|
-
*
|
|
83
|
+
* - `md`, `sm` and `xs` mirror `lg` so the user's chosen column arrangement
|
|
84
|
+
* survives every desktop, laptop and tablet container width (see
|
|
85
|
+
* {@link MIRRORED_BREAKPOINTS}).
|
|
86
|
+
* - `xxs` is derived as a single-column stack so a phone viewport never
|
|
87
|
+
* squashes cards into unreadable slivers.
|
|
67
88
|
* - Consumer-supplied breakpoints are preserved verbatim. Supplying one opts
|
|
68
89
|
* that breakpoint OUT of tracking `lg`, including out of the columns slider —
|
|
69
90
|
* prefer not to.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"buildResponsiveLayouts.d.ts","sourceRoot":"","sources":["../src/buildResponsiveLayouts.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAkB,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9D,eAAO,MAAM,sBAAsB,0CAA2C,CAAC;AAC/E,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE3E
|
|
1
|
+
{"version":3,"file":"buildResponsiveLayouts.d.ts","sourceRoot":"","sources":["../src/buildResponsiveLayouts.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAkB,WAAW,EAAE,MAAM,YAAY,CAAC;AAE9D,eAAO,MAAM,sBAAsB,0CAA2C,CAAC;AAC/E,MAAM,MAAM,oBAAoB,GAAG,CAAC,OAAO,sBAAsB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,eAAO,MAAM,oBAAoB,6BAA8B,CAAC;AAEhE;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,kBAAmB,CAAC;AAEpD;;;;;;;;;GASG;AACH,eAAO,MAAM,mBAAmB,EAAE,SAAS,oBAAoB,EAG9D,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAE/D;AAED;;;;;;;GAOG;AACH,wBAAgB,2BAA2B,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAEvE;AAED,MAAM,WAAW,6BAA6B;IAC5C,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AA2BD;;;;;;;;;;;;GAYG;AACH,wBAAgB,sBAAsB,CACpC,OAAO,EAAE,WAAW,EACpB,EAAE,IAAS,EAAE,GAAE,6BAAkC,GAChD,WAAW,CAyBb"}
|
|
@@ -19,17 +19,37 @@ export const RESPONSIVE_BREAKPOINTS = ['lg', 'md', 'sm', 'xs', 'xxs'];
|
|
|
19
19
|
* and the SE resize handle could not widen a card that was already at the grid
|
|
20
20
|
* bound nor narrow one whose `minW` had been clamped up to `cols`.
|
|
21
21
|
*
|
|
22
|
-
* `md` and `sm` therefore mirror `lg
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
22
|
+
* `md` and `sm` therefore mirror `lg`. So does `xs`, as of 2026-08-26 — the
|
|
23
|
+
* 2026-08-13 fix stopped ONE BREAKPOINT SHORT of the sessions D-75 was reported
|
|
24
|
+
* from, and the operator kept reporting it.
|
|
25
|
+
*
|
|
26
|
+
* MEASURED on production crm.crm7.app/dashboard, signed in, with a positive
|
|
27
|
+
* control in both directions at a SINGLE viewport (1024x1000) where the only
|
|
28
|
+
* variable is the sidebar:
|
|
29
|
+
*
|
|
30
|
+
* sidebar expanded -> container 664px -> `xs` -> the columns control was
|
|
31
|
+
* INERT: presets 2/4/12 each produced the identical
|
|
32
|
+
* single-column layout.
|
|
33
|
+
* sidebar collapsed -> container 872px -> `sm` -> the control ACTED: three
|
|
34
|
+
* presets, three distinct layouts.
|
|
35
|
+
*
|
|
36
|
+
* Same page, same viewport, same control. And in the inert case the control
|
|
37
|
+
* stayed fully interactive — it accepted the click and updated its own
|
|
38
|
+
* `aria-pressed`/`data-active` while nothing on screen moved.
|
|
39
|
+
*
|
|
40
|
+
* `xs` spans a 480-768px container. At 664px a two-column arrangement is ~330px
|
|
41
|
+
* a side, which is not the "unreadable sliver" the stacking rule was written to
|
|
42
|
+
* prevent; that rationale was about phones, and a 1024px laptop with a sidebar
|
|
43
|
+
* open is not a phone. Only `xxs` (< 480px container) genuinely is, so only
|
|
44
|
+
* `xxs` still stacks.
|
|
26
45
|
*/
|
|
27
|
-
export const MIRRORED_BREAKPOINTS = ['md', 'sm'];
|
|
46
|
+
export const MIRRORED_BREAKPOINTS = ['md', 'sm', 'xs'];
|
|
28
47
|
/**
|
|
29
48
|
* Breakpoints derived as a single full-width stack — narrow enough that a
|
|
30
|
-
* multi-column arrangement cannot be read.
|
|
49
|
+
* multi-column arrangement genuinely cannot be read. Below a 480px container
|
|
50
|
+
* even two columns are ~230px a side before margins, which is the sliver case.
|
|
31
51
|
*/
|
|
32
|
-
export const STACKED_BREAKPOINTS = ['
|
|
52
|
+
export const STACKED_BREAKPOINTS = ['xxs'];
|
|
33
53
|
/**
|
|
34
54
|
* Every breakpoint this module DERIVES from `lg`.
|
|
35
55
|
*
|
|
@@ -61,10 +81,11 @@ export function isCanonicalisableBreakpoint(breakpoint) {
|
|
|
61
81
|
/**
|
|
62
82
|
* Stack items into one full-width column, preserving reading order.
|
|
63
83
|
*
|
|
64
|
-
* `w: cols` is deliberate at the
|
|
65
|
-
*
|
|
66
|
-
*
|
|
67
|
-
*
|
|
84
|
+
* `w: cols` is deliberate at the breakpoint this is used for (`xxs`): the
|
|
85
|
+
* container is narrower than 480px, so a card occupies the whole grid whatever
|
|
86
|
+
* the column count. Do NOT reach for this at wider breakpoints — that was D-75,
|
|
87
|
+
* twice: once for `md`/`sm` in August 2026, and again for `xs`, which is where
|
|
88
|
+
* a 1024px laptop with an open sidebar actually lands.
|
|
68
89
|
*/
|
|
69
90
|
function stackToSingleColumn(items, cols) {
|
|
70
91
|
const sorted = [...items].sort((a, b) => (a.y !== b.y ? a.y - b.y : a.x - b.x));
|
|
@@ -85,10 +106,11 @@ function stackToSingleColumn(items, cols) {
|
|
|
85
106
|
* Ensure a GridLayouts object has entries for all responsive breakpoints
|
|
86
107
|
* (lg, md, sm, xs, xxs).
|
|
87
108
|
*
|
|
88
|
-
* - `md` and `
|
|
89
|
-
* every desktop and tablet container width (see
|
|
90
|
-
*
|
|
91
|
-
*
|
|
109
|
+
* - `md`, `sm` and `xs` mirror `lg` so the user's chosen column arrangement
|
|
110
|
+
* survives every desktop, laptop and tablet container width (see
|
|
111
|
+
* {@link MIRRORED_BREAKPOINTS}).
|
|
112
|
+
* - `xxs` is derived as a single-column stack so a phone viewport never
|
|
113
|
+
* squashes cards into unreadable slivers.
|
|
92
114
|
* - Consumer-supplied breakpoints are preserved verbatim. Supplying one opts
|
|
93
115
|
* that breakpoint OUT of tracking `lg`, including out of the columns slider —
|
|
94
116
|
* prefer not to.
|