@altinn/altinn-components 0.41.5 → 0.41.6

package/dist/assets/MenuItemBase.css

@@ -1 +1 @@
-._item_zzw8j_1{font:inherit;color:inherit;padding:0;border:0;text-align:inherit;text-decoration:none;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;cursor:pointer;position:relative;width:100%;display:flex;align-items:center;column-gap:.25rem;margin:.5rem 0;border-radius:2px}._item_zzw8j_1[aria-disabled=true]{opacity:.5;pointer-events:none}._item_zzw8j_1[data-size=md]{min-height:56px}._item_zzw8j_1[data-size=md]{min-height:44px}._item_zzw8j_1[data-size=sm]{min-height:40px}._content_zzw8j_45{display:flex;width:100%;align-items:center;column-gap:6px;padding:6px}._item_zzw8j_1{background-color:transparent}._item_zzw8j_1{pointer-events:none}._item_zzw8j_1[data-interactive=true]{pointer-events:all}._item_zzw8j_1:hover,._item_zzw8j_1[data-active=true]{background-color:var(--ds-color-background-tinted)}._item_zzw8j_1[data-active=true]{outline:2px solid black}._item_zzw8j_1[data-selected=true],._item_zzw8j_1:active,[data-variant=subtle] ._item_zzw8j_1:hover{background-color:var(--ds-color-surface-hover)}[data-variant=subtle] ._item_zzw8j_1:active{background-color:var(--ds-color-surface-active)}[data-variant=subtle] ._item_zzw8j_1[data-selected=true]{background-color:var(--ds-color-background-default)}._content_zzw8j_45{display:flex;width:100%;align-items:center;column-gap:.5em}._item_zzw8j_1:focus-visible{box-shadow:var(--_ds--focus, var(--dsc-focus-boxShadow));outline:var(--_ds--focus, var(--dsc-focus-outline))}._item_zzw8j_1:focus-visible *{--_ds--focus: }
+._item_cs9p2_1{font:inherit;color:inherit;padding:0;border:0;text-align:inherit;text-decoration:none;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;cursor:pointer;position:relative;width:100%;display:flex;align-items:center;column-gap:.25rem;margin:.5rem 0;border-radius:2px}._item_cs9p2_1[data-size=md]{min-height:56px}._item_cs9p2_1[data-size=md]{min-height:44px}._item_cs9p2_1[data-size=sm]{min-height:40px}._content_cs9p2_40{display:flex;width:100%;align-items:center;column-gap:6px;padding:6px}._item_cs9p2_1{background-color:transparent}._item_cs9p2_1{pointer-events:none}._item_cs9p2_1[data-interactive=true]{pointer-events:all}._item_cs9p2_1:hover,._item_cs9p2_1[data-active=true]{background-color:var(--ds-color-background-tinted)}._item_cs9p2_1[data-active=true]{outline:2px solid black}._item_cs9p2_1[data-selected=true],._item_cs9p2_1:active,[data-variant=subtle] ._item_cs9p2_1:hover{background-color:var(--ds-color-surface-hover)}[data-variant=subtle] ._item_cs9p2_1:active{background-color:var(--ds-color-surface-active)}[data-variant=subtle] ._item_cs9p2_1[data-selected=true]{background-color:var(--ds-color-background-default)}._content_cs9p2_40{display:flex;width:100%;align-items:center;column-gap:.5em}._item_cs9p2_1[aria-disabled=true]{opacity:.5;pointer-events:none;outline:none;box-shadow:none;background-color:transparent}._item_cs9p2_1:not([aria-disabled=true]):focus-visible{box-shadow:var(--_ds--focus, var(--dsc-focus-boxShadow));outline:var(--_ds--focus, var(--dsc-focus-outline))}._item_cs9p2_1:not([aria-disabled=true]):focus-visible *{--_ds--focus: }

package/dist/components/Account/AccountList.js

@@ -1,44 +1,32 @@
-import { jsxs as o, jsx as r } from "react/jsx-runtime";
-import { Fragment as y, createElement as k } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Fragment as f, createElement as d } from "react";
 import "../../index-L8X2o7IH.js";
-import { AccountListItem as u } from "./AccountListItem.js";
-import { Typography as x } from "../Typography/Typography.js";
-import { Heading as m } from "../Typography/Heading.js";
-import { useMenu as I } from "../../hooks/useMenu.js";
+import { AccountListItem as h } from "./AccountListItem.js";
+import { Heading as y } 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 "../Snackbar/useSnackbar.js";
-import { Section as c } from "../Page/Section.js";
-const M = ({
-  items: i,
-  groups: p = {},
-  sortGroupBy: s,
-  emptyTitle: f = "Ingen treff",
-  emptyDescription: l = "Søket ga ingen treff"
-}) => {
-  if (!i || i.length === 0)
-    return /* @__PURE__ */ o(c, { children: [
-      /* @__PURE__ */ r(m, { size: "lg", children: f }),
-      /* @__PURE__ */ r(x, { children: l })
-    ] });
-  const { menu: n } = I({
-    items: i,
-    groups: p,
+import { Section as j } from "../Page/Section.js";
+const H = ({ items: o, groups: m = {}, sortGroupBy: n }) => {
+  const { menu: e } = x({
+    items: o,
+    groups: m,
     groupByKey: "groupId",
     keyboardEvents: !1,
-    sortGroupBy: s
+    sortGroupBy: n
   });
-  return /* @__PURE__ */ r(c, { spacing: 6, children: n == null ? void 0 : n.map((t, a) => {
-    const e = t.props || {};
-    return /* @__PURE__ */ o(y, { children: [
-      (e == null ? void 0 : e.title) && /* @__PURE__ */ r(m, { size: "lg", children: e.title }),
-      /* @__PURE__ */ r(L, { children: t == null ? void 0 : t.items.map((d, h) => {
-        const g = d.props || {};
-        return /* @__PURE__ */ k(u, { ...g, key: h });
+  return /* @__PURE__ */ i(j, { 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 });
       }) })
-    ] }, a);
+    ] }, s);
   }) });
 };
 export {
-  M as AccountList
+  H as AccountList
 };

package/dist/components/Account/AccountMenu.js

@@ -3,52 +3,54 @@ import { jsx as c } from "react/jsx-runtime";
 import { useState as M } from "react";
 import "../../index-L8X2o7IH.js";
 import "../RootProvider/RootProvider.js";
-import { Menu as v } from "../Menu/Menu.js";
+import { Menu as b } from "../Menu/Menu.js";
 import "../Snackbar/useSnackbar.js";
-const b = (r) => `${r} hits`, G = ({
+const v = (r) => `${r} hits`, G = ({
   items: r = [],
   groups: f = {},
-  search: t,
+  search: l,
   onSelectAccount: e,
   currentAccount: a,
   isVirtualized: C,
   keyboardEvents: h
 }) => {
   var u;
-  const s = r.map((o) => ({
+  const d = r.map((o) => ({
     ...o,
     title: (o == null ? void 0 : o.title) || o.name,
     groupId: o.groupId || "search",
     selected: o.selected ?? (a == null ? void 0 : a.id) === o.id,
-    onClick: () => e == null ? void 0 : e(o.id)
-  })), [l, d] = M(""), n = l ? s.filter(
+    onClick: () => {
+      !o.disabled && (e == null || e(o.id));
+    }
+  })), [t, s] = M(""), n = t ? d.filter(
     (o) => {
       var p, g, i;
-      return ((p = o == null ? void 0 : o.name) == null ? void 0 : p.toLowerCase().includes(l.toLowerCase())) || ((i = (g = o == null ? void 0 : o.description) == null ? void 0 : g.toString()) == null ? void 0 : i.toLowerCase().includes(l.toLowerCase()));
+      return ((p = o == null ? void 0 : o.name) == null ? void 0 : p.toLowerCase().includes(t.toLowerCase())) || ((i = (g = o == null ? void 0 : o.description) == null ? void 0 : g.toString()) == null ? void 0 : i.toLowerCase().includes(t.toLowerCase()));
     }
   ).map((o) => ({
     ...o,
     groupId: "search",
     title: (o == null ? void 0 : o.title) || o.name,
-    highlightWords: [l]
-  })) : s, L = l ? {
+    highlightWords: [t]
+  })) : d, L = t ? {
     search: {
-      title: ((u = t == null ? void 0 : t.getResultsLabel) == null ? void 0 : u.call(t, n.length)) ?? b(n.length)
+      title: ((u = l == null ? void 0 : l.getResultsLabel) == null ? void 0 : u.call(l, n.length)) ?? v(n.length)
     }
   } : f, w = {
     name: "account-search",
-    value: l,
-    placeholder: (t == null ? void 0 : t.placeholder) ?? "Find account",
-    onChange: (o) => d(o.target.value),
-    onClear: () => d("")
+    value: t,
+    placeholder: (l == null ? void 0 : l.placeholder) ?? "Find account",
+    onChange: (o) => s(o.target.value),
+    onClear: () => s("")
   }, I = [
     ...n.length > 0 ? n : [{ id: "search", groupId: "search", hidden: !0 }]
   ];
   return /* @__PURE__ */ c(
-    v,
+    b,
     {
       variant: "default",
-      search: t && w,
+      search: l && w,
       groups: L,
       items: I,
       isVirtualized: C,

package/dist/components/Avatar/AvatarGroup.js

@@ -1,34 +1,34 @@
 "use client";
 import { jsx as r } from "react/jsx-runtime";
-import { c as n } from "../../index-L8X2o7IH.js";
+import { c as i } from "../../index-L8X2o7IH.js";
 import { useMemo as f } from "react";
 import { Avatar as h } from "./Avatar.js";
 import '../../assets/AvatarGroup.css';const A = "_group_1ts6c_1", _ = "_item_1ts6c_10", s = {
   group: A,
   item: _
-}, L = (o) => typeof o == "object" && o !== null && "items" in o, N = ({
-  items: o = [],
+}, L = (t) => typeof t == "object" && t !== null && "items" in t, N = ({
+  items: t = [],
   maxItemsCount: l = 4,
-  defaultType: i,
-  size: c,
+  defaultType: n,
+  size: u,
   className: m,
-  style: u
+  style: p
 }) => {
-  const t = f(() => o.slice(0, l).reverse(), [o, l]);
-  return o.length === 0 ? /* @__PURE__ */ r("div", { className: s.avatarGroup }) : /* @__PURE__ */ r("ul", { className: n(s.group, m), "data-size": c, "data-count": t == null ? void 0 : t.length, style: u, children: t.map((e, p) => {
-    const g = p === l - 1, d = e.customLabel || g ? o.length.toString() : void 0;
-    return /* @__PURE__ */ r("li", { className: n(s.item), children: /* @__PURE__ */ r(
+  const o = f(() => t.slice(0, l).reverse(), [t, l]);
+  return t.length === 0 ? /* @__PURE__ */ r("div", { className: s.avatarGroup }) : /* @__PURE__ */ r("ul", { className: i(s.group, m), "data-size": u, "data-count": o == null ? void 0 : o.length, style: p, children: o.map((e, c) => {
+    const g = c === l - 1, d = e.customLabel || g ? t.length.toString() : void 0;
+    return /* @__PURE__ */ r("li", { className: i(s.item), children: /* @__PURE__ */ r(
       h,
       {
         name: e.name,
         customLabel: d,
         imageUrl: e.imageUrl,
         imageUrlAlt: e.imageUrlAlt,
-        type: (e == null ? void 0 : e.type) || i,
+        type: (e == null ? void 0 : e.type) || n,
         variant: e == null ? void 0 : e.variant,
         outline: !0
       }
-    ) }, e.name);
+    ) }, c);
   }) });
 };
 export {

package/dist/components/List/ListItemBase.js

@@ -1,38 +1,40 @@
-import { jsx as p } from "react/jsx-runtime";
-import { c as f } from "../../index-L8X2o7IH.js";
-import '../../assets/ListItemBase.css';const x = "_base_1xkee_1", u = {
-  base: x
-}, C = ({
-  as: a,
-  interactive: e = !0,
-  size: t,
-  color: s,
-  variant: o = "default",
-  shadow: n = "none",
-  border: r = "none",
-  hidden: d = !1,
-  selected: c,
-  className: i,
-  onMouseEnter: m,
-  id: l,
-  children: b
-}) => /* @__PURE__ */ p(
-  a || "li",
+import { jsx as f } from "react/jsx-runtime";
+import { c as x } from "../../index-L8X2o7IH.js";
+import '../../assets/ListItemBase.css';const u = "_base_1xkee_1", _ = {
+  base: u
+}, j = ({
+  ref: a,
+  as: e,
+  interactive: t = !0,
+  size: s,
+  color: o,
+  variant: n = "default",
+  shadow: r = "none",
+  border: d = "none",
+  hidden: c = !1,
+  selected: i,
+  className: m,
+  onMouseEnter: l,
+  id: b,
+  children: p
+}) => /* @__PURE__ */ f(
+  e || "li",
   {
-    className: f(u.base, i),
-    "data-interactive": e,
-    "data-selected": c,
-    "data-variant": o,
-    "data-color": s,
-    "data-border": r,
-    "data-shadow": n,
-    "data-size": t,
-    "aria-hidden": d,
-    onMouseEnter: m,
-    id: l,
-    children: b
+    className: x(_.base, m),
+    "data-interactive": t,
+    "data-selected": i,
+    "data-variant": n,
+    "data-color": o,
+    "data-border": d,
+    "data-shadow": r,
+    "data-size": s,
+    "aria-hidden": c,
+    onMouseEnter: l,
+    id: b,
+    ref: a,
+    children: p
   }
 );
 export {
-  C as ListItemBase
+  j as ListItemBase
 };

package/dist/components/Menu/MenuBase.js

@@ -1,18 +1,18 @@
 import { jsx as c } from "react/jsx-runtime";
 import { c as r } from "../../index-L8X2o7IH.js";
-import '../../assets/MenuBase.css';const l = "_menu_twp4i_1", _ = "_list_twp4i_12", d = "_item_twp4i_18", p = {
-  menu: l,
-  list: _,
-  item: d
-}, M = ({ as: t = "nav", color: n, variant: e, className: o, children: s, ref: a }) => /* @__PURE__ */ c(t, { className: r(p.menu, o), "data-color": n, "data-variant": e, ref: a, children: s }), N = ({
+import '../../assets/MenuBase.css';const _ = "_menu_twp4i_1", d = "_list_twp4i_12", C = "_item_twp4i_18", p = {
+  menu: _,
+  list: d,
+  item: C
+}, N = ({ as: t = "nav", color: n, variant: e, className: o, children: s, ref: a }) => /* @__PURE__ */ c(t, { className: r(p.menu, o), "data-color": n, "data-variant": e, ref: a, children: s }), f = ({
   as: t = "ul",
   role: n = "group",
   className: e,
   children: o,
   ref: s,
   onMouseEnter: a,
-  onMouseLeave: m,
-  onBlurCapture: i
+  onMouseLeave: i,
+  onBlurCapture: m
 }) => /* @__PURE__ */ c(
   t,
   {
@@ -20,19 +20,20 @@ import '../../assets/MenuBase.css';const l = "_menu_twp4i_1", _ = "_list_twp4i_1
     role: n,
     ref: s,
     onMouseEnter: a,
-    onMouseLeave: m,
-    onBlurCapture: i,
+    onMouseLeave: i,
+    onBlurCapture: m,
     children: o
   }
-), f = ({
+), h = ({
   as: t = "li",
   role: n = "presentation",
   className: e,
   children: o,
   style: s,
   dataIndex: a,
+  disabled: i,
   onMouseEnter: m,
-  onMouseLeave: i,
+  onMouseLeave: l,
   "aria-checked": u
 }) => /* @__PURE__ */ c(
   t,
@@ -42,13 +43,14 @@ import '../../assets/MenuBase.css';const l = "_menu_twp4i_1", _ = "_list_twp4i_1
     style: s,
     "data-index": a,
     onMouseEnter: m,
-    onMouseLeave: i,
+    onMouseLeave: l,
+    "aria-disabled": i,
     "aria-checked": u,
     children: o
   }
 );
 export {
-  M as MenuBase,
-  N as MenuList,
-  f as MenuListItem
+  N as MenuBase,
+  f as MenuList,
+  h as MenuListItem
 };

package/dist/components/Menu/MenuItemBase.js

@@ -1,55 +1,55 @@
 import { jsx as r } from "react/jsx-runtime";
-import { c as N } from "../../index-L8X2o7IH.js";
-import { useRef as B } from "react";
-import '../../assets/MenuItemBase.css';const E = "_item_zzw8j_1", M = "_content_zzw8j_45", s = {
-  item: E,
-  content: M
+import { c as E } from "../../index-L8X2o7IH.js";
+import { useRef as M } from "react";
+import '../../assets/MenuItemBase.css';const R = "_item_cs9p2_1", b = "_content_cs9p2_40", c = {
+  item: R,
+  content: b
 }, A = ({
-  interactive: c = !0,
+  interactive: s = !0,
   ariaLabel: m,
-  role: d,
+  role: o,
   as: i,
-  color: o,
-  variant: f,
-  size: l,
-  className: p,
+  color: d,
+  variant: p,
+  size: f,
+  className: u,
   href: _,
   onClick: t,
-  onKeyPress: a,
-  tabIndex: u = 0,
-  hidden: z,
-  selected: x,
-  disabled: e = !1,
-  children: j,
-  active: v,
-  onMouseEnter: b,
-  dataTestId: h
+  onKeyPress: e,
+  tabIndex: l = 0,
+  hidden: x,
+  selected: v,
+  disabled: a = !1,
+  children: h,
+  active: I,
+  onMouseEnter: N,
+  dataTestId: j
 }) => {
-  const w = i || "a", I = B(null);
+  const z = i || "a", B = M(null);
   return /* @__PURE__ */ r(
-    w,
+    z,
     {
-      tabIndex: e ? "-1" : u ?? 0,
-      className: N(s.item, p),
-      role: d,
+      tabIndex: a ? "-1" : l ?? 0,
+      className: E(c.item, u),
+      role: o,
       "aria-label": m,
-      "data-interactive": c,
-      "data-active": v,
-      "data-size": l,
-      "data-color": o,
-      "data-variant": f,
-      "aria-hidden": z,
-      "aria-disabled": e,
-      "data-selected": x,
+      "data-interactive": !a && s,
+      "data-active": I,
+      "data-size": f,
+      "data-color": d,
+      "data-variant": p,
+      "aria-hidden": x,
+      "aria-disabled": a,
+      "data-selected": v,
       href: _,
       onKeyPress: (n) => {
-        n.key === "Enter" && (t == null || t()), a == null || a(n);
+        a || (n.key === "Enter" && (t == null || t()), e == null || e(n));
       },
       onClick: t,
-      onMouseEnter: b,
-      "data-testid": h,
-      ref: I,
-      children: /* @__PURE__ */ r("span", { className: s.content, children: j })
+      onMouseEnter: N,
+      "data-testid": j,
+      ref: B,
+      children: /* @__PURE__ */ r("span", { className: c.content, children: h })
     }
   );
 };

package/dist/components/Settings/SettingsItem.js

@@ -6,8 +6,8 @@ import "../Snackbar/useSnackbar.js";
 import { Input as x } from "../Forms/Input.js";
 import { SettingsItemBase as n } from "./SettingsItemBase.js";
 import { SettingsModal as I } from "./SettingsModal.js";
-const M = ({
-  loading: u,
+const O = ({
+  loading: a,
   variant: f = "default",
   id: c = "settings",
   name: m,
@@ -17,8 +17,8 @@ const M = ({
   children: v,
   ...t
 }) => {
-  const [l, a] = b(!1);
-  if (u)
+  const [l, u] = b(!1);
+  if (a)
     return /* @__PURE__ */ i(n, { icon: t == null ? void 0 : t.icon, title: t == null ? void 0 : t.title, loading: !0 });
   switch (f) {
     case "switch":
@@ -49,23 +49,21 @@ const M = ({
         }
       );
     case "modal":
-      return /* @__PURE__ */ i(
-        n,
+      return /* @__PURE__ */ i(n, { ...t, as: "button", linkIcon: !0, onClick: () => u(!0), expanded: l, children: l && /* @__PURE__ */ i(
+        I,
         {
-          ...t,
+          ...e,
+          icon: (e == null ? void 0 : e.icon) || (t == null ? void 0 : t.icon),
           title: (e == null ? void 0 : e.title) || (t == null ? void 0 : t.title),
-          description: e == null ? void 0 : e.description,
-          as: "button",
-          linkIcon: !0,
-          onClick: () => a(!0),
-          expanded: l,
-          children: l && /* @__PURE__ */ i(I, { icon: t == null ? void 0 : t.icon, title: t == null ? void 0 : t.title, open: l, onClose: () => a(!1), children: v })
+          open: l,
+          onClose: () => u(!1),
+          children: v
         }
-      );
+      ) });
     default:
       return /* @__PURE__ */ i(n, { ...t });
   }
 };
 export {
-  M as SettingsItem
+  O as SettingsItem
 };

package/dist/components/Settings/SettingsItemBase.js

@@ -1,47 +1,48 @@
-import { jsxs as L, jsx as i } from "react/jsx-runtime";
+import { jsxs as d, jsx as i } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
-import { getAriaLabelFromTitle as d } from "../Menu/MenuItemLabel.js";
-import { ListItemBase as f } from "../List/ListItemBase.js";
-import { ListItemHeader as g } from "../List/ListItemHeader.js";
-import { ListItemLabel as I } from "../List/ListItemLabel.js";
+import { getAriaLabelFromTitle as f } from "../Menu/MenuItemLabel.js";
+import { ListItemBase as g } from "../List/ListItemBase.js";
+import { ListItemHeader as I } from "../List/ListItemHeader.js";
+import { ListItemLabel as k } from "../List/ListItemLabel.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/SettingsItemBase.css';const k = "_item_lk1g7_1", N = "_label_lk1g7_20", j = "_header_lk1g7_24", e = {
-  item: k,
-  label: N,
-  header: j
-}, q = ({
+import '../../assets/SettingsItemBase.css';const N = "_item_lk1g7_1", j = "_label_lk1g7_20", x = "_header_lk1g7_24", e = {
+  item: N,
+  label: j,
+  header: x
+}, v = ({
+  ref: s,
   loading: t,
-  color: s,
-  size: l,
+  color: l,
+  size: o,
   expanded: r,
-  icon: o,
-  label: c,
+  icon: c,
+  label: n,
   title: m,
-  value: n,
-  description: _,
-  children: b,
-  highlightWords: h,
+  value: _,
+  description: b,
+  children: h,
+  highlightWords: p,
   ...a
 }) => {
-  const p = a.ariaLabel || d(m);
-  return /* @__PURE__ */ L(f, { className: e.item, color: s, size: l, expanded: r, children: [
-    /* @__PURE__ */ i(g, { ...a, loading: t, ariaLabel: p, className: e.header, icon: o, children: /* @__PURE__ */ i(
-      I,
+  const L = a.ariaLabel || f(m);
+  return /* @__PURE__ */ d(g, { ref: s, className: e.item, color: l, size: o, expanded: r, children: [
+    /* @__PURE__ */ i(I, { ...a, loading: t, ariaLabel: L, className: e.header, icon: c, children: /* @__PURE__ */ i(
+      k,
       {
         loading: t,
-        highlightWords: h,
+        highlightWords: p,
         className: e.label,
         title: m,
-        value: n,
-        description: _,
-        children: c
+        value: _,
+        description: b,
+        children: n
       }
     ) }),
-    r && b
+    r && h
   ] });
 };
 export {
-  q as SettingsItemBase
+  v as SettingsItemBase
 };

package/dist/components/Settings/SettingsModal.js

@@ -1,15 +1,39 @@
-import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import { jsxs as e, jsx as d } from "react/jsx-runtime";
+import { createElement as x } from "react";
 import "../../index-L8X2o7IH.js";
-import "react";
+import { Button as g } from "../Button/Button.js";
+import { ButtonGroup as j } from "../Button/ButtonGroup.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import { ModalBase as s } from "../Modal/ModalBase.js";
-import { ModalHeader as f } from "../Modal/ModalHeader.js";
-import { ModalBody as l } from "../Modal/ModalBody.js";
-const u = ({ icon: t, title: m, description: i, open: p, onClose: o, children: d, ...a }) => /* @__PURE__ */ e(s, { ...a, open: p, onClose: o, children: [
-  /* @__PURE__ */ r(f, { icon: t, title: m, description: i, onClose: o }),
-  /* @__PURE__ */ r(l, { children: d })
+import { ModalBase as y } from "../Modal/ModalBase.js";
+import { ModalHeader as E } from "../Modal/ModalHeader.js";
+import { ModalBody as G } from "../Modal/ModalBody.js";
+const J = ({
+  icon: a,
+  title: c,
+  description: f,
+  open: l,
+  onClose: i,
+  buttons: m,
+  children: h,
+  ...B
+}) => /* @__PURE__ */ e(y, { ...B, open: l, onClose: i, children: [
+  /* @__PURE__ */ d(E, { icon: a, title: c, description: f, onClose: i }),
+  /* @__PURE__ */ e(G, { children: [
+    h,
+    (m == null ? void 0 : m.length) && /* @__PURE__ */ d(j, { children: m == null ? void 0 : m.map((r, M) => /* @__PURE__ */ x(
+      g,
+      {
+        ...r,
+        key: M,
+        onClick: (k) => {
+          var p;
+          (p = r == null ? void 0 : r.onClick) == null || p.call(r, k), r != null && r.close && (i == null || i());
+        }
+      }
+    )) })
+  ] })
 ] });
 export {
-  u as SettingsModal
+  J as SettingsModal
 };

package/dist/hooks/useMenu.js

@@ -1,39 +1,39 @@
 "use client";
-import { useState as w, useMemo as x, useCallback as k, useEffect as m } from "react";
-import { useEnterKey as A } from "./useEnterKey.js";
-const L = ({
-  items: u,
+import { useState as w, useMemo as x, useCallback as k, useEffect as A } from "react";
+import { useEnterKey as D } from "./useEnterKey.js";
+const M = ({
+  items: s,
   groups: p,
-  groupByKey: a,
-  keyboardEvents: i = !1,
+  groupByKey: i,
+  keyboardEvents: a = !1,
   sortGroupBy: v,
-  onSelect: c,
-  ref: l
+  onSelect: l,
+  ref: c
 }) => {
-  const [f, s] = w(-1);
-  A((n) => {
-    if (i) {
-      const t = l && "current" in l ? l.current : null, e = t == null ? void 0 : t.querySelector('[data-active="true"]');
-      n.stopPropagation(), n.preventDefault(), e && (e.tagName === "A" && e.hasAttribute("href") ? e.click() : e.dispatchEvent(new MouseEvent("click", { bubbles: !0 }))), c == null || c();
+  const [d, u] = w(-1);
+  D((t) => {
+    if (a) {
+      const n = c && "current" in c ? c.current : null, e = n == null ? void 0 : n.querySelector('[data-active="true"]');
+      t.stopPropagation(), t.preventDefault(), e && (e.tagName === "A" && e.hasAttribute("href") ? e.click() : e.dispatchEvent(new MouseEvent("click", { bubbles: !0 }))), l == null || l();
     }
   });
   const h = x(() => {
-    const n = u.reduce(
+    const t = s.reduce(
       (e, o) => {
-        const r = a && o[a] ? o[a] : "ungrouped";
+        const r = i && o[i] ? o[i] : "ungrouped";
         return e[r] = e[r] || [], e[r].push(o), e;
       },
       {}
-    ), t = Object.values(n).flat();
-    return Object.entries(n).sort(v || (() => 0)).map(([e, o]) => ({
+    ), n = Object.values(t).flat().filter((e) => !(e != null && e.disabled));
+    return Object.entries(t).sort(v || (() => 0)).map(([e, o]) => ({
       items: o.map((r) => ({
-        menuIndex: t.indexOf(r),
-        active: f === t.indexOf(r),
-        onMouseEnter: i ? () => {
-          s(t.indexOf(r));
+        menuIndex: n.indexOf(r),
+        active: d === n.indexOf(r),
+        onMouseEnter: a ? () => {
+          u(n.indexOf(r));
         } : void 0,
-        onMouseLeave: i ? () => {
-          s(-1);
+        onMouseLeave: a ? () => {
+          u(-1);
         } : void 0,
         props: r
       })),
@@ -41,16 +41,16 @@ const L = ({
         ...p[e] || {}
       }
     }));
-  }, [u, a, f, p]), d = k(
-    (n) => {
-      n.key === "ArrowDown" ? (n.preventDefault(), s((t) => (t + 1) % u.length)) : n.key === "ArrowUp" && (n.preventDefault(), s((t) => (t - 1 + u.length) % u.length));
+  }, [s, i, d, p]), f = k(
+    (t) => {
+      t.key === "ArrowDown" ? (t.preventDefault(), u((n) => (n + 1) % s.length)) : t.key === "ArrowUp" && (t.preventDefault(), u((n) => (n - 1 + s.length) % s.length));
     },
-    [u.length]
+    [s.length]
   );
-  return m(() => (i && (s(0), document.addEventListener("keydown", d)), () => {
-    document.removeEventListener("keydown", d);
-  }), [d, i]), { menu: h, activeIndex: f, setActiveIndex: s };
+  return A(() => (a && (u(0), document.addEventListener("keydown", f)), () => {
+    document.removeEventListener("keydown", f);
+  }), [f, a]), { menu: h, activeIndex: d, setActiveIndex: u };
 };
 export {
-  L as useMenu
+  M as useMenu
 };

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

@@ -10,4 +10,4 @@ export interface AccountListProps {
     emptyTitle?: string;
     emptyDescription?: string;
 }
-export declare const AccountList: ({ items, groups, sortGroupBy, emptyTitle, emptyDescription, }: AccountListProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AccountList: ({ items, groups, sortGroupBy }: 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, emptyTitle, emptyDescription, }: AccountListProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ items, groups, sortGroupBy }: AccountListProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: AccountListProps;

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

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

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

@@ -4,6 +4,7 @@ export type ListItemSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type ListItemBorder = 'none' | 'solid' | 'dotted';
 export type ListItemColor = Color;
 export interface ListItemBaseProps {
+    ref?: React.Ref<HTMLElement>;
     /** If true, the list item is interactive and has a hover state. */
     interactive?: boolean;
     /** The element type to render as. */
@@ -41,4 +42,4 @@ export interface ListItemBaseProps {
     /** Id of list item. */
     id?: string;
 }
-export declare const ListItemBase: ({ as, interactive, size, color, variant, shadow, border, hidden, selected, className, onMouseEnter, id, children, }: ListItemBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItemBase: ({ ref, as, interactive, size, color, variant, shadow, border, hidden, selected, className, onMouseEnter, id, children, }: ListItemBaseProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Menu/MenuBase.d.ts

@@ -31,6 +31,7 @@ export interface MenuListItemProps {
     children?: ReactNode;
     style?: React.CSSProperties;
     dataIndex?: number;
+    disabled?: boolean;
     onMouseEnter?: MouseEventHandler;
     onMouseLeave?: MouseEventHandler;
     ref?: HTMLUListElement;
@@ -38,4 +39,4 @@ export interface MenuListItemProps {
 }
 export declare const MenuBase: ({ as, color, variant, className, children, ref }: MenuBaseProps) => import("react/jsx-runtime").JSX.Element;
 export declare const MenuList: ({ as, role, className, children, ref, onMouseEnter, onMouseLeave, onBlurCapture, }: MenuListProps) => import("react/jsx-runtime").JSX.Element;
-export declare const MenuListItem: ({ as, role, className, children, style, dataIndex, onMouseEnter, onMouseLeave, "aria-checked": ariaChecked, }: MenuListItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MenuListItem: ({ as, role, className, children, style, dataIndex, disabled, onMouseEnter, onMouseLeave, "aria-checked": ariaChecked, }: MenuListItemProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,9 +1,11 @@
-import { InputProps, SettingsItemBaseProps } from '..';
+import { InputProps, SettingsItemBaseProps, SettingsModalProps } from '..';
 import { ReactNode } from 'react';
 export type SettingsItemVariant = 'default' | 'modal' | 'switch';
 export interface SettingsItemModalProps {
-    title?: string;
-    description?: string;
+    icon?: SettingsModalProps['icon'];
+    title?: SettingsModalProps['title'];
+    description?: SettingsModalProps['description'];
+    buttons?: SettingsModalProps['buttons'];
 }
 export interface SettingsItemProps extends SettingsItemBaseProps {
     variant?: SettingsItemVariant;

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

@@ -26,6 +26,7 @@ declare const meta: {
         expanded?: boolean | undefined;
         icon?: import('..').SvgElement | import('..').IconProps | React.ReactNode | import('..').AvatarProps | import('..').AvatarGroupProps;
         label?: React.ReactNode;
+        ref?: React.Ref<HTMLElement> | undefined;
         interactive?: boolean | undefined;
         as?: React.ElementType | undefined;
         tabIndex?: number | undefined;
@@ -58,6 +59,7 @@ export declare const Value: Story;
 export declare const Loading: Story;
 export declare const Switch: Story;
 export declare const Modal: Story;
+export declare const ModalProps: Story;
 export declare const Company: Story;
 export declare const Person: Story;
 export declare const Bookmark: () => import("react/jsx-runtime").JSX.Element;

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

@@ -10,4 +10,4 @@ export interface SettingsItemBaseProps extends ListItemBaseProps, ListItemHeader
     value?: ListItemLabelProps['value'];
     description?: ListItemLabelProps['description'];
 }
-export declare const SettingsItemBase: ({ loading, color, size, expanded, icon, label, title, value, description, children, highlightWords, ...props }: SettingsItemBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SettingsItemBase: ({ ref, loading, color, size, expanded, icon, label, title, value, description, children, highlightWords, ...props }: SettingsItemBaseProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,11 @@
-import { ModalBaseProps, ModalHeaderProps } from '..';
+import { ButtonProps, ModalBaseProps, ModalHeaderProps } from '..';
+export interface SettingsModalButtonProps extends ButtonProps {
+    close?: boolean;
+}
 export interface SettingsModalProps extends ModalBaseProps {
     icon?: ModalHeaderProps['icon'];
     title?: ModalHeaderProps['title'];
     description?: ModalHeaderProps['description'];
+    buttons?: SettingsModalButtonProps[];
 }
-export declare const SettingsModal: ({ icon, title, description, open, onClose, children, ...args }: SettingsModalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SettingsModal: ({ icon, title, description, open, onClose, buttons, children, ...args }: SettingsModalProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -2,7 +2,7 @@ import { ChangeEvent } from 'react';
 import { AccountListItemProps, SettingsModalProps, UsedByLogProps } from '..';
 declare const meta: {
     title: string;
-    component: ({ icon, title, description, open, onClose, children, ...args }: SettingsModalProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ icon, title, description, open, onClose, buttons, children, ...args }: SettingsModalProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {

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

@@ -24,6 +24,7 @@ declare const meta: {
         size?: import('..').ListItemSize | undefined;
         color?: import('..').ListItemColor | undefined;
         className?: string | undefined;
+        ref?: React.Ref<HTMLElement> | undefined;
         icon?: import('..').SvgElement | import('..').IconProps | React.ReactNode | import('..').AvatarProps | import('..').AvatarGroupProps;
         as?: React.ElementType | undefined;
         label?: React.ReactNode | (() => React.ReactElement);

package/package.json

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