@altinn/altinn-components 0.14.3 → 0.15.0

package/dist/components/List/ListItem.js

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

package/dist/components/List/ListItemBase.js

@@ -1,41 +1,75 @@
 import { jsx as x } from "react/jsx-runtime";
-import { c as _ } from "../../index-L8X2o7IH.js";
-import '../../assets/ListItemBase.css';const h = "_item_1okn7_1", u = {
-  item: h
-}, j = ({
-  size: t,
-  variant: e = "solid",
-  color: s,
-  theme: a = "default",
-  shadow: i = "xs",
-  loading: d,
-  disabled: r,
-  hidden: o = !1,
-  active: n = !1,
-  selected: c,
+import { c as h } from "../../index-L8X2o7IH.js";
+import '../../assets/ListItemBase.css';const L = "_item_1slti_1", N = "_interactive_1slti_53", i = {
+  item: L,
+  interactive: N
+}, D = ({
+  interactive: w = !0,
+  as: b,
+  href: j,
+  onClick: a,
+  onKeyPress: t,
+  tabIndex: z,
+  size: r,
+  variant: s,
+  color: d,
+  theme: e,
+  shadow: B,
+  loading: n,
+  disabled: o,
+  hidden: m = !1,
+  active: c = !1,
+  selected: p,
   expanded: l,
-  className: m,
-  children: f
+  className: v,
+  children: _
 }) => {
-  const p = _(u.item, m);
+  const f = e === "transparent" ? "none" : B;
+  if (w) {
+    const I = h(i.item, i.interactive, v);
+    return /* @__PURE__ */ x(
+      b || "button",
+      {
+        className: I,
+        "data-variant": s,
+        "data-color": d,
+        "data-theme": e,
+        "data-size": r,
+        "data-shadow": f,
+        "data-active": c,
+        href: j,
+        onKeyPress: (u) => {
+          u.key === "Enter" && (a == null || a()), t == null || t(u);
+        },
+        onClick: a,
+        tabIndex: z,
+        "aria-hidden": m,
+        "aria-disabled": o || n,
+        "aria-selected": p,
+        "aria-expanded": l,
+        children: _
+      }
+    );
+  }
+  const E = h(i.item, v);
   return /* @__PURE__ */ x(
     "article",
     {
-      className: p,
-      "data-variant": e,
-      "data-color": s,
-      "data-theme": a,
-      "data-size": t,
-      "data-shadow": a === "transparent" ? "none" : i,
-      "data-active": n,
-      "aria-hidden": o,
-      "aria-disabled": r || d,
-      "aria-selected": c,
+      className: E,
+      "data-variant": s,
+      "data-color": d,
+      "data-theme": e,
+      "data-size": r,
+      "data-shadow": f,
+      "data-active": c,
+      "aria-hidden": m,
+      "aria-disabled": o || n,
+      "aria-selected": p,
       "aria-expanded": l,
-      children: f
+      children: _
     }
   );
 };
 export {
-  j as ListItemBase
+  D as ListItemBase
 };

package/dist/components/List/ListItemControls.js

@@ -1,19 +1,10 @@
-import { jsx as o, jsxs as e, Fragment as i } from "react/jsx-runtime";
-import { c as a } from "../../index-L8X2o7IH.js";
-import { Badge as _ } from "../Badge/Badge.js";
-import { ContextMenu as p } from "../ContextMenu/ContextMenu.js";
-import { Icon as x } from "../Icon/Icon.js";
-import "../Icon/SvgIcon.js";
-import '../../assets/ListItemControls.css';const k = "_controls_n31lc_1", f = "_linkText_n31lc_11", I = "_linkIcon_n31lc_16", n = {
-  controls: k,
-  linkText: f,
-  linkIcon: I
-}, C = ({ className: m, badge: s, linkText: t, linkIcon: c, menu: r, children: l }) => /* @__PURE__ */ o("div", { className: a(n.controls, m), children: l || /* @__PURE__ */ e(i, { children: [
-  s && /* @__PURE__ */ o(_, { ...s }),
-  t && /* @__PURE__ */ o("span", { className: n.linkText, children: t }),
-  c && /* @__PURE__ */ o(x, { name: c, className: n.linkIcon }),
-  r && /* @__PURE__ */ o(p, { ...r, size: "sm", className: n.menu })
-] }) });
+import { jsx as s } from "react/jsx-runtime";
+import { c as t } from "../../index-L8X2o7IH.js";
+import '../../assets/ListItemControls.css';const c = "_controls_1schy_1", l = "_linkText_1schy_13", r = "_linkIcon_1schy_18", i = {
+  controls: c,
+  linkText: l,
+  linkIcon: r
+}, k = ({ className: o, children: n }) => /* @__PURE__ */ s("div", { className: t(i.controls, o), children: n });
 export {
-  C as ListItemControls
+  k as ListItemControls
 };

package/dist/components/List/ListItemHeader.js

@@ -1,64 +1,90 @@
-import { jsxs as c, jsx as t } from "react/jsx-runtime";
-import { c as H } from "../../index-L8X2o7IH.js";
-import { ListItemControls as i } from "./ListItemControls.js";
-import { ListItemLabel as M } from "./ListItemLabel.js";
-import { ListItemLink as S } from "./ListItemLink.js";
-import { ListItemMedia as q } from "./ListItemMedia.js";
-import { ListItemSelect as A } from "./ListItemSelect.js";
-import '../../assets/ListItemHeader.css';const B = "_header_1xskv_1", D = "_link_1xskv_8", E = "_controls_1xskv_44", e = {
-  header: B,
-  link: D,
-  controls: E
-}, R = ({
-  as: a,
-  loading: o,
-  disabled: l,
-  select: s,
-  href: d,
-  onClick: h,
-  onKeyPress: k,
-  tabIndex: p,
-  collapsible: m,
-  expanded: n,
-  size: r = "sm",
-  title: L,
-  description: _,
-  icon: I,
-  avatar: f,
-  avatarGroup: x,
-  linkIcon: v,
-  linkText: N,
-  badge: b,
-  menu: j,
-  controls: u,
-  className: w,
-  children: y
+import { jsxs as t, 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 "../Icon/SvgIcon.js";
+import "../Autocomplete/AutocompleteBase.js";
+import "../RootProvider/RootProvider.js";
+import { ListItemLink as M } from "./ListItemLink.js";
+import { ListItemLabel as C } from "./ListItemLabel.js";
+import { ListItemIcon as E } from "./ListItemIcon.js";
+import { ListItemControls as F } from "./ListItemControls.js";
+import { ListItemSelect as H } from "./ListItemSelect.js";
+import { Badge as V } from "../Badge/Badge.js";
+import "../Snackbar/useSnackbar.js";
+import '../../assets/ListItemHeader.css';const b = "_header_13dzg_1", g = "_link_13dzg_39", l = {
+  header: b,
+  link: g
+}, Y = ({
+  as: f,
+  loading: i,
+  disabled: h,
+  select: a,
+  href: L,
+  onClick: x,
+  onKeyPress: z,
+  tabIndex: I,
+  size: m = "sm",
+  title: _,
+  description: u,
+  icon: N,
+  avatar: S,
+  avatarGroup: j,
+  linkIcon: s,
+  badge: r,
+  controls: o,
+  className: k,
+  children: v
 }) => {
-  const C = m && n ? "chevron-up" : m ? "chevron-down" : v;
-  return /* @__PURE__ */ c("header", { className: e.header, "data-size": r, "aria-expanded": n, children: [
-    s && /* @__PURE__ */ t(A, { ...s, size: r }),
-    /* @__PURE__ */ c(
-      S,
-      {
-        className: H(e.link, w),
-        as: a,
-        href: d,
-        onClick: h,
-        onKeyPress: k,
-        tabIndex: p,
-        loading: o,
-        disabled: l || o,
-        size: r,
-        children: [
-          /* @__PURE__ */ t(q, { loading: o, size: r, icon: I, avatar: f, avatarGroup: x }),
-          /* @__PURE__ */ t(M, { loading: o, size: r, title: L, description: _, children: y }),
-          /* @__PURE__ */ t(i, { linkIcon: C, linkText: N, badge: b })
-        ]
-      }
-    ),
-    /* @__PURE__ */ t(i, { className: e.controls, menu: j, children: u })
+  const n = {
+    xs: "sm",
+    sm: "md",
+    md: "lg",
+    lg: "lg",
+    xl: "xl"
+  }[m], c = () => r && typeof r == "object" && "label" in r ? /* @__PURE__ */ e(V, { ...r }) : B(r) ? r : null;
+  return /* @__PURE__ */ t("header", { className: l.header, "data-size": m, children: [
+    /* @__PURE__ */ t("div", { className: l.link, children: [
+      a && /* @__PURE__ */ e(H, { ...a, size: n }),
+      /* @__PURE__ */ t(
+        M,
+        {
+          interactive: !!o,
+          className: y(l.link, k),
+          as: f,
+          href: L,
+          onClick: x,
+          onKeyPress: z,
+          tabIndex: I,
+          loading: i,
+          disabled: h || i,
+          size: m,
+          children: [
+            /* @__PURE__ */ e(
+              E,
+              {
+                loading: i,
+                size: n,
+                icon: N,
+                avatar: S,
+                avatarGroup: j
+              }
+            ),
+            /* @__PURE__ */ e(C, { size: m, loading: i, title: _, description: u, children: v }),
+            o && /* @__PURE__ */ t(p, { children: [
+              c(),
+              s && /* @__PURE__ */ e(d, { name: s, size: n })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(F, { className: l.controls, children: o || /* @__PURE__ */ t(p, { children: [
+      c(),
+      s && /* @__PURE__ */ e(d, { name: s, size: n })
+    ] }) })
   ] });
 };
 export {
-  R as ListItemHeader
+  Y as ListItemHeader
 };

package/dist/components/List/ListItemIcon.js

@@ -0,0 +1,25 @@
+import { jsx as m } from "react/jsx-runtime";
+import { isValidElement as n } from "react";
+import { Avatar as l } from "../Avatar/Avatar.js";
+import { AvatarGroup as u } from "../Avatar/AvatarGroup.js";
+import { Icon as i } from "../Icon/Icon.js";
+import "../Icon/SvgIcon.js";
+import "../../index-L8X2o7IH.js";
+import "../Autocomplete/AutocompleteBase.js";
+import "../RootProvider/RootProvider.js";
+import "../Snackbar/useSnackbar.js";
+const y = ({ loading: e, size: t = "sm", icon: r, avatar: o, avatarGroup: p, children: f }) => {
+  if (!r && !o && !p && !f)
+    return null;
+  if (e)
+    return /* @__PURE__ */ m(i, { name: "x-mark", size: t, loading: !0 });
+  if (r)
+    return n(r) ? r : /* @__PURE__ */ m(i, { ...typeof r == "string" ? { name: r } : r, size: t });
+  if (o)
+    return /* @__PURE__ */ m(l, { ...o, size: t });
+  if (p)
+    return /* @__PURE__ */ m(u, { ...p, size: t });
+};
+export {
+  y as ListItemIcon
+};

package/dist/components/List/ListItemLabel.js

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

package/dist/components/List/ListItemLink.js

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

package/dist/components/List/ListItemSelect.js

@@ -1,19 +1,19 @@
-import { jsxs as n, jsx as e } from "react/jsx-runtime";
-import { c as l } from "../../index-L8X2o7IH.js";
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { c } from "../../index-L8X2o7IH.js";
 import "react";
 import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import "../Icon/SvgIcon.js";
-import { CheckboxIcon as r } from "../Icon/CheckboxIcon.js";
-import '../../assets/ListItemSelect.css';const a = "_label_1vv8z_1", m = "_input_1vv8z_32", p = "_icon_1vv8z_37", t = {
-  label: a,
-  input: m,
-  icon: p
-}, I = ({ size: i, checked: o = !1, onChange: s, className: c }) => /* @__PURE__ */ n("label", { className: l(t.label, c), "data-size": i, children: [
-  /* @__PURE__ */ e("input", { type: "checkbox", checked: o, onChange: s, className: t.input, tabIndex: -1 }),
-  /* @__PURE__ */ e(r, { hover: !0, checked: o, className: t.icon })
+import { CheckboxIcon as p } from "../Icon/CheckboxIcon.js";
+import '../../assets/ListItemSelect.css';const r = "_label_l4npz_1", a = "_input_l4npz_15", m = "_icon_l4npz_20", t = {
+  label: r,
+  input: a,
+  icon: m
+}, N = ({ size: n, checked: o = !1, onChange: i, className: l }) => /* @__PURE__ */ s("label", { className: c(t.label, l), "data-size": n, children: [
+  /* @__PURE__ */ e("input", { type: "checkbox", checked: o, onChange: i, className: t.input, tabIndex: -1 }),
+  /* @__PURE__ */ e(p, { hover: !0, checked: o, className: t.icon })
 ] });
 export {
-  I as ListItemSelect
+  N as ListItemSelect
 };

package/dist/components/List/index.js

@@ -1,22 +1,22 @@
 import { ListItemBase as o } from "./ListItemBase.js";
 import { ListItemLink as m } from "./ListItemLink.js";
-import { ListItemHeader as i } from "./ListItemHeader.js";
+import { ListItemHeader as L } from "./ListItemHeader.js";
 import { ListItemLabel as f } from "./ListItemLabel.js";
-import { ListItemMedia as x } from "./ListItemMedia.js";
+import { ListItemIcon as x } from "./ListItemIcon.js";
 import { ListItemControls as a } from "./ListItemControls.js";
-import { ListItemSelect as d } from "./ListItemSelect.js";
+import { ListItemSelect as n } from "./ListItemSelect.js";
 import { ListItem as B } from "./ListItem.js";
-import { ListBase as c } from "./ListBase.js";
+import { ListBase as d } from "./ListBase.js";
 import { List as C } from "./List.js";
 export {
   C as List,
-  c as ListBase,
+  d as ListBase,
   B as ListItem,
   o as ListItemBase,
   a as ListItemControls,
-  i as ListItemHeader,
+  L as ListItemHeader,
+  x as ListItemIcon,
   f as ListItemLabel,
   m as ListItemLink,
-  x as ListItemMedia,
-  d as ListItemSelect
+  n as ListItemSelect
 };

package/dist/components/Menu/Menu.js

@@ -1,24 +1,26 @@
 import { jsx as r } from "react/jsx-runtime";
-import { MenuBase as i } from "./MenuBase.js";
-import { MenuItems as p } from "./MenuItems.js";
+import { MenuBase as f } from "./MenuBase.js";
+import { MenuItems as M } from "./MenuItems.js";
 const d = ({
   color: e,
-  theme: m,
-  defaultItemColor: o,
-  defaultItemTheme: t = "default",
-  defaultItemSize: n = "sm",
-  groups: s,
-  items: u = [],
-  search: f
-}) => /* @__PURE__ */ r(i, { color: e, theme: m, children: /* @__PURE__ */ r(
-  p,
+  theme: o,
+  defaultItemColor: m,
+  defaultItemTheme: t,
+  defaultItemSize: n,
+  defaultIconTheme: i,
+  groups: p,
+  items: s = [],
+  search: u
+}) => /* @__PURE__ */ r(f, { color: e, theme: o, children: /* @__PURE__ */ r(
+  M,
   {
-    search: f,
-    items: u,
-    groups: s,
+    search: u,
+    items: s,
+    groups: p,
     defaultItemSize: n,
-    defaultItemColor: o,
-    defaultItemTheme: t
+    defaultItemColor: m,
+    defaultItemTheme: t,
+    defaultIconTheme: i
   }
 ) });
 export {