@helsenorge/designsystem-react 16.0.0 → 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/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/typography.module.scss

@@ -81,6 +81,14 @@ import designsystemtypography from './scss/typography.scss'
   @include fonts.table-cell;
 }
 
+.table-header {
+  @include fonts.table-header;
+}
+
+.table-header-stack {
+  @include fonts.table-header-stack;
+}
+
 .strong {
   font-size: font-settings.$font-size-sm;
   line-height: font-settings.$lineheight-size-sm;

package/lib/scss/typography.module.scss.d.ts

@@ -21,6 +21,8 @@ export type Styles = {
   sublabel: string;
   'sublabel-subdued': string;
   'table-cell': string;
+  'table-header': string;
+  'table-header-stack': string;
   'text-list': string;
   'title-feature': string;
   title1: string;

package/lib/scss/typography.stories.tsx

@@ -83,6 +83,14 @@ export const TableCell: Story = {
   render: args => <div className={designsystemtypography['table-cell']}>{args.tekst}</div>,
 };
 
+export const TableHeader: Story = {
+  render: args => <div className={designsystemtypography['table-header']}>{args.tekst}</div>,
+};
+
+export const TableHeaderStack: Story = {
+  render: args => <div className={designsystemtypography['table-header-stack']}>{args.tekst}</div>,
+};
+
 export const Strong: Story = {
   render: args => <div className={designsystemtypography.strong}>{args.tekst}</div>,
 };

package/lib/utils/uuid.js

@@ -1,16 +1,5 @@
+import { n as __exportAll } from "../rolldown-runtime.js";
 import { isTest } from "./environment.js";
-//#region \0rolldown/runtime.js
-var __defProp = Object.defineProperty;
-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;
-};
-//#endregion
 //#region src/utils/uuid.ts
 var uuid_exports = /* @__PURE__ */ __exportAll({
 	default: () => uuid,

package/lib/utils/uuid.js.map

@@ -1 +1 @@
-{"version":3,"file":"uuid.js","names":[],"sources":["../../src/utils/uuid.ts"],"sourcesContent":["import { isTest } from './environment';\n\nexport const uuid = (): string => {\n  if (isTest()) {\n    return 'test';\n  }\n  return 'bxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'.replace(/[x]/g, function (c) {\n    const r = (Math.random() * 16) | 0,\n      v = c == 'x' ? r : (r & 0x3) | 0x8;\n    return v.toString(16);\n  });\n};\n\nexport default uuid;\n"],"mappings":";;;;;;;;;;;;;;;;;;AAEA,IAAa,aAAqB;CAChC,IAAI,OAAO,GACT,OAAO;CAET,OAAO,uCAAuC,QAAQ,QAAQ,SAAU,GAAG;EACzE,MAAM,IAAK,KAAK,OAAO,IAAI,KAAM;EAEjC,QADM,KAAK,MAAM,IAAK,IAAI,IAAO,EAAA,CACxB,SAAS,EAAE;CACtB,CAAC;AACH"}
+{"version":3,"file":"uuid.js","names":[],"sources":["../../src/utils/uuid.ts"],"sourcesContent":["import { isTest } from './environment';\n\nexport const uuid = (): string => {\n  if (isTest()) {\n    return 'test';\n  }\n  return 'bxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'.replace(/[x]/g, function (c) {\n    const r = (Math.random() * 16) | 0,\n      v = c == 'x' ? r : (r & 0x3) | 0x8;\n    return v.toString(16);\n  });\n};\n\nexport default uuid;\n"],"mappings":";;;;;;;AAEA,IAAa,aAAqB;CAChC,IAAI,OAAO,GACT,OAAO;CAET,OAAO,uCAAuC,QAAQ,QAAQ,SAAU,GAAG;EACzE,MAAM,IAAK,KAAK,OAAO,IAAI,KAAM;EAEjC,QADM,KAAK,MAAM,IAAK,IAAI,IAAO,EAAA,CACxB,SAAS,EAAE;CACtB,CAAC;AACH"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@helsenorge/designsystem-react",
   "sideEffects": false,
   "private": false,
-  "version": "16.0.0",
+  "version": "16.1.0",
   "description": "The official design system for Helsenorge built with React.",
   "repository": {
     "type": "git",
@@ -843,7 +843,58 @@
     "./scss/reset": "./scss/_reset.scss",
     "./scss/screen-reader": "./scss/_screen-reader.scss",
     "./scss/spacers": "./scss/_spacers.scss",
-    "./scss/visual-form": "./scss/_visual-form.scss"
+    "./scss/visual-form": "./scss/_visual-form.scss",
+    "./components/Drawer/DrawerBackButton": {
+      "types": "./lib/components/Drawer/DrawerBackButton.d.ts",
+      "import": "./lib/components/Drawer/index.js",
+      "require": "./lib/components/Drawer/index.js",
+      "default": "./lib/components/Drawer/index.js"
+    },
+    "./components/Drawer/DrawerHeaderContent": {
+      "types": "./lib/components/Drawer/DrawerHeaderContent.d.ts",
+      "import": "./lib/components/Drawer/index.js",
+      "require": "./lib/components/Drawer/index.js",
+      "default": "./lib/components/Drawer/index.js"
+    },
+    "./components/UNSAFE_Table/TableCaption": {
+      "types": "./lib/components/UNSAFE_Table/TableCaption.d.ts",
+      "import": "./lib/components/UNSAFE_Table/index.js",
+      "require": "./lib/components/UNSAFE_Table/index.js",
+      "default": "./lib/components/UNSAFE_Table/index.js"
+    },
+    "./components/UNSAFE_Table/TableContext": {
+      "types": "./lib/components/UNSAFE_Table/TableContext.d.ts",
+      "import": "./lib/components/UNSAFE_Table/index.js",
+      "require": "./lib/components/UNSAFE_Table/index.js",
+      "default": "./lib/components/UNSAFE_Table/index.js"
+    },
+    "./components/UNSAFE_Table/UNSAFE_Table": {
+      "types": "./lib/components/UNSAFE_Table/UNSAFE_Table.d.ts"
+    },
+    "./components/UNSAFE_Table/constants": {
+      "types": "./lib/components/UNSAFE_Table/constants.d.ts"
+    },
+    "./components/UNSAFE_Table/useTableExpandedRows": {
+      "types": "./lib/components/UNSAFE_Table/useTableExpandedRows.d.ts"
+    },
+    "./components/UNSAFE_Table/useTableShowMore": {
+      "types": "./lib/components/UNSAFE_Table/useTableShowMore.d.ts"
+    },
+    "./components/UNSAFE_Table/utils": {
+      "types": "./lib/components/UNSAFE_Table/utils.d.ts"
+    },
+    "./components/VisualContentgroupWithImage/VisualContentgroupWithImage": {
+      "types": "./lib/components/VisualContentgroupWithImage/VisualContentgroupWithImage.d.ts",
+      "import": "./lib/components/VisualContentgroupWithImage/index.js",
+      "require": "./lib/components/VisualContentgroupWithImage/index.js",
+      "default": "./lib/components/VisualContentgroupWithImage/index.js"
+    },
+    "./components/UNSAFE_Table/StackLabelledContent": {
+      "types": "./lib/components/UNSAFE_Table/StackLabelledContent.d.ts",
+      "import": "./lib/components/UNSAFE_Table/index.js",
+      "require": "./lib/components/UNSAFE_Table/index.js",
+      "default": "./lib/components/UNSAFE_Table/index.js"
+    }
   },
   "scripts": {
     "start": "storybook dev -p 3000",
@@ -861,6 +912,7 @@
     "generate:illustrationnames": "node __scripts__/generateIllustrationNames.mjs",
     "generate:cssdefinitions": "typed-scss-modules \"src/**/*.module.scss\" --nameFormat none --exportType default --includePaths node_modules ../../node_modules",
     "generate:scssexports": "node __scripts__/gen-scss-exports.mjs",
+    "generate:deepexports": "node __scripts__/gen-deep-exports.mjs",
     "eslint": "eslint \"src/**/*.{ts,tsx}\"",
     "eslint:fix": "npm run eslint -- --fix",
     "stylelint": "stylelint \"src/**/*.{css,scss}\"",

package/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/scss/typography.module.scss

@@ -81,6 +81,14 @@ import designsystemtypography from './scss/typography.scss'
   @include fonts.table-cell;
 }
 
+.table-header {
+  @include fonts.table-header;
+}
+
+.table-header-stack {
+  @include fonts.table-header-stack;
+}
+
 .strong {
   font-size: font-settings.$font-size-sm;
   line-height: font-settings.$lineheight-size-sm;

package/scss/typography.module.scss.d.ts

@@ -21,6 +21,8 @@ export type Styles = {
   sublabel: string;
   'sublabel-subdued': string;
   'table-cell': string;
+  'table-header': string;
+  'table-header-stack': string;
   'text-list': string;
   'title-feature': string;
   title1: string;

package/scss/typography.stories.tsx

@@ -83,6 +83,14 @@ export const TableCell: Story = {
   render: args => <div className={designsystemtypography['table-cell']}>{args.tekst}</div>,
 };
 
+export const TableHeader: Story = {
+  render: args => <div className={designsystemtypography['table-header']}>{args.tekst}</div>,
+};
+
+export const TableHeaderStack: Story = {
+  render: args => <div className={designsystemtypography['table-header-stack']}>{args.tekst}</div>,
+};
+
 export const Strong: Story = {
   render: args => <div className={designsystemtypography.strong}>{args.tekst}</div>,
 };