@uninspired/cookie-banner 0.0.12 → 0.0.14

package/dist/react/index.js

@@ -1,7 +1,7 @@
-import require$$0, { useMemo, useState, useEffect, useCallback, createContext, useContext } from "react";
+import require$$0, { useState, useEffect, useMemo, useCallback, createContext, useContext } from "react";
 import { Item, Trigger, Content, Root as Root$3 } from "@radix-ui/react-accordion";
 import { ChevronDown, ChevronUp } from "lucide-react";
-import { Root as Root$1, Content as Content$1, Title, Description, Close } from "@radix-ui/react-dialog";
+import { Root as Root$1, Portal, Content as Content$1, Title, Description, Close } from "@radix-ui/react-dialog";
 import { Root as Root$2, Trigger as Trigger$1, Content as Content$2 } from "@radix-ui/react-collapsible";
 import { Root, Thumb } from "@radix-ui/react-switch";
 var jsxRuntime = { exports: {} };
@@ -1949,6 +1949,7 @@ function optional(innerType) {
   });
 }
 const remoteScriptDefinitionSchema = /* @__PURE__ */ object({
+  id: /* @__PURE__ */ string(),
   variant: /* @__PURE__ */ literal("remote"),
   type: /* @__PURE__ */ optional(/* @__PURE__ */ string()),
   src: /* @__PURE__ */ string(),
@@ -1958,6 +1959,7 @@ const remoteScriptDefinitionSchema = /* @__PURE__ */ object({
   integrity: /* @__PURE__ */ optional(/* @__PURE__ */ string())
 });
 const inlineScriptDefinitionSchema = /* @__PURE__ */ object({
+  id: /* @__PURE__ */ string(),
   variant: /* @__PURE__ */ literal("inline"),
   type: /* @__PURE__ */ optional(/* @__PURE__ */ string()),
   async: /* @__PURE__ */ optional(/* @__PURE__ */ boolean()),
@@ -1982,14 +1984,59 @@ const Switch = ({ label: label2, id, ...rest }) => {
   ] });
 };
 const selectionSchema = /* @__PURE__ */ record(/* @__PURE__ */ string(), /* @__PURE__ */ boolean());
+class Cookies {
+  #domain;
+  #prefix;
+  #sameSite;
+  #secure;
+  constructor(options) {
+    this.#domain = options.domain;
+    this.#prefix = options.prefix ?? "us-cookie-banner-";
+    this.#sameSite = options.sameSite ?? "lax";
+    this.#secure = options.secure ?? true;
+  }
+  #serialize = (data) => {
+    return btoa(String.fromCharCode(...new TextEncoder().encode(data)));
+  };
+  #deserialize = (data) => {
+    return new TextDecoder().decode(
+      Uint8Array.from(atob(data), (c) => c.charCodeAt(0))
+    );
+  };
+  set = (key, value, ttl = 365) => {
+    const expires = new Date(Date.now() + ttl * 24 * 60 * 60 * 1e3);
+    const cookie = `${this.#prefix}${key}=${this.#serialize(value)}; expires=${expires}; path=/; domain=${this.#domain}; SameSite=${this.#sameSite}; ${this.#secure ? "secure" : ""}`;
+    document.cookie = cookie;
+  };
+  get = (key) => {
+    const match = document.cookie.match(
+      new RegExp(`(?:^|; )${this.#prefix}${key}=([^;]*)`)
+    );
+    if (!match) return null;
+    const [_, serializedValue] = match;
+    if (!serializedValue) return null;
+    return this.#deserialize(serializedValue);
+  };
+  remove = (key) => {
+    this.set(key, "", -1);
+  };
+}
+const SELECTION_KEY = "selection";
 const SelectionContext = createContext(null);
 const SelectionProvider = ({
   children,
   items,
-  localStorageKey
+  cookie
 }) => {
-  function getLsSelection(localStorageKey2) {
-    const storedSelection = localStorage.getItem(localStorageKey2);
+  const { domain, prefix, sameSite, secure } = cookie;
+  const [cookies, setCookies] = useState(
+    new Cookies({ domain, prefix, sameSite, secure })
+  );
+  useEffect(() => {
+    setCookies(new Cookies({ domain, prefix, sameSite, secure }));
+  }, [domain, prefix, sameSite, secure]);
+  function getCookieSelection() {
+    const storedSelection = cookies.get(SELECTION_KEY);
     if (!storedSelection) return null;
     const { success, data } = selectionSchema.safeParse(
       JSON.parse(storedSelection)
@@ -2004,10 +2051,10 @@ const SelectionProvider = ({
     [items]
   );
   const [selection, setSelection] = useState(
-    getLsSelection(localStorageKey) ?? defaultSelection
+    getCookieSelection() ?? defaultSelection
   );
   const [savedSelection, setSavedSelection] = useState(
-    getLsSelection(localStorageKey)
+    getCookieSelection()
   );
   function toggleSelection(key, value) {
     const newSelection = selection ? { ...selection, [key]: value } : { [key]: value };
@@ -2022,47 +2069,51 @@ const SelectionProvider = ({
       (item) => selectedValues.includes(item.value)
     );
     for (const item of items) {
-      const elem = document.head.querySelector(`#${item.value}`);
-      if (!elem) continue;
-      elem.remove();
+      if (!item.scripts) continue;
+      for (const script of item.scripts) {
+        const elem = document.head.querySelector(`#${item.value}-${script.id}`);
+        if (!elem) continue;
+        elem.remove();
+      }
     }
     for (const item of mountedItems) {
-      const elem = document.createElement("script");
-      elem.id = item.value;
-      if (!item.script) {
+      if (!item.scripts) {
         if (!item.required)
           console.warn("CookieBanner: Missing script for", item.value);
         continue;
       }
-      const { success, data: script } = scriptDefinitionSchema.safeParse(
-        item.script
-      );
-      if (!success) {
-        console.error(
-          "CookieBanner: Invalid script definition for",
-          item.value
-        );
-        continue;
+      for (const script of item.scripts) {
+        if (!script) continue;
+        const elem = document.createElement("script");
+        elem.id = `${item.value}-${script.id}`;
+        const { success, data } = scriptDefinitionSchema.safeParse(script);
+        if (!success) {
+          console.error(
+            "CookieBanner: Invalid script definition for",
+            item.value
+          );
+          continue;
+        }
+        elem.type = data.type ?? "text/javascript";
+        elem.async = data.async ?? false;
+        elem.defer = data.defer ?? false;
+        switch (data.variant) {
+          case "inline":
+            elem.textContent = data.content;
+            break;
+          case "remote":
+            elem.src = data.src;
+            elem.crossOrigin = data.crossorigin ?? null;
+            elem.integrity = data.integrity ?? "";
+            break;
+        }
+        document.head.appendChild(elem);
       }
-      elem.type = script.type ?? "text/javascript";
-      elem.async = script.async ?? false;
-      elem.defer = script.defer ?? false;
-      switch (script.variant) {
-        case "inline":
-          elem.textContent = script.content;
-          break;
-        case "remote":
-          elem.src = script.src;
-          elem.crossOrigin = script.crossorigin ?? null;
-          elem.integrity = script.integrity ?? "";
-          break;
-      }
-      document.head.appendChild(elem);
     }
   }, [savedSelection, items]);
   function saveSelection(newSelection) {
     setSavedSelection(newSelection);
-    localStorage.setItem(localStorageKey, JSON.stringify(newSelection));
+    cookies.set(SELECTION_KEY, JSON.stringify(newSelection));
   }
   const onDeclineAll = useCallback(() => {
     const newSelection = Object.fromEntries(
@@ -2165,7 +2216,7 @@ const BannerItem = ({
   ] });
 };
 const BannerContent = ({
-  noTarget: noTarget2 = true,
+  container,
   heading: heading2 = "We use cookies.",
   subheading = "Please define your selection below.",
   selectLabel = "Select",
@@ -2179,12 +2230,12 @@ const BannerContent = ({
   const { onSave, onDeclineAll, selectionTaken } = useSelection();
   const [openItem, setOpenItem] = useState(void 0);
   const [settingsOpen, setSettingsOpen] = useState(defaultSettingsOpen);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Root$1, { open: !selectionTaken, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Root$1, { open: !selectionTaken, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Portal, { container, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
     Content$1,
     {
       className: clx({
         [classes$2.root]: true,
-        [classes$2.noTarget]: noTarget2
+        [classes$2.noTarget]: !container
       }),
       children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
         Root$2,
@@ -2242,23 +2293,19 @@ const BannerContent = ({
         }
       )
     }
-  ) });
+  ) }) });
 };
-const Banner = ({
-  localStorageKey = "cb-selection",
-  items,
-  ...rest
-}) => {
+const Banner = ({ cookie, items, ...rest }) => {
   const selectionItems = useMemo(
     () => items.filter((item) => !item.required).map((item) => ({
       value: item.value,
-      script: item.script,
+      scripts: item.scripts,
       defaultSelected: item.defaultSelected,
       required: item.required
     })),
     [items]
   );
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(SelectionProvider, { items: selectionItems, localStorageKey, children: /* @__PURE__ */ jsxRuntimeExports.jsx(BannerContent, { items, ...rest }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(SelectionProvider, { items: selectionItems, cookie, children: /* @__PURE__ */ jsxRuntimeExports.jsx(BannerContent, { items, cookie, ...rest }) });
 };
 export {
   Banner