@midas-ds/layout 0.0.17 → 0.0.19
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/CHANGELOG.md +17 -0
- package/assets/LayoutContent.css +1 -0
- package/assets/Panel.css +1 -1
- package/chunks/LayoutContent-DhVL-boV.js +22 -0
- package/chunks/Main-Ce4U9_ce.js +13 -0
- package/chunks/Panel-EbJUawMh.js +281 -0
- package/index.js +28 -24
- package/layout/Layout.d.ts +2 -6
- package/layout/Layout.stories.d.ts +1 -1
- package/layout/index.d.ts +1 -0
- package/layout/index.js +1 -1
- package/layout/layout-content/LayoutContent.d.ts +3 -0
- package/layout/layout-content/index.d.ts +1 -0
- package/main/index.js +1 -1
- package/package.json +2 -2
- package/panel/Panel.d.ts +2 -0
- package/panel/collapse-panel/CollapsePanel.d.ts +3 -2
- package/panel/dismiss-panel/DismissPanel.d.ts +6 -2
- package/panel/dismiss-panel/DismissPanelContext.d.ts +12 -0
- package/panel/dismiss-panel/DismissPanelOutlet.d.ts +3 -0
- package/panel/dismiss-panel/DismissPanelProvider.d.ts +9 -0
- package/panel/dismiss-panel/index.d.ts +4 -0
- package/panel/dismiss-panel/useDismissPanels.d.ts +1 -0
- package/panel/index.js +14 -10
- package/panel/panel-body/PanelBody.d.ts +3 -3
- package/assets/Layout.css +0 -1
- package/chunks/Layout-bfQkpzAm.js +0 -23
- package/chunks/Main-DcX_nPtP.js +0 -13
- package/chunks/Panel-C1cbU0dG.js +0 -167
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,20 @@
|
|
|
1
|
+
## 0.0.19 (2026-03-20)
|
|
2
|
+
|
|
3
|
+
### 🩹 Fixes
|
|
4
|
+
|
|
5
|
+
- **layout, panel:** rename context provider ([6996c35755](https://github.com/migrationsverket/midas/commit/6996c35755))
|
|
6
|
+
- **layout:** replace setPanels with addPanel/closePanel API and add bring-to-front behavior ([a151c18a8c](https://github.com/migrationsverket/midas/commit/a151c18a8c))
|
|
7
|
+
- **layout, panel:** add controlled state support ([d7d5777852](https://github.com/migrationsverket/midas/commit/d7d5777852))
|
|
8
|
+
- **layout, panel:** unshift and aria hide nested panels ([21c7b4ba91](https://github.com/migrationsverket/midas/commit/21c7b4ba91))
|
|
9
|
+
- **layout, panel:** change api to support multiple panels ([9987fe9ebe](https://github.com/migrationsverket/midas/commit/9987fe9ebe))
|
|
10
|
+
- **layout, panel:** make dismiss panel globally configurable ([eadc5621b2](https://github.com/migrationsverket/midas/commit/eadc5621b2))
|
|
11
|
+
|
|
12
|
+
## 0.0.18 (2026-03-19)
|
|
13
|
+
|
|
14
|
+
### 🧱 Updated Dependencies
|
|
15
|
+
|
|
16
|
+
- Updated components to 17.10.0
|
|
17
|
+
|
|
1
18
|
## 0.0.17 (2026-03-19)
|
|
2
19
|
|
|
3
20
|
### 🧱 Updated Dependencies
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._layout_4r2tn_1{display:flex;flex-direction:column;font-family:var(--midas-typography-font-family);width:100%;height:100dvh}._layoutContent_yqjxz_1{display:flex;position:relative;height:100%;overflow:hidden}
|
package/assets/Panel.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
._collapsePanel_1uy7t_1{width:15rem}._collapsePanel_1uy7t_1._collapsed_1uy7t_4{width:80px}@media(max-width:640px){._collapsePanel_1uy7t_1{display:none}}._panelHeader_1uy7t_13{gap:0}._panelTitle_1uy7t_17{font-size:var(--midas-typography-font-size-20);display:block}._panelBody_1rrgz_1{background-color:var(--midas-background-base);box-sizing:border-box;padding:1rem;transition:width var(--midas-transition-duration-fast) ease-out;width:100%}._panelHeader_11qv1_1{align-items:center;display:flex;justify-content:space-between}._panelTitle_w7y4m_1{display:block}.
|
|
1
|
+
._collapsePanel_1uy7t_1{width:15rem}._collapsePanel_1uy7t_1._collapsed_1uy7t_4{width:80px}@media(max-width:640px){._collapsePanel_1uy7t_1{display:none}}._panelHeader_1uy7t_13{gap:0}._panelTitle_1uy7t_17{font-size:var(--midas-typography-font-size-20);display:block}._panelBody_1rrgz_1{background-color:var(--midas-background-base);box-sizing:border-box;padding:1rem;transition:width var(--midas-transition-duration-fast) ease-out;width:100%}._panelHeader_11qv1_1{align-items:center;display:flex;justify-content:space-between}._panelTitle_w7y4m_1{display:block}._dismissPanel_11141_1{position:absolute!important;top:0;right:0;width:320px;height:100%;overflow:hidden}._dismissPanel_11141_1[data-promoting]{animation:_promote_11141_1 var(--midas-transition-duration-fast) ease-out}@media(prefers-reduced-motion:reduce){._dismissPanel_11141_1[data-promoting]{animation-duration:1ms}}._dismissPanel_11141_1[data-entering]{animation:_slide-horizontally_11141_1 var(--midas-transition-duration-fast)}._dismissPanel_11141_1[data-exiting]{animation:_slide-horizontally_11141_1 var(--midas-transition-duration-fast) reverse ease-in}@media(prefers-reduced-motion:reduce){._dismissPanel_11141_1[data-entering],._dismissPanel_11141_1[data-exiting]{animation-duration:1ms}}@media not (min-width:800px){._dismissPanel_11141_1{bottom:0;width:100%;height:25%;left:0;top:unset}._dismissPanel_11141_1[data-entering]{animation:_slide-vertically_11141_1 var(--midas-transition-duration-fast)}._dismissPanel_11141_1[data-exiting]{animation:_slide-vertically_11141_1 var(--midas-transition-duration-fast) reverse ease-in}}._panelTitle_11141_54{font-size:var(--midas-typography-font-size-20);display:block}@keyframes _promote_11141_1{0%{opacity:.7;transform:scale(.97)}to{opacity:1;transform:scale(1)}}@keyframes _slide-horizontally_11141_1{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes _slide-vertically_11141_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import '../assets/LayoutContent.css';const a = "_layout_4r2tn_1", s = {
|
|
3
|
+
layout: a
|
|
4
|
+
}, u = ({ className: t, ...o }) => /* @__PURE__ */ n(
|
|
5
|
+
"div",
|
|
6
|
+
{
|
|
7
|
+
className: `${t ?? ""} ${s.layout}`,
|
|
8
|
+
...o
|
|
9
|
+
}
|
|
10
|
+
), y = "_layoutContent_yqjxz_1", l = {
|
|
11
|
+
layoutContent: y
|
|
12
|
+
}, c = ({ className: t, ...o }) => /* @__PURE__ */ n(
|
|
13
|
+
"div",
|
|
14
|
+
{
|
|
15
|
+
className: `${t ?? ""} ${l.layoutContent}`,
|
|
16
|
+
...o
|
|
17
|
+
}
|
|
18
|
+
);
|
|
19
|
+
export {
|
|
20
|
+
u as L,
|
|
21
|
+
c as a
|
|
22
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { jsx as i } from "react/jsx-runtime";
|
|
2
|
+
import '../assets/Main.css';const o = "_main_vtpiw_1", s = {
|
|
3
|
+
main: o
|
|
4
|
+
}, t = ({ className: n, ...a }) => /* @__PURE__ */ i(
|
|
5
|
+
"main",
|
|
6
|
+
{
|
|
7
|
+
className: [n, s.main].filter(Boolean).join(" "),
|
|
8
|
+
...a
|
|
9
|
+
}
|
|
10
|
+
);
|
|
11
|
+
export {
|
|
12
|
+
t as M
|
|
13
|
+
};
|
|
@@ -0,0 +1,281 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as l, jsxs as f } from "react/jsx-runtime";
|
|
3
|
+
import { forwardRef as b, useRef as w, useEffect as I, createContext as M, useState as z, useContext as B } from "react";
|
|
4
|
+
import { C as H, P as j } from "./PanelContext-D6WQ7_yb.js";
|
|
5
|
+
import { c as h, T as A } from "./Text-B18MZHuN.js";
|
|
6
|
+
import { useControlledState as v } from "@react-stately/utils";
|
|
7
|
+
import { u as L } from "./useIsMobileDevice-D0iMVFPx.js";
|
|
8
|
+
import { c as _, u as C, B as O } from "./Button-CCH8cWvV.js";
|
|
9
|
+
import { useExitAnimation as R, useObjectRef as q, useEnterAnimation as F, filterDOMProps as X } from "@react-aria/utils";
|
|
10
|
+
import '../assets/Panel.css';const G = [
|
|
11
|
+
["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
|
|
12
|
+
["path", { d: "M9 3v18", key: "fh3hqa" }],
|
|
13
|
+
["path", { d: "m16 15-3-3 3-3", key: "14y99z" }]
|
|
14
|
+
], J = _("panel-left-close", G);
|
|
15
|
+
const K = [
|
|
16
|
+
["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
|
|
17
|
+
["path", { d: "M9 3v18", key: "fh3hqa" }],
|
|
18
|
+
["path", { d: "m14 9 3 3-3 3", key: "8010ee" }]
|
|
19
|
+
], Q = _("panel-left-open", K);
|
|
20
|
+
const U = [
|
|
21
|
+
["path", { d: "M18 6 6 18", key: "1bl5f8" }],
|
|
22
|
+
["path", { d: "m6 6 12 12", key: "d8bk6v" }]
|
|
23
|
+
], V = _("x", U), W = { expandSidebar: "Expand sidebar", collapseSidebar: "Collapse sidebar", closePanel: "Close panel" }, Y = { expandSidebar: "Expandera sidopanel", collapseSidebar: "Minimera sidopanel", closePanel: "Stäng panel" }, T = {
|
|
24
|
+
en: W,
|
|
25
|
+
sv: Y
|
|
26
|
+
}, Z = "_collapsePanel_1uy7t_1", ee = "_collapsed_1uy7t_4", ne = "_panelTitle_1uy7t_17", x = {
|
|
27
|
+
collapsePanel: Z,
|
|
28
|
+
collapsed: ee,
|
|
29
|
+
panelTitle: ne
|
|
30
|
+
}, se = ({
|
|
31
|
+
children: e,
|
|
32
|
+
className: s,
|
|
33
|
+
isCollapsed: o,
|
|
34
|
+
defaultCollapsed: m = !1,
|
|
35
|
+
onCollapseChange: r,
|
|
36
|
+
title: c,
|
|
37
|
+
...p
|
|
38
|
+
}) => {
|
|
39
|
+
const i = C(T), P = L(), [n, a] = v(
|
|
40
|
+
o,
|
|
41
|
+
m,
|
|
42
|
+
r
|
|
43
|
+
), t = () => a((d) => !d);
|
|
44
|
+
return P ? null : /* @__PURE__ */ l(H.Provider, { value: { isCollapsed: n }, children: /* @__PURE__ */ l(
|
|
45
|
+
E,
|
|
46
|
+
{
|
|
47
|
+
className: h(s, x.collapsePanel, {
|
|
48
|
+
[x.collapsed]: n
|
|
49
|
+
}),
|
|
50
|
+
...p,
|
|
51
|
+
children: /* @__PURE__ */ f("aside", { children: [
|
|
52
|
+
/* @__PURE__ */ f(D, { children: [
|
|
53
|
+
/* @__PURE__ */ l("div", { children: !n && c && /* @__PURE__ */ l(
|
|
54
|
+
N,
|
|
55
|
+
{
|
|
56
|
+
className: x.panelTitle,
|
|
57
|
+
title: c
|
|
58
|
+
}
|
|
59
|
+
) }),
|
|
60
|
+
/* @__PURE__ */ l(
|
|
61
|
+
O,
|
|
62
|
+
{
|
|
63
|
+
variant: "icon",
|
|
64
|
+
"aria-label": n ? i.format("expandSidebar") : i.format("collapseSidebar"),
|
|
65
|
+
onPress: t,
|
|
66
|
+
children: n ? /* @__PURE__ */ l(Q, { size: 20 }) : /* @__PURE__ */ l(J, { size: 20 })
|
|
67
|
+
}
|
|
68
|
+
)
|
|
69
|
+
] }),
|
|
70
|
+
e
|
|
71
|
+
] })
|
|
72
|
+
}
|
|
73
|
+
) });
|
|
74
|
+
}, ae = "_panelBody_1rrgz_1", te = {
|
|
75
|
+
panelBody: ae
|
|
76
|
+
}, E = b(
|
|
77
|
+
({ className: e, ...s }, o) => /* @__PURE__ */ l(
|
|
78
|
+
"div",
|
|
79
|
+
{
|
|
80
|
+
ref: o,
|
|
81
|
+
className: h(e, te.panelBody),
|
|
82
|
+
...s
|
|
83
|
+
}
|
|
84
|
+
)
|
|
85
|
+
), le = "_panelHeader_11qv1_1", oe = {
|
|
86
|
+
panelHeader: le
|
|
87
|
+
}, D = ({ className: e, ...s }) => /* @__PURE__ */ l(
|
|
88
|
+
"div",
|
|
89
|
+
{
|
|
90
|
+
className: h(e, oe.panelHeader),
|
|
91
|
+
...s
|
|
92
|
+
}
|
|
93
|
+
), ie = "_panelTitle_w7y4m_1", re = {
|
|
94
|
+
panelTitle: ie
|
|
95
|
+
}, N = ({ className: e, title: s, ...o }) => /* @__PURE__ */ l(
|
|
96
|
+
A,
|
|
97
|
+
{
|
|
98
|
+
className: h(e, re.panelTitle),
|
|
99
|
+
...o,
|
|
100
|
+
children: s
|
|
101
|
+
}
|
|
102
|
+
), ce = "_dismissPanel_11141_1", de = "_panelTitle_11141_54", y = {
|
|
103
|
+
dismissPanel: ce,
|
|
104
|
+
panelTitle: de
|
|
105
|
+
}, S = (e) => {
|
|
106
|
+
const { onExited: s } = e, [o, m] = v(
|
|
107
|
+
e.isOpen,
|
|
108
|
+
e.defaultOpen || !1,
|
|
109
|
+
e.onOpenChange
|
|
110
|
+
), r = w(null), c = R(r, o), p = () => m((i) => !i);
|
|
111
|
+
return I(() => {
|
|
112
|
+
!o && !c && s?.();
|
|
113
|
+
}, [o, c, s]), !o && !c ? null : /* @__PURE__ */ l(
|
|
114
|
+
pe,
|
|
115
|
+
{
|
|
116
|
+
isExiting: c,
|
|
117
|
+
onPress: p,
|
|
118
|
+
ref: r,
|
|
119
|
+
...e
|
|
120
|
+
}
|
|
121
|
+
);
|
|
122
|
+
}, pe = b(
|
|
123
|
+
({
|
|
124
|
+
className: e,
|
|
125
|
+
title: s,
|
|
126
|
+
onPress: o,
|
|
127
|
+
children: m,
|
|
128
|
+
isExiting: r,
|
|
129
|
+
defaultOpen: c,
|
|
130
|
+
promoting: p,
|
|
131
|
+
onPromotionEnd: i,
|
|
132
|
+
"aria-hidden": P,
|
|
133
|
+
...n
|
|
134
|
+
}, a) => {
|
|
135
|
+
const t = C(T), d = q(a), u = F(d, !c), $ = (g) => {
|
|
136
|
+
g.target === g.currentTarget && p && i?.();
|
|
137
|
+
};
|
|
138
|
+
return /* @__PURE__ */ f(
|
|
139
|
+
E,
|
|
140
|
+
{
|
|
141
|
+
"aria-hidden": P || void 0,
|
|
142
|
+
className: h(e, y.dismissPanel),
|
|
143
|
+
ref: d,
|
|
144
|
+
"data-entering": u || void 0,
|
|
145
|
+
"data-exiting": r || void 0,
|
|
146
|
+
"data-promoting": p || void 0,
|
|
147
|
+
onAnimationEnd: $,
|
|
148
|
+
...X(n),
|
|
149
|
+
children: [
|
|
150
|
+
/* @__PURE__ */ f(D, { children: [
|
|
151
|
+
/* @__PURE__ */ l("div", { children: s && /* @__PURE__ */ l(
|
|
152
|
+
N,
|
|
153
|
+
{
|
|
154
|
+
className: y.panelTitle,
|
|
155
|
+
title: s
|
|
156
|
+
}
|
|
157
|
+
) }),
|
|
158
|
+
/* @__PURE__ */ l(
|
|
159
|
+
O,
|
|
160
|
+
{
|
|
161
|
+
variant: "icon",
|
|
162
|
+
"aria-label": t.format("closePanel"),
|
|
163
|
+
onPress: o,
|
|
164
|
+
children: /* @__PURE__ */ l(V, { size: 20 })
|
|
165
|
+
}
|
|
166
|
+
)
|
|
167
|
+
] }),
|
|
168
|
+
m
|
|
169
|
+
]
|
|
170
|
+
}
|
|
171
|
+
);
|
|
172
|
+
}
|
|
173
|
+
), k = M({
|
|
174
|
+
panels: [],
|
|
175
|
+
addPanel: () => {
|
|
176
|
+
},
|
|
177
|
+
closePanel: () => {
|
|
178
|
+
},
|
|
179
|
+
removePanel: () => {
|
|
180
|
+
},
|
|
181
|
+
resetPromoting: () => {
|
|
182
|
+
}
|
|
183
|
+
}), be = ({
|
|
184
|
+
children: e,
|
|
185
|
+
className: s,
|
|
186
|
+
...o
|
|
187
|
+
}) => {
|
|
188
|
+
const { panels: m, closePanel: r, removePanel: c, resetPromoting: p } = me();
|
|
189
|
+
return /* @__PURE__ */ f(
|
|
190
|
+
"aside",
|
|
191
|
+
{
|
|
192
|
+
className: s,
|
|
193
|
+
...o,
|
|
194
|
+
children: [
|
|
195
|
+
m.map(({ id: i, ...P }, n, { length: a }) => /* @__PURE__ */ l(
|
|
196
|
+
S,
|
|
197
|
+
{
|
|
198
|
+
"aria-hidden": n < a - 1 || void 0,
|
|
199
|
+
id: i,
|
|
200
|
+
"data-debug": "Panel (dismiss)",
|
|
201
|
+
onOpenChange: (t) => {
|
|
202
|
+
t || r(i);
|
|
203
|
+
},
|
|
204
|
+
onExited: () => c(i),
|
|
205
|
+
onPromotionEnd: () => p(i),
|
|
206
|
+
...P
|
|
207
|
+
},
|
|
208
|
+
i
|
|
209
|
+
)),
|
|
210
|
+
e
|
|
211
|
+
]
|
|
212
|
+
}
|
|
213
|
+
);
|
|
214
|
+
}, ve = ({
|
|
215
|
+
children: e,
|
|
216
|
+
defaultPanels: s = [],
|
|
217
|
+
panelBehavior: o = "bring-to-front"
|
|
218
|
+
}) => {
|
|
219
|
+
const [m, r] = z(
|
|
220
|
+
s.map((n) => ({ ...n, isOpen: !0, defaultOpen: !0 }))
|
|
221
|
+
), c = (n) => {
|
|
222
|
+
r((a) => {
|
|
223
|
+
const t = a.findIndex((d) => d.id === n.id);
|
|
224
|
+
if (t === -1)
|
|
225
|
+
return [...a, { ...n, isOpen: !0 }];
|
|
226
|
+
if (o === "bring-to-front") {
|
|
227
|
+
if (t === a.length - 1) return a;
|
|
228
|
+
const d = a[t];
|
|
229
|
+
return [
|
|
230
|
+
...a.filter((u) => u.id !== n.id),
|
|
231
|
+
{ ...d, isOpen: !0, promoting: !0 }
|
|
232
|
+
];
|
|
233
|
+
}
|
|
234
|
+
return o === "pop-to" ? a.map(
|
|
235
|
+
(d, u) => u > t ? { ...d, isOpen: !1 } : d
|
|
236
|
+
) : a;
|
|
237
|
+
});
|
|
238
|
+
}, p = (n) => {
|
|
239
|
+
r(
|
|
240
|
+
(a) => a.map((t) => t.id === n ? { ...t, isOpen: !1 } : t)
|
|
241
|
+
);
|
|
242
|
+
}, i = (n) => {
|
|
243
|
+
r((a) => a.filter((t) => t.id !== n));
|
|
244
|
+
}, P = (n) => {
|
|
245
|
+
r(
|
|
246
|
+
(a) => a.map((t) => t.id === n ? { ...t, promoting: !1 } : t)
|
|
247
|
+
);
|
|
248
|
+
};
|
|
249
|
+
return /* @__PURE__ */ l(
|
|
250
|
+
k.Provider,
|
|
251
|
+
{
|
|
252
|
+
value: { panels: m, addPanel: c, closePanel: p, removePanel: i, resetPromoting: P },
|
|
253
|
+
children: e
|
|
254
|
+
}
|
|
255
|
+
);
|
|
256
|
+
}, me = () => {
|
|
257
|
+
const e = B(k);
|
|
258
|
+
if (!e)
|
|
259
|
+
throw new Error(
|
|
260
|
+
"useDismissPanels must be used within a DismissPanelContext"
|
|
261
|
+
);
|
|
262
|
+
return e;
|
|
263
|
+
}, Ce = ({
|
|
264
|
+
variant: e = "collapse",
|
|
265
|
+
...s
|
|
266
|
+
}) => /* @__PURE__ */ f(j.Provider, { value: { variant: e }, children: [
|
|
267
|
+
e === "collapse" && /* @__PURE__ */ l(se, { ...s }),
|
|
268
|
+
e === "dismiss" && /* @__PURE__ */ l(S, { ...s })
|
|
269
|
+
] });
|
|
270
|
+
export {
|
|
271
|
+
se as C,
|
|
272
|
+
S as D,
|
|
273
|
+
Ce as P,
|
|
274
|
+
k as a,
|
|
275
|
+
be as b,
|
|
276
|
+
ve as c,
|
|
277
|
+
E as d,
|
|
278
|
+
D as e,
|
|
279
|
+
N as f,
|
|
280
|
+
me as u
|
|
281
|
+
};
|
package/index.js
CHANGED
|
@@ -1,33 +1,37 @@
|
|
|
1
|
-
import { H as
|
|
2
|
-
import { L as r, a as l } from "./chunks/
|
|
3
|
-
import { M as m } from "./chunks/Main-
|
|
4
|
-
import { N as
|
|
5
|
-
import { C as v, D as g,
|
|
6
|
-
import { C as
|
|
7
|
-
import { N as
|
|
8
|
-
import { M as
|
|
1
|
+
import { H as s, a as o, b as t, M as n } from "./chunks/Header-DwXIrGCD.js";
|
|
2
|
+
import { L as r, a as l } from "./chunks/LayoutContent-DhVL-boV.js";
|
|
3
|
+
import { M as m } from "./chunks/Main-Ce4U9_ce.js";
|
|
4
|
+
import { N as p, a as d, b as f, c as u, d as C, e as M } from "./chunks/NavigationSubMenu-6PJ0fOjF.js";
|
|
5
|
+
import { C as v, D as b, a as g, b as D, c as H, P as c, d as L, e as y, f as A, u as S } from "./chunks/Panel-EbJUawMh.js";
|
|
6
|
+
import { C as B, P as I } from "./chunks/PanelContext-D6WQ7_yb.js";
|
|
7
|
+
import { N as T } from "./chunks/Navbar-wOOCcsru.js";
|
|
8
|
+
import { M as j } from "./chunks/MobileMenuContext-Coj0sJ0N.js";
|
|
9
9
|
export {
|
|
10
10
|
v as CollapsePanel,
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
11
|
+
B as CollapsePanelContext,
|
|
12
|
+
b as DismissPanel,
|
|
13
|
+
g as DismissPanelContext,
|
|
14
|
+
D as DismissPanelOutlet,
|
|
15
|
+
H as DismissPanelProvider,
|
|
16
|
+
s as Header,
|
|
17
|
+
o as HeaderAction,
|
|
15
18
|
t as HeaderActions,
|
|
16
19
|
r as Layout,
|
|
17
20
|
l as LayoutContent,
|
|
18
21
|
m as Main,
|
|
19
22
|
n as MobileMenu,
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
23
|
+
j as MobileMenuContext,
|
|
24
|
+
T as Navbar,
|
|
25
|
+
p as Navigation,
|
|
26
|
+
d as NavigationHeader,
|
|
27
|
+
f as NavigationItem,
|
|
28
|
+
u as NavigationLink,
|
|
26
29
|
C as NavigationSection,
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
30
|
+
M as NavigationSubMenu,
|
|
31
|
+
c as Panel,
|
|
32
|
+
L as PanelBody,
|
|
33
|
+
I as PanelContext,
|
|
34
|
+
y as PanelHeader,
|
|
35
|
+
A as PanelTitle,
|
|
36
|
+
S as useDismissPanels
|
|
33
37
|
};
|
package/layout/Layout.d.ts
CHANGED
|
@@ -1,7 +1,3 @@
|
|
|
1
1
|
import { DetailedHTMLProps, HTMLAttributes } from 'react';
|
|
2
|
-
type
|
|
3
|
-
export
|
|
4
|
-
export type LayoutContentProps = DivProps;
|
|
5
|
-
export declare const LayoutContent: ({ className, children, ...rest }: DivProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
-
export declare const Layout: ({ className, children, ...rest }: LayoutProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
-
export {};
|
|
2
|
+
export type LayoutProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
|
|
3
|
+
export declare const Layout: ({ className, ...rest }: LayoutProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react-vite';
|
|
|
2
2
|
import { Layout } from '.';
|
|
3
3
|
type Story = StoryObj<typeof Layout>;
|
|
4
4
|
declare const _default: {
|
|
5
|
-
component: ({ className,
|
|
5
|
+
component: ({ className, ...rest }: import('./Layout').LayoutProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
6
|
title: string;
|
|
7
7
|
tags: string[];
|
|
8
8
|
args: {
|
package/layout/index.d.ts
CHANGED
package/layout/index.js
CHANGED
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { DetailedHTMLProps, HTMLAttributes } from 'react';
|
|
2
|
+
export type LayoutContentProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
|
|
3
|
+
export declare const LayoutContent: ({ className, ...rest }: LayoutContentProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './LayoutContent';
|
package/main/index.js
CHANGED
package/package.json
CHANGED
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"description": "Midas Layout components",
|
|
15
15
|
"homepage": "https://designsystem.migrationsverket.se/",
|
|
16
16
|
"license": "CC0-1.0",
|
|
17
|
-
"version": "0.0.
|
|
17
|
+
"version": "0.0.19",
|
|
18
18
|
"module": "./index.js",
|
|
19
19
|
"type": "module",
|
|
20
20
|
"main": "./index.js",
|
|
@@ -36,6 +36,6 @@
|
|
|
36
36
|
"./*": "./*/index.js"
|
|
37
37
|
},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@midas-ds/components": "17.
|
|
39
|
+
"@midas-ds/components": "17.10.0"
|
|
40
40
|
}
|
|
41
41
|
}
|
package/panel/Panel.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { Key } from 'react-aria-components';
|
|
1
2
|
import { CollapseTriggerProps } from './collapse-panel';
|
|
2
3
|
import { DismissTriggerProps } from './dismiss-panel';
|
|
3
4
|
import { PanelBodyProps } from './panel-body';
|
|
@@ -6,5 +7,6 @@ export type PanelVariant = 'collapse' | 'dismiss' | undefined;
|
|
|
6
7
|
export type PanelTriggerProps<T extends PanelVariant> = T extends 'collapse' ? CollapseTriggerProps : T extends 'dismiss' ? DismissTriggerProps : never;
|
|
7
8
|
export type PanelProps<T extends PanelVariant> = PanelBodyProps & Pick<PanelTitleProps, 'title'> & PanelTriggerProps<T> & {
|
|
8
9
|
variant?: T;
|
|
10
|
+
id: Key;
|
|
9
11
|
};
|
|
10
12
|
export declare const Panel: <T extends PanelVariant>({ variant, ...rest }: PanelProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { PanelProps } from '..';
|
|
2
2
|
export interface CollapseTriggerProps {
|
|
3
3
|
isCollapsed?: boolean;
|
|
4
4
|
defaultCollapsed?: boolean;
|
|
5
5
|
onCollapseChange?: (isCollapsed: boolean) => void;
|
|
6
6
|
}
|
|
7
|
-
export
|
|
7
|
+
export type CollapsePanelProps = Omit<PanelProps<'collapse'>, 'variant'> & CollapseTriggerProps;
|
|
8
|
+
export declare const CollapsePanel: ({ children, className, isCollapsed: isCollapsedProp, defaultCollapsed, onCollapseChange, title, ...rest }: CollapsePanelProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -1,7 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { PanelProps } from '..';
|
|
2
2
|
export interface DismissTriggerProps {
|
|
3
3
|
isOpen?: boolean;
|
|
4
4
|
defaultOpen?: boolean;
|
|
5
5
|
onOpenChange?: (isOpen: boolean) => void;
|
|
6
|
+
onExited?: () => void;
|
|
7
|
+
promoting?: boolean;
|
|
8
|
+
onPromotionEnd?: () => void;
|
|
6
9
|
}
|
|
7
|
-
export
|
|
10
|
+
export type DismissPanelProps = Omit<PanelProps<'dismiss'>, 'variant'> & DismissTriggerProps;
|
|
11
|
+
export declare const DismissPanel: (props: DismissPanelProps) => import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { DismissPanelProps } from '.';
|
|
2
|
+
export interface PanelItem extends DismissPanelProps {
|
|
3
|
+
promoting?: boolean;
|
|
4
|
+
}
|
|
5
|
+
export interface DismissPanelContextValue {
|
|
6
|
+
panels: PanelItem[];
|
|
7
|
+
addPanel: (panel: Omit<PanelItem, 'isOpen' | 'defaultOpen'>) => void;
|
|
8
|
+
closePanel: (id: string) => void;
|
|
9
|
+
removePanel: (id: string) => void;
|
|
10
|
+
resetPromoting: (id: string) => void;
|
|
11
|
+
}
|
|
12
|
+
export declare const DismissPanelContext: import('react').Context<DismissPanelContextValue>;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { PanelItem } from './DismissPanelContext';
|
|
3
|
+
export type PanelBehavior = 'bring-to-front' | 'pop-to';
|
|
4
|
+
export interface DismissPanelProviderProps {
|
|
5
|
+
children: ReactNode;
|
|
6
|
+
defaultPanels?: PanelItem[];
|
|
7
|
+
panelBehavior?: PanelBehavior;
|
|
8
|
+
}
|
|
9
|
+
export declare const DismissPanelProvider: ({ children, defaultPanels, panelBehavior, }: DismissPanelProviderProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export declare const useDismissPanels: () => import('./DismissPanelContext').DismissPanelContextValue;
|
package/panel/index.js
CHANGED
|
@@ -1,12 +1,16 @@
|
|
|
1
|
-
import { C as
|
|
2
|
-
import { C as
|
|
1
|
+
import { C as e, D as l, a as n, b as P, c as i, P as o, d as t, e as m, f as r, u as C } from "../chunks/Panel-EbJUawMh.js";
|
|
2
|
+
import { C as x, P as d } from "../chunks/PanelContext-D6WQ7_yb.js";
|
|
3
3
|
export {
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
n as
|
|
8
|
-
P as
|
|
9
|
-
|
|
10
|
-
o as
|
|
11
|
-
t as
|
|
4
|
+
e as CollapsePanel,
|
|
5
|
+
x as CollapsePanelContext,
|
|
6
|
+
l as DismissPanel,
|
|
7
|
+
n as DismissPanelContext,
|
|
8
|
+
P as DismissPanelOutlet,
|
|
9
|
+
i as DismissPanelProvider,
|
|
10
|
+
o as Panel,
|
|
11
|
+
t as PanelBody,
|
|
12
|
+
d as PanelContext,
|
|
13
|
+
m as PanelHeader,
|
|
14
|
+
r as PanelTitle,
|
|
15
|
+
C as useDismissPanels
|
|
12
16
|
};
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import {
|
|
2
|
-
export type PanelBodyProps =
|
|
3
|
-
export declare const PanelBody: import('react').ForwardRefExoticComponent<
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
export type PanelBodyProps = HTMLAttributes<HTMLDivElement>;
|
|
3
|
+
export declare const PanelBody: import('react').ForwardRefExoticComponent<PanelBodyProps & import('react').RefAttributes<HTMLDivElement>>;
|
package/assets/Layout.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
._layout_13ndd_1{display:flex;flex-direction:column;font-family:var(--midas-typography-font-family);width:100%;height:100dvh}._content_13ndd_9{display:flex;position:relative;height:100%;overflow:hidden}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { jsx as s } from "react/jsx-runtime";
|
|
2
|
-
import '../assets/Layout.css';const c = "_layout_13ndd_1", e = "_content_13ndd_9", a = {
|
|
3
|
-
layout: c,
|
|
4
|
-
content: e
|
|
5
|
-
}, y = ({ className: t, children: o, ...n }) => /* @__PURE__ */ s(
|
|
6
|
-
"div",
|
|
7
|
-
{
|
|
8
|
-
className: `${t ?? ""} ${a.content}`,
|
|
9
|
-
...n,
|
|
10
|
-
children: o
|
|
11
|
-
}
|
|
12
|
-
), d = ({ className: t, children: o, ...n }) => /* @__PURE__ */ s(
|
|
13
|
-
"div",
|
|
14
|
-
{
|
|
15
|
-
className: `${t ?? ""} ${a.layout}`,
|
|
16
|
-
...n,
|
|
17
|
-
children: o
|
|
18
|
-
}
|
|
19
|
-
);
|
|
20
|
-
export {
|
|
21
|
-
d as L,
|
|
22
|
-
y as a
|
|
23
|
-
};
|
package/chunks/Main-DcX_nPtP.js
DELETED
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { jsx as s } from "react/jsx-runtime";
|
|
2
|
-
import '../assets/Main.css';const i = "_main_vtpiw_1", m = {
|
|
3
|
-
main: i
|
|
4
|
-
}, o = ({ className: a, ...n }) => /* @__PURE__ */ s(
|
|
5
|
-
"main",
|
|
6
|
-
{
|
|
7
|
-
className: `${a} ${m.main}`,
|
|
8
|
-
...n
|
|
9
|
-
}
|
|
10
|
-
);
|
|
11
|
-
export {
|
|
12
|
-
o as M
|
|
13
|
-
};
|
package/chunks/Panel-C1cbU0dG.js
DELETED
|
@@ -1,167 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsx as a, jsxs as r } from "react/jsx-runtime";
|
|
3
|
-
import { C as S, P as O } from "./PanelContext-D6WQ7_yb.js";
|
|
4
|
-
import { c as d, T as $ } from "./Text-B18MZHuN.js";
|
|
5
|
-
import { useControlledState as _ } from "@react-stately/utils";
|
|
6
|
-
import { u as B } from "./useIsMobileDevice-D0iMVFPx.js";
|
|
7
|
-
import { forwardRef as y, useRef as M } from "react";
|
|
8
|
-
import { c as P, u, B as x } from "./Button-CCH8cWvV.js";
|
|
9
|
-
import { useExitAnimation as z, useObjectRef as D, useEnterAnimation as E, filterDOMProps as H } from "@react-aria/utils";
|
|
10
|
-
import '../assets/Panel.css';const I = [
|
|
11
|
-
["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
|
|
12
|
-
["path", { d: "M9 3v18", key: "fh3hqa" }],
|
|
13
|
-
["path", { d: "m16 15-3-3 3-3", key: "14y99z" }]
|
|
14
|
-
], j = P("panel-left-close", I);
|
|
15
|
-
const w = [
|
|
16
|
-
["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", key: "afitv7" }],
|
|
17
|
-
["path", { d: "M9 3v18", key: "fh3hqa" }],
|
|
18
|
-
["path", { d: "m14 9 3 3-3 3", key: "8010ee" }]
|
|
19
|
-
], L = P("panel-left-open", w);
|
|
20
|
-
const R = [
|
|
21
|
-
["path", { d: "M18 6 6 18", key: "1bl5f8" }],
|
|
22
|
-
["path", { d: "m6 6 12 12", key: "d8bk6v" }]
|
|
23
|
-
], q = P("x", R), A = { expandSidebar: "Expand sidebar", collapseSidebar: "Collapse sidebar", closePanel: "Close panel" }, F = { expandSidebar: "Expandera sidopanel", collapseSidebar: "Minimera sidopanel", closePanel: "Stäng panel" }, v = {
|
|
24
|
-
en: A,
|
|
25
|
-
sv: F
|
|
26
|
-
}, X = "_collapsePanel_1uy7t_1", G = "_collapsed_1uy7t_4", J = "_panelTitle_1uy7t_17", f = {
|
|
27
|
-
collapsePanel: X,
|
|
28
|
-
collapsed: G,
|
|
29
|
-
panelTitle: J
|
|
30
|
-
}, K = ({
|
|
31
|
-
children: e,
|
|
32
|
-
className: s,
|
|
33
|
-
isCollapsed: l,
|
|
34
|
-
defaultCollapsed: t = !1,
|
|
35
|
-
onCollapseChange: o,
|
|
36
|
-
title: i,
|
|
37
|
-
...c
|
|
38
|
-
}) => {
|
|
39
|
-
const p = u(v), m = B(), [n, g] = _(
|
|
40
|
-
l,
|
|
41
|
-
t,
|
|
42
|
-
o
|
|
43
|
-
), N = () => g((k) => !k);
|
|
44
|
-
return m ? null : /* @__PURE__ */ a(S.Provider, { value: { isCollapsed: n }, children: /* @__PURE__ */ r(
|
|
45
|
-
b,
|
|
46
|
-
{
|
|
47
|
-
className: d(s, f.collapsePanel, {
|
|
48
|
-
[f.collapsed]: n
|
|
49
|
-
}),
|
|
50
|
-
...c,
|
|
51
|
-
children: [
|
|
52
|
-
/* @__PURE__ */ r(T, { children: [
|
|
53
|
-
/* @__PURE__ */ a("div", { children: !n && i && /* @__PURE__ */ a(
|
|
54
|
-
C,
|
|
55
|
-
{
|
|
56
|
-
className: f.panelTitle,
|
|
57
|
-
title: i
|
|
58
|
-
}
|
|
59
|
-
) }),
|
|
60
|
-
/* @__PURE__ */ a(
|
|
61
|
-
x,
|
|
62
|
-
{
|
|
63
|
-
variant: "icon",
|
|
64
|
-
"aria-label": n ? p.format("expandSidebar") : p.format("collapseSidebar"),
|
|
65
|
-
onPress: N,
|
|
66
|
-
children: n ? /* @__PURE__ */ a(L, { size: 20 }) : /* @__PURE__ */ a(j, { size: 20 })
|
|
67
|
-
}
|
|
68
|
-
)
|
|
69
|
-
] }),
|
|
70
|
-
e
|
|
71
|
-
]
|
|
72
|
-
}
|
|
73
|
-
) });
|
|
74
|
-
}, Q = "_panelBody_1rrgz_1", U = {
|
|
75
|
-
panelBody: Q
|
|
76
|
-
}, b = y(
|
|
77
|
-
({ className: e, ...s }, l) => /* @__PURE__ */ a(
|
|
78
|
-
"aside",
|
|
79
|
-
{
|
|
80
|
-
ref: l,
|
|
81
|
-
className: d(e, U.panelBody),
|
|
82
|
-
...s
|
|
83
|
-
}
|
|
84
|
-
)
|
|
85
|
-
), V = "_panelHeader_11qv1_1", W = {
|
|
86
|
-
panelHeader: V
|
|
87
|
-
}, T = ({ className: e, ...s }) => /* @__PURE__ */ a(
|
|
88
|
-
"div",
|
|
89
|
-
{
|
|
90
|
-
className: d(e, W.panelHeader),
|
|
91
|
-
...s
|
|
92
|
-
}
|
|
93
|
-
), Y = "_panelTitle_w7y4m_1", Z = {
|
|
94
|
-
panelTitle: Y
|
|
95
|
-
}, C = ({ className: e, title: s, ...l }) => /* @__PURE__ */ a(
|
|
96
|
-
$,
|
|
97
|
-
{
|
|
98
|
-
className: d(e, Z.panelTitle),
|
|
99
|
-
...l,
|
|
100
|
-
children: s
|
|
101
|
-
}
|
|
102
|
-
), ee = "_dismissPanel_1vxt8_1", se = "_panelTitle_1vxt8_44", h = {
|
|
103
|
-
dismissPanel: ee,
|
|
104
|
-
panelTitle: se
|
|
105
|
-
}, ae = (e) => {
|
|
106
|
-
const [s, l] = _(
|
|
107
|
-
e.isOpen,
|
|
108
|
-
e.defaultOpen || !1,
|
|
109
|
-
e.onOpenChange
|
|
110
|
-
), t = M(null), o = z(t, s), i = () => l((c) => !c);
|
|
111
|
-
return !s && !o ? null : /* @__PURE__ */ a(
|
|
112
|
-
le,
|
|
113
|
-
{
|
|
114
|
-
isExiting: o,
|
|
115
|
-
onPress: i,
|
|
116
|
-
ref: t,
|
|
117
|
-
...e
|
|
118
|
-
}
|
|
119
|
-
);
|
|
120
|
-
}, le = y(({ className: e, title: s, onPress: l, children: t, isExiting: o, ...i }, c) => {
|
|
121
|
-
const p = u(v), m = D(c), n = E(m);
|
|
122
|
-
return /* @__PURE__ */ r(
|
|
123
|
-
b,
|
|
124
|
-
{
|
|
125
|
-
className: d(e, h.dismissPanel),
|
|
126
|
-
ref: m,
|
|
127
|
-
"data-entering": n || void 0,
|
|
128
|
-
"data-exiting": o || void 0,
|
|
129
|
-
...H(i),
|
|
130
|
-
children: [
|
|
131
|
-
/* @__PURE__ */ r(T, { children: [
|
|
132
|
-
/* @__PURE__ */ a("div", { children: s && /* @__PURE__ */ a(
|
|
133
|
-
C,
|
|
134
|
-
{
|
|
135
|
-
className: h.panelTitle,
|
|
136
|
-
title: s
|
|
137
|
-
}
|
|
138
|
-
) }),
|
|
139
|
-
/* @__PURE__ */ a(
|
|
140
|
-
x,
|
|
141
|
-
{
|
|
142
|
-
variant: "icon",
|
|
143
|
-
"aria-label": p.format("closePanel"),
|
|
144
|
-
onPress: l,
|
|
145
|
-
children: /* @__PURE__ */ a(q, { size: 20 })
|
|
146
|
-
}
|
|
147
|
-
)
|
|
148
|
-
] }),
|
|
149
|
-
t
|
|
150
|
-
]
|
|
151
|
-
}
|
|
152
|
-
);
|
|
153
|
-
}), me = ({
|
|
154
|
-
variant: e = "collapse",
|
|
155
|
-
...s
|
|
156
|
-
}) => /* @__PURE__ */ r(O.Provider, { value: { variant: e }, children: [
|
|
157
|
-
e === "collapse" && /* @__PURE__ */ a(K, { ...s }),
|
|
158
|
-
e === "dismiss" && /* @__PURE__ */ a(ae, { ...s })
|
|
159
|
-
] });
|
|
160
|
-
export {
|
|
161
|
-
K as C,
|
|
162
|
-
ae as D,
|
|
163
|
-
me as P,
|
|
164
|
-
b as a,
|
|
165
|
-
T as b,
|
|
166
|
-
C as c
|
|
167
|
-
};
|