@altinn/altinn-components 0.67.2 → 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,90 +1,84 @@
-import { jsxs as c, Fragment as m, jsx as r } from "react/jsx-runtime";
-import { useRef as N, useEffect as v } from "react";
-import { Button as D } from "../Button/Button.js";
+import { jsxs as a, Fragment as l, jsx as t } from "react/jsx-runtime";
+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 L } 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 j } from "../../ChevronUp-hn05LboH.js";
-import { S as I } from "../../ChevronDown-D_a7nb-G.js";
-import '../../assets/HeaderDrawer.css';const M = "_backdrop_yn0zc_11", R = "_drawer_yn0zc_28", F = "_footer_yn0zc_60", V = "_body_yn0zc_64", q = "_toggleButton_yn0zc_104", t = {
-  backdrop: M,
-  drawer: R,
+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
-}, Z = ({
-  id: l,
-  open: i,
-  onClose: a,
+}, $ = ({
+  id: c,
+  open: r,
+  onClose: v,
   closedBy: o = "any",
-  expanded: u,
-  expandable: y = !0,
+  expanded: d,
+  expandable: _ = !0,
   onToggle: b,
-  children: _
+  children: w,
+  ariaLabelledby: k
 }) => {
-  const { languageCode: w } = L(), f = A(w), d = N(null);
-  v(() => {
-    const e = d.current, s = (n) => {
-      const { clientY: p, clientX: h, target: z } = n;
-      if (n instanceof KeyboardEvent && n.key === "Escape") {
-        if (o === "none") {
-          n.preventDefault();
-          return;
-        }
-        a();
-        return;
+  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: 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();
       }
-      if (!window.getSelection()?.toString() && e && z === e && o === "any") {
-        const { top: E, left: x, right: S, bottom: C } = e.getBoundingClientRect();
-        E <= p && p <= C && x <= h && h <= S || e?.close();
-      }
-    }, g = () => {
-      const n = e?.querySelector("[autofocus]");
-      document.activeElement !== n && n?.focus();
+    }, f = () => {
+      const i = e?.querySelector("[autofocus]");
+      document.activeElement !== i && i?.focus();
     };
-    return e?.addEventListener("animationend", g), e?.addEventListener("click", s), e?.addEventListener("keydown", s), () => {
-      e?.removeEventListener("animationend", g), e?.removeEventListener("click", s), e?.removeEventListener("keydown", s);
+    return e?.addEventListener("animationend", f), e?.addEventListener("click", u), () => {
+      e?.removeEventListener("animationend", f), e?.removeEventListener("click", u);
     };
-  }, [o, a]), v(() => {
-    const e = d.current;
-    e && (i ? e.open || e.showModal() : e.open && e.close());
-  }, [i]);
-  const k = (e) => {
-    e.preventDefault(), o === "any" && a();
+  }, [o]), h(() => {
+    const e = s.current;
+    e && (r ? e.open || e.showModal() : e.open && e.close());
+  }, [r]);
+  const z = (e) => {
+    o === "none" && e.preventDefault();
   };
-  return /* @__PURE__ */ c(m, { children: [
-    /* @__PURE__ */ r("div", { className: t.backdrop, "aria-hidden": !i }),
-    /* @__PURE__ */ c(
+  return /* @__PURE__ */ a(l, { children: [
+    /* @__PURE__ */ t("div", { className: n.backdrop, "aria-hidden": !r }),
+    /* @__PURE__ */ a(
       "dialog",
       {
-        id: l,
-        ref: d,
+        id: c,
+        ref: s,
         "aria-modal": "true",
-        "aria-labelledby": "modal-title",
-        "data-open": i,
-        "data-expanded": u,
-        onCancel: k,
-        className: t.drawer,
-        onClose: o !== "none" ? a : void 0,
+        "aria-labelledby": k,
+        "data-open": r,
+        "data-expanded": d,
+        onCancel: z,
+        className: n.drawer,
+        onClose: o !== "none" ? v : void 0,
         children: [
-          /* @__PURE__ */ r("div", { className: t.body, children: _ }),
-          o !== "none" && y && /* @__PURE__ */ r("footer", { className: t.footer, children: /* @__PURE__ */ r(D, { className: t.toggleButton, size: "xs", variant: "outline", onClick: b, children: u ? /* @__PURE__ */ c(m, { children: [
-            /* @__PURE__ */ r(j, { className: t.btnIcon, "aria-hidden": "true" }),
-            f.minimize
-          ] }) : /* @__PURE__ */ c(m, { children: [
-            /* @__PURE__ */ r(I, { className: t.btnIcon, "aria-hidden": "true" }),
-            f.fullscreen
+          /* @__PURE__ */ t("div", { className: n.body, children: w }),
+          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(M, { className: n.btnIcon, "aria-hidden": "true" }),
+            m.fullscreen
           ] }) }) })
         ]
       }
     )
   ] });
-}, A = (l) => {
-  switch (l) {
+}, A = (c) => {
+  switch (c) {
     case "nn":
       return {
         minimize: "Minimer",
@@ -103,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 D, useEffect as m } 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,78 +9,76 @@ import "../Button/Button.js";
 import "react-dom";
 import "../GlobalMenu/GlobalMenuBase.js";
 import "../Snackbar/useSnackbar.js";
-import { Section as S } from "../Page/Section.js";
-import '../../assets/ModalBase.css';const C = "_modal_3d5cx_1", R = "_content_3d5cx_41", f = {
-  modal: C,
-  content: R
-}, J = ({
+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: o,
+  onClose: p,
   closedBy: n = "any",
-  children: u,
-  backdropColor: p = "inherit",
-  size: g,
-  color: v,
-  padding: h = 0,
-  spacing: E = 0,
-  height: y = "auto",
-  variant: b = "default"
+  children: v,
+  backdropColor: g = "inherit",
+  size: h,
+  color: _,
+  padding: y = 0,
+  spacing: C = 0,
+  height: E = "auto",
+  variant: b = "default",
+  title: o
 }) => {
-  const i = D(null);
-  return m(() => {
-    const t = i.current, a = (e) => {
-      const { clientY: l, clientX: d, target: k } = e;
-      if (e instanceof KeyboardEvent && e.key === "Escape") {
-        if (n === "none") {
-          e.preventDefault();
-          return;
-        }
-        o();
-        return;
+  const a = S(null), c = w();
+  return f(() => {
+    const t = a.current, l = (e) => {
+      if (window.getSelection()?.toString()) return;
+      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();
       }
-      if (!window.getSelection()?.toString() && t && k === t && n === "any") {
-        const { top: L, left: _, right: w, bottom: x } = t.getBoundingClientRect();
-        L <= l && l <= x && _ <= d && d <= w || t?.close();
-      }
-    }, c = () => {
+    }, s = () => {
       const e = t?.querySelector("[autofocus]");
       document.activeElement !== e && e?.focus();
     };
-    return t?.addEventListener("animationend", c), t?.addEventListener("click", a), t?.addEventListener("keydown", a), () => {
-      t?.removeEventListener("animationend", c), t?.removeEventListener("click", a), t?.removeEventListener("keydown", a);
+    return t?.addEventListener("animationend", s), t?.addEventListener("click", l), () => {
+      t?.removeEventListener("animationend", s), t?.removeEventListener("click", l);
     };
-  }, [n, o]), m(() => {
-    const t = i.current;
+  }, [n]), f(() => {
+    const t = a.current;
     t && (r ? t.open || t.showModal() : t.open && t.close());
-  }, [r]), /* @__PURE__ */ s(
+  }, [r]), /* @__PURE__ */ O(
     "dialog",
     {
-      ref: i,
+      ref: a,
       "aria-modal": "true",
-      "aria-labelledby": "modal-title",
+      "aria-labelledby": o ? c : void 0,
       onCancel: (t) => {
-        t.preventDefault(), n === "any" && o();
+        n === "none" && t.preventDefault();
       },
-      "data-backdrop-color": p,
-      className: f.modal,
+      "data-backdrop-color": g,
+      className: i.modal,
       "data-variant": b,
-      "data-height": y,
-      onClose: n !== "none" ? o : void 0,
-      children: /* @__PURE__ */ s(
-        S,
-        {
-          className: f.content,
-          "aria-label": "modal content",
-          size: g,
-          color: v,
-          padding: h,
-          spacing: E,
-          children: u
-        }
-      )
+      "data-height": E,
+      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.2",
+  "version": "0.67.4",
   "main": "dist/index.js",
   "files": [
     "dist/",