@altinn/altinn-components 0.48.3 → 0.49.0

package/dist/components/GlobalHeader/AccountSelector.js

@@ -1,7 +1,7 @@
 "use client";
-import { jsx as a, jsxs as k } from "react/jsx-runtime";
-import { c as _ } from "../../index-L8X2o7IH.js";
-import s, { forwardRef as w, useState as b, useEffect as y } from "react";
+import { jsx as a, jsxs as C } from "react/jsx-runtime";
+import { c as b } from "../../index-L8X2o7IH.js";
+import s, { forwardRef as x, useState as w, useEffect as y } from "react";
 import { useIsDesktop as F } from "../../hooks/useIsDesktop.js";
 import { AccountMenu as N } from "../Account/AccountMenu.js";
 import { Button as R } from "../Button/Button.js";
@@ -9,83 +9,83 @@ import { useRootContext as A } from "../RootProvider/RootProvider.js";
 import "../Snackbar/useSnackbar.js";
 import { SearchField as M } from "../Forms/SearchField.js";
 import { S as P } from "../../Spinner-BDXfwXIh.js";
-import { H as T } from "../../Heading-By5DKz2H.js";
-import { u as x } from "../../useId-BVFxCjkq.js";
-import '../../assets/AccountSelector.css';var H = function(e, i) {
+import { H } from "../../Heading-By5DKz2H.js";
+import { u as I } from "../../useId-BVFxCjkq.js";
+import '../../assets/AccountSelector.css';var T = function(e, l) {
   var r = {};
-  for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && i.indexOf(t) < 0 && (r[t] = e[t]);
+  for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && l.indexOf(t) < 0 && (r[t] = e[t]);
   if (e != null && typeof Object.getOwnPropertySymbols == "function")
     for (var n = 0, t = Object.getOwnPropertySymbols(e); n < t.length; n++)
-      i.indexOf(t[n]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[n]) && (r[t[n]] = e[t[n]]);
+      l.indexOf(t[n]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[n]) && (r[t[n]] = e[t[n]]);
   return r;
 };
-const V = w((e, i) => {
-  var { title: r, titleId: t } = e, n = H(e, ["title", "titleId"]);
-  let l = x();
-  return l = r ? t || "title-" + l : void 0, s.createElement(
+const V = x((e, l) => {
+  var { title: r, titleId: t } = e, n = T(e, ["title", "titleId"]);
+  let i = I();
+  return i = r ? t || "title-" + i : void 0, s.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: i, "aria-labelledby": l }, n),
-    r ? s.createElement("title", { id: l }, r) : null,
+    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 }, n),
+    r ? s.createElement("title", { id: i }, r) : null,
     s.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 B = function(e, i) {
+var B = function(e, l) {
   var r = {};
-  for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && i.indexOf(t) < 0 && (r[t] = e[t]);
+  for (var t in e) Object.prototype.hasOwnProperty.call(e, t) && l.indexOf(t) < 0 && (r[t] = e[t]);
   if (e != null && typeof Object.getOwnPropertySymbols == "function")
     for (var n = 0, t = Object.getOwnPropertySymbols(e); n < t.length; n++)
-      i.indexOf(t[n]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[n]) && (r[t[n]] = e[t[n]]);
+      l.indexOf(t[n]) < 0 && Object.prototype.propertyIsEnumerable.call(e, t[n]) && (r[t[n]] = e[t[n]]);
   return r;
 };
-const D = w((e, i) => {
+const D = x((e, l) => {
   var { title: r, titleId: t } = e, n = B(e, ["title", "titleId"]);
-  let l = x();
-  return l = r ? t || "title-" + l : void 0, s.createElement(
+  let i = I();
+  return i = r ? t || "title-" + i : void 0, s.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: i, "aria-labelledby": l }, n),
-    r ? s.createElement("title", { id: l }, r) : null,
+    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 }, n),
+    r ? s.createElement("title", { id: i }, r) : null,
     s.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_1f74n_1", L = "_heading_1f74n_11", U = "_searchSection_1f74n_17", W = "_searchField_1f74n_22", $ = "_accountMenu_1f74n_26", q = "_fullScreen_1f74n_34", G = "_virtualized_1f74n_38", J = "_btnIcon_1f74n_42", Q = "_spinner_1f74n_46", c = {
-  accountSelector: K,
-  heading: L,
-  searchSection: U,
-  searchField: W,
-  accountMenu: $,
+}), L = "_accountSelector_1f74n_1", $ = "_heading_1f74n_11", K = "_searchSection_1f74n_17", U = "_searchField_1f74n_22", W = "_accountMenu_1f74n_26", q = "_fullScreen_1f74n_34", G = "_virtualized_1f74n_38", J = "_btnIcon_1f74n_42", Q = "_spinner_1f74n_46", c = {
+  accountSelector: L,
+  heading: $,
+  searchSection: K,
+  searchField: U,
+  accountMenu: W,
   fullScreen: q,
   virtualized: G,
   btnIcon: J,
   spinner: Q
-}, de = ({ accountMenu: e, forceOpenFullScreen: i, className: r, loading: t }) => {
-  const { currentId: n, openId: l, closeAll: m, languageCode: I } = A(), u = F(), o = n === "accountFullscreen", [h, p] = b(""), [d, v] = b(i);
+}, de = ({ accountMenu: e, forceOpenFullScreen: l, className: r, loading: t }) => {
+  const { currentId: n, openId: i, closeAll: m, languageCode: h } = A(), f = F(), o = n === "accountFullscreen", [p, g] = w(""), [d, v] = w(l);
   y(() => {
-    !i && d && o && m(), v(i);
-  }, [i]), y(() => {
-    (d === !0 && !o || !u && n === "account") && l("accountFullscreen");
-  }, [d, o, u, n, l]);
-  const { minimize: O, fullscreen: z, searchText: g, heading: j } = X(I), C = () => {
-    l(o ? "account" : "accountFullscreen");
-  }, E = (f) => {
-    var S;
-    (S = e.onSelectAccount) == null || S.call(e, f), m(), v(!1);
+    !l && d && o && m(), v(l);
+  }, [l]), y(() => {
+    (d === !0 && !o || !f && n === "account") && i("accountFullscreen");
+  }, [d, o, f, n, i]);
+  const { minimize: O, fullscreen: z, searchText: S, heading: j } = X(h), E = () => {
+    i(o ? "account" : "accountFullscreen");
+  }, k = (u) => {
+    var _;
+    (_ = e.onSelectAccount) == null || _.call(e, u), m(), v(!1);
   };
-  return t ? /* @__PURE__ */ a(P, { "aria-hidden": !0, "data-color": "neutral", className: c.spinner }) : /* @__PURE__ */ k("div", { className: _(r, c.accountSelector), children: [
-    o && /* @__PURE__ */ a(T, { "data-size": "md", level: 2, className: c.heading, children: j }),
+  return t ? /* @__PURE__ */ a(P, { "aria-hidden": !0, "data-color": "neutral", className: c.spinner }) : /* @__PURE__ */ C("div", { className: b(r, c.accountSelector), children: [
+    o && /* @__PURE__ */ a(H, { "data-size": "md", level: 2, className: c.heading, children: j }),
     /* @__PURE__ */ a("div", { className: c.searchSection, children: /* @__PURE__ */ a(
       M,
       {
-        name: g,
-        placeholder: g,
-        value: h,
-        onChange: (f) => p(f.target.value),
-        onClear: () => p(""),
+        name: S,
+        placeholder: S,
+        value: p,
+        onChange: (u) => g(u.target.value),
+        onClear: () => g(""),
         className: c.searchField
       }
     ) }),
     /* @__PURE__ */ a(
       "div",
       {
-        className: _(
+        className: b(
           c.accountMenu,
           o && c.fullScreen,
           e.isVirtualized && c.virtualized
@@ -94,20 +94,25 @@ const D = w((e, i) => {
           N,
           {
             ...e,
-            onSelectAccount: E,
+            onSelectAccount: k,
             keyboardEvents: !1,
-            search: { hidden: !0, name: "", value: h },
+            search: {
+              hidden: !0,
+              name: "",
+              value: p,
+              getResultsLabel: (u) => Y(u, h)
+            },
             scrollRefStyles: !o && e.isVirtualized ? { maxHeight: "calc(40vh)" } : void 0
           }
         )
       }
     ),
-    d !== !0 && u && /* @__PURE__ */ a(
+    d !== !0 && f && /* @__PURE__ */ a(
       R,
       {
         icon: o ? /* @__PURE__ */ a(D, { className: c.btnIcon, "aria-hidden": "true" }) : /* @__PURE__ */ a(V, { className: c.btnIcon, "aria-hidden": "true" }),
         variant: "text",
-        onClick: C,
+        onClick: E,
         children: o ? O : z
       }
     )
@@ -136,6 +141,9 @@ const D = w((e, i) => {
         heading: "Hvem vil du representere?"
       };
   }
+}, Y = (e, l) => {
+  const r = l === "nb" || l === "nn";
+  return e === 0 ? r ? "Ingen treff" : "No hits" : r ? `${e} treff` : e === 1 ? "1 hit" : `${e} hits`;
 };
 export {
   de as AccountSelector

package/dist/hooks/useAccountSelector.js

@@ -1,100 +1,105 @@
-import { jsx as E } from "react/jsx-runtime";
-import { useMemo as K } from "react";
+import { jsx as U } from "react/jsx-runtime";
+import { useMemo as W } from "react";
 import "../index-L8X2o7IH.js";
-import { IconButton as R } from "../components/Button/IconButton.js";
+import { IconButton as Y } from "../components/Button/IconButton.js";
 import "../components/RootProvider/RootProvider.js";
-import { useIsDesktop as U } from "./useIsDesktop.js";
+import { useIsDesktop as q } from "./useIsDesktop.js";
 import "../components/Snackbar/useSnackbar.js";
-import { formatDisplayName as $ } from "../functions/name/name.js";
-import { formatDate as W } from "../functions/date/date.js";
-import { S as Y, a as q } from "../HeartFill-CYSrJ_xK.js";
-const S = (t) => t === "Organization" ? "company" : "person", te = ({
+import { formatDisplayName as S } from "../functions/name/name.js";
+import { formatDate as J } from "../functions/date/date.js";
+import { S as Q, a as X } from "../HeartFill-CYSrJ_xK.js";
+const O = (t) => t === "Organization" ? "company" : "person", ro = ({
   partyListDTO: t = [],
-  favoriteAccountUuids: e,
-  currentAccountUuid: u,
+  favoriteAccountUuids: o,
+  currentAccountUuid: f,
   selfAccountUuid: m,
-  isLoading: f = !1,
+  isLoading: d = !1,
   onSelectAccount: _,
   isVirtualized: h = !1,
   onToggleFavorite: s,
-  languageCode: c
+  languageCode: r
 }) => {
-  const r = U(), [i, b, a] = K(() => {
+  const i = q(), [c, b, l] = W(() => {
     var A, N;
-    if (f || !t || !m)
+    if (d || !t || !m)
       return [[], {}, void 0];
-    const n = (o) => e == null ? void 0 : e.includes(o), l = D(c), I = t.find((o) => O(o.type) && o.partyUuid === m), z = t.filter((o) => O(o.type) && o.partyUuid !== m), B = t.filter((o) => J(o.type)), F = g(
-      c,
-      I,
+    const n = (e) => o == null ? void 0 : o.includes(e), a = F(r), I = r || "nb", z = (e, u) => e.name.localeCompare(u.name, I, {
+      sensitivity: "base",
+      ignorePunctuation: !0
+    }), B = t.find((e) => D(e.type) && e.partyUuid === m), P = [...t].filter((e) => D(e.type) && e.partyUuid !== m).sort(z), j = [...t].filter((e) => Z(e.type)).sort(z), H = g(
+      r,
+      B,
       "favorites",
-      u,
+      f,
       !1,
       s,
-      r,
+      i,
       void 0,
       !0
-    ), k = z == null ? void 0 : z.map(
-      (o) => g(
-        c,
-        o,
-        o.partyUuid,
-        u,
-        n(o.partyUuid),
+    ), k = P == null ? void 0 : P.map(
+      (e) => g(
+        r,
+        e,
+        e.partyUuid,
+        f,
+        n(e.partyUuid),
         s,
-        r
+        i
       )
     ), v = [];
-    for (const o of B) {
-      const d = g(
-        c,
-        o,
-        o.partyUuid,
-        u,
-        n(o.partyUuid),
+    for (const e of j) {
+      const u = g(
+        r,
+        e,
+        e.partyUuid,
+        f,
+        n(e.partyUuid),
         s,
-        r
+        i
       );
-      if (v.push(d), o.subunits && o.subunits.length > 0)
-        for (const P of o.subunits) {
-          const G = g(
-            c,
-            P,
-            o.partyUuid,
-            u,
-            n(P.partyUuid),
-            s,
+      if (v.push(u), e.subunits && e.subunits.length > 0) {
+        const K = [...e.subunits].sort(z);
+        for (const $ of K) {
+          const R = g(
             r,
-            o
+            $,
+            e.partyUuid,
+            f,
+            n($.partyUuid),
+            s,
+            i,
+            e
           );
-          v.push(G);
+          v.push(R);
         }
+      }
     }
-    const j = k.reduce((o, d) => (n(d.id) && o.push({ ...d, groupId: "favorites" }), o), []), H = v.reduce((o, d) => (n(d.id) && o.push({ ...d, groupId: "favorites" }), o), []), M = [...j, ...H], x = [F, ...M, ...k, ...v], V = x.find((o) => (o == null ? void 0 : o.selected) === !0), w = {
+    const M = k.reduce((e, u) => (n(u.id) && e.push({ ...u, groupId: "favorites" }), e), []), V = v.reduce((e, u) => (n(u.id) && e.push({ ...u, groupId: "favorites" }), e), []), w = [...M, ...V], x = [H, ...w, ...k, ...v], G = x.find((e) => (e == null ? void 0 : e.selected) === !0), E = {
       [((A = v[0]) == null ? void 0 : A.groupId) || "company"]: {
-        title: l.account_orgs,
+        title: a.account_orgs,
         divider: !0
       },
       [((N = k[0]) == null ? void 0 : N.groupId) || "person"]: {
-        title: l.account_persons,
+        title: a.account_persons,
         divider: !0
       },
       favorites: {
-        title: l.account_favorites,
+        title: a.account_favorites,
         divider: !0
       }
     };
-    return [x, w, V];
+    return [x, E, G];
   }, [
     t,
     m,
-    e,
-    u,
+    o,
     f,
+    d,
     s,
-    c,
-    r
+    r,
+    i
   ]);
-  return f || !t || !a ? {
+  return d || !t || !l ? {
     accountMenu: {
       items: [],
       groups: {},
@@ -103,72 +108,72 @@ const S = (t) => t === "Organization" ? "company" : "person", te = ({
       },
       currentAccount: void 0
     },
-    loading: f
+    loading: d
   } : {
     accountMenu: {
-      items: i,
+      items: c,
       groups: b,
       isVirtualized: h,
       onSelectAccount: _,
-      currentAccount: a
+      currentAccount: l
     },
     loading: !1
   };
-}, g = (t, e, u, m, f, _, h, s, c) => {
-  const r = S((e == null ? void 0 : e.type) ?? ""), i = D(t), b = $({
-    fullName: e == null ? void 0 : e.name,
-    type: r
-  }), a = s ? $({
+}, g = (t, o, f, m, d, _, h, s, r) => {
+  const i = O((o == null ? void 0 : o.type) ?? ""), c = F(t), b = S({
+    fullName: o == null ? void 0 : o.name,
+    type: i
+  }), l = s ? S({
     fullName: s == null ? void 0 : s.name,
-    type: S((s == null ? void 0 : s.type) ?? ""),
+    type: O((s == null ? void 0 : s.type) ?? ""),
     reverseNameOrder: !1
   }) : void 0;
   let n = "";
-  const l = r === "company" && s ? "subunit" : r;
-  switch (l) {
+  const a = i === "company" && s ? "subunit" : i;
+  switch (a) {
     case "company":
-      n = `${i.org_no}: ${e.organizationNumber}`;
+      n = `${c.org_no}: ${o.organizationNumber}`;
       break;
     case "person":
-      n = e != null && e.dateOfBirth ? `${i.birthdate}: ${W(e == null ? void 0 : e.dateOfBirth)}` : "";
+      n = o != null && o.dateOfBirth ? `${c.birthdate}: ${J(o == null ? void 0 : o.dateOfBirth)}` : "";
       break;
     case "subunit":
-      n = `↳ ${i.org_no}: ${e == null ? void 0 : e.organizationNumber}, ${i.subunit_of} ${a}`;
+      n = `↳ ${c.org_no}: ${o == null ? void 0 : o.organizationNumber}, ${c.subunit_of} ${l}`;
       break;
     default:
       n = "";
   }
   return {
-    id: e == null ? void 0 : e.partyUuid,
+    id: o == null ? void 0 : o.partyUuid,
     icon: {
       name: b,
-      type: r,
+      type: i,
       isParent: !s,
-      isDeleted: e == null ? void 0 : e.isDeleted,
-      colorKey: a ?? void 0
+      isDeleted: o == null ? void 0 : o.isDeleted,
+      colorKey: l ?? void 0
     },
     name: b,
     description: n,
-    groupId: u,
-    type: l,
-    selected: m === (e == null ? void 0 : e.partyUuid),
-    disabled: !!(e != null && e.onlyHierarchyElementWithNoAccess),
-    badge: c ? { label: i.you, color: "person" } : e.isDeleted && h ? { label: i.deleted, color: "neutral" } : void 0,
-    controls: !c && /* @__PURE__ */ E(
-      R,
+    groupId: f,
+    type: a,
+    selected: m === (o == null ? void 0 : o.partyUuid),
+    disabled: !!(o != null && o.onlyHierarchyElementWithNoAccess),
+    badge: r ? { label: c.you, color: "person" } : o.isDeleted && h ? { label: c.deleted, color: "neutral" } : void 0,
+    controls: !r && /* @__PURE__ */ U(
+      Y,
       {
         rounded: !0,
         variant: "text",
-        icon: f ? Y : q,
-        iconAltText: f ? i.remove_from_favorites : i.add_to_favorites,
+        icon: d ? Q : X,
+        iconAltText: d ? c.remove_from_favorites : c.add_to_favorites,
         onClick: (I) => {
-          _ && (I.stopPropagation(), _(e == null ? void 0 : e.partyUuid));
+          _ && (I.stopPropagation(), _(o == null ? void 0 : o.partyUuid));
         },
         size: "xs"
       }
     )
   };
-}, J = (t) => t === "Organization", O = (t) => t === "Person" || t === "SelfIdentified", D = (t) => {
+}, Z = (t) => t === "Organization", D = (t) => t === "Person" || t === "SelfIdentified", F = (t) => {
   switch (t) {
     case "nn":
       return {
@@ -212,5 +217,5 @@ const S = (t) => t === "Organization" ? "company" : "person", te = ({
   }
 };
 export {
-  te as useAccountSelector
+  ro as useAccountSelector
 };

package/dist/types/lib/components/Settings/SettingsList.d.ts

@@ -1,6 +1,7 @@
+import { ReactNode } from 'react';
 import { SettingsItemProps } from '..';
 export interface SettingsGroupProps {
-    title?: string;
+    title?: string | ReactNode;
 }
 export interface SettingsListProps {
     items: SettingsItemProps[];

package/package.json

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