@peax/consent-banner-react 0.9.3 → 0.10.0

package/README.md

@@ -96,6 +96,7 @@ All `BannerProps` fields are optional, but `floatingButtonPosition` requires `sh
 | `hasAcceptRejectEqualWeight` | `false` | Give Accept and Reject the same secondary button appearance |
 | `position` | `'right'` | `'left'`, `'center'`, or `'right'` |
 | `slideFrom` | `'bottom'` | Bottom, or the matching side for left/right positioning |
+| `isEdgeToEdgeOnMobile` | `false` | Below 768px, remove the page gutters so the banner meets the screen's sides and bottom, with square bottom corners; top corners keep `--pxc-radius-xl` |
 | `appearanceDelay` | `0` | Delay the first appearance, in milliseconds |
 
 ### Content and preferences
@@ -211,7 +212,7 @@ Keyboard order follows visual order where `reading-flow` is supported; otherwise
 
 ## Development
 
-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.
+Run `yarn workspace @peax/consent-banner-react dev` from the repository. The demo supports `?variant=stacked`, `?locale=de`, `?showCustomizePreferences=false`, and `?edgeToEdge=1` (open it at a width below 768px). Theme edits update live from source.
 
 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.
 

package/dist/index.js

@@ -360,79 +360,80 @@ var K = ({ message: e, links: t }) => b(() => o(e, Object.keys(t)), [e, t]).map(
 		onClick: () => a({ type: "on_open_preferences" }),
 		children: e === "compact" ? /* @__PURE__ */ M(A, { children: [/* @__PURE__ */ j(B, {}), /* @__PURE__ */ j("span", { children: t.customizePreferencesLabel })] }) : t.customizePreferencesLabel
 	})
-})] }), 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 }) {
-	let T = b(() => l(v, y, n !== void 0 || d !== void 0), [
-		v,
+})] }), Z = g(function({ bannerContent: n, cookiePolicyUrl: r, isOpen: a = !1, appearanceDelay: o = 0, preferencesSections: s = t, preferencesContent: d, hasAcceptRejectEqualWeight: f = !1, showCustomizePreferences: p = !0, isEdgeToEdgeOnMobile: m = !1, showFloatingButton: h = !0, floatingButtonPosition: g, variant: _ = "compact", theme: v = "auto", locale: y = "en", locales: x, onMsg: S, className: C, style: w, ...T }) {
+	let E = b(() => l(y, x, n !== void 0 || d !== void 0), [
 		y,
+		x,
 		n,
 		d
-	]), E = i(T.banner, n), D = b(() => ({ cookiePolicy: r }), [r]), O = b(() => u(s, d, T.preferences), [
+	]), D = i(E.banner, n), O = b(() => ({ cookiePolicy: r }), [r]), k = b(() => u(s, d, E.preferences), [
 		s,
 		d,
-		T.preferences
-	]), k = c(w.position, h), N = I({
+		E.preferences
+	]), N = c(T.position, g), P = I({
 		isOpen: a,
-		showFloatingButton: m,
+		showFloatingButton: h,
 		showCustomizePreferences: p,
-		floatingPosition: k,
-		onMsg: x
-	}), P = N.view !== null, F = N.view?.source === "floating-button" ? {
-		...w,
-		position: N.view.position,
+		floatingPosition: N,
+		onMsg: S
+	}), F = P.view !== null, L = P.view?.source === "floating-button" ? {
+		...T,
+		position: P.view.position,
 		slideFrom: "bottom"
-	} : w, L = (e) => {
-		if (e.type === "on_open_preferences") return N.openPreferences("banner");
-		if (e.type === "on_close_preferences") return N.closePreferences();
-		x?.(e);
+	} : T, z = (e) => {
+		if (e.type === "on_open_preferences") return P.openPreferences("banner");
+		if (e.type === "on_close_preferences") return P.closePreferences();
+		S?.(e);
 	};
 	return /* @__PURE__ */ M("div", {
-		"data-theme": _,
-		"data-banner-variant": g,
-		className: e("pxc", S),
+		"data-theme": v,
+		"data-banner-variant": _,
+		"data-mobile-edge-to-edge": m || void 0,
+		className: e("pxc", C),
 		style: {
 			fontFamily: "var(--pxc-font-family)",
-			...C
+			...w
 		},
-		lang: T.locale,
+		lang: E.locale,
 		children: [/* @__PURE__ */ j(R, {
-			...F,
+			...L,
 			isOpen: a,
-			onExitFocus: N.onExitFocus,
-			onPresenceChange: N.setHasPanel,
+			onExitFocus: P.onExitFocus,
+			onPresenceChange: P.setHasPanel,
 			appearanceDelay: o,
-			className: P ? "pxc-container--preferences" : void 0,
-			actions: P ? null : /* @__PURE__ */ j(X, {
-				variant: g,
-				content: E,
+			className: F ? "pxc-container--preferences" : void 0,
+			actions: F ? null : /* @__PURE__ */ j(X, {
+				variant: _,
+				content: D,
 				equalWeight: f,
 				showCustomizePreferences: p,
-				preferencesRef: N.triggerRef,
-				onMsg: L
+				preferencesRef: P.triggerRef,
+				onMsg: z
 			}),
-			children: P ? /* @__PURE__ */ j(J, {
-				links: D,
-				content: E,
-				sections: O,
-				onMsg: L
-			}) : /* @__PURE__ */ M(A, { children: [g === "stacked" ? /* @__PURE__ */ M("div", {
+			children: F ? /* @__PURE__ */ j(J, {
+				links: O,
+				content: D,
+				sections: k,
+				onMsg: z
+			}) : /* @__PURE__ */ M(A, { children: [_ === "stacked" ? /* @__PURE__ */ M("div", {
 				className: "pxc-banner__heading",
 				children: [/* @__PURE__ */ j(U, {}), /* @__PURE__ */ j(Y, {
 					variant: "heading",
 					tag: "h3",
-					children: E.title
+					children: D.title
 				})]
 			}) : /* @__PURE__ */ j(U, {}), /* @__PURE__ */ j(Y, {
 				variant: "paragraph",
 				children: /* @__PURE__ */ j(K, {
-					message: E.collapsedText,
-					links: D
+					message: D.collapsedText,
+					links: O
 				})
 			})] })
-		}), m && !a && !N.hasPanel && /* @__PURE__ */ j(H, {
-			ref: N.triggerRef,
-			position: k,
-			label: E.customizePreferencesLabel.trim() || T.banner.customizePreferencesLabel,
-			onMsg: () => N.openPreferences("floating-button")
+		}), h && !a && !P.hasPanel && /* @__PURE__ */ j(H, {
+			ref: P.triggerRef,
+			position: N,
+			label: D.customizePreferencesLabel.trim() || E.banner.customizePreferencesLabel,
+			onMsg: () => P.openPreferences("floating-button")
 		})]
 	});
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@peax/consent-banner-react",
-  "version": "0.9.3",
+  "version": "0.10.0",
   "description": "Accessible React bindings and components for Peax Consent.",
   "keywords": [
     "consent-management",
@@ -50,14 +50,14 @@
     "typecheck": "tsc --noEmit"
   },
   "peerDependencies": {
-    "@peax/consent-banner-locales": "^0.9.3",
+    "@peax/consent-banner-locales": "^0.10.0",
     "react": "^18.2.0 || ^19.0.0",
     "react-dom": "^18.2.0 || ^19.0.0"
   },
   "dependencies": {
     "@base-ui/react": "^1.8.0",
-    "@peax/consent-banner-shared": "^0.9.3",
-    "@peax/consent-banner-theme": "^0.9.3",
+    "@peax/consent-banner-shared": "^0.10.0",
+    "@peax/consent-banner-theme": "^0.10.0",
     "clsx": "^2.1.1",
     "framer-motion": "^14.0.0"
   },
@@ -65,7 +65,7 @@
     "@axe-core/playwright": "^4.13.0",
     "@fontsource/figtree": "^5.3.0",
     "@fontsource/poppins": "^5.3.0",
-    "@peax/consent-banner-locales": "^0.9.3",
+    "@peax/consent-banner-locales": "^0.10.0",
     "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",