@altinn/altinn-components 0.67.3 → 0.67.4

package/dist/assets/ModalBase.css

@@ -1 +1 @@
-._modal_3d5cx_1{padding:0;width:100%;max-width:450px;border:none;background-color:#fff;border-radius:.5rem;box-shadow:var(--ds-shadow-xs)}._modal_3d5cx_1[data-backdrop-color=inherit]::backdrop{background-color:#111d4640}._modal_3d5cx_1[data-backdrop-color=transparent]::backdrop{background-color:transparent}._modal_3d5cx_1[data-variant=default]{max-width:640px;margin:auto}._modal_3d5cx_1[data-variant=content]{max-width:988px;margin:auto}._modal_3d5cx_1[data-height=full]{min-height:unset;height:100%}._modal_3d5cx_1[data-variant=full]{width:100%;max-width:none;height:100%;min-height:unset}._content_3d5cx_41{position:relative}
+._modal_vs7j3_1{padding:0;width:100%;max-width:450px;border:none;background-color:#fff;border-radius:.5rem;box-shadow:var(--ds-shadow-xs)}._modal_vs7j3_1[data-backdrop-color=inherit]::backdrop{background-color:#111d4640}._modal_vs7j3_1[data-backdrop-color=transparent]::backdrop{background-color:transparent}._modal_vs7j3_1[data-variant=default]{max-width:640px;margin:auto}._modal_vs7j3_1[data-variant=content]{max-width:988px;margin:auto}._modal_vs7j3_1[data-height=full]{min-height:unset;height:100%}._modal_vs7j3_1[data-variant=full]{width:100%;max-width:none;height:100%;min-height:unset}._content_vs7j3_41{position:relative}._srOnly_vs7j3_45{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

package/dist/components/GlobalHeader/GlobalHeader.js

@@ -1,8 +1,8 @@
 "use client";
-import { jsx as n, jsxs as i, Fragment as O } from "react/jsx-runtime";
-import { useState as v } from "react";
-import { useIsDesktop as F } from "../../hooks/useIsDesktop.js";
-import { AccountSelector as b } from "../AccountSelector/AccountSelector.js";
+import { jsx as n, jsxs as p, Fragment as A } from "react/jsx-runtime";
+import { useState as O } from "react";
+import { useIsDesktop as v } from "../../hooks/useIsDesktop.js";
+import { AccountSelector as F } from "../AccountSelector/AccountSelector.js";
 import { GlobalMenu as C } from "../GlobalMenu/GlobalMenu.js";
 import "../../index-p1eeF8LQ.js";
 import "../../tooltip-Ct39-719.js";
@@ -16,12 +16,12 @@ import "../Snackbar/useSnackbar.js";
 import { HeaderDrawer as N } from "./HeaderDrawer.js";
 import { HeaderDropdown as E } from "./HeaderDropdown.js";
 import { HeaderLogo as I } from "./HeaderLogo.js";
-import '../../assets/GlobalHeader.css';const T = "_header_17ppp_1", k = "_container_17ppp_7", B = "_nav_17ppp_53", G = "_logo_17ppp_62", t = {
+import '../../assets/GlobalHeader.css';const T = "_header_17ppp_1", k = "_container_17ppp_7", y = "_nav_17ppp_53", B = "_logo_17ppp_62", a = {
   header: T,
   container: k,
-  nav: B,
-  logo: G
-}, H = 5, $ = ({
+  nav: y,
+  logo: B
+}, G = 5, $ = ({
   globalMenu: r,
   desktopMenu: s,
   mobileMenu: d,
@@ -31,20 +31,20 @@ import '../../assets/GlobalHeader.css';const T = "_header_17ppp_1", k = "_contai
   badge: f,
   onLoginClick: g
 }) => {
-  const { currentId: o, toggleId: l, closeAll: a } = w(), h = () => {
+  const { currentId: o, toggleId: l, closeAll: t } = w(), h = () => {
     o !== "account" && window.scrollTo({ top: 0, behavior: "instant" }), l("account");
   }, _ = () => {
     l("menu");
-  }, p = o === "account" || e?.forceOpenFullScreen || !1, [c, x] = v(!1), A = F();
-  return /* @__PURE__ */ n("header", { className: t.header, "data-current-id": o, children: /* @__PURE__ */ n("div", { className: t.container, children: /* @__PURE__ */ i("nav", { className: t.nav, "aria-label": "hovednavigasjon", children: [
-    /* @__PURE__ */ n(I, { ...u, badge: f, className: t.logo }),
-    e && /* @__PURE__ */ i(O, { children: [
+  }, c = o === "account" || e?.forceOpenFullScreen || !1, [i, b] = O(!1), x = v();
+  return /* @__PURE__ */ n("header", { className: a.header, "data-current-id": o, children: /* @__PURE__ */ n("div", { className: a.container, children: /* @__PURE__ */ p("nav", { className: a.nav, "aria-label": "hovednavigasjon", children: [
+    /* @__PURE__ */ n(I, { ...u, badge: f, className: a.logo }),
+    e && /* @__PURE__ */ p(A, { children: [
       /* @__PURE__ */ n(
         M,
         {
           currentAccount: e.accountMenu?.currentAccount,
           onClick: e.accountMenu?.currentAccount ? h : g,
-          expanded: p,
+          expanded: c,
           loading: e.loading,
           disabled: e.forceOpenFullScreen
         }
@@ -53,13 +53,14 @@ import '../../assets/GlobalHeader.css';const T = "_header_17ppp_1", k = "_contai
         N,
         {
           id: "header-account",
-          open: p,
-          onClose: a,
+          open: c,
+          onClose: t,
           closedBy: e?.forceOpenFullScreen ? "none" : "any",
-          expanded: e?.forceOpenFullScreen || c,
-          onToggle: () => x(!c),
-          expandable: (e.accountCount ?? e.accountMenu.items.length) > H,
-          children: /* @__PURE__ */ n(b, { ...e, forceOpenFullScreen: e.forceOpenFullScreen })
+          ariaLabelledby: "account-selector-heading",
+          expanded: e?.forceOpenFullScreen || i,
+          onToggle: () => b(!i),
+          expandable: (e.accountCount ?? e.accountMenu.items.length) > G,
+          children: /* @__PURE__ */ n(F, { ...e, forceOpenFullScreen: e.forceOpenFullScreen })
         }
       )
     ] }),
@@ -68,7 +69,7 @@ import '../../assets/GlobalHeader.css';const T = "_header_17ppp_1", k = "_contai
       {
         id: "header-menu",
         open: o === "menu",
-        onClose: a,
+        onClose: t,
         trigger: /* @__PURE__ */ n(
           D,
           {
@@ -82,8 +83,8 @@ import '../../assets/GlobalHeader.css';const T = "_header_17ppp_1", k = "_contai
           C,
           {
             ...r,
-            menu: A ? s || r?.menu : d || r?.menu,
-            onClose: a,
+            menu: x ? s || r?.menu : d || r?.menu,
+            onClose: t,
             localeSwitcher: m,
             isOpen: o === "menu"
           }

package/dist/components/GlobalHeader/HeaderDrawer.js

@@ -1,22 +1,22 @@
 import { jsxs as a, Fragment as l, jsx as t } from "react/jsx-runtime";
-import { useRef as E, useEffect as h } from "react";
-import { Button as D } from "../Button/Button.js";
+import { useRef as D, useEffect as h } from "react";
+import { Button as j } from "../Button/Button.js";
 import "../../index-p1eeF8LQ.js";
 import "../../tooltip-Ct39-719.js";
-import { w as j } from "../../ToolbarSearch-bv2opbAj.js";
+import { w as I } from "../../ToolbarSearch-bv2opbAj.js";
 import "../Typography/Link.js";
 import "react-dom";
 import "../GlobalMenu/GlobalMenuBase.js";
 import "../Snackbar/useSnackbar.js";
-import { S as I } from "../../ChevronUp-hn05LboH.js";
-import { S as L } from "../../ChevronDown-D_a7nb-G.js";
-import '../../assets/HeaderDrawer.css';const M = "_backdrop_yn0zc_11", R = "_drawer_yn0zc_28", B = "_footer_yn0zc_60", F = "_body_yn0zc_64", V = "_toggleButton_yn0zc_104", n = {
-  backdrop: M,
-  drawer: R,
-  footer: B,
-  body: F,
-  toggleButton: V
-}, Z = ({
+import { S as L } from "../../ChevronUp-hn05LboH.js";
+import { S as M } from "../../ChevronDown-D_a7nb-G.js";
+import '../../assets/HeaderDrawer.css';const R = "_backdrop_yn0zc_11", B = "_drawer_yn0zc_28", F = "_footer_yn0zc_60", V = "_body_yn0zc_64", q = "_toggleButton_yn0zc_104", n = {
+  backdrop: R,
+  drawer: B,
+  footer: F,
+  body: V,
+  toggleButton: q
+}, $ = ({
   id: c,
   open: r,
   onClose: v,
@@ -24,16 +24,17 @@ import '../../assets/HeaderDrawer.css';const M = "_backdrop_yn0zc_11", R = "_dra
   expanded: d,
   expandable: _ = !0,
   onToggle: b,
-  children: w
+  children: w,
+  ariaLabelledby: k
 }) => {
-  const { languageCode: k } = j(), m = q(k), s = E(null);
+  const { languageCode: y } = I(), m = A(y), s = D(null);
   h(() => {
     const e = s.current, u = (i) => {
       if (window.getSelection()?.toString()) return;
-      const { clientY: g, clientX: p, target: z } = i;
-      if (e && z === e && o === "any") {
-        const { top: C, left: x, right: S, bottom: N } = e.getBoundingClientRect();
-        C <= g && g <= N && x <= p && p <= S || e.close();
+      const { clientY: g, clientX: p, target: C } = i;
+      if (e && C === e && o === "any") {
+        const { top: x, left: S, right: N, bottom: E } = e.getBoundingClientRect();
+        x <= g && g <= E && S <= p && p <= N || e.close();
       }
     }, f = () => {
       const i = e?.querySelector("[autofocus]");
@@ -46,7 +47,7 @@ import '../../assets/HeaderDrawer.css';const M = "_backdrop_yn0zc_11", R = "_dra
     const e = s.current;
     e && (r ? e.open || e.showModal() : e.open && e.close());
   }, [r]);
-  const y = (e) => {
+  const z = (e) => {
     o === "none" && e.preventDefault();
   };
   return /* @__PURE__ */ a(l, { children: [
@@ -57,26 +58,26 @@ import '../../assets/HeaderDrawer.css';const M = "_backdrop_yn0zc_11", R = "_dra
         id: c,
         ref: s,
         "aria-modal": "true",
-        "aria-labelledby": "modal-title",
+        "aria-labelledby": k,
         "data-open": r,
         "data-expanded": d,
-        onCancel: y,
+        onCancel: z,
         className: n.drawer,
         onClose: o !== "none" ? v : void 0,
         children: [
           /* @__PURE__ */ t("div", { className: n.body, children: w }),
-          o !== "none" && _ && /* @__PURE__ */ t("footer", { className: n.footer, children: /* @__PURE__ */ t(D, { className: n.toggleButton, size: "xs", variant: "outline", onClick: b, children: d ? /* @__PURE__ */ a(l, { children: [
-            /* @__PURE__ */ t(I, { className: n.btnIcon, "aria-hidden": "true" }),
+          o !== "none" && _ && /* @__PURE__ */ t("footer", { className: n.footer, children: /* @__PURE__ */ t(j, { className: n.toggleButton, size: "xs", variant: "outline", onClick: b, children: d ? /* @__PURE__ */ a(l, { children: [
+            /* @__PURE__ */ t(L, { className: n.btnIcon, "aria-hidden": "true" }),
             m.minimize
           ] }) : /* @__PURE__ */ a(l, { children: [
-            /* @__PURE__ */ t(L, { className: n.btnIcon, "aria-hidden": "true" }),
+            /* @__PURE__ */ t(M, { className: n.btnIcon, "aria-hidden": "true" }),
             m.fullscreen
           ] }) }) })
         ]
       }
     )
   ] });
-}, q = (c) => {
+}, A = (c) => {
   switch (c) {
     case "nn":
       return {
@@ -96,5 +97,5 @@ import '../../assets/HeaderDrawer.css';const M = "_backdrop_yn0zc_11", R = "_dra
   }
 };
 export {
-  Z as HeaderDrawer
+  $ as HeaderDrawer
 };

package/dist/components/GlobalMenu/GlobalMenuBase.js

@@ -1,12 +1,12 @@
 import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as s } from "react";
-import '../../assets/GlobalMenuBase.css';const l = "_nav_b7k4e_1", f = "_footer_b7k4e_6", a = {
+import '../../assets/GlobalMenuBase.css';const l = "_nav_b7k4e_1", c = "_footer_b7k4e_6", r = {
   nav: l,
-  footer: f
-}, c = s(({ color: o, children: r, ...t }, n) => /* @__PURE__ */ e("nav", { ref: n, className: a.nav, "data-color": o, ...t, children: r }));
-c.displayName = "GlobalMenuBase";
-const b = ({ children: o }) => /* @__PURE__ */ e("footer", { className: a.footer, children: o });
+  footer: c
+}, f = s(({ color: o, children: a, ...t }, n) => /* @__PURE__ */ e("nav", { ref: n, className: r.nav, "data-color": o, ...t, children: /* @__PURE__ */ e("div", { role: "menu", children: a }) }));
+f.displayName = "GlobalMenuBase";
+const v = ({ children: o }) => /* @__PURE__ */ e("footer", { className: r.footer, children: o });
 export {
-  c as GlobalMenuBase,
-  b as GlobalMenuFooter
+  f as GlobalMenuBase,
+  v as GlobalMenuFooter
 };

package/dist/components/Modal/ModalBase.js

@@ -1,6 +1,6 @@
 "use client";
-import { jsx as s } from "react/jsx-runtime";
-import { useRef as w, useEffect as d } from "react";
+import { jsxs as O, jsx as u } from "react/jsx-runtime";
+import { useRef as S, useId as w, useEffect as f } from "react";
 import "../../index-p1eeF8LQ.js";
 import "../../tooltip-Ct39-719.js";
 import "../../ToolbarSearch-bv2opbAj.js";
@@ -9,71 +9,76 @@ import "../Button/Button.js";
 import "react-dom";
 import "../GlobalMenu/GlobalMenuBase.js";
 import "../Snackbar/useSnackbar.js";
-import { Section as y } from "../Page/Section.js";
-import '../../assets/ModalBase.css';const D = "_modal_3d5cx_1", R = "_content_3d5cx_41", m = {
-  modal: D,
-  content: R
-}, J = ({
-  open: a,
-  onClose: u,
-  closedBy: e = "any",
-  children: f,
-  backdropColor: p = "inherit",
-  size: g,
-  color: h,
-  padding: v = 0,
+import { Section as D } from "../Page/Section.js";
+import '../../assets/ModalBase.css';const N = "_modal_vs7j3_1", R = "_content_vs7j3_41", M = "_srOnly_vs7j3_45", i = {
+  modal: N,
+  content: R,
+  srOnly: M
+}, T = ({
+  open: r,
+  onClose: p,
+  closedBy: n = "any",
+  children: v,
+  backdropColor: g = "inherit",
+  size: h,
+  color: _,
+  padding: y = 0,
   spacing: C = 0,
   height: E = "auto",
-  variant: _ = "default"
+  variant: b = "default",
+  title: o
 }) => {
-  const n = w(null);
-  return d(() => {
-    const t = n.current, i = (o) => {
+  const a = S(null), c = w();
+  return f(() => {
+    const t = a.current, l = (e) => {
       if (window.getSelection()?.toString()) return;
-      const { clientY: r, clientX: l, target: b } = o;
-      if (t && b === t && e === "any") {
-        const { top: k, left: x, right: L, bottom: S } = t.getBoundingClientRect();
-        k <= r && r <= S && x <= l && l <= L || t.close();
+      const { clientY: d, clientX: m, target: j } = e;
+      if (t && j === t && n === "any") {
+        const { top: k, left: x, right: I, bottom: L } = t.getBoundingClientRect();
+        k <= d && d <= L && x <= m && m <= I || t.close();
       }
-    }, c = () => {
-      const o = t?.querySelector("[autofocus]");
-      document.activeElement !== o && o?.focus();
+    }, s = () => {
+      const e = t?.querySelector("[autofocus]");
+      document.activeElement !== e && e?.focus();
     };
-    return t?.addEventListener("animationend", c), t?.addEventListener("click", i), () => {
-      t?.removeEventListener("animationend", c), t?.removeEventListener("click", i);
+    return t?.addEventListener("animationend", s), t?.addEventListener("click", l), () => {
+      t?.removeEventListener("animationend", s), t?.removeEventListener("click", l);
     };
-  }, [e]), d(() => {
-    const t = n.current;
-    t && (a ? t.open || t.showModal() : t.open && t.close());
-  }, [a]), /* @__PURE__ */ s(
+  }, [n]), f(() => {
+    const t = a.current;
+    t && (r ? t.open || t.showModal() : t.open && t.close());
+  }, [r]), /* @__PURE__ */ O(
     "dialog",
     {
-      ref: n,
+      ref: a,
       "aria-modal": "true",
-      "aria-labelledby": "modal-title",
+      "aria-labelledby": o ? c : void 0,
       onCancel: (t) => {
-        e === "none" && t.preventDefault();
+        n === "none" && t.preventDefault();
       },
-      "data-backdrop-color": p,
-      className: m.modal,
-      "data-variant": _,
+      "data-backdrop-color": g,
+      className: i.modal,
+      "data-variant": b,
       "data-height": E,
-      onClose: e !== "none" ? u : void 0,
-      children: /* @__PURE__ */ s(
-        y,
-        {
-          className: m.content,
-          "aria-label": "modal content",
-          size: g,
-          color: h,
-          padding: v,
-          spacing: C,
-          children: f
-        }
-      )
+      onClose: n !== "none" ? p : void 0,
+      children: [
+        o && /* @__PURE__ */ u("h2", { id: c, className: i.srOnly, children: o }),
+        /* @__PURE__ */ u(
+          D,
+          {
+            className: i.content,
+            "aria-label": "modal content",
+            size: h,
+            color: _,
+            padding: y,
+            spacing: C,
+            children: v
+          }
+        )
+      ]
     }
   );
 };
 export {
-  J as ModalBase
+  T as ModalBase
 };

package/dist/types/lib/components/GlobalHeader/HeaderDrawer.d.ts

@@ -8,5 +8,6 @@ export interface HeaderDrawerProps {
     expandable?: boolean;
     onToggle?: () => void;
     children: ReactNode;
+    ariaLabelledby?: string;
 }
-export declare const HeaderDrawer: ({ id, open, onClose, closedBy, expanded, expandable, onToggle, children, }: HeaderDrawerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const HeaderDrawer: ({ id, open, onClose, closedBy, expanded, expandable, onToggle, children, ariaLabelledby, }: HeaderDrawerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Modal/ModalBase.d.ts

@@ -11,5 +11,6 @@ export interface ModalBaseProps {
     color?: SectionProps['color'];
     padding?: SectionProps['padding'];
     spacing?: SectionProps['spacing'];
+    title?: string;
 }
-export declare const ModalBase: ({ open, onClose, closedBy, children, backdropColor, size, color, padding, spacing, height, variant, }: ModalBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ModalBase: ({ open, onClose, closedBy, children, backdropColor, size, color, padding, spacing, height, variant, title, }: ModalBaseProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.67.3",
+  "version": "0.67.4",
   "main": "dist/index.js",
   "files": [
     "dist/",