@altinn/altinn-components 0.55.3 → 0.55.5
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/MenuItem.css +1 -1
- package/dist/components/Menu/MenuItem.js +64 -64
- package/dist/components/Menu/useMenuSearch.js +14 -13
- package/dist/components/Toolbar/ToolbarFilterAddMenu.js +11 -10
- package/dist/components/Toolbar/ToolbarFilterMenu.js +45 -42
- package/dist/types/lib/components/Toolbar/ToolbarFilterMenu.d.ts +2 -1
- package/dist/types/lib/components/Toolbar/useFilter.d.ts +9 -3
- package/package.json +1 -1
package/dist/assets/MenuItem.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._item_144gk_3{--checkmark-opacity: .5;appearance:none;background-color:transparent;border:none;-webkit-user-select:none;user-select:none;text-decoration:none;color:inherit;width:100%;display:flex;align-items:center;column-gap:.5rem;min-height:var(--dsc-item-height);padding-left:6px;padding-right:6px;overflow:hidden;--dsc-item-focus-outline: 2px solid black;--dsc-item-hover-pointer: pointer}._item_144gk_3[data-variant=default]{--dsc-item-background: var(--ds-color-surface-tinted);--dsc-item-background--hover: var(--ds-color-surface-hover);--dsc-item-background--active: var(--ds-color-surface-active);--dsc-icon-background: var(--ds-color-surface-tinted);--dsc-icon-color: var(--ds-color-text-default)}._item_144gk_3[data-variant=tinted]{--dsc-item-background: var(--ds-color-surface-default);--dsc-item-background--hover: var(--ds-color-surface-hover);--dsc-item-background--active: var(--ds-color-surface-default);--dsc-icon-background: var(--ds-color-surface-default)}._item_144gk_3[data-variant=tinted][data-size=lg]{--dsc-icon-background: var(--ds-color-base-default);--dsc-icon-color: var(--ds-color-base-contrast-default)}div._item_144gk_3[aria-disabled=true]{--dsc-item-focus-outline: none;--dsc-item-hover-pointer: default;--dsc-item-background--hover: var(--ds-color-background-default);--dsc-item-background--active: var(--ds-color-background-default)}._item_144gk_3:hover,._item_144gk_3[data-active=true]{background-color:var(--dsc-item-background--hover);cursor:var(--dsc-item-hover-pointer)}._item_144gk_3[data-active=true]{background-color:var(--dsc-item-background--hover);outline:var(--dsc-item-focus-outline)}._item_144gk_3[data-active=false]:focus-visible{outline:2px solid black}._item_144gk_3[aria-selected=true]{background-color:var(--dsc-item-background--active);--checkmark-opacity: 1}._item_144gk_3[aria-disabled=true]{background-color:transparent}._item_144gk_3{--dsc-description-size: 14px;--dsc-description-leading: 18px;--dsc-description-weight: normal;--dsc-title-weight: normal}._item_144gk_3[data-size=lg]{--dsc-item-height: 56px;--dsc-media-size: 44px;--dsc-icon-size: 28px;--dsc-title-size: 18px;--dsc-title-weight: 500}._item_144gk_3[data-size=md]{--dsc-item-height: 44px;--dsc-media-size: 32px;--dsc-icon-size: 24px;--dsc-title-size: 16px;--dsc-title-weight: normal}._item_144gk_3[data-size=sm]{--dsc-icon-background: transparent;--dsc-item-height: 36px;--dsc-media-size: 24px;--dsc-icon-size: 20px;--dsc-title-size: 16px;--dsc-title-weight: normal}._media_144gk_129{font-size:var(--dsc-media-size);min-width:var(--dsc-media-size);height:var(--dsc-media-size)}._media_144gk_129[data-variant=icon]{background-color:var(--dsc-icon-background);color:var(--dsc-icon-color);font-size:var(--dsc-icon-size);border-radius:5%}._media_144gk_129[data-variant=icon] svg{font-size:var(--dsc-icon-size);width:var(--dsc-icon-size);height:var(--dsc-icon-size)}._label_144gk_150{flex-grow:1;display:flex;flex-direction:column;font-size:var(--dsc-title-size);font-weight:var(--dsc-title-weight);line-height:1.25;margin-right:.75em;margin-top:6px;margin-bottom:6px;min-width:0;overflow-wrap:anywhere;text-wrap:initial}._title_144gk_165{font-size:var(--dsc-title-size)}._description_144gk_169{font-size:var(--dsc-description-size);font-weight:var(--dsc-description-weight);line-height:var(--dsc-description-leading)}._title_144gk_165 mark,._description_144gk_169 mark{background-color:transparent;text-decoration:underline}._count_144gk_181{font-style:normal;font-size:smaller;vertical-align:baseline;margin:0 .25em;color:var(--ds-color-text-subtle)}._linkIcon_144gk_189{font-size:1.5rem}
|
|
@@ -3,7 +3,7 @@ import { jsxs as m, jsx as l, Fragment as U } from "react/jsx-runtime";
|
|
|
3
3
|
import { c as z } from "../../index-p1eeF8LQ.js";
|
|
4
4
|
import { Badge as A } from "../Badge/Badge.js";
|
|
5
5
|
import { Icon as V } from "../Icon/Icon.js";
|
|
6
|
-
import
|
|
6
|
+
import g, { forwardRef as X } from "react";
|
|
7
7
|
import "../Button/Button.js";
|
|
8
8
|
import "../RootProvider/RootProvider.js";
|
|
9
9
|
import { ItemMedia as C } from "../Item/ItemMedia.js";
|
|
@@ -14,79 +14,79 @@ import { pickAriaProps as Y } from "./aria.js";
|
|
|
14
14
|
import { S as Z } from "../../Checkmark-Byz_C9x4.js";
|
|
15
15
|
import { u as $ } from "../../useId-BVFxCjkq.js";
|
|
16
16
|
import { S as T } from "../../ChevronRight-ANFWmIs1.js";
|
|
17
|
-
import '../../assets/MenuItem.css';var W = function(
|
|
17
|
+
import '../../assets/MenuItem.css';var W = function(t, o) {
|
|
18
18
|
var a = {};
|
|
19
|
-
for (var
|
|
20
|
-
if (
|
|
21
|
-
for (var r = 0,
|
|
22
|
-
o.indexOf(
|
|
19
|
+
for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && o.indexOf(e) < 0 && (a[e] = t[e]);
|
|
20
|
+
if (t != null && typeof Object.getOwnPropertySymbols == "function")
|
|
21
|
+
for (var r = 0, e = Object.getOwnPropertySymbols(t); r < e.length; r++)
|
|
22
|
+
o.indexOf(e[r]) < 0 && Object.prototype.propertyIsEnumerable.call(t, e[r]) && (a[e[r]] = t[e[r]]);
|
|
23
23
|
return a;
|
|
24
24
|
};
|
|
25
|
-
const
|
|
26
|
-
var { title: a, titleId:
|
|
25
|
+
const tt = X((t, o) => {
|
|
26
|
+
var { title: a, titleId: e } = t, r = W(t, ["title", "titleId"]);
|
|
27
27
|
let n = $();
|
|
28
|
-
return n = a ?
|
|
28
|
+
return n = a ? e || "title-" + n : void 0, g.createElement(
|
|
29
29
|
"svg",
|
|
30
30
|
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: o, "aria-labelledby": n }, r),
|
|
31
|
-
a ?
|
|
32
|
-
|
|
31
|
+
a ? g.createElement("title", { id: n }, a) : null,
|
|
32
|
+
g.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M4.75 12a.75.75 0 0 1 .75-.75h13a.75.75 0 1 1 0 1.5h-13a.75.75 0 0 1-.75-.75", clipRule: "evenodd" })
|
|
33
33
|
);
|
|
34
|
-
}),
|
|
35
|
-
item:
|
|
36
|
-
media:
|
|
37
|
-
label:
|
|
38
|
-
title:
|
|
39
|
-
description:
|
|
40
|
-
count:
|
|
41
|
-
linkIcon:
|
|
42
|
-
},
|
|
43
|
-
id:
|
|
34
|
+
}), et = "_item_144gk_3", at = "_media_144gk_129", it = "_label_144gk_150", rt = "_title_144gk_165", lt = "_description_144gk_169", nt = "_count_144gk_181", ot = "_linkIcon_144gk_189", i = {
|
|
35
|
+
item: et,
|
|
36
|
+
media: at,
|
|
37
|
+
label: it,
|
|
38
|
+
title: rt,
|
|
39
|
+
description: lt,
|
|
40
|
+
count: nt,
|
|
41
|
+
linkIcon: ot
|
|
42
|
+
}, wt = ({
|
|
43
|
+
id: t,
|
|
44
44
|
groupId: o,
|
|
45
45
|
role: a = "menuItem",
|
|
46
|
-
as:
|
|
46
|
+
as: e,
|
|
47
47
|
href: r,
|
|
48
48
|
onClick: n,
|
|
49
|
-
onChange:
|
|
50
|
-
onKeyPress:
|
|
51
|
-
onMouseEnter:
|
|
52
|
-
size:
|
|
53
|
-
variant:
|
|
54
|
-
color:
|
|
49
|
+
onChange: h,
|
|
50
|
+
onKeyPress: v,
|
|
51
|
+
onMouseEnter: y,
|
|
52
|
+
size: I = "sm",
|
|
53
|
+
variant: k,
|
|
54
|
+
color: w,
|
|
55
55
|
name: q,
|
|
56
56
|
value: D,
|
|
57
57
|
checked: c,
|
|
58
58
|
icon: _,
|
|
59
59
|
label: b,
|
|
60
60
|
badge: d,
|
|
61
|
-
controls:
|
|
61
|
+
controls: N,
|
|
62
62
|
title: p,
|
|
63
|
-
description:
|
|
64
|
-
highlightWords:
|
|
63
|
+
description: O,
|
|
64
|
+
highlightWords: x,
|
|
65
65
|
count: f,
|
|
66
|
-
linkIcon:
|
|
66
|
+
linkIcon: P = !1,
|
|
67
67
|
disabled: s,
|
|
68
68
|
selected: G,
|
|
69
|
-
active:
|
|
70
|
-
tabIndex:
|
|
69
|
+
active: j,
|
|
70
|
+
tabIndex: S = 0,
|
|
71
71
|
className: E,
|
|
72
72
|
"data-testid": R,
|
|
73
73
|
...H
|
|
74
74
|
}) => {
|
|
75
75
|
const B = typeof b == "function" ? b() : b, L = Y(H);
|
|
76
76
|
if (a === "checkbox" || a === "radio") {
|
|
77
|
-
const u = _ || (c ? Z :
|
|
77
|
+
const u = _ || (c ? Z : tt);
|
|
78
78
|
return /* @__PURE__ */ m(
|
|
79
79
|
"label",
|
|
80
80
|
{
|
|
81
81
|
...L,
|
|
82
82
|
className: z(i.item, E),
|
|
83
|
-
id:
|
|
84
|
-
"data-id":
|
|
83
|
+
id: t,
|
|
84
|
+
"data-id": t,
|
|
85
85
|
"data-group-id": o,
|
|
86
|
-
"data-size":
|
|
87
|
-
"data-variant":
|
|
88
|
-
"data-color":
|
|
89
|
-
"data-active":
|
|
86
|
+
"data-size": I,
|
|
87
|
+
"data-variant": k,
|
|
88
|
+
"data-color": w,
|
|
89
|
+
"data-active": j,
|
|
90
90
|
role: a,
|
|
91
91
|
"aria-disabled": s,
|
|
92
92
|
"aria-checked": c,
|
|
@@ -94,11 +94,11 @@ const ee = X((e, o) => {
|
|
|
94
94
|
"aria-label": p,
|
|
95
95
|
"data-testid": R,
|
|
96
96
|
onKeyUp: (M) => {
|
|
97
|
-
s || (M.key === "Enter" && n?.(),
|
|
97
|
+
s || (M.key === "Enter" && n?.(), v?.(M));
|
|
98
98
|
},
|
|
99
99
|
onClick: n,
|
|
100
|
-
onMouseEnter:
|
|
101
|
-
tabIndex:
|
|
100
|
+
onMouseEnter: y,
|
|
101
|
+
tabIndex: S,
|
|
102
102
|
children: [
|
|
103
103
|
/* @__PURE__ */ l(
|
|
104
104
|
"input",
|
|
@@ -107,8 +107,8 @@ const ee = X((e, o) => {
|
|
|
107
107
|
value: D,
|
|
108
108
|
type: a,
|
|
109
109
|
checked: !!c,
|
|
110
|
-
onChange:
|
|
111
|
-
readOnly: !
|
|
110
|
+
onChange: h,
|
|
111
|
+
readOnly: !h,
|
|
112
112
|
style: { opacity: 0, position: "absolute" },
|
|
113
113
|
tabIndex: -1
|
|
114
114
|
}
|
|
@@ -118,7 +118,7 @@ const ee = X((e, o) => {
|
|
|
118
118
|
F,
|
|
119
119
|
{
|
|
120
120
|
className: i.label,
|
|
121
|
-
highlightWords:
|
|
121
|
+
highlightWords: x,
|
|
122
122
|
title: /* @__PURE__ */ m(U, { children: [
|
|
123
123
|
p,
|
|
124
124
|
" ",
|
|
@@ -128,7 +128,7 @@ const ee = X((e, o) => {
|
|
|
128
128
|
weight: "medium",
|
|
129
129
|
className: i.title
|
|
130
130
|
},
|
|
131
|
-
description:
|
|
131
|
+
description: O,
|
|
132
132
|
descriptionProps: {
|
|
133
133
|
weight: "normal",
|
|
134
134
|
variant: "subtle",
|
|
@@ -139,35 +139,35 @@ const ee = X((e, o) => {
|
|
|
139
139
|
),
|
|
140
140
|
/* @__PURE__ */ m(K, { children: [
|
|
141
141
|
d && /* @__PURE__ */ l(A, { ...d }),
|
|
142
|
-
|
|
142
|
+
N
|
|
143
143
|
] })
|
|
144
144
|
]
|
|
145
145
|
}
|
|
146
146
|
);
|
|
147
147
|
}
|
|
148
|
-
const J =
|
|
148
|
+
const J = e || (r ? "a" : "button"), Q = P && T;
|
|
149
149
|
return /* @__PURE__ */ m(
|
|
150
150
|
J,
|
|
151
151
|
{
|
|
152
152
|
href: r,
|
|
153
153
|
className: z(i.item, E),
|
|
154
|
-
id:
|
|
155
|
-
"data-id":
|
|
154
|
+
id: t,
|
|
155
|
+
"data-id": t,
|
|
156
156
|
"data-group-id": o,
|
|
157
|
-
"data-size":
|
|
158
|
-
"data-variant":
|
|
159
|
-
"data-color":
|
|
160
|
-
"data-active":
|
|
157
|
+
"data-size": I,
|
|
158
|
+
"data-variant": k,
|
|
159
|
+
"data-color": w,
|
|
160
|
+
"data-active": j,
|
|
161
161
|
"aria-disabled": s,
|
|
162
162
|
"aria-selected": G,
|
|
163
163
|
"aria-label": p,
|
|
164
164
|
"data-testid": R,
|
|
165
165
|
onKeyUp: (u) => {
|
|
166
|
-
s || (u.key === "Enter" && n?.(),
|
|
166
|
+
s || (u.key === "Enter" && n?.(), v?.(u));
|
|
167
167
|
},
|
|
168
168
|
onClick: n,
|
|
169
|
-
onMouseEnter:
|
|
170
|
-
tabIndex: s ? -1 :
|
|
169
|
+
onMouseEnter: y,
|
|
170
|
+
tabIndex: s ? -1 : S ?? 0,
|
|
171
171
|
role: a === "menuItem" ? "menuitem" : a,
|
|
172
172
|
...L,
|
|
173
173
|
children: [
|
|
@@ -176,7 +176,7 @@ const ee = X((e, o) => {
|
|
|
176
176
|
F,
|
|
177
177
|
{
|
|
178
178
|
className: i.label,
|
|
179
|
-
highlightWords:
|
|
179
|
+
highlightWords: x,
|
|
180
180
|
title: /* @__PURE__ */ m(U, { children: [
|
|
181
181
|
p,
|
|
182
182
|
" ",
|
|
@@ -186,7 +186,7 @@ const ee = X((e, o) => {
|
|
|
186
186
|
weight: "medium",
|
|
187
187
|
className: i.title
|
|
188
188
|
},
|
|
189
|
-
description:
|
|
189
|
+
description: O,
|
|
190
190
|
descriptionProps: {
|
|
191
191
|
variant: "subtle",
|
|
192
192
|
className: i.description
|
|
@@ -196,13 +196,13 @@ const ee = X((e, o) => {
|
|
|
196
196
|
),
|
|
197
197
|
/* @__PURE__ */ m(K, { children: [
|
|
198
198
|
d && /* @__PURE__ */ l(A, { ...d }),
|
|
199
|
-
|
|
200
|
-
|
|
199
|
+
N,
|
|
200
|
+
P && /* @__PURE__ */ l(V, { svgElement: Q, className: i.linkIcon })
|
|
201
201
|
] })
|
|
202
202
|
]
|
|
203
203
|
}
|
|
204
204
|
);
|
|
205
205
|
};
|
|
206
206
|
export {
|
|
207
|
-
|
|
207
|
+
wt as MenuItem
|
|
208
208
|
};
|
|
@@ -43,7 +43,7 @@ const B = (u) => {
|
|
|
43
43
|
onChange: l,
|
|
44
44
|
onClear: d,
|
|
45
45
|
clearButtonAltText: a,
|
|
46
|
-
items:
|
|
46
|
+
items: i = [],
|
|
47
47
|
groups: M = {}
|
|
48
48
|
}) => {
|
|
49
49
|
const { languageCode: I } = Q(), o = t.useMemo(() => B(I), [I]), [f, R] = t.useState(""), C = t.useCallback(
|
|
@@ -53,7 +53,7 @@ const B = (u) => {
|
|
|
53
53
|
[l]
|
|
54
54
|
), w = t.useCallback(() => {
|
|
55
55
|
R(""), d?.();
|
|
56
|
-
}, [d]),
|
|
56
|
+
}, [d]), h = t.useMemo(() => f.trim().replace(/\s+/g, " "), [f]), r = h.length > 0, y = t.useMemo(() => h.toLowerCase(), [h]), v = t.useMemo(() => h ? h.split(" ") : [], [h]), H = t.useMemo(
|
|
57
57
|
() => ({
|
|
58
58
|
placeholder: u ?? o.placeholder,
|
|
59
59
|
name: e ?? "search",
|
|
@@ -64,18 +64,19 @@ const B = (u) => {
|
|
|
64
64
|
}),
|
|
65
65
|
[u, o.placeholder, e, f, C, w, a]
|
|
66
66
|
), $ = t.useMemo(
|
|
67
|
-
() =>
|
|
67
|
+
() => i.map((s) => {
|
|
68
68
|
const c = s?.searchWords?.length ? s.searchWords : [s?.title, s?.description].filter(Boolean);
|
|
69
69
|
return {
|
|
70
70
|
...s,
|
|
71
71
|
searchWords: c ?? []
|
|
72
72
|
};
|
|
73
73
|
}),
|
|
74
|
-
[
|
|
75
|
-
),
|
|
74
|
+
[i]
|
|
75
|
+
), b = t.useMemo(
|
|
76
76
|
() => [
|
|
77
77
|
{
|
|
78
78
|
id: "emptySearch",
|
|
79
|
+
"aria-disabled": !0,
|
|
79
80
|
title: o.noResults,
|
|
80
81
|
groupId: "emptySearch",
|
|
81
82
|
icon: z,
|
|
@@ -84,10 +85,10 @@ const B = (u) => {
|
|
|
84
85
|
}
|
|
85
86
|
],
|
|
86
87
|
[o.noResults]
|
|
87
|
-
),
|
|
88
|
-
const s =
|
|
89
|
-
return s.length ? s :
|
|
90
|
-
}, [
|
|
88
|
+
), k = t.useMemo(() => {
|
|
89
|
+
const s = i.filter((c) => c.groupId === "emptySearch").map((c) => ({ ...c, hidden: !1 }));
|
|
90
|
+
return s.length ? s : b;
|
|
91
|
+
}, [i, b]), { selectedItems: p, results: g } = t.useMemo(() => {
|
|
91
92
|
if (!r) return { selectedItems: [], results: [] };
|
|
92
93
|
const s = [], c = [];
|
|
93
94
|
for (const S of $)
|
|
@@ -97,7 +98,7 @@ const B = (u) => {
|
|
|
97
98
|
highlightWords: v
|
|
98
99
|
});
|
|
99
100
|
return { selectedItems: s, results: c };
|
|
100
|
-
}, [r, $, y, v]), n = g.length, m = p.length,
|
|
101
|
+
}, [r, $, y, v]), n = g.length, m = p.length, q = t.useMemo(
|
|
101
102
|
() => ({
|
|
102
103
|
search: {
|
|
103
104
|
hidden: !0,
|
|
@@ -116,7 +117,7 @@ const B = (u) => {
|
|
|
116
117
|
[o, n, m, M]
|
|
117
118
|
), L = t.useMemo(
|
|
118
119
|
() => ({
|
|
119
|
-
...
|
|
120
|
+
...q,
|
|
120
121
|
search: {
|
|
121
122
|
hidden: !r,
|
|
122
123
|
title: o.hits(n)
|
|
@@ -130,8 +131,8 @@ const B = (u) => {
|
|
|
130
131
|
title: o.noResults
|
|
131
132
|
}
|
|
132
133
|
}),
|
|
133
|
-
[
|
|
134
|
-
),
|
|
134
|
+
[q, r, o, n, m]
|
|
135
|
+
), W = t.useMemo(() => r ? j([...g, ...p]) : [], [r, g, p]), x = t.useMemo(() => [...k || [], ...p || []], [k, p]), N = t.useMemo(() => r ? n ? W : x : i, [r, i, n, W, x]);
|
|
135
136
|
return {
|
|
136
137
|
search: H,
|
|
137
138
|
results: g,
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as s, jsxs as h } from "react/jsx-runtime";
|
|
3
|
-
import
|
|
3
|
+
import u, { forwardRef as v, useRef as m, useEffect as y } from "react";
|
|
4
4
|
import { Button as w } from "../Button/Button.js";
|
|
5
5
|
import "../../index-p1eeF8LQ.js";
|
|
6
6
|
import { Dropdown as b } from "../Dropdown/Dropdown.js";
|
|
7
7
|
import "../RootProvider/RootProvider.js";
|
|
8
8
|
import { Menu as O } from "../Menu/Menu.js";
|
|
9
|
-
import { useDropdownMenuController as
|
|
9
|
+
import { useDropdownMenuController as I } from "../Menu/useDropdownMenuController.js";
|
|
10
10
|
import "../Snackbar/useSnackbar.js";
|
|
11
|
-
import { u as
|
|
11
|
+
import { u as x } from "../../useId-BVFxCjkq.js";
|
|
12
12
|
var R = function(t, a) {
|
|
13
13
|
var o = {};
|
|
14
14
|
for (var e in t) Object.prototype.hasOwnProperty.call(t, e) && a.indexOf(e) < 0 && (o[e] = t[e]);
|
|
@@ -19,12 +19,12 @@ var R = function(t, a) {
|
|
|
19
19
|
};
|
|
20
20
|
const j = v((t, a) => {
|
|
21
21
|
var { title: o, titleId: e } = t, r = R(t, ["title", "titleId"]);
|
|
22
|
-
let i =
|
|
23
|
-
return i = o ? e || "title-" + i : void 0,
|
|
22
|
+
let i = x();
|
|
23
|
+
return i = o ? e || "title-" + i : void 0, u.createElement(
|
|
24
24
|
"svg",
|
|
25
25
|
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: a, "aria-labelledby": i }, r),
|
|
26
|
-
o ?
|
|
27
|
-
|
|
26
|
+
o ? u.createElement("title", { id: i }, o) : null,
|
|
27
|
+
u.createElement("path", { fill: "currentColor", d: "M12.75 5.5a.75.75 0 0 0-1.5 0v5.75H5.5a.75.75 0 0 0 0 1.5h5.75v5.75a.75.75 0 0 0 1.5 0v-5.75h5.75a.75.75 0 0 0 0-1.5h-5.75z" })
|
|
28
28
|
);
|
|
29
29
|
}), H = ({
|
|
30
30
|
label: t = "Legg til filter",
|
|
@@ -35,13 +35,14 @@ const j = v((t, a) => {
|
|
|
35
35
|
onClose: i,
|
|
36
36
|
open: n
|
|
37
37
|
}) => {
|
|
38
|
-
const l =
|
|
38
|
+
const l = I({ id: "tool-filter-add" }), f = m(n), p = m(!1), c = a?.map((d) => ({
|
|
39
|
+
linkIcon: !0,
|
|
39
40
|
...d,
|
|
40
41
|
onClick: () => e?.(d?.name ?? "")
|
|
41
42
|
}));
|
|
42
43
|
if (y(() => {
|
|
43
|
-
const d =
|
|
44
|
-
|
|
44
|
+
const d = f.current;
|
|
45
|
+
f.current = n, d && !n && l?.triggerRef?.current?.focus();
|
|
45
46
|
}, [n, l.triggerRef]), !c?.length)
|
|
46
47
|
return null;
|
|
47
48
|
const g = () => {
|
|
@@ -1,81 +1,83 @@
|
|
|
1
1
|
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { useRef as
|
|
2
|
+
import { useRef as B, useEffect as T } from "react";
|
|
3
3
|
import "../../index-p1eeF8LQ.js";
|
|
4
4
|
import "../Button/Button.js";
|
|
5
|
-
import { Menu as
|
|
6
|
-
import { useDropdownMenuController as
|
|
5
|
+
import { Menu as V } from "../Menu/Menu.js";
|
|
6
|
+
import { useDropdownMenuController as q } from "../Menu/useDropdownMenuController.js";
|
|
7
7
|
import "../RootProvider/RootProvider.js";
|
|
8
8
|
import "../Snackbar/useSnackbar.js";
|
|
9
|
-
import { Dropdown as
|
|
10
|
-
import { ToolbarFilterButton as
|
|
11
|
-
const
|
|
12
|
-
as:
|
|
13
|
-
size:
|
|
9
|
+
import { Dropdown as M } from "../Dropdown/Dropdown.js";
|
|
10
|
+
import { ToolbarFilterButton as R } from "./ToolbarFilterButton.js";
|
|
11
|
+
const Z = ({
|
|
12
|
+
as: A,
|
|
13
|
+
size: a,
|
|
14
14
|
name: n,
|
|
15
|
-
label:
|
|
15
|
+
label: f = "",
|
|
16
16
|
searchable: c,
|
|
17
|
-
groups:
|
|
17
|
+
groups: l,
|
|
18
18
|
items: p,
|
|
19
|
-
removable:
|
|
20
|
-
removeLabel:
|
|
19
|
+
removable: F,
|
|
20
|
+
removeLabel: P = "Fjern filter",
|
|
21
21
|
filterState: s,
|
|
22
22
|
onFilterStateChange: g,
|
|
23
|
-
onFilterChange:
|
|
24
|
-
onRemove:
|
|
23
|
+
onFilterChange: E,
|
|
24
|
+
onRemove: j,
|
|
25
25
|
open: o,
|
|
26
26
|
onToggle: v,
|
|
27
27
|
onClose: u,
|
|
28
28
|
submitLabel: w,
|
|
29
29
|
search: y,
|
|
30
|
-
virtualized: b
|
|
30
|
+
virtualized: b,
|
|
31
|
+
title: x
|
|
31
32
|
}) => {
|
|
32
|
-
const
|
|
33
|
-
|
|
34
|
-
const r =
|
|
35
|
-
|
|
33
|
+
const h = B(o), t = q({ id: "toolbar-filter-menu" });
|
|
34
|
+
T(() => {
|
|
35
|
+
const r = h.current;
|
|
36
|
+
h.current = o, r && !o && t?.triggerRef?.current?.focus();
|
|
36
37
|
}, [o, t.triggerRef]);
|
|
37
|
-
const
|
|
38
|
-
const m = r.target.type,
|
|
39
|
-
|
|
40
|
-
},
|
|
38
|
+
const C = (r) => {
|
|
39
|
+
const m = r.target.type, D = r.target.name, O = r.target.value;
|
|
40
|
+
E?.(m, D, O), m === "radio" && u();
|
|
41
|
+
}, k = p?.map((r) => ({
|
|
41
42
|
...r,
|
|
42
|
-
onChange: (m) =>
|
|
43
|
-
})), i = p?.filter((r) => r.checked)?.map((r) => r.value || "true"),
|
|
44
|
-
return
|
|
45
|
-
|
|
43
|
+
onChange: (m) => C(m)
|
|
44
|
+
})), i = p?.filter((r) => r.checked)?.map((r) => r.value || "true"), I = A || V, d = c ? "combobox" : "menu";
|
|
45
|
+
return F ? /* @__PURE__ */ e(
|
|
46
|
+
M,
|
|
46
47
|
{
|
|
47
48
|
submitLabel: w,
|
|
49
|
+
title: x,
|
|
48
50
|
variant: "drawer-dropdown",
|
|
49
51
|
trigger: /* @__PURE__ */ e(
|
|
50
|
-
|
|
52
|
+
R,
|
|
51
53
|
{
|
|
52
54
|
name: n,
|
|
53
55
|
onClick: v,
|
|
54
|
-
onRemove:
|
|
56
|
+
onRemove: j,
|
|
55
57
|
removable: !0,
|
|
56
58
|
value: i?.length > 0 ? i : void 0,
|
|
57
|
-
removeLabel:
|
|
59
|
+
removeLabel: P,
|
|
58
60
|
open: o,
|
|
59
61
|
"aria-expanded": o,
|
|
60
62
|
"aria-controls": t.menuId,
|
|
61
63
|
ref: t.triggerRef,
|
|
62
|
-
children:
|
|
64
|
+
children: f
|
|
63
65
|
}
|
|
64
66
|
),
|
|
65
67
|
open: o,
|
|
66
68
|
onClose: u,
|
|
67
69
|
...t.dropdownA11yProps,
|
|
68
70
|
children: /* @__PURE__ */ e(
|
|
69
|
-
|
|
71
|
+
I,
|
|
70
72
|
{
|
|
71
73
|
search: y,
|
|
72
74
|
name: n,
|
|
73
75
|
filterState: s,
|
|
74
76
|
onFilterStateChange: g,
|
|
75
|
-
size:
|
|
77
|
+
size: a,
|
|
76
78
|
searchable: c,
|
|
77
|
-
groups:
|
|
78
|
-
items:
|
|
79
|
+
groups: l,
|
|
80
|
+
items: k,
|
|
79
81
|
keyboardEvents: o,
|
|
80
82
|
a11yMode: d,
|
|
81
83
|
...d === "combobox" ? { id: t.menuId } : t.menuA11yProps,
|
|
@@ -84,25 +86,26 @@ const Y = ({
|
|
|
84
86
|
)
|
|
85
87
|
}
|
|
86
88
|
) : /* @__PURE__ */ e(
|
|
87
|
-
|
|
89
|
+
M,
|
|
88
90
|
{
|
|
91
|
+
title: x,
|
|
89
92
|
variant: "drawer-dropdown",
|
|
90
93
|
submitLabel: w,
|
|
91
|
-
trigger: /* @__PURE__ */ e(
|
|
94
|
+
trigger: /* @__PURE__ */ e(R, { name: n, onClick: v, value: i?.length > 0 ? i : void 0, children: f }),
|
|
92
95
|
open: o,
|
|
93
96
|
onClose: u,
|
|
94
97
|
...t.dropdownA11yProps,
|
|
95
98
|
children: /* @__PURE__ */ e(
|
|
96
|
-
|
|
99
|
+
I,
|
|
97
100
|
{
|
|
98
101
|
search: y,
|
|
99
102
|
name: n,
|
|
100
103
|
filterState: s,
|
|
101
104
|
onFilterStateChange: g,
|
|
102
|
-
size:
|
|
105
|
+
size: a,
|
|
103
106
|
searchable: c,
|
|
104
|
-
groups:
|
|
105
|
-
items:
|
|
107
|
+
groups: l,
|
|
108
|
+
items: k,
|
|
106
109
|
keyboardEvents: o,
|
|
107
110
|
a11yMode: d,
|
|
108
111
|
...d === "combobox" ? { id: t.menuId } : t.menuA11yProps,
|
|
@@ -113,5 +116,5 @@ const Y = ({
|
|
|
113
116
|
);
|
|
114
117
|
};
|
|
115
118
|
export {
|
|
116
|
-
|
|
119
|
+
Z as ToolbarFilterMenu
|
|
117
120
|
};
|
|
@@ -11,5 +11,6 @@ export interface ToolbarFilterMenuProps extends FilterProps {
|
|
|
11
11
|
onFilterChange?: (type: string, name: string, value: string) => void;
|
|
12
12
|
removeLabel?: string;
|
|
13
13
|
submitLabel?: string;
|
|
14
|
+
title?: string;
|
|
14
15
|
}
|
|
15
|
-
export declare const ToolbarFilterMenu: ({ as, size, name, label, searchable, groups, items, removable, removeLabel, filterState, onFilterStateChange, onFilterChange, onRemove, open, onToggle, onClose, submitLabel, search, virtualized, }: ToolbarFilterMenuProps) => import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export declare const ToolbarFilterMenu: ({ as, size, name, label, searchable, groups, items, removable, removeLabel, filterState, onFilterStateChange, onFilterChange, onRemove, open, onToggle, onClose, submitLabel, search, virtualized, title, }: ToolbarFilterMenuProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -9,7 +9,9 @@ export interface FilterProps extends MenuProps {
|
|
|
9
9
|
groupId?: string;
|
|
10
10
|
name: string;
|
|
11
11
|
icon?: MenuItemProps['icon'];
|
|
12
|
-
label
|
|
12
|
+
label?: string;
|
|
13
|
+
title?: MenuItemProps['title'];
|
|
14
|
+
description?: MenuItemProps['description'];
|
|
13
15
|
removable?: boolean;
|
|
14
16
|
groups?: FilterGroups;
|
|
15
17
|
items: MenuItemProps[];
|
|
@@ -114,7 +116,9 @@ export declare const useFilter: ({ filters, filterState, onFilterStateChange }:
|
|
|
114
116
|
groupId?: string;
|
|
115
117
|
name: string;
|
|
116
118
|
icon?: MenuItemProps["icon"];
|
|
117
|
-
label
|
|
119
|
+
label?: string;
|
|
120
|
+
title?: MenuItemProps["title"];
|
|
121
|
+
description?: MenuItemProps["description"];
|
|
118
122
|
removable?: boolean;
|
|
119
123
|
groups?: FilterGroups;
|
|
120
124
|
searchable?: boolean;
|
|
@@ -142,7 +146,9 @@ export declare const useFilter: ({ filters, filterState, onFilterStateChange }:
|
|
|
142
146
|
groupId?: string;
|
|
143
147
|
name: string;
|
|
144
148
|
icon?: MenuItemProps["icon"];
|
|
145
|
-
label
|
|
149
|
+
label?: string;
|
|
150
|
+
title?: MenuItemProps["title"];
|
|
151
|
+
description?: MenuItemProps["description"];
|
|
146
152
|
removable?: boolean;
|
|
147
153
|
groups?: FilterGroups;
|
|
148
154
|
items: MenuItemProps[];
|