@peax/consent-banner-react 0.9.4 → 0.11.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.
Files changed (3) hide show
  1. package/README.md +4 -2
  2. package/dist/index.js +172 -162
  3. package/package.json +5 -5
package/README.md CHANGED
@@ -96,6 +96,8 @@ All `BannerProps` fields are optional, but `floatingButtonPosition` requires `sh
96
96
  | `hasAcceptRejectEqualWeight` | `false` | Give Accept and Reject the same secondary button appearance |
97
97
  | `position` | `'right'` | `'left'`, `'center'`, or `'right'` |
98
98
  | `slideFrom` | `'bottom'` | Bottom, or the matching side for left/right positioning |
99
+ | `isEdgeToEdgeOnMobile` | `false` | In the mobile layout, remove the page gutters so the banner meets the screen's sides and bottom, with square bottom corners; top corners keep `--pxc-radius-xl` |
100
+ | `mobileBreakpoint` | `767` | The widest viewport, in CSS pixels, that gets the mobile layout. Values below 360 are raised to 360. Applied once the page runs JavaScript; server markup and hydration use the default |
99
101
  | `appearanceDelay` | `0` | Delay the first appearance, in milliseconds |
100
102
 
101
103
  ### Content and preferences
@@ -178,7 +180,7 @@ See [Cookie preferences](https://github.com/peaxco/consent/blob/main/docs/prefer
178
180
  | Variant | Presentation | Sizing |
179
181
  | --- | --- | --- |
180
182
  | `compact` | Cookie icon and paragraph; preferences icon becomes a centered text action when space is tight | Fills available width, up to an 800px outer limit including gutters |
181
- | `stacked` | Cookie icon and heading, paragraph, decision buttons, then a centered preferences label | 420px card on desktop; fills the space inside gutters below 768px |
183
+ | `stacked` | Cookie icon and heading, paragraph, decision buttons, then a centered preferences label | 420px card on desktop; fills the space inside gutters in the mobile layout (767px and narrower, or up to `mobileBreakpoint`) |
182
184
 
183
185
  In compact mode, actions adapt to their actual label widths:
184
186
 
@@ -211,7 +213,7 @@ Keyboard order follows visual order where `reading-flow` is supported; otherwise
211
213
 
212
214
  ## Development
213
215
 
214
- Run `yarn workspace @peax/consent-banner-react dev` from the repository. The demo supports `?variant=stacked`, `?locale=de`, and `?showCustomizePreferences=false`. Theme edits update live from source.
216
+ Run `yarn workspace @peax/consent-banner-react dev` from the repository. The demo supports `?variant=stacked`, `?locale=de`, `?showCustomizePreferences=false`, `?edgeToEdge=1` (open it in the mobile layout: below 768px, or up to `?mobileBreakpoint`), and `?mobileBreakpoint=1024`. Theme edits update live from source.
215
217
 
216
218
  See [Banner verification](https://github.com/peaxco/consent/blob/main/docs/engineering/banner-verification.md) for browser setup and snapshot checks, and [Contributing](https://github.com/peaxco/consent/blob/main/CONTRIBUTING.md) for repository commands.
217
219
 
package/dist/index.js CHANGED
@@ -1,17 +1,24 @@
1
1
  import e from "clsx";
2
- import { defaultPreferencesSections as t, entranceDuration as n, entranceEase as r, mergeBannerContent as i, normalizeAppearanceDelay as a, parseMessage as o, reconcileDraft as s, resolveFloatingPosition as c, resolveLocaleContent as l, resolveSections as u, resolveSlideFrom as d, safeHref as f, safeHref as p, transitionPreferencesView as m } from "@peax/consent-banner-shared";
3
- import { forwardRef as h, memo as g, useCallback as _, useEffect as v, useId as y, useMemo as b, useRef as x, useState as S } from "react";
4
- import { AnimatePresence as C, LazyMotion as w, domAnimation as T, useIsPresent as E, usePresenceData as D, useReducedMotion as O } from "framer-motion";
5
- import * as k from "framer-motion/m";
6
- import { Fragment as A, jsx as j, jsxs as M } from "react/jsx-runtime";
7
- import { Button as N } from "@base-ui/react/button";
8
- import { ScrollArea as P } from "@base-ui/react/scroll-area";
9
- import { Switch as F } from "@base-ui/react/switch";
2
+ import { defaultPreferencesSections as t, entranceDuration as n, entranceEase as r, mergeBannerContent as i, mobileMediaQuery as a, normalizeAppearanceDelay as o, normalizeMobileBreakpoint as s, parseMessage as c, reconcileDraft as l, resolveFloatingPosition as u, resolveLocaleContent as d, resolveSections as f, resolveSlideFrom as p, safeHref as m, safeHref as h, transitionPreferencesView as g } from "@peax/consent-banner-shared";
3
+ import { forwardRef as _, memo as v, useCallback as y, useEffect as b, useId as x, useMemo as S, useRef as C, useState as w, useSyncExternalStore as T } from "react";
4
+ import { AnimatePresence as E, LazyMotion as D, domAnimation as O, useIsPresent as k, usePresenceData as A, useReducedMotion as j } from "framer-motion";
5
+ import * as M from "framer-motion/m";
6
+ import { Fragment as N, jsx as P, jsxs as F } from "react/jsx-runtime";
7
+ import { Button as I } from "@base-ui/react/button";
8
+ import { ScrollArea as L } from "@base-ui/react/scroll-area";
9
+ import { Switch as R } from "@base-ui/react/switch";
10
+ //#region src/hooks/useMobileLayout.ts
11
+ var z = () => void 0;
12
+ function B(e) {
13
+ let t = S(() => e !== void 0 && typeof matchMedia == "function" ? matchMedia(a(e)) : void 0, [e]), n = y((e) => (t?.addEventListener("change", e), () => t?.removeEventListener("change", e)), [t]);
14
+ return T(n, () => t?.matches, z);
15
+ }
16
+ //#endregion
10
17
  //#region src/hooks/usePreferencesView.ts
11
- function I({ isOpen: e, showFloatingButton: t, showCustomizePreferences: n, floatingPosition: r, onMsg: i }) {
12
- let [a, o] = S(null), [s, c] = S(!1), l = x(null);
13
- return v(() => {
14
- o((t) => m(t, {
18
+ function V({ isOpen: e, showFloatingButton: t, showCustomizePreferences: n, floatingPosition: r, onMsg: i }) {
19
+ let [a, o] = w(null), [s, c] = w(!1), l = C(null);
20
+ return b(() => {
21
+ o((t) => g(t, {
15
22
  type: "sync",
16
23
  isOpen: e
17
24
  })), (e || !t) && (l.current = null);
@@ -19,14 +26,14 @@ function I({ isOpen: e, showFloatingButton: t, showCustomizePreferences: n, floa
19
26
  view: a,
20
27
  hasPanel: s,
21
28
  setHasPanel: c,
22
- triggerRef: _((e) => {
29
+ triggerRef: y((e) => {
23
30
  if (!e) return;
24
31
  let t = l.current;
25
32
  l.current = null, t && (document.activeElement === t || document.activeElement === document.body) && e.focus();
26
33
  }, []),
27
- onExitFocus: _(() => (t && (l.current = document.activeElement), t), [t]),
34
+ onExitFocus: y(() => (t && (l.current = document.activeElement), t), [t]),
28
35
  openPreferences: (e) => {
29
- o((t) => m(t, {
36
+ o((t) => g(t, {
30
37
  type: "open",
31
38
  source: e,
32
39
  position: r
@@ -36,7 +43,7 @@ function I({ isOpen: e, showFloatingButton: t, showCustomizePreferences: n, floa
36
43
  });
37
44
  },
38
45
  closePreferences: () => {
39
- a && (a.source === "banner" && (l.current = n ? document.activeElement : null, o((e) => m(e, { type: "close" }))), i?.({
46
+ a && (a.source === "banner" && (l.current = n ? document.activeElement : null, o((e) => g(e, { type: "close" }))), i?.({
40
47
  type: "on_close_preferences",
41
48
  source: a.source
42
49
  }));
@@ -45,26 +52,26 @@ function I({ isOpen: e, showFloatingButton: t, showCustomizePreferences: n, floa
45
52
  }
46
53
  //#endregion
47
54
  //#region src/components/Container/ContainerWrapper.tsx
48
- var L = ({ position: t, slideFrom: i, onPresenceChange: a, children: o }) => {
49
- let s = E(), c = D(), l = O(), u = x(null), f = x(null);
50
- v(() => (a?.(!0), () => a?.(!1)), [a]), v(() => {
55
+ var H = ({ position: t, slideFrom: i, onPresenceChange: a, children: o }) => {
56
+ let s = k(), c = A(), l = j(), u = C(null), d = C(null);
57
+ b(() => (a?.(!0), () => a?.(!1)), [a]), b(() => {
51
58
  let e = u.current;
52
59
  if (e) {
53
60
  if (s) {
54
61
  e.removeAttribute("inert");
55
62
  let t = document.activeElement;
56
- t instanceof HTMLElement && !e.contains(t) && (f.current = t);
63
+ t instanceof HTMLElement && !e.contains(t) && (d.current = t);
57
64
  return;
58
65
  }
59
66
  if (e.contains(document.activeElement) && !c?.()) {
60
- let e = f.current;
67
+ let e = d.current;
61
68
  e?.isConnected && e.focus({ preventScroll: !0 });
62
69
  }
63
70
  e.setAttribute("inert", "");
64
71
  }
65
72
  }, [s, c]);
66
- let p = d(t, i), m = { transform: p === "bottom" ? "translateY(100%)" : `translateX(${p === "left" ? "-100%" : "100%"})` };
67
- return /* @__PURE__ */ j(k.div, {
73
+ let f = p(t, i), m = { transform: f === "bottom" ? "translateY(100%)" : `translateX(${f === "left" ? "-100%" : "100%"})` };
74
+ return /* @__PURE__ */ P(M.div, {
68
75
  ref: u,
69
76
  exit: { transform: "none" },
70
77
  initial: m,
@@ -78,9 +85,9 @@ var L = ({ position: t, slideFrom: i, onPresenceChange: a, children: o }) => {
78
85
  },
79
86
  children: o
80
87
  });
81
- }, R = h(function({ isOpen: t = !0, appearanceDelay: n = 0, position: r = "right", slideFrom: i = "bottom", onPresenceChange: o, onExitFocus: s, className: c, children: l, actions: u, ...d }, f) {
82
- let p = a(n), [m, h] = S(p === 0);
83
- return v(() => {
88
+ }, U = _(function({ isOpen: t = !0, appearanceDelay: n = 0, position: r = "right", slideFrom: i = "bottom", onPresenceChange: a, onExitFocus: s, className: c, children: l, actions: u, ...d }, f) {
89
+ let p = o(n), [m, h] = w(p === 0);
90
+ return b(() => {
84
91
  if (m || !t) return;
85
92
  let e = window.setTimeout(() => h(!0), p);
86
93
  return () => window.clearTimeout(e);
@@ -88,24 +95,24 @@ var L = ({ position: t, slideFrom: i, onPresenceChange: a, children: o }) => {
88
95
  p,
89
96
  t,
90
97
  m
91
- ]), /* @__PURE__ */ j(w, {
92
- features: T,
98
+ ]), /* @__PURE__ */ P(D, {
99
+ features: O,
93
100
  strict: !0,
94
- children: /* @__PURE__ */ j(C, {
101
+ children: /* @__PURE__ */ P(E, {
95
102
  custom: s,
96
- children: t && m && /* @__PURE__ */ j(L, {
103
+ children: t && m && /* @__PURE__ */ P(H, {
97
104
  position: r,
98
105
  slideFrom: i,
99
- onPresenceChange: o,
100
- children: /* @__PURE__ */ j("div", {
106
+ onPresenceChange: a,
107
+ children: /* @__PURE__ */ P("div", {
101
108
  ref: f,
102
109
  className: e("pxc-container", u != null && "pxc-container--with-actions", c),
103
110
  ...d,
104
- children: u == null ? l : /* @__PURE__ */ M(A, { children: [/* @__PURE__ */ j("div", {
111
+ children: u == null ? l : /* @__PURE__ */ F(N, { children: [/* @__PURE__ */ P("div", {
105
112
  className: "pxc-container__content",
106
113
  "data-container-content": !0,
107
114
  children: l
108
- }), /* @__PURE__ */ j("div", {
115
+ }), /* @__PURE__ */ P("div", {
109
116
  className: "pxc-container__actions",
110
117
  "data-container-actions": !0,
111
118
  children: u
@@ -114,7 +121,7 @@ var L = ({ position: t, slideFrom: i, onPresenceChange: a, children: o }) => {
114
121
  }, "container")
115
122
  })
116
123
  });
117
- }), z = () => /* @__PURE__ */ M("svg", {
124
+ }), W = () => /* @__PURE__ */ F("svg", {
118
125
  width: "24",
119
126
  height: "24",
120
127
  viewBox: "0 0 24 24",
@@ -127,14 +134,14 @@ var L = ({ position: t, slideFrom: i, onPresenceChange: a, children: o }) => {
127
134
  "aria-hidden": "true",
128
135
  focusable: "false",
129
136
  children: [
130
- /* @__PURE__ */ j("path", { d: "M11 17H11.01" }),
131
- /* @__PURE__ */ j("path", { d: "M12.025 2.61499C12.054 2.29199 11.82 1.98399 11.496 1.99999C9.02138 2.12561 6.68155 3.16546 4.92997 4.91799C3.0533 6.79479 1.99905 9.34023 1.99915 11.9943C1.99924 14.6484 3.05367 17.1938 4.93047 19.0705C6.80728 20.9472 9.35272 22.0014 12.0068 22.0013C14.6609 22.0012 17.2063 20.9468 19.083 19.07C20.8344 17.3179 21.8732 14.9782 21.998 12.504C22.014 12.181 21.707 11.947 21.384 11.977C20.8082 12.0311 20.2276 11.9597 19.6821 11.7677C19.1366 11.5757 18.6392 11.2678 18.2242 10.865C17.8092 10.4623 17.4864 9.97436 17.2782 9.43485C17.07 8.89535 16.9812 8.31711 17.018 7.73999C17.0244 7.63881 17.0093 7.53742 16.9734 7.44257C16.9376 7.34773 16.882 7.26161 16.8103 7.18997C16.7385 7.11833 16.6523 7.06281 16.5574 7.02712C16.4626 6.99143 16.3611 6.97638 16.26 6.98299C15.6828 7.01952 15.1046 6.93048 14.5652 6.72199C14.0258 6.51351 13.538 6.19054 13.1355 5.77535C12.7329 5.36015 12.4252 4.86261 12.2335 4.31701C12.0417 3.77141 11.9706 3.19073 12.025 2.61499Z" }),
132
- /* @__PURE__ */ j("path", { d: "M12 12H12.01" }),
133
- /* @__PURE__ */ j("path", { d: "M16 16H16.01" }),
134
- /* @__PURE__ */ j("path", { d: "M7 14H7.01" }),
135
- /* @__PURE__ */ j("path", { d: "M9 8H9.01" })
137
+ /* @__PURE__ */ P("path", { d: "M11 17H11.01" }),
138
+ /* @__PURE__ */ P("path", { d: "M12.025 2.61499C12.054 2.29199 11.82 1.98399 11.496 1.99999C9.02138 2.12561 6.68155 3.16546 4.92997 4.91799C3.0533 6.79479 1.99905 9.34023 1.99915 11.9943C1.99924 14.6484 3.05367 17.1938 4.93047 19.0705C6.80728 20.9472 9.35272 22.0014 12.0068 22.0013C14.6609 22.0012 17.2063 20.9468 19.083 19.07C20.8344 17.3179 21.8732 14.9782 21.998 12.504C22.014 12.181 21.707 11.947 21.384 11.977C20.8082 12.0311 20.2276 11.9597 19.6821 11.7677C19.1366 11.5757 18.6392 11.2678 18.2242 10.865C17.8092 10.4623 17.4864 9.97436 17.2782 9.43485C17.07 8.89535 16.9812 8.31711 17.018 7.73999C17.0244 7.63881 17.0093 7.53742 16.9734 7.44257C16.9376 7.34773 16.882 7.26161 16.8103 7.18997C16.7385 7.11833 16.6523 7.06281 16.5574 7.02712C16.4626 6.99143 16.3611 6.97638 16.26 6.98299C15.6828 7.01952 15.1046 6.93048 14.5652 6.72199C14.0258 6.51351 13.538 6.19054 13.1355 5.77535C12.7329 5.36015 12.4252 4.86261 12.2335 4.31701C12.0417 3.77141 11.9706 3.19073 12.025 2.61499Z" }),
139
+ /* @__PURE__ */ P("path", { d: "M12 12H12.01" }),
140
+ /* @__PURE__ */ P("path", { d: "M16 16H16.01" }),
141
+ /* @__PURE__ */ P("path", { d: "M7 14H7.01" }),
142
+ /* @__PURE__ */ P("path", { d: "M9 8H9.01" })
136
143
  ]
137
- }), B = () => /* @__PURE__ */ M("svg", {
144
+ }), G = () => /* @__PURE__ */ F("svg", {
138
145
  xmlns: "http://www.w3.org/2000/svg",
139
146
  width: "24",
140
147
  height: "24",
@@ -147,40 +154,40 @@ var L = ({ position: t, slideFrom: i, onPresenceChange: a, children: o }) => {
147
154
  "aria-hidden": "true",
148
155
  focusable: "false",
149
156
  children: [
150
- /* @__PURE__ */ j("path", { d: "M14 17H5" }),
151
- /* @__PURE__ */ j("path", { d: "M19 7h-9" }),
152
- /* @__PURE__ */ j("circle", {
157
+ /* @__PURE__ */ P("path", { d: "M14 17H5" }),
158
+ /* @__PURE__ */ P("path", { d: "M19 7h-9" }),
159
+ /* @__PURE__ */ P("circle", {
153
160
  cx: "17",
154
161
  cy: "17",
155
162
  r: "3"
156
163
  }),
157
- /* @__PURE__ */ j("circle", {
164
+ /* @__PURE__ */ P("circle", {
158
165
  cx: "7",
159
166
  cy: "7",
160
167
  r: "3"
161
168
  })
162
169
  ]
163
- }), V = h(function({ variant: t, className: n, children: r, ...i }, a) {
164
- return /* @__PURE__ */ j(N, {
170
+ }), K = _(function({ variant: t, className: n, children: r, ...i }, a) {
171
+ return /* @__PURE__ */ P(I, {
165
172
  ref: a,
166
173
  className: (r) => e("pxc-button", `pxc-button--${t}`, typeof n == "function" ? n(r) : n),
167
174
  ...i,
168
175
  focusableWhenDisabled: !1,
169
176
  children: r
170
177
  });
171
- }), H = h(function({ label: e, position: t, onMsg: n }, r) {
172
- return /* @__PURE__ */ j(V, {
178
+ }), q = _(function({ label: e, position: t, onMsg: n }, r) {
179
+ return /* @__PURE__ */ P(K, {
173
180
  ref: r,
174
181
  variant: "iconed",
175
182
  className: `pxc-floating-button pxc-floating-button--${t}`,
176
183
  "aria-label": e,
177
184
  onClick: () => n({ type: "on_open_preferences" }),
178
- children: /* @__PURE__ */ j(z, {})
185
+ children: /* @__PURE__ */ P(W, {})
179
186
  });
180
- }), U = () => /* @__PURE__ */ j("div", {
187
+ }), J = () => /* @__PURE__ */ P("div", {
181
188
  className: "pxc-lead-icon",
182
- children: /* @__PURE__ */ j(z, {})
183
- }), W = () => /* @__PURE__ */ j("svg", {
189
+ children: /* @__PURE__ */ P(W, {})
190
+ }), Y = () => /* @__PURE__ */ P("svg", {
184
191
  viewBox: "0 0 24 24",
185
192
  fill: "none",
186
193
  stroke: "currentColor",
@@ -188,36 +195,36 @@ var L = ({ position: t, slideFrom: i, onPresenceChange: a, children: o }) => {
188
195
  strokeLinecap: "round",
189
196
  "aria-hidden": "true",
190
197
  focusable: "false",
191
- children: /* @__PURE__ */ j("path", { d: "m6 6 12 12M6 18 18 6" })
198
+ children: /* @__PURE__ */ P("path", { d: "m6 6 12 12M6 18 18 6" })
192
199
  });
193
200
  //#endregion
194
201
  //#region src/utils/notReachable.ts
195
- function G(e, t = { throwError: !0 }) {
202
+ function X(e, t = { throwError: !0 }) {
196
203
  let n = `Should not be reached ${e}`;
197
204
  if (t.throwError) throw Error(n);
198
205
  }
199
206
  //#endregion
200
207
  //#region src/components/Text/RichText.tsx
201
- var K = ({ message: e, links: t }) => b(() => o(e, Object.keys(t)), [e, t]).map((e) => {
208
+ var Z = ({ message: e, links: t }) => S(() => c(e, Object.keys(t)), [e, t]).map((e) => {
202
209
  if (e.type === "text") return e.value;
203
- let n = f(t[e.name]);
204
- return n && e.value.trim() ? /* @__PURE__ */ j("a", {
210
+ let n = m(t[e.name]);
211
+ return n && e.value.trim() ? /* @__PURE__ */ P("a", {
205
212
  className: "pxc-link",
206
213
  href: n,
207
214
  children: e.value
208
215
  }, e.offset) : e.value;
209
- }), q = ({ section: e, checked: t, links: n, onMsg: r }) => {
210
- let i = y();
211
- return /* @__PURE__ */ M("section", {
216
+ }), Q = ({ section: e, checked: t, links: n, onMsg: r }) => {
217
+ let i = x();
218
+ return /* @__PURE__ */ F("section", {
212
219
  className: "pxc-preferences__section",
213
220
  "aria-labelledby": `${i}-title`,
214
- children: [/* @__PURE__ */ M("div", {
221
+ children: [/* @__PURE__ */ F("div", {
215
222
  className: "pxc-preferences__section-heading",
216
- children: [/* @__PURE__ */ j("h4", {
223
+ children: [/* @__PURE__ */ P("h4", {
217
224
  id: `${i}-title`,
218
225
  className: "pxc-text--h4",
219
226
  children: e.title
220
- }), /* @__PURE__ */ j(F.Root, {
227
+ }), /* @__PURE__ */ P(R.Root, {
221
228
  className: "pxc-switch",
222
229
  checked: t,
223
230
  disabled: e.disabled ?? !1,
@@ -228,213 +235,216 @@ var K = ({ message: e, links: t }) => b(() => o(e, Object.keys(t)), [e, t]).map(
228
235
  sectionId: e.id,
229
236
  checked: t
230
237
  }),
231
- children: /* @__PURE__ */ j(F.Thumb, { className: "pxc-switch__thumb" })
238
+ children: /* @__PURE__ */ P(R.Thumb, { className: "pxc-switch__thumb" })
232
239
  })]
233
- }), e.text && /* @__PURE__ */ j("p", {
240
+ }), e.text && /* @__PURE__ */ P("p", {
234
241
  id: `${i}-text`,
235
242
  className: "pxc-text--paragraph pxc-preferences__description",
236
- children: /* @__PURE__ */ j(K, {
243
+ children: /* @__PURE__ */ P(Z, {
237
244
  message: e.text,
238
245
  links: n
239
246
  })
240
247
  })]
241
248
  });
242
- }, J = ({ sections: e, content: t, links: n, onMsg: r }) => {
243
- let i = y(), a = x(null), [o, c] = S(() => s(e)), l = s(e, o);
244
- (o.size !== l.size || [...l].some(([e, t]) => o.get(e) !== t)) && c(l), v(() => {
249
+ }, ee = ({ sections: e, content: t, links: n, onMsg: r }) => {
250
+ let i = x(), a = C(null), [o, s] = w(() => l(e)), c = l(e, o);
251
+ (o.size !== c.size || [...c].some(([e, t]) => o.get(e) !== t)) && s(c), b(() => {
245
252
  a.current?.focus({ preventScroll: !0 });
246
253
  }, []);
247
- let u = p(n.cookiePolicy);
248
- return /* @__PURE__ */ M("section", {
254
+ let u = h(n.cookiePolicy);
255
+ return /* @__PURE__ */ F("section", {
249
256
  className: "pxc-preferences",
250
257
  "aria-labelledby": i,
251
258
  onKeyDown: (e) => {
252
259
  e.key === "Escape" && (e.preventDefault(), e.stopPropagation(), r({ type: "on_close_preferences" }));
253
260
  },
254
261
  children: [
255
- /* @__PURE__ */ M("header", {
262
+ /* @__PURE__ */ F("header", {
256
263
  className: "pxc-preferences__header",
257
- children: [/* @__PURE__ */ j("h3", {
264
+ children: [/* @__PURE__ */ P("h3", {
258
265
  id: i,
259
266
  ref: a,
260
267
  tabIndex: -1,
261
268
  className: "pxc-text--h3",
262
269
  children: t.preferencesTitle
263
- }), /* @__PURE__ */ j(V, {
270
+ }), /* @__PURE__ */ P(K, {
264
271
  variant: "iconed",
265
272
  "aria-label": t.closePreferencesLabel,
266
273
  onClick: () => r({ type: "on_close_preferences" }),
267
- children: /* @__PURE__ */ j(W, {})
274
+ children: /* @__PURE__ */ P(Y, {})
268
275
  })]
269
276
  }),
270
- /* @__PURE__ */ M(P.Root, {
277
+ /* @__PURE__ */ F(L.Root, {
271
278
  className: "pxc-preferences__scroll-area",
272
- children: [/* @__PURE__ */ j(P.Viewport, {
279
+ children: [/* @__PURE__ */ P(L.Viewport, {
273
280
  className: "pxc-preferences__body",
274
281
  role: "group",
275
282
  "aria-labelledby": i,
276
- children: /* @__PURE__ */ M(P.Content, {
283
+ children: /* @__PURE__ */ F(L.Content, {
277
284
  className: "pxc-preferences__content",
278
- children: [t.preferencesText && /* @__PURE__ */ j("p", {
285
+ children: [t.preferencesText && /* @__PURE__ */ P("p", {
279
286
  className: "pxc-text--paragraph pxc-preferences__introduction",
280
- children: /* @__PURE__ */ j(K, {
287
+ children: /* @__PURE__ */ P(Z, {
281
288
  message: t.preferencesText,
282
289
  links: n
283
290
  })
284
- }), e.map((e) => /* @__PURE__ */ j(q, {
291
+ }), e.map((e) => /* @__PURE__ */ P(Q, {
285
292
  section: e,
286
- checked: l.get(e.id) ?? e.checked,
293
+ checked: c.get(e.id) ?? e.checked,
287
294
  links: n,
288
295
  onMsg: (e) => {
289
296
  switch (e.type) {
290
297
  case "on_change_preference":
291
- c((t) => new Map(t).set(e.sectionId, e.checked)), r(e);
298
+ s((t) => new Map(t).set(e.sectionId, e.checked)), r(e);
292
299
  break;
293
- default: G(e.type);
300
+ default: X(e.type);
294
301
  }
295
302
  }
296
303
  }, e.id))]
297
304
  })
298
- }), /* @__PURE__ */ j(P.Scrollbar, {
305
+ }), /* @__PURE__ */ P(L.Scrollbar, {
299
306
  className: "pxc-preferences__scrollbar",
300
- children: /* @__PURE__ */ j(P.Thumb, {
307
+ children: /* @__PURE__ */ P(L.Thumb, {
301
308
  className: "pxc-preferences__scroll-thumb",
302
- children: /* @__PURE__ */ j("span", { className: "pxc-preferences__scroll-indicator" })
309
+ children: /* @__PURE__ */ P("span", { className: "pxc-preferences__scroll-indicator" })
303
310
  })
304
311
  })]
305
312
  }),
306
- /* @__PURE__ */ M("footer", {
313
+ /* @__PURE__ */ F("footer", {
307
314
  className: "pxc-preferences__footer",
308
- children: [/* @__PURE__ */ j(V, {
315
+ children: [/* @__PURE__ */ P(K, {
309
316
  variant: "primary",
310
317
  onClick: () => r({
311
318
  type: "on_apply_preferences",
312
- preferences: Object.fromEntries(l)
319
+ preferences: Object.fromEntries(c)
313
320
  }),
314
321
  children: t.applyPreferencesLabel
315
- }), u ? /* @__PURE__ */ j("a", {
322
+ }), u ? /* @__PURE__ */ P("a", {
316
323
  className: "pxc-link pxc-preferences__policy",
317
324
  href: u,
318
325
  children: t.cookiePolicyLabel
319
- }) : /* @__PURE__ */ j("span", {
326
+ }) : /* @__PURE__ */ P("span", {
320
327
  className: "pxc-preferences__policy",
321
328
  children: t.cookiePolicyLabel
322
329
  })]
323
330
  })
324
331
  ]
325
332
  });
326
- }, Y = ({ variant: e, tag: t, children: n }) => {
333
+ }, $ = ({ variant: e, tag: t, children: n }) => {
327
334
  switch (e) {
328
- case "label": return /* @__PURE__ */ j(t, {
335
+ case "label": return /* @__PURE__ */ P(t, {
329
336
  className: "pxc-text--label",
330
337
  children: n
331
338
  });
332
- case "heading": return /* @__PURE__ */ j(t, {
339
+ case "heading": return /* @__PURE__ */ P(t, {
333
340
  className: `pxc-text--${t}`,
334
341
  children: n
335
342
  });
336
- case "paragraph": return /* @__PURE__ */ j("p", {
343
+ case "paragraph": return /* @__PURE__ */ P("p", {
337
344
  className: "pxc-text--paragraph",
338
345
  children: n
339
346
  });
340
- default: return G(e);
347
+ default: return X(e);
341
348
  }
342
- }, X = ({ variant: e, content: t, equalWeight: n, showCustomizePreferences: r, preferencesRef: i, onMsg: a }) => /* @__PURE__ */ M(A, { children: [/* @__PURE__ */ M("div", {
349
+ }, te = ({ variant: e, content: t, equalWeight: n, showCustomizePreferences: r, preferencesRef: i, onMsg: a }) => /* @__PURE__ */ F(N, { children: [/* @__PURE__ */ F("div", {
343
350
  className: "pxc-banner__choices",
344
- children: [/* @__PURE__ */ j(V, {
351
+ children: [/* @__PURE__ */ P(K, {
345
352
  variant: n ? "secondary" : "primary",
346
353
  onClick: () => a({ type: "on_accept_all" }),
347
354
  children: t.acceptAllLabel
348
- }), /* @__PURE__ */ j(V, {
355
+ }), /* @__PURE__ */ P(K, {
349
356
  variant: "secondary",
350
357
  onClick: () => a({ type: "on_reject_all" }),
351
358
  children: t.rejectAllLabel
352
359
  })]
353
- }), r && /* @__PURE__ */ j("div", {
360
+ }), r && /* @__PURE__ */ P("div", {
354
361
  className: "pxc-banner__preferences",
355
- children: /* @__PURE__ */ j(V, {
362
+ children: /* @__PURE__ */ P(K, {
356
363
  ref: i,
357
364
  variant: "inline",
358
365
  className: e === "compact" ? "pxc-button--iconed" : void 0,
359
366
  "aria-label": t.customizePreferencesLabel,
360
367
  onClick: () => a({ type: "on_open_preferences" }),
361
- children: e === "compact" ? /* @__PURE__ */ M(A, { children: [/* @__PURE__ */ j(B, {}), /* @__PURE__ */ j("span", { children: t.customizePreferencesLabel })] }) : t.customizePreferencesLabel
368
+ children: e === "compact" ? /* @__PURE__ */ F(N, { children: [/* @__PURE__ */ P(G, {}), /* @__PURE__ */ P("span", { children: t.customizePreferencesLabel })] }) : t.customizePreferencesLabel
362
369
  })
363
- })] }), Z = g(function({ bannerContent: n, cookiePolicyUrl: r, isOpen: a = !1, appearanceDelay: o = 0, preferencesSections: s = t, preferencesContent: d, hasAcceptRejectEqualWeight: f = !1, showCustomizePreferences: p = !0, showFloatingButton: m = !0, floatingButtonPosition: h, variant: g = "compact", theme: _ = "auto", locale: v = "en", locales: y, onMsg: x, className: S, style: C, ...w }) {
364
- let T = b(() => l(v, y, n !== void 0 || d !== void 0), [
365
- v,
366
- y,
370
+ })] }), ne = v(function({ bannerContent: n, cookiePolicyUrl: r, isOpen: a = !1, appearanceDelay: o = 0, preferencesSections: c = t, preferencesContent: l, hasAcceptRejectEqualWeight: p = !1, showCustomizePreferences: m = !0, isEdgeToEdgeOnMobile: h = !1, mobileBreakpoint: g, showFloatingButton: _ = !0, floatingButtonPosition: v, variant: y = "compact", theme: b = "auto", locale: x = "en", locales: C, onMsg: w, className: T, style: E, ...D }) {
371
+ let O = S(() => d(x, C, n !== void 0 || l !== void 0), [
372
+ x,
373
+ C,
367
374
  n,
368
- d
369
- ]), E = i(T.banner, n), D = b(() => ({ cookiePolicy: r }), [r]), O = b(() => u(s, d, T.preferences), [
370
- s,
371
- d,
372
- T.preferences
373
- ]), k = c(w.position, h), N = I({
375
+ l
376
+ ]), k = i(O.banner, n), A = S(() => ({ cookiePolicy: r }), [r]), j = S(() => f(c, l, O.preferences), [
377
+ c,
378
+ l,
379
+ O.preferences
380
+ ]), M = u(D.position, v), I = V({
374
381
  isOpen: a,
375
- showFloatingButton: m,
376
- showCustomizePreferences: p,
377
- floatingPosition: k,
378
- onMsg: x
379
- }), P = N.view !== null, F = N.view?.source === "floating-button" ? {
380
- ...w,
381
- position: N.view.position,
382
+ showFloatingButton: _,
383
+ showCustomizePreferences: m,
384
+ floatingPosition: M,
385
+ onMsg: w
386
+ }), L = s(g), R = B(L), z = I.view !== null, H = I.view?.source === "floating-button" ? {
387
+ ...D,
388
+ position: I.view.position,
382
389
  slideFrom: "bottom"
383
- } : w, L = (e) => {
384
- if (e.type === "on_open_preferences") return N.openPreferences("banner");
385
- if (e.type === "on_close_preferences") return N.closePreferences();
386
- x?.(e);
390
+ } : D, W = (e) => {
391
+ if (e.type === "on_open_preferences") return I.openPreferences("banner");
392
+ if (e.type === "on_close_preferences") return I.closePreferences();
393
+ w?.(e);
387
394
  };
388
- return /* @__PURE__ */ M("div", {
389
- "data-theme": _,
390
- "data-banner-variant": g,
391
- className: e("pxc", S),
395
+ return /* @__PURE__ */ F("div", {
396
+ "data-theme": b,
397
+ "data-banner-variant": y,
398
+ "data-mobile-edge-to-edge": h || void 0,
399
+ "data-mobile-breakpoint": R === void 0 ? void 0 : L,
400
+ "data-mobile": R || void 0,
401
+ className: e("pxc", T),
392
402
  style: {
393
403
  fontFamily: "var(--pxc-font-family)",
394
- ...C
404
+ ...E
395
405
  },
396
- lang: T.locale,
397
- children: [/* @__PURE__ */ j(R, {
398
- ...F,
406
+ lang: O.locale,
407
+ children: [/* @__PURE__ */ P(U, {
408
+ ...H,
399
409
  isOpen: a,
400
- onExitFocus: N.onExitFocus,
401
- onPresenceChange: N.setHasPanel,
410
+ onExitFocus: I.onExitFocus,
411
+ onPresenceChange: I.setHasPanel,
402
412
  appearanceDelay: o,
403
- className: P ? "pxc-container--preferences" : void 0,
404
- actions: P ? null : /* @__PURE__ */ j(X, {
405
- variant: g,
406
- content: E,
407
- equalWeight: f,
408
- showCustomizePreferences: p,
409
- preferencesRef: N.triggerRef,
410
- onMsg: L
413
+ className: z ? "pxc-container--preferences" : void 0,
414
+ actions: z ? null : /* @__PURE__ */ P(te, {
415
+ variant: y,
416
+ content: k,
417
+ equalWeight: p,
418
+ showCustomizePreferences: m,
419
+ preferencesRef: I.triggerRef,
420
+ onMsg: W
411
421
  }),
412
- children: P ? /* @__PURE__ */ j(J, {
413
- links: D,
414
- content: E,
415
- sections: O,
416
- onMsg: L
417
- }) : /* @__PURE__ */ M(A, { children: [g === "stacked" ? /* @__PURE__ */ M("div", {
422
+ children: z ? /* @__PURE__ */ P(ee, {
423
+ links: A,
424
+ content: k,
425
+ sections: j,
426
+ onMsg: W
427
+ }) : /* @__PURE__ */ F(N, { children: [y === "stacked" ? /* @__PURE__ */ F("div", {
418
428
  className: "pxc-banner__heading",
419
- children: [/* @__PURE__ */ j(U, {}), /* @__PURE__ */ j(Y, {
429
+ children: [/* @__PURE__ */ P(J, {}), /* @__PURE__ */ P($, {
420
430
  variant: "heading",
421
431
  tag: "h3",
422
- children: E.title
432
+ children: k.title
423
433
  })]
424
- }) : /* @__PURE__ */ j(U, {}), /* @__PURE__ */ j(Y, {
434
+ }) : /* @__PURE__ */ P(J, {}), /* @__PURE__ */ P($, {
425
435
  variant: "paragraph",
426
- children: /* @__PURE__ */ j(K, {
427
- message: E.collapsedText,
428
- links: D
436
+ children: /* @__PURE__ */ P(Z, {
437
+ message: k.collapsedText,
438
+ links: A
429
439
  })
430
440
  })] })
431
- }), m && !a && !N.hasPanel && /* @__PURE__ */ j(H, {
432
- ref: N.triggerRef,
433
- position: k,
434
- label: E.customizePreferencesLabel.trim() || T.banner.customizePreferencesLabel,
435
- onMsg: () => N.openPreferences("floating-button")
441
+ }), _ && !a && !I.hasPanel && /* @__PURE__ */ P(q, {
442
+ ref: I.triggerRef,
443
+ position: M,
444
+ label: k.customizePreferencesLabel.trim() || O.banner.customizePreferencesLabel,
445
+ onMsg: () => I.openPreferences("floating-button")
436
446
  })]
437
447
  });
438
448
  });
439
449
  //#endregion
440
- export { Z as Banner };
450
+ export { ne as Banner };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@peax/consent-banner-react",
3
- "version": "0.9.4",
3
+ "version": "0.11.0",
4
4
  "description": "Accessible React bindings and components for Peax Consent.",
5
5
  "keywords": [
6
6
  "consent-management",
@@ -50,14 +50,14 @@
50
50
  "typecheck": "tsc --noEmit"
51
51
  },
52
52
  "peerDependencies": {
53
- "@peax/consent-banner-locales": "^0.9.4",
53
+ "@peax/consent-banner-locales": "^0.11.0",
54
54
  "react": "^18.2.0 || ^19.0.0",
55
55
  "react-dom": "^18.2.0 || ^19.0.0"
56
56
  },
57
57
  "dependencies": {
58
58
  "@base-ui/react": "^1.8.0",
59
- "@peax/consent-banner-shared": "^0.9.4",
60
- "@peax/consent-banner-theme": "^0.9.4",
59
+ "@peax/consent-banner-shared": "^0.11.0",
60
+ "@peax/consent-banner-theme": "^0.11.0",
61
61
  "clsx": "^2.1.1",
62
62
  "framer-motion": "^14.0.0"
63
63
  },
@@ -65,7 +65,7 @@
65
65
  "@axe-core/playwright": "^4.13.0",
66
66
  "@fontsource/figtree": "^5.3.0",
67
67
  "@fontsource/poppins": "^5.3.0",
68
- "@peax/consent-banner-locales": "^0.9.4",
68
+ "@peax/consent-banner-locales": "^0.11.0",
69
69
  "@testing-library/dom": "^10.4.2",
70
70
  "@testing-library/jest-dom": "^7.0.1",
71
71
  "@testing-library/react": "^16.3.3",