@altinn/altinn-components 0.35.7 → 0.35.9

package/dist/assets/ListItemHeader.css

@@ -1 +1 @@
-._header_1k7r6_1{--dsc-item-spacing: .5em;position:relative;width:100%;min-height:var(--dsc-item-height);display:flex;align-items:center;justify-content:start;background:var(--dsc-item-background);column-gap:var(--dsc-item-spacing);padding-right:var(--dsc-item-px);padding-left:var(--dsc-item-px)}._header_1k7r6_1[data-interactive=true]{cursor:pointer}._header_1k7r6_1[data-interactive=true]:hover{background:var(--dsc-item-background--hover)}._header_1k7r6_1[data-interactive=true]:hover ._label_1k7r6_27 h2{text-decoration:underline}._header_1k7r6_1[data-has-active-child=true]{background-color:var(--ds-color-background-tinted)}._linkIcon_1k7r6_35{flex-shrink:0;min-width:2em;min-height:2em;display:flex;align-items:center;justify-content:center;pointer-events:none}._badgeAndIcon_1k7r6_45{display:flex;align-items:center;justify-content:center;gap:var(--dsc-item-spacing);margin-left:auto}
+._header_1689z_1{--dsc-item-spacing: .5em;position:relative;width:100%;min-height:var(--dsc-item-height);display:flex;align-items:center;justify-content:start;background:var(--dsc-item-background);column-gap:var(--dsc-item-spacing);padding-right:var(--dsc-item-px);padding-left:var(--dsc-item-px)}._header_1689z_1[data-interactive=true]{cursor:pointer}._header_1689z_1[data-interactive=true]:hover{background:var(--dsc-item-background--hover)}._header_1689z_1[data-interactive=true]:hover ._label_1689z_27 h2{text-decoration:underline}._header_1689z_1[data-has-active-child=true]{background-color:var(--ds-color-background-tinted)}._label_1689z_27{flex-grow:1}._link_1689z_39{outline:none}._badge_1689z_43{pointer-events:none}._linkIcon_1689z_47{flex-shrink:0;min-width:2em;min-height:2em;display:flex;align-items:center;justify-content:center;pointer-events:none}._linkFocus_1689z_57{position:absolute;top:0;left:0;right:0;bottom:0}._link_1689z_39:focus-visible ._linkFocus_1689z_57{box-shadow:var(--_ds--focus, var(--dsc-focus-boxShadow));outline:var(--_ds--focus, var(--dsc-focus-outline))}._link_1689z_39:focus-visible ._linkFocus_1689z_57 *{--_ds--focus: }

package/dist/assets/ListItemIcon.css

@@ -1 +1 @@
-._wrapper_1q66b_1{pointer-events:none;position:relative;flex-shrink:0;font-size:2em}._icon_1q66b_8 svg,._icon_1q66b_8 img{display:block;width:1em;height:1em;font-size:.825em}._avatar_1q66b_16{font-size:1em}._avatarGroup_1q66b_20{font-size:.75em}
+._wrapper_rcjve_1{pointer-events:none;position:relative;flex-shrink:0;font-size:2em;display:flex;align-items:center;justify-content:center}._icon_rcjve_11 svg,._icon_rcjve_11 img{display:block;width:1em;height:1em;font-size:.825em}._avatar_rcjve_19{font-size:1em}._avatarGroup_rcjve_23{font-size:.75em}

package/dist/assets/MenuItemBase.css

@@ -1 +1 @@
-._item_3iu2g_1{font:inherit;color:inherit;padding:0;border:0;text-align:inherit;text-decoration:none;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;cursor:pointer;position:relative;width:100%;display:flex;align-items:center;column-gap:.25rem;margin:.5rem 0;border-radius:2px}._item_3iu2g_1[aria-disabled=true]{opacity:.5;pointer-events:none}._item_3iu2g_1[data-size=md]{min-height:56px}._item_3iu2g_1[data-size=md]{min-height:44px}._item_3iu2g_1[data-size=sm]{min-height:40px}._content_3iu2g_45{display:flex;width:100%;align-items:center;column-gap:6px;padding:6px}._item_3iu2g_1,._item_3iu2g_1[data-theme]{background-color:transparent}._item_3iu2g_1{pointer-events:none}._item_3iu2g_1[data-interactive=true]{pointer-events:all}[data-theme=subtle] ._item_3iu2g_1:hover{background-color:var(--ds-color-surface-hover)}[data-theme=subtle] ._item_3iu2g_1:active{background-color:var(--ds-color-surface-active)}[data-theme=subtle] ._item_3iu2g_1[data-selected=true]{background-color:var(--ds-color-background-default)}[data-theme=default] ._item_3iu2g_1:hover{background-color:var(--ds-color-surface-hover)}[data-theme=default] ._item_3iu2g_1:active{background-color:var(--ds-color-surface-active)}[data-theme=default] ._item_3iu2g_1[data-selected=true]{background-color:var(--ds-color-background-tinted)}._content_3iu2g_45{display:flex;width:100%;align-items:center;column-gap:.5em}
+._item_1itcj_1{font:inherit;color:inherit;padding:0;border:0;text-align:inherit;text-decoration:none;line-height:normal;-webkit-font-smoothing:inherit;-moz-osx-font-smoothing:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-user-select:none;user-select:none;cursor:pointer;position:relative;width:100%;display:flex;align-items:center;column-gap:.25rem;margin:.5rem 0;border-radius:2px}._item_1itcj_1[aria-disabled=true]{opacity:.5;pointer-events:none}._item_1itcj_1[data-size=md]{min-height:56px}._item_1itcj_1[data-size=md]{min-height:44px}._item_1itcj_1[data-size=sm]{min-height:40px}._content_1itcj_45{display:flex;width:100%;align-items:center;column-gap:6px;padding:6px}._item_1itcj_1,._item_1itcj_1[data-theme]{background-color:transparent}._item_1itcj_1{pointer-events:none}._item_1itcj_1[data-interactive=true]{pointer-events:all}[data-theme=subtle] ._item_1itcj_1:hover{background-color:var(--ds-color-surface-hover)}[data-theme=subtle] ._item_1itcj_1:active{background-color:var(--ds-color-surface-active)}[data-theme=subtle] ._item_1itcj_1[data-selected=true]{background-color:var(--ds-color-background-default)}[data-theme=default] ._item_1itcj_1:hover{background-color:var(--ds-color-surface-hover)}[data-theme=default] ._item_1itcj_1:active{background-color:var(--ds-color-surface-active)}[data-theme=default] ._item_1itcj_1[data-selected=true]{background-color:var(--ds-color-background-tinted)}._content_1itcj_45{display:flex;width:100%;align-items:center;column-gap:.5em}._item_1itcj_1:focus-visible{box-shadow:var(--_ds--focus, var(--dsc-focus-boxShadow));outline:var(--_ds--focus, var(--dsc-focus-outline))}._item_1itcj_1:focus-visible *{--_ds--focus: }

package/dist/assets/MenuItemsVirtual.css

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

package/dist/assets/SearchField.css

@@ -1 +1 @@
-._field_5zm0g_1{position:relative}._icon_5zm0g_5{position:absolute;top:1px;left:1px;font-size:1.25em;color:var(--ds-color-text-subtle);margin:.5em}._input_5zm0g_14{padding-left:2.25em;padding-right:2.25em}._input_5zm0g_14[type=search]::-webkit-search-decoration,._input_5zm0g_14[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}._clear_5zm0g_24{font-size:inherit;position:absolute;top:1px;right:1px;margin:.25em;border:0;border-radius:100%;width:2em;height:2em;display:flex;justify-content:center;align-items:center;background-color:var(--ds-color-background-tinted);color:var(--ds-color-base-default)}._clear_5zm0g_24:hover{background-color:var(--ds-color-surface-active);color:var(--ds-color-base-default);cursor:pointer}._clear_5zm0g_24 ._clearIcon_5zm0g_48{font-size:1.5em}
+._field_zk1f7_1{position:relative}._icon_zk1f7_5{position:absolute;top:1px;left:1px;font-size:1.25em;color:var(--ds-color-text-subtle);margin:.5em}._input_zk1f7_14{padding-left:2.25em;padding-right:2.25em}._input_zk1f7_14[type=search]::-webkit-search-decoration,._input_zk1f7_14[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}._clear_zk1f7_24{font-size:inherit;position:absolute;top:0;right:0;margin:.375em;border:0;border-radius:100%;font-size:.75em;background-color:var(--ds-color-surface-tinted);color:var(--ds-color-base-default)}._clear_zk1f7_24:focus-visible{outline-offset:0;outline-width:2px}

package/dist/assets/SearchbarField.css

@@ -1 +1 @@
-._field_ljqfn_1{position:relative;display:flex;align-items:center;font-size:1.125rem;background-color:transparent;color:currentColor}._icon_ljqfn_10{position:absolute;left:0;font-size:1.5rem;margin:0 1rem}._input_ljqfn_17{height:3.5rem;background-color:transparent;font-size:inherit;flex-grow:1;padding:1rem 1rem 1rem 3rem;border:2px solid;border-radius:.25rem;outline:none}._input_ljqfn_17[type=search]::-webkit-search-decoration,._input_ljqfn_17[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}._input_ljqfn_17:focus,._input_ljqfn_17:not(:placeholder-shown){background-color:var(--ds-color-background-default)}._dismiss_ljqfn_41{position:absolute;right:0;margin:.375rem}._clear_ljqfn_47{position:absolute;right:0;margin:1rem;border-radius:100%;width:1.5rem;height:1.5rem}
+._field_1f56c_1{position:relative;display:flex;align-items:center;font-size:1.125rem;background-color:transparent;color:currentColor}._icon_1f56c_10{position:absolute;left:0;font-size:1.5rem;margin:0 1rem}._input_1f56c_17{height:3.5rem;background-color:transparent;font-size:inherit;flex-grow:1;padding:1rem 1rem 1rem 3rem;border:2px solid;border-radius:.25rem;outline:none}._input_1f56c_17[type=search]::-webkit-search-decoration,._input_1f56c_17[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}._input_1f56c_17[data-expanded=true],._input_1f56c_17:focus,._input_1f56c_17:not(:placeholder-shown){background-color:var(--ds-color-background-default)}._clear_1f56c_39{background-color:var(--ds-color-surface-tinted);color:var(--ds-color-base-default);border:0;position:absolute;right:0;margin:.75rem;border-radius:100%;width:1.5rem;height:1.5rem}._clear_1f56c_39:focus-visible{outline-offset:0;outline-width:2px}._dismiss_1f56c_56{position:absolute;right:0;margin:.5rem}._dismiss_1f56c_56:focus-visible{outline-offset:0;outline-width:2px}

package/dist/components/Forms/SearchField.js

@@ -1,34 +1,44 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import { jsx as i, jsxs as l } from "react/jsx-runtime";
 import { Icon as p } from "../Icon/Icon.js";
 import "../../index-L8X2o7IH.js";
 import "react";
+import { IconButton as f } from "../Button/IconButton.js";
 import "../RootProvider/RootProvider.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { Input as _ } from "./Input.js";
-import { FieldBase as f } from "./FieldBase.js";
-import { S as d } from "../../MagnifyingGlass-3Ln1MufI.js";
-import { S as g } from "../../XMark-DIqxCTTQ.js";
-import '../../assets/SearchField.css';const u = "_field_5zm0g_1", h = "_icon_5zm0g_5", I = "_input_5zm0g_14", z = "_clear_5zm0g_24", N = "_clearIcon_5zm0g_48", c = {
-  field: u,
+import { FieldBase as d } from "./FieldBase.js";
+import { S as u } from "../../MagnifyingGlass-3Ln1MufI.js";
+import { S as k } from "../../XMark-DIqxCTTQ.js";
+import '../../assets/SearchField.css';const g = "_field_zk1f7_1", h = "_icon_zk1f7_5", z = "_input_zk1f7_14", S = "_clear_zk1f7_24", o = {
+  field: g,
   icon: h,
-  input: I,
-  clear: z,
-  clearIcon: N
-}, E = ({
-  className: t,
-  size: i,
-  color: n = "neutral",
-  label: a,
-  value: o,
-  onClear: e,
-  clearButtonAltText: s = "Clear search",
-  ...l
-}) => /* @__PURE__ */ r(f, { size: i, color: n, label: a, className: t, children: /* @__PURE__ */ m("div", { className: c.field, children: [
-  /* @__PURE__ */ r(_, { ...l, type: "search", value: o, className: c.input }),
-  /* @__PURE__ */ r(p, { svgElement: d, className: c.icon }),
-  e && !!o && /* @__PURE__ */ r("button", { type: "button", className: c.clear, onClick: e, "aria-label": s, children: /* @__PURE__ */ r(g, { className: c.clearIcon }) })
+  input: z,
+  clear: S
+}, G = ({
+  className: s,
+  size: c,
+  color: e = "neutral",
+  label: n,
+  value: t,
+  onClear: r,
+  clearButtonAltText: m = "Clear search",
+  ...a
+}) => /* @__PURE__ */ i(d, { size: c, color: e, label: n, className: s, children: /* @__PURE__ */ l("div", { className: o.field, children: [
+  /* @__PURE__ */ i(_, { ...a, type: "search", value: t, className: o.input }),
+  /* @__PURE__ */ i(p, { svgElement: u, className: o.icon }),
+  r && !!t && /* @__PURE__ */ i(
+    f,
+    {
+      icon: k,
+      variant: "solid",
+      size: "custom",
+      className: o.clear,
+      onClick: r,
+      iconAltText: m
+    }
+  )
 ] }) });
 export {
-  E as SearchField
+  G as SearchField
 };

package/dist/components/List/ListItemHeader.js

@@ -1,105 +1,109 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import { c as E } from "../../index-L8X2o7IH.js";
-import { useId as g, isValidElement as w } from "react";
-import { Icon as z } from "../Icon/Icon.js";
-import { Badge as D } from "../Badge/Badge.js";
+import { c as g } from "../../index-L8X2o7IH.js";
+import { useId as B, isValidElement as E } from "react";
+import { Icon as w } from "../Icon/Icon.js";
+import { Badge as A } from "../Badge/Badge.js";
 import "../RootProvider/RootProvider.js";
 import "../Searchbar/AutocompleteBase.js";
-import { ListItemLink as H } from "./ListItemLink.js";
-import { ListItemLabel as R } from "./ListItemLabel.js";
-import { ListItemIcon as U } from "./ListItemIcon.js";
-import { ListItemControls as V } from "./ListItemControls.js";
-import { ListItemSelect as q } from "./ListItemSelect.js";
+import { ListItemLink as D } from "./ListItemLink.js";
+import { ListItemLabel as H } from "./ListItemLabel.js";
+import { ListItemIcon as R } from "./ListItemIcon.js";
+import { ListItemControls as U } from "./ListItemControls.js";
+import { ListItemSelect as V } from "./ListItemSelect.js";
 import "../Snackbar/useSnackbar.js";
-import { S as F, a as G } from "../../ChevronUp-DR4Lz2Jb.js";
+import { S as q, a as G } from "../../ChevronUp-DR4Lz2Jb.js";
 import { S as J } from "../../ChevronRight-BbelnTke.js";
-import '../../assets/ListItemHeader.css';const K = "_header_1k7r6_1", M = "_label_1k7r6_27", O = "_linkIcon_1k7r6_35", P = "_badgeAndIcon_1k7r6_45", o = {
+import '../../assets/ListItemHeader.css';const K = "_header_1689z_1", M = "_label_1689z_27", O = "_link_1689z_39", P = "_badge_1689z_43", Q = "_linkIcon_1689z_47", T = "_linkFocus_1689z_57", t = {
   header: K,
   label: M,
-  linkIcon: O,
-  badgeAndIcon: P
-}, ae = ({
+  link: O,
+  badge: P,
+  linkIcon: Q,
+  linkFocus: T
+}, ce = ({
   as: p,
-  interactive: I = !0,
+  interactive: _ = !0,
   color: f,
-  loading: r,
+  loading: o,
   disabled: h,
-  collapsible: v,
-  linkIcon: _,
-  expanded: b,
-  select: m,
-  href: L,
-  onClick: k,
-  onKeyPress: u,
-  tabIndex: S,
+  collapsible: I,
+  linkIcon: k,
+  expanded: v,
+  select: n,
+  href: u,
+  onClick: b,
+  onKeyPress: L,
+  tabIndex: N,
   size: a,
-  title: n,
-  description: N,
-  icon: A,
-  active: c,
-  badge: t,
-  controls: s,
+  title: s,
+  description: z,
+  icon: S,
+  active: l,
+  badge: r,
+  controls: m,
   className: x,
   children: y,
-  ariaLabel: l
+  ariaLabel: c
 }) => {
-  const d = v ? b ? F : G : _ ? J : void 0, C = () => t && !r && typeof t == "object" && "label" in t ? /* @__PURE__ */ e(D, { ...t }) : w(t) ? t : null, j = l !== void 0 ? l : typeof n == "string" ? n : void 0, B = g();
+  const d = I ? v ? q : G : k ? J : void 0, C = () => r && !o && typeof r == "object" && "label" in r ? /* @__PURE__ */ e(A, { ...r, className: t.badge }) : E(r) ? r : null, F = c !== void 0 ? c : typeof s == "string" ? s : void 0, j = B();
   return /* @__PURE__ */ i(
     "div",
     {
-      className: E(o.header, x),
+      className: g(t.header, x),
       "data-color": f,
-      "data-interactive": I,
+      "data-interactive": _,
       "data-size": a,
-      "data-has-active-child": c,
+      "data-has-active-child": l,
       children: [
         /* @__PURE__ */ i(
-          H,
+          D,
           {
             as: p,
-            href: L,
-            onClick: k,
-            onKeyPress: u,
-            tabIndex: S,
-            loading: r,
-            disabled: h || r,
-            active: c,
-            ariaLabel: j,
+            href: u,
+            onClick: b,
+            onKeyPress: L,
+            tabIndex: N,
+            loading: o,
+            disabled: h || o,
+            active: l,
+            ariaLabel: F,
+            className: t.link,
             children: [
-              m && /* @__PURE__ */ e(q, { ...m, className: o.select }),
-              /* @__PURE__ */ e(U, { loading: r, icon: A }),
+              /* @__PURE__ */ e("div", { className: t.linkFocus, "aria-hidden": "true" }),
+              n && /* @__PURE__ */ e(V, { ...n, className: t.select }),
+              /* @__PURE__ */ e(R, { loading: o, icon: S }),
               /* @__PURE__ */ e(
-                R,
+                H,
                 {
                   size: a,
-                  loading: r,
-                  title: n,
-                  description: N,
-                  id: B,
-                  className: o.label,
+                  loading: o,
+                  title: s,
+                  description: z,
+                  id: j,
+                  className: t.label,
                   children: y
                 }
-              ),
-              !s && !r && /* @__PURE__ */ i("div", { className: o.badgeAndIcon, children: [
-                C(),
-                d && /* @__PURE__ */ e("span", { className: o.linkIcon, children: /* @__PURE__ */ e(
-                  z,
-                  {
-                    svgElement: d,
-                    style: {
-                      fontSize: "1.5rem"
-                    }
-                  }
-                ) })
-              ] })
+              )
             ]
           }
         ),
-        /* @__PURE__ */ e(V, { className: o.controls, children: s && !r && /* @__PURE__ */ e("span", { children: s }) })
+        /* @__PURE__ */ i(U, { className: t.controls, children: [
+          m && !o && /* @__PURE__ */ e("span", { children: m }),
+          C(),
+          d && /* @__PURE__ */ e("span", { className: t.linkIcon, children: /* @__PURE__ */ e(
+            w,
+            {
+              svgElement: d,
+              style: {
+                fontSize: "1.5rem"
+              }
+            }
+          ) })
+        ] })
       ]
     }
   );
 };
 export {
-  ae as ListItemHeader
+  ce as ListItemHeader
 };

package/dist/components/List/ListItemIcon.js

@@ -1,27 +1,27 @@
 import { jsx as o, jsxs as i } from "react/jsx-runtime";
 import { isValidElement as n } from "react";
-import { Icon as s, isIconProps as l } from "../Icon/Icon.js";
+import { Icon as s, isIconProps as c } from "../Icon/Icon.js";
 import "../../index-L8X2o7IH.js";
-import { isAvatarProps as c, Avatar as f } from "../Avatar/Avatar.js";
-import { isAvatarGroupProps as v, AvatarGroup as _ } from "../Avatar/AvatarGroup.js";
+import { isAvatarProps as v, Avatar as l } from "../Avatar/Avatar.js";
+import { isAvatarGroupProps as f, AvatarGroup as _ } from "../Avatar/AvatarGroup.js";
 import { Badge as u } from "../Badge/Badge.js";
 import "../RootProvider/RootProvider.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
 import { S as N } from "../../XMark-DIqxCTTQ.js";
-import '../../assets/ListItemIcon.css';const d = "_wrapper_1q66b_1", b = "_icon_1q66b_8", g = "_avatar_1q66b_16", G = "_avatarGroup_1q66b_20", t = {
+import '../../assets/ListItemIcon.css';const d = "_wrapper_rcjve_1", g = "_icon_rcjve_11", j = "_avatar_rcjve_19", G = "_avatarGroup_rcjve_23", t = {
   wrapper: d,
-  icon: b,
-  avatar: g,
+  icon: g,
+  avatar: j,
   avatarGroup: G
 };
 function w(a) {
   return typeof a == "string" || typeof a == "number" || typeof a == "boolean" || a === null || n(a);
 }
-const z = ({ loading: a, size: m, icon: r, theme: e, badge: p }) => r ? a ? /* @__PURE__ */ o(s, { className: t.wrapper, svgElement: N, loading: !0 }) : /* @__PURE__ */ i("div", { className: t.wrapper, "data-size": m, children: [
-  c(r) && /* @__PURE__ */ o(f, { ...r, className: t.avatar }) || v(r) && /* @__PURE__ */ o(_, { ...r, className: t.avatarGroup }) || l(r) && /* @__PURE__ */ o(s, { ...r, theme: r.theme || e, className: t.icon }) || w(r) && r || /* @__PURE__ */ o(s, { theme: e, svgElement: r, className: t.icon }),
+const B = ({ loading: a, size: m, icon: r, theme: e, badge: p }) => r ? a ? /* @__PURE__ */ o(s, { className: t.wrapper, svgElement: N, loading: !0 }) : /* @__PURE__ */ i("div", { className: t.wrapper, "data-size": m, children: [
+  v(r) && /* @__PURE__ */ o(l, { ...r, className: t.avatar }) || f(r) && /* @__PURE__ */ o(_, { ...r, className: t.avatarGroup }) || c(r) && /* @__PURE__ */ o(s, { ...r, theme: r.theme || e, className: t.icon }) || w(r) && r || /* @__PURE__ */ o(s, { theme: e, svgElement: r, className: t.icon }),
   p && /* @__PURE__ */ o(u, { ...p, className: t.badge })
 ] }) : null;
 export {
-  z as ListItemIcon
+  B as ListItemIcon
 };

package/dist/components/List/ListItemLink.js

@@ -1,42 +1,44 @@
-import { jsx as c } from "react/jsx-runtime";
-import { c as l } from "../../index-L8X2o7IH.js";
-import '../../assets/ListItemLink.css';const b = "_link_c8adz_1", p = {
-  link: b
-}, A = ({
-  as: v,
-  loading: r,
-  disabled: o,
-  selected: u,
-  href: e,
+import { jsx as p } from "react/jsx-runtime";
+import { c as v } from "../../index-L8X2o7IH.js";
+import '../../assets/ListItemLink.css';const f = "_link_c8adz_1", l = {
+  link: f
+}, I = ({
+  as: u,
+  loading: a,
+  disabled: e,
+  selected: x,
+  href: s,
   onClick: t,
-  onKeyPress: a,
-  className: s,
-  active: x,
-  ariaLabel: d,
-  children: m
+  onKeyPress: i,
+  className: m,
+  active: o,
+  ariaLabel: n,
+  children: c,
+  tabIndex: _ = 0
 }) => {
-  const i = v || "div";
-  if (i === "div")
-    return /* @__PURE__ */ c("div", { className: l(p.link, s), children: m });
-  const _ = !r && e || i !== "a" && d;
-  return /* @__PURE__ */ c(
-    i,
+  const r = u || "div";
+  if (r === "div")
+    return /* @__PURE__ */ p("div", { className: v(l.link, m), children: c });
+  const b = !a && s || r !== "a" && n;
+  return /* @__PURE__ */ p(
+    r,
     {
-      className: l(p.link, s),
-      href: e,
-      onKeyPress: (n) => {
-        n.key === "Enter" && (t == null || t()), a == null || a(n);
+      className: v(l.link, m),
+      href: s,
+      onKeyPress: (d) => {
+        d.key === "Enter" && (t == null || t()), i == null || i(d);
       },
       onClick: t,
       "data-interactive": "true",
-      "aria-disabled": r || o,
-      "aria-selected": u,
-      ..._ && { "aria-label": d },
-      "data-active": x,
-      children: m
+      "aria-disabled": a || e,
+      "aria-selected": x,
+      ...b && { "aria-label": n },
+      "data-active": o,
+      tabIndex: a || e ? -1 : _,
+      children: c
     }
   );
 };
 export {
-  A as ListItemLink
+  I as ListItemLink
 };

package/dist/components/Menu/MenuItemBase.js

@@ -1,9 +1,9 @@
-import { jsx as m } from "react/jsx-runtime";
-import { c as g } from "../../index-L8X2o7IH.js";
-import '../../assets/MenuItemBase.css';const l = "_item_3iu2g_1", I = "_content_3iu2g_45", c = {
+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
-}, v = ({
+}, z = ({
   interactive: o = !0,
   as: s,
   color: r,
@@ -13,31 +13,31 @@ import '../../assets/MenuItemBase.css';const l = "_item_3iu2g_1", I = "_content_
   href: _,
   onClick: t,
   onKeyPress: e,
-  tabIndex: u = 0,
-  hidden: x,
-  selected: f,
+  tabIndex: x = 0,
+  hidden: f,
+  selected: h,
   disabled: a = !1,
-  children: h
-}) => /* @__PURE__ */ m(
+  children: j
+}) => /* @__PURE__ */ c(
   s || "a",
   {
-    tabIndex: a ? "-1" : u ?? 0,
-    className: g(c.item, p),
+    tabIndex: a ? "-1" : x ?? 0,
+    className: u(m.item, p),
     "data-interactive": o,
     "data-size": i,
     "data-color": r,
     "data-theme": d,
-    "aria-hidden": x,
+    "aria-hidden": f,
     "aria-disabled": a,
-    "data-selected": f,
+    "data-selected": h,
     href: _,
     onKeyPress: (n) => {
       n.key === "Enter" && (t == null || t()), e == null || e(n);
     },
     onClick: t,
-    children: /* @__PURE__ */ m("span", { className: c.content, children: h })
+    children: /* @__PURE__ */ c("span", { className: m.content, children: j })
   }
 );
 export {
-  v as MenuItemBase
+  z as MenuItemBase
 };

package/dist/components/Menu/MenuItemsVirtual.js

@@ -11,7 +11,7 @@ import { MenuHeader as k } from "./MenuHeader.js";
 import { MenuList as N, MenuListItem as g } from "./MenuBase.js";
 import "../Searchbar/AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import '../../assets/MenuItemsVirtual.css';const q = "_virtualScrollRef_12fdc_1", B = "_virtualMenuListItem_12fdc_6", y = {
+import '../../assets/MenuItemsVirtual.css';const q = "_virtualScrollRef_14d4s_1", B = "_virtualMenuListItem_14d4s_5", y = {
   virtualScrollRef: q,
   virtualMenuListItem: B
 }, W = ({
@@ -32,21 +32,21 @@ import '../../assets/MenuItemsVirtual.css';const q = "_virtualScrollRef_12fdc_1"
     keyboardEvents: !1
   }), m = R(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) => {
+    const E = (t == null ? void 0 : t.props) || {}, { title: p } = E, c = ((u = t == null ? void 0 : t.items) == null ? void 0 : u.filter((r) => {
       var s;
       return !((s = r.props) != null && s.hidden);
     })) || [];
     return [
       ...e > 0 || h > 0 ? [{ type: "separator" }] : [],
-      ...c ? [{ type: "title", title: c }] : [],
-      ...p.map((r, s) => {
+      ...p ? [{ type: "title", title: p }] : [],
+      ...c.map((r, s) => {
         var d, f;
         return {
           type: "item",
           itemProps: r.props || {},
           active: r.active,
           hasChildren: ((d = r.props) == null ? void 0 : d.expanded) && ((f = r.props) == null ? void 0 : f.items),
-          isLastItem: s === p.length - 1
+          isLastItem: s === c.length - 1
         };
       })
     ];

package/dist/components/Searchbar/Searchbar.js

@@ -1,23 +1,36 @@
-import { jsxs as e, jsx as t } from "react/jsx-runtime";
+import { jsxs as f, jsx as o } from "react/jsx-runtime";
 import "../../index-L8X2o7IH.js";
 import "react";
 import "../RootProvider/RootProvider.js";
-import { SearchbarBase as a } from "./SearchbarBase.js";
-import { SearchbarField as f } from "./SearchbarField.js";
+import { SearchbarBase as n } from "./SearchbarBase.js";
+import { SearchbarField as T } from "./SearchbarField.js";
 import "./AutocompleteBase.js";
-import { Autocomplete as s } from "./Autocomplete.js";
+import { Autocomplete as A } from "./Autocomplete.js";
 import "../Snackbar/useSnackbar.js";
-const B = ({
-  className: i,
-  autocomplete: r,
-  expanded: o = !1,
-  onClose: m,
-  tabIndex: p,
-  ...c
-}) => /* @__PURE__ */ e(a, { className: i, expanded: o, autocomplete: !!r, children: [
-  /* @__PURE__ */ t(f, { ...c, expanded: o, onClose: m, tabIndex: p }),
-  r && /* @__PURE__ */ t(s, { ...r, expanded: o, onSelect: m })
-] });
+const k = ({
+  className: p,
+  autocomplete: e,
+  expanded: a = !1,
+  onClose: r,
+  tabIndex: g,
+  ...h
+}) => /* @__PURE__ */ f(
+  n,
+  {
+    className: p,
+    expanded: a,
+    autocomplete: !!e,
+    onBlurCapture: (t) => {
+      var u, c, s, d, m, b, l;
+      const i = (s = (c = (u = t.target) == null ? void 0 : u.attributes) == null ? void 0 : c.getNamedItem("data-testid")) == null ? void 0 : s.value;
+      t.relatedTarget !== null && (i === "search-button-clear" || i === "search-button-close" || i === "searchbar-input" && ((d = t.relatedTarget) == null ? void 0 : d.getAttribute("data-testid")) !== "searchbar-input" && ((m = t.relatedTarget) == null ? void 0 : m.getAttribute("data-testid")) !== "search-button-clear" && ((b = t.relatedTarget) == null ? void 0 : b.getAttribute("data-testid")) !== "search-button-close" && ((l = t.relatedTarget) == null ? void 0 : l.getAttribute("data-testid")) !== "autocomplete-list") && (r == null || r());
+    },
+    children: [
+      /* @__PURE__ */ o(T, { ...h, expanded: a, onClose: r, tabIndex: g }),
+      e && /* @__PURE__ */ o(A, { ...e, expanded: a, onSelect: r })
+    ]
+  }
+);
 export {
-  B as Searchbar
+  k as Searchbar
 };

package/dist/components/Searchbar/SearchbarBase.js

@@ -1,12 +1,27 @@
-import { jsx as o } from "react/jsx-runtime";
-import { c as n } from "../../index-L8X2o7IH.js";
-import '../../assets/SearchbarBase.css';const b = "_searchbar_1qnvb_1", d = "_searchbarExpanded_1qnvb_14", a = {
-  searchbar: b,
-  searchbarExpanded: d
-}, p = ({ className: r, children: e, expanded: s = !1, autocomplete: c = !1 }) => {
-  const t = n(a.searchbar, r, s && a.searchbarExpanded);
-  return /* @__PURE__ */ o("div", { className: t, "data-autocomplete": c, "data-color": "neutral", children: e });
+import { jsx as n } from "react/jsx-runtime";
+import { c as b } from "../../index-L8X2o7IH.js";
+import '../../assets/SearchbarBase.css';const d = "_searchbar_1qnvb_1", h = "_searchbarExpanded_1qnvb_14", a = {
+  searchbar: d,
+  searchbarExpanded: h
+}, x = ({
+  className: r,
+  children: e,
+  expanded: s = !1,
+  onBlurCapture: c,
+  autocomplete: t = !1
+}) => {
+  const o = b(a.searchbar, r, s && a.searchbarExpanded);
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: o,
+      "data-autocomplete": t,
+      "data-color": "neutral",
+      onBlurCapture: c,
+      children: e
+    }
+  );
 };
 export {
-  p as SearchbarBase
+  x as SearchbarBase
 };

package/dist/components/Searchbar/SearchbarField.js

@@ -1,82 +1,84 @@
 "use client";
-import { jsxs as g, jsx as t } from "react/jsx-runtime";
-import { c as k } from "../../index-L8X2o7IH.js";
-import { useRef as C } from "react";
-import { Icon as I } from "../Icon/Icon.js";
-import { IconButton as n } from "../Button/IconButton.js";
+import { jsxs as C, jsx as t } from "react/jsx-runtime";
+import { c as I } from "../../index-L8X2o7IH.js";
+import { useRef as N } from "react";
+import { Icon as v } from "../Icon/Icon.js";
+import { IconButton as l } from "../Button/IconButton.js";
 import "../RootProvider/RootProvider.js";
 import "./AutocompleteBase.js";
 import "../Snackbar/useSnackbar.js";
-import { S as N } from "../../MagnifyingGlass-3Ln1MufI.js";
-import { S as l } from "../../XMark-DIqxCTTQ.js";
-import '../../assets/SearchbarField.css';const v = "_field_ljqfn_1", T = "_icon_ljqfn_10", A = "_input_ljqfn_17", K = "_dismiss_ljqfn_41", M = "_clear_ljqfn_47", s = {
-  field: v,
-  icon: T,
+import { S as T } from "../../MagnifyingGlass-3Ln1MufI.js";
+import { S as m } from "../../XMark-DIqxCTTQ.js";
+import '../../assets/SearchbarField.css';const j = "_field_1f56c_1", z = "_icon_1f56c_10", A = "_input_1f56c_17", K = "_clear_1f56c_39", M = "_dismiss_1f56c_56", s = {
+  field: j,
+  icon: z,
   input: A,
-  dismiss: K,
-  clear: M
+  clear: K,
+  dismiss: M
 }, H = ({
-  className: m,
-  expanded: p,
+  className: p,
+  expanded: e,
   name: f = "q",
   value: a,
-  placeholder: u = "Search",
-  closeButtonAltText: d = "Close search",
+  placeholder: d = "Search",
+  closeButtonAltText: u = "Close search",
   clearButtonAltText: _ = "Clear search",
   onFocus: h,
   onBlur: x,
   onChange: b,
-  onClear: j,
-  onClose: y,
+  onClear: y,
+  onClose: S,
   onEnter: i,
-  tabIndex: q
+  tabIndex: g
 }) => {
-  const e = C(null), S = (c) => {
-    var o, r;
-    c.key === "Escape" && ((o = e.current) == null || o.blur()), c.key === "Enter" && ((r = e.current) == null || r.blur(), i == null || i());
+  const c = N(null), k = (o) => {
+    var r, n;
+    o.key === "Escape" && ((r = c.current) == null || r.blur()), o.key === "Enter" && ((n = c.current) == null || n.blur(), i == null || i());
   };
-  return /* @__PURE__ */ g("div", { className: k(s.field, m), children: [
+  return /* @__PURE__ */ C("div", { className: I(s.field, p), children: [
     /* @__PURE__ */ t(
       "input",
       {
-        ref: e,
+        ref: c,
         onFocus: h,
         onBlur: x,
         name: f,
         value: a,
         onChange: b,
-        placeholder: u,
+        placeholder: d,
         className: s.input,
-        onKeyUp: S,
+        onKeyUp: k,
         type: "search",
         "aria-haspopup": !0,
         autoComplete: "off",
         "aria-autocomplete": "list",
-        tabIndex: q ?? 0,
+        tabIndex: g ?? 0,
+        "data-expanded": e,
         "data-testid": "searchbar-input"
       }
     ),
-    /* @__PURE__ */ t(I, { svgElement: N, className: s.icon }),
+    /* @__PURE__ */ t(v, { svgElement: T, className: s.icon }),
     a && /* @__PURE__ */ t(
-      n,
+      l,
       {
-        icon: l,
+        icon: m,
         variant: "solid",
         size: "custom",
         className: s.clear,
-        onClick: j,
+        onClick: y,
         dataTestId: "search-button-clear",
         iconAltText: _
       }
-    ) || p && /* @__PURE__ */ t(
-      n,
+    ) || e && /* @__PURE__ */ t(
+      l,
       {
-        icon: l,
+        icon: m,
+        size: "sm",
         variant: "text",
         className: s.dismiss,
-        onClick: y,
+        onClick: S,
         dataTestId: "search-button-close",
-        iconAltText: d
+        iconAltText: u
       }
     )
   ] });

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

@@ -13,4 +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 WithToolbar: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/List/ListItemLink.d.ts

@@ -13,4 +13,4 @@ export interface ListItemLinkProps {
     active?: boolean;
     children?: React.ReactNode;
 }
-export declare const ListItemLink: ({ as, loading, disabled, selected, href, onClick, onKeyPress, className, active, ariaLabel, children, }: ListItemLinkProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ListItemLink: ({ as, loading, disabled, selected, href, onClick, onKeyPress, className, active, ariaLabel, children, tabIndex, }: ListItemLinkProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Searchbar/SearchbarBase.d.ts

@@ -4,5 +4,6 @@ export interface SearchbarBaseProps {
     children: ReactNode;
     expanded?: boolean;
     autocomplete?: boolean;
+    onBlurCapture?: React.FocusEventHandler<HTMLDivElement>;
 }
-export declare const SearchbarBase: ({ className, children, expanded, autocomplete }: SearchbarBaseProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SearchbarBase: ({ className, children, expanded, onBlurCapture, autocomplete, }: SearchbarBaseProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

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