@altinn/altinn-components 0.55.4 → 0.55.6
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/useFilter.js +6 -5
- package/dist/types/lib/components/Toolbar/SelectDateFilter.stories.d.ts +1 -0
- package/dist/types/lib/components/Toolbar/useFilter.d.ts +1 -1
- 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,7 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { useState as g, useMemo as f, useEffect as h } from "react";
|
|
3
|
-
const m = (l,
|
|
4
|
-
const i =
|
|
3
|
+
const m = (l, c) => c || `toolbar-filter-${l}`, N = ({ filters: l = [], filterState: c, onFilterStateChange: u }) => {
|
|
4
|
+
const i = c || {}, d = typeof u == "function" ? u : () => {
|
|
5
5
|
}, [r, o] = g(
|
|
6
6
|
() => l.filter((e) => !e.removable || typeof i[e.name] < "u").map((e) => e.name)
|
|
7
7
|
), F = f(
|
|
@@ -20,7 +20,7 @@ const m = (l, d) => d || `toolbar-filter-${l}`, N = ({ filters: l = [], filterSt
|
|
|
20
20
|
}, [l, i]);
|
|
21
21
|
const v = (e, t, s) => {
|
|
22
22
|
const n = [s];
|
|
23
|
-
|
|
23
|
+
d(e === "radio" ? {
|
|
24
24
|
...i,
|
|
25
25
|
[t]: n
|
|
26
26
|
} : {
|
|
@@ -28,12 +28,12 @@ const m = (l, d) => d || `toolbar-filter-${l}`, N = ({ filters: l = [], filterSt
|
|
|
28
28
|
[t]: i[t] ? i[t].some((a) => n.includes(String(a))) ? i[t].filter((a) => !(n || []).includes(String(a))) : [...i[t], ...n || []] : n
|
|
29
29
|
});
|
|
30
30
|
}, p = (e) => {
|
|
31
|
-
o((t) => t.filter((s) => s !== e)),
|
|
31
|
+
o((t) => t.filter((s) => s !== e)), d({
|
|
32
32
|
...i,
|
|
33
33
|
[e]: void 0
|
|
34
34
|
});
|
|
35
35
|
}, y = (e) => {
|
|
36
|
-
r.includes(e) || o((t) => [...t, e]),
|
|
36
|
+
r.includes(e) || o((t) => [...t, e]), d({
|
|
37
37
|
...i,
|
|
38
38
|
[e]: i[e] ?? []
|
|
39
39
|
}), requestAnimationFrame(() => {
|
|
@@ -51,6 +51,7 @@ const m = (l, d) => d || `toolbar-filter-${l}`, N = ({ filters: l = [], filterSt
|
|
|
51
51
|
})),
|
|
52
52
|
hiddenFilters: b?.map((e) => ({
|
|
53
53
|
...e,
|
|
54
|
+
as: void 0,
|
|
54
55
|
id: m(e.name, e.id)
|
|
55
56
|
})),
|
|
56
57
|
onFilterChange: v,
|
|
@@ -6,4 +6,5 @@ declare const meta: {
|
|
|
6
6
|
};
|
|
7
7
|
export default meta;
|
|
8
8
|
export declare const Datepicker: () => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export declare const RemovableDatepicker: () => import("react/jsx-runtime").JSX.Element;
|
|
9
10
|
export declare const CustomName: () => import("react/jsx-runtime").JSX.Element;
|
|
@@ -142,6 +142,7 @@ export declare const useFilter: ({ filters, filterState, onFilterStateChange }:
|
|
|
142
142
|
onActiveItemIdChange?: (id: string | undefined) => void;
|
|
143
143
|
}[];
|
|
144
144
|
hiddenFilters: {
|
|
145
|
+
as: undefined; /** Avoid using custom filter component as a menuItem */
|
|
145
146
|
id: string;
|
|
146
147
|
groupId?: string;
|
|
147
148
|
name: string;
|
|
@@ -166,7 +167,6 @@ export declare const useFilter: ({ filters, filterState, onFilterStateChange }:
|
|
|
166
167
|
size?: MenuItemProps["size"];
|
|
167
168
|
variant?: MenuItemProps["variant"];
|
|
168
169
|
color?: MenuItemProps["color"];
|
|
169
|
-
as?: React.ElementType;
|
|
170
170
|
keyboardEvents?: boolean;
|
|
171
171
|
onSelect?: () => void;
|
|
172
172
|
scrollRefStyles?: React.CSSProperties;
|