@altinn/altinn-components 0.47.6 → 0.48.0

package/dist/assets/AccountListVirtual.css

@@ -0,0 +1 @@
+._virtualScrollRef_o3xco_1{height:100vh;overflow-y:auto;overflow-x:hidden;padding:0 .5rem;margin:0 -.5rem}._virtualList_o3xco_9{list-style-type:none;padding:0;margin:0}._virtualListItem_o3xco_15{position:absolute;top:0;left:0;width:100%}._virtualListItem_o3xco_15>*{margin:0}._lastChild_o3xco_26{padding-bottom:1rem}._virtualTitleItem_o3xco_30{position:absolute;top:0;left:0;width:100%;padding-top:1rem;padding-bottom:1rem}._virtualTitleItem_o3xco_30:first-child{padding-top:0}

package/dist/components/Account/AccountList.js

@@ -1,32 +1,35 @@
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { Fragment as f, createElement as d } from "react";
+import { Fragment as d, createElement as h } from "react";
 import "../../index-L8X2o7IH.js";
-import { AccountListItem as h } from "./AccountListItem.js";
-import { Heading as y } from "../Typography/Heading.js";
+import { AccountListItem as L } from "./AccountListItem.js";
+import { Heading as u } from "../Typography/Heading.js";
 import { useMenu as x } from "../../hooks/useMenu.js";
 import "../RootProvider/RootProvider.js";
-import { List as L } from "../List/List.js";
+import { List as y } from "../List/List.js";
 import "../Snackbar/useSnackbar.js";
-import { Section as j } from "../Page/Section.js";
-const H = ({ items: o, groups: m = {}, sortGroupBy: n }) => {
+import { Section as A } from "../Page/Section.js";
+import { AccountListVirtual as j } from "./AccountListVirtual.js";
+const V = ({ items: m, groups: o = {}, sortGroupBy: n, isVirtualized: c }) => {
+  if (c)
+    return /* @__PURE__ */ i(j, { items: m, groups: o, sortGroupBy: n });
   const { menu: e } = x({
-    items: o,
-    groups: m,
+    items: m,
+    groups: o,
     groupByKey: "groupId",
     keyboardEvents: !1,
     sortGroupBy: n
   });
-  return /* @__PURE__ */ i(j, { spacing: 6, children: e == null ? void 0 : e.map((t, s) => {
+  return /* @__PURE__ */ i(A, { spacing: 6, children: e == null ? void 0 : e.map((t, s) => {
     const r = t.props || {};
-    return /* @__PURE__ */ a(f, { children: [
-      (r == null ? void 0 : r.title) && /* @__PURE__ */ i(y, { size: "lg", children: r.title }),
-      /* @__PURE__ */ i(L, { children: t == null ? void 0 : t.items.map((c, p) => {
-        const l = c.props || {};
-        return /* @__PURE__ */ d(h, { ...l, key: p });
+    return /* @__PURE__ */ a(d, { children: [
+      (r == null ? void 0 : r.title) && /* @__PURE__ */ i(u, { size: "lg", children: r.title }),
+      /* @__PURE__ */ i(y, { children: t == null ? void 0 : t.items.map((p, f) => {
+        const l = p.props || {};
+        return /* @__PURE__ */ h(L, { ...l, key: f });
       }) })
     ] }, s);
   }) });
 };
 export {
-  H as AccountList
+  V as AccountList
 };

package/dist/components/Account/AccountListVirtual.js

@@ -0,0 +1,96 @@
+"use client";
+import { jsx as l } from "react/jsx-runtime";
+import { u as x } from "../../index-D-VWMqlv.js";
+import { useRef as I, useEffect as h } from "react";
+import "../../index-L8X2o7IH.js";
+import { AccountListItem as v } from "./AccountListItem.js";
+import { useMenu as _ } from "../../hooks/useMenu.js";
+import { Heading as L } from "../Typography/Heading.js";
+import "../RootProvider/RootProvider.js";
+import "../Snackbar/useSnackbar.js";
+import { Section as S } from "../Page/Section.js";
+import '../../assets/AccountListVirtual.css';const $ = "_virtualScrollRef_o3xco_1", C = "_virtualList_o3xco_9", P = "_virtualListItem_o3xco_15", E = "_lastChild_o3xco_26", z = "_virtualTitleItem_o3xco_30", a = {
+  virtualScrollRef: $,
+  virtualList: C,
+  virtualListItem: P,
+  lastChild: E,
+  virtualTitleItem: z
+}, j = ({ items: p, groups: d = {}, sortGroupBy: f }) => {
+  const n = I(null), { menu: y } = _({
+    items: p,
+    groups: d,
+    groupByKey: "groupId",
+    keyboardEvents: !1,
+    sortGroupBy: f
+  }), o = y.flatMap((t) => {
+    const e = (t == null ? void 0 : t.props) || {}, { title: i } = e, r = (t == null ? void 0 : t.items) || [];
+    return [
+      ...i ? [{ type: "title", title: i }] : [],
+      ...r.map((s) => ({
+        type: "item",
+        itemProps: s.props || {}
+      }))
+    ];
+  }), m = x({
+    count: o.length,
+    gap: 8,
+    estimateSize: (t) => {
+      var c;
+      const e = o[t];
+      if (!e) return 44;
+      if (e.type === "title") return t === 0 ? 48 : 88;
+      const i = o[t + 1], r = e.itemProps;
+      return (r == null ? void 0 : r.parentId) && (!i || i.type === "title" || i.type === "item" && !((c = i.itemProps) != null && c.parentId)) ? 96 : 80;
+    },
+    getScrollElement: () => n.current
+  }), u = m.getVirtualItems();
+  return h(() => {
+    var t, e, i;
+    for (const r of u) {
+      const s = ((t = n.current) == null ? void 0 : t.querySelector(`[data-index="${r.index}"]`)) ?? ((e = n.current) == null ? void 0 : e.querySelector(`[dataindex="${r.index}"]`)) ?? ((i = n.current) == null ? void 0 : i.querySelector(`[dataIndex="${r.index}"]`));
+      s && m.measureElement(s);
+    }
+  }, [u]), /* @__PURE__ */ l(S, { spacing: 6, children: /* @__PURE__ */ l("div", { ref: n, className: a.virtualScrollRef, children: /* @__PURE__ */ l(
+    "ul",
+    {
+      className: a.virtualList,
+      style: {
+        position: "relative",
+        height: `${m.getTotalSize()}px`
+      },
+      children: u.map((t) => {
+        var i, r;
+        const e = o[t.index];
+        if (!e) return null;
+        if (e.type === "title")
+          return /* @__PURE__ */ l(
+            "li",
+            {
+              "data-index": t.index,
+              className: a.virtualTitleItem,
+              style: { transform: `translateY(${t.start}px)` },
+              children: /* @__PURE__ */ l(L, { size: "lg", children: e.title })
+            },
+            t.key
+          );
+        if (e.type === "item") {
+          const s = o[t.index + 1], c = ((i = e.itemProps) == null ? void 0 : i.parentId) && (!s || s.type === "title" || s.type === "item" && !((r = s.itemProps) != null && r.parentId));
+          return /* @__PURE__ */ l(
+            "li",
+            {
+              "data-index": t.index,
+              className: `${a.virtualListItem} ${c ? a.lastChild : ""}`,
+              style: { transform: `translateY(${t.start}px)` },
+              children: /* @__PURE__ */ l(v, { ...e.itemProps, containerAs: "div" })
+            },
+            t.key
+          );
+        }
+        return null;
+      })
+    }
+  ) }) });
+};
+export {
+  j as AccountListVirtual
+};

package/dist/components/List/ListItem.js

@@ -1,24 +1,24 @@
-import { jsxs as N, jsx as k } from "react/jsx-runtime";
-import { c as q } from "../../index-L8X2o7IH.js";
-import { ListItemBase as A } from "./ListItemBase.js";
-import { ListItemHeader as C } from "./ListItemHeader.js";
-import '../../assets/ListItem.css';const D = "_item_1nwey_3", E = {
-  item: D
-}, M = ({
+import { jsxs as k, jsx as q } from "react/jsx-runtime";
+import { c as A } from "../../index-L8X2o7IH.js";
+import { ListItemBase as C } from "./ListItemBase.js";
+import { ListItemHeader as D } from "./ListItemHeader.js";
+import '../../assets/ListItem.css';const E = "_item_1nwey_3", F = {
+  item: E
+}, O = ({
   className: c,
-  color: s,
+  color: m,
   variant: n = "default",
   shadow: f = "xs",
   border: p = "none",
   loading: e,
   disabled: o,
-  collapsible: l,
+  collapsible: a,
   expanded: t,
   size: r,
-  icon: u,
-  label: m,
-  title: L,
-  description: a,
+  icon: l,
+  label: s,
+  title: u,
+  description: L,
   badge: x,
   linkIcon: y = !1,
   select: I,
@@ -27,15 +27,16 @@ import '../../assets/ListItem.css';const D = "_item_1nwey_3", E = {
   children: j,
   interactive: i,
   id: w,
-  ...B
+  containerAs: B,
+  ...H
 }) => {
-  const H = typeof m == "function" ? m() : m;
-  return /* @__PURE__ */ N(
-    A,
+  const N = typeof s == "function" ? s() : s;
+  return /* @__PURE__ */ k(
+    C,
     {
-      className: q(E.item, c),
+      className: A(F.item, c),
       size: r,
-      color: s,
+      color: m,
       variant: n,
       shadow: f,
       border: p,
@@ -45,26 +46,27 @@ import '../../assets/ListItem.css';const D = "_item_1nwey_3", E = {
       loading: e,
       interactive: i,
       id: w,
+      as: B,
       children: [
-        /* @__PURE__ */ k(
-          C,
+        /* @__PURE__ */ q(
+          D,
           {
-            color: s,
+            color: m,
             loading: e,
             linkIcon: y,
             disabled: o,
-            collapsible: l,
+            collapsible: a,
             expanded: t,
             select: I,
-            title: L,
+            title: u,
             size: r,
-            description: a,
-            icon: u,
+            description: L,
+            icon: l,
             badge: x,
             controls: h,
             interactive: i,
-            ...B,
-            children: H
+            ...H,
+            children: N
           }
         ),
         t ? j : null
@@ -73,5 +75,5 @@ import '../../assets/ListItem.css';const D = "_item_1nwey_3", E = {
   );
 };
 export {
-  M as ListItem
+  O as ListItem
 };

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

@@ -9,5 +9,6 @@ export interface AccountListProps {
     sortGroupBy?: (a: [string, AccountListItemProps[]], b: [string, AccountListItemProps[]]) => number;
     emptyTitle?: string;
     emptyDescription?: string;
+    isVirtualized?: boolean;
 }
-export declare const AccountList: ({ items, groups, sortGroupBy }: AccountListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccountList: ({ items, groups, sortGroupBy, isVirtualized }: AccountListProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -3,7 +3,7 @@ import { AccountListItemProps, AccountListProps } from '..';
 import { UseAccountsProps } from '../../../examples';
 declare const meta: {
     title: string;
-    component: ({ items, groups, sortGroupBy }: AccountListProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ items, groups, sortGroupBy, isVirtualized }: AccountListProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: AccountListProps;
@@ -35,3 +35,4 @@ export declare const CompanyDetails: ({ id, parentId, uniqueId, title, descripti
 export declare const PersonDetails: ({ id, uniqueId, isCurrentEndUser, address, onModal, ...props }: AccountDetailsProps) => import("react/jsx-runtime").JSX.Element;
 export declare const UserDetails: ({ id, phone, address, email, onModal, }: AccountDetailsProps) => import("react/jsx-runtime").JSX.Element;
 export declare const GroupDetails: ({ accountIds }: AccountDetailsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Virtualized: () => import("react/jsx-runtime").JSX.Element;

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

@@ -36,6 +36,7 @@ declare const meta: {
         icon?: import('..').SvgElement | import('..').IconProps | React.ReactNode | import('..').AvatarProps | import('..').AvatarGroupProps;
         badge?: React.ReactNode | import('..').BadgeProps;
         linkIcon?: boolean | undefined;
+        containerAs?: React.ElementType | undefined;
         ref?: React.Ref<HTMLElement> | undefined;
         interactive?: boolean | undefined;
         as?: React.ElementType | undefined;

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

@@ -0,0 +1,8 @@
+import { AccountListItemProps } from '..';
+import { AccountListGroupProps } from './AccountList';
+export interface AccountListVirtualProps {
+    items: AccountListItemProps[];
+    groups?: Record<string, AccountListGroupProps>;
+    sortGroupBy?: (a: [string, AccountListItemProps[]], b: [string, AccountListItemProps[]]) => number;
+}
+export declare const AccountListVirtual: ({ items, groups, sortGroupBy }: AccountListVirtualProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/List/ListItem.d.ts

@@ -25,6 +25,8 @@ export interface ListItemProps extends ListItemBaseProps, ListItemHeaderProps {
     linkIcon?: ListItemHeaderProps['linkIcon'];
     /** Custom label */
     label?: ReactNode | (() => ReactElement);
+    /** Element type for the container (overrides 'as' for container only) */
+    containerAs?: ListItemBaseProps['as'];
 }
 export interface ListItemInputProps extends ListItemProps {
     id: string;
@@ -54,4 +56,4 @@ export interface ListItemInputProps extends ListItemProps {
  *
  * @returns {ReactElement} Rendered ListItem component.
  */
-export declare const ListItem: ({ className, color, variant, shadow, border, loading, disabled, collapsible, expanded, size, icon, label, title, description, badge, linkIcon, select, selected, controls, children, interactive, id, ...rest }: ListItemProps) => ReactElement;
+export declare const ListItem: ({ className, color, variant, shadow, border, loading, disabled, collapsible, expanded, size, icon, label, title, description, badge, linkIcon, select, selected, controls, children, interactive, id, containerAs, ...rest }: ListItemProps) => ReactElement;

package/dist/types/lib/components/List/Specimens.stories.d.ts

@@ -1,7 +1,7 @@
 import { ListItemProps } from '../';
 declare const meta: {
     title: string;
-    component: ({ className, color, variant, shadow, border, loading, disabled, collapsible, expanded, size, icon, label, title, description, badge, linkIcon, select, selected, controls, children, interactive, id, ...rest }: ListItemProps) => React.ReactElement;
+    component: ({ className, color, variant, shadow, border, loading, disabled, collapsible, expanded, size, icon, label, title, description, badge, linkIcon, select, selected, controls, children, interactive, id, containerAs, ...rest }: ListItemProps) => React.ReactElement;
     parameters: {};
     args: {
         id: string;

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

@@ -46,6 +46,7 @@ declare const meta: {
         ariaLabel?: string | undefined;
         interactive?: boolean | undefined;
         linkIcon?: boolean | undefined;
+        containerAs?: React.ElementType | undefined;
         shadow?: import('..').Shadow | undefined;
         collapsible?: boolean | undefined;
     };

package/package.json

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