@altinn/altinn-components 0.36.1 → 0.36.3

package/dist/assets/MenuItemsVirtual.css

@@ -1 +1 @@
-._virtualScrollRef_14d4s_1{max-height:400px}._virtualMenuListItem_14d4s_5{position:absolute;top:0;left:0;width:100%}._virtualMenuListItem_14d4s_5>*{margin:0}
+._virtualScrollRef_15wg7_1{max-height:400px;overflow-y:auto}._virtualMenuListItem_15wg7_6{position:absolute;top:0;left:0;width:100%}._virtualMenuListItem_15wg7_6>*{margin:0}

package/dist/components/Header/Header.js

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

package/dist/components/Menu/MenuItemsVirtual.js

@@ -1,16 +1,16 @@
 "use client";
 import { jsxs as v, jsx as i } from "react/jsx-runtime";
 import { u as b } from "../../index-D-VWMqlv.js";
-import { useRef as R, useEffect as T } from "react";
+import { useRef as g, useEffect as R } from "react";
 import "../../index-L8X2o7IH.js";
-import { useMenu as V } from "../../hooks/useMenu.js";
+import { useMenu as T } from "../../hooks/useMenu.js";
 import "../RootProvider/RootProvider.js";
-import { MenuItem as $ } from "./MenuItem.js";
-import { MenuSearch as j } from "./MenuSearch.js";
-import { MenuHeader as k } from "./MenuHeader.js";
-import { MenuList as N, MenuListItem as g } from "./MenuBase.js";
+import { MenuItem as V } from "./MenuItem.js";
+import { MenuSearch as $ } from "./MenuSearch.js";
+import { MenuHeader as j } from "./MenuHeader.js";
+import { MenuList as k, MenuListItem as N } from "./MenuBase.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/MenuItemsVirtual.css';const q = "_virtualScrollRef_14d4s_1", B = "_virtualMenuListItem_14d4s_5", y = {
+import '../../assets/MenuItemsVirtual.css';const q = "_virtualScrollRef_15wg7_1", B = "_virtualMenuListItem_15wg7_6", y = {
   virtualScrollRef: q,
   virtualMenuListItem: B
 }, U = ({
@@ -24,12 +24,12 @@ import '../../assets/MenuItemsVirtual.css';const q = "_virtualScrollRef_14d4s_1"
   defaultIconTheme: L,
   scrollRefStyles: z
 }) => {
-  const { menu: _ } = V({
+  const { menu: _ } = T({
     items: I,
     groups: M,
     groupByKey: "groupId",
     keyboardEvents: !1
-  }), m = R(null), a = _.flatMap((t, e) => {
+  }), m = g(null), a = _.flatMap((t, e) => {
     var u;
     const E = (t == null ? void 0 : t.props) || {}, { title: c } = E, p = ((u = t == null ? void 0 : t.items) == null ? void 0 : u.filter((r) => {
       var s;
@@ -55,26 +55,26 @@ import '../../assets/MenuItemsVirtual.css';const q = "_virtualScrollRef_14d4s_1"
     estimateSize: () => 44,
     getScrollElement: () => m.current
   }), n = o.getVirtualItems();
-  return T(() => {
+  return R(() => {
     for (const t of n) {
       const e = document.querySelector(`[data-index="${t.index}"]`);
       e && o.measureElement(e);
     }
-  }, [n]), /* @__PURE__ */ v(N, { children: [
-    l && /* @__PURE__ */ i(j, { ...l }),
+  }, [n]), /* @__PURE__ */ v(k, { children: [
+    l && /* @__PURE__ */ i($, { ...l }),
     /* @__PURE__ */ i("div", { ref: m, className: y.virtualScrollRef, style: z, children: /* @__PURE__ */ i("div", { style: { position: "relative", height: `${o.getTotalSize()}px` }, children: n.map((t) => {
       const e = a[t.index];
       return e ? /* @__PURE__ */ v(
-        g,
+        N,
         {
           dataIndex: t.index,
           className: y.virtualMenuListItem,
           style: { transform: `translateY(${t.start}px)` },
           role: e.type === "separator" ? "separator" : void 0,
           children: [
-            e.type === "title" && /* @__PURE__ */ i(k, { title: e.title }),
+            e.type === "title" && /* @__PURE__ */ i(j, { title: e.title }),
             e.type === "item" && /* @__PURE__ */ i(
-              $,
+              V,
               {
                 ...e.itemProps,
                 size: e.itemProps.size || x,

package/dist/hooks/useIsDesktop.js

@@ -0,0 +1,15 @@
+"use client";
+import { useState as s, useEffect as r } from "react";
+const e = 1024, d = () => {
+  const [i, n] = s(() => typeof window > "u" ? !1 : window.innerWidth >= e);
+  return r(() => {
+    n(window.innerWidth >= e);
+    const t = () => {
+      n(window.innerWidth >= e);
+    };
+    return window.addEventListener("resize", t), () => window.removeEventListener("resize", t);
+  }, []), i;
+};
+export {
+  d as useIsDesktop
+};

package/dist/types/lib/components/Account/AccountMenu.stories.d.ts

@@ -13,5 +13,5 @@ export declare const Default: Story;
 export declare const Controlled: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithoutSubunits: Story;
 export declare const WithGroups: Story;
-export declare const VirtualizedMenu: Story;
+export declare const VirtualizedMenu: () => import("react/jsx-runtime").JSX.Element;
 export declare const WithToolbar: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/hooks/useIsDesktop.d.ts

@@ -0,0 +1 @@
+export declare const useIsDesktop: () => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.36.1",
+  "version": "0.36.3",
   "main": "dist/index.js",
   "files": [
     "dist/",