@helsenorge/designsystem-react 15.7.2 → 16.0.0

package/lib/hooks/useDismissablePopover.d.ts

@@ -0,0 +1,20 @@
+interface UseDismissablePopover {
+    /** Elementet/elementene som utgjør popoveren */
+    popoverRef: React.RefObject<HTMLElement | null> | React.RefObject<HTMLElement | null>[];
+    /** Trigger-elementet som får fokus tilbake når fokus ellers ville gått tapt */
+    triggerRef: React.RefObject<HTMLElement | null>;
+    /** Om popoveren er åpen */
+    isOpen: boolean;
+    /** Lukker popoveren (oppdaterer komponentens state) */
+    onClose: () => void;
+    /** Scroller popoveren inn i viewport når den åpnes, uten at trigger mister synlighet */
+    scrollPopoverIntoView?: boolean;
+}
+/**
+ * Lukkeatferd for popovers: klikk utenfor, Escape og Tab ut av komponenten lukker.
+ * Fokus fortsetter til neste element (WCAG 2.4.3), og flyttes bare tilbake til
+ * trigger når det ellers ville gått tapt.
+ * @returns Lukkefunksjon som også kan brukes av komponentens egne lukkeknapper/valg
+ */
+export declare const useDismissablePopover: ({ popoverRef, triggerRef, isOpen, onClose, scrollPopoverIntoView, }: UseDismissablePopover) => (() => void);
+export {};

package/lib/hooks/useDismissablePopover.js

@@ -0,0 +1,66 @@
+import { KeyboardEventKey } from "../constants.js";
+import { getDocumentActiveElement } from "../utils/focus.js";
+import { useOutsideEvent } from "./useOutsideEvent.js";
+import { deepContains } from "../utils/deepContains.js";
+import { useReturnFocusOnClose } from "./useReturnFocusOnClose.js";
+import { useEffect } from "react";
+//#region src/hooks/useDismissablePopover.ts
+/**
+* Lukkeatferd for popovers: klikk utenfor, Escape og Tab ut av komponenten lukker.
+* Fokus fortsetter til neste element (WCAG 2.4.3), og flyttes bare tilbake til
+* trigger når det ellers ville gått tapt.
+* @returns Lukkefunksjon som også kan brukes av komponentens egne lukkeknapper/valg
+*/
+var useDismissablePopover = ({ popoverRef, triggerRef, isOpen, onClose, scrollPopoverIntoView = false }) => {
+	const refs = [...Array.isArray(popoverRef) ? popoverRef : [popoverRef], triggerRef];
+	const returnFocusOnClose = useReturnFocusOnClose(refs, triggerRef);
+	useEffect(() => {
+		if (!isOpen || !scrollPopoverIntoView) return;
+		const scroll = () => {
+			(Array.isArray(popoverRef) ? popoverRef : [popoverRef]).forEach((ref) => ref.current?.scrollIntoView?.({
+				block: "nearest",
+				inline: "nearest"
+			}));
+			triggerRef.current?.scrollIntoView?.({
+				block: "nearest",
+				inline: "nearest"
+			});
+		};
+		if (typeof window.requestAnimationFrame === "function") {
+			const frame = window.requestAnimationFrame(scroll);
+			return () => window.cancelAnimationFrame(frame);
+		}
+		const timeout = window.setTimeout(scroll);
+		return () => window.clearTimeout(timeout);
+	}, [isOpen, scrollPopoverIntoView]);
+	const close = () => {
+		if (!isOpen) return;
+		onClose();
+		returnFocusOnClose();
+	};
+	useOutsideEvent(refs, close, ["click"]);
+	useEffect(() => {
+		const allElements = [...new Set(refs.flatMap((r) => r.current ? [r.current] : []))];
+		const elements = allElements.filter((el) => !allElements.some((other) => other !== el && other.contains(el)));
+		const handleKeyDown = (event) => {
+			if (!isOpen) return;
+			if (event.key === KeyboardEventKey.Escape) {
+				event.preventDefault();
+				event.stopPropagation();
+				close();
+			} else if (event.key === KeyboardEventKey.Tab) setTimeout(() => {
+				const focusIsInside = elements.some((el) => deepContains(el, getDocumentActiveElement(el)));
+				if (!document.hasFocus() || !focusIsInside) close();
+			});
+		};
+		elements.forEach((el) => el.addEventListener("keydown", handleKeyDown));
+		return () => {
+			elements.forEach((el) => el.removeEventListener("keydown", handleKeyDown));
+		};
+	});
+	return close;
+};
+//#endregion
+export { useDismissablePopover };
+
+//# sourceMappingURL=useDismissablePopover.js.map

package/lib/hooks/useDismissablePopover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDismissablePopover.js","names":[],"sources":["../../src/hooks/useDismissablePopover.ts"],"sourcesContent":["import { useEffect } from 'react';\n\nimport { KeyboardEventKey } from '../constants';\nimport { useOutsideEvent } from './useOutsideEvent';\nimport { useReturnFocusOnClose } from './useReturnFocusOnClose';\nimport { deepContains } from '../utils/deepContains';\nimport { getDocumentActiveElement } from '../utils/focus';\n\ninterface UseDismissablePopover {\n  /** Elementet/elementene som utgjør popoveren */\n  popoverRef: React.RefObject<HTMLElement | null> | React.RefObject<HTMLElement | null>[];\n  /** Trigger-elementet som får fokus tilbake når fokus ellers ville gått tapt */\n  triggerRef: React.RefObject<HTMLElement | null>;\n  /** Om popoveren er åpen */\n  isOpen: boolean;\n  /** Lukker popoveren (oppdaterer komponentens state) */\n  onClose: () => void;\n  /** Scroller popoveren inn i viewport når den åpnes, uten at trigger mister synlighet */\n  scrollPopoverIntoView?: boolean;\n}\n\n/**\n * Lukkeatferd for popovers: klikk utenfor, Escape og Tab ut av komponenten lukker.\n * Fokus fortsetter til neste element (WCAG 2.4.3), og flyttes bare tilbake til\n * trigger når det ellers ville gått tapt.\n * @returns Lukkefunksjon som også kan brukes av komponentens egne lukkeknapper/valg\n */\nexport const useDismissablePopover = ({\n  popoverRef,\n  triggerRef,\n  isOpen,\n  onClose,\n  scrollPopoverIntoView = false,\n}: UseDismissablePopover): (() => void) => {\n  const refs = [...(Array.isArray(popoverRef) ? popoverRef : [popoverRef]), triggerRef];\n  const returnFocusOnClose = useReturnFocusOnClose(refs, triggerRef);\n\n  useEffect(() => {\n    if (!isOpen || !scrollPopoverIntoView) {\n      return;\n    }\n\n    const scroll = (): void => {\n      const popoverRefs = Array.isArray(popoverRef) ? popoverRef : [popoverRef];\n      popoverRefs.forEach(ref => ref.current?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' }));\n      // Trigger sist, slik at den ikke mister synlighet hvis popoveren dyttet den ut av viewport\n      triggerRef.current?.scrollIntoView?.({ block: 'nearest', inline: 'nearest' });\n    };\n\n    // Vent en frame slik at popoveren er posisjonert (f.eks. av floating-ui) før scrolling.\n    // requestAnimationFrame finnes ikke i ikke-visuelle DOM-miljøer (f.eks. jsdom uten pretendToBeVisual)\n    if (typeof window.requestAnimationFrame === 'function') {\n      const frame = window.requestAnimationFrame(scroll);\n      return (): void => window.cancelAnimationFrame(frame);\n    }\n    const timeout = window.setTimeout(scroll);\n    return (): void => window.clearTimeout(timeout);\n  }, [isOpen, scrollPopoverIntoView]);\n\n  const close = (): void => {\n    if (!isOpen) {\n      return;\n    }\n\n    onClose();\n    returnFocusOnClose();\n  };\n\n  useOutsideEvent(refs, close, ['click']);\n\n  useEffect(() => {\n    const allElements = [...new Set(refs.flatMap(r => (r.current ? [r.current] : [])))];\n    // Elementer som ligger inni et annet dekkes av forelderens listener via bobling\n    const elements = allElements.filter(el => !allElements.some(other => other !== el && other.contains(el)));\n\n    const handleKeyDown = (event: KeyboardEvent): void => {\n      if (!isOpen) {\n        return;\n      }\n\n      if (event.key === KeyboardEventKey.Escape) {\n        event.preventDefault();\n        // Ikke la Escape boble videre til omkringliggende lukkbare elementer (f.eks. Drawer)\n        event.stopPropagation();\n        close();\n      } else if (event.key === KeyboardEventKey.Tab) {\n        // Etter at nettleseren har flyttet fokus: lukk hvis fokus forlot komponenten\n        setTimeout(() => {\n          const focusIsInside = elements.some(el => deepContains(el, getDocumentActiveElement(el)));\n          if (!document.hasFocus() || !focusIsInside) {\n            close();\n          }\n        });\n      }\n    };\n\n    elements.forEach(el => el.addEventListener('keydown', handleKeyDown));\n\n    return (): void => {\n      elements.forEach(el => el.removeEventListener('keydown', handleKeyDown));\n    };\n  });\n\n  return close;\n};\n"],"mappings":";;;;;;;;;;;;;AA2BA,IAAa,yBAAyB,EACpC,YACA,YACA,QACA,SACA,wBAAwB,YACiB;CACzC,MAAM,OAAO,CAAC,GAAI,MAAM,QAAQ,UAAU,IAAI,aAAa,CAAC,UAAU,GAAI,UAAU;CACpF,MAAM,qBAAqB,sBAAsB,MAAM,UAAU;CAEjE,gBAAgB;EACd,IAAI,CAAC,UAAU,CAAC,uBACd;EAGF,MAAM,eAAqB;GAEzB,CADoB,MAAM,QAAQ,UAAU,IAAI,aAAa,CAAC,UAAU,EAAA,CAC5D,SAAQ,QAAO,IAAI,SAAS,iBAAiB;IAAE,OAAO;IAAW,QAAQ;GAAU,CAAC,CAAC;GAEjG,WAAW,SAAS,iBAAiB;IAAE,OAAO;IAAW,QAAQ;GAAU,CAAC;EAC9E;EAIA,IAAI,OAAO,OAAO,0BAA0B,YAAY;GACtD,MAAM,QAAQ,OAAO,sBAAsB,MAAM;GACjD,aAAmB,OAAO,qBAAqB,KAAK;EACtD;EACA,MAAM,UAAU,OAAO,WAAW,MAAM;EACxC,aAAmB,OAAO,aAAa,OAAO;CAChD,GAAG,CAAC,QAAQ,qBAAqB,CAAC;CAElC,MAAM,cAAoB;EACxB,IAAI,CAAC,QACH;EAGF,QAAQ;EACR,mBAAmB;CACrB;CAEA,gBAAgB,MAAM,OAAO,CAAC,OAAO,CAAC;CAEtC,gBAAgB;EACd,MAAM,cAAc,CAAC,GAAG,IAAI,IAAI,KAAK,SAAQ,MAAM,EAAE,UAAU,CAAC,EAAE,OAAO,IAAI,CAAC,CAAE,CAAC,CAAC;EAElF,MAAM,WAAW,YAAY,QAAO,OAAM,CAAC,YAAY,MAAK,UAAS,UAAU,MAAM,MAAM,SAAS,EAAE,CAAC,CAAC;EAExG,MAAM,iBAAiB,UAA+B;GACpD,IAAI,CAAC,QACH;GAGF,IAAI,MAAM,QAAQ,iBAAiB,QAAQ;IACzC,MAAM,eAAe;IAErB,MAAM,gBAAgB;IACtB,MAAM;GACR,OAAO,IAAI,MAAM,QAAQ,iBAAiB,KAExC,iBAAiB;IACf,MAAM,gBAAgB,SAAS,MAAK,OAAM,aAAa,IAAI,yBAAyB,EAAE,CAAC,CAAC;IACxF,IAAI,CAAC,SAAS,SAAS,KAAK,CAAC,eAC3B,MAAM;GAEV,CAAC;EAEL;EAEA,SAAS,SAAQ,OAAM,GAAG,iBAAiB,WAAW,aAAa,CAAC;EAEpE,aAAmB;GACjB,SAAS,SAAQ,OAAM,GAAG,oBAAoB,WAAW,aAAa,CAAC;EACzE;CACF,CAAC;CAED,OAAO;AACT"}

package/lib/hooks/useOutsideEvent.d.ts

@@ -3,6 +3,9 @@ type OutsideEvents = {
 }[keyof DocumentEventMap];
 /**
  * Custom hook for klikk eller fokus utenfor et gitt element (eller flere elementer)
+ *
+ * Fokus-eventer som er bieffekter av et pekertrykk (scrollbar, focus trap, `<dialog>`) ignoreres.
+ *
  * @param ref Sjekker om det klikkes utenfor dette elementet/elementene
  * @param callback Callback-funksjon ved klikk utenfor elementet/elementene
  * @param events Type eventer å lytte på. Default: mousedown

package/lib/hooks/useOutsideEvent.js

@@ -2,6 +2,9 @@ import { useEffect } from "react";
 //#region src/hooks/useOutsideEvent.ts
 /**
 * Custom hook for klikk eller fokus utenfor et gitt element (eller flere elementer)
+*
+* Fokus-eventer som er bieffekter av et pekertrykk (scrollbar, focus trap, `<dialog>`) ignoreres.
+*
 * @param ref Sjekker om det klikkes utenfor dette elementet/elementene
 * @param callback Callback-funksjon ved klikk utenfor elementet/elementene
 * @param events Type eventer å lytte på. Default: mousedown
@@ -12,10 +15,28 @@ var useOutsideEvent = (ref, callback, events = ["mousedown"]) => {
 		if (refArray.every((r) => r.current && !event.composedPath().includes(r.current))) callback(event);
 	};
 	useEffect(() => {
-		events.forEach((eventName) => document.addEventListener(eventName, handleOutsideEvent));
-		return () => {
-			events.forEach((eventName) => document.removeEventListener(eventName, handleOutsideEvent));
+		const controller = new AbortController();
+		const { signal } = controller;
+		let isPointerDown = false;
+		const releasePointer = () => {
+			setTimeout(() => isPointerDown = false);
 		};
+		document.addEventListener("pointerdown", () => isPointerDown = true, {
+			capture: true,
+			signal
+		});
+		document.addEventListener("pointerup", releasePointer, {
+			capture: true,
+			signal
+		});
+		document.addEventListener("pointercancel", releasePointer, {
+			capture: true,
+			signal
+		});
+		events.forEach((eventName) => document.addEventListener(eventName, (event) => {
+			if (!(event instanceof FocusEvent && isPointerDown)) handleOutsideEvent(event);
+		}, { signal }));
+		return () => controller.abort();
 	}, [
 		refArray,
 		callback,

package/lib/hooks/useOutsideEvent.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOutsideEvent.js","names":[],"sources":["../../src/hooks/useOutsideEvent.ts"],"sourcesContent":["import { useEffect } from 'react';\n\ntype OutsideEvents = {\n  [K in keyof DocumentEventMap]: DocumentEventMap[K] extends MouseEvent | FocusEvent ? K : never;\n}[keyof DocumentEventMap];\n\n/**\n * Custom hook for klikk eller fokus utenfor et gitt element (eller flere elementer)\n * @param ref Sjekker om det klikkes utenfor dette elementet/elementene\n * @param callback Callback-funksjon ved klikk utenfor elementet/elementene\n * @param events Type eventer å lytte på. Default: mousedown\n */\nexport const useOutsideEvent = (\n  ref: React.RefObject<HTMLElement | null> | React.RefObject<HTMLElement | null>[],\n  callback: (event: MouseEvent | FocusEvent) => void,\n  events: OutsideEvents[] = ['mousedown']\n): void => {\n  const refArray = Array.isArray(ref) ? ref : [ref];\n\n  const handleOutsideEvent = (event: MouseEvent | FocusEvent): void => {\n    if (refArray.every(r => r.current && !event.composedPath().includes(r.current))) {\n      callback(event);\n    }\n  };\n\n  useEffect(() => {\n    events.forEach(eventName => document.addEventListener(eventName, handleOutsideEvent));\n\n    return (): void => {\n      events.forEach(eventName => document.removeEventListener(eventName, handleOutsideEvent));\n    };\n  }, [refArray, callback, events]);\n};\n"],"mappings":";;;;;;;;AAYA,IAAa,mBACX,KACA,UACA,SAA0B,CAAC,WAAW,MAC7B;CACT,MAAM,WAAW,MAAM,QAAQ,GAAG,IAAI,MAAM,CAAC,GAAG;CAEhD,MAAM,sBAAsB,UAAyC;EACnE,IAAI,SAAS,OAAM,MAAK,EAAE,WAAW,CAAC,MAAM,aAAa,CAAC,CAAC,SAAS,EAAE,OAAO,CAAC,GAC5E,SAAS,KAAK;CAElB;CAEA,gBAAgB;EACd,OAAO,SAAQ,cAAa,SAAS,iBAAiB,WAAW,kBAAkB,CAAC;EAEpF,aAAmB;GACjB,OAAO,SAAQ,cAAa,SAAS,oBAAoB,WAAW,kBAAkB,CAAC;EACzF;CACF,GAAG;EAAC;EAAU;EAAU;CAAM,CAAC;AACjC"}
+{"version":3,"file":"useOutsideEvent.js","names":[],"sources":["../../src/hooks/useOutsideEvent.ts"],"sourcesContent":["import { useEffect } from 'react';\n\ntype OutsideEvents = {\n  [K in keyof DocumentEventMap]: DocumentEventMap[K] extends MouseEvent | FocusEvent ? K : never;\n}[keyof DocumentEventMap];\n\n/**\n * Custom hook for klikk eller fokus utenfor et gitt element (eller flere elementer)\n *\n * Fokus-eventer som er bieffekter av et pekertrykk (scrollbar, focus trap, `<dialog>`) ignoreres.\n *\n * @param ref Sjekker om det klikkes utenfor dette elementet/elementene\n * @param callback Callback-funksjon ved klikk utenfor elementet/elementene\n * @param events Type eventer å lytte på. Default: mousedown\n */\nexport const useOutsideEvent = (\n  ref: React.RefObject<HTMLElement | null> | React.RefObject<HTMLElement | null>[],\n  callback: (event: MouseEvent | FocusEvent) => void,\n  events: OutsideEvents[] = ['mousedown']\n): void => {\n  const refArray = Array.isArray(ref) ? ref : [ref];\n\n  const handleOutsideEvent = (event: MouseEvent | FocusEvent): void => {\n    if (refArray.every(r => r.current && !event.composedPath().includes(r.current))) {\n      callback(event);\n    }\n  };\n\n  useEffect(() => {\n    const controller = new AbortController();\n    const { signal } = controller;\n\n    // Holder styr på om pekeren er trykket ned, slik at fokus-eventer utløst av selve trykket kan ignoreres.\n    // setTimeout holder guarden aktiv for fokus-eventer nettleseren sender rett etter pointerup/pointercancel.\n    let isPointerDown = false;\n    const releasePointer = (): void => {\n      setTimeout(() => (isPointerDown = false));\n    };\n    document.addEventListener('pointerdown', () => (isPointerDown = true), { capture: true, signal });\n    document.addEventListener('pointerup', releasePointer, { capture: true, signal });\n    document.addEventListener('pointercancel', releasePointer, { capture: true, signal });\n\n    events.forEach(eventName =>\n      document.addEventListener(\n        eventName,\n        event => {\n          if (!(event instanceof FocusEvent && isPointerDown)) {\n            handleOutsideEvent(event);\n          }\n        },\n        { signal }\n      )\n    );\n\n    return (): void => controller.abort();\n  }, [refArray, callback, events]);\n};\n"],"mappings":";;;;;;;;;;;AAeA,IAAa,mBACX,KACA,UACA,SAA0B,CAAC,WAAW,MAC7B;CACT,MAAM,WAAW,MAAM,QAAQ,GAAG,IAAI,MAAM,CAAC,GAAG;CAEhD,MAAM,sBAAsB,UAAyC;EACnE,IAAI,SAAS,OAAM,MAAK,EAAE,WAAW,CAAC,MAAM,aAAa,CAAC,CAAC,SAAS,EAAE,OAAO,CAAC,GAC5E,SAAS,KAAK;CAElB;CAEA,gBAAgB;EACd,MAAM,aAAa,IAAI,gBAAgB;EACvC,MAAM,EAAE,WAAW;EAInB,IAAI,gBAAgB;EACpB,MAAM,uBAA6B;GACjC,iBAAkB,gBAAgB,KAAM;EAC1C;EACA,SAAS,iBAAiB,qBAAsB,gBAAgB,MAAO;GAAE,SAAS;GAAM;EAAO,CAAC;EAChG,SAAS,iBAAiB,aAAa,gBAAgB;GAAE,SAAS;GAAM;EAAO,CAAC;EAChF,SAAS,iBAAiB,iBAAiB,gBAAgB;GAAE,SAAS;GAAM;EAAO,CAAC;EAEpF,OAAO,SAAQ,cACb,SAAS,iBACP,YACA,UAAS;GACP,IAAI,EAAE,iBAAiB,cAAc,gBACnC,mBAAmB,KAAK;EAE5B,GACA,EAAE,OAAO,CACX,CACF;EAEA,aAAmB,WAAW,MAAM;CACtC,GAAG;EAAC;EAAU;EAAU;CAAM,CAAC;AACjC"}

package/lib/hooks/useReturnFocusOnClose.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Gir en funksjon som flytter fokus tilbake til trigger-elementet hvis fokus står inne i elementet som lukkes.
+ * @param ref Elementet/elementene som utgjør innholdet som lukkes
+ * @param triggerRef Trigger-elementet som skal få fokus tilbake
+ * @returns Funksjon som flytter fokus til triggeren ved behov
+ */
+export declare const useReturnFocusOnClose: (ref: React.RefObject<HTMLElement | null> | React.RefObject<HTMLElement | null>[], triggerRef: React.RefObject<HTMLElement | null>) => (() => void);

package/lib/hooks/useReturnFocusOnClose.js

@@ -0,0 +1,22 @@
+import { getDocumentActiveElement } from "../utils/focus.js";
+import { deepContains } from "../utils/deepContains.js";
+//#region src/hooks/useReturnFocusOnClose.ts
+/**
+* Gir en funksjon som flytter fokus tilbake til trigger-elementet hvis fokus står inne i elementet som lukkes.
+* @param ref Elementet/elementene som utgjør innholdet som lukkes
+* @param triggerRef Trigger-elementet som skal få fokus tilbake
+* @returns Funksjon som flytter fokus til triggeren ved behov
+*/
+var useReturnFocusOnClose = (ref, triggerRef) => {
+	const refArray = Array.isArray(ref) ? ref : [ref];
+	return () => {
+		if (refArray.some((r) => {
+			const activeElement = r.current ? getDocumentActiveElement(r.current) : null;
+			return !!r.current && deepContains(r.current, activeElement);
+		})) triggerRef.current?.focus();
+	};
+};
+//#endregion
+export { useReturnFocusOnClose };
+
+//# sourceMappingURL=useReturnFocusOnClose.js.map

package/lib/hooks/useReturnFocusOnClose.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReturnFocusOnClose.js","names":[],"sources":["../../src/hooks/useReturnFocusOnClose.ts"],"sourcesContent":["import { deepContains } from '../utils/deepContains';\nimport { getDocumentActiveElement } from '../utils/focus';\n\n/**\n * Gir en funksjon som flytter fokus tilbake til trigger-elementet hvis fokus står inne i elementet som lukkes.\n * @param ref Elementet/elementene som utgjør innholdet som lukkes\n * @param triggerRef Trigger-elementet som skal få fokus tilbake\n * @returns Funksjon som flytter fokus til triggeren ved behov\n */\nexport const useReturnFocusOnClose = (\n  ref: React.RefObject<HTMLElement | null> | React.RefObject<HTMLElement | null>[],\n  triggerRef: React.RefObject<HTMLElement | null>\n): (() => void) => {\n  const refArray = Array.isArray(ref) ? ref : [ref];\n\n  return (): void => {\n    const focusIsInside = refArray.some(r => {\n      const activeElement = r.current ? getDocumentActiveElement(r.current) : null;\n      return !!r.current && deepContains(r.current, activeElement);\n    });\n\n    if (focusIsInside) {\n      triggerRef.current?.focus();\n    }\n  };\n};\n"],"mappings":";;;;;;;;;AASA,IAAa,yBACX,KACA,eACiB;CACjB,MAAM,WAAW,MAAM,QAAQ,GAAG,IAAI,MAAM,CAAC,GAAG;CAEhD,aAAmB;EAMjB,IALsB,SAAS,MAAK,MAAK;GACvC,MAAM,gBAAgB,EAAE,UAAU,yBAAyB,EAAE,OAAO,IAAI;GACxE,OAAO,CAAC,CAAC,EAAE,WAAW,aAAa,EAAE,SAAS,aAAa;EAC7D,CAEI,GACF,WAAW,SAAS,MAAM;CAE9B;AACF"}

package/lib/index.d.ts

@@ -12,6 +12,8 @@ export { useResizeObserver } from './hooks/useResizeObserver';
 export { useToggle } from './hooks/useToggle';
 export { useKeyboardEvent } from './hooks/useKeyboardEvent';
 export { useOutsideEvent } from './hooks/useOutsideEvent';
+export { useDismissablePopover } from './hooks/useDismissablePopover';
+export { useReturnFocusOnClose } from './hooks/useReturnFocusOnClose';
 export { useLanguage } from './hooks/useLanguage';
 export { isMobileUA } from './utils/mobile';
 export { uuid } from './utils/uuid';

package/lib/index.js

@@ -15,6 +15,8 @@ import { useResizeObserver } from "./hooks/useResizeObserver.js";
 import { useToggle } from "./hooks/useToggle.js";
 import { useKeyboardEvent } from "./hooks/useKeyboardEvent.js";
 import { useOutsideEvent } from "./hooks/useOutsideEvent.js";
+import { useReturnFocusOnClose } from "./hooks/useReturnFocusOnClose.js";
+import { useDismissablePopover } from "./hooks/useDismissablePopover.js";
 import { isMobileUA } from "./utils/mobile.js";
 import { formatResource } from "./utils/resource.js";
-export { AVERAGE_CHARACTER_WIDTH_PX, AnalyticsId, Breakpoint, FormOnColor, FormSize, IconSize, KeyboardEventKey, LanguageLocales, ZIndex, formatResource, isMobileUA, theme, useBreakpoint, useFocusToggle, useFocusTrap, useIntersectionObserver, useIsVisible, useKeyboardEvent, useLanguage, useLayoutEvent, useOutsideEvent, usePrevious, usePseudoClasses, useResizeObserver, useSize, useToggle, uuid };
+export { AVERAGE_CHARACTER_WIDTH_PX, AnalyticsId, Breakpoint, FormOnColor, FormSize, IconSize, KeyboardEventKey, LanguageLocales, ZIndex, formatResource, isMobileUA, theme, useBreakpoint, useDismissablePopover, useFocusToggle, useFocusTrap, useIntersectionObserver, useIsVisible, useKeyboardEvent, useLanguage, useLayoutEvent, useOutsideEvent, usePrevious, usePseudoClasses, useResizeObserver, useReturnFocusOnClose, useSize, useToggle, uuid };

package/lib/scss/_visual-form.scss

@@ -51,9 +51,9 @@
     min-height: var(--core-space-l);
     padding: $pill-padding-mobile;
     border-radius: 100px;
-    background-color: var(--color-action-background-ondark);
-    border: 1px solid var(--color-action-border-onlight);
-    color: var(--color-base-text-onlight);
+    background-color: var(--color-action-background-light-normal);
+    border: 1px solid var(--color-action-border-dark-normal);
+    color: var(--color-base-text-dark);
 
     @include fonts.title6;
 
@@ -64,20 +64,20 @@
   }
 
   &:hover &__pill {
-    background-color: var(--color-action-background-ondark-hover);
-    border-color: var(--color-action-border-onlight-hover);
+    background-color: var(--color-action-background-light-hover);
+    border-color: var(--color-action-border-dark-plus1-hover);
   }
 
   &:active &__pill {
-    background-color: var(--color-action-background-ondark-selected);
-    border-color: var(--color-action-border-onlight-hover);
+    background-color: var(--color-action-background-light-selected);
+    border-color: var(--color-action-border-dark-plus1-hover);
   }
 
   &--checked &__pill,
   &:has(input:checked) &__pill {
-    background-color: var(--color-action-background-onlight);
-    color: var(--color-action-text-ondark);
-    border-color: var(--color-action-background-onlight);
+    background-color: var(--color-action-background-dark-normal);
+    color: var(--color-action-text-light-normal);
+    border-color: var(--color-action-background-dark-normal);
     padding: var(--core-space-3xs) var(--core-space-s);
 
     @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
@@ -87,52 +87,52 @@
 
   &--checked:hover &__pill,
   &:has(input:checked):hover &__pill {
-    background-color: var(--color-action-graphics-onlight-hover);
-    border-color: var(--color-action-graphics-onlight-hover);
+    background-color: var(--color-action-graphics-dark-hover);
+    border-color: var(--color-action-graphics-dark-hover);
   }
 
   &--checked:active &__pill,
   &:has(input:checked):active &__pill {
-    background-color: var(--color-action-background-onlight-active);
-    border-color: var(--color-action-background-onlight-active);
+    background-color: var(--color-action-background-dark-plus1-active);
+    border-color: var(--color-action-background-dark-plus1-active);
   }
 
   &--invalid &__pill {
-    background-color: var(--color-action-background-ondark);
-    border-color: var(--color-destructive-border-normal);
+    background-color: var(--color-action-background-light-normal);
+    border-color: var(--color-destructive-border-dark-normal);
   }
 
   &--invalid:hover &__pill {
-    background-color: var(--color-destructive-background-normal);
-    border-color: var(--color-destructive-border-normal);
+    background-color: var(--color-destructive-background-light-plus1-normal);
+    border-color: var(--color-destructive-border-dark-normal);
   }
 
   &--invalid:active &__pill {
-    background-color: var(--color-destructive-background-emphasized);
-    border-color: var(--color-destructive-border-normal);
+    background-color: var(--color-destructive-background-light-plus1-hover);
+    border-color: var(--color-destructive-border-dark-normal);
   }
 
   &--invalid#{&}--checked &__pill,
   &--invalid:has(input:checked) &__pill {
-    background-color: var(--color-destructive-graphics-normal);
-    border-color: var(--color-destructive-graphics-normal);
+    background-color: var(--color-destructive-graphics-dark-normal);
+    border-color: var(--color-destructive-graphics-dark-normal);
   }
 
   &--invalid#{&}--checked:hover &__pill,
   &--invalid:has(input:checked):hover &__pill {
-    background-color: var(--color-destructive-graphics-hover);
-    border-color: var(--color-destructive-graphics-hover);
+    background-color: var(--color-destructive-graphics-dark-hover);
+    border-color: var(--color-destructive-graphics-dark-hover);
   }
 
   &--invalid#{&}--checked:active &__pill,
   &--invalid:has(input:checked):active &__pill {
-    background-color: var(--color-destructive-graphics-emphasized-onlight);
-    border-color: var(--color-destructive-graphics-emphasized-onlight);
+    background-color: var(--color-destructive-graphics-dark-active);
+    border-color: var(--color-destructive-graphics-dark-active);
   }
 
   &__input:focus-visible + &__pill {
-    outline: 3px solid var(--color-action-border-onlight-focus);
-    border-color: var(--color-action-border-ondark);
+    outline: 3px solid var(--color-action-border-dark-focus);
+    border-color: var(--color-action-border-light-normal);
   }
 
   &__icon {
@@ -141,7 +141,7 @@
     justify-content: center;
 
     svg {
-      fill: var(--color-action-graphics-ondark);
+      fill: var(--color-action-graphics-light-normal);
     }
   }
 
@@ -206,9 +206,9 @@
     z-index: 1;
     display: inline-flex;
     border-radius: 4px;
-    background: var(--color-action-background-ondark);
-    border: 2px solid var(--color-action-border-onlight);
-    color: var(--color-base-text-onlight);
+    background: var(--color-action-background-light-normal);
+    border: 2px solid var(--color-action-border-dark-normal);
+    color: var(--color-base-text-dark);
   }
 
   &--variant-line &__frame {
@@ -243,8 +243,8 @@
     justify-content: center;
     overflow: hidden;
     border-radius: 100%;
-    background: var(--color-action-background-ondark);
-    border: 2px solid var(--color-action-border-ondark);
+    background: var(--color-action-background-light-normal);
+    border: 2px solid var(--color-action-border-light-normal);
 
     > * {
       width: 100%;
@@ -272,35 +272,35 @@
 
   &--checked &__frame,
   &:has(input:checked) &__frame {
-    background: var(--color-action-background-onlight);
-    color: var(--color-action-text-ondark);
-    border-color: var(--color-action-background-onlight);
+    background: var(--color-action-background-dark-normal);
+    color: var(--color-action-text-light-normal);
+    border-color: var(--color-action-background-dark-normal);
   }
 
   &--invalid &__frame {
-    background: var(--color-action-background-ondark);
+    background: var(--color-action-background-light-normal);
     border-color: var(--core-color-cherry-500);
   }
 
   &:hover &__frame {
     background: var(--core-color-neutral-50);
-    border-color: var(--color-action-border-onlight-hover);
+    border-color: var(--color-action-border-dark-plus1-hover);
   }
 
   &:active &__frame {
     background: var(--core-color-neutral-100);
-    border-color: var(--color-action-border-onlight-hover);
+    border-color: var(--color-action-border-dark-plus1-hover);
   }
 
   &--checked:hover &__frame,
   &:has(input:checked):hover &__frame {
-    background: var(--color-action-background-onlight-hover);
+    background: var(--color-action-background-dark-plus1-hover);
   }
 
   &--checked:active &__frame,
   &:has(input:checked):active &__frame {
-    background: var(--color-action-background-onlight-active);
-    border-color: var(--color-action-background-onlight-active);
+    background: var(--color-action-background-dark-plus1-active);
+    border-color: var(--color-action-background-dark-plus1-active);
   }
 
   &--invalid:hover &__frame {
@@ -316,7 +316,7 @@
   &--invalid#{&}--checked &__frame,
   &--invalid:has(input:checked) &__frame {
     background: var(--core-color-cherry-50);
-    color: var(--color-base-text-onlight);
+    color: var(--color-base-text-dark);
     border-color: var(--core-color-cherry-500);
   }
 
@@ -333,8 +333,8 @@
   }
 
   &__input:focus-visible + &__frame {
-    outline: 4px solid var(--color-action-border-onlight-focus);
-    border-color: var(--color-action-border-ondark);
+    outline: 4px solid var(--color-action-border-dark-focus);
+    border-color: var(--color-action-border-light-normal);
   }
 
   &__icon {
@@ -343,7 +343,7 @@
     justify-content: center;
 
     svg {
-      fill: var(--color-action-graphics-ondark);
+      fill: var(--color-action-graphics-light-normal);
     }
   }
 

package/lib/scss/helsenorge.scss

@@ -6,6 +6,7 @@
 @forward 'body';
 @forward 'print';
 @forward 'radio-reset';
+@use './supernova-legacy/styles/legacy-colors.css';
 @import './bootstrap/scss/bootstrap-grid';
 @import './supernova/styles/colors.css';
 @import './supernova/styles/spacers.css';