@altinn/altinn-components 0.53.1 → 0.54.1

package/dist/components/GlobalHeader/AccountSelector.js

@@ -1,17 +1,17 @@
 "use client";
-import { jsx as o, jsxs as b } from "react/jsx-runtime";
-import { c as y } from "../../index-p1eeF8LQ.js";
-import u, { forwardRef as I, useState as j, useEffect as x } from "react";
-import { useIsDesktop as N } from "../../hooks/useIsDesktop.js";
-import { AccountMenu as q } from "../Account/AccountMenu.js";
-import { Button as R } from "../Button/Button.js";
-import { useRootContext as L } from "../RootProvider/RootProvider.js";
+import { jsx as a, jsxs as m, Fragment as y } from "react/jsx-runtime";
+import { c as j } from "../../index-p1eeF8LQ.js";
+import u, { forwardRef as O, useState as x, useEffect as I } from "react";
+import { useIsDesktop as q } from "../../hooks/useIsDesktop.js";
+import { AccountMenu as R } from "../Account/AccountMenu.js";
+import { Button as L } from "../Button/Button.js";
+import { useRootContext as A } from "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
-import { SearchField as A } from "../Forms/SearchField.js";
-import { S as P } from "../../button-BB5sYVKY.js";
-import { H as V, S as H } from "../../switch-Cemfhx0H.js";
-import { u as O } from "../../useId-BVFxCjkq.js";
-import '../../assets/AccountSelector.css';var T = function(e, l) {
+import { SearchField as P } from "../Forms/SearchField.js";
+import { S as V } from "../../button-BB5sYVKY.js";
+import { H, S as T } from "../../switch-Cemfhx0H.js";
+import { u as z } from "../../useId-BVFxCjkq.js";
+import '../../assets/AccountSelector.css';var B = function(e, l) {
   var n = {};
   for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && l.indexOf(t) < 0 && (n[t] = e[t]);
   if (e != null && typeof Object.getOwnPropertySymbols == "function")
@@ -19,9 +19,9 @@ import '../../assets/AccountSelector.css';var T = function(e, l) {
       l.indexOf(t[r]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[r]) && (n[t[r]] = e[t[r]]);
   return n;
 };
-const B = I((e, l) => {
-  var { title: n, titleId: t } = e, r = T(e, ["title", "titleId"]);
-  let i = O();
+const $ = O((e, l) => {
+  var { title: n, titleId: t } = e, r = B(e, ["title", "titleId"]);
+  let i = z();
   return i = n ? t || "title-" + i : void 0, u.createElement(
     "svg",
     Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: !1, role: "img", ref: l, "aria-labelledby": i }, r),
@@ -29,7 +29,7 @@ const B = I((e, l) => {
     u.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M3.75 12a8.25 8.25 0 1 1 16.5 0 8.25 8.25 0 0 1-16.5 0M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25m4.03 9.28-3.5 3.5a.75.75 0 0 1-1.06 0l-3.5-3.5a.75.75 0 0 1 .53-1.28h7a.75.75 0 0 1 .53 1.28m-2.34.22h-3.38L12 13.44z", clipRule: "evenodd" })
   );
 });
-var $ = function(e, l) {
+var D = function(e, l) {
   var n = {};
   for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && l.indexOf(t) < 0 && (n[t] = e[t]);
   if (e != null && typeof Object.getOwnPropertySymbols == "function")
@@ -37,26 +37,26 @@ var $ = function(e, l) {
       l.indexOf(t[r]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[r]) && (n[t[r]] = e[t[r]]);
   return n;
 };
-const D = I((e, l) => {
-  var { title: n, titleId: t } = e, r = $(e, ["title", "titleId"]);
-  let i = O();
+const K = O((e, l) => {
+  var { title: n, titleId: t } = e, r = D(e, ["title", "titleId"]);
+  let i = z();
   return i = n ? t || "title-" + i : void 0, u.createElement(
     "svg",
     Object.assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24", focusable: !1, role: "img", ref: l, "aria-labelledby": i }, r),
     n ? u.createElement("title", { id: i }, n) : null,
     u.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M3.75 12a8.25 8.25 0 1 1 16.5 0 8.25 8.25 0 0 1-16.5 0M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25m.53 6.72a.75.75 0 0 0-1.06 0l-3.5 3.5a.75.75 0 0 0 .53 1.28h7a.75.75 0 0 0 .53-1.28zM12 10.56l1.69 1.69h-3.38z", clipRule: "evenodd" })
   );
-}), K = "_accountSelector_qwjt5_1", W = "_heading_qwjt5_11", G = "_searchSection_qwjt5_17", J = "_searchField_qwjt5_25", Q = "_accountMenu_qwjt5_29", U = "_fullScreen_qwjt5_37", X = "_virtualized_qwjt5_41", Y = "_btnIcon_qwjt5_45", Z = "_spinner_qwjt5_49", c = {
-  accountSelector: K,
-  heading: W,
-  searchSection: G,
-  searchField: J,
-  accountMenu: Q,
-  fullScreen: U,
-  virtualized: X,
-  btnIcon: Y,
-  spinner: Z
-}, he = ({
+}), W = "_accountSelector_qwjt5_1", G = "_heading_qwjt5_11", J = "_searchSection_qwjt5_17", Q = "_searchField_qwjt5_25", U = "_accountMenu_qwjt5_29", X = "_fullScreen_qwjt5_37", Y = "_virtualized_qwjt5_41", Z = "_btnIcon_qwjt5_45", ee = "_spinner_qwjt5_49", c = {
+  accountSelector: W,
+  heading: G,
+  searchSection: J,
+  searchField: Q,
+  accountMenu: U,
+  fullScreen: X,
+  virtualized: Y,
+  btnIcon: Z,
+  spinner: ee
+}, pe = ({
   accountMenu: e,
   forceOpenFullScreen: l,
   className: n,
@@ -64,76 +64,74 @@ const D = I((e, l) => {
   showDeletedUnits: r,
   onShowDeletedUnitsChange: i
 }) => {
-  const { currentId: m, openId: d, closeAll: p, languageCode: g } = L(), h = N(), a = m === "accountFullscreen", [v, S] = j(""), [f, w] = j(l);
-  x(() => {
-    !l && f && a && p(), w(l);
-  }, [l]), x(() => {
-    (f === !0 && !a || !h && m === "account") && d("accountFullscreen");
-  }, [f, a, h, m, d]);
-  const { minimize: z, fullscreen: k, searchText: _, heading: C, switchLabel: E } = ee(g), F = () => {
-    d(a ? "account" : "accountFullscreen");
-  }, M = (s) => {
-    e.onSelectAccount?.(s), p(), w(!1);
+  const { currentId: h, openId: d, closeAll: g, languageCode: v } = A(), p = q(), o = h === "accountFullscreen", [S, w] = x(""), [f, _] = x(l);
+  I(() => {
+    !l && f && o && g(), _(l);
+  }, [l]), I(() => {
+    (f === !0 && !o || !p && h === "account") && d("accountFullscreen");
+  }, [f, o, p, h, d]);
+  const { minimize: k, fullscreen: C, searchText: b, heading: E, switchLabel: F } = te(v), M = () => {
+    d(o ? "account" : "accountFullscreen");
+  }, N = (s) => {
+    e.onSelectAccount?.(s), g(), _(!1);
   };
-  return t ? /* @__PURE__ */ o(P, { "aria-hidden": !0, "data-color": "neutral", className: c.spinner }) : /* @__PURE__ */ b("div", { className: y(n, c.accountSelector), children: [
-    /* @__PURE__ */ o(V, { "data-size": "sm", level: 2, className: c.heading, children: C }),
-    /* @__PURE__ */ b("div", { className: c.searchSection, children: [
-      /* @__PURE__ */ o(
-        A,
+  return t ? /* @__PURE__ */ a(V, { "aria-hidden": !0, "data-color": "neutral", className: c.spinner }) : /* @__PURE__ */ m("div", { className: j(n, c.accountSelector), children: [
+    /* @__PURE__ */ a(H, { "data-size": "sm", level: 2, className: c.heading, children: E }),
+    /* @__PURE__ */ m("div", { className: c.searchSection, children: [
+      /* @__PURE__ */ a(
+        P,
         {
-          name: _,
-          placeholder: _,
-          value: v,
-          onChange: (s) => S(s.target.value),
-          onClear: () => S(""),
+          name: b,
+          placeholder: b,
+          value: S,
+          onChange: (s) => w(s.target.value),
+          onClear: () => w(""),
           className: c.searchField
         }
       ),
-      r !== void 0 && /* @__PURE__ */ o(
-        H,
+      r !== void 0 && /* @__PURE__ */ a(
+        T,
         {
           checked: r,
           onChange: (s) => i?.(s.target.checked),
-          label: E
+          label: F
         }
       )
     ] }),
-    /* @__PURE__ */ o(
+    /* @__PURE__ */ a(
       "div",
       {
-        className: y(
+        className: j(
           c.accountMenu,
-          a && c.fullScreen,
+          o && c.fullScreen,
           e.isVirtualized && c.virtualized
         ),
-        children: /* @__PURE__ */ o(
-          q,
+        children: /* @__PURE__ */ a(
+          R,
           {
             ...e,
-            onSelectAccount: M,
+            onSelectAccount: N,
             keyboardEvents: !1,
             search: {
               hidden: !0,
               name: "",
-              value: v,
-              getResultsLabel: (s) => te(s, g)
+              value: S,
+              getResultsLabel: (s) => ne(s, v)
             },
-            scrollRefStyles: !a && e.isVirtualized ? { maxHeight: "calc(40vh)" } : void 0
+            scrollRefStyles: !o && e.isVirtualized ? { maxHeight: "calc(40vh)" } : void 0
           }
         )
       }
     ),
-    f !== !0 && h && /* @__PURE__ */ o(
-      R,
-      {
-        icon: a ? /* @__PURE__ */ o(D, { className: c.btnIcon, "aria-hidden": "true" }) : /* @__PURE__ */ o(B, { className: c.btnIcon, "aria-hidden": "true" }),
-        variant: "ghost",
-        onClick: F,
-        children: a ? z : k
-      }
-    )
+    f !== !0 && p && /* @__PURE__ */ a(L, { variant: "ghost", onClick: M, children: o ? /* @__PURE__ */ m(y, { children: [
+      /* @__PURE__ */ a(K, { className: c.btnIcon, "aria-hidden": "true" }),
+      k
+    ] }) : /* @__PURE__ */ m(y, { children: [
+      /* @__PURE__ */ a($, { className: c.btnIcon, "aria-hidden": "true" }),
+      C
+    ] }) })
   ] });
-}, ee = (e) => {
+}, te = (e) => {
   switch (e) {
     case "nn":
       return {
@@ -160,10 +158,10 @@ const D = I((e, l) => {
         switchLabel: "Vis slettede"
       };
   }
-}, te = (e, l) => {
+}, ne = (e, l) => {
   const n = l === "nb" || l === "nn";
   return e === 0 ? n ? "Ingen treff" : "No hits" : n ? `${e} treff` : e === 1 ? "1 hit" : `${e} hits`;
 };
 export {
-  he as AccountSelector
+  pe as AccountSelector
 };

package/dist/components/Toolbar/Toolbar.js

@@ -13,10 +13,10 @@ const g = (n, c) => c || `toolbar-filter-${n}`, P = ({
   onFilterStateChange: f,
   search: m,
   accountMenu: b,
-  getFilterLabel: v,
-  children: y,
-  showResultsLabel: S,
-  removeButtonAltText: h,
+  getFilterLabel: h,
+  children: v,
+  showResultsLabel: y,
+  removeButtonAltText: S,
   addFilterButtonLabel: x
 }) => {
   const { openId: A, closeAll: F } = V(), t = c || {}, a = typeof f == "function" ? f : () => {
@@ -65,7 +65,7 @@ const g = (n, c) => c || `toolbar-filter-${n}`, P = ({
       B,
       {
         id: g(e.name, e.id),
-        showResultsLabel: S,
+        showResultsLabel: y,
         onRemove: () => C(e.name),
         onChange: j,
         name: e.name,
@@ -73,10 +73,11 @@ const g = (n, c) => c || `toolbar-filter-${n}`, P = ({
         label: e.label,
         optionType: e.optionType,
         removable: e.removable,
-        getSelectedLabel: v,
-        buttonAltText: h,
+        getSelectedLabel: h,
+        buttonAltText: S,
         optionGroups: e.optionGroups,
-        filterState: t
+        filterState: t,
+        search: e.search
       },
       e.name
     )),
@@ -97,7 +98,7 @@ const g = (n, c) => c || `toolbar-filter-${n}`, P = ({
       },
       u.join(",")
     ),
-    y
+    v
   ] });
 };
 export {

package/dist/components/Toolbar/ToolbarFilter.js

@@ -1,15 +1,15 @@
-import { jsxs as D, jsx as a } from "react/jsx-runtime";
+import { jsxs as I, jsx as a } from "react/jsx-runtime";
 import "../../index-p1eeF8LQ.js";
 import "react";
-import { useIsDesktop as I } from "../../hooks/useIsDesktop.js";
+import { useIsDesktop as j } from "../../hooks/useIsDesktop.js";
 import "../Button/Button.js";
-import { useRootContext as j } from "../RootProvider/RootProvider.js";
-import { DrawerOrDropdown as F } from "../Dropdown/DrawerOrDropdown.js";
+import { useRootContext as F } from "../RootProvider/RootProvider.js";
+import { DrawerOrDropdown as L } from "../Dropdown/DrawerOrDropdown.js";
 import "../Snackbar/useSnackbar.js";
-import { ToolbarButton as L } from "./ToolbarButton.js";
-import { ToolbarFilterBase as O } from "./ToolbarFilterBase.js";
-import { ToolbarOptions as R } from "./ToolbarOptions.js";
-const E = (i, t) => Array.isArray(t) ? t.join(", ") : t, P = ({
+import { ToolbarButton as O } from "./ToolbarButton.js";
+import { ToolbarFilterBase as R } from "./ToolbarFilterBase.js";
+import { ToolbarOptions as E } from "./ToolbarOptions.js";
+const G = (i, t) => Array.isArray(t) ? t.join(", ") : t, Q = ({
   removable: i,
   label: t,
   name: o,
@@ -21,38 +21,39 @@ const E = (i, t) => Array.isArray(t) ? t.join(", ") : t, P = ({
   buttonAltText: p = "Remove button",
   getSelectedLabel: g,
   showResultsLabel: x = "Show results",
-  optionType: A,
+  search: A,
+  optionType: h,
   id: s = `toolbar-filter-${o}`
 }) => {
-  const { currentId: h, toggleId: v, closeAll: d } = j(), u = I(), k = (m ?? []).map((r) => {
+  const { currentId: v, toggleId: k, closeAll: d } = F(), u = j(), w = (m ?? []).map((r) => {
     const e = c?.[r.name || o];
     return {
       name: o,
       ...r,
       checked: Array.isArray(e) ? e.includes(r.value) : r.value === e
     };
-  }), n = c?.[o], w = g?.(o, n) ?? E(o, n), f = () => v(s), l = h === s, B = (r) => {
+  }), n = c?.[o], B = g?.(o, n) ?? G(o, n), f = () => k(s), l = v === s, C = (r) => {
     const e = r.relatedTarget;
     u && (!e || !r.currentTarget.contains(e)) && d();
-  }, C = Array.isArray(n) ? n.length > 0 : typeof n < "u";
-  return /* @__PURE__ */ D(O, { expanded: l, onBlurCapture: B, "data-testid": "filter-base-" + s, children: [
+  }, D = Array.isArray(n) ? n.length > 0 : typeof n < "u";
+  return /* @__PURE__ */ I(R, { expanded: l, onBlurCapture: C, "data-testid": "filter-base-" + s, children: [
     /* @__PURE__ */ a(
-      L,
+      O,
       {
         type: "select",
         removable: i,
-        active: C,
+        active: D,
         onToggle: f,
         ariaLabel: p,
         iconAltText: p,
         onRemove: T,
         "data-testid": s,
         tabIndex: l ? -1 : 0,
-        children: w || t
+        children: B || t
       }
     ),
     /* @__PURE__ */ a(
-      F,
+      L,
       {
         open: l,
         drawerTitle: t,
@@ -62,14 +63,15 @@ const E = (i, t) => Array.isArray(t) ? t.join(", ") : t, P = ({
           label: x
         },
         children: /* @__PURE__ */ a(
-          R,
+          E,
           {
             name: o,
-            options: k,
+            options: w,
             optionGroups: b,
             onChange: y,
-            optionType: A,
-            keyboardEvents: l && u
+            optionType: h,
+            keyboardEvents: l && u,
+            search: A
           }
         )
       }
@@ -77,5 +79,5 @@ const E = (i, t) => Array.isArray(t) ? t.join(", ") : t, P = ({
   ] });
 };
 export {
-  P as ToolbarFilter
+  Q as ToolbarFilter
 };

package/dist/components/Toolbar/ToolbarOptions.js

@@ -1,77 +1,84 @@
-import { jsxs as b, jsx as e } from "react/jsx-runtime";
-import { useRef as A, Fragment as F } from "react";
-import { useMenu as H } from "../../hooks/useMenu.js";
+import { jsxs as v, jsx as e } from "react/jsx-runtime";
+import { useRef as A, useState as F, useMemo as H, Fragment as K } from "react";
+import { useMenu as N } from "../../hooks/useMenu.js";
 import "../../index-p1eeF8LQ.js";
 import "../Button/Button.js";
 import "../RootProvider/RootProvider.js";
-import { MenuOption as K } from "../Menu/MenuOption.js";
-import { MenuSearch as N } from "../Menu/MenuSearch.js";
-import { MenuHeader as R } from "../Menu/MenuHeader.js";
-import { MenuBase as S, MenuList as q, MenuListItem as t } from "../Menu/MenuBase.js";
+import { MenuOption as R } from "../Menu/MenuOption.js";
+import { MenuSearch as q } from "../Menu/MenuSearch.js";
+import { MenuHeader as z } from "../Menu/MenuHeader.js";
+import { MenuBase as D, MenuList as E, MenuListItem as a } from "../Menu/MenuBase.js";
 import "../Snackbar/useSnackbar.js";
-const _ = ({
-  name: x,
-  search: n,
-  optionGroups: i = {},
-  options: y,
-  onChange: v,
-  optionType: g,
-  keyboardEvents: p,
-  onBlurCapture: k
+const ne = ({
+  name: S,
+  search: i,
+  optionGroups: l = {},
+  options: c,
+  onChange: x,
+  optionType: y,
+  keyboardEvents: s,
+  onBlurCapture: V
 }) => {
-  const m = A(null), { menu: I, setActiveIndex: L } = H({
-    items: y,
-    groups: i,
+  const u = A(null), [t, p] = F(""), L = H(
+    () => c.filter((r) => t ? r.label.toLowerCase().includes(t.toLowerCase()) : !0),
+    [c, t]
+  ), { menu: k, setActiveIndex: I } = N({
+    items: L,
+    groups: l,
     groupByKey: "groupId",
-    keyboardEvents: p,
-    ref: m
+    keyboardEvents: s,
+    ref: u
   });
-  return /* @__PURE__ */ b(S, { variant: "default", ref: m, children: [
-    n && /* @__PURE__ */ e(N, { ...n }),
-    /* @__PURE__ */ e(q, { role: "menu", onBlurCapture: k, children: I.map((a, c) => {
-      const T = a?.props || {}, { title: s, divider: j = !0 } = T;
-      return /* @__PURE__ */ b(F, { children: [
-        c && j ? /* @__PURE__ */ e(t, { role: "separator" }) : "",
-        s && /* @__PURE__ */ e(t, { children: /* @__PURE__ */ e(R, { title: s }) }),
-        a?.items.filter((r) => !r.props?.hidden).map((r, B) => {
-          const { active: C, onMouseEnter: O } = r, { groupId: l, onClick: w, value: u, checked: d, type: f, ...o } = r.props || {}, { expanded: P } = o, h = o.name || x, M = f || l && i[l]?.optionType || g;
+  return /* @__PURE__ */ v(D, { variant: "default", ref: u, children: [
+    i && /* @__PURE__ */ e(q, { ...i, value: t, onChange: (r) => {
+      p(r.target.value);
+    }, onClear: () => {
+      p("");
+    } }),
+    /* @__PURE__ */ e(E, { role: "menu", onBlurCapture: V, children: k.map((r, m) => {
+      const O = r?.props || {}, { title: d, divider: T = !0 } = O;
+      return /* @__PURE__ */ v(K, { children: [
+        m && T ? /* @__PURE__ */ e(a, { role: "separator" }) : "",
+        d && /* @__PURE__ */ e(a, { children: /* @__PURE__ */ e(z, { title: d }) }),
+        r?.items.filter((n) => !n.props?.hidden).map((n, j) => {
+          const { active: w, onMouseEnter: B } = n, { groupId: h, onClick: U, value: f, checked: C, type: M, ...o } = n.props || {}, { expanded: P } = o, g = o.name || S, b = M || h && l[h]?.optionType || y;
           return /* @__PURE__ */ e(
-            t,
+            a,
             {
               expanded: P,
-              onMouseEnter: O,
-              onMouseLeave: () => L(-1),
-              role: f === "radio" ? "menuitemradio" : "menuitemcheckbox",
-              "aria-checked": d ?? !1,
+              onMouseEnter: B,
+              onMouseLeave: () => I(-1),
+              role: M === "radio" ? "menuitemradio" : "menuitemcheckbox",
+              "aria-checked": C ?? !1,
               children: /* @__PURE__ */ e(
-                K,
+                R,
                 {
                   ...o,
-                  active: C,
-                  tabIndex: p ? -1 : 0,
+                  active: w,
+                  tabIndex: s ? -1 : 0,
                   label: o.label,
                   count: o.count,
-                  name: h,
-                  type: M,
-                  value: u,
-                  checked: d,
+                  name: g,
+                  type: b,
+                  value: f,
+                  checked: C,
                   onClick: () => {
-                    v?.({
-                      name: h,
-                      value: u,
-                      type: M
+                    x?.({
+                      name: g,
+                      value: f,
+                      type: b
                     });
                   }
                 }
               )
             },
-            B
+            j
           );
         })
-      ] }, c);
+      ] }, m);
     }) })
   ] });
 };
 export {
-  _ as ToolbarOptions
+  ne as ToolbarOptions
 };

package/dist/hooks/useAccountSelector.js

@@ -1,4 +1,4 @@
-import { jsx as k } from "react/jsx-runtime";
+import { jsx as A } from "react/jsx-runtime";
 import { useMemo as H } from "react";
 import "../index-p1eeF8LQ.js";
 import { Button as M } from "../components/Button/Button.js";
@@ -11,36 +11,36 @@ import { S as R, a as W } from "../HeartFill-CYSrJ_xK.js";
 const x = (e) => e === "Organization" ? "company" : "person", et = ({
   partyListDTO: e = [],
   favoriteAccountUuids: o,
-  currentAccountUuid: f,
+  currentAccountUuid: u,
   selfAccountUuid: l,
   isLoading: d = !1,
   onSelectAccount: b,
   isVirtualized: I = !1,
   onToggleFavorite: r,
   languageCode: i,
-  showDeletedUnits: u,
+  showDeletedUnits: c,
   onShowDeletedUnitsChange: n
 }) => {
-  const c = G(), [P, m, v] = H(() => {
+  const f = G(), [P, m, v] = H(() => {
     if (d || !e || !l)
       return [[], {}, void 0];
-    const s = (t) => o?.includes(t), _ = (t) => !t.isDeleted || u !== !1, z = D(i), F = i || "nb", N = (t, a) => t.name.localeCompare(a.name, F, {
+    const s = (t) => o?.includes(t), _ = (t) => !t.isDeleted || c !== !1 || t.partyUuid === u, z = D(i), F = i || "nb", N = (t, a) => t.name.localeCompare(a.name, F, {
       sensitivity: "base",
       ignorePunctuation: !0
     }), B = [...e].sort(N);
-    let A;
-    const U = [], y = [], g = [];
+    let U;
+    const k = [], y = [], g = [];
     for (const t of B)
       if (q(t.type)) {
         if (t.partyUuid === l)
-          A = h(
+          U = h(
             i,
             t,
             "favorites",
-            f,
+            u,
             !1,
             r,
-            c,
+            f,
             void 0,
             !0
           );
@@ -49,12 +49,12 @@ const x = (e) => e === "Organization" ? "company" : "person", et = ({
             i,
             t,
             t.partyUuid,
-            f,
+            u,
             s(t.partyUuid),
             r,
-            c
+            f
           );
-          U.push(a), s(t.partyUuid) && g.push({ ...a, groupId: "favorites" });
+          k.push(a), s(t.partyUuid) && g.push({ ...a, groupId: "favorites" });
         }
       } else if (Y(t.type)) {
         if (_(t) || s(t.partyUuid)) {
@@ -62,10 +62,10 @@ const x = (e) => e === "Organization" ? "company" : "person", et = ({
             i,
             t,
             t.partyUuid,
-            f,
+            u,
             s(t.partyUuid),
             r,
-            c
+            f
           );
           _(t) && y.push(a), s(t.partyUuid) && g.push({ ...a, groupId: "favorites" });
         }
@@ -77,10 +77,10 @@ const x = (e) => e === "Organization" ? "company" : "person", et = ({
                 i,
                 p,
                 t.partyUuid,
-                f,
+                u,
                 s(p.partyUuid),
                 r,
-                c,
+                f,
                 t
               );
               _(p) && y.push(O), s(p.partyUuid) && g.push({
@@ -90,14 +90,14 @@ const x = (e) => e === "Organization" ? "company" : "person", et = ({
             }
         }
       }
-    if (A === void 0)
+    if (U === void 0)
       return [[], {}, void 0];
-    const $ = [A, ...g, ...U, ...y], V = $.find((t) => t?.selected === !0), j = {
+    const $ = [U, ...g, ...k, ...y], V = $.find((t) => t?.selected === !0), j = {
       [y[0]?.groupId || "company"]: {
         title: z.account_orgs,
         divider: !0
       },
-      [U[0]?.groupId || "person"]: {
+      [k[0]?.groupId || "person"]: {
         title: z.account_persons,
         divider: !0
       },
@@ -111,12 +111,12 @@ const x = (e) => e === "Organization" ? "company" : "person", et = ({
     e,
     l,
     o,
-    f,
+    u,
     d,
     r,
     i,
-    c,
-    u
+    f,
+    c
   ]);
   return d || !e || !v ? {
     accountMenu: {
@@ -137,20 +137,20 @@ const x = (e) => e === "Organization" ? "company" : "person", et = ({
       currentAccount: v
     },
     loading: !1,
-    showDeletedUnits: u,
+    showDeletedUnits: c,
     onShowDeletedUnitsChange: n
   };
-}, h = (e, o, f, l, d, b, I, r, i) => {
-  const u = x(o?.type ?? ""), n = D(e), c = S({
+}, h = (e, o, u, l, d, b, I, r, i) => {
+  const c = x(o?.type ?? ""), n = D(e), f = S({
     fullName: o?.name,
-    type: u
+    type: c
   }), P = r ? S({
     fullName: r?.name,
     type: x(r?.type ?? ""),
     reverseNameOrder: !1
   }) : void 0;
   let m = "";
-  const v = u === "company" && r ? "subunit" : u;
+  const v = c === "company" && r ? "subunit" : c;
   switch (v) {
     case "company":
       m = `${n.org_no}. ${o.organizationNumber}`;
@@ -167,19 +167,19 @@ const x = (e) => e === "Organization" ? "company" : "person", et = ({
   return {
     id: o?.partyUuid,
     icon: {
-      name: c,
-      type: u,
+      name: f,
+      type: c,
       isParent: !r,
       isDeleted: o?.isDeleted
     },
-    name: c,
+    name: f,
     description: m,
-    groupId: f,
+    groupId: u,
     type: v,
     selected: l === o?.partyUuid,
     disabled: !!o?.onlyHierarchyElementWithNoAccess,
     badge: i ? { label: n.you, color: "person" } : o.isDeleted && I ? { label: n.deleted, color: "neutral" } : void 0,
-    controls: !i && /* @__PURE__ */ k(
+    controls: !i && /* @__PURE__ */ A(
       M,
       {
         rounded: !0,
@@ -189,7 +189,7 @@ const x = (e) => e === "Organization" ? "company" : "person", et = ({
           b && (s.stopPropagation(), b(o?.partyUuid));
         },
         size: "xs",
-        children: d ? /* @__PURE__ */ k(R, {}) : /* @__PURE__ */ k(W, {})
+        children: d ? /* @__PURE__ */ A(R, {}) : /* @__PURE__ */ A(W, {})
       }
     )
   };

package/dist/types/lib/components/Toolbar/ToolbarDate.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ removable, label, name, filterState, options, optionGroups, onChange, onRemove, buttonAltText, getSelectedLabel, showResultsLabel, optionType, id, }: import('./ToolbarFilter').ToolbarFilterProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ removable, label, name, filterState, options, optionGroups, onChange, onRemove, buttonAltText, getSelectedLabel, showResultsLabel, search, optionType, id, }: import('./ToolbarFilter').ToolbarFilterProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {

package/dist/types/lib/components/Toolbar/ToolbarFilter.d.ts

@@ -1,5 +1,5 @@
 import { MouseEventHandler } from 'react';
-import { FilterChangePayload, FilterState } from '../';
+import { FilterChangePayload, FilterState, ToolbarSearchProps } from '../';
 import { MenuOptionProps } from '../Menu';
 import { OptionGroup } from './ToolbarOptions';
 type ToolbarFilterValue = (string | number)[];
@@ -20,6 +20,7 @@ export interface ToolbarFilterProps {
     onChange?: (payload: FilterChangePayload) => void;
     onRemove?: MouseEventHandler;
     showResultsLabel?: string;
+    search?: ToolbarSearchProps;
 }
-export declare const ToolbarFilter: ({ removable, label, name, filterState, options, optionGroups, onChange, onRemove, buttonAltText, getSelectedLabel, showResultsLabel, optionType, id, }: ToolbarFilterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ToolbarFilter: ({ removable, label, name, filterState, options, optionGroups, onChange, onRemove, buttonAltText, getSelectedLabel, showResultsLabel, search, optionType, id, }: ToolbarFilterProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/lib/components/Toolbar/ToolbarFilter.stories.d.ts

@@ -1,7 +1,7 @@
 import { StoryObj } from '@storybook/react-vite';
 declare const meta: {
     title: string;
-    component: ({ removable, label, name, filterState, options, optionGroups, onChange, onRemove, buttonAltText, getSelectedLabel, showResultsLabel, optionType, id, }: import('./ToolbarFilter').ToolbarFilterProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ removable, label, name, filterState, options, optionGroups, onChange, onRemove, buttonAltText, getSelectedLabel, showResultsLabel, search, optionType, id, }: import('./ToolbarFilter').ToolbarFilterProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {
@@ -17,3 +17,4 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Single: Story;
 export declare const Multiple: Story;
+export declare const MultipleWithSearch: Story;

package/dist/types/lib/components/Toolbar/ToolbarOptions.d.ts

@@ -1,5 +1,6 @@
-import { MenuOptionProps, MenuSearchProps } from '../Menu';
+import { MenuOptionProps } from '../Menu';
 import { FilterChangePayload } from './Toolbar.tsx';
+import { ToolbarSearchProps } from './ToolbarSearch';
 export type ToolbarOptionType = 'checkbox' | 'radio';
 export interface OptionGroup {
     title?: string;
@@ -10,7 +11,7 @@ export interface ToolbarOptionsProps {
     name: string;
     options: MenuOptionProps[];
     onChange?: (input: FilterChangePayload) => void;
-    search?: MenuSearchProps;
+    search?: ToolbarSearchProps;
     optionType: ToolbarOptionType;
     optionGroups?: {
         [key: string]: OptionGroup;

package/package.json

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