@altinn/altinn-components 0.46.4 → 0.46.6

package/dist/assets/GlobalMenuButton2.css

@@ -1 +1 @@
-._button_1g9ar_1{flex-shrink:0;position:relative;z-index:2;display:inline-flex;align-items:center;column-gap:.625rem;padding:.625rem;border:none;border-radius:4px}._label_1g9ar_13{font-size:1.125rem;font-weight:500;padding:.25rem}._avatar_1g9ar_19{font-size:2.25rem;width:2.25rem;height:2.25rem}._icon_1g9ar_25{font-size:1.5rem;width:1.5rem;height:1.5rem}._badge_1g9ar_31{position:absolute;top:0;right:0;margin-top:-.75rem;margin-right:-.75rem}
+._button_rhdbs_1{flex-shrink:0;position:relative;z-index:2;display:inline-flex;align-items:center;column-gap:.625rem;padding:.625rem;border:none;border-radius:4px}._label_rhdbs_13{font-size:1.125rem;font-weight:500;padding:.25rem}._avatar_rhdbs_19{font-size:2.25rem;width:2.25rem;height:2.25rem}._icon_rhdbs_25{font-size:1.5rem;width:1.5rem;height:1.5rem}._iconMobile_rhdbs_31{font-size:1.5rem;width:3.55rem;height:1.5rem}._badge_rhdbs_37{position:absolute;top:0;right:0;margin-top:-.75rem;margin-right:-.75rem}

package/dist/components/Account/AccountMenu.js

@@ -1,11 +1,11 @@
 "use client";
-import { jsx as c } from "react/jsx-runtime";
-import { useState as x, useEffect as R } from "react";
+import { jsx as x } from "react/jsx-runtime";
+import { useState as R, useEffect as S } from "react";
 import "../../index-L8X2o7IH.js";
 import "../RootProvider/RootProvider.js";
-import { Menu as S } from "../Menu/Menu.js";
+import { Menu as j } from "../Menu/Menu.js";
 import "../Snackbar/useSnackbar.js";
-const j = (d) => `${d} hits`, B = ({
+const k = (d) => `${d} hits`, D = ({
   items: d = [],
   groups: v = {},
   search: t,
@@ -13,7 +13,8 @@ const j = (d) => `${d} hits`, B = ({
   onSelectAccount: u,
   currentAccount: e,
   isVirtualized: L,
-  keyboardEvents: w
+  keyboardEvents: w,
+  scrollRefStyles: F
 }) => {
   var r;
   const p = d.map((o) => ({
@@ -24,43 +25,44 @@ const j = (d) => `${d} hits`, B = ({
     onClick: () => {
       !o.disabled && (u == null || u(o.id));
     }
-  })), [l, i] = x("");
-  R(() => {
+  })), [l, i] = R("");
+  S(() => {
     (t == null ? void 0 : t.value) !== void 0 && i(t.value);
   }, [t == null ? void 0 : t.value]);
-  const F = C || ((o, a) => {
+  const b = C || ((o, a) => {
     var g, f, s;
     return ((g = o == null ? void 0 : o.name) == null ? void 0 : g.toLowerCase().includes(a.toLowerCase())) || ((s = (f = o == null ? void 0 : o.description) == null ? void 0 : f.toString()) == null ? void 0 : s.toLowerCase().includes(a.toLowerCase()));
-  }), n = l ? p.filter((o) => F(o, l)).map((o) => ({
+  }), n = l ? p.filter((o) => b(o, l)).map((o) => ({
     ...o,
     groupId: "search",
     title: (o == null ? void 0 : o.title) || o.name,
     highlightWords: [l]
-  })) : p, b = l ? {
+  })) : p, I = l ? {
     search: {
-      title: ((r = t == null ? void 0 : t.getResultsLabel) == null ? void 0 : r.call(t, n.length)) ?? j(n.length)
+      title: ((r = t == null ? void 0 : t.getResultsLabel) == null ? void 0 : r.call(t, n.length)) ?? k(n.length)
     }
-  } : v, I = {
+  } : v, M = {
     name: "account-search",
     value: l,
     placeholder: (t == null ? void 0 : t.placeholder) ?? "Find account",
     onChange: (o) => i(o.target.value),
     onClear: () => i("")
-  }, M = [
+  }, c = [
     ...n.length > 0 ? n : [{ id: "search", groupId: "search", hidden: !0 }]
   ];
-  return /* @__PURE__ */ c(
-    S,
+  return /* @__PURE__ */ x(
+    j,
     {
       variant: "default",
-      search: t && !t.hidden ? I : void 0,
-      groups: b,
-      items: M,
+      search: t && !t.hidden ? M : void 0,
+      groups: I,
+      items: c,
       isVirtualized: L,
-      keyboardEvents: w
+      keyboardEvents: w,
+      scrollRefStyles: F
     }
   );
 };
 export {
-  B as AccountMenu
+  D as AccountMenu
 };

package/dist/components/Footer/FooterLogo.js

@@ -1,13 +1,13 @@
 import { jsxs as m, jsx as o } from "react/jsx-runtime";
-import { c as t } from "../../index-L8X2o7IH.js";
-import { DigdirLogomark as c } from "../Header/DigdirLogomark.js";
-import '../../assets/FooterLogo.css';const g = "_logo_127g0_1", i = "_symbol_127g0_9", s = {
-  logo: g,
-  symbol: i
-}, _ = ({ className: r, title: l = "Digdir" }) => /* @__PURE__ */ m("div", { className: t(s.logo, r), children: [
-  /* @__PURE__ */ o(c, { className: s.symbol }),
+import { c as i } from "../../index-L8X2o7IH.js";
+import { DigdirLogomark as t } from "../Header/DigdirLogomark.js";
+import '../../assets/FooterLogo.css';const c = "_logo_127g0_1", e = "_symbol_127g0_9", s = {
+  logo: c,
+  symbol: e
+}, d = ({ className: r, title: l = "Digdir" }) => /* @__PURE__ */ m("div", { className: i(s.logo, r), children: [
+  /* @__PURE__ */ o(t, { className: s.symbol, "aria-hidden": !0 }),
   /* @__PURE__ */ o("span", { children: l })
 ] });
 export {
-  _ as FooterLogo
+  d as FooterLogo
 };

package/dist/components/GlobalHeader/AccountSelector.js

@@ -1,16 +1,16 @@
 "use client";
-import { jsx as o, jsxs as O } from "react/jsx-runtime";
+import { jsx as a, jsxs as O } from "react/jsx-runtime";
 import { c as g } from "../../index-L8X2o7IH.js";
-import s, { forwardRef as v, useState as j, useEffect as z } from "react";
+import s, { forwardRef as v, useState as z, useEffect as j } from "react";
 import { AccountMenu as C } from "../Account/AccountMenu.js";
 import { Button as E } from "../Button/Button.js";
 import { useRootContext as k } from "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { SearchField as F } from "../Forms/SearchField.js";
 import { S as N } from "../../Spinner-BDXfwXIh.js";
-import { H as M } from "../../Heading-By5DKz2H.js";
+import { H as R } from "../../Heading-By5DKz2H.js";
 import { u as _ } from "../../useId-BVFxCjkq.js";
-import '../../assets/AccountSelector.css';var R = function(e, i) {
+import '../../assets/AccountSelector.css';var M = function(e, i) {
   var r = {};
   for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && i.indexOf(t) < 0 && (r[t] = e[t]);
   if (e != null && typeof Object.getOwnPropertySymbols == "function")
@@ -19,7 +19,7 @@ import '../../assets/AccountSelector.css';var R = function(e, i) {
   return r;
 };
 const P = v((e, i) => {
-  var { title: r, titleId: t } = e, n = R(e, ["title", "titleId"]);
+  var { title: r, titleId: t } = e, n = M(e, ["title", "titleId"]);
   let l = _();
   return l = r ? t || "title-" + l : void 0, s.createElement(
     "svg",
@@ -45,10 +45,10 @@ const T = v((e, i) => {
     r ? s.createElement("title", { id: l }, r) : null,
     s.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M3.75 12a8.25 8.25 0 1 1 16.5 0 8.25 8.25 0 0 1-16.5 0M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25m.53 6.72a.75.75 0 0 0-1.06 0l-3.5 3.5a.75.75 0 0 0 .53 1.28h7a.75.75 0 0 0 .53-1.28zM12 10.56l1.69 1.69h-3.38z", clipRule: "evenodd" })
   );
-}), B = "_accountSelector_1f74n_1", H = "_heading_1f74n_11", V = "_searchSection_1f74n_17", D = "_searchField_1f74n_22", K = "_accountMenu_1f74n_26", L = "_fullScreen_1f74n_34", U = "_virtualized_1f74n_38", W = "_btnIcon_1f74n_42", $ = "_spinner_1f74n_46", c = {
-  accountSelector: B,
-  heading: H,
-  searchSection: V,
+}), H = "_accountSelector_1f74n_1", V = "_heading_1f74n_11", B = "_searchSection_1f74n_17", D = "_searchField_1f74n_22", K = "_accountMenu_1f74n_26", L = "_fullScreen_1f74n_34", U = "_virtualized_1f74n_38", W = "_btnIcon_1f74n_42", $ = "_spinner_1f74n_46", c = {
+  accountSelector: H,
+  heading: V,
+  searchSection: B,
   searchField: D,
   accountMenu: K,
   fullScreen: L,
@@ -56,19 +56,19 @@ const T = v((e, i) => {
   btnIcon: W,
   spinner: $
 }, ie = ({ accountMenu: e, forceOpenFullScreen: i, className: r, loading: t }) => {
-  const { currentId: n, openId: l, toggleId: u, languageCode: S } = k(), a = n === "accountFullscreen", [f, m] = j(""), { minimize: b, fullscreen: w, searchText: h, heading: y } = q(S);
-  z(() => {
-    i === !0 && !a && l("accountFullscreen");
-  }, [i, a, l]);
+  const { currentId: n, openId: l, toggleId: u, languageCode: S } = k(), o = n === "accountFullscreen", [f, m] = z(""), { minimize: b, fullscreen: y, searchText: h, heading: w } = q(S);
+  j(() => {
+    i === !0 && !o && l("accountFullscreen");
+  }, [i, o, l]);
   const x = () => {
-    l(a ? "account" : "accountFullscreen");
+    l(o ? "account" : "accountFullscreen");
   }, I = (d) => {
     var p;
-    (p = e.onSelectAccount) == null || p.call(e, d), u(a ? "accountFullscreen" : "account");
+    (p = e.onSelectAccount) == null || p.call(e, d), u(o ? "accountFullscreen" : "account");
   };
-  return t ? /* @__PURE__ */ o(N, { "aria-hidden": !0, "data-color": "neutral", className: c.spinner }) : /* @__PURE__ */ O("div", { className: g(r, c.accountSelector), children: [
-    a && /* @__PURE__ */ o(M, { "data-size": "md", level: 2, className: c.heading, children: y }),
-    /* @__PURE__ */ o("div", { className: c.searchSection, children: /* @__PURE__ */ o(
+  return t ? /* @__PURE__ */ a(N, { "aria-hidden": !0, "data-color": "neutral", className: c.spinner }) : /* @__PURE__ */ O("div", { className: g(r, c.accountSelector), children: [
+    o && /* @__PURE__ */ a(R, { "data-size": "md", level: 2, className: c.heading, children: w }),
+    /* @__PURE__ */ a("div", { className: c.searchSection, children: /* @__PURE__ */ a(
       F,
       {
         name: h,
@@ -79,32 +79,33 @@ const T = v((e, i) => {
         className: c.searchField
       }
     ) }),
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ a(
       "div",
       {
         className: g(
           c.accountMenu,
-          a && c.fullScreen,
+          o && c.fullScreen,
           e.isVirtualized && c.virtualized
         ),
-        children: /* @__PURE__ */ o(
+        children: /* @__PURE__ */ a(
           C,
           {
             ...e,
             onSelectAccount: I,
             keyboardEvents: !1,
-            search: { hidden: !0, name: "", value: f }
+            search: { hidden: !0, name: "", value: f },
+            scrollRefStyles: !o && e.isVirtualized ? { maxHeight: "calc(40vh)" } : void 0
           }
         )
       }
     ),
-    i !== !0 && /* @__PURE__ */ o(
+    i !== !0 && /* @__PURE__ */ a(
       E,
       {
-        icon: a ? /* @__PURE__ */ o(T, { className: c.btnIcon, "aria-hidden": "true" }) : /* @__PURE__ */ o(P, { className: c.btnIcon, "aria-hidden": "true" }),
+        icon: o ? /* @__PURE__ */ a(T, { className: c.btnIcon, "aria-hidden": "true" }) : /* @__PURE__ */ a(P, { className: c.btnIcon, "aria-hidden": "true" }),
         variant: "text",
         onClick: x,
-        children: a ? b : w
+        children: o ? b : y
       }
     )
   ] });

package/dist/components/GlobalHeader/DigdirLogomark.js

@@ -1,20 +1,21 @@
-import { jsxs as L, jsx as C } from "react/jsx-runtime";
-import { useIsDesktop as n } from "../../hooks/useIsDesktop.js";
-const p = ({ className: e, title: i = "Digdir logomark" }) => {
-  const l = n() ? 8.5 : 7, { width: o, height: t } = { width: `${l}em`, height: `${l * 0.34}em` };
-  return /* @__PURE__ */ L(
+import { jsxs as e, jsx as C } from "react/jsx-runtime";
+import { useIsDesktop as r } from "../../hooks/useIsDesktop.js";
+const p = ({ className: L, title: i = "Digdir logomark", "aria-hidden": o }) => {
+  const l = r() ? 8.5 : 7, { width: t, height: n } = { width: `${l}em`, height: `${l * 0.34}em` };
+  return /* @__PURE__ */ e(
     "svg",
     {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      width: o,
-      height: t,
+      width: t,
+      height: n,
       viewBox: "0 0 113.779 38.8565",
       version: "1.1",
-      className: e,
+      className: L,
+      "aria-hidden": o,
       children: [
         /* @__PURE__ */ C("title", { children: i }),
-        /* @__PURE__ */ L("g", { id: "surface1", children: [
+        /* @__PURE__ */ e("g", { id: "surface1", children: [
           /* @__PURE__ */ C(
             "path",
             {

package/dist/components/GlobalHeader/GlobalSearch.js

@@ -1,40 +1,44 @@
-import { jsx as e, jsxs as u } from "react/jsx-runtime";
-import { useState as S } from "react";
+import { jsx as r, jsxs as S } from "react/jsx-runtime";
+import { useState as d, useRef as g, useEffect as b } from "react";
 import "../../index-L8X2o7IH.js";
-import { useIsDesktop as d } from "../../hooks/useIsDesktop.js";
-import { useRootContext as f } from "../RootProvider/RootProvider.js";
+import { useIsDesktop as k } from "../../hooks/useIsDesktop.js";
+import { useRootContext as v } from "../RootProvider/RootProvider.js";
 import { s as o } from "../../globalSearch.module-Ejp7X0dO.js";
 import "../Snackbar/useSnackbar.js";
-import { S as r } from "../../index-B6sKSsN9.js";
-import { S as g } from "../../MagnifyingGlass-bwVhw07z.js";
-const B = ({ onSearch: a }) => {
-  const l = d(), [n, c] = S(""), { languageCode: i, closeAll: m } = f(), { search: p, placeholder: s } = b(i), h = () => {
-    a(n), m();
-  };
-  return /* @__PURE__ */ e(
+import { S as a } from "../../index-B6sKSsN9.js";
+import { S as x } from "../../MagnifyingGlass-bwVhw07z.js";
+const q = ({ onSearch: t }) => {
+  const u = k(), [s, i] = d(""), { languageCode: h, closeAll: m, currentId: n } = v(), { search: p, placeholder: c } = y(h), f = () => {
+    t(s), m();
+  }, l = g(null);
+  return b(() => {
+    var e;
+    n === "search" && ((e = l.current) == null || e.focus());
+  }, [n]), /* @__PURE__ */ r(
     "form",
     {
-      onSubmit: (t) => {
-        t.preventDefault(), h();
+      onSubmit: (e) => {
+        e.preventDefault(), f();
       },
-      children: /* @__PURE__ */ u(r, { className: o.globalSearch, "data-size": l ? "lg" : "md", children: [
-        /* @__PURE__ */ e(
-          r.Input,
+      children: /* @__PURE__ */ S(a, { className: o.globalSearch, "data-size": u ? "lg" : "md", children: [
+        /* @__PURE__ */ r(
+          a.Input,
           {
-            placeholder: s,
-            onChange: (t) => c(t.target.value),
-            value: n,
-            "aria-label": s,
+            ref: l,
+            placeholder: c,
+            onChange: (e) => i(e.target.value),
+            value: s,
+            "aria-label": c,
             className: o.searchInput
           }
         ),
-        /* @__PURE__ */ e(r.Clear, {}),
-        /* @__PURE__ */ e(r.Button, { variant: "secondary", icon: !0, "aria-label": p, className: o.searchInputButton, children: /* @__PURE__ */ e(g, {}) })
+        /* @__PURE__ */ r(a.Clear, {}),
+        /* @__PURE__ */ r(a.Button, { variant: "secondary", icon: !0, "aria-label": p, className: o.searchInputButton, children: /* @__PURE__ */ r(x, {}) })
       ] })
     }
   );
-}, b = (a) => {
-  switch (a) {
+}, y = (t) => {
+  switch (t) {
     case "nn":
       return {
         search: "Søk",
@@ -53,5 +57,5 @@ const B = ({ onSearch: a }) => {
   }
 };
 export {
-  B as GlobalSearch
+  q as GlobalSearch
 };

package/dist/components/GlobalHeader/GlobalSearchButton.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs as c, jsx as a } from "react/jsx-runtime";
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import { useIsDesktop as i } from "../../hooks/useIsDesktop.js";
@@ -13,19 +13,19 @@ const v = ({
   onClick: t,
   expanded: o
 }) => {
-  const { languageCode: n } = l(), { search: r, close: s } = f(n), e = i();
+  const { languageCode: a } = l(), { search: r, close: n } = f(a), e = i();
   return /* @__PURE__ */ c(
     m,
     {
       type: "button",
       icon: !e,
-      title: o ? s : r,
+      title: o ? n : r,
       onClick: t,
       "data-color": "neutral",
       className: u.searchButton,
       children: [
-        o ? /* @__PURE__ */ a(p, { "aria-hidden": "true" }) : /* @__PURE__ */ a(h, { "aria-hidden": "true" }),
-        e ? o ? s : r : null
+        o ? /* @__PURE__ */ s(p, { "aria-hidden": "true" }) : /* @__PURE__ */ s(h, { "aria-hidden": "true" }),
+        e ? r : null
       ]
     }
   );

package/dist/components/GlobalHeader/HeaderLogo.js

@@ -1,17 +1,23 @@
-import { jsxs as s, jsx as r } from "react/jsx-runtime";
-import { c as p } from "../../index-L8X2o7IH.js";
-import { Badge as e } from "../Badge/Badge.js";
-import { ButtonBase as g } from "../Button/ButtonBase.js";
+import { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { c as n } from "../../index-L8X2o7IH.js";
+import { Badge as g } from "../Badge/Badge.js";
+import { ButtonBase as l } from "../Button/ButtonBase.js";
 import "react";
-import "../RootProvider/RootProvider.js";
+import { useRootContext as c } from "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import { DigdirLogomark as a } from "./DigdirLogomark.js";
-import '../../assets/HeaderLogo2.css';const c = "_logo_1d6ig_1", l = {
-  logo: c
-}, L = ({ className: t, as: m = "a", href: i = "/", badge: o }) => /* @__PURE__ */ s(g, { as: m, className: p(l.logo, t), href: i, children: [
-  /* @__PURE__ */ r(a, {}),
-  o && /* @__PURE__ */ r(e, { ...o })
-] });
+import { DigdirLogomark as p } from "./DigdirLogomark.js";
+import '../../assets/HeaderLogo2.css';const f = "_logo_1d6ig_1", d = {
+  logo: f
+}, x = {
+  nn: "Gå til framsida",
+  en: "Go to homepage"
+}, C = ({ className: r, as: m = "a", href: s = "/", badge: o }) => {
+  const { languageCode: e } = c(), i = x[e ?? ""] ?? "Gå til forsiden";
+  return /* @__PURE__ */ a(l, { as: m, className: n(d.logo, r), href: s, ariaLabel: i, children: [
+    /* @__PURE__ */ t(p, {}),
+    o && /* @__PURE__ */ t(g, { ...o })
+  ] });
+};
 export {
-  L as HeaderLogo
+  C as HeaderLogo
 };

package/dist/components/GlobalMenu/GlobalMenuButton.js

@@ -1,80 +1,99 @@
 "use client";
-import { jsxs as d, jsx as n } from "react/jsx-runtime";
-import { c as f } from "../../index-L8X2o7IH.js";
-import s, { forwardRef as _ } from "react";
-import { useIsDesktop as y } from "../../hooks/useIsDesktop.js";
-import { Badge as p } from "../Badge/Badge.js";
-import { ButtonBase as b } from "../Button/ButtonBase.js";
-import { ButtonLabel as g } from "../Button/ButtonLabel.js";
-import { ButtonIcon as h } from "../Button/ButtonIcon.js";
-import "../RootProvider/RootProvider.js";
+import { jsxs as u, jsx as r, Fragment as w } from "react/jsx-runtime";
+import { c as p } from "../../index-L8X2o7IH.js";
+import m, { forwardRef as x } from "react";
+import { useIsDesktop as M } from "../../hooks/useIsDesktop.js";
+import { Badge as h } from "../Badge/Badge.js";
+import { ButtonBase as g } from "../Button/ButtonBase.js";
+import { ButtonLabel as _ } from "../Button/ButtonLabel.js";
+import { ButtonIcon as d } from "../Button/ButtonIcon.js";
+import { useRootContext as O } from "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import { S as v } from "../../XMark-tKk6aExO.js";
-import { u as w } from "../../useId-BVFxCjkq.js";
-import '../../assets/GlobalMenuButton2.css';var O = function(t, l) {
+import { S as y } from "../../XMark-tKk6aExO.js";
+import { u as I } from "../../useId-BVFxCjkq.js";
+import '../../assets/GlobalMenuButton2.css';var j = function(t, l) {
   var o = {};
   for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && l.indexOf(e) < 0 && (o[e] = t[e]);
   if (t != null && typeof Object.getOwnPropertySymbols == "function")
-    for (var r = 0, e = Object.getOwnPropertySymbols(t); r < e.length; r++)
-      l.indexOf(e[r]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[r]) && (o[e[r]] = t[e[r]]);
+    for (var n = 0, e = Object.getOwnPropertySymbols(t); n < e.length; n++)
+      l.indexOf(e[n]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[n]) && (o[e[n]] = t[e[n]]);
   return o;
 };
-const I = _((t, l) => {
-  var { title: o, titleId: e } = t, r = O(t, ["title", "titleId"]);
-  let a = w();
-  return a = o ? e || "title-" + a : void 0, s.createElement(
+const k = x((t, l) => {
+  var { title: o, titleId: e } = t, n = j(t, ["title", "titleId"]);
+  let i = I();
+  return i = o ? e || "title-" + i : void 0, m.createElement(
     "svg",
-    Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: !1, role: "img", ref: l, "aria-labelledby": a }, r),
-    o ? s.createElement("title", { id: a }, o) : null,
-    s.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M2.75 6a.75.75 0 0 1 .75-.75h17a.75.75 0 0 1 0 1.5h-17A.75.75 0 0 1 2.75 6m0 6a.75.75 0 0 1 .75-.75h17a.75.75 0 0 1 0 1.5h-17a.75.75 0 0 1-.75-.75m.75 5.25a.75.75 0 0 0 0 1.5h17a.75.75 0 0 0 0-1.5z", clipRule: "evenodd" })
+    Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: !1, role: "img", ref: l, "aria-labelledby": i }, n),
+    o ? m.createElement("title", { id: i }, o) : null,
+    m.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M2.75 6a.75.75 0 0 1 .75-.75h17a.75.75 0 0 1 0 1.5h-17A.75.75 0 0 1 2.75 6m0 6a.75.75 0 0 1 .75-.75h17a.75.75 0 0 1 0 1.5h-17a.75.75 0 0 1-.75-.75m.75 5.25a.75.75 0 0 0 0 1.5h17a.75.75 0 0 0 0-1.5z", clipRule: "evenodd" })
   );
-}), x = "_button_1g9ar_1", j = "_icon_1g9ar_25", B = "_badge_1g9ar_31", i = {
-  button: x,
-  icon: j,
-  badge: B
-}, H = ({
+}), B = "_button_rhdbs_1", N = "_icon_rhdbs_25", R = "_iconMobile_rhdbs_31", S = "_badge_rhdbs_37", a = {
+  button: B,
+  icon: N,
+  iconMobile: R,
+  badge: S
+}, C = (t) => {
+  switch (t) {
+    case "nn":
+      return {
+        close: "Lukk meny"
+      };
+    case "en":
+      return {
+        close: "Close menu"
+      };
+    default:
+      return {
+        close: "Lukk Meny"
+      };
+  }
+}, J = ({
   className: t,
   as: l = "button",
   color: o = "accent",
   variant: e = "solid",
-  expanded: r,
-  label: a = "Menu",
+  expanded: n,
+  label: i = "Menu",
   badge: c,
-  ...m
+  ...f
 }) => {
-  const u = y();
-  return r ? /* @__PURE__ */ d(
-    b,
+  const s = M(), { languageCode: v } = O(), { close: b } = C(v);
+  return n ? /* @__PURE__ */ u(
+    g,
     {
-      ...m,
+      ...f,
       as: l,
       type: "button",
       variant: e,
       color: o,
-      className: f(i.button, t),
+      className: p(a.button, t),
       children: [
-        u && /* @__PURE__ */ n(h, { className: i.closeIcon, icon: /* @__PURE__ */ n(v, { className: i.icon, "aria-label": "Close" }) }),
-        /* @__PURE__ */ n(g, { children: a }),
-        c && /* @__PURE__ */ n(p, { ...c, className: i.badge })
+        s && /* @__PURE__ */ u(w, { children: [
+          /* @__PURE__ */ r(d, { icon: /* @__PURE__ */ r(y, { className: a.icon, "aria-label": b }) }),
+          /* @__PURE__ */ r(_, { children: i })
+        ] }),
+        !s && /* @__PURE__ */ r(d, { icon: /* @__PURE__ */ r(y, { className: a.iconMobile, "aria-label": b }) }),
+        c && /* @__PURE__ */ r(h, { ...c, className: a.badge })
       ]
     }
-  ) : /* @__PURE__ */ d(
-    b,
+  ) : /* @__PURE__ */ u(
+    g,
     {
-      ...m,
+      ...f,
       as: l,
       type: "button",
       variant: e,
       color: o,
-      className: f(i.button, t),
+      className: p(a.button, t),
       children: [
-        u && /* @__PURE__ */ n(h, { icon: /* @__PURE__ */ n(I, { className: i.icon, "aria-hidden": !0 }) }),
-        /* @__PURE__ */ n(g, { children: a }),
-        c && /* @__PURE__ */ n(p, { ...c, className: i.badge })
+        s && /* @__PURE__ */ r(d, { icon: /* @__PURE__ */ r(k, { className: a.icon, "aria-hidden": !0 }) }),
+        /* @__PURE__ */ r(_, { children: i }),
+        c && /* @__PURE__ */ r(h, { ...c, className: a.badge })
       ]
     }
   );
 };
 export {
-  H as GlobalMenuButton
+  J as GlobalMenuButton
 };

package/dist/components/Menu/Menu.js

@@ -1,8 +1,8 @@
 import { jsx as r } from "react/jsx-runtime";
-import { MenuBase as s } from "./MenuBase.js";
-import { MenuItems as c } from "./MenuItems.js";
-import { MenuItemsVirtual as h } from "./MenuItemsVirtual.js";
-const D = ({
+import { MenuBase as h } from "./MenuBase.js";
+import { MenuItems as w } from "./MenuItems.js";
+import { MenuItemsVirtual as A } from "./MenuItemsVirtual.js";
+const J = ({
   color: m,
   variant: n,
   defaultItemColor: i,
@@ -11,34 +11,37 @@ const D = ({
   defaultIconTheme: o,
   groups: u,
   items: x = [],
-  search: f,
-  isVirtualized: B,
-  keyboardEvents: j
-}) => B ? /* @__PURE__ */ r(s, { color: m, variant: n, children: /* @__PURE__ */ r(
-  h,
+  search: j,
+  isVirtualized: q,
+  keyboardEvents: B,
+  scrollRefStyles: f
+}) => q ? /* @__PURE__ */ r(h, { color: m, variant: n, children: /* @__PURE__ */ r(
+  A,
   {
-    search: f,
+    search: j,
     items: x,
     groups: u,
     defaultItemSize: M,
     defaultItemColor: i,
     defaultItemVariant: p,
     defaultIconTheme: o,
-    keyboardEvents: j
+    keyboardEvents: B,
+    scrollRefStyles: f
   }
-) }) : /* @__PURE__ */ r(s, { color: m, variant: n, children: /* @__PURE__ */ r(
-  c,
+) }) : /* @__PURE__ */ r(h, { color: m, variant: n, children: /* @__PURE__ */ r(
+  w,
   {
-    search: f,
+    search: j,
     items: x,
     groups: u,
     defaultItemSize: M,
     defaultItemColor: i,
     defaultItemVariant: p,
     defaultIconTheme: o,
-    keyboardEvents: j
+    keyboardEvents: B,
+    scrollRefStyles: f
   }
 ) });
 export {
-  D as Menu
+  J as Menu
 };

package/dist/components/Menu/MenuItemsVirtual.js

@@ -1,20 +1,20 @@
 "use client";
-import { jsx as l, jsxs as S } from "react/jsx-runtime";
-import { u as _ } from "../../index-D-VWMqlv.js";
-import { useRef as M, useState as k, useEffect as x, useMemo as A } from "react";
+import { jsx as m, jsxs as L } from "react/jsx-runtime";
+import { u as k } from "../../index-D-VWMqlv.js";
+import { useRef as R, useState as A, useEffect as y, useMemo as D } from "react";
 import "../../index-L8X2o7IH.js";
-import { useMenu as D } from "../../hooks/useMenu.js";
+import { useMenu as K } from "../../hooks/useMenu.js";
 import "../RootProvider/RootProvider.js";
-import { MenuItem as K } from "./MenuItem.js";
-import { MenuSearch as V } from "./MenuSearch.js";
-import { MenuHeader as W } from "./MenuHeader.js";
-import { MenuList as j, MenuListItem as N } from "./MenuBase.js";
+import { MenuItem as V } from "./MenuItem.js";
+import { MenuSearch as W } from "./MenuSearch.js";
+import { MenuHeader as j } from "./MenuHeader.js";
+import { MenuList as N, MenuListItem as U } from "./MenuBase.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/MenuItemsVirtual.css';const U = "_virtualScrollRef_nmoqo_1", Y = "_virtualMenuListItem_nmoqo_8", E = {
-  virtualScrollRef: U,
-  virtualMenuListItem: Y
-}, re = ({
-  level: R = 0,
+import '../../assets/MenuItemsVirtual.css';const Y = "_virtualScrollRef_nmoqo_1", F = "_virtualMenuListItem_nmoqo_8", M = {
+  virtualScrollRef: Y,
+  virtualMenuListItem: F
+}, se = ({
+  level: E = 0,
   search: g,
   items: z,
   groups: T = {},
@@ -22,83 +22,87 @@ import '../../assets/MenuItemsVirtual.css';const U = "_virtualScrollRef_nmoqo_1"
   defaultItemColor: b,
   defaultItemVariant: q,
   defaultIconTheme: $,
-  keyboardEvents: f
+  keyboardEvents: f,
+  scrollRefStyles: H
 }) => {
-  var L;
-  const a = M(null), y = (L = a.current) == null ? void 0 : L.getBoundingClientRect().top, [I, H] = k(window.innerHeight);
-  x(() => {
+  var w;
+  const c = R(null), x = (w = c.current) == null ? void 0 : w.getBoundingClientRect().top, [S, B] = A(window.innerHeight);
+  y(() => {
     const n = () => {
-      H(window.innerHeight);
+      B(window.innerHeight);
     };
     return window.addEventListener("resize", n), () => {
       window.removeEventListener("resize", n);
     };
   }, []);
-  const w = A(() => y && I - y - 8 || 400, [I, y]), B = {
-    maxHeight: w <= 300 ? 300 : w
-  }, { menu: C } = D({
+  const I = D(() => x && S - x - 8 || 400, [S, x]), C = {
+    ...{
+      maxHeight: I <= 300 ? 300 : I
+    },
+    ...H
+  }, { menu: _ } = K({
     items: z,
     groups: T,
     groupByKey: "groupId",
     keyboardEvents: f,
-    ref: a
-  }), v = C.flatMap((n, t) => {
+    ref: c
+  }), v = _.flatMap((n, t) => {
     var i;
-    const e = (n == null ? void 0 : n.props) || {}, { title: r } = e, c = ((i = n == null ? void 0 : n.items) == null ? void 0 : i.filter((s) => {
-      var m;
-      return !((m = s.props) != null && m.hidden);
+    const e = (n == null ? void 0 : n.props) || {}, { title: r } = e, a = ((i = n == null ? void 0 : n.items) == null ? void 0 : i.filter((s) => {
+      var l;
+      return !((l = s.props) != null && l.hidden);
     })) || [];
     return [
-      ...t > 0 || R > 0 ? [{ type: "separator" }] : [],
+      ...t > 0 || E > 0 ? [{ type: "separator" }] : [],
       ...r ? [{ type: "title", title: r }] : [],
-      ...c.map((s, m) => {
+      ...a.map((s, l) => {
         var p, o;
         return {
           type: "item",
           itemProps: s.props || {},
           active: s.active,
           hasChildren: ((p = s.props) == null ? void 0 : p.expanded) && ((o = s.props) == null ? void 0 : o.items),
-          isLastItem: m === c.length - 1
+          isLastItem: l === a.length - 1
         };
       })
     ];
-  }), d = _({
+  }), d = k({
     count: v.length,
     gap: 8,
     estimateSize: () => 44,
-    getScrollElement: () => a.current
+    getScrollElement: () => c.current
   }), h = d.getVirtualItems();
-  x(() => {
+  y(() => {
     var n, t, e;
     for (const r of h) {
-      const c = ((n = a.current) == null ? void 0 : n.querySelector(`[data-index="${r.index}"]`)) ?? ((t = a.current) == null ? void 0 : t.querySelector(`[dataindex="${r.index}"]`)) ?? ((e = a.current) == null ? void 0 : e.querySelector(`[dataIndex="${r.index}"]`));
-      c && d.measureElement(c);
+      const a = ((n = c.current) == null ? void 0 : n.querySelector(`[data-index="${r.index}"]`)) ?? ((t = c.current) == null ? void 0 : t.querySelector(`[dataindex="${r.index}"]`)) ?? ((e = c.current) == null ? void 0 : e.querySelector(`[dataIndex="${r.index}"]`));
+      a && d.measureElement(a);
     }
   }, [h]);
-  const u = M(!1);
-  return x(() => {
+  const u = R(!1);
+  return y(() => {
     const n = (r) => {
       (r.key === "ArrowDown" || r.key === "ArrowUp") && (u.current = !0);
     }, t = () => {
       u.current = !1;
     };
     document.addEventListener("keydown", n, !0);
-    const e = a.current;
+    const e = c.current;
     return e == null || e.addEventListener("wheel", t, { passive: !0 }), e == null || e.addEventListener("mousedown", t, !0), e == null || e.addEventListener("mousemove", t, !0), e == null || e.addEventListener("touchstart", t, { passive: !0 }), () => {
       document.removeEventListener("keydown", n, !0), e == null || e.removeEventListener("wheel", t), e == null || e.removeEventListener("mousedown", t), e == null || e.removeEventListener("mousemove", t), e == null || e.removeEventListener("touchstart", t);
     };
-  }, []), x(() => {
+  }, []), y(() => {
     if (!f || !u.current) return;
-    const n = a.current;
+    const n = c.current;
     if (!n) return;
     const t = 6, e = v.findIndex((o) => o.type === "item" && o.active);
     if (e < 0) return;
-    const r = (o) => (n.querySelector(`[data-index="${o}"]`) || n.querySelector(`[dataindex="${o}"]`) || n.querySelector(`[dataIndex="${o}"]`)) ?? null, c = r(e);
-    if (!c) {
+    const r = (o) => (n.querySelector(`[data-index="${o}"]`) || n.querySelector(`[dataindex="${o}"]`) || n.querySelector(`[dataIndex="${o}"]`)) ?? null, a = r(e);
+    if (!a) {
       d.scrollToIndex(e, { align: "auto" }), u.current = !1;
       return;
     }
-    const i = n.getBoundingClientRect(), s = c.getBoundingClientRect(), m = r(e - 1), p = r(e + 1);
+    const i = n.getBoundingClientRect(), s = a.getBoundingClientRect(), l = r(e - 1), p = r(e + 1);
     if (p) {
       const o = p.getBoundingClientRect();
       if (o.bottom > i.bottom) {
@@ -106,16 +110,16 @@ import '../../assets/MenuItemsVirtual.css';const U = "_virtualScrollRef_nmoqo_1"
         return;
       }
     }
-    if (m) {
-      const o = m.getBoundingClientRect();
+    if (l) {
+      const o = l.getBoundingClientRect();
       if (o.top < i.top) {
         n.scrollTop -= i.top - o.top + t, u.current = !1;
         return;
       }
     }
     s.top < i.top + t ? n.scrollTop -= i.top + t - s.top : s.bottom > i.bottom - t && (n.scrollTop += s.bottom - (i.bottom - t)), u.current = !1;
-  }, [v, f, d]), /* @__PURE__ */ l(j, { children: /* @__PURE__ */ S("div", { ref: a, className: E.virtualScrollRef, style: B, children: [
-    g && /* @__PURE__ */ l(
+  }, [v, f, d]), /* @__PURE__ */ m(N, { children: /* @__PURE__ */ L("div", { ref: c, className: M.virtualScrollRef, style: C, children: [
+    g && /* @__PURE__ */ m(
       "div",
       {
         style: {
@@ -124,10 +128,10 @@ import '../../assets/MenuItemsVirtual.css';const U = "_virtualScrollRef_nmoqo_1"
           zIndex: 10,
           marginTop: "-0.5rem"
         },
-        children: /* @__PURE__ */ l(V, { ...g })
+        children: /* @__PURE__ */ m(W, { ...g })
       }
     ),
-    /* @__PURE__ */ l(
+    /* @__PURE__ */ m(
       "div",
       {
         style: {
@@ -136,17 +140,17 @@ import '../../assets/MenuItemsVirtual.css';const U = "_virtualScrollRef_nmoqo_1"
         },
         children: h.map((n) => {
           const t = v[n.index];
-          return t ? /* @__PURE__ */ S(
-            N,
+          return t ? /* @__PURE__ */ L(
+            U,
             {
               dataIndex: n.index,
-              className: E.virtualMenuListItem,
+              className: M.virtualMenuListItem,
               style: { transform: `translateY(${n.start}px)` },
               role: t.type === "separator" ? "separator" : void 0,
               children: [
-                t.type === "title" && /* @__PURE__ */ l(W, { title: t.title }),
-                t.type === "item" && /* @__PURE__ */ l(
-                  K,
+                t.type === "title" && /* @__PURE__ */ m(j, { title: t.title }),
+                t.type === "item" && /* @__PURE__ */ m(
+                  V,
                   {
                     ...t.itemProps,
                     size: t.itemProps.size || P,
@@ -167,5 +171,5 @@ import '../../assets/MenuItemsVirtual.css';const U = "_virtualScrollRef_nmoqo_1"
   ] }) });
 };
 export {
-  re as MenuItemsVirtual
+  se as MenuItemsVirtual
 };

package/dist/types/lib/components/Account/AccountMenu.d.ts

@@ -18,4 +18,4 @@ export interface AccountMenuProps extends MenuProps {
     scrollRefStyles?: CSSProperties;
     keyboardEvents?: boolean;
 }
-export declare const AccountMenu: ({ items, groups, search, filterAccount, onSelectAccount, currentAccount, isVirtualized, keyboardEvents, }: AccountMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccountMenu: ({ items, groups, search, filterAccount, onSelectAccount, currentAccount, isVirtualized, keyboardEvents, scrollRefStyles, }: AccountMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Account/AccountMenu.stories.d.ts

@@ -1,7 +1,7 @@
 import { AccountMenuProps } from '..';
 declare const meta: {
     title: string;
-    component: ({ items, groups, search, filterAccount, onSelectAccount, currentAccount, isVirtualized, keyboardEvents, }: AccountMenuProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ items, groups, search, filterAccount, onSelectAccount, currentAccount, isVirtualized, keyboardEvents, scrollRefStyles, }: AccountMenuProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: AccountMenuProps;

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

@@ -1,5 +1,6 @@
 export interface SymbolProps {
     className?: string;
     title?: string;
+    'aria-hidden'?: boolean;
 }
-export declare const DigdirLogomark: ({ className, title }: SymbolProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DigdirLogomark: ({ className, title, "aria-hidden": ariaHidden }: SymbolProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -25,3 +25,4 @@ export declare const ForcedFullScreenAccountSelection: () => import("react/jsx-r
 export declare const WithCustomBadge: () => import("react/jsx-runtime").JSX.Element;
 export declare const Loading: () => import("react/jsx-runtime").JSX.Element;
 export declare const LoadingWithForcedFullScreenAccountSelection: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithVirtualizationEnabled: () => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,5 @@
 import { ElementType, MouseEventHandler } from 'react';
-import { BadgeProps } from '../Badge/Badge.tsx';
+import { BadgeProps } from '../Badge';
 export interface HeaderLogoProps {
     className?: string;
     as?: ElementType;

package/dist/types/lib/components/Header/Header.d.ts

@@ -1,6 +1,6 @@
 import { HeaderLogoProps, MenuProps } from '../';
 import { BadgeProps } from '../Badge';
-import { GlobalMenuProps_old, Account } from '../GlobalMenu_old/index.tsx';
+import { GlobalMenuProps_old, Account } from '../GlobalMenu_old';
 import { SearchbarProps } from '../Searchbar';
 import { LocaleSwitcherProps } from './';
 export interface HeaderProps {

package/dist/types/lib/components/Menu/Menu.d.ts

@@ -7,4 +7,4 @@ export interface MenuProps extends MenuItemsProps {
     isVirtualized?: boolean;
     keyboardEvents?: boolean;
 }
-export declare const Menu: ({ color, variant, defaultItemColor, defaultItemVariant, defaultItemSize, defaultIconTheme, groups, items, search, isVirtualized, keyboardEvents, }: MenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Menu: ({ color, variant, defaultItemColor, defaultItemVariant, defaultItemSize, defaultIconTheme, groups, items, search, isVirtualized, keyboardEvents, scrollRefStyles, }: MenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Menu/Menu.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ color, variant, defaultItemColor, defaultItemVariant, defaultItemSize, defaultIconTheme, groups, items, search, isVirtualized, keyboardEvents, }: import('./Menu').MenuProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ color, variant, defaultItemColor, defaultItemVariant, defaultItemSize, defaultIconTheme, groups, items, search, isVirtualized, keyboardEvents, scrollRefStyles, }: import('./Menu').MenuProps) => import("react/jsx-runtime").JSX.Element;
     parameters: {};
     args: {};
 };

package/dist/types/lib/components/Menu/MenuItems.d.ts

@@ -23,5 +23,6 @@ export interface MenuItemsProps {
     as?: ElementType;
     keyboardEvents?: boolean;
     onSelect?: () => void;
+    scrollRefStyles?: React.CSSProperties;
 }
 export declare const MenuItems: ({ level, expanded, search, items, groups, defaultItemSize, defaultItemColor, defaultItemVariant, defaultIconTheme, as, keyboardEvents, onSelect, }: MenuItemsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Menu/MenuItemsVirtual.d.ts

@@ -1,2 +1,2 @@
 import { MenuItemsProps } from './MenuItems';
-export declare const MenuItemsVirtual: ({ level, search, items, groups, defaultItemSize, defaultItemColor, defaultItemVariant, defaultIconTheme, keyboardEvents, }: MenuItemsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuItemsVirtual: ({ level, search, items, groups, defaultItemSize, defaultItemColor, defaultItemVariant, defaultIconTheme, keyboardEvents, scrollRefStyles: externalScrollRefStyles, }: MenuItemsProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

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