@helsenorge/designsystem-react 15.7.2 → 16.1.0

package/lib/hooks/useSynchronousResizeObserver.d.ts

@@ -0,0 +1,11 @@
+import { RefObject } from 'react';
+/**
+ * Kjører measure før første paint og hver gang elementet eller dets overordnede element endrer størrelse.
+ * State-oppdateringer i measure rendres synkront, slik at elementet ikke vises en frame med utdatert layout
+ * (for eksempel når en overordnet komponent åpnes).
+ *
+ * @param ref Elementet som observeres, sammen med dets overordnede element
+ * @param measure Leser størrelser og setter state
+ * @param deps Når disse endres settes observeren opp på nytt
+ */
+export declare const useSynchronousResizeObserver: <T extends HTMLElement>(ref: RefObject<T | null>, measure: (element: T, parentElement: HTMLElement) => void, deps?: ReadonlyArray<unknown>) => void;

package/lib/hooks/useSynchronousResizeObserver.js

@@ -0,0 +1,29 @@
+import { useLayoutEffect } from "react";
+import { flushSync } from "react-dom";
+//#region src/hooks/useSynchronousResizeObserver.ts
+/**
+* Kjører measure før første paint og hver gang elementet eller dets overordnede element endrer størrelse.
+* State-oppdateringer i measure rendres synkront, slik at elementet ikke vises en frame med utdatert layout
+* (for eksempel når en overordnet komponent åpnes).
+*
+* @param ref Elementet som observeres, sammen med dets overordnede element
+* @param measure Leser størrelser og setter state
+* @param deps Når disse endres settes observeren opp på nytt
+*/
+var useSynchronousResizeObserver = (ref, measure, deps = []) => {
+	useLayoutEffect(() => {
+		const element = ref.current;
+		const parentElement = element?.parentElement;
+		if (!element || !parentElement) return;
+		const run = () => flushSync(() => measure(element, parentElement));
+		run();
+		const observer = new ResizeObserver(run);
+		observer.observe(element, { box: "border-box" });
+		observer.observe(parentElement, { box: "border-box" });
+		return () => observer.disconnect();
+	}, deps);
+};
+//#endregion
+export { useSynchronousResizeObserver };
+
+//# sourceMappingURL=useSynchronousResizeObserver.js.map

package/lib/hooks/useSynchronousResizeObserver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSynchronousResizeObserver.js","names":[],"sources":["../../src/hooks/useSynchronousResizeObserver.ts"],"sourcesContent":["import { useLayoutEffect, type RefObject } from 'react';\n\nimport { flushSync } from 'react-dom';\n\n/**\n * Kjører measure før første paint og hver gang elementet eller dets overordnede element endrer størrelse.\n * State-oppdateringer i measure rendres synkront, slik at elementet ikke vises en frame med utdatert layout\n * (for eksempel når en overordnet komponent åpnes).\n *\n * @param ref Elementet som observeres, sammen med dets overordnede element\n * @param measure Leser størrelser og setter state\n * @param deps Når disse endres settes observeren opp på nytt\n */\nexport const useSynchronousResizeObserver = <T extends HTMLElement>(\n  ref: RefObject<T | null>,\n  measure: (element: T, parentElement: HTMLElement) => void,\n  deps: ReadonlyArray<unknown> = []\n): void => {\n  useLayoutEffect(() => {\n    const element = ref.current;\n    const parentElement = element?.parentElement;\n    if (!element || !parentElement) {\n      return;\n    }\n\n    const run = (): void => flushSync(() => measure(element, parentElement));\n\n    run();\n    const observer = new ResizeObserver(run);\n    observer.observe(element, { box: 'border-box' });\n    observer.observe(parentElement, { box: 'border-box' });\n    return (): void => observer.disconnect();\n  }, deps);\n};\n"],"mappings":";;;;;;;;;;;;AAaA,IAAa,gCACX,KACA,SACA,OAA+B,CAAC,MACvB;CACT,sBAAsB;EACpB,MAAM,UAAU,IAAI;EACpB,MAAM,gBAAgB,SAAS;EAC/B,IAAI,CAAC,WAAW,CAAC,eACf;EAGF,MAAM,YAAkB,gBAAgB,QAAQ,SAAS,aAAa,CAAC;EAEvE,IAAI;EACJ,MAAM,WAAW,IAAI,eAAe,GAAG;EACvC,SAAS,QAAQ,SAAS,EAAE,KAAK,aAAa,CAAC;EAC/C,SAAS,QAAQ,eAAe,EAAE,KAAK,aAAa,CAAC;EACrD,aAAmB,SAAS,WAAW;CACzC,GAAG,IAAI;AACT"}

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/resources/HN.Designsystem.Table.nb-NO.json.d.ts

@@ -0,0 +1,9 @@
+declare const _default: {
+  "showMoreButton": "Vis mer",
+  "menuHeadCell": "Valg",
+  "expandRowButton": "Vis detaljer",
+  "collapseRowButton": "Skjul detaljer"
+}
+;
+
+export default _default;

package/lib/resources/Resources.d.ts

@@ -200,4 +200,23 @@ export type HNDesignsystemChip = {
   removeAriaLabel: string;
 };
 
+export type HNDesignsystemTable = {
+  /**
+   * Vis mer
+   */
+  showMoreButton: string;
+  /**
+   * Valg
+   */
+  menuHeadCell: string;
+  /**
+   * Vis detaljer
+   */
+  expandRowButton: string;
+  /**
+   * Skjul detaljer
+   */
+  collapseRowButton: string;
+};
+
 /* eslint:enable */

package/lib/rolldown-runtime.js

@@ -0,0 +1,33 @@
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __commonJSMin = (cb, mod) => () => (mod || (cb((mod = { exports: {} }).exports, mod), cb = null), mod.exports);
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
+	return target;
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule || !__hasOwnProp.call(mod, "default") ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+export { __exportAll as n, __toESM as r, __commonJSMin as t };

package/lib/scss/_font-mixins.scss

@@ -170,8 +170,35 @@
 }
 
 @mixin table-cell {
+  font-size: 1rem;
+  line-height: 1.28rem;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.125rem;
+    line-height: 1.463rem;
+  }
+}
+
+@mixin table-header {
   font-size: 1.125rem;
-  line-height: 1.4375rem;
+  line-height: 1.375rem;
+  font-weight: 600;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.25rem;
+    line-height: 1.625rem;
+  }
+}
+
+@mixin table-header-stack {
+  font-size: 1rem;
+  line-height: 1.28rem;
+  font-weight: 600;
+
+  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
+    font-size: 1.125rem;
+    line-height: 1.463rem;
+  }
 }
 
 @mixin image-caption {

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';