@altinn/altinn-components 0.22.2 → 0.22.4

package/dist/components/List/ListItem.js

@@ -1,116 +1,71 @@
-import { jsx as r, jsxs as d } from "react/jsx-runtime";
-import { s as D, L as c } from "../../ListItemBase-DuTOUOfv.js";
-import { ListItemHeader as H } from "./ListItemHeader.js";
-import { S as k } from "../../ChevronRight-DUaHaWi-.js";
-import { S as q } from "../../ChevronUp-H8Nuww4h.js";
-import { S as w } from "../../ChevronDown-CRAwzuD3.js";
-const O = ({
-  className: o,
-  variant: v = "solid",
-  color: s,
-  theme: p = "default",
-  shadow: S = "xs",
-  loading: e,
-  collapsible: N,
-  expanded: m,
-  size: h = "sm",
+import { jsxs as d, jsx as k } from "react/jsx-runtime";
+import { ListItemBase as q } from "./ListItemBase.js";
+import { ListItemHeader as v } from "./ListItemHeader.js";
+const C = ({
+  className: f,
+  variant: e = "solid",
+  color: r,
+  theme: i = "default",
+  shadow: c = "xs",
+  loading: m,
+  collapsible: n,
+  expanded: s,
+  size: p = "sm",
   icon: u,
   avatar: L,
-  avatarGroup: I,
-  title: i,
-  description: C,
-  badge: j,
-  linkIcon: R = !1,
+  avatarGroup: l,
+  title: o,
+  description: I,
+  badge: a,
+  linkIcon: j = !1,
   label: t,
-  select: y,
-  selected: a,
-  controls: n,
-  children: U,
-  ...f
+  select: x,
+  selected: h,
+  controls: y,
+  children: B,
+  ...H
 }) => {
-  const x = N ? m ? q : w : void 0, B = typeof t == "function" ? t() : t;
-  return m ? /* @__PURE__ */ r("li", { className: D.item, children: /* @__PURE__ */ d(
-    c,
+  const b = typeof t == "function" ? t() : t;
+  return /* @__PURE__ */ d(
+    q,
     {
-      interactive: !1,
-      variant: v,
-      color: s,
-      theme: p,
-      shadow: S,
-      selected: a,
-      expanded: m,
-      title: i,
-      loading: e,
+      variant: e,
+      color: r,
+      theme: i,
+      shadow: c,
+      selected: h,
+      expanded: s,
+      title: o,
+      loading: m,
       children: [
-        /* @__PURE__ */ r(
-          c,
+        /* @__PURE__ */ k(
+          v,
           {
-            theme: "transparent",
-            interactive: !n,
-            size: h,
-            color: s,
-            loading: e,
-            title: i,
-            ...f,
-            children: /* @__PURE__ */ r(
-              H,
-              {
-                className: o,
-                loading: e,
-                select: y,
-                size: h,
-                title: i,
-                description: C,
-                icon: u,
-                avatar: L,
-                avatarGroup: I,
-                badge: j,
-                chevron: x,
-                controls: n,
-                ...f,
-                children: B
-              }
-            )
+            className: f,
+            color: r,
+            theme: i,
+            loading: m,
+            linkIcon: j,
+            collapsible: n,
+            expanded: s,
+            select: x,
+            size: p,
+            title: o,
+            description: I,
+            icon: u,
+            avatar: L,
+            avatarGroup: l,
+            badge: a,
+            controls: y,
+            ...H,
+            children: b
           }
         ),
-        U
+        s ? B : null
       ]
     }
-  ) }) : /* @__PURE__ */ r("li", { className: D.item, children: /* @__PURE__ */ r(
-    c,
-    {
-      interactive: !n,
-      variant: v,
-      color: s,
-      theme: p,
-      shadow: S,
-      expanded: m,
-      selected: a,
-      loading: e,
-      title: i,
-      ...f,
-      children: /* @__PURE__ */ r(
-        H,
-        {
-          className: o,
-          loading: e,
-          select: y,
-          size: h,
-          title: i,
-          description: C,
-          icon: u,
-          avatar: L,
-          avatarGroup: I,
-          badge: j,
-          chevron: x ?? (R ? k : void 0),
-          controls: n,
-          ...f,
-          children: B
-        }
-      )
-    }
-  ) });
+  );
 };
 export {
-  O as ListItem
+  C as ListItem
 };

package/dist/components/List/ListItemBase.js

@@ -1,6 +1,46 @@
-import "react/jsx-runtime";
-import "../../index-L8X2o7IH.js";
-import { L as e } from "../../ListItemBase-DuTOUOfv.js";
+import { jsx as b } from "react/jsx-runtime";
+import { c as H } from "../../index-L8X2o7IH.js";
+import '../../assets/ListItemBase.css';const f = "_item_1dbo9_1", x = "_interactiveSelected_1dbo9_83", h = "_interactiveHidden_1dbo9_87", u = "_interactive_1dbo9_83", t = {
+  item: f,
+  interactiveSelected: x,
+  interactiveHidden: h,
+  interactive: u
+}, j = ({
+  as: a,
+  interactive: n = !0,
+  size: c,
+  variant: o,
+  color: r,
+  theme: e,
+  shadow: d,
+  hidden: i = !1,
+  selected: s,
+  className: v,
+  onMouseEnter: m,
+  children: _
+}) => {
+  const l = a || "li", p = e === "transparent" ? "none" : d, S = H(
+    t.item,
+    v,
+    n && t.interactive,
+    s && t.interactiveSelected,
+    i && t.interactiveHidden
+  );
+  return /* @__PURE__ */ b(
+    l,
+    {
+      className: S,
+      "data-variant": o,
+      "data-color": r,
+      "data-theme": e,
+      "data-size": c,
+      "data-shadow": p,
+      "aria-hidden": i,
+      onMouseEnter: m,
+      children: _
+    }
+  );
+};
 export {
-  e as ListItemBase
+  j as ListItemBase
 };

package/dist/components/List/ListItemHeader.js

@@ -1,89 +1,109 @@
-import { jsxs as i, jsx as e, Fragment as p } from "react/jsx-runtime";
-import { c as y } from "../../index-L8X2o7IH.js";
-import { isValidElement as B } from "react";
-import { Icon as d } from "../Icon/Icon.js";
-import { Badge as M } from "../Badge/Badge.js";
+import { jsx as e, jsxs as n, Fragment as F } from "react/jsx-runtime";
+import { c as f } from "../../index-L8X2o7IH.js";
+import { useId as H, isValidElement as M } from "react";
+import { Icon as R } from "../Icon/Icon.js";
+import { Badge as U } from "../Badge/Badge.js";
 import "../RootProvider/RootProvider.js";
-import { ListItemLink as v } from "./ListItemLink.js";
-import { ListItemLabel as C } from "./ListItemLabel.js";
-import { ListItemIcon as F } from "./ListItemIcon.js";
-import { ListItemControls as H } from "./ListItemControls.js";
-import { ListItemSelect as V } from "./ListItemSelect.js";
+import { ListItemLink as V } from "./ListItemLink.js";
+import { ListItemLabel as q } from "./ListItemLabel.js";
+import { ListItemIcon as A } from "./ListItemIcon.js";
+import { ListItemControls as G } from "./ListItemControls.js";
+import { ListItemSelect as J } from "./ListItemSelect.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/ListItemHeader.css';const b = "_header_13dzg_1", g = "_link_13dzg_39", m = {
-  header: b,
-  link: g
-}, X = ({
-  as: f,
-  loading: t,
-  disabled: I,
-  select: c,
-  href: h,
-  onClick: L,
-  onKeyPress: x,
-  tabIndex: z,
+import { S as K } from "../../ChevronUp-H8Nuww4h.js";
+import { S as O } from "../../ChevronDown-CRAwzuD3.js";
+import { S as P } from "../../ChevronRight-DUaHaWi-.js";
+import '../../assets/ListItemHeader.css';const Q = "_wrapper_xtweu_1", W = "_link_xtweu_5", X = "_linkTitle_xtweu_10", Y = "_header_xtweu_16", Z = "_content_xtweu_54", t = {
+  wrapper: Q,
+  link: W,
+  linkTitle: X,
+  header: Y,
+  content: Z
+}, _e = ({
+  as: _,
+  interactive: m = !0,
+  color: u,
+  theme: I,
+  loading: r,
+  disabled: x,
+  collapsible: v,
+  linkIcon: w,
+  expanded: k,
+  select: l,
+  href: L,
+  onClick: S,
+  onKeyPress: N,
+  tabIndex: b,
   size: s = "sm",
-  title: k,
-  description: _,
-  icon: u,
-  avatar: N,
-  avatarGroup: S,
-  chevron: l,
-  badge: r,
-  controls: o,
+  title: a,
+  description: y,
+  icon: z,
+  avatar: C,
+  active: c,
+  avatarGroup: T,
+  badge: i,
+  controls: p,
   className: j,
-  children: E
+  children: B,
+  ariaLabel: E
 }) => {
-  const n = {
+  const g = {
     xs: "sm",
     sm: "md",
     md: "lg",
     lg: "lg",
     xl: "xl"
-  }[s], a = () => r && !t && typeof r == "object" && "label" in r ? /* @__PURE__ */ e(M, { ...r }) : B(r) ? r : null;
-  return /* @__PURE__ */ i("header", { className: m.header, "data-size": s, children: [
-    /* @__PURE__ */ i("div", { className: m.link, children: [
-      c && /* @__PURE__ */ e(V, { ...c, className: m.select, size: n }),
-      /* @__PURE__ */ i(
-        v,
-        {
-          interactive: !!o,
-          className: y(m.link, j),
-          as: f,
-          href: h,
-          onClick: L,
-          onKeyPress: x,
-          tabIndex: z,
-          loading: t,
-          disabled: I || t,
-          size: s,
-          children: [
-            /* @__PURE__ */ e(
-              F,
-              {
-                loading: t,
-                size: n,
-                icon: u,
-                avatar: N,
-                avatarGroup: S
-              }
-            ),
-            /* @__PURE__ */ e(C, { size: s, loading: t, title: k, description: _, children: E }),
-            o && /* @__PURE__ */ i(p, { children: [
-              a(),
-              l && /* @__PURE__ */ e(d, { svgElement: l, size: n })
-            ] })
-          ]
-        }
-      )
-    ] }),
-    /* @__PURE__ */ e(H, { className: m.controls, children: o && !t ? o : /* @__PURE__ */ i(p, { children: [
-      a(),
-      l && /* @__PURE__ */ e(d, { svgElement: l, size: n })
-    ] }) })
-  ] });
+  }, d = v ? k ? K : O : w ? P : void 0, o = g[s], D = () => i && !r && typeof i == "object" && "label" in i ? /* @__PURE__ */ e(U, { ...i }) : M(i) ? i : null, h = H();
+  return /* @__PURE__ */ e("div", { className: t.wrapper, children: /* @__PURE__ */ n(
+    "header",
+    {
+      className: f(t.header, j),
+      "data-color": u,
+      "data-theme": I,
+      "data-interactive": m,
+      "data-size": s,
+      "data-has-active-child": c,
+      children: [
+        /* @__PURE__ */ e(
+          V,
+          {
+            interactive: m,
+            className: f(t.link),
+            as: _,
+            href: L,
+            onClick: S,
+            onKeyPress: N,
+            tabIndex: b,
+            loading: r,
+            disabled: x || r,
+            active: c,
+            describedby: h,
+            children: /* @__PURE__ */ e("span", { className: t.linkTitle, children: E || a })
+          }
+        ),
+        /* @__PURE__ */ n("div", { className: t.content, "data-size": s, children: [
+          l && /* @__PURE__ */ e(J, { ...l, className: t.select, size: o }),
+          /* @__PURE__ */ e(
+            A,
+            {
+              loading: r,
+              size: o,
+              icon: z,
+              avatar: C,
+              avatarGroup: T
+            }
+          ),
+          /* @__PURE__ */ e(q, { size: s, loading: r, title: a, description: y, id: h, children: B })
+        ] }),
+        /* @__PURE__ */ e(G, { className: t.controls, children: p && !r ? /* @__PURE__ */ e("span", { style: { position: "relative" }, children: p }) : /* @__PURE__ */ n(F, { children: [
+          D(),
+          d && /* @__PURE__ */ e(R, { svgElement: d, size: o })
+        ] }) })
+      ]
+    }
+  ) });
 };
 export {
-  X as ListItemHeader
+  _e as ListItemHeader
 };

package/dist/components/List/ListItemLabel.js

@@ -1,21 +1,22 @@
-import { jsx as e, jsxs as o, Fragment as m } from "react/jsx-runtime";
+import { jsx as e, jsxs as m, Fragment as d } from "react/jsx-runtime";
 import { Skeleton as c } from "../Skeleton/Skeleton.js";
-import '../../assets/ListItemLabel.css';const d = "_label_fiqmy_3", _ = "_title_fiqmy_43", p = "_description_fiqmy_58", l = {
-  label: d,
-  title: _,
-  description: p
-}, f = ({
+import '../../assets/ListItemLabel.css';const _ = "_label_fiqmy_3", p = "_title_fiqmy_43", h = "_description_fiqmy_58", l = {
+  label: _,
+  title: p,
+  description: h
+}, y = ({
   loading: s = !1,
   size: t = "sm",
   title: n,
   weight: r = "bold",
   description: i,
-  children: a
-}) => /* @__PURE__ */ e("span", { className: l.label, "data-size": t, children: a || /* @__PURE__ */ o(m, { children: [
-  /* @__PURE__ */ e("h2", { className: l.title, "data-size": t, "data-weight": r, children: /* @__PURE__ */ e(c, { loading: s, children: n }) }),
+  children: a,
+  id: o
+}) => /* @__PURE__ */ e("span", { className: l.label, "data-size": t, id: o, children: a || /* @__PURE__ */ m(d, { children: [
+  /* @__PURE__ */ e(c, { loading: s, children: /* @__PURE__ */ e("h2", { className: l.title, "data-size": t, "data-weight": r, children: n }) }),
   " ",
-  i && /* @__PURE__ */ e("p", { className: l.description, "data-size": t, children: /* @__PURE__ */ e(c, { loading: s, children: i }) })
+  i && /* @__PURE__ */ e(c, { loading: s, children: /* @__PURE__ */ e("p", { className: l.description, "data-size": t, children: i }) })
 ] }) });
 export {
-  f as ListItemLabel
+  y as ListItemLabel
 };

package/dist/components/List/ListItemLink.js

@@ -1,35 +1,39 @@
-import { jsx as m } from "react/jsx-runtime";
-import { c } from "../../index-L8X2o7IH.js";
-import '../../assets/ListItemLink.css';const l = "_link_g93r9_1", u = "_interactive_g93r9_22", i = {
-  link: l,
-  interactive: u
-}, k = ({
-  interactive: o = !1,
-  size: e,
-  as: _,
-  loading: d,
-  disabled: p,
+import { jsx as c } from "react/jsx-runtime";
+import { c as o } from "../../index-L8X2o7IH.js";
+import '../../assets/ListItemLink.css';const x = "_link_kjmgd_1", i = {
+  link: x
+}, L = ({
+  interactive: e = !1,
+  size: r,
+  as: p,
+  loading: f,
+  disabled: l,
   selected: v,
-  href: f,
-  onClick: t,
-  onKeyPress: a,
-  className: n,
-  children: r
-}) => o ? /* @__PURE__ */ m(
-  _ || "button",
+  href: b,
+  onClick: a,
+  onKeyPress: t,
+  className: d,
+  children: s,
+  active: k,
+  describedby: m
+}) => e ? /* @__PURE__ */ c(
+  p || "div",
   {
-    className: c(i.link, i.interactive, n),
-    href: f,
-    onKeyPress: (s) => {
-      s.key === "Enter" && (t == null || t()), a == null || a(s);
+    className: o(i.link, i.interactive, d),
+    href: b,
+    onKeyPress: (n) => {
+      n.key === "Enter" && (a == null || a()), t == null || t(n);
     },
-    onClick: t,
-    "aria-disabled": d || p,
+    onClick: a,
+    "data-interactive": e,
+    "aria-disabled": f || l,
     "aria-selected": v,
-    "data-size": e,
-    children: r
+    "aria-describedby": m,
+    "data-size": r,
+    "data-active": k,
+    children: s
   }
-) : /* @__PURE__ */ m("div", { className: c(i.link, n), "data-size": e, children: r });
+) : /* @__PURE__ */ c("div", { className: o(i.link, d), "data-size": r, "aria-describedby": m, children: s });
 export {
-  k as ListItemLink
+  L as ListItemLink
 };

package/dist/components/List/index.js

@@ -1,4 +1,4 @@
-import { L as o } from "../../ListItemBase-DuTOUOfv.js";
+import { ListItemBase as o } from "./ListItemBase.js";
 import { ListItemLink as m } from "./ListItemLink.js";
 import { ListItemHeader as L } from "./ListItemHeader.js";
 import { ListItemLabel as f } from "./ListItemLabel.js";

package/dist/components/Page/ContactSection.js

@@ -1,24 +1,25 @@
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import { createElement as l } from "react";
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { createElement as s } from "react";
 import "../../index-L8X2o7IH.js";
-import { Button as s } from "../Button/Button.js";
+import { Button as f } from "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
-import { Typography as f } from "../Typography/Typography.js";
-import { Heading as g } from "../Typography/Heading.js";
+import { Typography as g } from "../Typography/Typography.js";
+import { Heading as h } from "../Typography/Heading.js";
 import "../Search/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { Flex as h } from "./Flex.js";
-import { Section as x } from "./Section.js";
-const H = ({
+import { Flex as x } from "./Flex.js";
+import { Section as u } from "./Section.js";
+const T = ({
+  variant: o = "inline",
   theme: t,
   color: e,
-  variant: o = "inline",
+  typographyProps: p,
   title: i,
-  description: p,
-  children: m,
+  description: m,
+  children: c,
   items: n
-}) => /* @__PURE__ */ d(
-  x,
+}) => /* @__PURE__ */ l(
+  u,
   {
     direction: "col",
     theme: t,
@@ -27,12 +28,12 @@ const H = ({
     shadow: o === "card" ? "xs" : "none",
     spacing: 4,
     children: [
-      i && /* @__PURE__ */ r(g, { size: "lg", children: i }),
-      /* @__PURE__ */ r(f, { children: m || /* @__PURE__ */ r("p", { children: p }) }),
-      n && /* @__PURE__ */ r(h, { spacing: 2, children: n.map((c, a) => /* @__PURE__ */ l(s, { ...c, variant: "outline", key: a })) })
+      i && /* @__PURE__ */ r(h, { size: "lg", children: i }),
+      /* @__PURE__ */ r(g, { ...p, children: c || /* @__PURE__ */ r("p", { children: m }) }),
+      n && /* @__PURE__ */ r(x, { spacing: 2, children: n.map((a, d) => /* @__PURE__ */ s(f, { ...a, variant: "outline", key: d })) })
     ]
   }
 );
 export {
-  H as ContactSection
+  T as ContactSection
 };

package/dist/components/Search/Autocomplete.js

@@ -17,28 +17,29 @@ const C = ({ className: s, items: i, groups: n = {}, expanded: u, onSelect: r })
       e == null || e.dispatchEvent(new MouseEvent("click", { bubbles: !0 })), r == null || r();
     }
   });
-  const { menu: c, setActiveIndex: f } = I({
+  const { menu: a, setActiveIndex: c } = I({
     items: i,
     groups: n,
     groupByKey: "groupId",
     keyboardEvents: !0
   });
-  return /* @__PURE__ */ m(l, { className: s, expanded: u, ref: p, children: c.map((t, e) => /* @__PURE__ */ A(x, { ...t.props, key: e }, /* @__PURE__ */ m("ul", { children: t.items.map((a, d) => {
+  return /* @__PURE__ */ m(l, { className: s, expanded: u, ref: p, children: a.map((t, e) => /* @__PURE__ */ A(x, { ...t.props, key: e }, /* @__PURE__ */ m("ul", { children: t.items.map((f, d) => {
     const {
-      active: y,
-      menuIndex: E,
-      props: { groupId: M, onClick: o, ...b }
-    } = a;
+      active: b,
+      menuIndex: y,
+      props: { groupId: M, onClick: o, ...E }
+    } = f;
     return /* @__PURE__ */ m(
       h,
       {
+        as: "button",
         tabIndex: -1,
-        onMouseEnter: () => f(E),
-        ...b,
+        onMouseEnter: () => c(y),
+        ...E,
         onClick: () => {
           o == null || o(), r == null || r();
         },
-        active: y
+        active: b
       },
       d
     );

package/dist/components/Search/AutocompleteItem.js

@@ -48,7 +48,7 @@ const w = ({ type: m, ...e }) => {
     case "dialog":
       return /* @__PURE__ */ t(r, { ...e, theme: "default", shadow: "none", size: "sm", tabIndex: -1 });
     case "information":
-      return /* @__PURE__ */ t(o, { ...e, theme: "default", shadow: "none", tabIndex: -1, disabled: !0 });
+      return /* @__PURE__ */ t(o, { ...e, theme: "default", shadow: "none", tabIndex: -1, interactive: !1 });
     default:
       return /* @__PURE__ */ t(o, { ...e, theme: "default", shadow: "none", size: "sm", tabIndex: -1 });
   }