@altinn/altinn-components 0.7.3 → 0.7.5

package/dist/components/Layout/Layout.stories.js

@@ -1,15 +1,15 @@
-import { jsx as n, jsxs as u, Fragment as I } from "react/jsx-runtime";
-import { useState as g, createElement as y } from "react";
+import { jsx as o, jsxs as p, Fragment as y } from "react/jsx-runtime";
+import { useState as h, createElement as I } from "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "../RootProvider/RootProvider.js";
-import { DialogListItem as A } from "../Dialog/DialogListItem.js";
-import { ListBase as v } from "../List/ListBase.js";
+import { D as A } from "../../Autocomplete-hEFuiN2u.js";
 import { Layout as k } from "./Layout.js";
-import { ActionHeader as w } from "../LayoutAction/ActionHeader.js";
-import { ActionFooter as C } from "../LayoutAction/ActionFooter.js";
+import { ActionHeader as S } from "../LayoutAction/ActionHeader.js";
+import { ActionFooter as v } from "../LayoutAction/ActionFooter.js";
 import { ActionMenu as L } from "../LayoutAction/ActionMenu.js";
-import { Snackbar as M } from "../Snackbar/Snackbar.js";
+import { ListBase as w } from "../List/ListBase.js";
+import { Snackbar as B } from "../Snackbar/Snackbar.js";
 const m = {
   search: {
     name: "search",
@@ -21,15 +21,104 @@ const m = {
     name: "Aurora Mikalsen"
   },
   menu: {
+    logoutButton: {
+      label: "Logg ut"
+    },
+    items: [
+      {
+        id: "1",
+        icon: "airplane",
+        size: "lg",
+        title: "Section 1"
+      },
+      {
+        id: "2",
+        icon: "briefcase",
+        size: "lg",
+        title: "Section 2"
+      },
+      {
+        id: "3",
+        size: "lg",
+        title: "Section 3",
+        icon: "camera"
+      }
+    ],
+    accountSearch: {
+      name: "account-search",
+      placeholder: "Søk etter konto"
+    },
+    accountGroups: {
+      primary: {
+        title: "Deg selv og favoritter"
+      },
+      secondary: {
+        title: "Andre kontoer"
+      }
+    },
     accounts: [
       {
-        id: "party:aurora",
+        id: "aurora",
+        groupId: "primary",
         type: "person",
-        name: "Aurora Mikalsen"
+        name: "Aurora Mikalsen",
+        selected: !0,
+        badge: {
+          label: "2"
+        }
+      },
+      {
+        id: "bergen-bar",
+        groupId: "favourites",
+        type: "company",
+        name: "Bergen Bar",
+        selected: !1,
+        badge: {
+          label: "19"
+        }
+      },
+      {
+        id: "allAccounts",
+        groupId: "groups",
+        type: "company",
+        name: "Alle virksomheter",
+        accountNames: ["Keeperhansker AS", "Stadion drift AS", "Landslaget"],
+        selected: !1,
+        badge: {
+          label: "19"
+        }
+      },
+      {
+        id: "keeper",
+        groupId: "secondary",
+        type: "company",
+        name: "Keeperhansker AS",
+        selected: !1
+      },
+      {
+        id: "stadion-drift",
+        groupId: "secondary",
+        type: "company",
+        name: "Stadion drift AS",
+        selected: !1
+      },
+      {
+        id: "sk-brann",
+        groupId: "favourites",
+        type: "company",
+        name: "Sportsklubben Brann",
+        selected: !1
+      },
+      {
+        id: "norge",
+        groupId: "secondary",
+        type: "company",
+        name: "Landslaget",
+        selected: !1
       }
     ]
   }
-}, x = {
+}, C = {
   address: "Postboks 1382 Vika, 0114 Oslo.",
   address2: "Org.nr. 991 825 827",
   menu: {
@@ -100,7 +189,7 @@ const m = {
       title: "Papirkurv"
     }
   ]
-}, Q = {
+}, G = {
   title: "Layout/Layout",
   component: k,
   tags: ["autodocs"],
@@ -110,32 +199,34 @@ const m = {
   args: {
     theme: "person",
     header: m,
-    footer: x,
+    footer: C,
     sidebar: {
       menu: f
     }
   }
-}, U = {
+}, H = {
   args: {}
-}, V = (a) => {
-  const [r, s] = g(""), h = (t) => {
+}, N = (l) => {
+  const [r, s] = h(""), u = (t) => {
     s(t.target.value);
-  }, p = [
+  }, g = [
     {
+      type: "scope",
       groupId: "1",
       id: "inbox",
       href: "#",
-      label: r ? () => /* @__PURE__ */ u("span", { children: [
-        /* @__PURE__ */ n("mark", { children: r }),
+      label: r ? () => /* @__PURE__ */ p("span", { children: [
+        /* @__PURE__ */ o("mark", { children: r }),
         " i innboksen"
       ] }) : "Alt i innboksen"
     },
     {
+      type: "scope",
       groupId: "1",
       id: "global",
       href: "#",
-      label: r ? () => /* @__PURE__ */ u("span", { children: [
-        /* @__PURE__ */ n("mark", { children: r }),
+      label: r ? () => /* @__PURE__ */ p("span", { children: [
+        /* @__PURE__ */ o("mark", { children: r }),
         " i hele Altinn"
       ] }) : "Alt i hele Altinn"
     }
@@ -143,39 +234,39 @@ const m = {
     {
       groupId: "2",
       href: "http://www.altinn.no",
-      label: "Skattemelding 2024"
+      description: "Skattemelding 2024"
     },
     {
       groupId: "2",
       href: "http://www.altinn.no",
-      label: "Skattemelding 2025"
+      description: "Skattemelding 2025"
     }
-  ].filter((t) => t.label.toLowerCase().includes((r ?? "").toLowerCase())) : [], d = {
+  ].filter((t) => t.description.toLowerCase().includes((r ?? "").toLowerCase())) : [], d = {
     groups: {
       2: {
         title: `${c.length} treff i innboksen`
       }
     },
-    items: [...p, ...c]
+    items: [...g, ...c]
   };
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ o(
     k,
     {
-      ...a,
+      ...l,
       header: {
-        ...a.header,
+        ...l.header,
         search: {
-          ...a.header.search,
+          ...l.header.search,
           value: r,
-          onChange: h,
+          onChange: u,
           onClear: () => s(""),
           autocomplete: d
         }
       }
     }
   );
-}, $ = (a) => {
-  const [r, s] = g([]), [h, p] = g({
+}, Q = (l) => {
+  const [r, s] = h([]), [u, g] = h({
     1: {
       id: "1",
       title: "Item 1",
@@ -215,31 +306,31 @@ const m = {
   ].map((e) => ({
     ...e,
     as: "button",
-    onClick: () => s((o) => [
-      ...o,
+    onClick: () => s((n) => [
+      ...n,
       {
         message: "Snack me"
       }
     ])
   })), d = ({ id: e }) => {
-    p((o) => ({
-      ...o,
+    g((n) => ({
+      ...n,
       [e]: {
-        ...o[e],
-        selected: !o[e].selected
+        ...n[e],
+        selected: !n[e].selected
       }
     }));
-  }, t = Object.values(h), l = t == null ? void 0 : t.filter((e) => e.selected), i = (l == null ? void 0 : l.length) > 0, b = (l == null ? void 0 : l.length) + " av " + (t == null ? void 0 : t.length) + " valgt";
-  return /* @__PURE__ */ u(
+  }, t = Object.values(u), a = t == null ? void 0 : t.filter((e) => e.selected), i = (a == null ? void 0 : a.length) > 0, b = (a == null ? void 0 : a.length) + " av " + (t == null ? void 0 : t.length) + " valgt";
+  return /* @__PURE__ */ p(
     k,
     {
       theme: i ? "neutral" : "company",
-      header: { ...m, search: i ? null : m.search },
+      header: { ...m, search: i ? void 0 : m.search },
       sidebar: { hidden: i, menu: f },
       content: { theme: "neutral" },
       children: [
-        /* @__PURE__ */ n(w, { title: b, hidden: !i }),
-        /* @__PURE__ */ n(v, { children: t == null ? void 0 : t.map((e) => /* @__PURE__ */ y(
+        /* @__PURE__ */ o(S, { title: b, hidden: !i }),
+        /* @__PURE__ */ o(w, { children: t == null ? void 0 : t.map((e) => /* @__PURE__ */ I(
           A,
           {
             ...e,
@@ -250,17 +341,17 @@ const m = {
             select: { checked: e == null ? void 0 : e.selected, onChange: () => d(e) }
           }
         )) }),
-        /* @__PURE__ */ n(C, { hidden: !1, children: /* @__PURE__ */ u(I, { children: [
-          i && /* @__PURE__ */ n(L, { items: c, theme: "global-dark" }),
-          r.length > 0 && (r == null ? void 0 : r.map((e, o) => /* @__PURE__ */ n(M, { ...e }, o)))
+        /* @__PURE__ */ o(v, { hidden: !1, children: /* @__PURE__ */ p(y, { children: [
+          i && /* @__PURE__ */ o(L, { items: c, theme: "global-dark" }),
+          r.length > 0 && (r == null ? void 0 : r.map((e, n) => /* @__PURE__ */ o(B, { ...e }, n)))
         ] }) })
       ]
     }
   );
 };
 export {
-  V as ControlledStateSearch,
-  U as Default,
-  $ as InboxBulkMode,
-  Q as default
+  N as ControlledStateSearch,
+  H as Default,
+  Q as InboxBulkMode,
+  G as default
 };

package/dist/components/Layout/LayoutBase.js

@@ -1,7 +1,7 @@
-import { jsx as t } from "react/jsx-runtime";
-import '../../assets/LayoutBase.css';const o = "_base_1401f_1", r = {
+import { jsx as e } from "react/jsx-runtime";
+import '../../assets/LayoutBase.css';const o = "_base_wqztk_1", r = {
   base: o
-}, n = ({ currentId: s, theme: a, children: e }) => /* @__PURE__ */ t("div", { className: r.base, "data-theme": a, "data-current-id": s, children: e });
+}, n = ({ currentId: s, theme: t, children: a }) => /* @__PURE__ */ e("div", { className: r.base, "data-theme": t, "data-current-id": s, children: a });
 export {
   n as LayoutBase
 };

package/dist/components/LayoutAction/ActionMenu.js

@@ -2,13 +2,14 @@ import { jsx as t } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "react";
-import { MenuItem as n } from "../Menu/MenuItem.js";
+import { MenuItem as o } from "../Menu/MenuItem.js";
 import "../RootProvider/RootProvider.js";
-import { MenuBase as o } from "../Menu/MenuBase.js";
+import "../../Autocomplete-hEFuiN2u.js";
+import { MenuBase as n } from "../Menu/MenuBase.js";
 import '../../assets/ActionMenu.css';const s = "_menu_12gbo_1", l = "_list_12gbo_14", e = {
   menu: s,
   list: l
-}, f = ({ theme: m = "inherit", items: r = [] }) => /* @__PURE__ */ t(o, { theme: m, className: e.menu, children: /* @__PURE__ */ t("ul", { className: e.list, children: r.map((i) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(n, { ...i, className: e.item }) }, i.id)) }) });
+}, M = ({ theme: m = "inherit", items: r = [] }) => /* @__PURE__ */ t(n, { theme: m, className: e.menu, children: /* @__PURE__ */ t("ul", { className: e.list, children: r.map((i) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(o, { ...i, className: e.item }) }, i.id)) }) });
 export {
-  f as ActionMenu
+  M as ActionMenu
 };

package/dist/components/List/List.js

@@ -3,9 +3,9 @@ import { createElement as s } from "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "../RootProvider/RootProvider.js";
-import { ListItem as n } from "./ListItem.js";
-import { ListBase as f } from "./ListBase.js";
-const h = ({ theme: r, size: t = "md", spacing: m = "md", items: o = [] }) => /* @__PURE__ */ p(f, { theme: r, spacing: m, children: o.map((e, i) => /* @__PURE__ */ s(n, { ...e, size: t, key: "item" + i })) });
+import { a } from "../../Autocomplete-hEFuiN2u.js";
+import { ListBase as n } from "./ListBase.js";
+const h = ({ theme: r, size: t = "md", spacing: m = "md", items: o = [] }) => /* @__PURE__ */ p(n, { theme: r, spacing: m, children: o.map((e, i) => /* @__PURE__ */ s(a, { ...e, size: t, key: "item" + i })) });
 export {
   h as List
 };

package/dist/components/List/List.stories.js

@@ -3,8 +3,9 @@ import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "react";
 import "../RootProvider/RootProvider.js";
+import "../../Autocomplete-hEFuiN2u.js";
 import { List as t } from "./List.js";
-const m = {
+const a = {
   title: "List/List",
   component: t,
   tags: ["autodocs"],
@@ -31,10 +32,10 @@ const m = {
       }
     ]
   }
-}, a = {
+}, c = {
   args: {}
 };
 export {
-  a as Default,
-  m as default
+  c as Default,
+  a as default
 };

package/dist/components/List/ListItem.js

@@ -1,41 +1,8 @@
-import { jsx as t } from "react/jsx-runtime";
-import { ListItemBase as v } from "./ListItemBase.js";
-import { ListItemControls as x } from "./ListItemControls.js";
-import { ListItemHeader as j } from "./ListItemHeader.js";
-import { ListItemLabel as w } from "./ListItemLabel.js";
-const D = ({
-  as: e = "a",
-  color: n,
-  loading: o,
-  size: r = "sm",
-  icon: i,
-  avatar: c,
-  avatarGroup: p,
-  title: s,
-  description: I,
-  collapsible: m,
-  expanded: L,
-  badge: a,
-  linkText: f,
-  linkIcon: l,
-  menu: h,
-  select: k,
-  controls: b,
-  children: d,
-  ...u
-}) => /* @__PURE__ */ t(
-  v,
-  {
-    as: e,
-    size: r,
-    color: n,
-    loading: o,
-    select: k,
-    controls: b || /* @__PURE__ */ t(x, { linkIcon: m && L ? "chevron-up" : m ? "chevron-down" : l, linkText: f, menu: h, badge: a }),
-    ...u,
-    children: /* @__PURE__ */ t(j, { loading: o, size: r, icon: i, avatar: c, avatarGroup: p, children: /* @__PURE__ */ t(w, { loading: o, title: s, description: I, size: r, children: d }) })
-  }
-);
+import "react/jsx-runtime";
+import "./ListItemBase.js";
+import { a } from "../../Autocomplete-hEFuiN2u.js";
+import "./ListItemHeader.js";
+import "./ListItemLabel.js";
 export {
-  D as ListItem
+  a as ListItem
 };

package/dist/components/List/ListItem.stories.js

@@ -5,7 +5,7 @@ import "../Icon/SvgIcon.js";
 import { Button as b } from "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
 import { MetaItem as r } from "../Meta/MetaItem.js";
-import { ListItem as t } from "./ListItem.js";
+import { a as t } from "../../Autocomplete-hEFuiN2u.js";
 import { ListBase as d } from "./ListBase.js";
 import { List as k } from "./List.js";
 const l = ["lg", "md", "sm", "xs"], T = {

package/dist/components/List/ListItemControls.js

@@ -1,19 +1,9 @@
-import { jsx as t, jsxs as l, Fragment as m } from "react/jsx-runtime";
-import { Badge as i } from "../Badge/Badge.js";
-import { ContextMenu as a } from "../ContextMenu/ContextMenu.js";
-import { Icon as d } from "../Icon/Icon.js";
+import "react/jsx-runtime";
+import "../Badge/Badge.js";
+import { L as e } from "../../Autocomplete-hEFuiN2u.js";
+import "../Icon/Icon.js";
 import "../Icon/SvgIcon.js";
 import "../../index-L8X2o7IH.js";
-import '../../assets/ListItemControls.css';const _ = "_controls_dduzt_1", p = "_linkText_dduzt_14", x = "_linkIcon_dduzt_19", o = {
-  controls: _,
-  linkText: p,
-  linkIcon: x
-}, T = ({ badge: s, linkText: r, linkIcon: c, menu: n, children: e }) => /* @__PURE__ */ t("div", { className: o.controls, "data-menu": n && !0, children: e || /* @__PURE__ */ l(m, { children: [
-  s && /* @__PURE__ */ t(i, { ...s }),
-  r && /* @__PURE__ */ t("span", { className: o.linkText, children: r }),
-  c && /* @__PURE__ */ t(d, { name: c, className: o.linkIcon }),
-  n && /* @__PURE__ */ t(a, { ...n, className: o.menu })
-] }) });
 export {
-  T as ListItemControls
+  e as ListItemControls
 };

package/dist/components/List/index.js

@@ -1,20 +1,19 @@
 import { ListItemBase as o } from "./ListItemBase.js";
 import { ListItemHeader as m } from "./ListItemHeader.js";
-import { ListItemLabel as i } from "./ListItemLabel.js";
-import { ListItemMedia as f } from "./ListItemMedia.js";
-import { ListItemControls as x } from "./ListItemControls.js";
-import { ListItemSelect as a } from "./ListItemSelect.js";
-import { ListItem as d } from "./ListItem.js";
-import { ListBase as b } from "./ListBase.js";
-import { List as n } from "./List.js";
+import { ListItemLabel as L } from "./ListItemLabel.js";
+import { ListItemMedia as a } from "./ListItemMedia.js";
+import { a as p, L as x } from "../../Autocomplete-hEFuiN2u.js";
+import { ListItemSelect as l } from "./ListItemSelect.js";
+import { ListBase as B } from "./ListBase.js";
+import { List as c } from "./List.js";
 export {
-  n as List,
-  b as ListBase,
-  d as ListItem,
+  c as List,
+  B as ListBase,
+  p as ListItem,
   o as ListItemBase,
   x as ListItemControls,
   m as ListItemHeader,
-  i as ListItemLabel,
-  f as ListItemMedia,
-  a as ListItemSelect
+  L as ListItemLabel,
+  a as ListItemMedia,
+  l as ListItemSelect
 };

package/dist/components/Menu/Menu.js

@@ -1,18 +1,18 @@
-import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { MenuBase as u } from "./MenuBase.js";
-import { MenuItems as p } from "./MenuItems.js";
-import { MenuSearch as f } from "./MenuSearch.js";
-const j = ({
+import { M as p } from "../../Autocomplete-hEFuiN2u.js";
+import { MenuSearch as M } from "./MenuSearch.js";
+const h = ({
   theme: m = "inherit",
   defaultItemColor: o = "subtle",
   defaultItemSize: t = "sm",
   groups: n,
-  items: i = [],
+  items: s = [],
   search: r
-}) => /* @__PURE__ */ s(u, { theme: m, children: [
-  r && /* @__PURE__ */ e(f, { ...r }),
-  /* @__PURE__ */ e(p, { items: i, groups: n, defaultItemColor: o, defaultItemSize: t })
+}) => /* @__PURE__ */ i(u, { theme: m, children: [
+  r && /* @__PURE__ */ e(M, { ...r }),
+  /* @__PURE__ */ e(p, { items: s, groups: n, defaultItemColor: o, defaultItemSize: t })
 ] });
 export {
-  j as Menu
+  h as Menu
 };

package/dist/components/Menu/MenuItem.stories.js

@@ -8,7 +8,8 @@ import "../RootProvider/RootProvider.js";
 import { MetaItem as p } from "../Meta/MetaItem.js";
 import { MenuItem as o } from "./MenuItem.js";
 import { MenuBase as m } from "./MenuBase.js";
-const v = {
+import "../../Autocomplete-hEFuiN2u.js";
+const I = {
   title: "Menu/MenuItem",
   component: o,
   tags: ["autodocs"],
@@ -17,12 +18,12 @@ const v = {
     id: "inbox",
     onClick: i()
   }
-}, I = {
+}, A = {
   args: {
     icon: "inbox",
     title: "Innboks"
   }
-}, A = {
+}, C = {
   args: {
     icon: "inbox",
     title: "Innboks",
@@ -30,14 +31,14 @@ const v = {
       label: "4"
     }
   }
-}, C = {
+}, G = {
   args: {
     size: "lg",
     icon: "inbox",
     title: "Innboks",
     color: "strong"
   }
-}, G = {
+}, M = {
   args: {
     size: "lg",
     icon: "inbox",
@@ -56,7 +57,7 @@ const v = {
     },
     title: "Eirik Horneland"
   }
-}, M = {
+}, z = {
   args: {
     avatarGroup: {
       items: [
@@ -84,7 +85,7 @@ const v = {
     },
     title: "Sportsklubben Brann"
   }
-}, z = {
+}, H = {
   args: {
     avatarGroup: {
       defaultType: "company",
@@ -102,19 +103,19 @@ const v = {
     },
     title: "3 virksomheter"
   }
-}, H = {
+}, S = {
   args: {
     ...c.args,
     size: "lg",
     description: "Født: XX.XX.XXXX"
   }
-}, S = {
+}, E = {
   args: {
     ...g.args,
     size: "lg",
     description: "Org nr.: XX.XX.XXXX"
   }
-}, E = () => {
+}, L = () => {
   const t = ["global", "neutral", "company", "person", "global-dark"], a = ["neutral", "subtle", "strong", "company", "person"];
   return /* @__PURE__ */ n("div", { style: { display: "flex", width: "100%" }, children: t.map((e) => /* @__PURE__ */ n("div", { style: { flexGrow: 1 }, children: /* @__PURE__ */ n(l, { theme: e, children: /* @__PURE__ */ n(m, { children: a.map((r) => /* @__PURE__ */ s("div", { children: [
     /* @__PURE__ */ n(o, { icon: "inbox", title: "Title", color: r, id: "inbox" }),
@@ -122,16 +123,16 @@ const v = {
   ] }, r)) }) }) }, e)) });
 };
 export {
-  G as AlertBadge,
+  M as AlertBadge,
   g as Company,
-  S as CompanyAccount,
-  z as CompanyGroup,
-  I as Default,
-  A as DefaultBadge,
-  C as Large,
+  E as CompanyAccount,
+  H as CompanyGroup,
+  A as Default,
+  C as DefaultBadge,
+  G as Large,
   c as Person,
-  H as PersonAccount,
-  M as PersonGroup,
-  E as ThemesAndColors,
-  v as default
+  S as PersonAccount,
+  z as PersonGroup,
+  L as ThemesAndColors,
+  I as default
 };