@altinn/altinn-components 0.47.5 → 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/assets/UserListItem.css

@@ -1 +1 @@
-._badges_1m5z5_1{display:flex;flex-direction:row;gap:.5rem;flex-wrap:wrap;justify-content:start;margin-bottom:auto;margin-top:calc(var(--dsc-item-my) * .85)}._label_1m5z5_11{display:flex;flex-direction:row;align-items:center;gap:.5rem}._subUnitAvatar_1m5z5_18{position:relative}._subUnitAvatar_1m5z5_18:before{content:"U";position:absolute;bottom:0;right:0;width:1rem;height:1rem;background-color:#fffc;clip-path:polygon(100% 100%,0% 100%,100% 0%);display:flex;align-items:flex-end;justify-content:flex-end;font-size:.5rem;font-weight:700;color:#333;z-index:1;padding-right:.1rem}
+._badges_hp9nk_1{display:flex;flex-direction:row;gap:.5rem;flex-wrap:wrap;justify-content:start;margin-bottom:auto;margin-top:calc(var(--dsc-item-my) * .85)}._label_hp9nk_11{display:flex;flex-direction:row;align-items:center;gap:.5rem}

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/components/UserListItem/UserListItem.js

@@ -1,83 +1,71 @@
 "use client";
-import { jsx as s, jsxs as v } from "react/jsx-runtime";
-import { Avatar as y } from "../Avatar/Avatar.js";
+import { jsx as s, jsxs as u } from "react/jsx-runtime";
+import { Badge as y } from "../Badge/Badge.js";
 import "../../index-L8X2o7IH.js";
-import d, { forwardRef as _ } from "react";
-import { Badge as g } from "../Badge/Badge.js";
+import m, { forwardRef as h } from "react";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import { ListItemLabel as h } from "../List/ListItemLabel.js";
-import { ListItem as w } from "../List/ListItem.js";
-import { u as O } from "../../useId-BVFxCjkq.js";
-import '../../assets/UserListItem.css';var z = function(e, o) {
-  var a = {};
-  for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && o.indexOf(t) < 0 && (a[t] = e[t]);
+import { ListItemLabel as v } from "../List/ListItemLabel.js";
+import { ListItem as g } from "../List/ListItem.js";
+import { u as _ } from "../../useId-BVFxCjkq.js";
+import '../../assets/UserListItem.css';var w = function(e, r) {
+  var l = {};
+  for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && r.indexOf(t) < 0 && (l[t] = e[t]);
   if (e != null && typeof Object.getOwnPropertySymbols == "function")
-    for (var l = 0, t = Object.getOwnPropertySymbols(e); l < t.length; l++)
-      o.indexOf(t[l]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[l]) && (a[t[l]] = e[t[l]]);
-  return a;
+    for (var a = 0, t = Object.getOwnPropertySymbols(e); a < t.length; a++)
+      r.indexOf(t[a]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[a]) && (l[t[a]] = e[t[a]]);
+  return l;
 };
-const I = _((e, o) => {
-  var { title: a, titleId: t } = e, l = z(e, ["title", "titleId"]);
-  let r = O();
-  return r = a ? t || "title-" + r : void 0, d.createElement(
+const O = h((e, r) => {
+  var { title: l, titleId: t } = e, a = w(e, ["title", "titleId"]);
+  let o = _();
+  return o = l ? t || "title-" + o : void 0, m.createElement(
     "svg",
-    Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: !1, role: "img", ref: o, "aria-labelledby": r }, l),
-    a ? d.createElement("title", { id: r }, a) : null,
-    d.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M11.625 2.35a.75.75 0 0 1 .75 0l7.794 4.5a.75.75 0 0 1 .375.65v9a.75.75 0 0 1-.375.65l-7.779 4.49a.75.75 0 0 1-.39.11h-.006a.76.76 0 0 1-.373-.103L3.83 17.15a.75.75 0 0 1-.375-.65V7.494a.75.75 0 0 1 .382-.648zm-.375 17.351-6.294-3.634V8.799l3.486 2.013a3.751 3.751 0 0 0 2.808 4.863zM15.75 12a3.75 3.75 0 0 1-3 3.675v4.026l6.294-3.634V8.799l-3.486 2.013c.124.373.192.773.192 1.188m-1.79-1.105a2.25 2.25 0 1 1-3.919-.003l.01-.017.01-.016a2.249 2.249 0 0 1 3.9.036m.847-1.382L18.294 7.5 12 3.866 5.706 7.5l3.487 2.013A3.74 3.74 0 0 1 12 8.25a3.74 3.74 0 0 1 2.807 1.263", clipRule: "evenodd" })
+    Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: !1, role: "img", ref: r, "aria-labelledby": o }, a),
+    l ? m.createElement("title", { id: o }, l) : null,
+    m.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M11.625 2.35a.75.75 0 0 1 .75 0l7.794 4.5a.75.75 0 0 1 .375.65v9a.75.75 0 0 1-.375.65l-7.779 4.49a.75.75 0 0 1-.39.11h-.006a.76.76 0 0 1-.373-.103L3.83 17.15a.75.75 0 0 1-.375-.65V7.494a.75.75 0 0 1 .382-.648zm-.375 17.351-6.294-3.634V8.799l3.486 2.013a3.751 3.751 0 0 0 2.808 4.863zM15.75 12a3.75 3.75 0 0 1-3 3.675v4.026l6.294-3.634V8.799l-3.486 2.013c.124.373.192.773.192 1.188m-1.79-1.105a2.25 2.25 0 1 1-3.919-.003l.01-.017.01-.016a2.249 2.249 0 0 1 3.9.036m.847-1.382L18.294 7.5 12 3.866 5.706 7.5l3.487 2.013A3.74 3.74 0 0 1 12 8.25a3.74 3.74 0 0 1 2.807 1.263", clipRule: "evenodd" })
   );
-}), j = "_badges_1m5z5_1", x = "_label_1m5z5_11", A = "_subUnitAvatar_1m5z5_18", f = {
-  badges: j,
-  label: x,
-  subUnitAvatar: A
-}, N = ({
+}), I = "_badges_hp9nk_1", j = "_label_hp9nk_11", f = {
+  badges: I,
+  label: j
+}, B = ({
   name: e,
-  type: o,
-  description: a,
+  type: r,
+  description: l,
   roleNames: t,
-  titleAs: l = "h3",
-  subUnit: r = !1,
+  titleAs: a = "h3",
+  subUnit: o = !1,
   loading: c = !1,
   ...n
 }) => {
   let i;
-  switch (o) {
+  switch (r) {
     case "person":
       i = { name: e, type: "person" };
       break;
     case "company":
-      i = { name: e, type: "company" };
+      i = { name: e, type: "company", isParent: !o };
       break;
     case "system":
-      i = I;
+      i = O;
       break;
     default:
       i = { name: e, type: "person" };
   }
-  const b = r && /* @__PURE__ */ s(y, { name: e, type: "company", className: f.subUnitAvatar }), p = !c && t ? /* @__PURE__ */ s("div", { className: f.badges, children: t.map((m) => /* @__PURE__ */ s(g, { label: m, color: n.color, children: m }, m)) }) : void 0, u = /* @__PURE__ */ v("div", { className: f.label, "data-size": n.size, children: [
+  const b = !c && t ? /* @__PURE__ */ s("div", { className: f.badges, children: t.map((d) => /* @__PURE__ */ s(y, { label: d, color: n.color, children: d }, d)) }) : void 0, p = /* @__PURE__ */ u("div", { className: f.label, "data-size": n.size, children: [
     /* @__PURE__ */ s(
-      h,
+      v,
       {
-        title: { children: e, as: l },
-        description: a,
+        title: { children: e, as: a },
+        description: l,
         size: n.size,
         loading: c
       }
     ),
-    p
+    b
   ] });
-  return /* @__PURE__ */ s(
-    w,
-    {
-      icon: r ? b : i,
-      ariaLabel: e,
-      label: u,
-      description: a,
-      loading: c,
-      ...n
-    }
-  );
+  return /* @__PURE__ */ s(g, { icon: i, ariaLabel: e, label: p, description: l, loading: c, ...n });
 };
 export {
-  N as UserListItem
+  B as UserListItem
 };

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.5",
+  "version": "0.48.0",
   "main": "dist/index.js",
   "files": [
     "dist/",