@altinn/altinn-components 0.62.0 → 0.63.0

package/dist/assets/SettingsListVirtual.css

@@ -0,0 +1 @@
+._virtualScrollRefWrapper_5p35f_1{margin:0 -1rem}._virtualScrollRef_5p35f_1{height:100vh;overflow-y:auto;overflow-x:hidden;padding:0 1rem}._virtualList_5p35f_12{list-style-type:none;padding:0;margin:0;isolation:isolate}._virtualListItem_5p35f_19{position:absolute;top:0;left:0;width:100%}._virtualListItem_5p35f_19:focus-within,._virtualListItem_5p35f_19:has([aria-expanded=true]){z-index:20}._virtualListItem_5p35f_19>*{margin:0}._virtualTitleItem_5p35f_35{position:absolute;top:0;left:0;width:100%;padding-bottom:1.5rem}._groupCard_5p35f_43{background-color:var(--ds-color-surface-default);padding:0 .5rem;box-shadow:var(--ds-shadow-xs)}._groupCardFirst_5p35f_49{border-top-left-radius:1rem;border-top-right-radius:1rem;padding-top:.375rem}._groupCardLast_5p35f_55{border-bottom-left-radius:1rem;border-bottom-right-radius:1rem;padding-bottom:.375rem}._groupCardNotFirst_5p35f_61>*{border-top:1px solid var(--ds-color-border-subtle)}._groupGapDefault_5p35f_65{padding-bottom:1.5rem}._groupGapMenu_5p35f_69{padding-bottom:.5rem}

package/dist/components/Settings/SettingsItemBase.js

@@ -1,18 +1,18 @@
-import { jsxs as m, jsx as a, Fragment as g } from "react/jsx-runtime";
-import { h as u, H as c, B, v as C } from "../../ToolbarSearch-56Sm2j7P.js";
+import { jsxs as t, jsx as a, Fragment as u } from "react/jsx-runtime";
+import { h as B, H as c, B as C, v as b } from "../../ToolbarSearch-56Sm2j7P.js";
 import "../../index-p1eeF8LQ.js";
 import "react";
-import { Typography as b } from "../Typography/Typography.js";
+import { Typography as w } from "../Typography/Typography.js";
 import "../Typography/Link.js";
-import { ItemControls as w } from "../Item/ItemControls.js";
-import { ItemBase as R } from "../Item/ItemBase.js";
-import { ItemLink as j } from "../Item/ItemLink.js";
+import { ItemControls as R } from "../Item/ItemControls.js";
+import { ItemBase as j } from "../Item/ItemBase.js";
+import { ItemLink as H } from "../Item/ItemLink.js";
 import "../Button/Button.js";
 import "react-dom";
 import "../Snackbar/useSnackbar.js";
-import { S as H } from "../../ChevronUp-hn05LboH.js";
-import { S as z } from "../../ChevronDown-D_a7nb-G.js";
-import '../../assets/SettingsItemBase.css';const D = "_listItem_1p24v_1", F = "_summary_1p24v_23", L = "_item_1p24v_27", M = "_media_1p24v_45", T = "_link_1p24v_59", U = "_linkIcon_1p24v_69", q = "_label_1p24v_75", A = "_controls_1p24v_88", s = {
+import { S as z } from "../../ChevronUp-hn05LboH.js";
+import { S as A } from "../../ChevronDown-D_a7nb-G.js";
+import '../../assets/SettingsItemBase.css';const D = "_listItem_1p24v_1", F = "_summary_1p24v_23", L = "_item_1p24v_27", M = "_media_1p24v_45", T = "_link_1p24v_59", U = "_linkIcon_1p24v_69", q = "_label_1p24v_75", E = "_controls_1p24v_88", s = {
   listItem: D,
   summary: F,
   item: L,
@@ -20,13 +20,13 @@ import '../../assets/SettingsItemBase.css';const D = "_listItem_1p24v_1", F = "_
   link: T,
   linkIcon: U,
   label: q,
-  controls: A
-}, as = ({
+  controls: E
+}, ts = ({
   as: p,
   ref: _,
   hidden: v,
   disabled: e,
-  loading: t,
+  loading: m,
   color: d,
   collapsible: o,
   expanded: i,
@@ -36,23 +36,24 @@ import '../../assets/SettingsItemBase.css';const D = "_listItem_1p24v_1", F = "_
   descriptionProps: k = {},
   summary: n,
   children: f,
-  highlightWords: l,
-  badge: r,
+  highlightWords: r,
+  badge: l,
   linkIcon: x,
   controls: y,
-  ...S
-}) => /* @__PURE__ */ m("li", { className: s.listItem, "data-collapsible": o, "data-expanded": i, children: [
-  /* @__PURE__ */ m(R, { ref: _, as: "div", className: s.item, color: d, "aria-hidden": v, "data-loading": t, children: [
-    /* @__PURE__ */ m(j, { ...S, className: s.link, disabled: e, as: p, children: [
-      /* @__PURE__ */ a(u, { icon: I, className: s.media }),
-      N || /* @__PURE__ */ m("span", { className: s.label, children: [
+  containerAs: S = "li",
+  ...g
+}) => /* @__PURE__ */ t(S, { className: s.listItem, "data-collapsible": o, "data-expanded": i, children: [
+  /* @__PURE__ */ t(j, { ref: _, as: "div", className: s.item, color: d, "aria-hidden": v, "data-loading": m, children: [
+    /* @__PURE__ */ t(H, { ...g, className: s.link, disabled: e, as: p, children: [
+      /* @__PURE__ */ a(B, { icon: I, className: s.media }),
+      N || /* @__PURE__ */ t("span", { className: s.label, children: [
         /* @__PURE__ */ a(
           c,
           {
             ...h,
             as: "span",
-            highlightWords: l,
-            loading: t,
+            highlightWords: r,
+            loading: m,
             maxRows: 2,
             className: s.title
           }
@@ -62,23 +63,23 @@ import '../../assets/SettingsItemBase.css';const D = "_listItem_1p24v_1", F = "_
           {
             ...k,
             as: "span",
-            highlightWords: l,
-            loading: t,
+            highlightWords: r,
+            loading: m,
             maxRows: 2,
             className: s.description
           }
         )
       ] })
     ] }),
-    !e && /* @__PURE__ */ m(g, { children: [
-      /* @__PURE__ */ a(w, { className: s.controls, children: y }),
-      r && /* @__PURE__ */ a(B, { ...r }),
-      o && (i ? /* @__PURE__ */ a(H, { className: s.linkIcon }) : /* @__PURE__ */ a(z, { className: s.linkIcon })) || x && /* @__PURE__ */ a(C, { className: s.linkIcon })
+    !e && /* @__PURE__ */ t(u, { children: [
+      /* @__PURE__ */ a(R, { className: s.controls, children: y }),
+      l && /* @__PURE__ */ a(C, { ...l }),
+      o && (i ? /* @__PURE__ */ a(z, { className: s.linkIcon }) : /* @__PURE__ */ a(A, { className: s.linkIcon })) || x && /* @__PURE__ */ a(b, { className: s.linkIcon })
     ] })
   ] }),
-  n && /* @__PURE__ */ a(b, { className: s.summary, size: "xs", variant: "subtle", children: n }),
+  n && /* @__PURE__ */ a(w, { className: s.summary, size: "xs", variant: "subtle", children: n }),
   f
 ] });
 export {
-  as as SettingsItemBase
+  ts as SettingsItemBase
 };

package/dist/components/Settings/SettingsList.js

@@ -1,42 +1,51 @@
-import { jsx as t, jsxs as a } from "react/jsx-runtime";
-import { Fragment as c, createElement as d } from "react";
+import { jsx as t, jsxs as u } from "react/jsx-runtime";
+import { Fragment as f, createElement as g } from "react";
 import "../../index-p1eeF8LQ.js";
-import { useMenu as N } from "../../hooks/useMenu.js";
-import { H as u } from "../../ToolbarSearch-56Sm2j7P.js";
+import { useMenu as x } from "../../hooks/useMenu.js";
+import { H as h } from "../../ToolbarSearch-56Sm2j7P.js";
 import "../Typography/Link.js";
 import "../Button/Button.js";
 import { s } from "../../settlingsList.module-So3_AYgj.js";
 import "react-dom";
 import "../Snackbar/useSnackbar.js";
-import { SettingsItem as g } from "./SettingsItem.js";
-const w = ({ items: h, variant: i = "default", groups: f = {}, sortGroupBy: y }) => {
-  const { menu: p } = N({
-    items: h,
-    groups: f,
+import { SettingsItem as y } from "./SettingsItem.js";
+import { SettingsListVirtual as P } from "./SettingsListVirtual.js";
+const K = ({
+  items: p,
+  variant: i = "default",
+  groups: a = {},
+  sortGroupBy: c,
+  virtualized: N
+}) => {
+  if (N)
+    return /* @__PURE__ */ t(P, { items: p, variant: i, groups: a, sortGroupBy: c });
+  const { menu: d } = x({
+    items: p,
+    groups: a,
     groupByKey: "groupId",
     keyboardEvents: !1,
-    sortGroupBy: y
+    sortGroupBy: c
   });
-  return i === "menu" ? /* @__PURE__ */ t("div", { className: s.section, "data-variant": i, children: p?.map((e, o) => {
+  return i === "menu" ? /* @__PURE__ */ t("div", { className: s.section, "data-variant": i, children: d?.map((e, m) => {
     const r = e.props || {};
-    return /* @__PURE__ */ a(c, { children: [
-      r?.title && /* @__PURE__ */ t(u, { size: "xs", weight: "normal", variant: "subtle", children: r.title }),
-      /* @__PURE__ */ t("ul", { className: s.list, children: e?.items.map((m, n) => {
-        const l = m.props || {};
-        return /* @__PURE__ */ d(g, { ...l, key: "settings-list-item" + n });
+    return /* @__PURE__ */ u(f, { children: [
+      r?.title && /* @__PURE__ */ t(h, { size: "xs", weight: "normal", variant: "subtle", children: r.title }),
+      /* @__PURE__ */ t("ul", { className: s.list, children: e?.items.map((o, n) => {
+        const l = o.props || {};
+        return /* @__PURE__ */ g(y, { ...l, key: "settings-list-item" + n });
       }) })
-    ] }, o);
-  }) }) : /* @__PURE__ */ t("div", { className: s.section, "data-variant": i, children: p?.map((e, o) => {
+    ] }, m);
+  }) }) : /* @__PURE__ */ t("div", { className: s.section, "data-variant": i, children: d?.map((e, m) => {
     const r = e.props || {};
-    return /* @__PURE__ */ a(c, { children: [
-      r?.title && /* @__PURE__ */ t(u, { size: "lg", children: r.title }),
-      /* @__PURE__ */ t("section", { className: s.group, children: /* @__PURE__ */ t("ul", { className: s.list, children: e?.items.map((m, n) => {
-        const l = m.props || {};
-        return /* @__PURE__ */ d(g, { ...l, key: "settings-list-item" + n });
+    return /* @__PURE__ */ u(f, { children: [
+      r?.title && /* @__PURE__ */ t(h, { size: "lg", children: r.title }),
+      /* @__PURE__ */ t("section", { className: s.group, children: /* @__PURE__ */ t("ul", { className: s.list, children: e?.items.map((o, n) => {
+        const l = o.props || {};
+        return /* @__PURE__ */ g(y, { ...l, key: "settings-list-item" + n });
       }) }) })
-    ] }, o);
+    ] }, m);
   }) });
 };
 export {
-  w as SettingsList
+  K as SettingsList
 };

package/dist/components/Settings/SettingsListVirtual.js

@@ -0,0 +1,115 @@
+"use client";
+import { jsx as i } from "react/jsx-runtime";
+import { u as C } from "../../useMenuVirtualization-Cs426RCN.js";
+import { useRef as h, useEffect as y } from "react";
+import "../../index-p1eeF8LQ.js";
+import { useMenu as L } from "../../hooks/useMenu.js";
+import { H as f } from "../../ToolbarSearch-56Sm2j7P.js";
+import "../Typography/Link.js";
+import "../Button/Button.js";
+import "react-dom";
+import "../Snackbar/useSnackbar.js";
+import { SettingsItem as G } from "./SettingsItem.js";
+import '../../assets/SettingsListVirtual.css';const S = "_virtualScrollRefWrapper_5p35f_1", x = "_virtualScrollRef_5p35f_1", F = "_virtualList_5p35f_12", N = "_virtualListItem_5p35f_19", z = "_virtualTitleItem_5p35f_35", M = "_groupCard_5p35f_43", $ = "_groupCardFirst_5p35f_49", E = "_groupCardLast_5p35f_55", R = "_groupCardNotFirst_5p35f_61", T = "_groupGapDefault_5p35f_65", W = "_groupGapMenu_5p35f_69", e = {
+  virtualScrollRefWrapper: S,
+  virtualScrollRef: x,
+  virtualList: F,
+  virtualListItem: N,
+  virtualTitleItem: z,
+  groupCard: M,
+  groupCardFirst: $,
+  groupCardLast: E,
+  groupCardNotFirst: R,
+  groupGapDefault: T,
+  groupGapMenu: W
+}, K = ({
+  items: d,
+  variant: o = "default",
+  groups: g = {},
+  sortGroupBy: _
+}) => {
+  const a = h(null), { menu: I } = L({
+    items: d,
+    groups: g,
+    groupByKey: "groupId",
+    keyboardEvents: !1,
+    sortGroupBy: _
+  }), u = I.flatMap((r) => {
+    const t = r?.props || {}, { title: s } = t, n = r?.items || [], l = [];
+    return s && l.push({ type: "title", title: s }), n.forEach((v, m) => {
+      l.push({
+        type: "item",
+        itemProps: v.props || {},
+        isFirstInGroup: m === 0,
+        isLastInGroup: m === n.length - 1
+      });
+    }), l;
+  }), p = C({
+    count: u.length,
+    useAnimationFrameWithResizeObserver: !0,
+    gap: 0,
+    estimateSize: (r) => {
+      const t = u[r];
+      if (!t) return 56;
+      if (t.type === "title") return r === 0 ? 48 : 72;
+      const s = o === "menu" ? 8 : 24;
+      return t.isLastInGroup ? 56 + s : 56;
+    },
+    getScrollElement: () => a.current
+  }), c = p.getVirtualItems();
+  return y(() => {
+    for (const r of c) {
+      const t = a.current?.querySelector(`[data-index="${r.index}"]`) ?? a.current?.querySelector(`[dataindex="${r.index}"]`) ?? a.current?.querySelector(`[dataIndex="${r.index}"]`);
+      t && p.measureElement(t);
+    }
+  }, [c]), /* @__PURE__ */ i("div", { className: e.virtualScrollRefWrapper, children: /* @__PURE__ */ i("div", { ref: a, className: e.virtualScrollRef, children: /* @__PURE__ */ i(
+    "ul",
+    {
+      className: e.virtualList,
+      style: {
+        position: "relative",
+        height: `${p.getTotalSize()}px`
+      },
+      children: c.map((r) => {
+        const t = u[r.index];
+        if (!t) return null;
+        if (t.type === "title")
+          return /* @__PURE__ */ i(
+            "li",
+            {
+              "data-index": r.index,
+              className: e.virtualTitleItem,
+              style: {
+                transform: `translateY(${r.start}px)`,
+                paddingBottom: o === "menu" ? "0.5rem" : "1.5rem"
+              },
+              children: o === "menu" ? /* @__PURE__ */ i(f, { size: "xs", weight: "normal", variant: "subtle", children: t.title }) : /* @__PURE__ */ i(f, { size: "lg", children: t.title })
+            },
+            r.key
+          );
+        const s = o === "default", n = [
+          e.virtualListItem,
+          t.isLastInGroup ? o === "menu" ? e.groupGapMenu : e.groupGapDefault : ""
+        ].filter(Boolean).join(" "), l = [
+          s ? e.groupCard : "",
+          s && t.isFirstInGroup ? e.groupCardFirst : "",
+          s && t.isLastInGroup ? e.groupCardLast : "",
+          s && !t.isFirstInGroup ? e.groupCardNotFirst : ""
+        ].filter(Boolean).join(" ");
+        return /* @__PURE__ */ i(
+          "li",
+          {
+            "data-index": r.index,
+            className: n,
+            style: { transform: `translateY(${r.start}px)` },
+            children: /* @__PURE__ */ i("div", { className: l, children: /* @__PURE__ */ i(G, { ...t.itemProps, containerAs: "div" }) })
+          },
+          r.key
+        );
+      })
+    }
+  ) }) });
+};
+export {
+  K as SettingsListVirtual
+};

package/dist/components/Settings/index.js

@@ -1,16 +1,18 @@
 import { SettingsItem as o } from "./SettingsItem.js";
 import { SettingsItemBase as m } from "./SettingsItemBase.js";
-import { SettingsList as f } from "./SettingsList.js";
-import { SettingsSection as i } from "./SettingsSection.js";
-import { SettingsModal as x } from "./SettingsModal.js";
-import { UsedByLog as S } from "./UsedByLog.js";
+import { SettingsList as i } from "./SettingsList.js";
+import { SettingsListVirtual as g } from "./SettingsListVirtual.js";
+import { SettingsSection as x } from "./SettingsSection.js";
+import { SettingsModal as S } from "./SettingsModal.js";
+import { UsedByLog as a } from "./UsedByLog.js";
 import { UsedByLogItem as B } from "./UsedByLogItem.js";
 export {
   o as SettingsItem,
   m as SettingsItemBase,
-  f as SettingsList,
-  x as SettingsModal,
-  i as SettingsSection,
-  S as UsedByLog,
+  i as SettingsList,
+  g as SettingsListVirtual,
+  S as SettingsModal,
+  x as SettingsSection,
+  a as UsedByLog,
   B as UsedByLogItem
 };

package/dist/components/index.js

@@ -170,33 +170,34 @@ import { CheckboxOptions as Ya } from "./Forms/CheckboxOptions.js";
 import { SettingsItem as _a } from "./Settings/SettingsItem.js";
 import { SettingsItemBase as op } from "./Settings/SettingsItemBase.js";
 import { SettingsList as ep } from "./Settings/SettingsList.js";
-import { SettingsSection as mp } from "./Settings/SettingsSection.js";
-import { SettingsModal as pp } from "./Settings/SettingsModal.js";
-import { UsedByLog as fp } from "./Settings/UsedByLog.js";
-import { UsedByLogItem as sp } from "./Settings/UsedByLogItem.js";
-import { DashboardHeader as lp } from "./Dashboard/DashboardHeader.js";
-import { DashboardCard as up } from "./Dashboard/DashboardCard.js";
-import { ActivityLog as gp } from "./ActivityLog/ActivityLog.js";
-import { ActivityLogSegment as Lp } from "./ActivityLog/ActivityLogSegment.js";
-import { ActivityLogItem as Ip } from "./ActivityLog/ActivityLogItem.js";
-import { ArticleHeader as bp } from "./Article/ArticleHeader.js";
-import { ArticleContact as Mp } from "./Article/ArticleContact.js";
-import { Article as Tp } from "./Article/Article.js";
-import { ModalBase as hp } from "./Modal/ModalBase.js";
-import { ModalHeader as Cp } from "./Modal/ModalHeader.js";
-import { ModalFooter as Hp } from "./Modal/ModalFooter.js";
-import { ModalIcon as wp } from "./Modal/ModalIcon.js";
-import { ModalBody as Rp } from "./Modal/ModalBody.js";
-import { Modal as Np } from "./Modal/Modal.js";
-import { Tooltip as Vp } from "./Tooltip/Tooltip.js";
-import { A as zp } from "../alert-BzifOfXl.js";
-import { B as jp, C as qp, a as Jp, b as Kp, D as Wp, L as Xp, c as Yp, P as Zp, d as _p, e as $p, f as ox, S as rx, g as ex, T as tx, u as mx } from "../textfield-f4Za2qt6.js";
-import { B as px, S as xx } from "../button-BB5sYVKY.js";
-import { D as ix } from "../index-Q0EA2XB0.js";
-import { H as nx } from "../heading-C_XYsUfi.js";
-import { L as cx } from "../link-D1SA3LCe.js";
-import { P as dx } from "../paragraph-BRiIBpbY.js";
-import { V as Dx } from "../index-z82sbSVU.js";
+import { SettingsListVirtual as mp } from "./Settings/SettingsListVirtual.js";
+import { SettingsSection as pp } from "./Settings/SettingsSection.js";
+import { SettingsModal as fp } from "./Settings/SettingsModal.js";
+import { UsedByLog as sp } from "./Settings/UsedByLog.js";
+import { UsedByLogItem as lp } from "./Settings/UsedByLogItem.js";
+import { DashboardHeader as up } from "./Dashboard/DashboardHeader.js";
+import { DashboardCard as gp } from "./Dashboard/DashboardCard.js";
+import { ActivityLog as Lp } from "./ActivityLog/ActivityLog.js";
+import { ActivityLogSegment as Ip } from "./ActivityLog/ActivityLogSegment.js";
+import { ActivityLogItem as bp } from "./ActivityLog/ActivityLogItem.js";
+import { ArticleHeader as Mp } from "./Article/ArticleHeader.js";
+import { ArticleContact as Tp } from "./Article/ArticleContact.js";
+import { Article as hp } from "./Article/Article.js";
+import { ModalBase as Cp } from "./Modal/ModalBase.js";
+import { ModalHeader as Hp } from "./Modal/ModalHeader.js";
+import { ModalFooter as wp } from "./Modal/ModalFooter.js";
+import { ModalIcon as Rp } from "./Modal/ModalIcon.js";
+import { ModalBody as Np } from "./Modal/ModalBody.js";
+import { Modal as Vp } from "./Modal/Modal.js";
+import { Tooltip as zp } from "./Tooltip/Tooltip.js";
+import { A as jp } from "../alert-BzifOfXl.js";
+import { B as Jp, C as Kp, a as Wp, b as Xp, D as Yp, L as Zp, c as _p, P as $p, d as ox, e as rx, f as ex, S as tx, g as mx, T as ax, u as px } from "../textfield-f4Za2qt6.js";
+import { B as fx, S as ix } from "../button-BB5sYVKY.js";
+import { D as nx } from "../index-Q0EA2XB0.js";
+import { H as cx } from "../heading-C_XYsUfi.js";
+import { L as dx } from "../link-D1SA3LCe.js";
+import { P as Dx } from "../paragraph-BRiIBpbY.js";
+import { V as Bx } from "../index-z82sbSVU.js";
 export {
   fa as AccessAreaListItem,
   sa as AccessPackageListItem,
@@ -208,13 +209,13 @@ export {
   b as AccountNotificationSettings,
   M as AccountOrganization,
   T as AccountSelector,
-  gp as ActivityLog,
-  Ip as ActivityLogItem,
-  Lp as ActivityLogSegment,
+  Lp as ActivityLog,
+  bp as ActivityLogItem,
+  Ip as ActivityLogSegment,
   h as Alert,
-  Tp as Article,
-  Mp as ArticleContact,
-  bp as ArticleHeader,
+  hp as Article,
+  Tp as ArticleContact,
+  Mp as ArticleHeader,
   m as AttachmentLink,
   p as AttachmentList,
   Rt as Autocomplete,
@@ -249,8 +250,8 @@ export {
   qm as ContactButtons,
   Qm as ContactSection,
   Go as ContextMenu,
-  up as DashboardCard,
-  lp as DashboardHeader,
+  gp as DashboardCard,
+  up as DashboardHeader,
   Oo as Dialog,
   ar as DialogActions,
   xr as DialogActivityLog,
@@ -281,28 +282,28 @@ export {
   Fr as DrawerHeader,
   N as Dropdown,
   Ar as DropdownBase,
-  zp as DsAlert,
-  jp as DsBadge,
-  px as DsButton,
-  qp as DsCheckbox,
-  Jp as DsChip,
-  Kp as DsCombobox,
-  ix as DsDetails,
-  Wp as DsDialog,
-  nx as DsHeading,
-  cx as DsLink,
-  Xp as DsListItem,
-  Yp as DsListUnordered,
-  Zp as DsPagination,
-  dx as DsParagraph,
-  _p as DsPopover,
-  $p as DsSearch,
-  ox as DsSkeleton,
-  xx as DsSpinner,
-  rx as DsSwitch,
-  ex as DsTabs,
-  tx as DsTextfield,
-  Dx as DsValidationMessage,
+  jp as DsAlert,
+  Jp as DsBadge,
+  fx as DsButton,
+  Kp as DsCheckbox,
+  Wp as DsChip,
+  Xp as DsCombobox,
+  nx as DsDetails,
+  Yp as DsDialog,
+  cx as DsHeading,
+  dx as DsLink,
+  Zp as DsListItem,
+  _p as DsListUnordered,
+  $p as DsPagination,
+  Dx as DsParagraph,
+  ox as DsPopover,
+  rx as DsSearch,
+  ex as DsSkeleton,
+  ix as DsSpinner,
+  tx as DsSwitch,
+  mx as DsTabs,
+  ax as DsTextfield,
+  Bx as DsValidationMessage,
   ua as Field,
   O as FieldBase,
   ga as Fieldset,
@@ -360,12 +361,12 @@ export {
   X as MetaItemIcon,
   st as MetaTimestamp,
   lt as Metadata,
-  Np as Modal,
-  hp as ModalBase,
-  Rp as ModalBody,
-  Hp as ModalFooter,
-  Cp as ModalHeader,
-  wp as ModalIcon,
+  Vp as Modal,
+  Cp as ModalBase,
+  Np as ModalBody,
+  wp as ModalFooter,
+  Hp as ModalHeader,
+  Rp as ModalIcon,
   ut as NotificationItem,
   gt as NotificationItemBase,
   Lt as NotificationItemControls,
@@ -400,8 +401,9 @@ export {
   _a as SettingsItem,
   op as SettingsItemBase,
   ep as SettingsList,
-  pp as SettingsModal,
-  mp as SettingsSection,
+  mp as SettingsListVirtual,
+  fp as SettingsModal,
+  pp as SettingsSection,
   e as SizeEnum,
   Xt as Skeleton,
   Vt as Snackbar,
@@ -429,21 +431,21 @@ export {
   Dm as ToolbarFilterMenu,
   _ as ToolbarMenu,
   $ as ToolbarSearch,
-  Vp as Tooltip,
+  zp as Tooltip,
   Xm as Transmission,
   oa as TransmissionList,
   Zm as TransmissionType,
   _m as TransmissionTypeEnum,
   ea as Typography,
-  fp as UsedByLog,
-  sp as UsedByLogItem,
+  sp as UsedByLog,
+  lp as UsedByLogItem,
   la as UserListItem,
   oo as VirtualizedMenuItems,
   l as isAvatarGroupProps,
   i as isAvatarProps,
   Ne as isHeadingProps,
   ro as isIconProps,
-  mx as useDsPagination,
+  px as useDsPagination,
   Bm as useFilter,
   eo as useRootContext,
   Kt as useSnackbar

package/dist/index.js

@@ -170,40 +170,41 @@ import { CheckboxOptions as Ya } from "./components/Forms/CheckboxOptions.js";
 import { SettingsItem as _a } from "./components/Settings/SettingsItem.js";
 import { SettingsItemBase as op } from "./components/Settings/SettingsItemBase.js";
 import { SettingsList as ep } from "./components/Settings/SettingsList.js";
-import { SettingsSection as mp } from "./components/Settings/SettingsSection.js";
-import { SettingsModal as pp } from "./components/Settings/SettingsModal.js";
-import { UsedByLog as fp } from "./components/Settings/UsedByLog.js";
-import { UsedByLogItem as sp } from "./components/Settings/UsedByLogItem.js";
-import { DashboardHeader as lp } from "./components/Dashboard/DashboardHeader.js";
-import { DashboardCard as up } from "./components/Dashboard/DashboardCard.js";
-import { ActivityLog as gp } from "./components/ActivityLog/ActivityLog.js";
-import { ActivityLogSegment as Lp } from "./components/ActivityLog/ActivityLogSegment.js";
-import { ActivityLogItem as Ip } from "./components/ActivityLog/ActivityLogItem.js";
-import { ArticleHeader as bp } from "./components/Article/ArticleHeader.js";
-import { ArticleContact as Mp } from "./components/Article/ArticleContact.js";
-import { Article as Tp } from "./components/Article/Article.js";
-import { ModalBase as hp } from "./components/Modal/ModalBase.js";
-import { ModalHeader as Cp } from "./components/Modal/ModalHeader.js";
-import { ModalFooter as Hp } from "./components/Modal/ModalFooter.js";
-import { ModalIcon as wp } from "./components/Modal/ModalIcon.js";
-import { ModalBody as Np } from "./components/Modal/ModalBody.js";
-import { Modal as Ep } from "./components/Modal/Modal.js";
-import { Tooltip as Vp } from "./components/Tooltip/Tooltip.js";
-import { useClickOutside as zp } from "./hooks/useClickOutside.js";
-import { useEscapeKey as jp } from "./hooks/useEscapeKey.js";
-import { useMenu as qp } from "./hooks/useMenu.js";
-import { useAccountSelector as Wp } from "./hooks/useAccountSelector.js";
-import { formatDisplayName as Yp } from "./functions/name/name.js";
-import { formatDate as _p } from "./functions/date/date.js";
-import { formatOrgNo as ox } from "./functions/orgno/orgno.js";
-import { A as ex } from "./alert-BzifOfXl.js";
-import { B as mx, C as ax, a as px, b as xx, D as fx, L as ix, c as sx, P as nx, d as lx, e as cx, f as ux, S as dx, g as gx, T as Dx, u as Lx } from "./textfield-f4Za2qt6.js";
-import { B as Ix, S as Sx } from "./button-BB5sYVKY.js";
-import { D as Ax } from "./index-Q0EA2XB0.js";
-import { H as yx } from "./heading-C_XYsUfi.js";
-import { L as kx } from "./link-D1SA3LCe.js";
-import { P as Fx } from "./paragraph-BRiIBpbY.js";
-import { V as Px } from "./index-z82sbSVU.js";
+import { SettingsListVirtual as mp } from "./components/Settings/SettingsListVirtual.js";
+import { SettingsSection as pp } from "./components/Settings/SettingsSection.js";
+import { SettingsModal as fp } from "./components/Settings/SettingsModal.js";
+import { UsedByLog as sp } from "./components/Settings/UsedByLog.js";
+import { UsedByLogItem as lp } from "./components/Settings/UsedByLogItem.js";
+import { DashboardHeader as up } from "./components/Dashboard/DashboardHeader.js";
+import { DashboardCard as gp } from "./components/Dashboard/DashboardCard.js";
+import { ActivityLog as Lp } from "./components/ActivityLog/ActivityLog.js";
+import { ActivityLogSegment as Ip } from "./components/ActivityLog/ActivityLogSegment.js";
+import { ActivityLogItem as bp } from "./components/ActivityLog/ActivityLogItem.js";
+import { ArticleHeader as Mp } from "./components/Article/ArticleHeader.js";
+import { ArticleContact as Tp } from "./components/Article/ArticleContact.js";
+import { Article as hp } from "./components/Article/Article.js";
+import { ModalBase as Cp } from "./components/Modal/ModalBase.js";
+import { ModalHeader as Hp } from "./components/Modal/ModalHeader.js";
+import { ModalFooter as wp } from "./components/Modal/ModalFooter.js";
+import { ModalIcon as Np } from "./components/Modal/ModalIcon.js";
+import { ModalBody as Ep } from "./components/Modal/ModalBody.js";
+import { Modal as Vp } from "./components/Modal/Modal.js";
+import { Tooltip as zp } from "./components/Tooltip/Tooltip.js";
+import { useClickOutside as jp } from "./hooks/useClickOutside.js";
+import { useEscapeKey as qp } from "./hooks/useEscapeKey.js";
+import { useMenu as Wp } from "./hooks/useMenu.js";
+import { useAccountSelector as Yp } from "./hooks/useAccountSelector.js";
+import { formatDisplayName as _p } from "./functions/name/name.js";
+import { formatDate as ox } from "./functions/date/date.js";
+import { formatOrgNo as ex } from "./functions/orgno/orgno.js";
+import { A as mx } from "./alert-BzifOfXl.js";
+import { B as px, C as xx, a as fx, b as ix, D as sx, L as nx, c as lx, P as cx, d as ux, e as dx, f as gx, S as Dx, g as Lx, T as Bx, u as Ix } from "./textfield-f4Za2qt6.js";
+import { B as bx, S as Ax } from "./button-BB5sYVKY.js";
+import { D as yx } from "./index-Q0EA2XB0.js";
+import { H as kx } from "./heading-C_XYsUfi.js";
+import { L as Fx } from "./link-D1SA3LCe.js";
+import { P as Px } from "./paragraph-BRiIBpbY.js";
+import { V as vx } from "./index-z82sbSVU.js";
 export {
   fa as AccessAreaListItem,
   sa as AccessPackageListItem,
@@ -215,13 +216,13 @@ export {
   b as AccountNotificationSettings,
   M as AccountOrganization,
   T as AccountSelector,
-  gp as ActivityLog,
-  Ip as ActivityLogItem,
-  Lp as ActivityLogSegment,
+  Lp as ActivityLog,
+  bp as ActivityLogItem,
+  Ip as ActivityLogSegment,
   h as Alert,
-  Tp as Article,
-  Mp as ArticleContact,
-  bp as ArticleHeader,
+  hp as Article,
+  Tp as ArticleContact,
+  Mp as ArticleHeader,
   m as AttachmentLink,
   p as AttachmentList,
   Nt as Autocomplete,
@@ -256,8 +257,8 @@ export {
   Km as ContactButtons,
   Qm as ContactSection,
   Go as ContextMenu,
-  up as DashboardCard,
-  lp as DashboardHeader,
+  gp as DashboardCard,
+  up as DashboardHeader,
   Ro as Dialog,
   ar as DialogActions,
   xr as DialogActivityLog,
@@ -288,28 +289,28 @@ export {
   Fr as DrawerHeader,
   E as Dropdown,
   Ar as DropdownBase,
-  ex as DsAlert,
-  mx as DsBadge,
-  Ix as DsButton,
-  ax as DsCheckbox,
-  px as DsChip,
-  xx as DsCombobox,
-  Ax as DsDetails,
-  fx as DsDialog,
-  yx as DsHeading,
-  kx as DsLink,
-  ix as DsListItem,
-  sx as DsListUnordered,
-  nx as DsPagination,
-  Fx as DsParagraph,
-  lx as DsPopover,
-  cx as DsSearch,
-  ux as DsSkeleton,
-  Sx as DsSpinner,
-  dx as DsSwitch,
-  gx as DsTabs,
-  Dx as DsTextfield,
-  Px as DsValidationMessage,
+  mx as DsAlert,
+  px as DsBadge,
+  bx as DsButton,
+  xx as DsCheckbox,
+  fx as DsChip,
+  ix as DsCombobox,
+  yx as DsDetails,
+  sx as DsDialog,
+  kx as DsHeading,
+  Fx as DsLink,
+  nx as DsListItem,
+  lx as DsListUnordered,
+  cx as DsPagination,
+  Px as DsParagraph,
+  ux as DsPopover,
+  dx as DsSearch,
+  gx as DsSkeleton,
+  Ax as DsSpinner,
+  Dx as DsSwitch,
+  Lx as DsTabs,
+  Bx as DsTextfield,
+  vx as DsValidationMessage,
   ua as Field,
   R as FieldBase,
   ga as Fieldset,
@@ -367,12 +368,12 @@ export {
   X as MetaItemIcon,
   st as MetaTimestamp,
   lt as Metadata,
-  Ep as Modal,
-  hp as ModalBase,
-  Np as ModalBody,
-  Hp as ModalFooter,
-  Cp as ModalHeader,
-  wp as ModalIcon,
+  Vp as Modal,
+  Cp as ModalBase,
+  Ep as ModalBody,
+  wp as ModalFooter,
+  Hp as ModalHeader,
+  Np as ModalIcon,
   ut as NotificationItem,
   gt as NotificationItemBase,
   Lt as NotificationItemControls,
@@ -407,8 +408,9 @@ export {
   _a as SettingsItem,
   op as SettingsItemBase,
   ep as SettingsList,
-  pp as SettingsModal,
-  mp as SettingsSection,
+  mp as SettingsListVirtual,
+  fp as SettingsModal,
+  pp as SettingsSection,
   e as SizeEnum,
   Xt as Skeleton,
   Vt as Snackbar,
@@ -436,29 +438,29 @@ export {
   Dm as ToolbarFilterMenu,
   _ as ToolbarMenu,
   $ as ToolbarSearch,
-  Vp as Tooltip,
+  zp as Tooltip,
   Xm as Transmission,
   oa as TransmissionList,
   Zm as TransmissionType,
   _m as TransmissionTypeEnum,
   ea as Typography,
-  fp as UsedByLog,
-  sp as UsedByLogItem,
+  sp as UsedByLog,
+  lp as UsedByLogItem,
   la as UserListItem,
   oo as VirtualizedMenuItems,
-  _p as formatDate,
-  Yp as formatDisplayName,
-  ox as formatOrgNo,
+  ox as formatDate,
+  _p as formatDisplayName,
+  ex as formatOrgNo,
   l as isAvatarGroupProps,
   i as isAvatarProps,
   Ee as isHeadingProps,
   ro as isIconProps,
-  Wp as useAccountSelector,
-  zp as useClickOutside,
-  Lx as useDsPagination,
-  jp as useEscapeKey,
+  Yp as useAccountSelector,
+  jp as useClickOutside,
+  Ix as useDsPagination,
+  qp as useEscapeKey,
   Bm as useFilter,
-  qp as useMenu,
+  Wp as useMenu,
   eo as useRootContext,
   Jt as useSnackbar
 };

package/dist/types/lib/components/Settings/SettingsItem.stories.d.ts

@@ -37,6 +37,7 @@ declare const meta: {
         linkIcon?: boolean | undefined;
         controls?: import('react').ReactNode;
         summary?: import('react').ReactNode;
+        containerAs?: "li" | "div" | undefined;
         as?: import('react').ElementType | undefined;
         href?: string | undefined;
         onClick?: (() => void) | undefined;

package/dist/types/lib/components/Settings/SettingsItemBase.d.ts

@@ -19,5 +19,6 @@ export interface SettingsItemBaseProps extends ItemLinkProps {
     controls?: ReactNode;
     children?: ReactNode;
     summary?: ReactNode;
+    containerAs?: 'li' | 'div';
 }
-export declare const SettingsItemBase: ({ as, ref, hidden, disabled, loading, color, collapsible, expanded, icon, label, titleProps, descriptionProps, summary, children, highlightWords, badge, linkIcon, controls, ...rest }: SettingsItemBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SettingsItemBase: ({ as, ref, hidden, disabled, loading, color, collapsible, expanded, icon, label, titleProps, descriptionProps, summary, children, highlightWords, badge, linkIcon, controls, containerAs: ContainerTag, ...rest }: SettingsItemBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Settings/SettingsList.d.ts

@@ -8,5 +8,6 @@ export interface SettingsListProps {
     items: SettingsItemProps[];
     groups?: Record<string, SettingsGroupProps>;
     sortGroupBy?: (a: [string, SettingsItemProps[]], b: [string, SettingsItemProps[]]) => number;
+    virtualized?: boolean;
 }
-export declare const SettingsList: ({ items, variant, groups, sortGroupBy }: SettingsListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SettingsList: ({ items, variant, groups, sortGroupBy, virtualized, }: SettingsListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Settings/SettingsListVirtual.d.ts

@@ -0,0 +1,9 @@
+import { SettingsItemProps } from '..';
+import { SettingsGroupProps, SettingsListProps } from './SettingsList';
+export interface SettingsListVirtualProps {
+    variant?: SettingsListProps['variant'];
+    items: SettingsItemProps[];
+    groups?: Record<string, SettingsGroupProps>;
+    sortGroupBy?: SettingsListProps['sortGroupBy'];
+}
+export declare const SettingsListVirtual: ({ items, variant, groups, sortGroupBy, }: SettingsListVirtualProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Settings/index.d.ts

@@ -1,6 +1,7 @@
 export * from './SettingsItem';
 export * from './SettingsItemBase';
 export * from './SettingsList';
+export * from './SettingsListVirtual';
 export * from './SettingsSection';
 export * from './SettingsModal';
 export * from './UsedByLog';

package/package.json

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