@midas-ds/layout 0.0.18 → 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 CHANGED
@@ -1,3 +1,14 @@
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
+
1
12
  ## 0.0.18 (2026-03-19)
2
13
 
3
14
  ### 🧱 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}._dismissPanel_1vxt8_1{position:absolute!important;top:0;right:0;width:320px;height:100%;overflow:hidden}._dismissPanel_1vxt8_1[data-entering]{animation:_slide-horizontally_1vxt8_1 var(--midas-transition-duration-fast)}._dismissPanel_1vxt8_1[data-exiting]{animation:_slide-horizontally_1vxt8_1 var(--midas-transition-duration-fast) reverse ease-in}@media(prefers-reduced-motion:reduce){._dismissPanel_1vxt8_1[data-entering],._dismissPanel_1vxt8_1[data-exiting]{animation-duration:1ms}}@media not (min-width:800px){._dismissPanel_1vxt8_1{bottom:0;width:100%;height:25%;left:0;top:unset}._dismissPanel_1vxt8_1[data-entering]{animation:_slide-vertically_1vxt8_1 var(--midas-transition-duration-fast)}._dismissPanel_1vxt8_1[data-exiting]{animation:_slide-vertically_1vxt8_1 var(--midas-transition-duration-fast) reverse ease-in}}._panelTitle_1vxt8_44{font-size:var(--midas-typography-font-size-20);display:block}@keyframes _slide-horizontally_1vxt8_1{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes _slide-vertically_1vxt8_1{0%{transform:translateY(100%)}to{transform:translateY(0)}}
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 o, a as s, b as t, M as n } from "./chunks/Header-DwXIrGCD.js";
2
- import { L as r, a as l } from "./chunks/Layout-bfQkpzAm.js";
3
- import { M as m } from "./chunks/Main-DcX_nPtP.js";
4
- import { N as P, a as M, b as N, c as f, d as C, e as b } from "./chunks/NavigationSubMenu-6PJ0fOjF.js";
5
- import { C as v, D as g, P as u, a as H, b as c, c as L } from "./chunks/Panel-C1cbU0dG.js";
6
- import { C as A, P as D } from "./chunks/PanelContext-D6WQ7_yb.js";
7
- import { N as k } from "./chunks/Navbar-wOOCcsru.js";
8
- import { M as I } from "./chunks/MobileMenuContext-Coj0sJ0N.js";
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
- A as CollapsePanelContext,
12
- g as DismissPanel,
13
- o as Header,
14
- s as HeaderAction,
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
- I as MobileMenuContext,
21
- k as Navbar,
22
- P as Navigation,
23
- M as NavigationHeader,
24
- N as NavigationItem,
25
- f as NavigationLink,
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
- b as NavigationSubMenu,
28
- u as Panel,
29
- H as PanelBody,
30
- D as PanelContext,
31
- c as PanelHeader,
32
- L as PanelTitle
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
  };
@@ -1,7 +1,3 @@
1
1
  import { DetailedHTMLProps, HTMLAttributes } from 'react';
2
- type DivProps = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
3
- export type LayoutProps = DivProps;
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, children, ...rest }: import('./Layout').LayoutProps) => import("react/jsx-runtime").JSX.Element;
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
@@ -1 +1,2 @@
1
1
  export * from './Layout';
2
+ export * from './layout-content';
package/layout/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { L as t, a as L } from "../chunks/Layout-bfQkpzAm.js";
1
+ import { L as t, a as L } from "../chunks/LayoutContent-DhVL-boV.js";
2
2
  export {
3
3
  t as Layout,
4
4
  L as LayoutContent
@@ -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
@@ -1,4 +1,4 @@
1
- import { M as r } from "../chunks/Main-DcX_nPtP.js";
1
+ import { M as r } from "../chunks/Main-Ce4U9_ce.js";
2
2
  export {
3
3
  r as Main
4
4
  };
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.18",
17
+ "version": "0.0.19",
18
18
  "module": "./index.js",
19
19
  "type": "module",
20
20
  "main": "./index.js",
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 { PanelBodyProps } from '..';
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 declare const CollapsePanel: ({ children, className, isCollapsed: isCollapsedProp, defaultCollapsed, onCollapseChange, title, ...rest }: PanelBodyProps & CollapseTriggerProps) => import("react/jsx-runtime").JSX.Element | null;
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 { PanelBodyProps } from '../panel-body';
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 declare const DismissPanel: (props: PanelBodyProps & DismissTriggerProps) => import("react/jsx-runtime").JSX.Element | null;
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,3 @@
1
+ import { HTMLAttributes } from 'react';
2
+ export type PanelRegionProps = HTMLAttributes<HTMLElement>;
3
+ export declare const DismissPanelOutlet: ({ children, className, ...rest }: PanelRegionProps) => import("react/jsx-runtime").JSX.Element;
@@ -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;
@@ -1 +1,5 @@
1
1
  export * from './DismissPanel';
2
+ export * from './DismissPanelContext';
3
+ export * from './DismissPanelOutlet';
4
+ export * from './DismissPanelProvider';
5
+ export * from './useDismissPanels';
@@ -0,0 +1 @@
1
+ export declare const useDismissPanels: () => import('./DismissPanelContext').DismissPanelContextValue;
package/panel/index.js CHANGED
@@ -1,12 +1,16 @@
1
- import { C as l, D as s, P as n, a as P, b as o, c as t } from "../chunks/Panel-C1cbU0dG.js";
2
- import { C as r, P as p } from "../chunks/PanelContext-D6WQ7_yb.js";
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
- l as CollapsePanel,
5
- r as CollapsePanelContext,
6
- s as DismissPanel,
7
- n as Panel,
8
- P as PanelBody,
9
- p as PanelContext,
10
- o as PanelHeader,
11
- t as PanelTitle
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 { DetailedHTMLProps, HTMLAttributes } from 'react';
2
- export type PanelBodyProps = DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>;
3
- export declare const PanelBody: import('react').ForwardRefExoticComponent<Omit<PanelBodyProps, "ref"> & import('react').RefAttributes<HTMLElement>>;
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
- };
@@ -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
- };
@@ -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
- };