@c15t/react 0.0.1-rc.9 → 1.0.1

package/dist/components/cookie-banner/__tests__/cookie-banner.e2e.test.js

@@ -0,0 +1,183 @@
+import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
+import * as __WEBPACK_EXTERNAL_MODULE_vitest__ from "vitest";
+import * as __WEBPACK_EXTERNAL_MODULE_vitest_browser_react_6a851916__ from "vitest-browser-react";
+import * as __WEBPACK_EXTERNAL_MODULE__consent_manager_dialog_consent_manager_dialog_js_9cbc4f9a__ from "../../consent-manager-dialog/consent-manager-dialog.js";
+import * as __WEBPACK_EXTERNAL_MODULE__providers_consent_manager_provider_js_47c65d87__ from "../../../providers/consent-manager-provider.js";
+import * as __WEBPACK_EXTERNAL_MODULE__cookie_banner_js_0a2d98b7__ from "../cookie-banner.js";
+let mockShowPopup = true;
+let mockIsPrivacyDialogOpen = false;
+__WEBPACK_EXTERNAL_MODULE_vitest__.vi.mock('~/hooks/use-consent-manager', async (importOriginal)=>{
+    const realModule = await importOriginal();
+    return {
+        useConsentManager: ()=>({
+                ...realModule.useConsentManager(),
+                showPopup: mockShowPopup,
+                isPrivacyDialogOpen: mockIsPrivacyDialogOpen,
+                setShowPopup: (value)=>{
+                    mockShowPopup = value;
+                },
+                setIsPrivacyDialogOpen: (value)=>{
+                    mockIsPrivacyDialogOpen = value;
+                }
+            })
+    };
+});
+const localStorageMock = (()=>{
+    let store = {};
+    return {
+        getItem: (key)=>store[key] || null,
+        setItem: (key, value)=>{
+            store[key] = value.toString();
+        },
+        removeItem: (key)=>{
+            delete store[key];
+        },
+        clear: ()=>{
+            store = {};
+        }
+    };
+})();
+Object.defineProperty(window, 'localStorage', {
+    value: localStorageMock
+});
+const defaultOptions = {
+    mode: 'offline'
+};
+(0, __WEBPACK_EXTERNAL_MODULE_vitest__.describe)('CookieBanner E2E Tests', ()=>{
+    (0, __WEBPACK_EXTERNAL_MODULE_vitest__.beforeEach)(()=>{
+        window.localStorage.clear();
+        mockShowPopup = true;
+        __WEBPACK_EXTERNAL_MODULE_vitest__.vi.clearAllMocks();
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_vitest__.test)('should show cookie banner on first visit', async ()=>{
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest_browser_react_6a851916__.render)(/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__providers_consent_manager_provider_js_47c65d87__.ConsentManagerProvider, {
+            options: defaultOptions,
+            children: [
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__cookie_banner_js_0a2d98b7__.CookieBanner, {}),
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__consent_manager_dialog_consent_manager_dialog_js_9cbc4f9a__.ConsentManagerDialog, {})
+            ]
+        }));
+        const element = document.body.querySelector('[data-testid="cookie-banner-root"]');
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(element).toBeInTheDocument();
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(mockShowPopup).toBe(true);
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(document.querySelector('[data-testid="cookie-banner-title"]')).toBeInTheDocument();
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(document.querySelector('[data-testid="cookie-banner-description"]')).toBeInTheDocument();
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(document.querySelector('[data-testid="cookie-banner-reject-button"]')).toBeInTheDocument();
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(document.querySelector('[data-testid="cookie-banner-customize-button"]')).toBeInTheDocument();
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(document.querySelector('[data-testid="cookie-banner-accept-button"]')).toBeInTheDocument();
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_vitest__.test)('should accept all cookies when clicking Accept All', async ()=>{
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest_browser_react_6a851916__.render)(/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__providers_consent_manager_provider_js_47c65d87__.ConsentManagerProvider, {
+            options: defaultOptions,
+            children: [
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__cookie_banner_js_0a2d98b7__.CookieBanner, {}),
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__consent_manager_dialog_consent_manager_dialog_js_9cbc4f9a__.ConsentManagerDialog, {})
+            ]
+        }));
+        const acceptButton = document.querySelector('[data-testid="cookie-banner-accept-button"]');
+        acceptButton?.dispatchEvent(new MouseEvent('click', {
+            bubbles: true
+        }));
+        await new Promise((resolve)=>setTimeout(resolve, 100));
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(mockShowPopup).toBe(false);
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(document.querySelector('[data-testid="cookie-banner-root"]')).not.toBeInTheDocument();
+        const consent = JSON.parse(window.localStorage.getItem('privacy-consent-storage') || '{}');
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(consent.consents).toBeTruthy();
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(consent.consentInfo.type).toBe('all');
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_vitest__.test)('should reject non-essential cookies when clicking Reject All', async ()=>{
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest_browser_react_6a851916__.render)(/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__providers_consent_manager_provider_js_47c65d87__.ConsentManagerProvider, {
+            options: defaultOptions,
+            children: [
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__cookie_banner_js_0a2d98b7__.CookieBanner, {}),
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__consent_manager_dialog_consent_manager_dialog_js_9cbc4f9a__.ConsentManagerDialog, {})
+            ]
+        }));
+        const rejectButton = document.querySelector('[data-testid="cookie-banner-reject-button"]');
+        rejectButton?.dispatchEvent(new MouseEvent('click', {
+            bubbles: true
+        }));
+        await new Promise((resolve)=>setTimeout(resolve, 100));
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(mockShowPopup).toBe(false);
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(document.querySelector('[data-testid="cookie-banner-root"]')).not.toBeInTheDocument();
+        const consent = JSON.parse(window.localStorage.getItem('privacy-consent-storage') || '{}');
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(consent.consents).toBeTruthy();
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(consent.consentInfo.type).toBe('necessary');
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(consent.consents.necessary).toBe(true);
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(consent.consents.experience).toBe(false);
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(consent.consents.functionality).toBe(false);
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(consent.consents.marketing).toBe(false);
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(consent.consents.measurement).toBe(false);
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_vitest__.test)('should open consent manager dialog when clicking Customize', async ()=>{
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest_browser_react_6a851916__.render)(/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__providers_consent_manager_provider_js_47c65d87__.ConsentManagerProvider, {
+            options: defaultOptions,
+            children: [
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__cookie_banner_js_0a2d98b7__.CookieBanner, {}),
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__consent_manager_dialog_consent_manager_dialog_js_9cbc4f9a__.ConsentManagerDialog, {})
+            ]
+        }));
+        const customizeButton = document.querySelector('[data-testid="cookie-banner-customize-button"]');
+        customizeButton?.dispatchEvent(new MouseEvent('click', {
+            bubbles: true
+        }));
+        await new Promise((resolve)=>setTimeout(resolve, 100));
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(mockShowPopup).toBe(false);
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(document.querySelector('[data-testid="cookie-banner-root"]')).not.toBeInTheDocument();
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(mockIsPrivacyDialogOpen).toBe(true);
+        const dialog = document.querySelector('[data-testid="consent-manager-dialog-root"]');
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(dialog).toBeInTheDocument();
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(document.querySelector('[data-testid="consent-manager-widget-switch-necessary"]')).toBeInTheDocument();
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(document.querySelector('[data-testid="consent-manager-widget-switch-marketing"]')).toBeInTheDocument();
+        const marketingSwitch = document.querySelector('[data-testid="consent-manager-widget-switch-marketing"]');
+        marketingSwitch?.dispatchEvent(new MouseEvent('click', {
+            bubbles: true
+        }));
+        const saveButton = document.querySelector('[data-testid="consent-manager-widget-footer-save-button"]');
+        saveButton?.dispatchEvent(new MouseEvent('click', {
+            bubbles: true
+        }));
+        await new Promise((resolve)=>setTimeout(resolve, 100));
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(mockIsPrivacyDialogOpen).toBe(false);
+        const consent = JSON.parse(window.localStorage.getItem('privacy-consent-storage') || '{}');
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(consent.consents).toBeTruthy();
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(consent.consentInfo.type).toBe('custom');
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(consent.consents.marketing).toBe(true);
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_vitest__.test)('should be keyboard accessible', async ()=>{
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest_browser_react_6a851916__.render)(/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__providers_consent_manager_provider_js_47c65d87__.ConsentManagerProvider, {
+            options: defaultOptions,
+            children: [
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__cookie_banner_js_0a2d98b7__.CookieBanner, {}),
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__consent_manager_dialog_consent_manager_dialog_js_9cbc4f9a__.ConsentManagerDialog, {})
+            ]
+        }));
+        const rejectButton = document.querySelector('[data-testid="cookie-banner-reject-button"]');
+        const customizeButton = document.querySelector('[data-testid="cookie-banner-customize-button"]');
+        const acceptButton = document.querySelector('[data-testid="cookie-banner-accept-button"]');
+        rejectButton.focus();
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(document.activeElement).toBe(rejectButton);
+        customizeButton.focus();
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(document.activeElement).toBe(customizeButton);
+        acceptButton.focus();
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(document.activeElement).toBe(acceptButton);
+    });
+    (0, __WEBPACK_EXTERNAL_MODULE_vitest__.test)('should handle scroll lock properly', async ()=>{
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest_browser_react_6a851916__.render)(/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__providers_consent_manager_provider_js_47c65d87__.ConsentManagerProvider, {
+            options: defaultOptions,
+            children: [
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__cookie_banner_js_0a2d98b7__.CookieBanner, {
+                    scrollLock: true
+                }),
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__consent_manager_dialog_consent_manager_dialog_js_9cbc4f9a__.ConsentManagerDialog, {})
+            ]
+        }));
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(document.querySelector('[data-testid="cookie-banner-overlay"]')).toBeInTheDocument();
+        const acceptButton = document.querySelector('[data-testid="cookie-banner-accept-button"]');
+        acceptButton?.dispatchEvent(new MouseEvent('click', {
+            bubbles: true
+        }));
+        await new Promise((resolve)=>setTimeout(resolve, 100));
+        (0, __WEBPACK_EXTERNAL_MODULE_vitest__.expect)(document.querySelector('[data-testid="cookie-banner-overlay"]')).not.toBeInTheDocument();
+    });
+});

package/dist/components/cookie-banner/__tests__/styles.spec.cjs

@@ -1,12 +1,8 @@
 "use strict";
 var __webpack_require__ = {};
 (()=>{
-    __webpack_require__.n = function(module) {
-        var getter = module && module.__esModule ? function() {
-            return module['default'];
-        } : function() {
-            return module;
-        };
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
         __webpack_require__.d(getter, {
             a: getter
         });
@@ -14,7 +10,7 @@ var __webpack_require__ = {};
     };
 })();
 (()=>{
-    __webpack_require__.d = function(exports1, definition) {
+    __webpack_require__.d = (exports1, definition)=>{
         for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
             enumerable: true,
             get: definition[key]
@@ -22,16 +18,31 @@ var __webpack_require__ = {};
     };
 })();
 (()=>{
-    __webpack_require__.o = function(obj, prop) {
-        return Object.prototype.hasOwnProperty.call(obj, prop);
-    };
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
 })();
 var __webpack_exports__ = {};
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const external_vitest_namespaceObject = require("vitest");
 const external_cookie_banner_cjs_namespaceObject = require("../cookie-banner.cjs");
-const external_utils_cjs_namespaceObject = require("./utils.cjs");
-var external_utils_cjs_default = /*#__PURE__*/ __webpack_require__.n(external_utils_cjs_namespaceObject);
+const test_helpers_cjs_namespaceObject = require("../../../utils/test-helpers.cjs");
+var test_helpers_cjs_default = /*#__PURE__*/ __webpack_require__.n(test_helpers_cjs_namespaceObject);
+external_vitest_namespaceObject.vi.mock('~/hooks/use-consent-manager', ()=>({
+        useConsentManager: ()=>({
+                showPopup: true,
+                ...external_vitest_namespaceObject.vi.fn()
+            })
+    }));
+external_vitest_namespaceObject.vi.mock('~/hooks/use-translations', ()=>({
+        useTranslations: ()=>({
+                cookieBanner: {
+                    title: 'Cookie Settings',
+                    description: 'We use cookies to enhance your experience',
+                    acceptAll: 'Accept All',
+                    rejectAll: 'Reject All',
+                    customize: 'Customize'
+                }
+            })
+    }));
 const ALL_COMPONENTS = [
     {
         testId: 'cookie-banner-root',
@@ -91,12 +102,13 @@ const ALL_COMPONENTS = [
 ];
 (0, external_vitest_namespaceObject.test)('Theme prop applies string classnames to all components', async ()=>{
     const test = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_cookie_banner_cjs_namespaceObject.CookieBanner, {
+        scrollLock: true,
         theme: ALL_COMPONENTS.reduce((acc, { themeKey, styles })=>{
             acc[themeKey] = styles;
             return acc;
         }, {})
     });
-    await external_utils_cjs_default()({
+    await test_helpers_cjs_default()({
         component: test,
         testCases: ALL_COMPONENTS.map(({ testId, styles })=>({
                 testId,
@@ -117,6 +129,7 @@ const ALL_COMPONENTS = [
             style
         }));
     const test = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_cookie_banner_cjs_namespaceObject.CookieBanner, {
+        scrollLock: true,
         theme: testCases.reduce((acc, { themeKey, className, style })=>{
             acc[themeKey] = {
                 className,
@@ -125,7 +138,7 @@ const ALL_COMPONENTS = [
             return acc;
         }, {})
     });
-    await external_utils_cjs_default()({
+    await test_helpers_cjs_default()({
         component: test,
         testCases: testCases.map(({ testId, className, style })=>({
                 testId,
@@ -138,13 +151,14 @@ const ALL_COMPONENTS = [
 });
 (0, external_vitest_namespaceObject.test)('No style prop removes default styles but keeps custom classNames', async ()=>{
     const test = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_cookie_banner_cjs_namespaceObject.CookieBanner, {
+        scrollLock: true,
         noStyle: true,
         theme: ALL_COMPONENTS.reduce((acc, { themeKey, styles })=>{
             acc[themeKey] = styles;
             return acc;
         }, {})
     });
-    await external_utils_cjs_default()({
+    await test_helpers_cjs_default()({
         component: test,
         testCases: ALL_COMPONENTS.map(({ testId, styles })=>({
                 testId,
@@ -165,9 +179,10 @@ const ALL_COMPONENTS = [
         'banner.header.title': 'custom-title'
     };
     const test = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_cookie_banner_cjs_namespaceObject.CookieBanner, {
+        scrollLock: true,
         theme: mixedTheme
     });
-    await external_utils_cjs_default()({
+    await test_helpers_cjs_default()({
         component: test,
         testCases: [
             {
@@ -203,9 +218,10 @@ const ALL_COMPONENTS = [
         }
     };
     const test = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_cookie_banner_cjs_namespaceObject.CookieBanner, {
+        scrollLock: true,
         theme: edgeCaseTheme
     });
-    await external_utils_cjs_default()({
+    await test_helpers_cjs_default()({
         component: test,
         testCases: [
             {
@@ -229,8 +245,7 @@ const ALL_COMPONENTS = [
         ]
     });
 });
-var __webpack_export_target__ = exports;
-for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
-if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {
+for(var __webpack_i__ in __webpack_exports__)exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
     value: true
 });

package/dist/components/cookie-banner/__tests__/styles.spec.js

@@ -1,7 +1,24 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
 import * as __WEBPACK_EXTERNAL_MODULE_vitest__ from "vitest";
 import * as __WEBPACK_EXTERNAL_MODULE__cookie_banner_js_0a2d98b7__ from "../cookie-banner.js";
-import * as __WEBPACK_EXTERNAL_MODULE__utils_js_d88b7fe1__ from "./utils.js";
+import * as __WEBPACK_EXTERNAL_MODULE__utils_test_helpers_js_1e3d26b6__ from "../../../utils/test-helpers.js";
+__WEBPACK_EXTERNAL_MODULE_vitest__.vi.mock('~/hooks/use-consent-manager', ()=>({
+        useConsentManager: ()=>({
+                showPopup: true,
+                ...__WEBPACK_EXTERNAL_MODULE_vitest__.vi.fn()
+            })
+    }));
+__WEBPACK_EXTERNAL_MODULE_vitest__.vi.mock('~/hooks/use-translations', ()=>({
+        useTranslations: ()=>({
+                cookieBanner: {
+                    title: 'Cookie Settings',
+                    description: 'We use cookies to enhance your experience',
+                    acceptAll: 'Accept All',
+                    rejectAll: 'Reject All',
+                    customize: 'Customize'
+                }
+            })
+    }));
 const ALL_COMPONENTS = [
     {
         testId: 'cookie-banner-root',
@@ -61,12 +78,13 @@ const ALL_COMPONENTS = [
 ];
 (0, __WEBPACK_EXTERNAL_MODULE_vitest__.test)('Theme prop applies string classnames to all components', async ()=>{
     const test = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__cookie_banner_js_0a2d98b7__.CookieBanner, {
+        scrollLock: true,
         theme: ALL_COMPONENTS.reduce((acc, { themeKey, styles })=>{
             acc[themeKey] = styles;
             return acc;
         }, {})
     });
-    await (0, __WEBPACK_EXTERNAL_MODULE__utils_js_d88b7fe1__["default"])({
+    await (0, __WEBPACK_EXTERNAL_MODULE__utils_test_helpers_js_1e3d26b6__["default"])({
         component: test,
         testCases: ALL_COMPONENTS.map(({ testId, styles })=>({
                 testId,
@@ -87,6 +105,7 @@ const ALL_COMPONENTS = [
             style
         }));
     const test = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__cookie_banner_js_0a2d98b7__.CookieBanner, {
+        scrollLock: true,
         theme: testCases.reduce((acc, { themeKey, className, style })=>{
             acc[themeKey] = {
                 className,
@@ -95,7 +114,7 @@ const ALL_COMPONENTS = [
             return acc;
         }, {})
     });
-    await (0, __WEBPACK_EXTERNAL_MODULE__utils_js_d88b7fe1__["default"])({
+    await (0, __WEBPACK_EXTERNAL_MODULE__utils_test_helpers_js_1e3d26b6__["default"])({
         component: test,
         testCases: testCases.map(({ testId, className, style })=>({
                 testId,
@@ -108,13 +127,14 @@ const ALL_COMPONENTS = [
 });
 (0, __WEBPACK_EXTERNAL_MODULE_vitest__.test)('No style prop removes default styles but keeps custom classNames', async ()=>{
     const test = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__cookie_banner_js_0a2d98b7__.CookieBanner, {
+        scrollLock: true,
         noStyle: true,
         theme: ALL_COMPONENTS.reduce((acc, { themeKey, styles })=>{
             acc[themeKey] = styles;
             return acc;
         }, {})
     });
-    await (0, __WEBPACK_EXTERNAL_MODULE__utils_js_d88b7fe1__["default"])({
+    await (0, __WEBPACK_EXTERNAL_MODULE__utils_test_helpers_js_1e3d26b6__["default"])({
         component: test,
         testCases: ALL_COMPONENTS.map(({ testId, styles })=>({
                 testId,
@@ -135,9 +155,10 @@ const ALL_COMPONENTS = [
         'banner.header.title': 'custom-title'
     };
     const test = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__cookie_banner_js_0a2d98b7__.CookieBanner, {
+        scrollLock: true,
         theme: mixedTheme
     });
-    await (0, __WEBPACK_EXTERNAL_MODULE__utils_js_d88b7fe1__["default"])({
+    await (0, __WEBPACK_EXTERNAL_MODULE__utils_test_helpers_js_1e3d26b6__["default"])({
         component: test,
         testCases: [
             {
@@ -173,9 +194,10 @@ const ALL_COMPONENTS = [
         }
     };
     const test = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__cookie_banner_js_0a2d98b7__.CookieBanner, {
+        scrollLock: true,
         theme: edgeCaseTheme
     });
-    await (0, __WEBPACK_EXTERNAL_MODULE__utils_js_d88b7fe1__["default"])({
+    await (0, __WEBPACK_EXTERNAL_MODULE__utils_test_helpers_js_1e3d26b6__["default"])({
         component: test,
         testCases: [
             {

package/dist/components/cookie-banner/atoms/overlay.cjs

@@ -1,12 +1,8 @@
 "use strict";
 var __webpack_require__ = {};
 (()=>{
-    __webpack_require__.n = function(module) {
-        var getter = module && module.__esModule ? function() {
-            return module['default'];
-        } : function() {
-            return module;
-        };
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
         __webpack_require__.d(getter, {
             a: getter
         });
@@ -14,7 +10,7 @@ var __webpack_require__ = {};
     };
 })();
 (()=>{
-    __webpack_require__.d = function(exports1, definition) {
+    __webpack_require__.d = (exports1, definition)=>{
         for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
             enumerable: true,
             get: definition[key]
@@ -22,12 +18,10 @@ var __webpack_require__ = {};
     };
 })();
 (()=>{
-    __webpack_require__.o = function(obj, prop) {
-        return Object.prototype.hasOwnProperty.call(obj, prop);
-    };
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
 })();
 (()=>{
-    __webpack_require__.r = function(exports1) {
+    __webpack_require__.r = (exports1)=>{
         if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
             value: 'Module'
         });
@@ -45,19 +39,21 @@ __webpack_require__.d(__webpack_exports__, {
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
 const react_namespaceObject = require("motion/react");
 const external_react_namespaceObject = require("react");
-const index_cjs_namespaceObject = require("../../../hooks/index.cjs");
 const use_consent_manager_cjs_namespaceObject = require("../../../hooks/use-consent-manager.cjs");
-const use_styles_cjs_namespaceObject = require("../../../utils/use-styles.cjs");
+const use_scroll_lock_cjs_namespaceObject = require("../../../hooks/use-scroll-lock.cjs");
+const use_styles_cjs_namespaceObject = require("../../../hooks/use-styles.cjs");
+const use_theme_cjs_namespaceObject = require("../../../hooks/use-theme.cjs");
 const external_cookie_banner_module_cjs_namespaceObject = require("../cookie-banner.module.cjs");
 var external_cookie_banner_module_cjs_default = /*#__PURE__*/ __webpack_require__.n(external_cookie_banner_module_cjs_namespaceObject);
 const CookieBannerOverlay = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(({ className, style, noStyle, asChild, ...props }, ref)=>{
     const { showPopup } = (0, use_consent_manager_cjs_namespaceObject.useConsentManager)();
-    const { disableAnimation, noStyle: contextNoStyle } = (0, index_cjs_namespaceObject.useTheme)();
+    const { disableAnimation, noStyle: contextNoStyle, scrollLock } = (0, use_theme_cjs_namespaceObject.useTheme)();
     const theme = (0, use_styles_cjs_namespaceObject.useStyles)('banner.overlay', {
         baseClassName: !(contextNoStyle || noStyle) && external_cookie_banner_module_cjs_default().overlay,
         noStyle
     });
-    return showPopup ? disableAnimation ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
+    (0, use_scroll_lock_cjs_namespaceObject.useScrollLock)(!!(showPopup && scrollLock));
+    return showPopup && scrollLock ? disableAnimation ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         ref: ref,
         ...props,
         ...theme,
@@ -80,8 +76,12 @@ const CookieBannerOverlay = /*#__PURE__*/ (0, external_react_namespaceObject.for
     }) : null;
 });
 const Overlay = CookieBannerOverlay;
-var __webpack_export_target__ = exports;
-for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
-if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {
+exports.CookieBannerOverlay = __webpack_exports__.CookieBannerOverlay;
+exports.Overlay = __webpack_exports__.Overlay;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "CookieBannerOverlay",
+    "Overlay"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
     value: true
 });

package/dist/components/cookie-banner/atoms/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../../src/components/cookie-banner/atoms/overlay.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,KAAK,cAAc,EAAc,MAAM,OAAO,CAAC;AAQxD;;;;;;;;GAQG;AACH,UAAU,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC5D;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,mBAAmB,yGA+BxB,CAAC;AAEF,QAAA,MAAM,OAAO,yGAAsB,CAAC;AAEpC,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,CAAC"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../../src/components/cookie-banner/atoms/overlay.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,EAAE,KAAK,cAAc,EAAc,MAAM,OAAO,CAAC;AASxD;;;;;;;;GAQG;AACH,UAAU,YAAa,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC5D;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,mBAAmB,yGAqCxB,CAAC;AAEF,QAAA,MAAM,OAAO,yGAAsB,CAAC;AAEpC,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/components/cookie-banner/atoms/overlay.js

@@ -1,18 +1,20 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
 import * as __WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__ from "motion/react";
 import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
-import * as __WEBPACK_EXTERNAL_MODULE__hooks_index_js_d5d998a4__ from "../../../hooks/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__hooks_use_consent_manager_js_8a30bd26__ from "../../../hooks/use-consent-manager.js";
-import * as __WEBPACK_EXTERNAL_MODULE__utils_use_styles_js_413e0e0a__ from "../../../utils/use-styles.js";
+import * as __WEBPACK_EXTERNAL_MODULE__hooks_use_scroll_lock_js_ebd470d2__ from "../../../hooks/use-scroll-lock.js";
+import * as __WEBPACK_EXTERNAL_MODULE__hooks_use_styles_js_ffc85ca5__ from "../../../hooks/use-styles.js";
+import * as __WEBPACK_EXTERNAL_MODULE__hooks_use_theme_js_3abff3d7__ from "../../../hooks/use-theme.js";
 import * as __WEBPACK_EXTERNAL_MODULE__cookie_banner_module_js_af314f6d__ from "../cookie-banner.module.js";
 const CookieBannerOverlay = /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react__.forwardRef)(({ className, style, noStyle, asChild, ...props }, ref)=>{
     const { showPopup } = (0, __WEBPACK_EXTERNAL_MODULE__hooks_use_consent_manager_js_8a30bd26__.useConsentManager)();
-    const { disableAnimation, noStyle: contextNoStyle } = (0, __WEBPACK_EXTERNAL_MODULE__hooks_index_js_d5d998a4__.useTheme)();
-    const theme = (0, __WEBPACK_EXTERNAL_MODULE__utils_use_styles_js_413e0e0a__.useStyles)('banner.overlay', {
+    const { disableAnimation, noStyle: contextNoStyle, scrollLock } = (0, __WEBPACK_EXTERNAL_MODULE__hooks_use_theme_js_3abff3d7__.useTheme)();
+    const theme = (0, __WEBPACK_EXTERNAL_MODULE__hooks_use_styles_js_ffc85ca5__.useStyles)('banner.overlay', {
         baseClassName: !(contextNoStyle || noStyle) && __WEBPACK_EXTERNAL_MODULE__cookie_banner_module_js_af314f6d__["default"].overlay,
         noStyle
     });
-    return showPopup ? disableAnimation ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+    (0, __WEBPACK_EXTERNAL_MODULE__hooks_use_scroll_lock_js_ebd470d2__.useScrollLock)(!!(showPopup && scrollLock));
+    return showPopup && scrollLock ? disableAnimation ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
         ref: ref,
         ...props,
         ...theme,

package/dist/components/cookie-banner/atoms/root.cjs

@@ -2,12 +2,8 @@
 "use strict";
 var __webpack_require__ = {};
 (()=>{
-    __webpack_require__.n = function(module) {
-        var getter = module && module.__esModule ? function() {
-            return module['default'];
-        } : function() {
-            return module;
-        };
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
         __webpack_require__.d(getter, {
             a: getter
         });
@@ -15,7 +11,7 @@ var __webpack_require__ = {};
     };
 })();
 (()=>{
-    __webpack_require__.d = function(exports1, definition) {
+    __webpack_require__.d = (exports1, definition)=>{
         for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
             enumerable: true,
             get: definition[key]
@@ -23,12 +19,10 @@ var __webpack_require__ = {};
     };
 })();
 (()=>{
-    __webpack_require__.o = function(obj, prop) {
-        return Object.prototype.hasOwnProperty.call(obj, prop);
-    };
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
 })();
 (()=>{
-    __webpack_require__.r = function(exports1) {
+    __webpack_require__.r = (exports1)=>{
         if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
             value: 'Module'
         });
@@ -50,14 +44,16 @@ const external_react_dom_namespaceObject = require("react-dom");
 const external_overlay_cjs_namespaceObject = require("./overlay.cjs");
 const theme_context_cjs_namespaceObject = require("../../../context/theme-context.cjs");
 const use_consent_manager_cjs_namespaceObject = require("../../../hooks/use-consent-manager.cjs");
-const use_styles_cjs_namespaceObject = require("../../../utils/use-styles.cjs");
+const use_styles_cjs_namespaceObject = require("../../../hooks/use-styles.cjs");
 const external_cookie_banner_module_cjs_namespaceObject = require("../cookie-banner.module.cjs");
 var external_cookie_banner_module_cjs_default = /*#__PURE__*/ __webpack_require__.n(external_cookie_banner_module_cjs_namespaceObject);
-const CookieBannerRoot = ({ children, className, noStyle, disableAnimation, theme, ...props })=>{
+const CookieBannerRoot = ({ children, className, noStyle, disableAnimation, theme, scrollLock, trapFocus = true, ...props })=>{
     const contextValue = {
         disableAnimation,
         noStyle,
-        theme
+        theme,
+        scrollLock,
+        trapFocus
     };
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(theme_context_cjs_namespaceObject.LocalThemeContext.Provider, {
         value: contextValue,
@@ -123,8 +119,12 @@ const CookieBannerRootChildren = /*#__PURE__*/ (0, external_react_namespaceObjec
 });
 CookieBannerRootChildren.displayName = 'CookieBannerRootChildren';
 const Root = CookieBannerRoot;
-var __webpack_export_target__ = exports;
-for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
-if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {
+exports.CookieBannerRoot = __webpack_exports__.CookieBannerRoot;
+exports.Root = __webpack_exports__.Root;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "CookieBannerRoot",
+    "Root"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
     value: true
 });

package/dist/components/cookie-banner/atoms/root.d.ts

@@ -35,6 +35,20 @@ interface CookieBannerRootProps extends HTMLAttributes<HTMLDivElement> {
      * Useful for environments where animations are not desired.
      */
     disableAnimation?: boolean;
+    /**
+     * @remarks
+     * When true, the cookie banner will lock the scroll of the page.
+     * Useful for implementing a cookie banner that locks the scroll of the page.
+     * @default false
+     */
+    scrollLock?: boolean;
+    /**
+     * @remarks
+     * When true, the cookie banner will trap focus.
+     * Useful for implementing a cookie banner that traps focus.
+     * @default true
+     */
+    trapFocus?: boolean;
 }
 /**
  * Root component of the CookieBanner that provides context and styling.

package/dist/components/cookie-banner/atoms/root.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../../../src/components/cookie-banner/atoms/root.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEN,KAAK,EAAE,EACP,KAAK,cAAc,EACnB,KAAK,SAAS,EAId,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAIlD;;;;;;;;;GASG;AACH,UAAU,qBAAsB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE;;;;OAIG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAEnC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,QAAA,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CA6B/C,CAAC;AA4JF,QAAA,MAAM,IAAI,2BAAmB,CAAC;AAE9B,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"root.d.ts","sourceRoot":"","sources":["../../../../src/components/cookie-banner/atoms/root.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEN,KAAK,EAAE,EACP,KAAK,cAAc,EACnB,KAAK,SAAS,EAId,MAAM,OAAO,CAAC;AASf,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAC;AAIlD;;;;;;;;;GASG;AACH,UAAU,qBAAsB,SAAQ,cAAc,CAAC,cAAc,CAAC;IACrE;;;;OAIG;IACH,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IAEnC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,QAAA,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAiC/C,CAAC;AA4JF,QAAA,MAAM,IAAI,2BAAmB,CAAC;AAE9B,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC"}