@altinn/altinn-components 0.24.1 → 0.24.2

package/dist/assets/MenuBase.css

@@ -1 +1 @@
-._menu_njba2_1{list-style:none;padding:0;margin:0;text-indent:0;display:flex;flex-direction:column;width:100%}._list_njba2_13,._item_njba2_19{list-style:none;padding:0;margin:0}._item_njba2_19[role=separator]{border-top:1px solid var(--ds-color-border-subtle)}
+._menu_twp4i_1{list-style:none;padding:0;margin:0;text-indent:0;display:flex;flex-direction:column;width:100%}._list_twp4i_12,._item_twp4i_18{list-style:none;padding:0;margin:0}._item_twp4i_18[role=separator]{border-top:1px solid var(--ds-color-border-subtle)}

package/dist/assets/MenuItemsVirtual.css

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

package/dist/components/List/ListItem.js

@@ -1,75 +1,76 @@
-import { jsxs as q, jsx as v } from "react/jsx-runtime";
-import { ListItemBase as w } from "./ListItemBase.js";
-import { ListItemHeader as z } from "./ListItemHeader.js";
-const E = ({
-  className: f,
-  variant: e = "solid",
+import { jsxs as q, jsx as w } from "react/jsx-runtime";
+import { ListItemBase as z } from "./ListItemBase.js";
+import { ListItemHeader as A } from "./ListItemHeader.js";
+const F = ({
+  className: p,
+  variant: c = "solid",
   color: r,
-  theme: i = "default",
-  shadow: c = "xs",
-  loading: m,
+  theme: m = "default",
+  shadow: e = "xs",
+  loading: o,
   collapsible: n,
   expanded: s,
-  size: p = "sm",
-  icon: u,
-  avatar: L,
-  avatarGroup: l,
-  title: o,
-  titleAs: I,
-  description: a,
-  badge: j,
-  linkIcon: x = !1,
+  size: u = "sm",
+  icon: L,
+  avatar: l,
+  avatarGroup: I,
+  title: f,
+  titleAs: j,
+  description: x,
+  badge: a,
+  linkIcon: h = !1,
   label: t,
-  select: h,
-  selected: y,
-  controls: B,
-  children: H,
-  interactive: b,
+  select: y,
+  selected: B,
+  controls: H,
+  children: b,
+  interactive: i,
   ...d
 }) => {
   const k = typeof t == "function" ? t() : t;
   return /* @__PURE__ */ q(
-    w,
+    z,
     {
-      variant: e,
+      variant: c,
       color: r,
-      theme: i,
-      shadow: c,
-      selected: y,
+      theme: m,
+      shadow: e,
+      selected: B,
       expanded: s,
-      title: o,
-      loading: m,
-      interactive: b,
+      title: f,
+      loading: o,
+      interactive: i,
       children: [
-        /* @__PURE__ */ v(
-          z,
+        /* @__PURE__ */ w(
+          A,
           {
-            className: f,
+            className: p,
             color: r,
-            theme: i,
-            loading: m,
-            linkIcon: x,
+            theme: m,
+            loading: o,
+            linkIcon: h,
             collapsible: n,
             expanded: s,
-            select: h,
-            size: p,
-            title: o,
-            description: a,
-            icon: u,
-            avatar: L,
-            avatarGroup: l,
-            badge: j,
-            controls: B,
-            titleAs: I,
+            select: y,
+            size: u,
+            title: f,
+            description: x,
+            icon: L,
+            avatar: l,
+            avatarGroup: I,
+            badge: a,
+            controls: H,
+            titleAs: j,
+            interactive: i,
             ...d,
             children: k
           }
         ),
-        s ? H : null
+        s ? b : null
       ]
     }
   );
 };
 export {
-  E as ListItem
+  F as ListItem
 };

package/dist/components/Menu/MenuBase.js

@@ -1,19 +1,19 @@
 import { jsx as m } from "react/jsx-runtime";
-import { c as a } from "../../index-L8X2o7IH.js";
-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 = ({
+import { c as i } from "../../index-L8X2o7IH.js";
+import '../../assets/MenuBase.css';const p = "_menu_twp4i_1", r = "_list_twp4i_12", u = "_item_twp4i_18", a = {
+  menu: p,
+  list: r,
+  item: u
+}, d = ({ as: t = "nav", color: n, theme: e, className: o, children: s }) => /* @__PURE__ */ m(t, { className: i(a.menu, o), "data-color": n, "data-theme": e, children: s }), x = ({ as: t = "ul", role: n = "group", className: e, children: o }) => /* @__PURE__ */ m(t, { className: i(a.list, e), role: n, children: o }), w = ({
   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 });
+  dataIndex: c
+}) => /* @__PURE__ */ m(t, { className: i(a.item, e), role: n, style: s, "data-index": c, children: o });
 export {
   d as MenuBase,
-  j as MenuList,
-  x as MenuListItem
+  x as MenuList,
+  w as MenuListItem
 };

package/dist/components/Menu/MenuItemsVirtual.js

@@ -12,36 +12,36 @@ 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) {
+import '../../assets/MenuItemsVirtual.css';function y(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());
+    var i, o, a, c;
+    let h;
+    e.key && ((i = e.debug) != null && i.call(e)) && (h = Date.now());
     const f = r();
-    if (!(f.length !== s.length || f.some((c, p) => s[p] !== c)))
+    if (!(f.length !== s.length || f.some((u, p) => s[p] !== u)))
       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) => {
+    if (e.key && ((o = e.debug) != null && o.call(e)) && (d = Date.now()), t = l(...f), e.key && ((a = e.debug) != null && a.call(e))) {
+      const u = Math.round((Date.now() - h) * 100) / 100, p = Math.round((Date.now() - d) * 100) / 100, x = p / 16, v = (g, b) => {
         for (g = String(g); g.length < b; )
           g = " " + g;
         return g;
       };
       console.info(
-        `%c⏱ ${y(p, 5)} /${y(c, 5)} ms`,
+        `%c⏱ ${v(p, 5)} /${v(u, 5)} ms`,
         `
             font-size: .6rem;
             font-weight: bold;
             color: hsl(${Math.max(
           0,
-          Math.min(120 - 120 * v, 120)
+          Math.min(120 - 120 * x, 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 (c = e == null ? void 0 : e.onChange) == null || c.call(e, t), t;
   }
   return n.updateDeps = (i) => {
     s = i;
@@ -70,19 +70,19 @@ const B = (r, l) => Math.abs(r - l) < 1, $ = (r, l, e) => {
   if (!s)
     return;
   const t = (i) => {
-    const { width: o, height: h } = i;
-    l({ width: Math.round(o), height: Math.round(h) });
+    const { width: o, height: a } = i;
+    l({ width: Math.round(o), height: Math.round(a) });
   };
   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 });
+      const a = i[0];
+      if (a != null && a.borderBoxSize) {
+        const c = a.borderBoxSize[0];
+        if (c) {
+          t({ width: c.inlineSize, height: c.blockSize });
           return;
         }
       }
@@ -110,14 +110,14 @@ const B = (r, l) => Math.abs(r - l) < 1, $ = (r, l, e) => {
       l(t, !1);
     },
     r.options.isScrollingResetDelay
-  ), i = (a) => () => {
+  ), i = (h) => () => {
     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);
+    t = f ? e.scrollLeft * (m && -1 || 1) : e.scrollTop, n(), l(t, h);
+  }, o = i(!0), a = i(!1);
+  a(), e.addEventListener("scroll", o, C);
+  const c = r.options.useScrollendEvent && T;
+  return c && e.addEventListener("scrollend", a, C), () => {
+    e.removeEventListener("scroll", o), c && e.removeEventListener("scrollend", a);
   };
 }, Y = (r, l, e) => {
   if (l != null && l.borderBoxSize) {
@@ -200,7 +200,7 @@ class J {
     }, this.notify = (e) => {
       var s, t;
       (t = (s = this.options).onChange) == null || t.call(s, this, e);
-    }, this.maybeNotify = x(
+    }, this.maybeNotify = y(
       () => (this.calculateRange(), [
         this.isScrolling,
         this.range ? this.range.startIndex : null,
@@ -251,14 +251,14 @@ class J {
         const o = e[i];
         if (t.has(o.lane))
           continue;
-        const h = n.get(
+        const a = 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)
+        if (a == null || o.end > a.end ? n.set(o.lane, o) : o.end < a.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.getMeasurementOptions = y(
       () => [
         this.options.count,
         this.options.paddingStart,
@@ -276,35 +276,35 @@ class J {
       {
         key: !1
       }
-    ), this.getMeasurements = x(
+    ), this.getMeasurements = y(
       () => [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);
+        this.measurementsCache.length === 0 && (this.measurementsCache = this.options.initialMeasurementsCache, this.measurementsCache.forEach((h) => {
+          this.itemSizeCache.set(h.key, h.size);
         }));
-        const h = this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
+        const a = 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,
+        const c = this.measurementsCache.slice(0, a);
+        for (let h = a; h < e; h++) {
+          const f = n(h), m = this.options.lanes === 1 ? c[h - 1] : this.getFurthestMeasurement(c, h), d = m ? m.end + this.options.gap : s + t, u = o.get(f), p = typeof u == "number" ? u : this.options.estimateSize(h), x = d + p, v = m ? m.lane : h % this.options.lanes;
+          c[h] = {
+            index: h,
             start: d,
             size: p,
-            end: v,
+            end: x,
             key: f,
-            lane: y
+            lane: v
           };
         }
-        return this.measurementsCache = u, u;
+        return this.measurementsCache = c, c;
       },
       {
         key: process.env.NODE_ENV !== "production" && "getMeasurements",
         debug: () => this.options.debug
       }
-    ), this.calculateRange = x(
+    ), this.calculateRange = y(
       () => [
         this.getMeasurements(),
         this.getSize(),
@@ -321,7 +321,7 @@ class J {
         key: process.env.NODE_ENV !== "production" && "calculateRange",
         debug: () => this.options.debug
       }
-    ), this.getVirtualIndexes = x(
+    ), this.getVirtualIndexes = y(
       () => {
         let e = null, s = null;
         const t = this.calculateRange();
@@ -371,13 +371,13 @@ class J {
         return;
       }
       this._measureElement(e, void 0);
-    }, this.getVirtualItems = x(
+    }, this.getVirtualItems = y(
       () => [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);
+          const o = e[n], a = s[o];
+          t.push(a);
         }
         return t;
       },
@@ -399,8 +399,8 @@ class J {
     }, 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);
+      const o = this.options.horizontal ? "scrollWidth" : "scrollHeight", c = (this.scrollElement ? "document" in this.scrollElement ? this.scrollElement.document.documentElement[o] : this.scrollElement[o] : 0) - n;
+      return Math.max(Math.min(c, e), 0);
     }, this.getOffsetForIndex = (e, s = "auto") => {
       e = Math.max(0, Math.min(e, this.options.count - 1));
       const t = this.measurementsCache[e];
@@ -439,10 +439,10 @@ class J {
         if (this.scrollToIndexTimeoutId = null, this.elementsCache.has(
           this.options.getItemKey(e)
         )) {
-          const [u] = I(
+          const [c] = I(
             this.getOffsetForIndex(e, o)
           );
-          B(u, this.getScrollOffset()) || this.scrollToIndex(e, { align: o, behavior: t });
+          B(c, this.getScrollOffset()) || this.scrollToIndex(e, { align: o, behavior: t });
         } else
           this.scrollToIndex(e, { align: o, behavior: t });
       }));
@@ -506,22 +506,22 @@ function Q({
   let i = D(
     0,
     t,
-    (h) => r[h].start,
+    (a) => r[a].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 a = Array(s).fill(0);
+    for (; o < t && a.some((h) => h < e + l); ) {
+      const h = r[o];
+      a[h.lane] = h.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--;
+    const c = Array(s).fill(e + l);
+    for (; i > 0 && c.some((h) => h >= e); ) {
+      const h = r[i];
+      c[h.lane] = h.start, i--;
     }
     i = Math.max(0, i - i % s), o = Math.min(t, o + (s - 1 - o % s));
   }
@@ -548,7 +548,7 @@ function Z(r) {
     ...r
   });
 }
-const ee = "_virtualScrollRef_1kwwy_1", te = "_virtualMenuListItem_1kwwy_6", R = {
+const ee = "_virtualScrollRef_12fdc_1", te = "_virtualMenuListItem_12fdc_6", R = {
   virtualScrollRef: ee,
   virtualMenuListItem: te
 }, me = ({
@@ -561,67 +561,65 @@ const ee = "_virtualScrollRef_1kwwy_1", te = "_virtualMenuListItem_1kwwy_6", R =
   defaultItemTheme: i,
   defaultIconTheme: o
 }) => {
-  const { menu: h } = F({
+  const { menu: a } = F({
     items: e,
     groups: s,
     groupByKey: "groupId",
     keyboardEvents: !1
-  }), u = k(null), a = h.flatMap((d, c) => {
+  }), c = k(null), h = a.flatMap((d, u) => {
     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) => {
+    const p = (d == null ? void 0 : d.props) || {}, { title: x } = p, v = ((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) => {
+      ...u > 0 || r > 0 ? [{ type: "separator" }] : [],
+      ...x ? [{ type: "title", title: x }] : [],
+      ...v.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
+          isLastItem: M === v.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
+    count: h.length,
+    gap: 8,
+    estimateSize: () => 44,
+    getScrollElement: () => c.current
   }), m = f.getVirtualItems();
   return A(() => {
     for (const d of m) {
-      const c = document.querySelector(`[data-index="${d.index}"]`);
-      c && f.measureElement(c);
+      const u = document.querySelector(`[data-index="${d.index}"]`);
+      u && f.measureElement(u);
     }
   }, [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(
+    /* @__PURE__ */ E("div", { ref: c, className: R.virtualScrollRef, children: /* @__PURE__ */ E("div", { style: { position: "relative", height: `${f.getTotalSize()}px` }, children: m.map((d) => {
+      const u = h[d.index];
+      return u ? /* @__PURE__ */ w(
         j,
         {
           dataIndex: d.index,
           className: R.virtualMenuListItem,
           style: { transform: `translateY(${d.start}px)` },
-          role: c.type === "separator" ? "separator" : void 0,
+          role: u.type === "separator" ? "separator" : void 0,
           children: [
-            c.type === "title" && /* @__PURE__ */ E(L, { title: c.title }),
-            c.type === "item" && /* @__PURE__ */ E(
+            u.type === "title" && /* @__PURE__ */ E(L, { title: u.title }),
+            u.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
+                ...u.itemProps,
+                size: u.itemProps.size || t,
+                color: u.itemProps.color || n,
+                theme: u.itemProps.theme || i,
+                iconTheme: u.itemProps.iconTheme || o,
+                active: u.active,
+                tabIndex: u.itemProps.disabled ? -1 : 0
               }
             )
           ]

package/package.json

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