@altinn/altinn-components 0.66.1 → 0.67.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/assets/AccountSelector.css +1 -1
- package/dist/components/AccountSelector/AccountSelector.js +56 -55
- package/dist/components/GlobalHeader/GlobalHeader.js +10 -10
- package/dist/hooks/useAccountSelector.js +126 -119
- package/dist/types/lib/components/AccountSelector/AccountSelector.d.ts +9 -1
- package/dist/types/lib/components/AccountSelector/AccountSelector.stories.d.ts +6 -1
- package/dist/types/lib/components/Layout/AccountSelectorInLayout.stories.d.ts +49 -0
- package/dist/types/lib/components/Layout/Layout.stories.d.ts +0 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._accountSelector_ttjvg_1{display:flex;flex-direction:column;align-items:center;padding:1rem 0;max-width:1000px;margin:0 auto;--horizontal-padding: .7rem}._heading_ttjvg_11{margin-bottom:.5rem;width:100%;padding:0 var(--horizontal-padding)}._searchSection_ttjvg_17{position:sticky;z-index:2;top:0;width:100%;padding:1rem var(--horizontal-padding) .5rem;display:flex;align-items:center;gap:1rem;margin-bottom:.75rem;background-color:#fff}._searchField_ttjvg_30{width:50%}._accountMenu_ttjvg_34{height:fit-content;width:100%;overflow-y:auto;margin-bottom:1rem;padding:0 var(--horizontal-padding)}._accountMenu_ttjvg_34._virtualized_ttjvg_42{overflow-y:hidden}._btnIcon_ttjvg_47{font-size:1.5rem}._spinner_ttjvg_51{margin:auto;width:100%;overflow:hidden}@media(max-width:1023px){._accountSelector_ttjvg_1{--horizontal-padding: .1rem}._searchField_ttjvg_30{width:100%}._searchSection_ttjvg_17{flex-direction:column;align-items:stretch;gap:.5rem}}
|
|
@@ -1,96 +1,97 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { c as
|
|
3
|
-
import { useState as
|
|
4
|
-
import { AccountMenu as
|
|
5
|
-
import { r as
|
|
1
|
+
import { jsx as a, jsxs as p } from "react/jsx-runtime";
|
|
2
|
+
import { c as _ } from "../../index-p1eeF8LQ.js";
|
|
3
|
+
import { useState as i, useRef as R, useEffect as b } from "react";
|
|
4
|
+
import { AccountMenu as y } from "../Account/AccountMenu.js";
|
|
5
|
+
import { r as F, H as I } from "../../tooltip-Ct39-719.js";
|
|
6
6
|
import "../Typography/Link.js";
|
|
7
7
|
import "../Button/Button.js";
|
|
8
8
|
import "react-dom";
|
|
9
|
-
import { w as
|
|
9
|
+
import { w as E, S as M } from "../../ToolbarSearch-DFYx6gIb.js";
|
|
10
10
|
import "../GlobalMenu/GlobalMenuBase.js";
|
|
11
11
|
import "../Snackbar/useSnackbar.js";
|
|
12
|
-
import { Switch as
|
|
13
|
-
import '../../assets/AccountSelector.css';const
|
|
14
|
-
accountSelector:
|
|
15
|
-
heading:
|
|
16
|
-
searchSection:
|
|
17
|
-
searchField:
|
|
18
|
-
accountMenu:
|
|
19
|
-
virtualized:
|
|
20
|
-
spinner:
|
|
21
|
-
},
|
|
12
|
+
import { Switch as O } from "../Forms/Switch.js";
|
|
13
|
+
import '../../assets/AccountSelector.css';const V = "_accountSelector_ttjvg_1", W = "_heading_ttjvg_11", $ = "_searchSection_ttjvg_17", K = "_searchField_ttjvg_30", U = "_accountMenu_ttjvg_34", X = "_virtualized_ttjvg_42", q = "_spinner_ttjvg_51", c = {
|
|
14
|
+
accountSelector: V,
|
|
15
|
+
heading: W,
|
|
16
|
+
searchSection: $,
|
|
17
|
+
searchField: K,
|
|
18
|
+
accountMenu: U,
|
|
19
|
+
virtualized: X,
|
|
20
|
+
spinner: q
|
|
21
|
+
}, B = 5, oe = ({
|
|
22
22
|
accountMenu: e,
|
|
23
23
|
forceOpenFullScreen: n,
|
|
24
24
|
className: r,
|
|
25
|
-
loading:
|
|
25
|
+
loading: A,
|
|
26
26
|
showDeletedUnits: l,
|
|
27
|
-
onShowDeletedUnitsChange:
|
|
28
|
-
isFullScreen:
|
|
27
|
+
onShowDeletedUnitsChange: w,
|
|
28
|
+
isFullScreen: x,
|
|
29
|
+
accountCount: j
|
|
29
30
|
}) => {
|
|
30
|
-
const { closeAll: u, languageCode: d, currentId:
|
|
31
|
-
|
|
32
|
-
s && !f.current &&
|
|
33
|
-
}, [s]),
|
|
34
|
-
!n &&
|
|
31
|
+
const { closeAll: u, languageCode: d, currentId: k } = E(), s = k === "account" || !!n, h = (j ?? e.items.length) > B, g = l !== void 0, [m, v] = i(""), [C, S] = i(n), [N, T] = i(0), f = R(s);
|
|
32
|
+
b(() => {
|
|
33
|
+
s && !f.current && T((t) => t + 1), f.current = s;
|
|
34
|
+
}, [s]), b(() => {
|
|
35
|
+
!n && C && u(), S(n);
|
|
35
36
|
}, [n]);
|
|
36
|
-
const { searchText:
|
|
37
|
+
const { searchText: o, heading: z, switchLabel: L } = D(d), H = (t) => {
|
|
37
38
|
e.onSelectAccount?.(t), u(), S(!1);
|
|
38
39
|
};
|
|
39
|
-
return
|
|
40
|
-
/* @__PURE__ */
|
|
41
|
-
/* @__PURE__ */
|
|
42
|
-
/* @__PURE__ */
|
|
43
|
-
|
|
40
|
+
return A ? /* @__PURE__ */ a(F, { "aria-hidden": !0, "data-color": "neutral", className: c.spinner }) : /* @__PURE__ */ p("div", { className: _(r, c.accountSelector), children: [
|
|
41
|
+
/* @__PURE__ */ a(I, { "data-size": "sm", level: 2, className: c.heading, id: "account-selector-heading", children: z }),
|
|
42
|
+
(h || g) && /* @__PURE__ */ p("div", { className: c.searchSection, children: [
|
|
43
|
+
h && /* @__PURE__ */ a(
|
|
44
|
+
M,
|
|
44
45
|
{
|
|
45
46
|
size: "sm",
|
|
46
47
|
"aria-labelledby": "account-selector-heading",
|
|
47
|
-
label:
|
|
48
|
+
label: o,
|
|
48
49
|
hideLabel: !0,
|
|
49
|
-
name:
|
|
50
|
-
placeholder:
|
|
51
|
-
value:
|
|
52
|
-
onChange: (t) =>
|
|
53
|
-
onClear: () =>
|
|
54
|
-
className:
|
|
50
|
+
name: o,
|
|
51
|
+
placeholder: o,
|
|
52
|
+
value: m,
|
|
53
|
+
onChange: (t) => v(t.target.value),
|
|
54
|
+
onClear: () => v(""),
|
|
55
|
+
className: c.searchField
|
|
55
56
|
}
|
|
56
57
|
),
|
|
57
|
-
|
|
58
|
-
|
|
58
|
+
g && /* @__PURE__ */ a(
|
|
59
|
+
O,
|
|
59
60
|
{
|
|
60
61
|
size: "sm",
|
|
61
62
|
checked: l,
|
|
62
|
-
onChange: (t) =>
|
|
63
|
-
label:
|
|
63
|
+
onChange: (t) => w?.(t.target.checked),
|
|
64
|
+
label: L
|
|
64
65
|
}
|
|
65
66
|
)
|
|
66
67
|
] }),
|
|
67
|
-
/* @__PURE__ */
|
|
68
|
+
/* @__PURE__ */ a(
|
|
68
69
|
"div",
|
|
69
70
|
{
|
|
70
|
-
className:
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
e.virtualized &&
|
|
71
|
+
className: _(
|
|
72
|
+
c.accountMenu,
|
|
73
|
+
x && c.fullScreen,
|
|
74
|
+
e.virtualized && c.virtualized
|
|
74
75
|
),
|
|
75
|
-
children: /* @__PURE__ */
|
|
76
|
-
|
|
76
|
+
children: /* @__PURE__ */ a(
|
|
77
|
+
y,
|
|
77
78
|
{
|
|
78
79
|
...e,
|
|
79
|
-
onSelectAccount:
|
|
80
|
+
onSelectAccount: H,
|
|
80
81
|
keyboardEvents: !1,
|
|
81
82
|
search: {
|
|
82
83
|
hidden: !0,
|
|
83
84
|
name: "",
|
|
84
|
-
value:
|
|
85
|
-
getResultsLabel: (t) =>
|
|
85
|
+
value: m,
|
|
86
|
+
getResultsLabel: (t) => G(t, d)
|
|
86
87
|
}
|
|
87
88
|
},
|
|
88
|
-
|
|
89
|
+
N
|
|
89
90
|
)
|
|
90
91
|
}
|
|
91
92
|
)
|
|
92
93
|
] });
|
|
93
|
-
},
|
|
94
|
+
}, D = (e) => {
|
|
94
95
|
switch (e) {
|
|
95
96
|
case "nn":
|
|
96
97
|
return {
|
|
@@ -111,10 +112,10 @@ import '../../assets/AccountSelector.css';const M = "_accountSelector_stjza_1",
|
|
|
111
112
|
switchLabel: "Vis slettede"
|
|
112
113
|
};
|
|
113
114
|
}
|
|
114
|
-
},
|
|
115
|
+
}, G = (e, n) => {
|
|
115
116
|
const r = n === "nb" || n === "nn";
|
|
116
117
|
return e === 0 ? r ? "Ingen treff" : "No hits" : r ? `${e} treff` : e === 1 ? "1 hit" : `${e} hits`;
|
|
117
118
|
};
|
|
118
119
|
export {
|
|
119
|
-
|
|
120
|
+
oe as AccountSelector
|
|
120
121
|
};
|
|
@@ -3,13 +3,13 @@ import { jsx as n, jsxs as i, Fragment as O } from "react/jsx-runtime";
|
|
|
3
3
|
import { useState as v } from "react";
|
|
4
4
|
import { useIsDesktop as F } from "../../hooks/useIsDesktop.js";
|
|
5
5
|
import { AccountSelector as b } from "../AccountSelector/AccountSelector.js";
|
|
6
|
-
import { GlobalMenu as
|
|
6
|
+
import { GlobalMenu as C } from "../GlobalMenu/GlobalMenu.js";
|
|
7
7
|
import "../../index-p1eeF8LQ.js";
|
|
8
8
|
import "../../tooltip-Ct39-719.js";
|
|
9
9
|
import "../Typography/Link.js";
|
|
10
10
|
import "../Button/Button.js";
|
|
11
11
|
import "react-dom";
|
|
12
|
-
import { w
|
|
12
|
+
import { w } from "../../ToolbarSearch-DFYx6gIb.js";
|
|
13
13
|
import { GlobalMenuButton as D } from "./GlobalMenuButton.js";
|
|
14
14
|
import { GlobalAccountButton as M } from "./GlobalAccountButton.js";
|
|
15
15
|
import "../Snackbar/useSnackbar.js";
|
|
@@ -31,11 +31,11 @@ import '../../assets/GlobalHeader.css';const T = "_header_17ppp_1", k = "_contai
|
|
|
31
31
|
badge: f,
|
|
32
32
|
onLoginClick: g
|
|
33
33
|
}) => {
|
|
34
|
-
const { currentId: o, toggleId: l, closeAll: a } =
|
|
34
|
+
const { currentId: o, toggleId: l, closeAll: a } = w(), h = () => {
|
|
35
35
|
o !== "account" && window.scrollTo({ top: 0, behavior: "instant" }), l("account");
|
|
36
36
|
}, _ = () => {
|
|
37
37
|
l("menu");
|
|
38
|
-
},
|
|
38
|
+
}, p = o === "account" || e?.forceOpenFullScreen || !1, [c, x] = v(!1), A = F();
|
|
39
39
|
return /* @__PURE__ */ n("header", { className: t.header, "data-current-id": o, children: /* @__PURE__ */ n("div", { className: t.container, children: /* @__PURE__ */ i("nav", { className: t.nav, "aria-label": "hovednavigasjon", children: [
|
|
40
40
|
/* @__PURE__ */ n(I, { ...u, badge: f, className: t.logo }),
|
|
41
41
|
e && /* @__PURE__ */ i(O, { children: [
|
|
@@ -44,7 +44,7 @@ import '../../assets/GlobalHeader.css';const T = "_header_17ppp_1", k = "_contai
|
|
|
44
44
|
{
|
|
45
45
|
currentAccount: e.accountMenu?.currentAccount,
|
|
46
46
|
onClick: e.accountMenu?.currentAccount ? h : g,
|
|
47
|
-
expanded:
|
|
47
|
+
expanded: p,
|
|
48
48
|
loading: e.loading,
|
|
49
49
|
disabled: e.forceOpenFullScreen
|
|
50
50
|
}
|
|
@@ -53,12 +53,12 @@ import '../../assets/GlobalHeader.css';const T = "_header_17ppp_1", k = "_contai
|
|
|
53
53
|
N,
|
|
54
54
|
{
|
|
55
55
|
id: "header-account",
|
|
56
|
-
open:
|
|
56
|
+
open: p,
|
|
57
57
|
onClose: a,
|
|
58
58
|
closedBy: e?.forceOpenFullScreen ? "none" : "any",
|
|
59
|
-
expanded: e?.forceOpenFullScreen ||
|
|
60
|
-
onToggle: () => x(!
|
|
61
|
-
expandable: e.accountMenu.items.length > H,
|
|
59
|
+
expanded: e?.forceOpenFullScreen || c,
|
|
60
|
+
onToggle: () => x(!c),
|
|
61
|
+
expandable: (e.accountCount ?? e.accountMenu.items.length) > H,
|
|
62
62
|
children: /* @__PURE__ */ n(b, { ...e, forceOpenFullScreen: e.forceOpenFullScreen })
|
|
63
63
|
}
|
|
64
64
|
)
|
|
@@ -79,7 +79,7 @@ import '../../assets/GlobalHeader.css';const T = "_header_17ppp_1", k = "_contai
|
|
|
79
79
|
}
|
|
80
80
|
),
|
|
81
81
|
children: /* @__PURE__ */ n(
|
|
82
|
-
|
|
82
|
+
C,
|
|
83
83
|
{
|
|
84
84
|
...r,
|
|
85
85
|
menu: A ? s || r?.menu : d || r?.menu,
|
|
@@ -1,112 +1,118 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useRef as
|
|
1
|
+
import { jsx as F } from "react/jsx-runtime";
|
|
2
|
+
import { useRef as R, useMemo as h } from "react";
|
|
3
3
|
import "../index-p1eeF8LQ.js";
|
|
4
4
|
import "../tooltip-Ct39-719.js";
|
|
5
5
|
import "../ToolbarSearch-DFYx6gIb.js";
|
|
6
6
|
import "../components/Typography/Link.js";
|
|
7
|
-
import { Button as
|
|
7
|
+
import { Button as q } from "../components/Button/Button.js";
|
|
8
8
|
import "react-dom";
|
|
9
|
-
import { useIsDesktop as
|
|
9
|
+
import { useIsDesktop as J } from "./useIsDesktop.js";
|
|
10
10
|
import "../components/GlobalMenu/GlobalMenuBase.js";
|
|
11
11
|
import "../components/Snackbar/useSnackbar.js";
|
|
12
|
-
import { formatDisplayName as
|
|
13
|
-
import { formatDate as
|
|
14
|
-
import { formatOrgNo as
|
|
15
|
-
import { a as
|
|
16
|
-
const H = (
|
|
17
|
-
partyListDTO:
|
|
18
|
-
favoriteAccountUuids:
|
|
12
|
+
import { formatDisplayName as j } from "../functions/name/name.js";
|
|
13
|
+
import { formatDate as K } from "../functions/date/date.js";
|
|
14
|
+
import { formatOrgNo as w } from "../functions/orgno/orgno.js";
|
|
15
|
+
import { a as Q, S as X } from "../HeartFill-CbQmSZr5.js";
|
|
16
|
+
const H = (e) => e === "Organization" ? "company" : "person", pt = ({
|
|
17
|
+
partyListDTO: e = [],
|
|
18
|
+
favoriteAccountUuids: o,
|
|
19
19
|
currentAccountUuid: f,
|
|
20
|
-
selfAccountUuid:
|
|
21
|
-
isLoading:
|
|
20
|
+
selfAccountUuid: d,
|
|
21
|
+
isLoading: m = !1,
|
|
22
22
|
onSelectAccount: N,
|
|
23
23
|
virtualized: p = !1,
|
|
24
|
-
onToggleFavorite:
|
|
25
|
-
languageCode:
|
|
26
|
-
showDeletedUnits:
|
|
27
|
-
onShowDeletedUnitsChange:
|
|
24
|
+
onToggleFavorite: I,
|
|
25
|
+
languageCode: s,
|
|
26
|
+
showDeletedUnits: c,
|
|
27
|
+
onShowDeletedUnitsChange: g
|
|
28
28
|
}) => {
|
|
29
|
-
const v =
|
|
30
|
-
|
|
31
|
-
const
|
|
32
|
-
|
|
33
|
-
const y =
|
|
34
|
-
if (!
|
|
35
|
-
const
|
|
29
|
+
const v = J(), u = R(I);
|
|
30
|
+
u.current = I;
|
|
31
|
+
const _ = R(f);
|
|
32
|
+
_.current = f;
|
|
33
|
+
const y = h(() => {
|
|
34
|
+
if (!e || e.length === 0) return [];
|
|
35
|
+
const i = s || "nb", r = (n, l) => n.name.localeCompare(l.name, i, {
|
|
36
36
|
sensitivity: "base",
|
|
37
37
|
ignorePunctuation: !0
|
|
38
38
|
});
|
|
39
|
-
return [...
|
|
40
|
-
}, [
|
|
41
|
-
|
|
39
|
+
return [...e].sort(r);
|
|
40
|
+
}, [e, s]), $ = h(
|
|
41
|
+
() => e.some((i) => i.isDeleted || i.subunits?.some((r) => r.isDeleted)),
|
|
42
|
+
[e]
|
|
43
|
+
), V = h(
|
|
44
|
+
() => e.reduce((i, r) => i + 1 + (r.subunits?.length ?? 0), 0),
|
|
45
|
+
[e]
|
|
46
|
+
), [D, W] = h(() => {
|
|
47
|
+
if (m || !y.length || !d)
|
|
42
48
|
return [
|
|
43
49
|
{ selfAccountItem: void 0, peopleAccountItems: [], organizationAccountItems: [], favoriteAccountItems: [] },
|
|
44
50
|
{}
|
|
45
51
|
];
|
|
46
|
-
const
|
|
52
|
+
const i = new Set(o), r = (t) => i.has(t), n = (t) => !t.isDeleted || c !== !1 || t.partyUuid === _.current, l = M(s), A = s || "nb", G = (t, a) => t.name.localeCompare(a.name, A, {
|
|
47
53
|
sensitivity: "base",
|
|
48
54
|
ignorePunctuation: !0
|
|
49
55
|
});
|
|
50
|
-
let
|
|
51
|
-
const k = [],
|
|
56
|
+
let x;
|
|
57
|
+
const k = [], U = [], S = [];
|
|
52
58
|
for (const t of y)
|
|
53
|
-
if (
|
|
54
|
-
if (t.partyUuid ===
|
|
55
|
-
|
|
56
|
-
|
|
59
|
+
if (T(t.type)) {
|
|
60
|
+
if (t.partyUuid === d)
|
|
61
|
+
x = z(
|
|
62
|
+
s,
|
|
57
63
|
t,
|
|
58
64
|
"favorites",
|
|
59
65
|
!1,
|
|
60
|
-
|
|
66
|
+
u,
|
|
61
67
|
v,
|
|
62
68
|
void 0,
|
|
63
69
|
!0
|
|
64
70
|
);
|
|
65
|
-
else if (
|
|
66
|
-
const
|
|
67
|
-
|
|
71
|
+
else if (n(t) || r(t.partyUuid)) {
|
|
72
|
+
const a = z(
|
|
73
|
+
s,
|
|
68
74
|
t,
|
|
69
75
|
t.partyUuid,
|
|
70
|
-
|
|
71
|
-
|
|
76
|
+
r(t.partyUuid),
|
|
77
|
+
u,
|
|
72
78
|
v
|
|
73
79
|
);
|
|
74
|
-
k.push(
|
|
80
|
+
k.push(a), r(t.partyUuid) && S.push({ ...a, groupId: "favorites" });
|
|
75
81
|
}
|
|
76
|
-
} else if (
|
|
77
|
-
if (
|
|
78
|
-
const
|
|
79
|
-
|
|
82
|
+
} else if (C(t.type)) {
|
|
83
|
+
if (n(t) || r(t.partyUuid)) {
|
|
84
|
+
const a = z(
|
|
85
|
+
s,
|
|
80
86
|
t,
|
|
81
87
|
t.partyUuid,
|
|
82
|
-
|
|
83
|
-
|
|
88
|
+
r(t.partyUuid),
|
|
89
|
+
u,
|
|
84
90
|
v
|
|
85
91
|
);
|
|
86
|
-
|
|
92
|
+
n(t) && U.push(a), r(t.partyUuid) && S.push({ ...a, groupId: "favorites" });
|
|
87
93
|
}
|
|
88
94
|
if (t.subunits && t.subunits.length > 0) {
|
|
89
|
-
const
|
|
90
|
-
for (const b of
|
|
91
|
-
if (
|
|
92
|
-
const
|
|
93
|
-
|
|
95
|
+
const a = [...t.subunits].sort(G);
|
|
96
|
+
for (const b of a)
|
|
97
|
+
if (n(b) || r(b.partyUuid)) {
|
|
98
|
+
const O = z(
|
|
99
|
+
s,
|
|
94
100
|
b,
|
|
95
101
|
t.partyUuid,
|
|
96
|
-
|
|
97
|
-
|
|
102
|
+
r(b.partyUuid),
|
|
103
|
+
u,
|
|
98
104
|
v,
|
|
99
105
|
t
|
|
100
106
|
);
|
|
101
|
-
|
|
102
|
-
...
|
|
107
|
+
n(b) && U.push(O), r(b.partyUuid) && S.push({
|
|
108
|
+
...O,
|
|
103
109
|
groupId: "favorites"
|
|
104
110
|
});
|
|
105
111
|
}
|
|
106
112
|
}
|
|
107
113
|
}
|
|
108
|
-
const
|
|
109
|
-
[
|
|
114
|
+
const Y = {
|
|
115
|
+
[U[0]?.groupId || "company"]: {
|
|
110
116
|
title: l.account_orgs,
|
|
111
117
|
divider: !0
|
|
112
118
|
},
|
|
@@ -119,23 +125,23 @@ const H = (o) => o === "Organization" ? "company" : "person", dt = ({
|
|
|
119
125
|
divider: !0
|
|
120
126
|
}
|
|
121
127
|
};
|
|
122
|
-
return [{ selfAccountItem:
|
|
123
|
-
}, [y,
|
|
124
|
-
const { selfAccountItem:
|
|
125
|
-
return
|
|
126
|
-
}, [
|
|
128
|
+
return [{ selfAccountItem: x, peopleAccountItems: k, organizationAccountItems: U, favoriteAccountItems: S }, Y];
|
|
129
|
+
}, [y, d, o, m, s, v, c]), P = h(() => {
|
|
130
|
+
const { selfAccountItem: i, peopleAccountItems: r, organizationAccountItems: n, favoriteAccountItems: l } = D;
|
|
131
|
+
return i ? [i, ...l, ...r, ...n] : [];
|
|
132
|
+
}, [D]), [E, B] = h(() => {
|
|
127
133
|
if (P.length === 0)
|
|
128
134
|
return [[], void 0];
|
|
129
|
-
let
|
|
130
|
-
return [P.map((
|
|
131
|
-
if (f ===
|
|
132
|
-
const
|
|
133
|
-
return
|
|
135
|
+
let i;
|
|
136
|
+
return [P.map((n) => {
|
|
137
|
+
if (f === n.id) {
|
|
138
|
+
const A = { ...n, selected: !0 };
|
|
139
|
+
return i = A, A;
|
|
134
140
|
}
|
|
135
|
-
return
|
|
136
|
-
}),
|
|
141
|
+
return n.selected ? { ...n, selected: !1 } : n;
|
|
142
|
+
}), i];
|
|
137
143
|
}, [P, f]);
|
|
138
|
-
return
|
|
144
|
+
return m || !e || !B ? {
|
|
139
145
|
accountMenu: {
|
|
140
146
|
items: [],
|
|
141
147
|
groups: {},
|
|
@@ -144,89 +150,90 @@ const H = (o) => o === "Organization" ? "company" : "person", dt = ({
|
|
|
144
150
|
},
|
|
145
151
|
currentAccount: void 0
|
|
146
152
|
},
|
|
147
|
-
loading:
|
|
153
|
+
loading: m
|
|
148
154
|
} : {
|
|
149
155
|
accountMenu: {
|
|
150
|
-
items:
|
|
151
|
-
groups:
|
|
156
|
+
items: E,
|
|
157
|
+
groups: W,
|
|
152
158
|
virtualized: p,
|
|
153
159
|
onSelectAccount: N,
|
|
154
|
-
currentAccount:
|
|
160
|
+
currentAccount: B
|
|
155
161
|
},
|
|
156
162
|
loading: !1,
|
|
157
|
-
showDeletedUnits:
|
|
158
|
-
onShowDeletedUnitsChange:
|
|
163
|
+
showDeletedUnits: $ ? c : void 0,
|
|
164
|
+
onShowDeletedUnitsChange: $ ? g : void 0,
|
|
165
|
+
accountCount: V
|
|
159
166
|
};
|
|
160
|
-
},
|
|
161
|
-
partyUuid:
|
|
162
|
-
isFavorite:
|
|
167
|
+
}, Z = ({
|
|
168
|
+
partyUuid: e,
|
|
169
|
+
isFavorite: o,
|
|
163
170
|
toggleFavoriteRef: f,
|
|
164
|
-
texts:
|
|
165
|
-
}) => /* @__PURE__ */
|
|
166
|
-
|
|
171
|
+
texts: d
|
|
172
|
+
}) => /* @__PURE__ */ F(
|
|
173
|
+
q,
|
|
167
174
|
{
|
|
168
175
|
rounded: !0,
|
|
169
176
|
variant: "ghost",
|
|
170
|
-
"aria-label":
|
|
171
|
-
onClick: (
|
|
172
|
-
|
|
177
|
+
"aria-label": o ? d.remove_from_favorites : d.add_to_favorites,
|
|
178
|
+
onClick: (m) => {
|
|
179
|
+
m.stopPropagation(), f?.current?.(e);
|
|
173
180
|
},
|
|
174
181
|
size: "xs",
|
|
175
|
-
children:
|
|
182
|
+
children: o ? /* @__PURE__ */ F(Q, {}) : /* @__PURE__ */ F(X, {})
|
|
176
183
|
}
|
|
177
|
-
),
|
|
178
|
-
const
|
|
179
|
-
fullName:
|
|
180
|
-
type:
|
|
181
|
-
}), v = p ?
|
|
184
|
+
), z = (e, o, f, d, m, N, p, I) => {
|
|
185
|
+
const s = H(o?.type ?? ""), c = M(e), g = j({
|
|
186
|
+
fullName: o?.name,
|
|
187
|
+
type: s
|
|
188
|
+
}), v = p ? j({
|
|
182
189
|
fullName: p?.name,
|
|
183
190
|
type: H(p?.type ?? ""),
|
|
184
191
|
reverseNameOrder: !1
|
|
185
192
|
}) : void 0;
|
|
186
|
-
let
|
|
187
|
-
const
|
|
188
|
-
switch (
|
|
193
|
+
let u = "";
|
|
194
|
+
const _ = s === "company" && p ? "subunit" : s;
|
|
195
|
+
switch (_) {
|
|
189
196
|
case "company":
|
|
190
|
-
|
|
197
|
+
u = `${c.org_no}. ${w(o.organizationNumber)}`;
|
|
191
198
|
break;
|
|
192
199
|
case "person":
|
|
193
|
-
|
|
200
|
+
u = o?.dateOfBirth ? `${c.birthdate}: ${K(o?.dateOfBirth)}` : "";
|
|
194
201
|
break;
|
|
195
202
|
case "subunit":
|
|
196
|
-
|
|
203
|
+
u = `↳ ${c.org_no}. ${w(o?.organizationNumber)}, ${c.subunit_of} ${v}`;
|
|
197
204
|
break;
|
|
198
205
|
default:
|
|
199
|
-
|
|
206
|
+
u = "";
|
|
200
207
|
}
|
|
201
|
-
const y =
|
|
202
|
-
|
|
208
|
+
const y = I ? void 0 : /* @__PURE__ */ F(
|
|
209
|
+
Z,
|
|
203
210
|
{
|
|
204
|
-
partyUuid:
|
|
205
|
-
isFavorite:
|
|
206
|
-
toggleFavoriteRef:
|
|
207
|
-
texts:
|
|
211
|
+
partyUuid: o?.partyUuid,
|
|
212
|
+
isFavorite: d,
|
|
213
|
+
toggleFavoriteRef: m,
|
|
214
|
+
texts: c
|
|
208
215
|
}
|
|
209
216
|
);
|
|
210
217
|
return {
|
|
211
|
-
id:
|
|
218
|
+
id: o?.partyUuid,
|
|
212
219
|
icon: {
|
|
213
|
-
name:
|
|
214
|
-
type:
|
|
220
|
+
name: g,
|
|
221
|
+
type: s,
|
|
215
222
|
isParent: !p,
|
|
216
|
-
isDeleted:
|
|
223
|
+
isDeleted: o?.isDeleted
|
|
217
224
|
},
|
|
218
|
-
name:
|
|
219
|
-
description:
|
|
220
|
-
searchWords:
|
|
225
|
+
name: g,
|
|
226
|
+
description: u,
|
|
227
|
+
searchWords: _ === "person" ? [g, o?.dateOfBirth ?? ""] : [g, o?.organizationNumber ?? ""],
|
|
221
228
|
groupId: f,
|
|
222
|
-
type:
|
|
229
|
+
type: _,
|
|
223
230
|
selected: !1,
|
|
224
|
-
disabled: !!
|
|
225
|
-
badge:
|
|
231
|
+
disabled: !!o?.onlyHierarchyElementWithNoAccess,
|
|
232
|
+
badge: I ? { label: c.you, color: "person" } : o.isDeleted && N ? { label: c.deleted, color: "neutral" } : void 0,
|
|
226
233
|
controls: y
|
|
227
234
|
};
|
|
228
|
-
},
|
|
229
|
-
switch (
|
|
235
|
+
}, C = (e) => e === "Organization", T = (e) => e === "Person" || e === "SelfIdentified", M = (e) => {
|
|
236
|
+
switch (e) {
|
|
230
237
|
case "nn":
|
|
231
238
|
return {
|
|
232
239
|
account_orgs: "Virksemder",
|
|
@@ -269,5 +276,5 @@ const H = (o) => o === "Organization" ? "company" : "person", dt = ({
|
|
|
269
276
|
}
|
|
270
277
|
};
|
|
271
278
|
export {
|
|
272
|
-
|
|
279
|
+
pt as useAccountSelector
|
|
273
280
|
};
|
|
@@ -13,5 +13,13 @@ export interface AccountSelectorProps {
|
|
|
13
13
|
onShowDeletedUnitsChange?: (newValue: boolean) => void;
|
|
14
14
|
/** Show in fullscreen*/
|
|
15
15
|
isFullScreen?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* Total number of accounts the user has, including deleted ones. Used to
|
|
18
|
+
* decide whether to show the search field, so the decision stays stable when
|
|
19
|
+
* the user toggles deleted accounts on/off (toggling only changes how many
|
|
20
|
+
* accounts are currently listed, not how many the user actually has).
|
|
21
|
+
* Falls back to the number of currently listed accounts when not provided.
|
|
22
|
+
*/
|
|
23
|
+
accountCount?: number;
|
|
16
24
|
}
|
|
17
|
-
export declare const AccountSelector: ({ accountMenu, forceOpenFullScreen, className, loading, showDeletedUnits, onShowDeletedUnitsChange, isFullScreen, }: AccountSelectorProps) => import("react/jsx-runtime").JSX.Element;
|
|
25
|
+
export declare const AccountSelector: ({ accountMenu, forceOpenFullScreen, className, loading, showDeletedUnits, onShowDeletedUnitsChange, isFullScreen, accountCount, }: AccountSelectorProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { AccountSelectorProps } from './AccountSelector';
|
|
2
2
|
declare const meta: {
|
|
3
3
|
title: string;
|
|
4
|
-
component: ({ accountMenu, forceOpenFullScreen, className, loading, showDeletedUnits, onShowDeletedUnitsChange, isFullScreen, }: AccountSelectorProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
component: ({ accountMenu, forceOpenFullScreen, className, loading, showDeletedUnits, onShowDeletedUnitsChange, isFullScreen, accountCount, }: AccountSelectorProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
tags: string[];
|
|
6
6
|
parameters: {
|
|
7
7
|
layout: string;
|
|
@@ -27,3 +27,8 @@ export default meta;
|
|
|
27
27
|
export declare const WithAccounts: (args: AccountSelectorProps) => import("react/jsx-runtime").JSX.Element;
|
|
28
28
|
export declare const NoAccounts: (args: AccountSelectorProps) => import("react/jsx-runtime").JSX.Element;
|
|
29
29
|
export declare const Loading: (args: AccountSelectorProps) => import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
export declare const UsingUseAccountHook: (args: AccountSelectorProps) => import("react/jsx-runtime").JSX.Element;
|
|
31
|
+
export declare const ThreeAccounts: (args: AccountSelectorProps) => import("react/jsx-runtime").JSX.Element;
|
|
32
|
+
export declare const FourAccountsOneDeleted: (args: AccountSelectorProps) => import("react/jsx-runtime").JSX.Element;
|
|
33
|
+
export declare const SixAccountsThreeDeleted: (args: AccountSelectorProps) => import("react/jsx-runtime").JSX.Element;
|
|
34
|
+
export declare const TenAccountsNoneDeleted: (args: AccountSelectorProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { LayoutProps } from '../';
|
|
2
|
+
interface LayoutStoryArgs extends LayoutProps {
|
|
3
|
+
forceOpenFullScreen?: boolean | undefined;
|
|
4
|
+
}
|
|
5
|
+
/**
|
|
6
|
+
* AccountSelector demos rendered inside a full Layout, so you can see how the
|
|
7
|
+
* selector behaves alongside the header, sidebar and global menu. The same
|
|
8
|
+
* cases are available as standalone-component stories under Layout/AccountSelector.
|
|
9
|
+
*/
|
|
10
|
+
declare const meta: {
|
|
11
|
+
title: string;
|
|
12
|
+
component: ({ banner, color, theme, header, footer, sidebar, content, children, skipLink, breadcrumbs, }: LayoutProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
parameters: {
|
|
14
|
+
layout: string;
|
|
15
|
+
};
|
|
16
|
+
args: {
|
|
17
|
+
theme: "subtle";
|
|
18
|
+
skipLink: {
|
|
19
|
+
href: string;
|
|
20
|
+
color: import('..').Color;
|
|
21
|
+
size: import('..').Size;
|
|
22
|
+
children: string;
|
|
23
|
+
};
|
|
24
|
+
header: import('..').GlobalHeaderProps;
|
|
25
|
+
footer: import('..').FooterProps;
|
|
26
|
+
sidebar: {
|
|
27
|
+
menu: import('..').MenuProps;
|
|
28
|
+
};
|
|
29
|
+
children: import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
color: "company";
|
|
31
|
+
forceOpenFullScreen: undefined;
|
|
32
|
+
};
|
|
33
|
+
argTypes: {
|
|
34
|
+
color: {
|
|
35
|
+
control: "select";
|
|
36
|
+
options: string[];
|
|
37
|
+
};
|
|
38
|
+
forceOpenFullScreen: {
|
|
39
|
+
control: "select";
|
|
40
|
+
options: (boolean | undefined)[];
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
};
|
|
44
|
+
export default meta;
|
|
45
|
+
export declare const UsingUseAccountHook: (args: LayoutStoryArgs) => import("react/jsx-runtime").JSX.Element;
|
|
46
|
+
export declare const ThreeAccounts: (args: LayoutStoryArgs) => import("react/jsx-runtime").JSX.Element;
|
|
47
|
+
export declare const FourAccountsOneDeleted: (args: LayoutStoryArgs) => import("react/jsx-runtime").JSX.Element;
|
|
48
|
+
export declare const SixAccountsThreeDeleted: (args: LayoutStoryArgs) => import("react/jsx-runtime").JSX.Element;
|
|
49
|
+
export declare const TenAccountsNoneDeleted: (args: LayoutStoryArgs) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -38,7 +38,6 @@ declare const meta: {
|
|
|
38
38
|
};
|
|
39
39
|
export default meta;
|
|
40
40
|
export declare const Preview: (args: LayoutStoryArgs) => import("react/jsx-runtime").JSX.Element;
|
|
41
|
-
export declare const UsingUseAccountHook: (args: LayoutStoryArgs) => import("react/jsx-runtime").JSX.Element;
|
|
42
41
|
export declare const LogInView: (args: LayoutStoryArgs) => import("react/jsx-runtime").JSX.Element;
|
|
43
42
|
export declare const WithEnglishLanguage: (args: LayoutStoryArgs) => import("react/jsx-runtime").JSX.Element;
|
|
44
43
|
export declare const StickySidebar: (args: LayoutStoryArgs) => import("react/jsx-runtime").JSX.Element;
|