@altinn/altinn-components 0.61.3 → 0.63.0

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

@@ -69,7 +69,7 @@ import { ItemControls as ae } from "./Item/ItemControls.js";
 import { ItemSelect as xe } from "./Item/ItemSelect.js";
 import { ItemBase as ie } from "./Item/ItemBase.js";
 import { ItemLink as ne } from "./Item/ItemLink.js";
-import { LayoutBase as ce } from "./Layout/LayoutBase.js";
+import { L as ce } from "../LayoutBase-CAdjuw9Q.js";
 import { LayoutGrid as de } from "./Layout/LayoutGrid.js";
 import { LayoutBody as De } from "./Layout/LayoutBody.js";
 import { LayoutContent as Be } from "./Layout/LayoutContent.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