@altinn/altinn-components 0.10.0 → 0.10.2

package/dist/components/GlobalMenu/GlobalMenu.js

@@ -1,65 +1,72 @@
 "use client";
-import { jsxs as n, jsx as o, Fragment as x } from "react/jsx-runtime";
-import { useState as G } from "react";
+import { jsxs as l, jsx as r, Fragment as T } from "react/jsx-runtime";
+import { useState as j, useMemo as A } from "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
-import { AccountMenu as v } from "./AccountMenu.js";
-import { AccountButton as C } from "./AccountButton.js";
-import { BackButton as j } from "./BackButton.js";
-import { LogoutButton as A } from "./LogoutButton.js";
-import { MenuListItem as l } from "../Menu/MenuBase.js";
-import { Menu as u } from "../Menu/Menu.js";
-import { GlobalMenuBase as m, GlobalMenuHeader as d, GlobalMenuFooter as F } from "./GlobalMenuBase.js";
-const O = ({
-  accounts: a = [],
-  accountGroups: f = {},
-  accountSearch: h,
+import { AccountMenu as F } from "./AccountMenu.js";
+import { AccountButton as L } from "./AccountButton.js";
+import { BackButton as H } from "./BackButton.js";
+import { LogoutButton as I } from "./LogoutButton.js";
+import { MenuListItem as a } from "../Menu/MenuBase.js";
+import { Menu as h } from "../Menu/Menu.js";
+import { GlobalMenuBase as m, GlobalMenuHeader as g, GlobalMenuFooter as W } from "./GlobalMenuBase.js";
+const R = ({
+  accounts: c = [],
+  accountGroups: M = {},
+  accountSearch: k,
   items: s = [],
-  groups: c,
-  changeLabel: M = "Change",
-  backLabel: g = "Back",
-  currentAccount: r,
-  onSelectAccount: e,
-  logoutButton: p
+  groups: p,
+  changeLabel: b = "Change",
+  backLabel: B = "Back",
+  currentAccount: o,
+  onSelectAccount: i,
+  onClose: e,
+  logoutButton: u
 }) => {
-  const [b, k] = G(!1), t = () => {
-    k((i) => !i);
-  }, B = (i) => {
-    t(), e == null || e(i);
-  };
-  return b ? /* @__PURE__ */ n(m, { children: [
-    /* @__PURE__ */ o(d, { children: /* @__PURE__ */ o(j, { onClick: t, label: g }) }),
-    /* @__PURE__ */ o(l, { as: "div", role: "separator" }),
-    /* @__PURE__ */ o(
-      v,
+  const [x, G] = j(!1), n = () => {
+    G((t) => !t);
+  }, v = (t) => {
+    n(), i == null || i(t);
+  }, d = A(() => s.map((t) => ({
+    ...t,
+    onClick: () => {
+      var f;
+      (f = t.onClick) == null || f.call(t), e == null || e();
+    }
+  })), [s, e]);
+  return x ? /* @__PURE__ */ l(m, { children: [
+    /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r(H, { onClick: n, label: B }) }),
+    /* @__PURE__ */ r(a, { as: "div", role: "separator" }),
+    /* @__PURE__ */ r(
+      F,
       {
-        currentAccount: r,
-        accounts: a,
-        accountGroups: f,
-        accountSearch: h,
-        onSelectAccount: B
+        currentAccount: o,
+        accounts: c,
+        accountGroups: M,
+        accountSearch: k,
+        onSelectAccount: v
       }
     )
-  ] }) : r ? /* @__PURE__ */ n(m, { children: [
-    /* @__PURE__ */ o(d, { children: /* @__PURE__ */ o(
-      C,
+  ] }) : o ? /* @__PURE__ */ l(m, { children: [
+    /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r(
+      L,
       {
-        account: r,
-        linkText: M,
-        multipleAccounts: a.length > 1,
-        onClick: t
+        account: o,
+        linkText: b,
+        multipleAccounts: c.length > 1,
+        onClick: n
       }
     ) }),
-    /* @__PURE__ */ o(l, { as: "div", role: "separator" }),
-    /* @__PURE__ */ o(u, { groups: c, items: s }),
-    p && /* @__PURE__ */ n(x, { children: [
-      /* @__PURE__ */ o(l, { as: "div", role: "separator" }),
-      /* @__PURE__ */ o(F, { children: /* @__PURE__ */ o(A, { ...p }) })
+    /* @__PURE__ */ r(a, { as: "div", role: "separator" }),
+    /* @__PURE__ */ r(h, { groups: p, items: d }),
+    u && /* @__PURE__ */ l(T, { children: [
+      /* @__PURE__ */ r(a, { as: "div", role: "separator" }),
+      /* @__PURE__ */ r(W, { children: /* @__PURE__ */ r(I, { ...u }) })
     ] })
-  ] }) : /* @__PURE__ */ o(m, { children: /* @__PURE__ */ o(u, { groups: c, items: s }) });
+  ] }) : /* @__PURE__ */ r(m, { children: /* @__PURE__ */ r(h, { groups: p, items: d }) });
 };
 export {
-  O as GlobalMenu
+  R as GlobalMenu
 };

package/dist/components/GlobalMenu/GlobalMenu.stories.js

@@ -9,29 +9,29 @@ import "../../examples/dialog/reportingCompletedDialog.js";
 import "../../examples/dialog/transmissionsTimeline.js";
 import "../../examples/dialog/transmissionsInProgressDialog.js";
 import "../../examples/dialog/transmissionsCompletedDialog.js";
-import { GlobalMenu as n } from "./GlobalMenu.js";
+import { GlobalMenu as e } from "./GlobalMenu.js";
 const y = {
   title: "GlobalMenu/GlobalMenu",
-  component: n,
+  component: e,
   tags: ["autodocs"],
   parameters: {},
   args: {
     ...a
   }
 }, C = (o) => {
-  const t = o.accounts, [r, e] = u(t[0]), c = (m) => {
-    const i = t == null ? void 0 : t.find((s) => s.id === m);
-    e(i);
+  const t = o.accounts, [r, c] = u(t[0]), i = (m) => {
+    const n = t == null ? void 0 : t.find((s) => s.id === m);
+    n && c(n);
   };
   return /* @__PURE__ */ p(
-    n,
+    e,
     {
       ...o,
       currentAccount: {
         ...r,
         description: r.type === "person" ? "Fødselsnr. XXXXXX YYYYY" : "Org. nr"
       },
-      onSelectAccount: c
+      onSelectAccount: i
     }
   );
 }, D = {

package/dist/components/Header/Header.js

@@ -1,15 +1,15 @@
 "use client";
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
 import { DropdownBase as g } from "../Dropdown/DropdownBase.js";
 import "../../index-L8X2o7IH.js";
 import { DrawerBase as x } from "../Dropdown/DrawerBase.js";
 import "../Icon/SvgIcon.js";
 import "react";
 import "../Autocomplete/AutocompleteBase.js";
-import { useRootContext as H } from "../RootProvider/RootProvider.js";
-import { GlobalMenu as m } from "../GlobalMenu/GlobalMenu.js";
-import { HeaderBase as _ } from "./HeaderBase.js";
-import { HeaderLogo as C } from "./HeaderLogo.js";
+import { useRootContext as C } from "../RootProvider/RootProvider.js";
+import { GlobalMenu as p } from "../GlobalMenu/GlobalMenu.js";
+import { HeaderBase as H } from "./HeaderBase.js";
+import { HeaderLogo as _ } from "./HeaderLogo.js";
 import { HeaderButton as b } from "./HeaderButton.js";
 import { Searchbar as B } from "../Searchbar/Searchbar.js";
 import { HeaderMenu as N } from "./HeaderMenu.js";
@@ -17,21 +17,21 @@ import { HeaderSearch as S } from "./HeaderSearch.js";
 import '../../assets/Header.css';const v = "_drawer_ft5v3_1", y = "_dropdown_ft5v3_5", s = {
   drawer: v,
   dropdown: y
-}, K = ({ search: d, menu: r, currentAccount: a, logo: p = {}, badge: l }) => {
-  const { currentId: o, toggleId: n, openId: i, closeAll: c } = H(), h = () => {
-    i("search");
+}, K = ({ search: n, menu: r, currentAccount: a, logo: l = {}, badge: i }) => {
+  const { currentId: o, toggleId: d, openId: c, closeAll: t } = C(), h = () => {
+    c("search");
   }, f = () => {
-    n("search");
+    d("search");
   }, w = () => {
-    n("menu");
+    d("menu");
   };
-  return /* @__PURE__ */ t(_, { currentId: o, open: o === "search" || o === "menu", onClose: c, children: [
-    /* @__PURE__ */ e(C, { ...p, className: s.logo }),
-    /* @__PURE__ */ t(N, { className: s.menu, children: [
+  return /* @__PURE__ */ m(H, { currentId: o, open: o === "search" || o === "menu", onClose: t, children: [
+    /* @__PURE__ */ e(_, { ...l, className: s.logo }),
+    /* @__PURE__ */ m(N, { className: s.menu, children: [
       /* @__PURE__ */ e(
         b,
         {
-          badge: l,
+          badge: i,
           avatar: a && {
             type: a.type,
             name: a.name
@@ -41,10 +41,10 @@ import '../../assets/Header.css';const v = "_drawer_ft5v3_1", y = "_dropdown_ft5
           label: r == null ? void 0 : r.menuLabel
         }
       ),
-      r && /* @__PURE__ */ e(g, { padding: !0, placement: "right", open: o === "menu", className: s.dropdown, children: /* @__PURE__ */ e(m, { ...r, currentAccount: a }) })
+      r && /* @__PURE__ */ e(g, { padding: !0, placement: "right", open: o === "menu", className: s.dropdown, children: /* @__PURE__ */ e(p, { ...r, currentAccount: a, onClose: t }) })
     ] }),
-    d && /* @__PURE__ */ e(S, { expanded: o === "search", children: /* @__PURE__ */ e(B, { ...d, expanded: o === "search", onClose: f, onFocus: h }) }),
-    r && /* @__PURE__ */ e(x, { open: o === "menu", className: s.drawer, children: /* @__PURE__ */ e(m, { ...r, currentAccount: a }) })
+    n && /* @__PURE__ */ e(S, { expanded: o === "search", children: /* @__PURE__ */ e(B, { ...n, expanded: o === "search", onClose: f, onFocus: h }) }),
+    r && /* @__PURE__ */ e(x, { open: o === "menu", className: s.drawer, children: /* @__PURE__ */ e(p, { ...r, currentAccount: a }) })
   ] });
 };
 export {

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

@@ -1,145 +1,50 @@
-import { jsx as n, jsxs as u, Fragment as v } from "react/jsx-runtime";
-import { useState as h, createElement as x } from "react";
-import "../../index-L8X2o7IH.js";
-import "../Icon/SvgIcon.js";
-import "../Autocomplete/AutocompleteBase.js";
-import { DialogListItem as L } from "../Dialog/DialogListItem.js";
-import "../RootProvider/RootProvider.js";
-import { ListBase as B } from "../List/ListBase.js";
-import { Layout as d } from "./Layout.js";
-import { ActionHeader as C } from "../LayoutAction/ActionHeader.js";
-import { ActionFooter as F } from "../LayoutAction/ActionFooter.js";
-import { ActionMenu as j } from "../LayoutAction/ActionMenu.js";
-import { Snackbar as D } from "../Snackbar/Snackbar.js";
+import { jsx as r } from "react/jsx-runtime";
 import "../../examples/globalMenu.js";
-import { inboxMenu as p } from "../../examples/inboxMenu.js";
+import { inboxMenu as n } from "../../examples/inboxMenu.js";
 import "../../examples/inboxFilters.js";
-import { header as f } from "../../examples/header.js";
-import { footer as w } from "../../examples/footer.js";
-import { useInboxSearch as b } from "../../examples/useInboxSearch.js";
-import { useAccountMenu as k } from "../../examples/useAccountMenu.js";
+import { header as i } from "../../examples/header.js";
+import { footer as u } from "../../examples/footer.js";
+import { useInboxSearch as p } from "../../examples/useInboxSearch.js";
+import { useAccountMenu as c } from "../../examples/useAccountMenu.js";
 import "../../examples/dialog/reportingDraftDialog.js";
 import "../../examples/dialog/reportingInProgressDialog.js";
 import "../../examples/dialog/reportingCompletedDialog.js";
 import "../../examples/dialog/transmissionsTimeline.js";
 import "../../examples/dialog/transmissionsInProgressDialog.js";
 import "../../examples/dialog/transmissionsCompletedDialog.js";
-const ne = {
+import { Layout as t } from "./Layout.js";
+const D = {
   title: "Layout/Layout",
-  component: d,
+  component: t,
   tags: ["autodocs"],
   parameters: {
     layout: "fullscreen"
   },
   args: {
     theme: "person",
-    header: f,
-    footer: w,
+    header: i,
+    footer: u,
     sidebar: {
-      menu: p
+      menu: n
     },
-    children: /* @__PURE__ */ n("p", { children: "Content (should be hidden on mobile when menu is open)." })
+    children: /* @__PURE__ */ r("p", { children: "Content (should be hidden on mobile when menu is open)." })
   }
-}, ce = (o) => {
-  const s = b(o.header.search), i = k(o.header.menu);
-  return /* @__PURE__ */ n(
-    d,
+}, I = (o) => {
+  const m = p(o.header.search), e = c(o.header.menu);
+  return /* @__PURE__ */ r(
+    t,
     {
       ...o,
       header: {
         ...o.header,
-        currentAccount: i.currentAccount,
-        menu: i,
-        search: s
+        currentAccount: e.currentAccount,
+        menu: e,
+        search: m
       }
     }
   );
-}, le = (o) => {
-  const s = b(o.header.search), i = k(o.header.menu), [a, g] = h([]), [y, I] = h({
-    1: {
-      id: "1",
-      title: "Item 1",
-      selected: !0
-    },
-    2: {
-      id: "2",
-      title: "Item 2",
-      selected: !1
-    },
-    3: {
-      id: "3",
-      title: "Item 2",
-      selected: !1
-    }
-  }), A = [
-    {
-      id: "1",
-      icon: "arrow-redo",
-      title: "Del og gi tilgang"
-    },
-    {
-      id: "2",
-      icon: "eye",
-      title: "Marker som lest"
-    },
-    {
-      id: "3",
-      icon: "archive",
-      title: "Flytt til arkiv"
-    },
-    {
-      id: "4",
-      icon: "trash",
-      title: "Flytt til papirkurv"
-    }
-  ].map((e) => ({
-    ...e,
-    as: "button",
-    onClick: () => g((r) => [
-      ...r,
-      {
-        message: "Snack me"
-      }
-    ])
-  })), m = ({ id: e }) => {
-    I((r) => ({
-      ...r,
-      [e]: {
-        ...r[e],
-        selected: !r[e].selected
-      }
-    }));
-  }, t = Object.values(y), c = t == null ? void 0 : t.filter((e) => e.selected), l = (c == null ? void 0 : c.length) > 0, M = (c == null ? void 0 : c.length) + " av " + (t == null ? void 0 : t.length) + " valgt";
-  return /* @__PURE__ */ u(
-    d,
-    {
-      theme: l ? "neutral" : "company",
-      header: { ...f, menu: i, currentAccount: i.currentAccount, search: l ? void 0 : s },
-      sidebar: { hidden: l, menu: p },
-      content: { theme: "neutral" },
-      children: [
-        /* @__PURE__ */ n(C, { title: M, hidden: !l }),
-        /* @__PURE__ */ n(B, { children: t == null ? void 0 : t.map((e) => /* @__PURE__ */ x(
-          L,
-          {
-            ...e,
-            key: e == null ? void 0 : e.id,
-            title: e.title,
-            onClick: l ? () => m(e) : void 0,
-            selected: e.selected,
-            select: { checked: e == null ? void 0 : e.selected, onChange: () => m(e) }
-          }
-        )) }),
-        /* @__PURE__ */ n(F, { hidden: !1, children: /* @__PURE__ */ u(v, { children: [
-          l && /* @__PURE__ */ n(j, { items: A, theme: "global-dark" }),
-          a.length > 0 && (a == null ? void 0 : a.map((e, r) => /* @__PURE__ */ n(D, { ...e }, r)))
-        ] }) })
-      ]
-    }
-  );
 };
 export {
-  ce as Default,
-  le as InboxBulkMode,
-  ne as default
+  I as Default,
+  D as default
 };

package/dist/components/List/List.js

@@ -1,12 +1,20 @@
-import { jsx as p } from "react/jsx-runtime";
-import { createElement as s } from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { createElement as n } from "react";
 import "../../index-L8X2o7IH.js";
 import "../Icon/SvgIcon.js";
 import "../Autocomplete/AutocompleteBase.js";
 import "../RootProvider/RootProvider.js";
-import { ListItem as n } from "./ListItem.js";
+import { ListItem as e } from "./ListItem.js";
 import { ListBase as f } from "./ListBase.js";
-const j = ({ theme: r, size: t = "md", spacing: m = "md", items: o = [] }) => /* @__PURE__ */ p(f, { theme: r, spacing: m, children: o.map((i, e) => /* @__PURE__ */ s(n, { ...i, size: t, key: "item" + e })) });
+const j = ({ theme: o, defaultItemSize: p, defaultItemColor: t, spacing: s = "md", items: m = [] }) => /* @__PURE__ */ i(f, { theme: o, spacing: s, children: m.map((r, c) => /* @__PURE__ */ n(
+  e,
+  {
+    ...r,
+    size: (r == null ? void 0 : r.size) || p,
+    color: (r == null ? void 0 : r.color) || t,
+    key: "item" + c
+  }
+)) });
 export {
   j as List
 };