@altinn/altinn-components 0.66.0 → 0.67.0

package/dist/assets/AccountSelector.css

@@ -1 +1 @@
-._accountSelector_stjza_1{display:flex;flex-direction:column;align-items:center;padding:1rem 0;max-width:1000px;margin:0 auto;--horizontal-padding: .7rem}._heading_stjza_11{margin-bottom:.5rem;width:100%;padding:0 var(--horizontal-padding)}._searchSection_stjza_17{position:sticky;z-index:2;top:1rem;width:100%;padding:.5rem var(--horizontal-padding);display:flex;align-items:center;gap:1rem;margin-bottom:.75rem;background-color:#fff}._searchField_stjza_30{width:50%}._accountMenu_stjza_34{height:fit-content;width:100%;overflow-y:auto;margin-bottom:1rem;padding:0 var(--horizontal-padding)}._accountMenu_stjza_34._virtualized_stjza_42{overflow-y:hidden}._btnIcon_stjza_47{font-size:1.5rem}._spinner_stjza_51{margin:auto;width:100%;overflow:hidden}@media(max-width:1023px){._accountSelector_stjza_1{--horizontal-padding: .1rem}._searchField_stjza_30{width:100%}._searchSection_stjza_17{flex-direction:column;align-items:stretch;gap:.5rem}}
+._accountSelector_ttjvg_1{display:flex;flex-direction:column;align-items:center;padding:1rem 0;max-width:1000px;margin:0 auto;--horizontal-padding: .7rem}._heading_ttjvg_11{margin-bottom:.5rem;width:100%;padding:0 var(--horizontal-padding)}._searchSection_ttjvg_17{position:sticky;z-index:2;top:0;width:100%;padding:1rem var(--horizontal-padding) .5rem;display:flex;align-items:center;gap:1rem;margin-bottom:.75rem;background-color:#fff}._searchField_ttjvg_30{width:50%}._accountMenu_ttjvg_34{height:fit-content;width:100%;overflow-y:auto;margin-bottom:1rem;padding:0 var(--horizontal-padding)}._accountMenu_ttjvg_34._virtualized_ttjvg_42{overflow-y:hidden}._btnIcon_ttjvg_47{font-size:1.5rem}._spinner_ttjvg_51{margin:auto;width:100%;overflow:hidden}@media(max-width:1023px){._accountSelector_ttjvg_1{--horizontal-padding: .1rem}._searchField_ttjvg_30{width:100%}._searchSection_ttjvg_17{flex-direction:column;align-items:stretch;gap:.5rem}}

package/dist/assets/GlobalHeader.css

@@ -1 +1 @@
-._header_1iojv_1{z-index:1;background-color:#fff;width:100%}._container_1iojv_7{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding:.625rem;width:100%;max-width:1512px;margin:0 auto}._backdrop_1iojv_19{display:none}._header_1iojv_1[data-current-id=menu],._header_1iojv_1[data-current-id=locale]{background-color:#fff}@media(min-width:1024px){._header_1iojv_1[data-current-id=menu] ._backdrop_1iojv_19,._header_1iojv_1[data-current-id=locale] ._backdrop_1iojv_19{display:block}}@media(max-width:1023px){._header_1iojv_1{gap:0}}._header_1iojv_1{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}._nav_1iojv_53{position:relative;display:flex;align-items:center;justify-content:end;column-gap:1rem}
+._header_17ppp_1{z-index:1;background-color:#fff;width:100%}._container_17ppp_7{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding:.625rem;width:100%;max-width:1512px;margin:0 auto}._backdrop_17ppp_19{display:none}._header_17ppp_1[data-current-id=menu],._header_17ppp_1[data-current-id=locale]{background-color:#fff}@media(min-width:1024px){._header_17ppp_1[data-current-id=menu] ._backdrop_17ppp_19,._header_17ppp_1[data-current-id=locale] ._backdrop_17ppp_19{display:block}}@media(max-width:1023px){._header_17ppp_1{gap:0}}._header_17ppp_1{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}._nav_17ppp_53{position:relative;display:flex;align-items:center;justify-content:end;column-gap:1rem;width:100%}._logo_17ppp_62{margin-right:auto}

package/dist/components/AccountSelector/AccountSelector.js

@@ -1,96 +1,97 @@
-import { jsx as c, jsxs as g } from "react/jsx-runtime";
-import { c as p } from "../../index-p1eeF8LQ.js";
-import { useState as o, useRef as C, useEffect as v } from "react";
-import { AccountMenu as T } from "../Account/AccountMenu.js";
-import { r as y, H as F } from "../../tooltip-Ct39-719.js";
+import { jsx as a, jsxs as p } from "react/jsx-runtime";
+import { c as _ } from "../../index-p1eeF8LQ.js";
+import { useState as i, useRef as R, useEffect as b } from "react";
+import { AccountMenu as y } from "../Account/AccountMenu.js";
+import { r as F, H as I } from "../../tooltip-Ct39-719.js";
 import "../Typography/Link.js";
 import "../Button/Button.js";
 import "react-dom";
-import { w as H, S as R } from "../../ToolbarSearch-DFYx6gIb.js";
+import { w as E, S as M } from "../../ToolbarSearch-DFYx6gIb.js";
 import "../GlobalMenu/GlobalMenuBase.js";
 import "../Snackbar/useSnackbar.js";
-import { Switch as I } from "../Forms/Switch.js";
-import '../../assets/AccountSelector.css';const M = "_accountSelector_stjza_1", E = "_heading_stjza_11", V = "_searchSection_stjza_17", $ = "_searchField_stjza_30", K = "_accountMenu_stjza_34", O = "_virtualized_stjza_42", W = "_spinner_stjza_51", a = {
-  accountSelector: M,
-  heading: E,
-  searchSection: V,
-  searchField: $,
-  accountMenu: K,
-  virtualized: O,
-  spinner: W
-}, ae = ({
+import { Switch as O } from "../Forms/Switch.js";
+import '../../assets/AccountSelector.css';const V = "_accountSelector_ttjvg_1", W = "_heading_ttjvg_11", $ = "_searchSection_ttjvg_17", K = "_searchField_ttjvg_30", U = "_accountMenu_ttjvg_34", X = "_virtualized_ttjvg_42", q = "_spinner_ttjvg_51", c = {
+  accountSelector: V,
+  heading: W,
+  searchSection: $,
+  searchField: K,
+  accountMenu: U,
+  virtualized: X,
+  spinner: q
+}, B = 5, oe = ({
   accountMenu: e,
   forceOpenFullScreen: n,
   className: r,
-  loading: _,
+  loading: A,
   showDeletedUnits: l,
-  onShowDeletedUnitsChange: b,
-  isFullScreen: z
+  onShowDeletedUnitsChange: w,
+  isFullScreen: x,
+  accountCount: j
 }) => {
-  const { closeAll: u, languageCode: d, currentId: x } = H(), s = x === "account" || !!n, [h, m] = o(""), [j, S] = o(n), [k, w] = o(0), f = C(s);
-  v(() => {
-    s && !f.current && w((t) => t + 1), f.current = s;
-  }, [s]), v(() => {
-    !n && j && u(), S(n);
+  const { closeAll: u, languageCode: d, currentId: k } = E(), s = k === "account" || !!n, h = (j ?? e.items.length) > B, g = l !== void 0, [m, v] = i(""), [C, S] = i(n), [N, T] = i(0), f = R(s);
+  b(() => {
+    s && !f.current && T((t) => t + 1), f.current = s;
+  }, [s]), b(() => {
+    !n && C && u(), S(n);
   }, [n]);
-  const { searchText: i, heading: A, switchLabel: N } = q(d), L = (t) => {
+  const { searchText: o, heading: z, switchLabel: L } = D(d), H = (t) => {
     e.onSelectAccount?.(t), u(), S(!1);
   };
-  return _ ? /* @__PURE__ */ c(y, { "aria-hidden": !0, "data-color": "neutral", className: a.spinner }) : /* @__PURE__ */ g("div", { className: p(r, a.accountSelector), children: [
-    /* @__PURE__ */ c(F, { "data-size": "sm", level: 2, className: a.heading, id: "account-selector-heading", children: A }),
-    /* @__PURE__ */ g("div", { className: a.searchSection, children: [
-      /* @__PURE__ */ c(
-        R,
+  return A ? /* @__PURE__ */ a(F, { "aria-hidden": !0, "data-color": "neutral", className: c.spinner }) : /* @__PURE__ */ p("div", { className: _(r, c.accountSelector), children: [
+    /* @__PURE__ */ a(I, { "data-size": "sm", level: 2, className: c.heading, id: "account-selector-heading", children: z }),
+    (h || g) && /* @__PURE__ */ p("div", { className: c.searchSection, children: [
+      h && /* @__PURE__ */ a(
+        M,
         {
           size: "sm",
           "aria-labelledby": "account-selector-heading",
-          label: i,
+          label: o,
           hideLabel: !0,
-          name: i,
-          placeholder: i,
-          value: h,
-          onChange: (t) => m(t.target.value),
-          onClear: () => m(""),
-          className: a.searchField
+          name: o,
+          placeholder: o,
+          value: m,
+          onChange: (t) => v(t.target.value),
+          onClear: () => v(""),
+          className: c.searchField
         }
       ),
-      l !== void 0 && /* @__PURE__ */ c(
-        I,
+      g && /* @__PURE__ */ a(
+        O,
         {
           size: "sm",
           checked: l,
-          onChange: (t) => b?.(t.target.checked),
-          label: N
+          onChange: (t) => w?.(t.target.checked),
+          label: L
         }
       )
     ] }),
-    /* @__PURE__ */ c(
+    /* @__PURE__ */ a(
       "div",
       {
-        className: p(
-          a.accountMenu,
-          z && a.fullScreen,
-          e.virtualized && a.virtualized
+        className: _(
+          c.accountMenu,
+          x && c.fullScreen,
+          e.virtualized && c.virtualized
         ),
-        children: /* @__PURE__ */ c(
-          T,
+        children: /* @__PURE__ */ a(
+          y,
           {
             ...e,
-            onSelectAccount: L,
+            onSelectAccount: H,
             keyboardEvents: !1,
             search: {
               hidden: !0,
               name: "",
-              value: h,
-              getResultsLabel: (t) => B(t, d)
+              value: m,
+              getResultsLabel: (t) => G(t, d)
             }
           },
-          k
+          N
         )
       }
     )
   ] });
-}, q = (e) => {
+}, D = (e) => {
   switch (e) {
     case "nn":
       return {
@@ -111,10 +112,10 @@ import '../../assets/AccountSelector.css';const M = "_accountSelector_stjza_1",
         switchLabel: "Vis slettede"
       };
   }
-}, B = (e, n) => {
+}, G = (e, n) => {
   const r = n === "nb" || n === "nn";
   return e === 0 ? r ? "Ingen treff" : "No hits" : r ? `${e} treff` : e === 1 ? "1 hit" : `${e} hits`;
 };
 export {
-  ae as AccountSelector
+  oe as AccountSelector
 };

package/dist/components/GlobalHeader/DigdirLogomark.js

@@ -1,5 +1,5 @@
-import { jsxs as o, jsx as C } from "react/jsx-runtime";
-const e = ({ className: r, title: i = "Digdir logo" }) => /* @__PURE__ */ o(
+import { jsxs as e, jsx as C } from "react/jsx-runtime";
+const t = ({ className: r, title: i = "Digdir logo" }) => /* @__PURE__ */ e(
   "svg",
   {
     width: "1em",
@@ -8,6 +8,7 @@ const e = ({ className: r, title: i = "Digdir logo" }) => /* @__PURE__ */ o(
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg",
     className: r,
+    "aria-hidden": "true",
     children: [
       /* @__PURE__ */ C("title", { children: i }),
       /* @__PURE__ */ C(
@@ -21,5 +22,5 @@ const e = ({ className: r, title: i = "Digdir logo" }) => /* @__PURE__ */ o(
   }
 );
 export {
-  e as DigdirLogomark
+  t as DigdirLogomark
 };

package/dist/components/GlobalHeader/GlobalHeader.js

@@ -1,98 +1,97 @@
 "use client";
-import { jsx as n, jsxs as i, Fragment as A } from "react/jsx-runtime";
-import { useState as O } from "react";
+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 { GlobalMenu as w } from "../GlobalMenu/GlobalMenu.js";
+import { GlobalMenu as C } from "../GlobalMenu/GlobalMenu.js";
 import "../../index-p1eeF8LQ.js";
 import "../../tooltip-Ct39-719.js";
 import "../Typography/Link.js";
 import "../Button/Button.js";
 import "react-dom";
-import { w as C } from "../../ToolbarSearch-DFYx6gIb.js";
+import { w } from "../../ToolbarSearch-DFYx6gIb.js";
 import { GlobalMenuButton as D } from "./GlobalMenuButton.js";
 import { GlobalAccountButton as M } from "./GlobalAccountButton.js";
 import "../Snackbar/useSnackbar.js";
 import { HeaderDrawer as N } from "./HeaderDrawer.js";
-import { HeaderDropdown as j } from "./HeaderDropdown.js";
-import { HeaderLogo as E } from "./HeaderLogo.js";
-import '../../assets/GlobalHeader.css';const I = "_header_1iojv_1", T = "_container_1iojv_7", k = "_nav_1iojv_53", t = {
-  header: I,
-  container: T,
-  nav: k
-}, B = 5, Z = ({
+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 = {
+  header: T,
+  container: k,
+  nav: B,
+  logo: G
+}, H = 5, $ = ({
   globalMenu: r,
-  desktopMenu: d,
-  mobileMenu: m,
-  locale: p,
+  desktopMenu: s,
+  mobileMenu: d,
+  locale: m,
   accountSelector: e,
   logo: u = {},
   badge: f,
-  onLoginClick: h
+  onLoginClick: g
 }) => {
-  const { currentId: o, toggleId: c, closeAll: a } = C(), g = () => {
-    o !== "account" && window.scrollTo({ top: 0, behavior: "instant" }), c("account");
+  const { currentId: o, toggleId: l, closeAll: a } = w(), h = () => {
+    o !== "account" && window.scrollTo({ top: 0, behavior: "instant" }), l("account");
   }, _ = () => {
-    c("menu");
-  }, l = o === "account" || e?.forceOpenFullScreen || !1, [s, v] = O(!1), x = F();
-  return /* @__PURE__ */ n("header", { className: t.header, "data-current-id": o, children: /* @__PURE__ */ i("div", { className: t.container, children: [
-    /* @__PURE__ */ n(E, { ...u, badge: f, className: t.logo }),
-    /* @__PURE__ */ i("nav", { className: t.nav, children: [
-      e && /* @__PURE__ */ i(A, { children: [
-        /* @__PURE__ */ n(
-          M,
+    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: [
+      /* @__PURE__ */ n(
+        M,
+        {
+          currentAccount: e.accountMenu?.currentAccount,
+          onClick: e.accountMenu?.currentAccount ? h : g,
+          expanded: p,
+          loading: e.loading,
+          disabled: e.forceOpenFullScreen
+        }
+      ),
+      /* @__PURE__ */ n(
+        N,
+        {
+          id: "header-account",
+          open: p,
+          onClose: a,
+          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 })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ n(
+      E,
+      {
+        id: "header-menu",
+        open: o === "menu",
+        onClose: a,
+        trigger: /* @__PURE__ */ n(
+          D,
           {
-            currentAccount: e.accountMenu?.currentAccount,
-            onClick: e.accountMenu?.currentAccount ? g : h,
-            expanded: l,
-            loading: e.loading,
-            disabled: e.forceOpenFullScreen
+            onClick: _,
+            expanded: o === "menu",
+            disabled: e?.forceOpenFullScreen,
+            label: r?.menuLabel
           }
         ),
-        /* @__PURE__ */ n(
-          N,
+        children: /* @__PURE__ */ n(
+          C,
           {
-            id: "header-account",
-            open: l,
+            ...r,
+            menu: A ? s || r?.menu : d || r?.menu,
             onClose: a,
-            closedBy: e?.forceOpenFullScreen ? "none" : "any",
-            expanded: e?.forceOpenFullScreen || s,
-            onToggle: () => v(!s),
-            expandable: e.accountMenu.items.length > B,
-            children: /* @__PURE__ */ n(b, { ...e, forceOpenFullScreen: e.forceOpenFullScreen })
+            localeSwitcher: m,
+            isOpen: o === "menu"
           }
         )
-      ] }),
-      /* @__PURE__ */ n(
-        j,
-        {
-          id: "header-menu",
-          open: o === "menu",
-          onClose: a,
-          trigger: /* @__PURE__ */ n(
-            D,
-            {
-              onClick: _,
-              expanded: o === "menu",
-              disabled: e?.forceOpenFullScreen,
-              label: r?.menuLabel
-            }
-          ),
-          children: /* @__PURE__ */ n(
-            w,
-            {
-              ...r,
-              menu: x ? d || r?.menu : m || r?.menu,
-              onClose: a,
-              localeSwitcher: p,
-              isOpen: o === "menu"
-            }
-          )
-        }
-      )
-    ] })
-  ] }) });
+      }
+    )
+  ] }) }) });
 };
 export {
-  Z as GlobalHeader
+  $ as GlobalHeader
 };

package/dist/components/GlobalHeader/HeaderLogo.js

@@ -1,29 +1,23 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import { c as l } from "../../index-p1eeF8LQ.js";
-import { w as c, B as g } from "../../ToolbarSearch-DFYx6gIb.js";
-import { Button as p } from "../Button/Button.js";
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { c as n } from "../../index-p1eeF8LQ.js";
+import { B as l } from "../../ToolbarSearch-DFYx6gIb.js";
+import { Button as e } from "../Button/Button.js";
 import "react";
 import "../../tooltip-Ct39-719.js";
 import "../Typography/Link.js";
 import "react-dom";
 import "../GlobalMenu/GlobalMenuBase.js";
 import "../Snackbar/useSnackbar.js";
-import { DigdirLogomark as x } from "./DigdirLogomark.js";
-import '../../assets/HeaderLogo.css';const d = "_logo_1yxnd_1", _ = "_logomark_1yxnd_16", f = "_text_1yxnd_23", t = {
-  logo: d,
-  logomark: _,
-  text: f
-}, k = {
-  nn: "Gå til framsida",
-  en: "Go to homepage"
-}, v = ({ className: s, as: m = "a", href: n = "/", badge: r }) => {
-  const { languageCode: a } = c(), e = k[a ?? ""] ?? "Gå til forsiden";
-  return /* @__PURE__ */ i(p, { variant: "ghost", as: m, className: l(t.logo, s), href: n, title: e, children: [
-    /* @__PURE__ */ o(x, { className: t.logomark }),
-    /* @__PURE__ */ o("span", { className: t.text, children: "Altinn" }),
-    r && /* @__PURE__ */ o(g, { ...r })
-  ] });
-};
+import { DigdirLogomark as g } from "./DigdirLogomark.js";
+import '../../assets/HeaderLogo.css';const p = "_logo_1yxnd_1", x = "_logomark_1yxnd_16", c = "_text_1yxnd_23", o = {
+  logo: p,
+  logomark: x,
+  text: c
+}, v = ({ className: m, as: s = "a", href: i = "/", badge: t }) => /* @__PURE__ */ a(e, { variant: "ghost", as: s, className: n(o.logo, o.text, m), href: i, children: [
+  /* @__PURE__ */ r(g, { className: o.logomark }),
+  "Altinn",
+  t && /* @__PURE__ */ r(l, { ...t })
+] });
 export {
   v as HeaderLogo
 };

package/dist/hooks/useAccountSelector.js

@@ -1,112 +1,118 @@
-import { jsx as S } from "react/jsx-runtime";
-import { useRef as x, useMemo as z } from "react";
+import { jsx as F } from "react/jsx-runtime";
+import { useRef as R, useMemo as h } from "react";
 import "../index-p1eeF8LQ.js";
 import "../tooltip-Ct39-719.js";
 import "../ToolbarSearch-DFYx6gIb.js";
 import "../components/Typography/Link.js";
-import { Button as G } from "../components/Button/Button.js";
+import { Button as q } from "../components/Button/Button.js";
 import "react-dom";
-import { useIsDesktop as Y } from "./useIsDesktop.js";
+import { useIsDesktop as J } from "./useIsDesktop.js";
 import "../components/GlobalMenu/GlobalMenuBase.js";
 import "../components/Snackbar/useSnackbar.js";
-import { formatDisplayName as R } from "../functions/name/name.js";
-import { formatDate as q } from "../functions/date/date.js";
-import { formatOrgNo as j } from "../functions/orgno/orgno.js";
-import { a as J, S as K } from "../HeartFill-CbQmSZr5.js";
-const H = (o) => o === "Organization" ? "company" : "person", dt = ({
-  partyListDTO: o = [],
-  favoriteAccountUuids: e,
+import { formatDisplayName as j } from "../functions/name/name.js";
+import { formatDate as K } from "../functions/date/date.js";
+import { formatOrgNo as w } from "../functions/orgno/orgno.js";
+import { a as Q, S as X } from "../HeartFill-CbQmSZr5.js";
+const H = (e) => e === "Organization" ? "company" : "person", pt = ({
+  partyListDTO: e = [],
+  favoriteAccountUuids: o,
   currentAccountUuid: f,
-  selfAccountUuid: m,
-  isLoading: d = !1,
+  selfAccountUuid: d,
+  isLoading: m = !1,
   onSelectAccount: N,
   virtualized: p = !1,
-  onToggleFavorite: h,
-  languageCode: n,
-  showDeletedUnits: i,
-  onShowDeletedUnitsChange: _
+  onToggleFavorite: I,
+  languageCode: s,
+  showDeletedUnits: c,
+  onShowDeletedUnitsChange: g
 }) => {
-  const v = Y(), c = x(h);
-  c.current = h;
-  const g = x(f);
-  g.current = f;
-  const y = z(() => {
-    if (!o || o.length === 0) return [];
-    const a = n || "nb", s = (r, l) => r.name.localeCompare(l.name, a, {
+  const v = J(), u = R(I);
+  u.current = I;
+  const _ = R(f);
+  _.current = f;
+  const y = h(() => {
+    if (!e || e.length === 0) return [];
+    const i = s || "nb", r = (n, l) => n.name.localeCompare(l.name, i, {
       sensitivity: "base",
       ignorePunctuation: !0
     });
-    return [...o].sort(s);
-  }, [o, n]), [O, V] = z(() => {
-    if (d || !y.length || !m)
+    return [...e].sort(r);
+  }, [e, s]), $ = h(
+    () => e.some((i) => i.isDeleted || i.subunits?.some((r) => r.isDeleted)),
+    [e]
+  ), V = h(
+    () => e.reduce((i, r) => i + 1 + (r.subunits?.length ?? 0), 0),
+    [e]
+  ), [D, W] = h(() => {
+    if (m || !y.length || !d)
       return [
         { selfAccountItem: void 0, peopleAccountItems: [], organizationAccountItems: [], favoriteAccountItems: [] },
         {}
       ];
-    const a = new Set(e), s = (t) => a.has(t), r = (t) => !t.isDeleted || i !== !1 || t.partyUuid === g.current, l = M(n), I = n || "nb", w = (t, u) => t.name.localeCompare(u.name, I, {
+    const i = new Set(o), r = (t) => i.has(t), n = (t) => !t.isDeleted || c !== !1 || t.partyUuid === _.current, l = M(s), A = s || "nb", G = (t, a) => t.name.localeCompare(a.name, A, {
       sensitivity: "base",
       ignorePunctuation: !0
     });
-    let B;
-    const k = [], A = [], U = [];
+    let x;
+    const k = [], U = [], S = [];
     for (const t of y)
-      if (X(t.type)) {
-        if (t.partyUuid === m)
-          B = F(
-            n,
+      if (T(t.type)) {
+        if (t.partyUuid === d)
+          x = z(
+            s,
             t,
             "favorites",
             !1,
-            c,
+            u,
             v,
             void 0,
             !0
           );
-        else if (r(t) || s(t.partyUuid)) {
-          const u = F(
-            n,
+        else if (n(t) || r(t.partyUuid)) {
+          const a = z(
+            s,
             t,
             t.partyUuid,
-            s(t.partyUuid),
-            c,
+            r(t.partyUuid),
+            u,
             v
           );
-          k.push(u), s(t.partyUuid) && U.push({ ...u, groupId: "favorites" });
+          k.push(a), r(t.partyUuid) && S.push({ ...a, groupId: "favorites" });
         }
-      } else if (T(t.type)) {
-        if (r(t) || s(t.partyUuid)) {
-          const u = F(
-            n,
+      } else if (C(t.type)) {
+        if (n(t) || r(t.partyUuid)) {
+          const a = z(
+            s,
             t,
             t.partyUuid,
-            s(t.partyUuid),
-            c,
+            r(t.partyUuid),
+            u,
             v
           );
-          r(t) && A.push(u), s(t.partyUuid) && U.push({ ...u, groupId: "favorites" });
+          n(t) && U.push(a), r(t.partyUuid) && S.push({ ...a, groupId: "favorites" });
         }
         if (t.subunits && t.subunits.length > 0) {
-          const u = [...t.subunits].sort(w);
-          for (const b of u)
-            if (r(b) || s(b.partyUuid)) {
-              const D = F(
-                n,
+          const a = [...t.subunits].sort(G);
+          for (const b of a)
+            if (n(b) || r(b.partyUuid)) {
+              const O = z(
+                s,
                 b,
                 t.partyUuid,
-                s(b.partyUuid),
-                c,
+                r(b.partyUuid),
+                u,
                 v,
                 t
               );
-              r(b) && A.push(D), s(b.partyUuid) && U.push({
-                ...D,
+              n(b) && U.push(O), r(b.partyUuid) && S.push({
+                ...O,
                 groupId: "favorites"
               });
             }
         }
       }
-    const E = {
-      [A[0]?.groupId || "company"]: {
+    const Y = {
+      [U[0]?.groupId || "company"]: {
         title: l.account_orgs,
         divider: !0
       },
@@ -119,23 +125,23 @@ const H = (o) => o === "Organization" ? "company" : "person", dt = ({
         divider: !0
       }
     };
-    return [{ selfAccountItem: B, peopleAccountItems: k, organizationAccountItems: A, favoriteAccountItems: U }, E];
-  }, [y, m, e, d, n, v, i]), P = z(() => {
-    const { selfAccountItem: a, peopleAccountItems: s, organizationAccountItems: r, favoriteAccountItems: l } = O;
-    return a ? [a, ...l, ...s, ...r] : [];
-  }, [O]), [W, $] = z(() => {
+    return [{ selfAccountItem: x, peopleAccountItems: k, organizationAccountItems: U, favoriteAccountItems: S }, Y];
+  }, [y, d, o, m, s, v, c]), P = h(() => {
+    const { selfAccountItem: i, peopleAccountItems: r, organizationAccountItems: n, favoriteAccountItems: l } = D;
+    return i ? [i, ...l, ...r, ...n] : [];
+  }, [D]), [E, B] = h(() => {
     if (P.length === 0)
       return [[], void 0];
-    let a;
-    return [P.map((r) => {
-      if (f === r.id) {
-        const I = { ...r, selected: !0 };
-        return a = I, I;
+    let i;
+    return [P.map((n) => {
+      if (f === n.id) {
+        const A = { ...n, selected: !0 };
+        return i = A, A;
       }
-      return r.selected ? { ...r, selected: !1 } : r;
-    }), a];
+      return n.selected ? { ...n, selected: !1 } : n;
+    }), i];
   }, [P, f]);
-  return d || !o || !$ ? {
+  return m || !e || !B ? {
     accountMenu: {
       items: [],
       groups: {},
@@ -144,89 +150,90 @@ const H = (o) => o === "Organization" ? "company" : "person", dt = ({
       },
       currentAccount: void 0
     },
-    loading: d
+    loading: m
   } : {
     accountMenu: {
-      items: W,
-      groups: V,
+      items: E,
+      groups: W,
       virtualized: p,
       onSelectAccount: N,
-      currentAccount: $
+      currentAccount: B
     },
     loading: !1,
-    showDeletedUnits: i,
-    onShowDeletedUnitsChange: _
+    showDeletedUnits: $ ? c : void 0,
+    onShowDeletedUnitsChange: $ ? g : void 0,
+    accountCount: V
   };
-}, Q = ({
-  partyUuid: o,
-  isFavorite: e,
+}, Z = ({
+  partyUuid: e,
+  isFavorite: o,
   toggleFavoriteRef: f,
-  texts: m
-}) => /* @__PURE__ */ S(
-  G,
+  texts: d
+}) => /* @__PURE__ */ F(
+  q,
   {
     rounded: !0,
     variant: "ghost",
-    "aria-label": e ? m.remove_from_favorites : m.add_to_favorites,
-    onClick: (d) => {
-      d.stopPropagation(), f?.current?.(o);
+    "aria-label": o ? d.remove_from_favorites : d.add_to_favorites,
+    onClick: (m) => {
+      m.stopPropagation(), f?.current?.(e);
     },
     size: "xs",
-    children: e ? /* @__PURE__ */ S(J, {}) : /* @__PURE__ */ S(K, {})
+    children: o ? /* @__PURE__ */ F(Q, {}) : /* @__PURE__ */ F(X, {})
   }
-), F = (o, e, f, m, d, N, p, h) => {
-  const n = H(e?.type ?? ""), i = M(o), _ = R({
-    fullName: e?.name,
-    type: n
-  }), v = p ? R({
+), z = (e, o, f, d, m, N, p, I) => {
+  const s = H(o?.type ?? ""), c = M(e), g = j({
+    fullName: o?.name,
+    type: s
+  }), v = p ? j({
     fullName: p?.name,
     type: H(p?.type ?? ""),
     reverseNameOrder: !1
   }) : void 0;
-  let c = "";
-  const g = n === "company" && p ? "subunit" : n;
-  switch (g) {
+  let u = "";
+  const _ = s === "company" && p ? "subunit" : s;
+  switch (_) {
     case "company":
-      c = `${i.org_no}. ${j(e.organizationNumber)}`;
+      u = `${c.org_no}. ${w(o.organizationNumber)}`;
       break;
     case "person":
-      c = e?.dateOfBirth ? `${i.birthdate}: ${q(e?.dateOfBirth)}` : "";
+      u = o?.dateOfBirth ? `${c.birthdate}: ${K(o?.dateOfBirth)}` : "";
       break;
     case "subunit":
-      c = `↳ ${i.org_no}. ${j(e?.organizationNumber)}, ${i.subunit_of} ${v}`;
+      u = `↳ ${c.org_no}. ${w(o?.organizationNumber)}, ${c.subunit_of} ${v}`;
       break;
     default:
-      c = "";
+      u = "";
   }
-  const y = h ? void 0 : /* @__PURE__ */ S(
-    Q,
+  const y = I ? void 0 : /* @__PURE__ */ F(
+    Z,
     {
-      partyUuid: e?.partyUuid,
-      isFavorite: m,
-      toggleFavoriteRef: d,
-      texts: i
+      partyUuid: o?.partyUuid,
+      isFavorite: d,
+      toggleFavoriteRef: m,
+      texts: c
     }
   );
   return {
-    id: e?.partyUuid,
+    id: o?.partyUuid,
     icon: {
-      name: _,
-      type: n,
+      name: g,
+      type: s,
       isParent: !p,
-      isDeleted: e?.isDeleted
+      isDeleted: o?.isDeleted
     },
-    name: _,
-    description: c,
-    searchWords: g === "person" ? [_, e?.dateOfBirth ?? ""] : [_, e?.organizationNumber ?? ""],
+    name: g,
+    description: u,
+    searchWords: _ === "person" ? [g, o?.dateOfBirth ?? ""] : [g, o?.organizationNumber ?? ""],
     groupId: f,
-    type: g,
+    type: _,
     selected: !1,
-    disabled: !!e?.onlyHierarchyElementWithNoAccess,
-    badge: h ? { label: i.you, color: "person" } : e.isDeleted && N ? { label: i.deleted, color: "neutral" } : void 0,
+    disabled: !!o?.onlyHierarchyElementWithNoAccess,
+    badge: I ? { label: c.you, color: "person" } : o.isDeleted && N ? { label: c.deleted, color: "neutral" } : void 0,
     controls: y
   };
-}, T = (o) => o === "Organization", X = (o) => o === "Person" || o === "SelfIdentified", M = (o) => {
-  switch (o) {
+}, C = (e) => e === "Organization", T = (e) => e === "Person" || e === "SelfIdentified", M = (e) => {
+  switch (e) {
     case "nn":
       return {
         account_orgs: "Virksemder",
@@ -269,5 +276,5 @@ const H = (o) => o === "Organization" ? "company" : "person", dt = ({
   }
 };
 export {
-  dt as useAccountSelector
+  pt as useAccountSelector
 };

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

@@ -13,5 +13,13 @@ export interface AccountSelectorProps {
     onShowDeletedUnitsChange?: (newValue: boolean) => void;
     /** Show in fullscreen*/
     isFullScreen?: boolean;
+    /**
+     * Total number of accounts the user has, including deleted ones. Used to
+     * decide whether to show the search field, so the decision stays stable when
+     * the user toggles deleted accounts on/off (toggling only changes how many
+     * accounts are currently listed, not how many the user actually has).
+     * Falls back to the number of currently listed accounts when not provided.
+     */
+    accountCount?: number;
 }
-export declare const AccountSelector: ({ accountMenu, forceOpenFullScreen, className, loading, showDeletedUnits, onShowDeletedUnitsChange, isFullScreen, }: AccountSelectorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccountSelector: ({ accountMenu, forceOpenFullScreen, className, loading, showDeletedUnits, onShowDeletedUnitsChange, isFullScreen, accountCount, }: AccountSelectorProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { AccountSelectorProps } from './AccountSelector';
 declare const meta: {
     title: string;
-    component: ({ accountMenu, forceOpenFullScreen, className, loading, showDeletedUnits, onShowDeletedUnitsChange, isFullScreen, }: AccountSelectorProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ accountMenu, forceOpenFullScreen, className, loading, showDeletedUnits, onShowDeletedUnitsChange, isFullScreen, accountCount, }: AccountSelectorProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;
@@ -27,3 +27,8 @@ export default meta;
 export declare const WithAccounts: (args: AccountSelectorProps) => import("react/jsx-runtime").JSX.Element;
 export declare const NoAccounts: (args: AccountSelectorProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Loading: (args: AccountSelectorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const UsingUseAccountHook: (args: AccountSelectorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ThreeAccounts: (args: AccountSelectorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FourAccountsOneDeleted: (args: AccountSelectorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SixAccountsThreeDeleted: (args: AccountSelectorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TenAccountsNoneDeleted: (args: AccountSelectorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Layout/AccountSelectorInLayout.stories.d.ts

@@ -0,0 +1,49 @@
+import { LayoutProps } from '../';
+interface LayoutStoryArgs extends LayoutProps {
+    forceOpenFullScreen?: boolean | undefined;
+}
+/**
+ * AccountSelector demos rendered inside a full Layout, so you can see how the
+ * selector behaves alongside the header, sidebar and global menu. The same
+ * cases are available as standalone-component stories under Layout/AccountSelector.
+ */
+declare const meta: {
+    title: string;
+    component: ({ banner, color, theme, header, footer, sidebar, content, children, skipLink, breadcrumbs, }: LayoutProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    args: {
+        theme: "subtle";
+        skipLink: {
+            href: string;
+            color: import('..').Color;
+            size: import('..').Size;
+            children: string;
+        };
+        header: import('..').GlobalHeaderProps;
+        footer: import('..').FooterProps;
+        sidebar: {
+            menu: import('..').MenuProps;
+        };
+        children: import("react/jsx-runtime").JSX.Element;
+        color: "company";
+        forceOpenFullScreen: undefined;
+    };
+    argTypes: {
+        color: {
+            control: "select";
+            options: string[];
+        };
+        forceOpenFullScreen: {
+            control: "select";
+            options: (boolean | undefined)[];
+        };
+    };
+};
+export default meta;
+export declare const UsingUseAccountHook: (args: LayoutStoryArgs) => import("react/jsx-runtime").JSX.Element;
+export declare const ThreeAccounts: (args: LayoutStoryArgs) => import("react/jsx-runtime").JSX.Element;
+export declare const FourAccountsOneDeleted: (args: LayoutStoryArgs) => import("react/jsx-runtime").JSX.Element;
+export declare const SixAccountsThreeDeleted: (args: LayoutStoryArgs) => import("react/jsx-runtime").JSX.Element;
+export declare const TenAccountsNoneDeleted: (args: LayoutStoryArgs) => import("react/jsx-runtime").JSX.Element;

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

@@ -38,7 +38,6 @@ declare const meta: {
 };
 export default meta;
 export declare const Preview: (args: LayoutStoryArgs) => import("react/jsx-runtime").JSX.Element;
-export declare const UsingUseAccountHook: (args: LayoutStoryArgs) => import("react/jsx-runtime").JSX.Element;
 export declare const LogInView: (args: LayoutStoryArgs) => import("react/jsx-runtime").JSX.Element;
 export declare const WithEnglishLanguage: (args: LayoutStoryArgs) => import("react/jsx-runtime").JSX.Element;
 export declare const StickySidebar: (args: LayoutStoryArgs) => import("react/jsx-runtime").JSX.Element;

package/package.json

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