@fremtind/jkl-cookie-consent-react - npm Package Compare versions

Comparing version 10.2.46 to 11.0.0

build/cjs/CookieConsent.js

 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -24,3 +22,2 @@ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
@@ -64,7 +61,9 @@ var target = {};
 module.exports = __toCommonJS(CookieConsent_exports);
-var import_jkl_react_hooks = require("@fremtind/jkl-react-hooks");
+var import_jkl_button_react = require("@fremtind/jkl-button-react");
+var import_jkl_modal_react = require("@fremtind/jkl-modal-react");
 var import_react = __toESM(require("react"));
+var import_react_dom = __toESM(require("react-dom"));
 var import_CookieConsentContext = require("./CookieConsentContext");
-var import_CookieConsentModal = require("./CookieConsentModal");
 var import_cookieConsentUtils = require("./cookieConsentUtils");
+var import_RequirementCheckbox = require("./RequirementCheckbox");
 const CookieConsent = (_a) => {
@@ -78,11 +77,38 @@ var _b = _a, {
   ]);
-  const { dispatch, consent, cookieName, cookieDomain } = (0, import_CookieConsentContext.useCookieConsentState)();
-  const prevConsent = (0, import_jkl_react_hooks.usePreviousValue)(consent);
+  const {
+    currentConsent,
+    cookieName,
+    cookieDomain,
+    requirement,
+    isOpen,
+    setIsOpen,
+    updateCurrentConsents
+  } = (0, import_CookieConsentContext.useInternalState)();
+  const [instance, modalConfig] = (0, import_jkl_modal_react.useModal)({
+    id: "jkl-cookie-modal-".concat((0, import_react.useId)()),
+    // The optional `role` attribute of the dialog element, either `dialog`
+    // (default) or `alertdialog` to make it a modal (preventing closing on
+    // click outside of ESC key).
+    role: blocking ? "alertdialog" : "dialog",
+    // The required dialog title, mandatory in the document
+    // to provide context to assistive technology.
+    title: "Informasjonskapsler"
+  });
   (0, import_react.useEffect)(() => {
-    if (onAccept) {
-      if (consent !== prevConsent) {
-        onAccept(consent);
-      }
+    if (isOpen) {
+      instance == null ? void 0 : instance.show();
+    } else {
+      instance == null ? void 0 : instance.hide();
     }
-  }, [onAccept, consent, prevConsent]);
+  }, [instance, isOpen]);
+  (0, import_react.useEffect)(() => {
+    const onHide = () => setIsOpen(false);
+    instance == null ? void 0 : instance.on("hide", onHide);
+    return () => {
+      instance == null ? void 0 : instance.off("hide", onHide);
+    };
+  }, [instance, setIsOpen]);
+  if (typeof document === "undefined") {
+    return null;
+  }
   if (typeof navigator !== "undefined" && !navigator.cookieEnabled) {
@@ -98,9 +124,16 @@ if (onAccept) {
   }
-  const handleAccept = (newConsent) => {
-    const newConsentWithoutNullValues = Object.fromEntries(
-      Object.entries(newConsent).filter(([, value]) => value != null)
+  const accept = (selection = (0, import_cookieConsentUtils.convertBooleanConsentObjectToConsentObject)(
+    {
+      functional: true,
+      statistics: true,
+      marketing: true
+    },
+    requirement
+  )) => {
+    const selectionWithoutEmptyValues = Object.fromEntries(
+      Object.entries(selection).filter(
+        ([, value]) => typeof value !== "undefined"
+      )
     );
-    const updatedConsent = __spreadValues(__spreadValues({}, consent), newConsentWithoutNullValues);
-    dispatch({ type: "UPDATE_CONSENT", payload: updatedConsent });
-    dispatch({ type: "SET_SHOW_CONSENT", payload: false });
+    const updatedConsent = __spreadValues(__spreadValues({}, currentConsent), selectionWithoutEmptyValues);
     (0, import_cookieConsentUtils.setConsentCookie)({
@@ -111,8 +144,66 @@ consent: updatedConsent,
     });
+    updateCurrentConsents();
+    onAccept == null ? void 0 : onAccept(updatedConsent);
+    instance == null ? void 0 : instance.hide();
   };
-  if (blocking) {
-    return /* @__PURE__ */ import_react.default.createElement(import_CookieConsentModal.CookieConsentModal, __spreadProps(__spreadValues({}, rest), { onAccept: handleAccept }));
-  }
-  return null;
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    const newConsents = (0, import_cookieConsentUtils.convertBooleanConsentObjectToConsentObject)(
+      {
+        functional: formData.get("functional") === "true",
+        statistics: formData.get("statistics") === "true",
+        marketing: formData.get("marketing") === "true"
+      },
+      requirement
+    );
+    accept(newConsents);
+  };
+  return import_react_dom.default.createPortal(
+    /* @__PURE__ */ import_react.default.createElement(import_jkl_modal_react.ModalContainer, __spreadValues(__spreadValues({}, modalConfig.container), rest), /* @__PURE__ */ import_react.default.createElement(import_jkl_modal_react.ModalOverlay, __spreadValues({}, modalConfig.overlay)), /* @__PURE__ */ import_react.default.createElement(import_jkl_modal_react.Modal, __spreadValues(__spreadValues({ component: "form" }, modalConfig.modal), { onSubmit }), /* @__PURE__ */ import_react.default.createElement(import_jkl_modal_react.ModalHeader, null, /* @__PURE__ */ import_react.default.createElement(import_jkl_modal_react.ModalTitle, __spreadValues({}, modalConfig.title), "Velg informasjonskapsler")), /* @__PURE__ */ import_react.default.createElement(import_jkl_modal_react.ModalBody, null, /* @__PURE__ */ import_react.default.createElement("p", null, "For at nettsidene skal fungere m\xE5 vi bruke tekniske informasjonskaplser. Disse lagres derfor uten samtykke."), requirement.functional && /* @__PURE__ */ import_react.default.createElement(
+      import_RequirementCheckbox.RequirementCheckbox,
+      {
+        name: "functional",
+        label: "Tillat funksjonelle",
+        defaultChecked: currentConsent.functional === "accepted",
+        key: "functional-".concat(currentConsent.functional)
+      },
+      "Funksjonelle informasjonskapsler lagrer opplysninger om din bruk av nettsidene og hvilke innstillinger du har gjort, slik at du kan f\xE5 funksjonalitet tilpasset deg."
+    ), requirement.statistics && /* @__PURE__ */ import_react.default.createElement(
+      import_RequirementCheckbox.RequirementCheckbox,
+      {
+        name: "statistics",
+        label: "Tillat statistikk",
+        defaultChecked: currentConsent.statistics === "accepted",
+        key: "statistics-".concat(currentConsent.statistics)
+      },
+      "Informasjonskapslene lagrer statistikk som hjelper oss med \xE5 forst\xE5 hvordan nettsidene blir brukt, slik at vi kan gj\xF8re dem bedre og enklere \xE5 bruke."
+    ), requirement.marketing && /* @__PURE__ */ import_react.default.createElement(
+      import_RequirementCheckbox.RequirementCheckbox,
+      {
+        name: "marketing",
+        label: "Tillat personlig markedsf\xF8ring",
+        defaultChecked: currentConsent.marketing === "accepted",
+        key: "marketing-".concat(currentConsent.marketing)
+      },
+      "Dette gj\xF8r at vi kan gi deg mer relevant og tilpasset markedsf\xF8ring, ogs\xE5 gjennom v\xE5re samarbeidspartnere, p\xE5 for eksempel nettsider, annonser og i sosiale medier."
+    )), /* @__PURE__ */ import_react.default.createElement(import_jkl_modal_react.ModalActions, null, /* @__PURE__ */ import_react.default.createElement(
+      import_jkl_button_react.SecondaryButton,
+      {
+        "data-testid": "jkl-cookie-consent-godta-alle",
+        type: "button",
+        onClick: () => accept()
+      },
+      "Godta alle"
+    ), /* @__PURE__ */ import_react.default.createElement(
+      import_jkl_button_react.SecondaryButton,
+      {
+        "data-testid": "jkl-cookie-consent-godta",
+        type: "submit"
+      },
+      "Godta mine valg"
+    )))),
+    document.body
+  );
 };
 //# sourceMappingURL=CookieConsent.js.map

build/cjs/CookieConsentContext.js

 "use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __export = (target, all) => {
@@ -51,3 +34,3 @@ for (var name in all)
   useCookieConsent: () => useCookieConsent,
-  useCookieConsentState: () => useCookieConsentState
+  useInternalState: () => useInternalState
 });
@@ -58,24 +41,3 @@ module.exports = __toCommonJS(CookieConsentContext_exports);
 const DEFAULT_COOKIE_NAME = "fremtind-cookie-consent";
-const CookieConsentContext = import_react.default.createContext(void 0);
-const cookieConsentReducer = (state, action) => {
-  switch (action.type) {
-    case "SET_SHOW_CONSENT":
-      return __spreadProps(__spreadValues({}, state), { isOpen: action.payload });
-    case "SET_SHOW_SETTINGS":
-      return __spreadProps(__spreadValues({}, state), {
-        showSettings: action.payload
-      });
-    case "UPDATE_CONSENT":
-      return __spreadProps(__spreadValues({}, state), {
-        consent: __spreadValues(__spreadValues({}, state.consent), action.payload)
-      });
-    case "UPDATE_REQUIREMENTS":
-      return __spreadProps(__spreadValues({}, state), {
-        requirement: __spreadValues(__spreadValues({}, state.requirement), action.payload)
-      });
-    default: {
-      throw new Error("Unhandled action type: ".concat(action.type));
-    }
-  }
-};
+const Context = import_react.default.createContext(void 0);
 const CookieConsentProvider = ({
@@ -90,2 +52,7 @@ children,
 }) => {
+  const [timestamp, setTimestamp] = (0, import_react.useState)(() => Date.now());
+  const requirement = (0, import_react.useMemo)(
+    () => (0, import_cookieConsentUtils.buildRequirementsObject)({ marketing, functional, statistics }),
+    [marketing, functional, statistics]
+  );
   const consentCookie = (0, import_react.useMemo)(() => {
@@ -98,38 +65,33 @@ var _a;
     };
-  }, [cookieAdapter, cookieName]);
-  const requirement = (0, import_react.useMemo)(
-    () => (0, import_cookieConsentUtils.buildRequirementsObject)({ marketing, functional, statistics }),
-    [marketing, functional, statistics]
+  }, [cookieAdapter, cookieName, timestamp]);
+  const [isOpen, setIsOpen] = (0, import_react.useState)(() => {
+    return (0, import_cookieConsentUtils.shouldShowConsentDialog)(requirement, consentCookie);
+  });
+  return /* @__PURE__ */ import_react.default.createElement(
+    Context.Provider,
+    {
+      value: {
+        isOpen,
+        setIsOpen,
+        updateCurrentConsents: () => setTimestamp(Date.now()),
+        requirement,
+        currentConsent: consentCookie,
+        cookieName,
+        cookieDomain
+      }
+    },
+    children
   );
-  const [state, dispatch] = import_react.default.useReducer(cookieConsentReducer, {
-    isOpen: false,
-    showSettings: false,
-    requirement,
-    consent: consentCookie
-  });
-  (0, import_react.useEffect)(() => {
-    if ((0, import_cookieConsentUtils.shouldShowConsentDialog)(requirement, consentCookie)) {
-      dispatch({ type: "SET_SHOW_CONSENT", payload: true });
-    } else if (consentCookie) {
-      dispatch({ type: "UPDATE_CONSENT", payload: consentCookie });
-    }
-  }, [requirement, consentCookie]);
-  const value = { state, dispatch, cookieName, cookieDomain };
-  return /* @__PURE__ */ import_react.default.createElement(CookieConsentContext.Provider, { value }, children);
 };
-const useCookieConsentState = () => {
-  const context = import_react.default.useContext(CookieConsentContext);
+const useInternalState = () => {
+  const context = import_react.default.useContext(Context);
   if (context === void 0) {
     throw new Error(
-      "useCookieConsentState must be used within a CookieConsentProvider"
+      "CookieConsent must be used within a CookieConsentProvider"
     );
   }
-  return __spreadValues({
-    dispatch: context.dispatch,
-    cookieName: context.cookieName,
-    cookieDomain: context.cookieDomain
-  }, context.state);
+  return context;
 };
 const useCookieConsent = () => {
-  const context = import_react.default.useContext(CookieConsentContext);
+  const context = (0, import_react.useContext)(Context);
   if (context === void 0) {
@@ -140,17 +102,8 @@ throw new Error(
   }
-  const openConsentModalWithSettings = () => {
-    context.dispatch({ type: "SET_SHOW_CONSENT", payload: true });
-    context.dispatch({ type: "SET_SHOW_SETTINGS", payload: true });
+  const openConsentModal = () => {
+    context.setIsOpen(true);
   };
-  const openConsentModalWithDefaults = () => {
-    context.dispatch({ type: "SET_SHOW_CONSENT", payload: true });
-    context.dispatch({ type: "SET_SHOW_SETTINGS", payload: false });
-  };
-  const consents = context.state.consent;
-  return {
-    openConsentModalWithSettings,
-    openConsentModalWithDefaults,
-    consents
-  };
+  const consents = context.currentConsent;
+  return { openConsentModal, consents };
 };
 //# sourceMappingURL=CookieConsentContext.js.map

build/cjs/cookieConsentUtils.js

@@ -38,4 +38,2 @@ "use strict";
   convertBooleanToConsentValue: () => convertBooleanToConsentValue,
-  convertConsentObjectToBooleans: () => convertConsentObjectToBooleans,
-  convertConsentValueToFormValue: () => convertConsentValueToFormValue,
   getConsentCookie: () => getConsentCookie,
@@ -103,25 +101,2 @@ setConsentCookie: () => setConsentCookie,
 };
-const convertConsentValueToFormValue = (consent) => {
-  if (!consent) {
-    return void 0;
-  }
-  if (consent === "denied") {
-    return false;
-  }
-  return true;
-};
-const convertConsentObjectToBooleans = (consent) => {
-  const defaultConsent = {
-    functional: null,
-    marketing: null,
-    statistics: null
-  };
-  const consentEntries = Object.entries(
-    __spreadValues(__spreadValues({}, defaultConsent), consent)
-  ).map(([consentName, value]) => [
-    consentName,
-    convertConsentValueToFormValue(value)
-  ]);
-  return Object.fromEntries(consentEntries);
-};
 const convertBooleanToConsentValue = (formValue) => {
@@ -136,15 +111,8 @@ if (typeof formValue === "undefined") {
 };
-const convertBooleanConsentObjectToConsentObject = (consent) => {
-  const defaultObject = {
-    functional: void 0,
-    marketing: void 0,
-    statistics: void 0
+const convertBooleanConsentObjectToConsentObject = (consent, requirement) => {
+  return {
+    functional: requirement.functional ? convertBooleanToConsentValue(consent.functional) : void 0,
+    statistics: requirement.statistics ? convertBooleanToConsentValue(consent.statistics) : void 0,
+    marketing: requirement.marketing ? convertBooleanToConsentValue(consent.marketing) : void 0
   };
-  const consentEntries = Object.entries(__spreadValues(__spreadValues({}, defaultObject), consent)).map(
-    ([consentName, value]) => [
-      consentName,
-      convertBooleanToConsentValue(value)
-    ]
-  );
-  return Object.fromEntries(consentEntries);
 };
@@ -151,0 +119,0 @@ const buildRequirementsObject = ({

build/CookieConsentContext.d.ts

@@ -1,48 +0,11 @@
-import { WithChildren } from "@fremtind/jkl-core";
 import React from "react";
-import type { Consent, ConsentRequirement } from "./types";
-interface SetShowConsentAction {
-    type: "SET_SHOW_CONSENT";
-    payload: boolean;
-}
-interface SetShowSettingsAction {
-    type: "SET_SHOW_SETTINGS";
-    payload: boolean;
-}
-interface UpdateConsentAction {
-    type: "UPDATE_CONSENT";
-    payload: Consent;
-}
-interface UpdateRequirementsAction {
-    type: "UPDATE_REQUIREMENTS";
-    payload: ConsentRequirement;
-}
-type Action = SetShowConsentAction | UpdateConsentAction | SetShowSettingsAction | UpdateRequirementsAction;
-type Dispatch = (action: Action) => void;
-interface State {
-    isOpen: boolean;
-    showSettings: boolean;
-    requirement: ConsentRequirement;
-    consent: Consent;
-}
+import { Consent, CookieConsentProviderProps, InternalContext } from "./types";
 export declare const DEFAULT_COOKIE_NAME = "fremtind-cookie-consent";
-export interface CookieConsentProviderProps extends Partial<ConsentRequirement>, WithChildren {
-    cookieAdapter?: () => Consent | undefined;
-    cookieName?: string;
-    cookieDomain?: string;
-}
-declare const CookieConsentProvider: React.FC<CookieConsentProviderProps>;
-interface UseCookieConsentState extends State {
-    dispatch: Dispatch;
-    cookieName: string;
-    cookieDomain?: string;
-}
-declare const useCookieConsentState: () => UseCookieConsentState;
+export declare const CookieConsentProvider: React.FC<CookieConsentProviderProps>;
+export declare const useInternalState: () => InternalContext;
 type UseCookieConsent = {
-    openConsentModalWithSettings: () => void;
-    openConsentModalWithDefaults: () => void;
-    /** Se hvilke samtykker som er gitt, om du for eksempel trenger styre UI basert på samtykker. */
+    openConsentModal: () => void;
     consents: Consent;
 };
-declare const useCookieConsent: () => UseCookieConsent;
-export { CookieConsentProvider, useCookieConsentState, useCookieConsent };
+export declare const useCookieConsent: () => UseCookieConsent;
+export {};

build/cookieConsentUtils.d.ts

@@ -13,8 +13,4 @@ import type { Consent, ConsentRequirement, ConsentState } from "./types";
 export declare const shouldShowConsentDialog: (requirement: ConsentRequirement, consent: Consent | undefined) => boolean;
-export declare const convertConsentValueToFormValue: (consent: ConsentState) => boolean | undefined;
-export declare const convertConsentObjectToBooleans: (consent: Partial<Record<keyof Consent, ConsentState>>) => {
-    [k: string]: boolean | undefined;
-};
 export declare const convertBooleanToConsentValue: (formValue: boolean | undefined) => ConsentState;
-export declare const convertBooleanConsentObjectToConsentObject: (consent: Partial<Record<keyof Consent, boolean | undefined>>) => Consent;
+export declare const convertBooleanConsentObjectToConsentObject: (consent: Partial<Record<keyof Consent, boolean | undefined>>, requirement: ConsentRequirement) => Consent;
 export declare const buildRequirementsObject: ({ marketing, functional, statistics, }: ConsentRequirement) => {
@@ -21,0 +17,0 @@ statistics?: true | undefined;

build/esm/CookieConsent.js

 var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -19,3 +17,2 @@ var __hasOwnProp = Object.prototype.hasOwnProperty;
 };
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __objRest = (source, exclude) => {
@@ -33,7 +30,21 @@ var target = {};
 };
-import { usePreviousValue } from "@fremtind/jkl-react-hooks";
-import React, { useEffect } from "react";
-import { useCookieConsentState } from "./CookieConsentContext";
-import { CookieConsentModal } from "./CookieConsentModal";
-import { setConsentCookie } from "./cookieConsentUtils";
+import { SecondaryButton } from "@fremtind/jkl-button-react";
+import {
+  Modal,
+  ModalActions,
+  ModalBody,
+  ModalContainer,
+  ModalHeader,
+  ModalOverlay,
+  ModalTitle,
+  useModal
+} from "@fremtind/jkl-modal-react";
+import React, { useEffect, useId } from "react";
+import ReactDOM from "react-dom";
+import { useInternalState } from "./CookieConsentContext";
+import {
+  convertBooleanConsentObjectToConsentObject,
+  setConsentCookie
+} from "./cookieConsentUtils";
+import { RequirementCheckbox } from "./RequirementCheckbox";
 const CookieConsent = (_a) => {
@@ -47,11 +58,38 @@ var _b = _a, {
   ]);
-  const { dispatch, consent, cookieName, cookieDomain } = useCookieConsentState();
-  const prevConsent = usePreviousValue(consent);
+  const {
+    currentConsent,
+    cookieName,
+    cookieDomain,
+    requirement,
+    isOpen,
+    setIsOpen,
+    updateCurrentConsents
+  } = useInternalState();
+  const [instance, modalConfig] = useModal({
+    id: "jkl-cookie-modal-".concat(useId()),
+    // The optional `role` attribute of the dialog element, either `dialog`
+    // (default) or `alertdialog` to make it a modal (preventing closing on
+    // click outside of ESC key).
+    role: blocking ? "alertdialog" : "dialog",
+    // The required dialog title, mandatory in the document
+    // to provide context to assistive technology.
+    title: "Informasjonskapsler"
+  });
   useEffect(() => {
-    if (onAccept) {
-      if (consent !== prevConsent) {
-        onAccept(consent);
-      }
+    if (isOpen) {
+      instance == null ? void 0 : instance.show();
+    } else {
+      instance == null ? void 0 : instance.hide();
     }
-  }, [onAccept, consent, prevConsent]);
+  }, [instance, isOpen]);
+  useEffect(() => {
+    const onHide = () => setIsOpen(false);
+    instance == null ? void 0 : instance.on("hide", onHide);
+    return () => {
+      instance == null ? void 0 : instance.off("hide", onHide);
+    };
+  }, [instance, setIsOpen]);
+  if (typeof document === "undefined") {
+    return null;
+  }
   if (typeof navigator !== "undefined" && !navigator.cookieEnabled) {
@@ -67,9 +105,16 @@ if (onAccept) {
   }
-  const handleAccept = (newConsent) => {
-    const newConsentWithoutNullValues = Object.fromEntries(
-      Object.entries(newConsent).filter(([, value]) => value != null)
+  const accept = (selection = convertBooleanConsentObjectToConsentObject(
+    {
+      functional: true,
+      statistics: true,
+      marketing: true
+    },
+    requirement
+  )) => {
+    const selectionWithoutEmptyValues = Object.fromEntries(
+      Object.entries(selection).filter(
+        ([, value]) => typeof value !== "undefined"
+      )
     );
-    const updatedConsent = __spreadValues(__spreadValues({}, consent), newConsentWithoutNullValues);
-    dispatch({ type: "UPDATE_CONSENT", payload: updatedConsent });
-    dispatch({ type: "SET_SHOW_CONSENT", payload: false });
+    const updatedConsent = __spreadValues(__spreadValues({}, currentConsent), selectionWithoutEmptyValues);
     setConsentCookie({
@@ -80,7 +125,65 @@ consent: updatedConsent,
     });
+    updateCurrentConsents();
+    onAccept == null ? void 0 : onAccept(updatedConsent);
+    instance == null ? void 0 : instance.hide();
   };
-  if (blocking) {
-    return /* @__PURE__ */ React.createElement(CookieConsentModal, __spreadProps(__spreadValues({}, rest), { onAccept: handleAccept }));
-  }
-  return null;
+  const onSubmit = (e) => {
+    e.preventDefault();
+    const formData = new FormData(e.currentTarget);
+    const newConsents = convertBooleanConsentObjectToConsentObject(
+      {
+        functional: formData.get("functional") === "true",
+        statistics: formData.get("statistics") === "true",
+        marketing: formData.get("marketing") === "true"
+      },
+      requirement
+    );
+    accept(newConsents);
+  };
+  return ReactDOM.createPortal(
+    /* @__PURE__ */ React.createElement(ModalContainer, __spreadValues(__spreadValues({}, modalConfig.container), rest), /* @__PURE__ */ React.createElement(ModalOverlay, __spreadValues({}, modalConfig.overlay)), /* @__PURE__ */ React.createElement(Modal, __spreadValues(__spreadValues({ component: "form" }, modalConfig.modal), { onSubmit }), /* @__PURE__ */ React.createElement(ModalHeader, null, /* @__PURE__ */ React.createElement(ModalTitle, __spreadValues({}, modalConfig.title), "Velg informasjonskapsler")), /* @__PURE__ */ React.createElement(ModalBody, null, /* @__PURE__ */ React.createElement("p", null, "For at nettsidene skal fungere m\xE5 vi bruke tekniske informasjonskaplser. Disse lagres derfor uten samtykke."), requirement.functional && /* @__PURE__ */ React.createElement(
+      RequirementCheckbox,
+      {
+        name: "functional",
+        label: "Tillat funksjonelle",
+        defaultChecked: currentConsent.functional === "accepted",
+        key: "functional-".concat(currentConsent.functional)
+      },
+      "Funksjonelle informasjonskapsler lagrer opplysninger om din bruk av nettsidene og hvilke innstillinger du har gjort, slik at du kan f\xE5 funksjonalitet tilpasset deg."
+    ), requirement.statistics && /* @__PURE__ */ React.createElement(
+      RequirementCheckbox,
+      {
+        name: "statistics",
+        label: "Tillat statistikk",
+        defaultChecked: currentConsent.statistics === "accepted",
+        key: "statistics-".concat(currentConsent.statistics)
+      },
+      "Informasjonskapslene lagrer statistikk som hjelper oss med \xE5 forst\xE5 hvordan nettsidene blir brukt, slik at vi kan gj\xF8re dem bedre og enklere \xE5 bruke."
+    ), requirement.marketing && /* @__PURE__ */ React.createElement(
+      RequirementCheckbox,
+      {
+        name: "marketing",
+        label: "Tillat personlig markedsf\xF8ring",
+        defaultChecked: currentConsent.marketing === "accepted",
+        key: "marketing-".concat(currentConsent.marketing)
+      },
+      "Dette gj\xF8r at vi kan gi deg mer relevant og tilpasset markedsf\xF8ring, ogs\xE5 gjennom v\xE5re samarbeidspartnere, p\xE5 for eksempel nettsider, annonser og i sosiale medier."
+    )), /* @__PURE__ */ React.createElement(ModalActions, null, /* @__PURE__ */ React.createElement(
+      SecondaryButton,
+      {
+        "data-testid": "jkl-cookie-consent-godta-alle",
+        type: "button",
+        onClick: () => accept()
+      },
+      "Godta alle"
+    ), /* @__PURE__ */ React.createElement(
+      SecondaryButton,
+      {
+        "data-testid": "jkl-cookie-consent-godta",
+        type: "submit"
+      },
+      "Godta mine valg"
+    )))),
+    document.body
+  );
 };
@@ -87,0 +190,0 @@ export {

build/esm/CookieConsentContext.js

@@ -1,49 +0,9 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import React, { useEffect, useMemo } from "react";
+import React, { useContext, useMemo, useState } from "react";
 import {
-  shouldShowConsentDialog,
+  buildRequirementsObject,
   getConsentCookie,
-  buildRequirementsObject
+  shouldShowConsentDialog
 } from "./cookieConsentUtils";
 const DEFAULT_COOKIE_NAME = "fremtind-cookie-consent";
-const CookieConsentContext = React.createContext(void 0);
-const cookieConsentReducer = (state, action) => {
-  switch (action.type) {
-    case "SET_SHOW_CONSENT":
-      return __spreadProps(__spreadValues({}, state), { isOpen: action.payload });
-    case "SET_SHOW_SETTINGS":
-      return __spreadProps(__spreadValues({}, state), {
-        showSettings: action.payload
-      });
-    case "UPDATE_CONSENT":
-      return __spreadProps(__spreadValues({}, state), {
-        consent: __spreadValues(__spreadValues({}, state.consent), action.payload)
-      });
-    case "UPDATE_REQUIREMENTS":
-      return __spreadProps(__spreadValues({}, state), {
-        requirement: __spreadValues(__spreadValues({}, state.requirement), action.payload)
-      });
-    default: {
-      throw new Error("Unhandled action type: ".concat(action.type));
-    }
-  }
-};
+const Context = React.createContext(void 0);
 const CookieConsentProvider = ({
@@ -58,2 +18,7 @@ children,
 }) => {
+  const [timestamp, setTimestamp] = useState(() => Date.now());
+  const requirement = useMemo(
+    () => buildRequirementsObject({ marketing, functional, statistics }),
+    [marketing, functional, statistics]
+  );
   const consentCookie = useMemo(() => {
@@ -66,38 +31,33 @@ var _a;
     };
-  }, [cookieAdapter, cookieName]);
-  const requirement = useMemo(
-    () => buildRequirementsObject({ marketing, functional, statistics }),
-    [marketing, functional, statistics]
+  }, [cookieAdapter, cookieName, timestamp]);
+  const [isOpen, setIsOpen] = useState(() => {
+    return shouldShowConsentDialog(requirement, consentCookie);
+  });
+  return /* @__PURE__ */ React.createElement(
+    Context.Provider,
+    {
+      value: {
+        isOpen,
+        setIsOpen,
+        updateCurrentConsents: () => setTimestamp(Date.now()),
+        requirement,
+        currentConsent: consentCookie,
+        cookieName,
+        cookieDomain
+      }
+    },
+    children
   );
-  const [state, dispatch] = React.useReducer(cookieConsentReducer, {
-    isOpen: false,
-    showSettings: false,
-    requirement,
-    consent: consentCookie
-  });
-  useEffect(() => {
-    if (shouldShowConsentDialog(requirement, consentCookie)) {
-      dispatch({ type: "SET_SHOW_CONSENT", payload: true });
-    } else if (consentCookie) {
-      dispatch({ type: "UPDATE_CONSENT", payload: consentCookie });
-    }
-  }, [requirement, consentCookie]);
-  const value = { state, dispatch, cookieName, cookieDomain };
-  return /* @__PURE__ */ React.createElement(CookieConsentContext.Provider, { value }, children);
 };
-const useCookieConsentState = () => {
-  const context = React.useContext(CookieConsentContext);
+const useInternalState = () => {
+  const context = React.useContext(Context);
   if (context === void 0) {
     throw new Error(
-      "useCookieConsentState must be used within a CookieConsentProvider"
+      "CookieConsent must be used within a CookieConsentProvider"
     );
   }
-  return __spreadValues({
-    dispatch: context.dispatch,
-    cookieName: context.cookieName,
-    cookieDomain: context.cookieDomain
-  }, context.state);
+  return context;
 };
 const useCookieConsent = () => {
-  const context = React.useContext(CookieConsentContext);
+  const context = useContext(Context);
   if (context === void 0) {
@@ -108,16 +68,7 @@ throw new Error(
   }
-  const openConsentModalWithSettings = () => {
-    context.dispatch({ type: "SET_SHOW_CONSENT", payload: true });
-    context.dispatch({ type: "SET_SHOW_SETTINGS", payload: true });
+  const openConsentModal = () => {
+    context.setIsOpen(true);
   };
-  const openConsentModalWithDefaults = () => {
-    context.dispatch({ type: "SET_SHOW_CONSENT", payload: true });
-    context.dispatch({ type: "SET_SHOW_SETTINGS", payload: false });
-  };
-  const consents = context.state.consent;
-  return {
-    openConsentModalWithSettings,
-    openConsentModalWithDefaults,
-    consents
-  };
+  const consents = context.currentConsent;
+  return { openConsentModal, consents };
 };
@@ -128,4 +79,4 @@ export {
   useCookieConsent,
-  useCookieConsentState
+  useInternalState
 };
 //# sourceMappingURL=CookieConsentContext.js.map

build/esm/cookieConsentUtils.js

@@ -74,25 +74,2 @@ var __defProp = Object.defineProperty;
 };
-const convertConsentValueToFormValue = (consent) => {
-  if (!consent) {
-    return void 0;
-  }
-  if (consent === "denied") {
-    return false;
-  }
-  return true;
-};
-const convertConsentObjectToBooleans = (consent) => {
-  const defaultConsent = {
-    functional: null,
-    marketing: null,
-    statistics: null
-  };
-  const consentEntries = Object.entries(
-    __spreadValues(__spreadValues({}, defaultConsent), consent)
-  ).map(([consentName, value]) => [
-    consentName,
-    convertConsentValueToFormValue(value)
-  ]);
-  return Object.fromEntries(consentEntries);
-};
 const convertBooleanToConsentValue = (formValue) => {
@@ -107,15 +84,8 @@ if (typeof formValue === "undefined") {
 };
-const convertBooleanConsentObjectToConsentObject = (consent) => {
-  const defaultObject = {
-    functional: void 0,
-    marketing: void 0,
-    statistics: void 0
+const convertBooleanConsentObjectToConsentObject = (consent, requirement) => {
+  return {
+    functional: requirement.functional ? convertBooleanToConsentValue(consent.functional) : void 0,
+    statistics: requirement.statistics ? convertBooleanToConsentValue(consent.statistics) : void 0,
+    marketing: requirement.marketing ? convertBooleanToConsentValue(consent.marketing) : void 0
   };
-  const consentEntries = Object.entries(__spreadValues(__spreadValues({}, defaultObject), consent)).map(
-    ([consentName, value]) => [
-      consentName,
-      convertBooleanToConsentValue(value)
-    ]
-  );
-  return Object.fromEntries(consentEntries);
 };
@@ -133,4 +103,2 @@ const buildRequirementsObject = ({
   convertBooleanToConsentValue,
-  convertConsentObjectToBooleans,
-  convertConsentValueToFormValue,
   getConsentCookie,
@@ -137,0 +105,0 @@ setConsentCookie,

build/index.d.ts

@@ -1,5 +0,3 @@
-export type { AcceptConsentCallback, Consent, ConsentState } from "./types";
-export type { CookieConsentProps } from "./CookieConsent";
-export { CookieConsent } from "./CookieConsent";
-export type { CookieConsentProviderProps } from "./CookieConsentContext";
+export { CookieConsent, type CookieConsentProps } from "./CookieConsent";
 export { CookieConsentProvider, useCookieConsent, } from "./CookieConsentContext";
+export type { AcceptConsentCallback, Consent, ConsentState, CookieConsentProviderProps, } from "./types";

build/types.d.ts

@@ -0,12 +1,27 @@
+import { WithChildren } from "@fremtind/jkl-core";
 export type ConsentState = null | "denied" | "accepted";
 export type ConsentRequirement = Partial<Record<keyof Consent, boolean>>;
-export interface Consent {
+export type Consent = {
     marketing?: ConsentState;
     functional?: ConsentState;
     statistics?: ConsentState;
-}
+};
 export type AcceptConsentCallback = (consent: Consent) => void;
-export interface ConsentComponentBaseProps {
+export type ConsentComponentBaseProps = {
     className?: string;
     onAccept: AcceptConsentCallback;
-}
+};
+export type InternalContext = {
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    updateCurrentConsents: () => void;
+    requirement: ConsentRequirement;
+    currentConsent: Consent;
+    cookieName: string;
+    cookieDomain?: string;
+};
+export type CookieConsentProviderProps = Partial<ConsentRequirement> & WithChildren & {
+    cookieAdapter?: () => Consent | undefined;
+    cookieName?: string;
+    cookieDomain?: string;
+};

package.json

 {
     "name": "@fremtind/jkl-cookie-consent-react",
-    "version": "10.2.46",
+    "version": "11.0.0",
     "publishConfig": {
@@ -42,3 +42,3 @@ "access": "public"
         "@fremtind/jkl-checkbox-react": "^12.0.8",
-        "@fremtind/jkl-cookie-consent": "^11.0.35",
+        "@fremtind/jkl-cookie-consent": "^12.0.0",
         "@fremtind/jkl-core": "^14.10.0",
@@ -62,3 +62,3 @@ "@fremtind/jkl-list-react": "^10.2.29",
     },
-    "gitHead": "cb2a4a3afec120f88aa5cf58e8862aea29f1da6d"
+    "gitHead": "18d039d0caeeb3394ce03f6de264d3334fccd820"
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

88695

decreased by-36.75%

Number of package files

35

decreased by-30%

Lines of code

1054

decreased by-36.04%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@fremtind/jkl-button@12.2.20(transitive)

• + Added@fremtind/jkl-button-react@15.2.28(transitive)

• + Added@fremtind/jkl-checkbox@11.1.18(transitive)

• + Added@fremtind/jkl-checkbox-react@12.0.11(transitive)

• + Added@fremtind/jkl-cookie-consent@12.0.3(transitive)

• + Added@fremtind/jkl-icon-button@4.0.39(transitive)

• + Added@fremtind/jkl-icon-button-react@5.0.38(transitive)

• + Added@fremtind/jkl-icons@10.1.16(transitive)

• + Added@fremtind/jkl-icons-react@9.2.4(transitive)

• + Added@fremtind/jkl-list@11.0.7(transitive)

• + Added@fremtind/jkl-list-react@10.2.32(transitive)

• + Added@fremtind/jkl-loader@11.0.36(transitive)

• + Added@fremtind/jkl-loader-react@12.0.37(transitive)

• + Added@fremtind/jkl-modal@2.2.19(transitive)

• + Added@fremtind/jkl-modal-react@2.1.73(transitive)

• + Addeda11y-dialog@7.5.3(transitive)

• + Addedfocusable-selectors@0.4.0(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact-a11y-dialog@6.2.0(transitive)

• + Addedreact-is@16.13.1(transitive)

• - Removed@fremtind/jkl-button-react@15.2.26(transitive)

• - Removed@fremtind/jkl-checkbox-react@12.0.10(transitive)

• - Removed@fremtind/jkl-cookie-consent@11.0.35(transitive)

• - Removed@fremtind/jkl-list-react@10.2.30(transitive)

• - Removed@fremtind/jkl-modal-react@2.1.71(transitive)

• Updated@fremtind/jkl-cookie-consent@^12.0.0