@mittwald/flow-react-components 0.1.0-alpha.253 → 0.1.0-alpha.255
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/Content-cYnXBHf-.js +23 -0
- package/dist/Content.js +1 -1
- package/dist/List.js +1 -1
- package/dist/Navigation.js +1 -1
- package/dist/Section-DsyCp0AH.js +53 -0
- package/dist/Section.js +1 -1
- package/dist/Tabs.js +57 -56
- package/dist/styles.css +1 -1
- package/dist/types/components/Content/Content.d.ts +0 -1
- package/package.json +4 -4
- package/dist/Content-CAZPjbt5.js +0 -25
- package/dist/Section-QApyOFfC.js +0 -55
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
/* */
|
|
3
|
+
import e from "react";
|
|
4
|
+
import { C as i } from "./ClearPropsContext-CUvsbMn8.js";
|
|
5
|
+
import "./propsContext-DzAKlmhS.js";
|
|
6
|
+
import "@react-aria/utils";
|
|
7
|
+
import "remeda";
|
|
8
|
+
import "dot-prop";
|
|
9
|
+
import { f as l } from "./flowComponent-CY2oW3O9.js";
|
|
10
|
+
import { W as s } from "./Wrap-DGT1h1o3.js";
|
|
11
|
+
const W = l("Content", (t) => {
|
|
12
|
+
const {
|
|
13
|
+
children: r,
|
|
14
|
+
elementType: o = "div",
|
|
15
|
+
refProp: n,
|
|
16
|
+
clearPropsContext: m = !0,
|
|
17
|
+
...p
|
|
18
|
+
} = t, a = o;
|
|
19
|
+
return /* @__PURE__ */ e.createElement(s, { if: m }, /* @__PURE__ */ e.createElement(i, null, /* @__PURE__ */ e.createElement(a, { ref: n, ...p }, r)));
|
|
20
|
+
});
|
|
21
|
+
export {
|
|
22
|
+
W as C
|
|
23
|
+
};
|
package/dist/Content.js
CHANGED
package/dist/List.js
CHANGED
|
@@ -31,7 +31,7 @@ import "./context-Cf7tqFtF.js";
|
|
|
31
31
|
import { u as fe } from "./useOnChange-C1Quwyuz.js";
|
|
32
32
|
import { S as be } from "./SearchField-CMvYWO_P.js";
|
|
33
33
|
import { H as W } from "./Heading-FRIQlW19.js";
|
|
34
|
-
import { S as Se } from "./Section-
|
|
34
|
+
import { S as Se } from "./Section-DsyCp0AH.js";
|
|
35
35
|
import { getProperty as ve } from "dot-prop";
|
|
36
36
|
import { hash as vt } from "object-code";
|
|
37
37
|
import O from "zod";
|
package/dist/Navigation.js
CHANGED
|
@@ -10,7 +10,7 @@ import "@react-aria/utils";
|
|
|
10
10
|
import "remeda";
|
|
11
11
|
import { TunnelProvider as u, TunnelExit as p } from "@mittwald/react-tunnel";
|
|
12
12
|
import { A as x } from "./Accordion-CCq563rl.js";
|
|
13
|
-
import { C as N } from "./Content-
|
|
13
|
+
import { C as N } from "./Content-cYnXBHf-.js";
|
|
14
14
|
const C = "flow--navigation", I = "flow--navigation--item", b = "flow--navigation--icon", P = "flow--navigation--text", w = "flow--navigation--control-icon", r = {
|
|
15
15
|
navigation: C,
|
|
16
16
|
item: I,
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
"use client"
|
|
2
|
+
/* */
|
|
3
|
+
import e, { useId as u } from "react";
|
|
4
|
+
import f from "clsx";
|
|
5
|
+
import "./propsContext-DzAKlmhS.js";
|
|
6
|
+
import { P as c } from "./PropsContextProvider-C6Z4XGp6.js";
|
|
7
|
+
import "@react-aria/utils";
|
|
8
|
+
import "remeda";
|
|
9
|
+
import { f as i } from "./flowComponent-CY2oW3O9.js";
|
|
10
|
+
import * as s from "react-aria-components";
|
|
11
|
+
import { s as x } from "./ContextMenu.module-BZingr2B.js";
|
|
12
|
+
const C = "flow--section", S = {
|
|
13
|
+
section: C
|
|
14
|
+
}, E = i(
|
|
15
|
+
"ContextMenuSection",
|
|
16
|
+
(r) => {
|
|
17
|
+
const { children: t } = r, n = {
|
|
18
|
+
Heading: {
|
|
19
|
+
level: 5,
|
|
20
|
+
wrapWith: /* @__PURE__ */ e.createElement(s.Header, null)
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
return /* @__PURE__ */ e.createElement(s.Section, { className: x.section }, /* @__PURE__ */ e.createElement(c, { props: n, mergeInParentContext: !0 }, t));
|
|
24
|
+
}
|
|
25
|
+
), y = i("Section", (r) => {
|
|
26
|
+
const {
|
|
27
|
+
children: t,
|
|
28
|
+
className: n,
|
|
29
|
+
refProp: a,
|
|
30
|
+
renderContextMenuSection: l,
|
|
31
|
+
...m
|
|
32
|
+
} = r;
|
|
33
|
+
if (!t)
|
|
34
|
+
return null;
|
|
35
|
+
if (l)
|
|
36
|
+
return /* @__PURE__ */ e.createElement(E, null, t);
|
|
37
|
+
const p = f(S.section, n), o = u(), d = {
|
|
38
|
+
Heading: {
|
|
39
|
+
level: 2,
|
|
40
|
+
id: o
|
|
41
|
+
},
|
|
42
|
+
Header: {
|
|
43
|
+
renderSectionHeader: !0
|
|
44
|
+
},
|
|
45
|
+
List: {
|
|
46
|
+
"aria-labelledby": o
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
return /* @__PURE__ */ e.createElement("section", { ...m, className: p, ref: a }, /* @__PURE__ */ e.createElement(c, { props: d, mergeInParentContext: !0 }, t));
|
|
50
|
+
});
|
|
51
|
+
export {
|
|
52
|
+
y as S
|
|
53
|
+
};
|
package/dist/Section.js
CHANGED
package/dist/Tabs.js
CHANGED
|
@@ -1,32 +1,33 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
|
-
import e, { useRef as
|
|
4
|
-
import * as
|
|
3
|
+
import e, { useRef as h, useState as w, useEffect as M, useId as N, createContext as I, useContext as P } from "react";
|
|
4
|
+
import * as C from "react-aria-components";
|
|
5
5
|
import u from "clsx";
|
|
6
|
-
import { TunnelExit as
|
|
7
|
-
import { f as
|
|
8
|
-
import { useCallbackRef as
|
|
9
|
-
import { a as
|
|
10
|
-
import { M as
|
|
11
|
-
import { B as
|
|
6
|
+
import { TunnelExit as E, TunnelProvider as y, TunnelEntry as f } from "@mittwald/react-tunnel";
|
|
7
|
+
import { f as O } from "./flowComponent-CY2oW3O9.js";
|
|
8
|
+
import { useCallbackRef as S } from "use-callback-ref";
|
|
9
|
+
import { a as A, C as B } from "./ContextMenuTrigger-5-EjHDtY.js";
|
|
10
|
+
import { M as K } from "./MenuItem-CFE7SA5J.js";
|
|
11
|
+
import { B as L } from "./Button-BepCRVIi.js";
|
|
12
12
|
import "@tabler/icons-react";
|
|
13
13
|
import "./Icon-cEgH3ZXQ.js";
|
|
14
|
-
import { I as
|
|
14
|
+
import { I as W } from "./IconContextMenu-DLHXM1Ph.js";
|
|
15
15
|
import { T as F } from "./Text-T_kNKeFe.js";
|
|
16
16
|
import "./propsContext-DzAKlmhS.js";
|
|
17
17
|
import { P as R } from "./PropsContextProvider-C6Z4XGp6.js";
|
|
18
18
|
import "@react-aria/utils";
|
|
19
19
|
import "remeda";
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
20
|
+
import { A as x } from "./Activity-CmfZpgOM.js";
|
|
21
|
+
const $ = "flow--tabs", k = "flow--tabs--list", j = {
|
|
22
|
+
tabs: $,
|
|
23
|
+
list: k
|
|
24
|
+
}, q = "flow--tabs--tab-list", z = "flow--tabs--tab-list--context-menu-button", D = "flow--tabs--tab-list--titles", G = "flow--tabs--tab-list--collapsed", b = {
|
|
25
|
+
tabList: q,
|
|
26
|
+
contextMenuButton: z,
|
|
27
|
+
titles: D,
|
|
28
|
+
collapsed: G
|
|
29
|
+
}, H = () => {
|
|
30
|
+
const s = h(), [n, r] = w(!1), o = S(null, (t) => {
|
|
30
31
|
l(), c(t);
|
|
31
32
|
}), a = ([
|
|
32
33
|
t
|
|
@@ -49,37 +50,37 @@ const W = "flow--tabs", $ = "flow--tabs--list", k = {
|
|
|
49
50
|
ref: o,
|
|
50
51
|
isOverflowing: n
|
|
51
52
|
};
|
|
52
|
-
},
|
|
53
|
-
tabTitle:
|
|
54
|
-
text:
|
|
55
|
-
menuItem:
|
|
56
|
-
}, U = (s) => {
|
|
57
|
-
const { className: n, ...r } = s, o = u(n, p.tabTitle);
|
|
58
|
-
return /* @__PURE__ */ e.createElement("div", { ...r, className: o, "data-selected": !0 }, /* @__PURE__ */ e.createElement(C, { id: "ActiveTitle" }));
|
|
53
|
+
}, J = "flow--tabs--tab-title", Q = "flow--tabs--tab-title--text", U = "flow--tabs--tab-title--menu-item", p = {
|
|
54
|
+
tabTitle: J,
|
|
55
|
+
text: Q,
|
|
56
|
+
menuItem: U
|
|
59
57
|
}, V = (s) => {
|
|
60
|
-
const {
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
58
|
+
const { className: n, ...r } = s, o = u(n, p.tabTitle);
|
|
59
|
+
return /* @__PURE__ */ e.createElement("div", { ...r, className: o, "data-selected": !0 }, /* @__PURE__ */ e.createElement(E, { id: "ActiveTitle" }));
|
|
60
|
+
}, X = (s) => {
|
|
61
|
+
const { selection: n, disabledKeys: r, onContextMenuSelectionChange: o } = s, a = N(), c = H(), l = c.isOverflowing, t = u(b.tabList, l && b.collapsed), i = (v) => {
|
|
62
|
+
o(v);
|
|
63
|
+
}, m = /* @__PURE__ */ e.createElement(C.TabList, { className: b.titles, ref: c.ref }, /* @__PURE__ */ e.createElement(E, { id: "Titles" })), d = l && /* @__PURE__ */ e.createElement(V, { id: a }), T = l && /* @__PURE__ */ e.createElement(A, null, /* @__PURE__ */ e.createElement(
|
|
64
|
+
L,
|
|
64
65
|
{
|
|
65
66
|
variant: "soft",
|
|
66
67
|
className: b.contextMenuButton,
|
|
67
68
|
color: "secondary",
|
|
68
69
|
"aria-labelledby": a
|
|
69
70
|
},
|
|
70
|
-
/* @__PURE__ */ e.createElement(
|
|
71
|
+
/* @__PURE__ */ e.createElement(W, null)
|
|
71
72
|
), /* @__PURE__ */ e.createElement(
|
|
72
|
-
|
|
73
|
+
B,
|
|
73
74
|
{
|
|
74
75
|
disabledKeys: r,
|
|
75
76
|
selectedKeys: n ? [n] : void 0,
|
|
76
77
|
selectionMode: "navigation",
|
|
77
|
-
onAction: (
|
|
78
|
+
onAction: (v) => i(v)
|
|
78
79
|
},
|
|
79
|
-
/* @__PURE__ */ e.createElement(
|
|
80
|
+
/* @__PURE__ */ e.createElement(E, { id: "ContextMenuItems" })
|
|
80
81
|
));
|
|
81
82
|
return /* @__PURE__ */ e.createElement("div", { className: t }, m, d, T);
|
|
82
|
-
},
|
|
83
|
+
}, Te = O("Tabs", (s) => {
|
|
83
84
|
const {
|
|
84
85
|
children: n,
|
|
85
86
|
className: r,
|
|
@@ -87,11 +88,11 @@ const W = "flow--tabs", $ = "flow--tabs--list", k = {
|
|
|
87
88
|
disabledKeys: a,
|
|
88
89
|
refProp: c,
|
|
89
90
|
...l
|
|
90
|
-
} = s, t = u(
|
|
91
|
+
} = s, t = u(j.tabs, r), [i, m] = w(
|
|
91
92
|
o
|
|
92
93
|
);
|
|
93
|
-
return /* @__PURE__ */ e.createElement(
|
|
94
|
-
|
|
94
|
+
return /* @__PURE__ */ e.createElement(y, null, n, /* @__PURE__ */ e.createElement(
|
|
95
|
+
C.Tabs,
|
|
95
96
|
{
|
|
96
97
|
slot: null,
|
|
97
98
|
className: t,
|
|
@@ -102,30 +103,30 @@ const W = "flow--tabs", $ = "flow--tabs--list", k = {
|
|
|
102
103
|
ref: c
|
|
103
104
|
},
|
|
104
105
|
/* @__PURE__ */ e.createElement(
|
|
105
|
-
|
|
106
|
+
X,
|
|
106
107
|
{
|
|
107
108
|
selection: i,
|
|
108
109
|
onContextMenuSelectionChange: m,
|
|
109
110
|
disabledKeys: a
|
|
110
111
|
}
|
|
111
112
|
),
|
|
112
|
-
/* @__PURE__ */ e.createElement(
|
|
113
|
+
/* @__PURE__ */ e.createElement(E, { id: "Panels" })
|
|
113
114
|
));
|
|
114
|
-
}),
|
|
115
|
+
}), g = I({
|
|
115
116
|
id: "undefined"
|
|
116
|
-
}),
|
|
117
|
-
const { children: n, className: r, ...o } = s, { id: a } =
|
|
118
|
-
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(f, { id: "Titles" }, /* @__PURE__ */ e.createElement(
|
|
119
|
-
},
|
|
120
|
-
tabPanel:
|
|
121
|
-
},
|
|
122
|
-
const { children: n, className: r, id: o, ...a } = s, c = u(
|
|
117
|
+
}), Y = () => P(g), Z = g.Provider, ve = (s) => {
|
|
118
|
+
const { children: n, className: r, ...o } = s, { id: a } = Y(), c = u(p.tabTitle, r);
|
|
119
|
+
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(f, { id: "Titles" }, /* @__PURE__ */ e.createElement(C.Tab, { ...o, id: a, className: c }, (l) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(F, { emulateBoldWidth: !0 }, /* @__PURE__ */ e.createElement("span", { className: p.text }, n)), /* @__PURE__ */ e.createElement(f, { id: "ActiveTitle" }, l.isSelected && n)))), /* @__PURE__ */ e.createElement(f, { id: "ContextMenuItems" }, /* @__PURE__ */ e.createElement(K, { className: p.menuItem, id: a }, n)));
|
|
120
|
+
}, _ = "flow--tabs--tab--tab-panel", ee = {
|
|
121
|
+
tabPanel: _
|
|
122
|
+
}, xe = (s) => {
|
|
123
|
+
const { children: n, className: r, id: o, ...a } = s, c = u(ee.tabPanel, r), l = N(), t = o ?? l, i = (m) => {
|
|
123
124
|
const d = m.state.selectedKey === t, T = {
|
|
124
125
|
Content: {
|
|
125
|
-
isActive: d
|
|
126
|
+
wrapWith: /* @__PURE__ */ e.createElement(x, { isActive: d })
|
|
126
127
|
},
|
|
127
128
|
Section: {
|
|
128
|
-
isActive: d
|
|
129
|
+
wrapWith: /* @__PURE__ */ e.createElement(x, { isActive: d })
|
|
129
130
|
}
|
|
130
131
|
};
|
|
131
132
|
return /* @__PURE__ */ e.createElement(
|
|
@@ -137,8 +138,8 @@ const W = "flow--tabs", $ = "flow--tabs--list", k = {
|
|
|
137
138
|
n
|
|
138
139
|
);
|
|
139
140
|
};
|
|
140
|
-
return /* @__PURE__ */ e.createElement(f, { id: "Panels" }, /* @__PURE__ */ e.createElement(
|
|
141
|
-
|
|
141
|
+
return /* @__PURE__ */ e.createElement(f, { id: "Panels" }, /* @__PURE__ */ e.createElement(Z, { value: { id: t } }, /* @__PURE__ */ e.createElement(
|
|
142
|
+
C.TabPanel,
|
|
142
143
|
{
|
|
143
144
|
className: c,
|
|
144
145
|
shouldForceMount: !0,
|
|
@@ -149,8 +150,8 @@ const W = "flow--tabs", $ = "flow--tabs--list", k = {
|
|
|
149
150
|
)));
|
|
150
151
|
};
|
|
151
152
|
export {
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
153
|
+
xe as Tab,
|
|
154
|
+
ve as TabTitle,
|
|
155
|
+
Te as Tabs,
|
|
156
|
+
Te as default
|
|
156
157
|
};
|