@altinn/altinn-components 0.36.7 → 0.38.0

package/dist/components/Header/Header.js

@@ -1,88 +1,73 @@
 "use client";
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { DropdownBase as h } from "../Dropdown/DropdownBase.js";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { DropdownBase as C } from "../Dropdown/DropdownBase.js";
 import "../../index-L8X2o7IH.js";
-import { DrawerBase as f } from "../Dropdown/DrawerBase.js";
+import { DrawerBase as b } from "../Dropdown/DrawerBase.js";
 import "react";
-import { useRootContext as b } from "../RootProvider/RootProvider.js";
-import { GlobalMenu as w } from "../GlobalMenu/GlobalMenu.js";
-import { GlobalMenuButton as j } from "../GlobalMenu/GlobalMenuButton.js";
-import { HeaderBase as B } from "./HeaderBase.js";
-import { HeaderLogo as H } from "./HeaderLogo.js";
-import { LocaleButton as L } from "./LocaleButton.js";
-import { LocaleSwitcher as g } from "./LocaleSwitcher.js";
-import { Searchbar as u } from "../Searchbar/Searchbar.js";
+import { useRootContext as v } from "../RootProvider/RootProvider.js";
+import { GlobalMenu as h } from "../GlobalMenu/GlobalMenu.js";
+import { GlobalMenuButton as H } from "../GlobalMenu/GlobalMenuButton.js";
+import { HeaderBase as S } from "./HeaderBase.js";
+import { HeaderLogo as k } from "./HeaderLogo.js";
+import { LocaleSwitcher as B } from "./LocaleSwitcher.js";
+import { Searchbar as f } from "../Searchbar/Searchbar.js";
 import "../Snackbar/useSnackbar.js";
-import { HeaderGroup as S } from "./HeaderGroup.js";
-import { HeaderSearch as v } from "./HeaderSearch.js";
-import { useIsDesktop as D } from "../../hooks/useIsDesktop.js";
-import '../../assets/Header.css';const I = "_drawer_1vzjh_1", y = "_dropdown_1vzjh_5", z = "_relative_1vzjh_19", a = {
-  drawer: I,
-  dropdown: y,
-  relative: z
-}, Z = ({ menu: r, locale: n, search: s, currentAccount: l, logo: x = {}, badge: C }) => {
-  const { currentId: o, toggleId: t, openId: _, closeAll: d } = b(), p = () => {
+import { HeaderGroup as D } from "./HeaderGroup.js";
+import { HeaderSearch as w } from "./HeaderSearch.js";
+import { useIsDesktop as I } from "../../hooks/useIsDesktop.js";
+import '../../assets/Header.css';const N = "_drawer_1tael_1", F = "_dropdown_1tael_6", G = "_relative_1tael_20", s = {
+  drawer: N,
+  dropdown: F,
+  relative: G
+}, W = ({ menu: r, locale: d, search: a, currentAccount: t, logo: u = {}, badge: x }) => {
+  const { currentId: o, toggleId: p, openId: _, closeAll: n } = v(), i = () => {
     _("search");
-  }, i = () => {
-    t("search");
-  }, N = () => {
-    t("menu");
-  }, k = () => {
-    t("locale");
-  }, m = D();
-  return /* @__PURE__ */ c(
-    B,
+  }, c = () => {
+    p("search");
+  }, g = () => {
+    p("menu");
+  }, m = I();
+  return /* @__PURE__ */ l(
+    S,
     {
       currentId: o,
       open: o === "search" || o === "menu" || o === "locale",
-      onClose: d,
+      onClose: n,
       children: [
-        /* @__PURE__ */ e(H, { ...x, className: a.logo }),
-        s && m && /* @__PURE__ */ e(v, { expanded: o === "search", children: /* @__PURE__ */ e(u, { ...s, expanded: o === "search", onClose: i, onFocus: p }) }),
-        /* @__PURE__ */ c(S, { children: [
-          n && /* @__PURE__ */ e("div", { className: a.relative, children: /* @__PURE__ */ e(L, { onClick: k, expanded: o === "locale" }) }),
-          /* @__PURE__ */ c("div", { className: a.relative, children: [
+        /* @__PURE__ */ e(k, { ...u, className: s.logo }),
+        a && m && /* @__PURE__ */ e(w, { expanded: o === "search", children: /* @__PURE__ */ e(f, { ...a, expanded: o === "search", onClose: c, onFocus: i }) }),
+        /* @__PURE__ */ l(D, { children: [
+          d && /* @__PURE__ */ e(B, { ...d }),
+          /* @__PURE__ */ l("div", { className: s.relative, children: [
             /* @__PURE__ */ e(
-              j,
+              H,
               {
-                badge: C,
-                currentAccount: l,
-                onClick: N,
+                badge: x,
+                currentAccount: t,
+                onClick: g,
                 expanded: o === "menu",
                 label: r == null ? void 0 : r.menuLabel
               }
             ),
-            n && /* @__PURE__ */ e(
-              h,
-              {
-                layout: "desktop",
-                padding: !0,
-                placement: "right",
-                open: o === "locale",
-                className: a.dropdown,
-                children: /* @__PURE__ */ e(g, { ...n })
-              }
-            ),
             r && /* @__PURE__ */ e(
-              h,
+              C,
               {
                 layout: "desktop",
                 padding: !0,
                 placement: "right",
                 open: o === "menu",
-                className: a.dropdown,
-                children: /* @__PURE__ */ e(w, { ...r, currentAccount: l, onClose: d })
+                className: s.dropdown,
+                children: /* @__PURE__ */ e(h, { ...r, currentAccount: t, onClose: n })
               }
             )
           ] })
         ] }),
-        s && !m && /* @__PURE__ */ e(v, { expanded: o === "search", children: /* @__PURE__ */ e(u, { ...s, expanded: o === "search", onClose: i, onFocus: p }) }),
-        n && /* @__PURE__ */ e(f, { open: o === "locale", className: a.drawer, children: /* @__PURE__ */ e(g, { ...n }) }),
-        r && /* @__PURE__ */ e(f, { open: o === "menu", className: a.drawer, children: /* @__PURE__ */ e(w, { ...r, currentAccount: l, onClose: d }) })
+        a && !m && /* @__PURE__ */ e(w, { expanded: o === "search", children: /* @__PURE__ */ e(f, { ...a, expanded: o === "search", onClose: c, onFocus: i }) }),
+        r && /* @__PURE__ */ e(b, { open: o === "menu", className: s.drawer, children: /* @__PURE__ */ e(h, { ...r, currentAccount: t, onClose: n }) })
       ]
     }
   );
 };
 export {
-  Z as Header
+  W as Header
 };

package/dist/components/Header/LocaleButton.js

@@ -26,7 +26,7 @@ const d = c((e, n) => {
   );
 }), s = "_button_utwi0_1", p = {
   button: s
-}, x = ({ id: e = "language-switcher", expanded: n, onClick: o }) => /* @__PURE__ */ i(
+}, x = ({ id: e = "language-switcher", expanded: n, onClick: o, onBlurCapture: t }) => /* @__PURE__ */ i(
   m,
   {
     className: p.button,
@@ -37,7 +37,8 @@ const d = c((e, n) => {
     selected: n,
     color: "company",
     onClick: o,
-    iconAltText: `Open ${e}`
+    iconAltText: `Open ${e}`,
+    onBlurCapture: t
   }
 );
 export {

package/dist/components/Header/LocaleSwitcher.js

@@ -1,30 +1,45 @@
 "use client";
-import { jsx as t, jsxs as m } from "react/jsx-runtime";
+import { jsx as r, jsxs as k } from "react/jsx-runtime";
+import { useRef as h, useMemo as v } from "react";
+import { useEnterKey as b } from "../../hooks/useEnterKey.js";
+import { useIsDesktop as x } from "../../hooks/useIsDesktop.js";
+import { DropdownBase as I } from "../Dropdown/DropdownBase.js";
 import "../../index-L8X2o7IH.js";
-import "react";
-import { useRootContext as n } from "../RootProvider/RootProvider.js";
+import { DrawerBase as w } from "../Dropdown/DrawerBase.js";
+import { useRootContext as C } from "../RootProvider/RootProvider.js";
+import { MenuItems as m } from "../Menu/MenuItems.js";
+import { LocaleButton as y } from "./LocaleButton.js";
 import "../Snackbar/useSnackbar.js";
-import { MenuOption as u } from "../Menu/MenuOption.js";
-import { MenuHeader as p } from "../Menu/MenuHeader.js";
-import { MenuBase as d, MenuList as s, MenuListItem as o } from "../Menu/MenuBase.js";
-const j = ({ title: l = "Select language", options: c, onChange: r }) => {
-  const { toggleId: i } = n(), a = (e) => {
-    i("locale"), r == null || r(e);
+import { S as B } from "../../Checkmark-D17Nyv_u.js";
+const z = ({ title: d = "Select language", options: i, onSelect: o }) => {
+  const c = h(null), u = x(), { currentId: g, toggleId: f, closeAll: s } = C(), n = g === "locale", l = v(() => i.map((e) => ({
+    ...e,
+    id: String(e.value),
+    tabIndex: -1,
+    groupId: "locales",
+    icon: e.checked ? B : /* @__PURE__ */ r("span", { "aria-hidden": "true" }),
+    onClick: () => {
+      o == null || o(String(e.value)), s();
+    }
+  })), [i, o]), p = {
+    locales: { title: d || "Språk/language" }
   };
-  return /* @__PURE__ */ t(d, { theme: "default", children: /* @__PURE__ */ m(s, { children: [
-    /* @__PURE__ */ t(o, { children: /* @__PURE__ */ t(p, { title: l }) }),
-    c.map((e) => /* @__PURE__ */ t(o, { children: /* @__PURE__ */ t(
-      u,
-      {
-        onChange: a,
-        label: e.label,
-        type: "radio",
-        value: e.value,
-        checked: e.checked
-      }
-    ) }, e.value))
-  ] }) });
+  return b((e) => {
+    var a;
+    if (n) {
+      e.preventDefault();
+      const t = (a = c.current) == null ? void 0 : a.querySelector('[data-active="true"]');
+      t && (t.tagName === "A" && t.hasAttribute("href") ? t.click() : t.dispatchEvent(new MouseEvent("click", { bubbles: !0 }))), s();
+    }
+  }), /* @__PURE__ */ k("div", { ref: c, "data-testid": "locale-switcher", children: [
+    /* @__PURE__ */ r(y, { onClick: () => f("locale"), expanded: n, onBlurCapture: (e) => {
+      var t;
+      ((t = e == null ? void 0 : e.relatedTarget) == null ? void 0 : t.closest('[data-testid="locale-switcher"]')) || s();
+    } }),
+    n && u && /* @__PURE__ */ r(I, { layout: "desktop", padding: !0, placement: "right", open: !0, children: /* @__PURE__ */ r(m, { groups: p, items: l, keyboardEvents: !0 }) }),
+    n && !u && /* @__PURE__ */ r(w, { open: !0, placement: "bottom", children: /* @__PURE__ */ r(m, { groups: p, items: l, keyboardEvents: !0 }) })
+  ] });
 };
 export {
-  j as LocaleSwitcher
+  z as LocaleSwitcher
 };

package/dist/components/Layout/Layout.js

@@ -1,30 +1,41 @@
 "use client";
 import { jsxs as p, jsx as m } from "react/jsx-runtime";
-import { LayoutBase as y } from "./LayoutBase.js";
-import { LayoutBody as h } from "./LayoutBody.js";
-import { LayoutContent as L } from "./LayoutContent.js";
-import { LayoutSidebar as x } from "./LayoutSidebar.js";
-import { Footer as j } from "../Footer/Footer.js";
-import { Header as B } from "../Header/Header.js";
+import { LayoutBase as h } from "./LayoutBase.js";
+import { LayoutBody as L } from "./LayoutBody.js";
+import { LayoutContent as x } from "./LayoutContent.js";
+import { LayoutSidebar as j } from "./LayoutSidebar.js";
+import { Footer as B } from "../Footer/Footer.js";
+import { Header as C } from "../Header/Header.js";
 import "../../index-L8X2o7IH.js";
 import "react";
-import { useRootContext as C } from "../RootProvider/RootProvider.js";
+import { useRootContext as S } from "../RootProvider/RootProvider.js";
 import { Menu as F } from "../Menu/Menu.js";
 import "../Snackbar/useSnackbar.js";
-const D = ({ color: r, theme: c = "subtle", header: u, footer: l, sidebar: o, content: t = {}, children: f }) => {
-  const { currentId: n } = C();
-  return /* @__PURE__ */ p(y, { color: r, theme: c, currentId: n, children: [
-    u && /* @__PURE__ */ m(B, { ...u }),
-    /* @__PURE__ */ p(h, { currentId: n, children: [
-      o && /* @__PURE__ */ p(x, { hidden: o == null ? void 0 : o.hidden, color: o == null ? void 0 : o.color, ...o, children: [
+import { SkipLink as H } from "../SkipLink/SkipLink.js";
+const J = ({
+  color: c,
+  theme: f = "subtle",
+  header: u,
+  footer: n,
+  sidebar: o,
+  content: t = {},
+  children: y,
+  skipLink: r
+}) => {
+  const { currentId: l } = S();
+  return /* @__PURE__ */ p(h, { color: c, theme: f, currentId: l, children: [
+    r && /* @__PURE__ */ m(H, { ...r }),
+    u && /* @__PURE__ */ m(C, { ...u }),
+    /* @__PURE__ */ p(L, { currentId: l, children: [
+      o && /* @__PURE__ */ p(j, { hidden: o == null ? void 0 : o.hidden, color: o == null ? void 0 : o.color, ...o, children: [
         (o == null ? void 0 : o.menu) && /* @__PURE__ */ m(F, { ...o == null ? void 0 : o.menu }),
         o == null ? void 0 : o.children
       ] }),
-      /* @__PURE__ */ m(L, { color: t == null ? void 0 : t.color, children: f })
+      /* @__PURE__ */ m(x, { color: t == null ? void 0 : t.color, id: "main-content", children: y })
     ] }),
-    l && /* @__PURE__ */ m(j, { ...l })
+    n && /* @__PURE__ */ m(B, { ...n })
   ] });
 };
 export {
-  D as Layout
+  J as Layout
 };

package/dist/components/Layout/LayoutContent.js

@@ -1,7 +1,7 @@
-import { jsx as o } from "react/jsx-runtime";
-import '../../assets/LayoutContent.css';const c = "_content_1wkbr_1", e = {
-  content: c
-}, r = ({ color: t, children: n }) => /* @__PURE__ */ o("main", { className: e.content, "data-color": t, children: n });
+import { jsx as c } from "react/jsx-runtime";
+import '../../assets/LayoutContent.css';const e = "_content_1wkbr_1", s = {
+  content: e
+}, r = ({ color: t, children: n, id: o = "main-content" }) => /* @__PURE__ */ c("main", { className: s.content, "data-color": t, id: o, children: n });
 export {
   r as LayoutContent
 };

package/dist/components/List/ListItem.js

@@ -1,66 +1,67 @@
-import { jsxs as w, jsx as B } from "react/jsx-runtime";
-import { ListItemBase as H } from "./ListItemBase.js";
-import { ListItemHeader as b } from "./ListItemHeader.js";
-import '../../assets/ListItem.css';const k = "_item_1nwey_3", q = {
-  item: k
-}, F = ({
-  className: A,
-  color: e,
-  variant: r = "default",
+import { jsxs as H, jsx as N } from "react/jsx-runtime";
+import { c as b } from "../../index-L8X2o7IH.js";
+import { ListItemBase as k } from "./ListItemBase.js";
+import { ListItemHeader as q } from "./ListItemHeader.js";
+import '../../assets/ListItem.css';const A = "_item_1nwey_3", C = {
+  item: A
+}, J = ({
+  className: i,
+  color: m,
+  variant: c = "default",
   shadow: n = "xs",
-  border: c = "none",
-  loading: m,
-  collapsible: f,
+  border: f = "none",
+  loading: e,
+  collapsible: p,
   expanded: t,
   size: o,
   icon: l,
   label: s,
   title: a,
-  description: p,
-  badge: u,
-  linkIcon: L = !1,
+  description: u,
+  badge: L,
+  linkIcon: x = !1,
   select: y,
   selected: I,
   controls: _,
   children: h,
-  interactive: i,
+  interactive: r,
   id: j,
-  ...x
+  ...w
 }) => {
-  const N = typeof s == "function" ? s() : s;
-  return /* @__PURE__ */ w(
-    H,
+  const B = typeof s == "function" ? s() : s;
+  return /* @__PURE__ */ H(
+    k,
     {
-      className: q.item,
+      className: b(C.item, i),
       size: o,
-      color: e,
-      variant: r,
+      color: m,
+      variant: c,
       shadow: n,
-      border: c,
+      border: f,
       selected: I,
       expanded: t,
-      loading: m,
-      interactive: i,
+      loading: e,
+      interactive: r,
       id: j,
       children: [
-        /* @__PURE__ */ B(
-          b,
+        /* @__PURE__ */ N(
+          q,
           {
-            color: e,
-            loading: m,
-            linkIcon: L,
-            collapsible: f,
+            color: m,
+            loading: e,
+            linkIcon: x,
+            collapsible: p,
             expanded: t,
             select: y,
             title: a,
             size: o,
-            description: p,
+            description: u,
             icon: l,
-            badge: u,
+            badge: L,
             controls: _,
-            interactive: i,
-            ...x,
-            children: N
+            interactive: r,
+            ...w,
+            children: B
           }
         ),
         t ? h : null
@@ -69,5 +70,5 @@ import '../../assets/ListItem.css';const k = "_item_1nwey_3", q = {
   );
 };
 export {
-  F as ListItem
+  J as ListItem
 };

package/dist/components/List/ListItemLabel.js

@@ -14,7 +14,6 @@ const d = (r) => {
   const s = {
     as: "h3",
     size: "sm"
-    //    leading: "tight",
   };
   return j(r) ? { ...s, ...r } : z(r) ? {
     ...s,
@@ -26,7 +25,6 @@ const d = (r) => {
     size: "xs",
     weight: "normal",
     variant: "subtle"
-    //    leading: "tight",
   };
   return j(r) ? { ...s, ...r } : z(r) ? {
     ...s,

package/dist/components/Menu/MenuBase.js

@@ -1,17 +1,17 @@
-import { jsx as m } from "react/jsx-runtime";
-import { c as a } from "../../index-L8X2o7IH.js";
-import '../../assets/MenuBase.css';const u = "_menu_sxyub_1", r = "_list_sxyub_16", l = "_item_sxyub_22", c = {
-  menu: u,
-  list: r,
-  item: l
-}, C = ({ as: t = "nav", color: n, theme: e, className: o, children: s }) => /* @__PURE__ */ m(t, { className: a(c.menu, o), "data-color": n, "data-theme": e, children: s }), d = ({ as: t = "ul", role: n = "group", className: e, children: o }) => /* @__PURE__ */ m(t, { className: a(c.list, e), role: n, children: o }), y = ({
+import { jsx as a } from "react/jsx-runtime";
+import { c } from "../../index-L8X2o7IH.js";
+import '../../assets/MenuBase.css';const r = "_menu_sxyub_1", l = "_list_sxyub_16", p = "_item_sxyub_22", i = {
+  menu: r,
+  list: l,
+  item: p
+}, C = ({ as: t = "nav", color: n, theme: e, className: o, children: s }) => /* @__PURE__ */ a(t, { className: c(i.menu, o), "data-color": n, "data-theme": e, children: s }), d = ({ as: t = "ul", role: n = "group", className: e, children: o, ref: s, onMouseEnter: m }) => /* @__PURE__ */ a(t, { className: c(i.list, e), role: n, ref: s, onMouseEnter: m, children: o }), y = ({
   as: t = "li",
   role: n = "presentation",
   className: e,
   children: o,
   style: s,
-  dataIndex: i
-}) => /* @__PURE__ */ m(t, { className: a(c.item, e), role: n, style: s, "data-index": i, children: o });
+  dataIndex: m
+}) => /* @__PURE__ */ a(t, { className: c(i.item, e), role: n, style: s, "data-index": m, children: o });
 export {
   C as MenuBase,
   d as MenuList,

package/dist/components/Menu/MenuItemBase.js

@@ -1,43 +1,47 @@
-import { jsx as c } from "react/jsx-runtime";
-import { c as u } from "../../index-L8X2o7IH.js";
-import '../../assets/MenuItemBase.css';const l = "_item_1itcj_1", I = "_content_1itcj_45", m = {
-  item: l,
-  content: I
-}, z = ({
+import { jsx as m } from "react/jsx-runtime";
+import { c as v } from "../../index-L8X2o7IH.js";
+import '../../assets/MenuItemBase.css';const I = "_item_1qmxq_1", N = "_content_1qmxq_45", c = {
+  item: I,
+  content: N
+}, B = ({
   interactive: o = !0,
   as: s,
-  color: r,
-  theme: d,
+  color: d,
+  theme: r,
   size: i,
   className: p,
-  href: _,
+  href: x,
   onClick: t,
-  onKeyPress: e,
-  tabIndex: x = 0,
-  hidden: f,
-  selected: h,
-  disabled: a = !1,
-  children: j
-}) => /* @__PURE__ */ c(
+  onKeyPress: a,
+  tabIndex: _ = 0,
+  hidden: q,
+  selected: f,
+  disabled: e = !1,
+  children: h,
+  active: u,
+  onMouseEnter: l
+}) => /* @__PURE__ */ m(
   s || "a",
   {
-    tabIndex: a ? "-1" : x ?? 0,
-    className: u(m.item, p),
+    tabIndex: e ? "-1" : _ ?? 0,
+    className: v(c.item, p),
     "data-interactive": o,
+    "data-active": u,
     "data-size": i,
-    "data-color": r,
-    "data-theme": d,
-    "aria-hidden": f,
-    "aria-disabled": a,
-    "data-selected": h,
-    href: _,
+    "data-color": d,
+    "data-theme": r,
+    "aria-hidden": q,
+    "aria-disabled": e,
+    "data-selected": f,
+    href: x,
     onKeyPress: (n) => {
-      n.key === "Enter" && (t == null || t()), e == null || e(n);
+      n.key === "Enter" && (t == null || t()), a == null || a(n);
     },
     onClick: t,
-    children: /* @__PURE__ */ c("span", { className: m.content, children: j })
+    onMouseEnter: l,
+    children: /* @__PURE__ */ m("span", { className: c.content, children: h })
   }
 );
 export {
-  z as MenuItemBase
+  B as MenuItemBase
 };