@altinn/altinn-components 0.22.7 → 0.23.0

package/dist/assets/MenuItemsVirtual.css

@@ -0,0 +1 @@
+._virtualScrollRef_1kwwy_1{max-height:400px;overflow:auto}._virtualMenuListItem_1kwwy_6{position:absolute;top:0;left:0;width:100%}

package/dist/components/GlobalMenu/AccountMenu.js

@@ -1,17 +1,18 @@
 "use client";
-import { jsx as v } from "react/jsx-runtime";
-import { useState as y } from "react";
+import { jsx as y } from "react/jsx-runtime";
+import { useState as L } from "react";
 import "../../index-L8X2o7IH.js";
 import "../RootProvider/RootProvider.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { Menu as L } from "../Menu/Menu.js";
-const M = (d) => `${d} hits`, G = ({
+import { Menu as M } from "../Menu/Menu.js";
+const a = (d) => `${d} hits`, R = ({
   accounts: d = [],
   accountGroups: C = {},
   accountSearch: s,
   onSelectAccount: m,
-  currentAccount: p
+  currentAccount: p,
+  isVirtualized: I
 }) => {
   var f;
   const t = d.map((e) => ({
@@ -38,35 +39,36 @@ const M = (d) => `${d} hits`, G = ({
     badge: e.badge,
     alertBadge: e.alertBadge,
     onClick: () => m == null ? void 0 : m(e.id || e.name)
-  })), [i, g] = y(""), l = i ? t.filter((e) => {
+  })), [i, g] = L(""), l = i ? t.filter((e) => {
     var r;
     return (r = e == null ? void 0 : e.title) == null ? void 0 : r.toLowerCase().includes(i.toLowerCase());
   }).map((e) => ({
     ...e,
     groupId: "search"
-  })) : t, I = i ? {
+  })) : t, b = i ? {
     search: {
-      title: ((f = s == null ? void 0 : s.getResultsLabel) == null ? void 0 : f.call(s, l.length)) ?? M(l.length)
+      title: ((f = s == null ? void 0 : s.getResultsLabel) == null ? void 0 : f.call(s, l.length)) ?? a(l.length)
     }
-  } : C, b = {
+  } : C, h = {
     name: "account-search",
     value: i,
     placeholder: (s == null ? void 0 : s.placeholder) ?? "Find account",
     onChange: (e) => g(e.target.value),
     onClear: () => g("")
-  }, h = [
+  }, v = [
     ...l.length > 0 ? l : [{ id: "search", groupId: "search", hidden: !0 }]
   ];
-  return /* @__PURE__ */ v(
-    L,
+  return /* @__PURE__ */ y(
+    M,
     {
       theme: "default",
-      search: s && b,
-      groups: I,
-      items: h
+      search: s && h,
+      groups: b,
+      items: v,
+      isVirtualized: I
     }
   );
 };
 export {
-  G as AccountMenu
+  R as AccountMenu
 };

package/dist/components/Menu/Menu.js

@@ -1,28 +1,41 @@
 import { jsx as r } from "react/jsx-runtime";
-import { MenuBase as f } from "./MenuBase.js";
-import { MenuItems as M } from "./MenuItems.js";
-const d = ({
-  color: e,
-  theme: o,
-  defaultItemColor: m,
-  defaultItemTheme: t,
-  defaultItemSize: n,
-  defaultIconTheme: i,
-  groups: p,
-  items: s = [],
-  search: u
-}) => /* @__PURE__ */ r(f, { color: e, theme: o, children: /* @__PURE__ */ r(
-  M,
+import { MenuBase as x } from "./MenuBase.js";
+import { MenuItems as j } from "./MenuItems.js";
+import { MenuItemsVirtual as B } from "./MenuItemsVirtual.js";
+const q = ({
+  color: n,
+  theme: i,
+  defaultItemColor: o,
+  defaultItemTheme: p,
+  defaultItemSize: M,
+  defaultIconTheme: m,
+  groups: s,
+  items: t = [],
+  search: u,
+  isVirtualized: f
+}) => f ? /* @__PURE__ */ r(x, { color: n, theme: i, children: /* @__PURE__ */ r(
+  B,
   {
     search: u,
-    items: s,
-    groups: p,
-    defaultItemSize: n,
-    defaultItemColor: m,
-    defaultItemTheme: t,
-    defaultIconTheme: i
+    items: t,
+    groups: s,
+    defaultItemSize: M,
+    defaultItemColor: o,
+    defaultItemTheme: p,
+    defaultIconTheme: m
+  }
+) }) : /* @__PURE__ */ r(x, { color: n, theme: i, children: /* @__PURE__ */ r(
+  j,
+  {
+    search: u,
+    items: t,
+    groups: s,
+    defaultItemSize: M,
+    defaultItemColor: o,
+    defaultItemTheme: p,
+    defaultIconTheme: m
   }
 ) });
 export {
-  d as Menu
+  q as Menu
 };

package/dist/components/Menu/MenuBase.js

@@ -1,12 +1,19 @@
 import { jsx as m } from "react/jsx-runtime";
 import { c as a } from "../../index-L8X2o7IH.js";
-import '../../assets/MenuBase.css';const i = "_menu_njba2_1", r = "_list_njba2_13", u = "_item_njba2_19", c = {
-  menu: i,
-  list: r,
-  item: u
-}, C = ({ as: t = "nav", color: n, theme: e, className: o, children: s }) => /* @__PURE__ */ m(t, { className: a(c.menu, o), "data-color": n, "data-theme": e, children: s }), j = ({ as: t = "ul", role: n = "group", className: e, children: o }) => /* @__PURE__ */ m(t, { className: a(c.list, e), role: n, children: o }), b = ({ as: t = "li", role: n = "presentation", className: e, children: o }) => /* @__PURE__ */ m(t, { className: a(c.item, e), role: n, children: o });
+import '../../assets/MenuBase.css';const r = "_menu_njba2_1", u = "_list_njba2_13", l = "_item_njba2_19", c = {
+  menu: r,
+  list: u,
+  item: l
+}, d = ({ as: t = "nav", color: n, theme: e, className: o, children: s }) => /* @__PURE__ */ m(t, { className: a(c.menu, o), "data-color": n, "data-theme": e, children: s }), j = ({ as: t = "ul", role: n = "group", className: e, children: o }) => /* @__PURE__ */ m(t, { className: a(c.list, e), role: n, children: o }), x = ({
+  as: t = "li",
+  role: n = "presentation",
+  className: e,
+  children: o,
+  style: s,
+  dataIndex: i
+}) => /* @__PURE__ */ m(t, { className: a(c.item, e), role: n, style: s, "data-index": i, children: o });
 export {
-  C as MenuBase,
+  d as MenuBase,
   j as MenuList,
-  b as MenuListItem
+  x as MenuListItem
 };

package/dist/components/Menu/MenuItemsVirtual.js

@@ -0,0 +1,636 @@
+"use client";
+import { jsxs as w, jsx as E } from "react/jsx-runtime";
+import * as S from "react";
+import { useRef as k, useEffect as A } from "react";
+import { flushSync as N } from "react-dom";
+import "../../index-L8X2o7IH.js";
+import { useMenu as F } from "../../hooks/useMenu.js";
+import "../RootProvider/RootProvider.js";
+import { MenuItem as P } from "./MenuItem.js";
+import { MenuSearch as V } from "./MenuSearch.js";
+import { MenuHeader as L } from "./MenuHeader.js";
+import { MenuList as W, MenuListItem as j } from "./MenuBase.js";
+import "../Search/AutocompleteBase.js";
+import "../Snackbar/useSnackbar.js";
+import '../../assets/MenuItemsVirtual.css';function x(r, l, e) {
+  let s = e.initialDeps ?? [], t;
+  function n() {
+    var i, o, h, u;
+    let a;
+    e.key && ((i = e.debug) != null && i.call(e)) && (a = Date.now());
+    const f = r();
+    if (!(f.length !== s.length || f.some((c, p) => s[p] !== c)))
+      return t;
+    s = f;
+    let d;
+    if (e.key && ((o = e.debug) != null && o.call(e)) && (d = Date.now()), t = l(...f), e.key && ((h = e.debug) != null && h.call(e))) {
+      const c = Math.round((Date.now() - a) * 100) / 100, p = Math.round((Date.now() - d) * 100) / 100, v = p / 16, y = (g, b) => {
+        for (g = String(g); g.length < b; )
+          g = " " + g;
+        return g;
+      };
+      console.info(
+        `%c⏱ ${y(p, 5)} /${y(c, 5)} ms`,
+        `
+            font-size: .6rem;
+            font-weight: bold;
+            color: hsl(${Math.max(
+          0,
+          Math.min(120 - 120 * v, 120)
+        )}deg 100% 31%);`,
+        e == null ? void 0 : e.key
+      );
+    }
+    return (u = e == null ? void 0 : e.onChange) == null || u.call(e, t), t;
+  }
+  return n.updateDeps = (i) => {
+    s = i;
+  }, n;
+}
+function I(r, l) {
+  if (r === void 0)
+    throw new Error("Unexpected undefined");
+  return r;
+}
+const B = (r, l) => Math.abs(r - l) < 1, $ = (r, l, e) => {
+  let s;
+  return function(...t) {
+    r.clearTimeout(s), s = r.setTimeout(() => l.apply(this, t), e);
+  };
+}, K = (r) => r, q = (r) => {
+  const l = Math.max(r.startIndex - r.overscan, 0), e = Math.min(r.endIndex + r.overscan, r.count - 1), s = [];
+  for (let t = l; t <= e; t++)
+    s.push(t);
+  return s;
+}, H = (r, l) => {
+  const e = r.scrollElement;
+  if (!e)
+    return;
+  const s = r.targetWindow;
+  if (!s)
+    return;
+  const t = (i) => {
+    const { width: o, height: h } = i;
+    l({ width: Math.round(o), height: Math.round(h) });
+  };
+  if (t(e.getBoundingClientRect()), !s.ResizeObserver)
+    return () => {
+    };
+  const n = new s.ResizeObserver((i) => {
+    const o = () => {
+      const h = i[0];
+      if (h != null && h.borderBoxSize) {
+        const u = h.borderBoxSize[0];
+        if (u) {
+          t({ width: u.inlineSize, height: u.blockSize });
+          return;
+        }
+      }
+      t(e.getBoundingClientRect());
+    };
+    r.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(o) : o();
+  });
+  return n.observe(e, { box: "border-box" }), () => {
+    n.unobserve(e);
+  };
+}, C = {
+  passive: !0
+}, T = typeof window > "u" ? !0 : "onscrollend" in window, U = (r, l) => {
+  const e = r.scrollElement;
+  if (!e)
+    return;
+  const s = r.targetWindow;
+  if (!s)
+    return;
+  let t = 0;
+  const n = r.options.useScrollendEvent && T ? () => {
+  } : $(
+    s,
+    () => {
+      l(t, !1);
+    },
+    r.options.isScrollingResetDelay
+  ), i = (a) => () => {
+    const { horizontal: f, isRtl: m } = r.options;
+    t = f ? e.scrollLeft * (m && -1 || 1) : e.scrollTop, n(), l(t, a);
+  }, o = i(!0), h = i(!1);
+  h(), e.addEventListener("scroll", o, C);
+  const u = r.options.useScrollendEvent && T;
+  return u && e.addEventListener("scrollend", h, C), () => {
+    e.removeEventListener("scroll", o), u && e.removeEventListener("scrollend", h);
+  };
+}, Y = (r, l, e) => {
+  if (l != null && l.borderBoxSize) {
+    const s = l.borderBoxSize[0];
+    if (s)
+      return Math.round(
+        s[e.options.horizontal ? "inlineSize" : "blockSize"]
+      );
+  }
+  return Math.round(
+    r.getBoundingClientRect()[e.options.horizontal ? "width" : "height"]
+  );
+}, G = (r, {
+  adjustments: l = 0,
+  behavior: e
+}, s) => {
+  var t, n;
+  const i = r + l;
+  (n = (t = s.scrollElement) == null ? void 0 : t.scrollTo) == null || n.call(t, {
+    [s.options.horizontal ? "left" : "top"]: i,
+    behavior: e
+  });
+};
+class J {
+  constructor(l) {
+    this.unsubs = [], this.scrollElement = null, this.targetWindow = null, this.isScrolling = !1, this.scrollToIndexTimeoutId = null, this.measurementsCache = [], this.itemSizeCache = /* @__PURE__ */ new Map(), this.pendingMeasuredCacheIndexes = [], this.scrollRect = null, this.scrollOffset = null, this.scrollDirection = null, this.scrollAdjustments = 0, this.elementsCache = /* @__PURE__ */ new Map(), this.observer = /* @__PURE__ */ (() => {
+      let e = null;
+      const s = () => e || (!this.targetWindow || !this.targetWindow.ResizeObserver ? null : e = new this.targetWindow.ResizeObserver((t) => {
+        t.forEach((n) => {
+          const i = () => {
+            this._measureElement(n.target, n);
+          };
+          this.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(i) : i();
+        });
+      }));
+      return {
+        disconnect: () => {
+          var t;
+          (t = s()) == null || t.disconnect(), e = null;
+        },
+        observe: (t) => {
+          var n;
+          return (n = s()) == null ? void 0 : n.observe(t, { box: "border-box" });
+        },
+        unobserve: (t) => {
+          var n;
+          return (n = s()) == null ? void 0 : n.unobserve(t);
+        }
+      };
+    })(), this.range = null, this.setOptions = (e) => {
+      Object.entries(e).forEach(([s, t]) => {
+        typeof t > "u" && delete e[s];
+      }), this.options = {
+        debug: !1,
+        initialOffset: 0,
+        overscan: 1,
+        paddingStart: 0,
+        paddingEnd: 0,
+        scrollPaddingStart: 0,
+        scrollPaddingEnd: 0,
+        horizontal: !1,
+        getItemKey: K,
+        rangeExtractor: q,
+        onChange: () => {
+        },
+        measureElement: Y,
+        initialRect: { width: 0, height: 0 },
+        scrollMargin: 0,
+        gap: 0,
+        indexAttribute: "data-index",
+        initialMeasurementsCache: [],
+        lanes: 1,
+        isScrollingResetDelay: 150,
+        enabled: !0,
+        isRtl: !1,
+        useScrollendEvent: !1,
+        useAnimationFrameWithResizeObserver: !1,
+        ...e
+      };
+    }, this.notify = (e) => {
+      var s, t;
+      (t = (s = this.options).onChange) == null || t.call(s, this, e);
+    }, this.maybeNotify = x(
+      () => (this.calculateRange(), [
+        this.isScrolling,
+        this.range ? this.range.startIndex : null,
+        this.range ? this.range.endIndex : null
+      ]),
+      (e) => {
+        this.notify(e);
+      },
+      {
+        key: process.env.NODE_ENV !== "production" && "maybeNotify",
+        debug: () => this.options.debug,
+        initialDeps: [
+          this.isScrolling,
+          this.range ? this.range.startIndex : null,
+          this.range ? this.range.endIndex : null
+        ]
+      }
+    ), this.cleanup = () => {
+      this.unsubs.filter(Boolean).forEach((e) => e()), this.unsubs = [], this.observer.disconnect(), this.scrollElement = null, this.targetWindow = null;
+    }, this._didMount = () => () => {
+      this.cleanup();
+    }, this._willUpdate = () => {
+      var e;
+      const s = this.options.enabled ? this.options.getScrollElement() : null;
+      if (this.scrollElement !== s) {
+        if (this.cleanup(), !s) {
+          this.maybeNotify();
+          return;
+        }
+        this.scrollElement = s, this.scrollElement && "ownerDocument" in this.scrollElement ? this.targetWindow = this.scrollElement.ownerDocument.defaultView : this.targetWindow = ((e = this.scrollElement) == null ? void 0 : e.window) ?? null, this.elementsCache.forEach((t) => {
+          this.observer.observe(t);
+        }), this._scrollToOffset(this.getScrollOffset(), {
+          adjustments: void 0,
+          behavior: void 0
+        }), this.unsubs.push(
+          this.options.observeElementRect(this, (t) => {
+            this.scrollRect = t, this.maybeNotify();
+          })
+        ), this.unsubs.push(
+          this.options.observeElementOffset(this, (t, n) => {
+            this.scrollAdjustments = 0, this.scrollDirection = n ? this.getScrollOffset() < t ? "forward" : "backward" : null, this.scrollOffset = t, this.isScrolling = n, this.maybeNotify();
+          })
+        );
+      }
+    }, this.getSize = () => this.options.enabled ? (this.scrollRect = this.scrollRect ?? this.options.initialRect, this.scrollRect[this.options.horizontal ? "width" : "height"]) : (this.scrollRect = null, 0), this.getScrollOffset = () => this.options.enabled ? (this.scrollOffset = this.scrollOffset ?? (typeof this.options.initialOffset == "function" ? this.options.initialOffset() : this.options.initialOffset), this.scrollOffset) : (this.scrollOffset = null, 0), this.getFurthestMeasurement = (e, s) => {
+      const t = /* @__PURE__ */ new Map(), n = /* @__PURE__ */ new Map();
+      for (let i = s - 1; i >= 0; i--) {
+        const o = e[i];
+        if (t.has(o.lane))
+          continue;
+        const h = n.get(
+          o.lane
+        );
+        if (h == null || o.end > h.end ? n.set(o.lane, o) : o.end < h.end && t.set(o.lane, !0), t.size === this.options.lanes)
+          break;
+      }
+      return n.size === this.options.lanes ? Array.from(n.values()).sort((i, o) => i.end === o.end ? i.index - o.index : i.end - o.end)[0] : void 0;
+    }, this.getMeasurementOptions = x(
+      () => [
+        this.options.count,
+        this.options.paddingStart,
+        this.options.scrollMargin,
+        this.options.getItemKey,
+        this.options.enabled
+      ],
+      (e, s, t, n, i) => (this.pendingMeasuredCacheIndexes = [], {
+        count: e,
+        paddingStart: s,
+        scrollMargin: t,
+        getItemKey: n,
+        enabled: i
+      }),
+      {
+        key: !1
+      }
+    ), this.getMeasurements = x(
+      () => [this.getMeasurementOptions(), this.itemSizeCache],
+      ({ count: e, paddingStart: s, scrollMargin: t, getItemKey: n, enabled: i }, o) => {
+        if (!i)
+          return this.measurementsCache = [], this.itemSizeCache.clear(), [];
+        this.measurementsCache.length === 0 && (this.measurementsCache = this.options.initialMeasurementsCache, this.measurementsCache.forEach((a) => {
+          this.itemSizeCache.set(a.key, a.size);
+        }));
+        const h = this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
+        this.pendingMeasuredCacheIndexes = [];
+        const u = this.measurementsCache.slice(0, h);
+        for (let a = h; a < e; a++) {
+          const f = n(a), m = this.options.lanes === 1 ? u[a - 1] : this.getFurthestMeasurement(u, a), d = m ? m.end + this.options.gap : s + t, c = o.get(f), p = typeof c == "number" ? c : this.options.estimateSize(a), v = d + p, y = m ? m.lane : a % this.options.lanes;
+          u[a] = {
+            index: a,
+            start: d,
+            size: p,
+            end: v,
+            key: f,
+            lane: y
+          };
+        }
+        return this.measurementsCache = u, u;
+      },
+      {
+        key: process.env.NODE_ENV !== "production" && "getMeasurements",
+        debug: () => this.options.debug
+      }
+    ), this.calculateRange = x(
+      () => [
+        this.getMeasurements(),
+        this.getSize(),
+        this.getScrollOffset(),
+        this.options.lanes
+      ],
+      (e, s, t, n) => this.range = e.length > 0 && s > 0 ? Q({
+        measurements: e,
+        outerSize: s,
+        scrollOffset: t,
+        lanes: n
+      }) : null,
+      {
+        key: process.env.NODE_ENV !== "production" && "calculateRange",
+        debug: () => this.options.debug
+      }
+    ), this.getVirtualIndexes = x(
+      () => {
+        let e = null, s = null;
+        const t = this.calculateRange();
+        return t && (e = t.startIndex, s = t.endIndex), this.maybeNotify.updateDeps([this.isScrolling, e, s]), [
+          this.options.rangeExtractor,
+          this.options.overscan,
+          this.options.count,
+          e,
+          s
+        ];
+      },
+      (e, s, t, n, i) => n === null || i === null ? [] : e({
+        startIndex: n,
+        endIndex: i,
+        overscan: s,
+        count: t
+      }),
+      {
+        key: process.env.NODE_ENV !== "production" && "getVirtualIndexes",
+        debug: () => this.options.debug
+      }
+    ), this.indexFromElement = (e) => {
+      const s = this.options.indexAttribute, t = e.getAttribute(s);
+      return t ? parseInt(t, 10) : (console.warn(
+        `Missing attribute name '${s}={index}' on measured element.`
+      ), -1);
+    }, this._measureElement = (e, s) => {
+      const t = this.indexFromElement(e), n = this.measurementsCache[t];
+      if (!n)
+        return;
+      const i = n.key, o = this.elementsCache.get(i);
+      o !== e && (o && this.observer.unobserve(o), this.observer.observe(e), this.elementsCache.set(i, e)), e.isConnected && this.resizeItem(t, this.options.measureElement(e, s, this));
+    }, this.resizeItem = (e, s) => {
+      const t = this.measurementsCache[e];
+      if (!t)
+        return;
+      const n = this.itemSizeCache.get(t.key) ?? t.size, i = s - n;
+      i !== 0 && ((this.shouldAdjustScrollPositionOnItemSizeChange !== void 0 ? this.shouldAdjustScrollPositionOnItemSizeChange(t, i, this) : t.start < this.getScrollOffset() + this.scrollAdjustments) && (process.env.NODE_ENV !== "production" && this.options.debug && console.info("correction", i), this._scrollToOffset(this.getScrollOffset(), {
+        adjustments: this.scrollAdjustments += i,
+        behavior: void 0
+      })), this.pendingMeasuredCacheIndexes.push(t.index), this.itemSizeCache = new Map(this.itemSizeCache.set(t.key, s)), this.notify(!1));
+    }, this.measureElement = (e) => {
+      if (!e) {
+        this.elementsCache.forEach((s, t) => {
+          s.isConnected || (this.observer.unobserve(s), this.elementsCache.delete(t));
+        });
+        return;
+      }
+      this._measureElement(e, void 0);
+    }, this.getVirtualItems = x(
+      () => [this.getVirtualIndexes(), this.getMeasurements()],
+      (e, s) => {
+        const t = [];
+        for (let n = 0, i = e.length; n < i; n++) {
+          const o = e[n], h = s[o];
+          t.push(h);
+        }
+        return t;
+      },
+      {
+        key: process.env.NODE_ENV !== "production" && "getVirtualItems",
+        debug: () => this.options.debug
+      }
+    ), this.getVirtualItemForOffset = (e) => {
+      const s = this.getMeasurements();
+      if (s.length !== 0)
+        return I(
+          s[D(
+            0,
+            s.length - 1,
+            (t) => I(s[t]).start,
+            e
+          )]
+        );
+    }, this.getOffsetForAlignment = (e, s, t = 0) => {
+      const n = this.getSize(), i = this.getScrollOffset();
+      s === "auto" && (s = e >= i + n ? "end" : "start"), s === "center" ? e += (t - n) / 2 : s === "end" && (e -= n);
+      const o = this.options.horizontal ? "scrollWidth" : "scrollHeight", u = (this.scrollElement ? "document" in this.scrollElement ? this.scrollElement.document.documentElement[o] : this.scrollElement[o] : 0) - n;
+      return Math.max(Math.min(u, e), 0);
+    }, this.getOffsetForIndex = (e, s = "auto") => {
+      e = Math.max(0, Math.min(e, this.options.count - 1));
+      const t = this.measurementsCache[e];
+      if (!t)
+        return;
+      const n = this.getSize(), i = this.getScrollOffset();
+      if (s === "auto")
+        if (t.end >= i + n - this.options.scrollPaddingEnd)
+          s = "end";
+        else if (t.start <= i + this.options.scrollPaddingStart)
+          s = "start";
+        else
+          return [i, s];
+      const o = s === "end" ? t.end + this.options.scrollPaddingEnd : t.start - this.options.scrollPaddingStart;
+      return [
+        this.getOffsetForAlignment(o, s, t.size),
+        s
+      ];
+    }, this.isDynamicMode = () => this.elementsCache.size > 0, this.cancelScrollToIndex = () => {
+      this.scrollToIndexTimeoutId !== null && this.targetWindow && (this.targetWindow.clearTimeout(this.scrollToIndexTimeoutId), this.scrollToIndexTimeoutId = null);
+    }, this.scrollToOffset = (e, { align: s = "start", behavior: t } = {}) => {
+      this.cancelScrollToIndex(), t === "smooth" && this.isDynamicMode() && console.warn(
+        "The `smooth` scroll behavior is not fully supported with dynamic size."
+      ), this._scrollToOffset(this.getOffsetForAlignment(e, s), {
+        adjustments: void 0,
+        behavior: t
+      });
+    }, this.scrollToIndex = (e, { align: s = "auto", behavior: t } = {}) => {
+      e = Math.max(0, Math.min(e, this.options.count - 1)), this.cancelScrollToIndex(), t === "smooth" && this.isDynamicMode() && console.warn(
+        "The `smooth` scroll behavior is not fully supported with dynamic size."
+      );
+      const n = this.getOffsetForIndex(e, s);
+      if (!n) return;
+      const [i, o] = n;
+      this._scrollToOffset(i, { adjustments: void 0, behavior: t }), t !== "smooth" && this.isDynamicMode() && this.targetWindow && (this.scrollToIndexTimeoutId = this.targetWindow.setTimeout(() => {
+        if (this.scrollToIndexTimeoutId = null, this.elementsCache.has(
+          this.options.getItemKey(e)
+        )) {
+          const [u] = I(
+            this.getOffsetForIndex(e, o)
+          );
+          B(u, this.getScrollOffset()) || this.scrollToIndex(e, { align: o, behavior: t });
+        } else
+          this.scrollToIndex(e, { align: o, behavior: t });
+      }));
+    }, this.scrollBy = (e, { behavior: s } = {}) => {
+      this.cancelScrollToIndex(), s === "smooth" && this.isDynamicMode() && console.warn(
+        "The `smooth` scroll behavior is not fully supported with dynamic size."
+      ), this._scrollToOffset(this.getScrollOffset() + e, {
+        adjustments: void 0,
+        behavior: s
+      });
+    }, this.getTotalSize = () => {
+      var e;
+      const s = this.getMeasurements();
+      let t;
+      if (s.length === 0)
+        t = this.options.paddingStart;
+      else if (this.options.lanes === 1)
+        t = ((e = s[s.length - 1]) == null ? void 0 : e.end) ?? 0;
+      else {
+        const n = Array(this.options.lanes).fill(null);
+        let i = s.length - 1;
+        for (; i > 0 && n.some((o) => o === null); ) {
+          const o = s[i];
+          n[o.lane] === null && (n[o.lane] = o.end), i--;
+        }
+        t = Math.max(...n.filter((o) => o !== null));
+      }
+      return Math.max(
+        t - this.options.scrollMargin + this.options.paddingEnd,
+        0
+      );
+    }, this._scrollToOffset = (e, {
+      adjustments: s,
+      behavior: t
+    }) => {
+      this.options.scrollToFn(e, { behavior: t, adjustments: s }, this);
+    }, this.measure = () => {
+      this.itemSizeCache = /* @__PURE__ */ new Map(), this.notify(!1);
+    }, this.setOptions(l);
+  }
+}
+const D = (r, l, e, s) => {
+  for (; r <= l; ) {
+    const t = (r + l) / 2 | 0, n = e(t);
+    if (n < s)
+      r = t + 1;
+    else if (n > s)
+      l = t - 1;
+    else
+      return t;
+  }
+  return r > 0 ? r - 1 : 0;
+};
+function Q({
+  measurements: r,
+  outerSize: l,
+  scrollOffset: e,
+  lanes: s
+}) {
+  const t = r.length - 1;
+  let i = D(
+    0,
+    t,
+    (h) => r[h].start,
+    e
+  ), o = i;
+  if (s === 1)
+    for (; o < t && r[o].end < e + l; )
+      o++;
+  else if (s > 1) {
+    const h = Array(s).fill(0);
+    for (; o < t && h.some((a) => a < e + l); ) {
+      const a = r[o];
+      h[a.lane] = a.end, o++;
+    }
+    const u = Array(s).fill(e + l);
+    for (; i > 0 && u.some((a) => a >= e); ) {
+      const a = r[i];
+      u[a.lane] = a.start, i--;
+    }
+    i = Math.max(0, i - i % s), o = Math.min(t, o + (s - 1 - o % s));
+  }
+  return { startIndex: i, endIndex: o };
+}
+const _ = typeof document < "u" ? S.useLayoutEffect : S.useEffect;
+function X(r) {
+  const l = S.useReducer(() => ({}), {})[1], e = {
+    ...r,
+    onChange: (t, n) => {
+      var i;
+      n ? N(l) : l(), (i = r.onChange) == null || i.call(r, t, n);
+    }
+  }, [s] = S.useState(
+    () => new J(e)
+  );
+  return s.setOptions(e), _(() => s._didMount(), []), _(() => s._willUpdate()), s;
+}
+function Z(r) {
+  return X({
+    observeElementRect: H,
+    observeElementOffset: U,
+    scrollToFn: G,
+    ...r
+  });
+}
+const ee = "_virtualScrollRef_1kwwy_1", te = "_virtualMenuListItem_1kwwy_6", R = {
+  virtualScrollRef: ee,
+  virtualMenuListItem: te
+}, me = ({
+  level: r = 0,
+  search: l,
+  items: e,
+  groups: s = {},
+  defaultItemSize: t,
+  defaultItemColor: n,
+  defaultItemTheme: i,
+  defaultIconTheme: o
+}) => {
+  const { menu: h } = F({
+    items: e,
+    groups: s,
+    groupByKey: "groupId",
+    keyboardEvents: !1
+  }), u = k(null), a = h.flatMap((d, c) => {
+    var g;
+    const p = (d == null ? void 0 : d.props) || {}, { title: v } = p, y = ((g = d == null ? void 0 : d.items) == null ? void 0 : g.filter((b) => {
+      var M;
+      return !((M = b.props) != null && M.hidden);
+    })) || [];
+    return [
+      ...c > 0 || r > 0 ? [{ type: "separator" }] : [],
+      ...v ? [{ type: "title", title: v }] : [],
+      ...y.map((b, M) => {
+        var z, O;
+        return {
+          type: "item",
+          itemProps: b.props || {},
+          active: b.active,
+          hasChildren: ((z = b.props) == null ? void 0 : z.expanded) && ((O = b.props) == null ? void 0 : O.items),
+          isLastItem: M === y.length - 1
+        };
+      })
+    ];
+  }), f = Z({
+    count: a.length,
+    estimateSize: (d) => {
+      const c = a[d];
+      return c ? c.type === "title" ? 44 : c.type === "separator" ? 1 : 44 : 0;
+    },
+    getScrollElement: () => u.current
+  }), m = f.getVirtualItems();
+  return A(() => {
+    for (const d of m) {
+      const c = document.querySelector(`[data-index="${d.index}"]`);
+      c && f.measureElement(c);
+    }
+  }, [m]), /* @__PURE__ */ w(W, { children: [
+    l && /* @__PURE__ */ E(V, { ...l }),
+    /* @__PURE__ */ E("div", { ref: u, className: R.virtualScrollRef, children: /* @__PURE__ */ E("div", { style: { position: "relative", height: `${f.getTotalSize()}px` }, children: m.map((d) => {
+      const c = a[d.index];
+      return c ? /* @__PURE__ */ w(
+        j,
+        {
+          dataIndex: d.index,
+          className: R.virtualMenuListItem,
+          style: { transform: `translateY(${d.start}px)` },
+          role: c.type === "separator" ? "separator" : void 0,
+          children: [
+            c.type === "title" && /* @__PURE__ */ E(L, { title: c.title }),
+            c.type === "item" && /* @__PURE__ */ E(
+              P,
+              {
+                ...c.itemProps,
+                size: c.itemProps.size || t,
+                color: c.itemProps.color || n,
+                theme: c.itemProps.theme || i,
+                iconTheme: c.itemProps.iconTheme || o,
+                active: c.active,
+                tabIndex: c.itemProps.disabled ? -1 : 0
+              }
+            )
+          ]
+        },
+        d.key
+      ) : null;
+    }) }) })
+  ] });
+};
+export {
+  me as MenuItemsVirtual
+};

package/dist/components/Menu/MenuSearch.js

@@ -14,18 +14,18 @@ import '../../assets/MenuSearch.css';const f = "_field_8g6tu_1", _ = "_icon_8g6t
   input: g,
   clear: d
 }, I = ({
-  value: c,
+  value: i,
   name: r,
   placeholder: s = "Search",
   clearButtonAltText: e = "Clear search",
   onChange: n,
-  onClear: i
+  onClear: c
 }) => /* @__PURE__ */ a("div", { className: t.field, children: [
   /* @__PURE__ */ o(
     "input",
     {
       type: "search",
-      value: c,
+      value: i,
       name: r,
       placeholder: s,
       className: t.input,
@@ -34,14 +34,14 @@ import '../../assets/MenuSearch.css';const f = "_field_8g6tu_1", _ = "_icon_8g6t
     }
   ),
   /* @__PURE__ */ o(m, { svgElement: p, className: t.icon }),
-  i && /* @__PURE__ */ o(
+  c && !!i && /* @__PURE__ */ o(
     l,
     {
       icon: u,
       variant: "solid",
       size: "custom",
       className: t.clear,
-      onClick: i,
+      onClick: c,
       iconAltText: e
     }
   )

package/dist/components/Toolbar/ToolbarAccountMenu.js

@@ -1,28 +1,29 @@
-import { jsxs as f, jsx as m } from "react/jsx-runtime";
+import { jsxs as f, jsx as p } from "react/jsx-runtime";
+import { createElement as n } from "react";
 import "../../index-L8X2o7IH.js";
-import "react";
-import { useRootContext as n } from "../RootProvider/RootProvider.js";
-import { DrawerOrDropdown as x } from "../Dropdown/DrawerOrDropdown.js";
-import { AccountMenu as T } from "../GlobalMenu/AccountMenu.js";
+import { useRootContext as x } from "../RootProvider/RootProvider.js";
+import { DrawerOrDropdown as T } from "../Dropdown/DrawerOrDropdown.js";
+import { AccountMenu as b } from "../GlobalMenu/AccountMenu.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { ToolbarButton as b } from "./ToolbarButton.js";
-import { ToolbarFilterBase as g } from "./ToolbarFilterBase.js";
-const y = ({
+import { ToolbarButton as g } from "./ToolbarButton.js";
+import { ToolbarFilterBase as h } from "./ToolbarFilterBase.js";
+const v = ({
   currentAccount: o,
-  id: i = "toolbar-accounts",
+  id: e = "toolbar-accounts",
   onSelectAccount: r,
-  ...e
+  ...l
 }) => {
-  const { currentId: s, toggleId: l, closeAll: p } = n(), a = () => l(i), t = s === i;
-  return /* @__PURE__ */ f(g, { expanded: t, children: [
-    /* @__PURE__ */ m(b, { type: "switch", onToggle: a, active: !!o, children: o == null ? void 0 : o.name }),
-    /* @__PURE__ */ m(x, { open: t, drawerTitle: "Endre konto", onClose: p, children: /* @__PURE__ */ m(
-      T,
+  const { currentId: m, toggleId: s, closeAll: t } = x(), a = () => s(e), i = m === e;
+  return /* @__PURE__ */ f(h, { expanded: i, children: [
+    /* @__PURE__ */ p(g, { type: "switch", onToggle: a, active: !!o, children: o == null ? void 0 : o.name }),
+    /* @__PURE__ */ p(T, { open: i, drawerTitle: "Endre konto", onClose: t, children: /* @__PURE__ */ n(
+      b,
       {
-        ...e,
+        ...l,
+        key: m,
         onSelectAccount: (d) => {
-          r == null || r(d), p();
+          r == null || r(d), t();
         },
         currentAccount: o
       }
@@ -30,5 +31,5 @@ const y = ({
   ] });
 };
 export {
-  y as ToolbarAccountMenu
+  v as ToolbarAccountMenu
 };

package/dist/types/lib/components/AccessAreaList/AccessAreaListItem.d.ts

@@ -1,7 +1,7 @@
 import { Color } from '../../types';
 import { SvgElement } from '../Icon';
 import { ListItemProps } from '../List';
-interface AccessAreaListItemDefaultProps extends Pick<ListItemProps, 'size' | 'onClick' | 'expanded' | 'loading'> {
+interface AccessAreaListItemDefaultProps extends Pick<ListItemProps, 'size' | 'onClick' | 'expanded' | 'loading' | 'titleAs'> {
     /** Id of the item */
     id: string;
     /** Name of the Access Area */

package/dist/types/lib/components/AccessPackageList/AccessPackageListItem.d.ts

@@ -1,5 +1,5 @@
 import { ListItemProps } from '../List';
-export interface AccessPackageListItemProps extends Pick<ListItemProps, 'color' | 'onClick' | 'as' | 'title' | 'description' | 'size' | 'controls' | 'loading'> {
+export interface AccessPackageListItemProps extends Pick<ListItemProps, 'color' | 'onClick' | 'as' | 'title' | 'description' | 'size' | 'controls' | 'loading' | 'titleAs'> {
     id: string;
 }
 export declare const AccessPackageListItem: ({ as, title, color, ...props }: AccessPackageListItemProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -20,5 +20,6 @@ export interface AccountMenuProps {
     accountSearch?: AccountSearchProps;
     currentAccount?: AccountMenuItem;
     onSelectAccount?: (id: string) => void;
+    isVirtualized?: boolean;
 }
-export declare const AccountMenu: ({ accounts, accountGroups, accountSearch, onSelectAccount, currentAccount, }: AccountMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccountMenu: ({ accounts, accountGroups, accountSearch, onSelectAccount, currentAccount, isVirtualized, }: AccountMenuProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ accounts, accountGroups, accountSearch, onSelectAccount, currentAccount, }: import('./AccountMenu').AccountMenuProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ accounts, accountGroups, accountSearch, onSelectAccount, currentAccount, isVirtualized, }: import('./AccountMenu').AccountMenuProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {
@@ -10,6 +10,7 @@ declare const meta: {
         accountSearch?: import('./AccountMenu').AccountSearchProps;
         currentAccount?: import('./AccountMenu').AccountMenuItem;
         onSelectAccount?: (id: string) => void;
+        isVirtualized?: boolean;
     };
 };
 export default meta;

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

@@ -20,6 +20,7 @@ declare const meta: {
         accounts?: import('./AccountMenu.tsx').AccountMenuItem[];
         accountGroups?: import('../index.ts').MenuItemGroups;
         accountSearch?: import('./AccountMenu.tsx').AccountSearchProps;
+        isVirtualized?: boolean;
     };
 };
 export default meta;

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

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ color, theme, defaultItemColor, defaultItemTheme, defaultItemSize, defaultIconTheme, groups, items, search, }: import('./Menu').MenuProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ color, theme, defaultItemColor, defaultItemTheme, defaultItemSize, defaultIconTheme, groups, items, search, isVirtualized, }: import('./Menu').MenuProps) => import("react/jsx-runtime").JSX.Element;
     parameters: {};
     args: {};
 };
@@ -12,6 +12,7 @@ export declare const CompanyInboxMenu: {
     args: {
         color: string;
         theme: string;
+        isVirtualized?: boolean;
         level?: number;
         expanded?: boolean;
         search?: import('./MenuSearch').MenuSearchProps;
@@ -27,6 +28,7 @@ export declare const PersonInboxMenu: {
     args: {
         color: string;
         theme: string;
+        isVirtualized?: boolean;
         level?: number;
         expanded?: boolean;
         search?: import('./MenuSearch').MenuSearchProps;
@@ -43,6 +45,7 @@ export declare const NeutralCompanyMenu: {
     args: {
         color: string;
         theme?: import('./MenuBase').MenuTheme;
+        isVirtualized?: boolean;
         level?: number;
         expanded?: boolean;
         search?: import('./MenuSearch').MenuSearchProps;
@@ -59,6 +62,7 @@ export declare const NeutralPersonMenu: {
     args: {
         color: string;
         theme?: import('./MenuBase').MenuTheme;
+        isVirtualized?: boolean;
         level?: number;
         expanded?: boolean;
         search?: import('./MenuSearch').MenuSearchProps;

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

@@ -4,5 +4,6 @@ import { MenuItemsProps } from './MenuItems';
 export interface MenuProps extends MenuItemsProps {
     color?: MenuItemColor;
     theme?: MenuTheme;
+    isVirtualized?: boolean;
 }
-export declare const Menu: ({ color, theme, defaultItemColor, defaultItemTheme, defaultItemSize, defaultIconTheme, groups, items, search, }: MenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Menu: ({ color, theme, defaultItemColor, defaultItemTheme, defaultItemSize, defaultIconTheme, groups, items, search, isVirtualized, }: 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';
 declare const meta: {
     title: string;
-    component: ({ color, theme, defaultItemColor, defaultItemTheme, defaultItemSize, defaultIconTheme, groups, items, search, }: import('./Menu').MenuProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ color, theme, defaultItemColor, defaultItemTheme, defaultItemSize, defaultIconTheme, groups, items, search, isVirtualized, }: import('./Menu').MenuProps) => import("react/jsx-runtime").JSX.Element;
     parameters: {};
     args: {};
 };

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

@@ -24,7 +24,9 @@ export interface MenuListItemProps {
     expanded?: boolean;
     className?: string;
     children?: ReactNode;
+    style?: React.CSSProperties;
+    dataIndex?: number;
 }
 export declare const MenuBase: ({ as, color, theme, className, children }: MenuBaseProps) => import("react/jsx-runtime").JSX.Element;
 export declare const MenuList: ({ as, role, className, children }: MenuListProps) => import("react/jsx-runtime").JSX.Element;
-export declare const MenuListItem: ({ as, role, className, children }: MenuListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuListItem: ({ as, role, className, children, style, dataIndex, }: MenuListItemProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -1,13 +1,18 @@
 import { StoryObj } from '@storybook/react';
+import { MenuSearchProps } from './MenuSearch';
 declare const meta: {
     title: string;
-    component: ({ value, name, placeholder, clearButtonAltText, onChange, onClear, }: import('./MenuSearch').MenuSearchProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ value, name, placeholder, clearButtonAltText, onChange, onClear, }: MenuSearchProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {
         name: string;
+        placeholder: string;
+        onClear: () => void;
+        onChange: () => void;
     };
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const WithState: (args: MenuSearchProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -18,5 +18,6 @@ export declare const StaticFilters: Story;
 export declare const HiddenFilters: Story;
 export declare const WithAccountMenu: Story;
 export declare const WithSearch: Story;
+export declare const LongListAccounts: Story;
 export declare const ControlledStateFilters: (args: typeof Toolbar) => import("react/jsx-runtime").JSX.Element;
 export declare const ControlledStateAccount: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Toolbar/ToolbarAccountMenu.d.ts

@@ -1,5 +1,6 @@
 import { AccountMenuProps } from '../';
 export interface ToolbarAccountMenuProps extends AccountMenuProps {
     id?: string;
+    isVirtualized?: boolean;
 }
 export declare const ToolbarAccountMenu: ({ currentAccount, id, onSelectAccount, ...rest }: ToolbarAccountMenuProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.22.7",
+  "version": "0.23.0",
   "main": "dist/index.js",
   "files": [
     "dist/",
@@ -21,6 +21,7 @@
   "license": "ISC",
   "dependencies": {
     "@navikt/aksel-icons": "^7.9.2",
+    "@tanstack/react-virtual": "^3.13.4",
     "classnames": "^2.5.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"