cloudflare-next-intl 0.5.2 → 0.5.4

package/README.md

@@ -188,8 +188,10 @@ import ThemeSwitcher from "cloudflare-next-intl/ThemeSwitcher";
 ### Cookie consent
 
 Set `cookieConsent` on your `RoutingConfig` to enable — `IntlProvider` then
-auto-wires `CookieConsentProvider` (and `CookieConsentAnalytics`, if
-`cookieConsent.secrets`/`getSecrets` is set) with no manual nesting needed.
+auto-wires `CookieConsentProvider`, `CookieConsentAnalytics` (if
+`cookieConsent.secrets`/`getSecrets` is set), and both `CookieConsentDialog`/
+`PrivacyPolicyUpdateDialog` (with their built-in default styling and
+English/Ukrainian copy) with no manual nesting needed.
 
 ```typescript
 // intl-config.ts
@@ -210,10 +212,17 @@ export default setIntlConfig({
         getCloudflareContext,
         // gdprCountries: [...], // defaults to EU/EEA + UK + Switzerland
         // enableAnalyticsInDevMode: true, // analytics stay off in dev otherwise
+        // autoWireDialogs: false, // opt out and render the dialogs yourself
+        // dialogProps: { acceptText: "Accept" }, // forwarded to CookieConsentDialog
+        // updateDialogProps: { closeText: "Got it" }, // forwarded to PrivacyPolicyUpdateDialog
     },
 });
 ```
 
+`CookieConsentDialog`/`PrivacyPolicyUpdateDialog` render automatically — no
+JSX needed in your layout. Set `autoWireDialogs: false` to render them
+yourself instead (e.g. for full control over placement):
+
 ```tsx
 import { CookieConsentDialog, PrivacyPolicyUpdateDialog, useCookieConsent } from "cloudflare-next-intl/cookieConsent";
 

package/dist/src/client/components/client_provider.d.ts

@@ -1,12 +1,14 @@
 import type { TranslationObject } from "../../types/types";
 import type { SerializedAuthUser } from "../../firebase_auth/types";
 import type { CookieConsentAnalyticsSecrets } from "../../types/types";
+import type { CookieConsentDialogProps } from "../../cookie_consent/client/components/cookie_consent_dialog";
+import type { PrivacyPolicyUpdateDialogProps } from "../../cookie_consent/client/components/privacy_policy_update_dialog";
 interface LocaleContextType {
     language: string;
     messages: TranslationObject;
 }
 export declare const LocaleContext: import("react").Context<LocaleContextType | undefined>;
-export default function LocationzationClientProvider({ language, messages, initialAuthUser, skipAuthProvider, analyticsSecrets, requiresConsent, children }: {
+export default function LocationzationClientProvider({ language, messages, initialAuthUser, skipAuthProvider, analyticsSecrets, requiresConsent, autoWireDialogs, dialogProps, updateDialogProps, children }: {
     language: string;
     messages: TranslationObject;
     initialAuthUser?: SerializedAuthUser | null;
@@ -21,6 +23,12 @@ export default function LocationzationClientProvider({ language, messages, initi
      * for a first-time visitor instead of `null`.
      */
     requiresConsent?: boolean;
+    /** From `cookieConsent.autoWireDialogs` — renders `CookieConsentDialog`/`PrivacyPolicyUpdateDialog` automatically when `true` (default). */
+    autoWireDialogs?: boolean;
+    /** From `cookieConsent.dialogProps` — forwarded as-is to the auto-wired `CookieConsentDialog`. */
+    dialogProps?: CookieConsentDialogProps;
+    /** From `cookieConsent.updateDialogProps` — forwarded as-is to the auto-wired `PrivacyPolicyUpdateDialog`. */
+    updateDialogProps?: PrivacyPolicyUpdateDialogProps;
     children: React.ReactNode;
 }): Component;
 export {};

package/dist/src/client/components/client_provider.js

@@ -15,7 +15,9 @@ export const LocaleContext = createContext(undefined);
 const AuthUserProvider = dynamic(() => import("../../firebase_auth/client/auth_user_provider"));
 const CookieConsentProvider = dynamic(() => import("../../cookie_consent/client/cookie_consent_provider"));
 const CookieConsentAnalytics = dynamic(() => import("../../cookie_consent/client/components/cookie_consent_analytics"));
-export default function LocationzationClientProvider({ language, messages, initialAuthUser = null, skipAuthProvider = false, analyticsSecrets, requiresConsent = true, children }) {
+const CookieConsentDialog = dynamic(() => import("../../cookie_consent/client/components/cookie_consent_dialog"));
+const PrivacyPolicyUpdateDialog = dynamic(() => import("../../cookie_consent/client/components/privacy_policy_update_dialog"));
+export default function LocationzationClientProvider({ language, messages, initialAuthUser = null, skipAuthProvider = false, analyticsSecrets, requiresConsent = true, autoWireDialogs = true, dialogProps, updateDialogProps, children }) {
     setLocaleCache(language);
     setMessageForLocaleCache(language, messages);
     // `LocaleContext.Provider` stays the outermost element here — the
@@ -28,7 +30,7 @@ export default function LocationzationClientProvider({ language, messages, initi
         providedChildren = _jsx(AuthUserProvider, { initialUser: initialAuthUser, children: children });
     }
     if (config.cookieConsent) {
-        providedChildren = _jsxs(CookieConsentProvider, { requiresConsent: requiresConsent, children: [providedChildren, analyticsSecrets && _jsx(CookieConsentAnalytics, { secrets: analyticsSecrets })] });
+        providedChildren = _jsxs(CookieConsentProvider, { requiresConsent: requiresConsent, children: [providedChildren, analyticsSecrets && _jsx(CookieConsentAnalytics, { secrets: analyticsSecrets }), autoWireDialogs && _jsx(CookieConsentDialog, { ...dialogProps }), autoWireDialogs && _jsx(PrivacyPolicyUpdateDialog, { ...updateDialogProps })] });
     }
     const contextValue = useMemo(() => ({ language, messages }), [language, messages]);
     return _jsx(LocaleContext.Provider, { value: contextValue, children: providedChildren });

package/dist/src/cookie_consent/client/components/cookie_consent_dialog.js

@@ -2,6 +2,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import useCookieConsent from '../use_cookie_consent';
 import DefaultPrivacyPolicyLink from './default_privacy_policy_link';
+import DialogPortal from './dialog_portal';
 import { getLocaleCache } from '../../../general/cache_variables';
 import { defaultCookieConsentText } from './default_dialog_text';
 import { defaultCookieDialogClassNames } from './default_dialog_styles';
@@ -26,5 +27,5 @@ export default function CookieConsentDialog({ message, link, privacyPolicyLinkTe
     const resolvedLink = link !== undefined
         ? link
         : _jsx(DefaultPrivacyPolicyLink, { privacyPolicyPath: privacyPolicyPath, text: resolvedPrivacyPolicyLinkText, className: resolvedClassNames.link });
-    return (_jsxs("div", { id: id, role: "dialog", "aria-modal": "false", "aria-labelledby": `${id}-title`, className: resolvedClassNames.root, style: styles?.root, children: [_jsxs("p", { id: `${id}-title`, className: resolvedClassNames.message, style: styles?.message, children: [resolvedMessage, resolvedLink ? _jsxs("span", { children: [" ", resolvedLink] }) : null] }), _jsxs("div", { className: resolvedClassNames.actions, style: styles?.actions, children: [!hideDecline && (_jsx("button", { type: "button", onClick: () => setConsent(false), className: resolvedClassNames.declineButton, style: styles?.declineButton, children: resolvedDeclineText })), _jsx("button", { type: "button", onClick: () => setConsent(true), className: resolvedClassNames.acceptButton, style: styles?.acceptButton, children: resolvedAcceptText })] })] }));
+    return (_jsx(DialogPortal, { children: _jsxs("div", { id: id, role: "dialog", "aria-modal": "false", "aria-labelledby": `${id}-title`, className: resolvedClassNames.root, style: styles?.root, children: [_jsxs("p", { id: `${id}-title`, className: resolvedClassNames.message, style: styles?.message, children: [resolvedMessage, resolvedLink ? _jsxs("span", { children: [" ", resolvedLink] }) : null] }), _jsxs("div", { className: resolvedClassNames.actions, style: styles?.actions, children: [!hideDecline && (_jsx("button", { type: "button", onClick: () => setConsent(false), className: resolvedClassNames.declineButton, style: styles?.declineButton, children: resolvedDeclineText })), _jsx("button", { type: "button", onClick: () => setConsent(true), className: resolvedClassNames.acceptButton, style: styles?.acceptButton, children: resolvedAcceptText })] })] }) }));
 }

package/dist/src/cookie_consent/client/components/default_dialog_styles.js

@@ -1,5 +1,5 @@
 export const defaultCookieDialogClassNames = {
-    root: 'fixed bottom-0 w-full bg-cyan-50 dark:bg-cyan-950 text-gray-800 dark:text-gray-200 z-20 flex flex-col sm:flex-row sm:justify-between items-center gap-3 sticky border-t border-t-gray-600 dark:border-t-gray-400 rounded-t-2xl px-4 py-3',
+    root: 'fixed bottom-0 w-full bg-cyan-50 dark:bg-cyan-950 text-gray-800 dark:text-gray-200 z-[2147483647] flex flex-col sm:flex-row sm:justify-between items-center gap-3 sticky border-t border-t-gray-600 dark:border-t-gray-400 rounded-t-2xl px-4 py-3',
     message: 'text-sm sm:text-base text-gray-600 dark:text-gray-300',
     link: 'underline font-bold duration-200 text-gray-600 hover:text-cyan-800 dark:text-gray-200 dark:hover:text-gray-100 active:text-cyan-700',
     actions: 'flex flex-row gap-2',

package/dist/src/cookie_consent/client/components/dialog_portal.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Renders `children` into `document.body` via a portal, so the default
+ * dialogs always stack on top of the host app regardless of its own
+ * stacking contexts (a `z-index` alone can't escape an ancestor with
+ * `transform`/`filter`/`opacity`/`isolation`, all common in app shells).
+ * Only called client-side (both dialogs already gate on `isMounted`), so
+ * `document` is always defined here.
+ */
+export default function DialogPortal({ children }: {
+    children: React.ReactNode;
+}): React.ReactPortal;

package/dist/src/cookie_consent/client/components/dialog_portal.js

@@ -0,0 +1,13 @@
+'use client';
+import { createPortal } from 'react-dom';
+/**
+ * Renders `children` into `document.body` via a portal, so the default
+ * dialogs always stack on top of the host app regardless of its own
+ * stacking contexts (a `z-index` alone can't escape an ancestor with
+ * `transform`/`filter`/`opacity`/`isolation`, all common in app shells).
+ * Only called client-side (both dialogs already gate on `isMounted`), so
+ * `document` is always defined here.
+ */
+export default function DialogPortal({ children }) {
+    return createPortal(children, document.body);
+}

package/dist/src/cookie_consent/client/components/privacy_policy_update_dialog.js

@@ -2,6 +2,7 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import useCookieConsent from '../use_cookie_consent';
 import DefaultPrivacyPolicyLink from './default_privacy_policy_link';
+import DialogPortal from './dialog_portal';
 import { getLocaleCache } from '../../../general/cache_variables';
 import { defaultPrivacyPolicyUpdateText } from './default_dialog_text';
 import { defaultCookieDialogClassNames } from './default_dialog_styles';
@@ -25,5 +26,5 @@ export default function PrivacyPolicyUpdateDialog({ message, link, privacyPolicy
     const resolvedLink = link !== undefined
         ? link
         : _jsx(DefaultPrivacyPolicyLink, { privacyPolicyPath: privacyPolicyPath, text: resolvedPrivacyPolicyLinkText, className: resolvedClassNames.link });
-    return (_jsxs("div", { id: id, role: "dialog", "aria-modal": "false", "aria-labelledby": `${id}-title`, className: resolvedClassNames.root, style: styles?.root, children: [_jsxs("p", { id: `${id}-title`, className: resolvedClassNames.message, style: styles?.message, children: [resolvedMessage, resolvedLink ? _jsxs("span", { children: [" ", resolvedLink] }) : null] }), _jsx("button", { type: "button", onClick: acknowledgePrivacyPolicyUpdate, "aria-label": resolvedCloseText, className: resolvedClassNames.closeButton, style: styles?.closeButton, children: resolvedCloseText })] }));
+    return (_jsx(DialogPortal, { children: _jsxs("div", { id: id, role: "dialog", "aria-modal": "false", "aria-labelledby": `${id}-title`, className: resolvedClassNames.root, style: styles?.root, children: [_jsxs("p", { id: `${id}-title`, className: resolvedClassNames.message, style: styles?.message, children: [resolvedMessage, resolvedLink ? _jsxs("span", { children: [" ", resolvedLink] }) : null] }), _jsx("button", { type: "button", onClick: acknowledgePrivacyPolicyUpdate, "aria-label": resolvedCloseText, className: resolvedClassNames.closeButton, style: styles?.closeButton, children: resolvedCloseText })] }) }));
 }

package/dist/src/cookie_consent/index.d.ts

@@ -5,4 +5,6 @@ export { default as PrivacyPolicyUpdateDialog } from './client/components/privac
 export { default as CookieConsentAnalytics } from './client/components/cookie_consent_analytics';
 export { defaultGdprCountries } from './gdpr_countries';
 export type { CookieConsentContextType, ConsentValue, CookieDialogClassNames, CookieDialogStyles } from './types';
+export type { CookieConsentDialogProps } from './client/components/cookie_consent_dialog';
+export type { PrivacyPolicyUpdateDialogProps } from './client/components/privacy_policy_update_dialog';
 export type { CookieConsentRoutingConfig, CookieConsentAnalyticsSecrets, CookieConsentCloudflareContext, CookieConsentGetCloudflareContext, } from '../types/types';

package/dist/src/server/components/server_provider.js

@@ -77,5 +77,5 @@ export default async function LocationzationProvider({ language, messages, child
                 : config.cookieConsent.secrets;
         }
     }
-    return _jsx(LocationzationClientProvider, { language: language, messages: messagesValue, initialAuthUser: initialAuthUser, skipAuthProvider: !autoWireClientProvider, analyticsSecrets: analyticsSecrets, requiresConsent: requiresConsent, children: children });
+    return _jsx(LocationzationClientProvider, { language: language, messages: messagesValue, initialAuthUser: initialAuthUser, skipAuthProvider: !autoWireClientProvider, analyticsSecrets: analyticsSecrets, requiresConsent: requiresConsent, autoWireDialogs: config.cookieConsent?.autoWireDialogs !== false, dialogProps: config.cookieConsent?.dialogProps, updateDialogProps: config.cookieConsent?.updateDialogProps, children: children });
 }

package/dist/src/types/types.d.ts

@@ -1,6 +1,8 @@
 import type { NextResponse } from 'next/server';
 import type { Languages } from 'next/dist/lib/metadata/types/alternative-urls-types';
 import type { Videos } from 'next/dist/lib/metadata/types/metadata-types';
+import type { CookieConsentDialogProps } from '../cookie_consent/client/components/cookie_consent_dialog';
+import type { PrivacyPolicyUpdateDialogProps } from '../cookie_consent/client/components/privacy_policy_update_dialog';
 /**
  * Custom middleware hook, run by `intlMiddleware` for your own logic
  * (e.g. auth, feature flags, A/B tests) — on top of the library's own
@@ -179,6 +181,26 @@ export interface CookieConsentRoutingConfig {
      * scripts locally.
      */
     enableAnalyticsInDevMode?: boolean;
+    /**
+     * Whether `IntlProvider` should automatically render
+     * `CookieConsentDialog` and `PrivacyPolicyUpdateDialog` (with their
+     * built-in default styling/EN+UK copy) at the end of your app tree.
+     * Defaults to `true` whenever `cookieConsent` is set. Set `false` to
+     * keep `cookieConsent` configured for `useCookieConsent()`/analytics
+     * only and render your own dialogs (or the exported components)
+     * yourself, wherever you like in the tree.
+     */
+    autoWireDialogs?: boolean;
+    /**
+     * Props forwarded as-is to the auto-wired `CookieConsentDialog`.
+     * Ignored when `autoWireDialogs` is `false`.
+     */
+    dialogProps?: CookieConsentDialogProps;
+    /**
+     * Props forwarded as-is to the auto-wired `PrivacyPolicyUpdateDialog`.
+     * Ignored when `autoWireDialogs` is `false`.
+     */
+    updateDialogProps?: PrivacyPolicyUpdateDialogProps;
 }
 /**
  * Minimal shape read from your `getCloudflareContext()` return value — only

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cloudflare-next-intl",
-  "version": "0.5.2",
+  "version": "0.5.4",
   "description": "Optimized Next Intl Package Special for App Router and Cloudflare",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",