cloudflare-next-intl 0.5.0 → 0.5.2

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

@@ -2,20 +2,29 @@
 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 { getLocaleCache } from '../../../general/cache_variables';
+import { defaultCookieConsentText } from './default_dialog_text';
+import { defaultCookieDialogClassNames } from './default_dialog_styles';
 /**
  * Cookie-consent banner. Renders `null` once `consent` is already decided.
  * Every visual aspect is overridable via `classNames`/`styles` (per-slot) or
  * `render` (full custom markup) — none of it is hardcoded to Tailwind or any
  * particular design system.
  */
-export default function CookieConsentDialog({ message = 'We use cookies to improve your experience.', link, privacyPolicyLinkText = 'Privacy Policy', acceptText = 'Accept', declineText = 'Necessary only', hideDecline = false, id = 'cookie-consent-dialog', classNames, styles, render, }) {
-    const { consent, setConsent, privacyPolicyPath } = useCookieConsent();
-    if (consent !== null)
+export default function CookieConsentDialog({ message, link, privacyPolicyLinkText, acceptText, declineText, hideDecline = false, id = 'cookie-consent-dialog', classNames, styles, render, }) {
+    const { consent, isMounted, setConsent, privacyPolicyPath } = useCookieConsent();
+    if (!isMounted || consent !== null)
         return null;
     if (render)
         return _jsx(_Fragment, { children: render({ setConsent }) });
+    const text = defaultCookieConsentText[getLocaleCache() ?? 'en'] ?? defaultCookieConsentText.en;
+    const resolvedMessage = message ?? text.message;
+    const resolvedPrivacyPolicyLinkText = privacyPolicyLinkText ?? text.privacyPolicyLinkText;
+    const resolvedAcceptText = acceptText ?? text.acceptText;
+    const resolvedDeclineText = declineText ?? text.declineText;
+    const resolvedClassNames = { ...defaultCookieDialogClassNames, ...classNames };
     const resolvedLink = link !== undefined
         ? link
-        : _jsx(DefaultPrivacyPolicyLink, { privacyPolicyPath: privacyPolicyPath, text: privacyPolicyLinkText });
-    return (_jsxs("div", { id: id, role: "dialog", "aria-modal": "false", "aria-labelledby": `${id}-title`, className: classNames?.root, style: styles?.root, children: [_jsxs("p", { id: `${id}-title`, className: classNames?.message, style: styles?.message, children: [message, resolvedLink ? _jsxs("span", { className: classNames?.link, style: styles?.link, children: [" ", resolvedLink] }) : null] }), _jsxs("div", { className: classNames?.actions, style: styles?.actions, children: [!hideDecline && (_jsx("button", { type: "button", onClick: () => setConsent(false), className: classNames?.declineButton, style: styles?.declineButton, children: declineText })), _jsx("button", { type: "button", onClick: () => setConsent(true), className: classNames?.acceptButton, style: styles?.acceptButton, children: acceptText })] })] }));
+        : _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 })] })] }));
 }

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

@@ -0,0 +1,2 @@
+import type { CookieDialogClassNames } from '../../types';
+export declare const defaultCookieDialogClassNames: CookieDialogClassNames;

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

@@ -0,0 +1,9 @@
+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',
+    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',
+    acceptButton: 'cursor-pointer bg-blue-600 text-white rounded-full px-4 py-2 hover:bg-blue-700 active:bg-blue-800 duration-200 dark:bg-blue-800 dark:hover:bg-blue-700 dark:active:bg-blue-900',
+    declineButton: 'cursor-pointer bg-blue-200 text-gray-800 rounded-full px-4 py-2 hover:bg-blue-300 active:bg-blue-400 duration-200 dark:bg-cyan-900 dark:text-white dark:hover:bg-cyan-800 dark:active:bg-cyan-950',
+    closeButton: 'cursor-pointer bg-blue-200 rounded-full p-2 hover:bg-blue-300 active:bg-blue-400 duration-200 dark:bg-blue-800 dark:text-white dark:hover:bg-blue-700 dark:active:bg-blue-900',
+};

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

@@ -0,0 +1,13 @@
+export interface CookieConsentDefaultText {
+    message: string;
+    privacyPolicyLinkText: string;
+    acceptText: string;
+    declineText: string;
+}
+export interface PrivacyPolicyUpdateDefaultText {
+    message: string;
+    privacyPolicyLinkText: string;
+    closeText: string;
+}
+export declare const defaultCookieConsentText: Record<string, CookieConsentDefaultText>;
+export declare const defaultPrivacyPolicyUpdateText: Record<string, PrivacyPolicyUpdateDefaultText>;

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

@@ -0,0 +1,26 @@
+export const defaultCookieConsentText = {
+    en: {
+        message: 'We use cookies to improve your experience.',
+        privacyPolicyLinkText: 'Privacy Policy',
+        acceptText: 'Accept',
+        declineText: 'Necessary only',
+    },
+    uk: {
+        message: 'Ми використовуємо файли cookie, щоб покращити ваш досвід.',
+        privacyPolicyLinkText: 'Політика конфіденційності',
+        acceptText: 'Прийняти',
+        declineText: 'Тільки необхідні',
+    },
+};
+export const defaultPrivacyPolicyUpdateText = {
+    en: {
+        message: 'Our privacy policy has been updated.',
+        privacyPolicyLinkText: 'Learn more',
+        closeText: 'Got it',
+    },
+    uk: {
+        message: 'Нашу політику конфіденційності було оновлено.',
+        privacyPolicyLinkText: 'Дізнатися більше',
+        closeText: 'Зрозуміло',
+    },
+};

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

@@ -2,20 +2,28 @@
 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 { getLocaleCache } from '../../../general/cache_variables';
+import { defaultPrivacyPolicyUpdateText } from './default_dialog_text';
+import { defaultCookieDialogClassNames } from './default_dialog_styles';
 /**
  * "Privacy policy updated" banner. Auto-enabled only when
  * `cookieConsent.privacyPolicyDate` is set on the `RoutingConfig` — renders
  * `null` otherwise, or once acknowledged. Every visual aspect is overridable
  * via `classNames`/`styles` (per-slot) or `render` (full custom markup).
  */
-export default function PrivacyPolicyUpdateDialog({ message = 'Our privacy policy has been updated.', link, privacyPolicyLinkText = 'Learn more', closeText = 'Got it', id = 'privacy-policy-update-dialog', classNames, styles, render, }) {
+export default function PrivacyPolicyUpdateDialog({ message, link, privacyPolicyLinkText, closeText, id = 'privacy-policy-update-dialog', classNames, styles, render, }) {
     const { privacyPolicyUpdated, acknowledgePrivacyPolicyUpdate, privacyPolicyPath } = useCookieConsent();
     if (!privacyPolicyUpdated)
         return null;
     if (render)
         return _jsx(_Fragment, { children: render({ acknowledge: acknowledgePrivacyPolicyUpdate }) });
+    const text = defaultPrivacyPolicyUpdateText[getLocaleCache() ?? 'en'] ?? defaultPrivacyPolicyUpdateText.en;
+    const resolvedMessage = message ?? text.message;
+    const resolvedPrivacyPolicyLinkText = privacyPolicyLinkText ?? text.privacyPolicyLinkText;
+    const resolvedCloseText = closeText ?? text.closeText;
+    const resolvedClassNames = { ...defaultCookieDialogClassNames, ...classNames };
     const resolvedLink = link !== undefined
         ? link
-        : _jsx(DefaultPrivacyPolicyLink, { privacyPolicyPath: privacyPolicyPath, text: privacyPolicyLinkText });
-    return (_jsxs("div", { id: id, role: "dialog", "aria-modal": "false", "aria-labelledby": `${id}-title`, className: classNames?.root, style: styles?.root, children: [_jsxs("p", { id: `${id}-title`, className: classNames?.message, style: styles?.message, children: [message, resolvedLink ? _jsxs("span", { className: classNames?.link, style: styles?.link, children: [" ", resolvedLink] }) : null] }), _jsx("button", { type: "button", onClick: acknowledgePrivacyPolicyUpdate, "aria-label": closeText, className: classNames?.closeButton, style: styles?.closeButton, children: closeText })] }));
+        : _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 })] }));
 }

package/dist/src/cookie_consent/client/cookie_consent_provider.js

@@ -58,14 +58,14 @@ export default function CookieConsentProvider({ requiresConsent = true, children
     }, []);
     const [consent, setConsentState] = useState(null);
     const [privacyPolicyUpdated, setPrivacyPolicyUpdated] = useState(false);
+    const [isMounted, setIsMounted] = useState(false);
     useEffect(() => {
         const storedConsent = parseConsent(getCookie(consentCookieName));
-        if (storedConsent === null && !requiresConsent) {
-            setConsentState(true);
-            return;
-        }
-        setConsentState(storedConsent);
-        if (storedConsent === null || !policyDate)
+        const autoAccepted = storedConsent === null && !requiresConsent;
+        setConsentState(autoAccepted ? true : storedConsent);
+        setIsMounted(true);
+        const isFirstVisit = storedConsent === null && !autoAccepted;
+        if (isFirstVisit || !policyDate)
             return;
         const storedDateRaw = getCookie(dateCookieName);
         if (!storedDateRaw) {
@@ -90,6 +90,6 @@ export default function CookieConsentProvider({ requiresConsent = true, children
         setPrivacyPolicyUpdated(false);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    const contextValue = useMemo(() => ({ consent, privacyPolicyUpdated, setConsent, acknowledgePrivacyPolicyUpdate, privacyPolicyPath }), [consent, privacyPolicyUpdated, setConsent, acknowledgePrivacyPolicyUpdate, privacyPolicyPath]);
+    const contextValue = useMemo(() => ({ consent, privacyPolicyUpdated, isMounted, setConsent, acknowledgePrivacyPolicyUpdate, privacyPolicyPath }), [consent, privacyPolicyUpdated, isMounted, setConsent, acknowledgePrivacyPolicyUpdate, privacyPolicyPath]);
     return (_jsx(CookieConsentContext.Provider, { value: contextValue, children: children }));
 }

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

@@ -4,6 +4,14 @@ export type ConsentValue = boolean | null;
 export interface CookieConsentContextType {
     /** Current consent value; `null` until the visitor decides. */
     consent: ConsentValue;
+    /**
+     * `false` until the client has read the stored consent/date cookies once
+     * (always `false` during SSR and the first client render, to avoid a
+     * hydration mismatch). The default dialog components render nothing
+     * until this is `true`, so a returning visitor's decided consent never
+     * flashes the banner before disappearing.
+     */
+    isMounted: boolean;
     /**
      * `true` once a privacy-policy update has been detected (stored consent
      * predates `cookieConsent.privacyPolicyDate`) and hasn't been

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

@@ -69,7 +69,7 @@ export default async function LocationzationProvider({ language, messages, child
         // (banner shown) same as an unresolved country would.
         requiresConsent = !isDevEnvironment
             ? await resolveRequiresConsent(config.cookieConsent.getCountryCode, config.cookieConsent.getCloudflareContext, config.cookieConsent.gdprCountries)
-            : true;
+            : false;
         const analyticsAllowedInEnv = config.cookieConsent.enableAnalyticsInDevMode === true || !isDevEnvironment;
         if (config.cookieConsent.autoWireAnalytics !== false && analyticsAllowedInEnv) {
             analyticsSecrets = config.cookieConsent.getSecrets

package/package.json

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

package/dist/src/general/get_layout_states.js

@@ -1,39 +0,0 @@
-"use strict";
-// NOTE: currently disabled — this file exports nothing at runtime, even
-// though "./getLayoutStates" is listed in package.json's exports map.
-// Do not rely on `cloudflare-next-intl/getLayoutStates` until this is
-// re-enabled; use `getLocale()` + read the theme cookie manually instead.
-// "use server";
-// import { cookies } from "next/headers";
-// import { localeCookieName, isDarkCookieKey } from "../config/cookie_key";
-// import config from "../config/intl_config";
-// interface HtmlParamProps {
-//     className?: string;
-//     suppressHydrationWarning?: boolean;
-//     lang: string;
-// }
-// export default async function getLayoutStates(): Promise<{
-//     isDark: boolean | null;
-//     locale: string;
-//     htmlParam?: HtmlParamProps;
-// }> {
-//     const cookie = await cookies();
-//     const isDarkMode = cookie.get(isDarkCookieKey)?.value;
-//     const isDark = getCookieBooleanValue(isDarkMode);
-//     const cookieLocale = (cookie.get(localeCookieName)?.value as string) ?? config.defaultLocale;
-//     const htmlParam: HtmlParamProps = { suppressHydrationWarning: !isDarkMode, lang: cookieLocale };
-//     if (isDark === true) {
-//         htmlParam.className = 'dark';
-//     }
-//     return { isDark, locale: cookieLocale, htmlParam };
-// }
-// function getCookieBooleanValue(cookieValue: string | undefined): boolean | null {
-//     switch (cookieValue) {
-//         case "true":
-//             return true;
-//         case "false":
-//             return false;
-//         default:
-//             return null;
-//     }
-// }