@mittwald/flow-react-components 0.1.0-alpha.428 → 0.1.0-alpha.429
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 +13 -0
- package/dist/css/MenuItem.css +1 -1
- package/dist/css/Navigation.css +1 -1
- package/dist/css/Option.css +1 -1
- package/dist/js/Tabs.js +77 -72
- package/dist/js/all.css +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,19 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file. See
|
|
4
4
|
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [0.1.0-alpha.429](https://github.com/mittwald/flow/compare/0.1.0-alpha.428...0.1.0-alpha.429) (2025-02-17)
|
|
7
|
+
|
|
8
|
+
### Bug Fixes
|
|
9
|
+
|
|
10
|
+
- **Tabs:** fix onSelectionChange not working
|
|
11
|
+
([#1181](https://github.com/mittwald/flow/issues/1181))
|
|
12
|
+
([761c4a0](https://github.com/mittwald/flow/commit/761c4a0e6a24ca0842b7282df736f9e03c10bb9d))
|
|
13
|
+
|
|
14
|
+
# Change Log
|
|
15
|
+
|
|
16
|
+
All notable changes to this project will be documented in this file. See
|
|
17
|
+
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
18
|
+
|
|
6
19
|
# [0.1.0-alpha.428](https://github.com/mittwald/flow/compare/0.1.0-alpha.427...0.1.0-alpha.428) (2025-02-14)
|
|
7
20
|
|
|
8
21
|
### Features
|
package/dist/css/MenuItem.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.flow--menu-item{display:flex;flex-direction:row;border:none;border-radius:var(--menu-item--corner-radius);background-color:var(--menu-item--background-color--default);padding:var(--menu-item--padding-y) var(--menu-item--padding-x);align-items:center}.flow--menu-item:not(a){cursor:default}.flow--menu-item:has(.flow--menu-item--switch){justify-content:space-between}.flow--menu-item{outline-color:var(--focus--outline-color);outline-offset:var(--focus--outline-offset);outline-width:var(--focus--outline-width);outline-style:none}.flow--menu-item[data-focused],.flow--menu-item:focus{outline-style:none}.flow--menu-item[data-focus-visible],.flow--menu-item:focus-visible{outline-style:auto}.flow--menu-item[data-focused]:not([data-focus-visible]):focus-visible{outline-style:none}.flow--menu-item{outline-offset:calc(var(--size-px--xxs) * -1)}.flow--menu-item .flow--menu-item--icon{color:var(--menu-item--icon-color--default)
|
|
1
|
+
.flow--menu-item{display:flex;flex-direction:row;border:none;border-radius:var(--menu-item--corner-radius);background-color:var(--menu-item--background-color--default);padding:var(--menu-item--padding-y) var(--menu-item--padding-x);align-items:center;column-gap:var(--menu-item--spacing)}.flow--menu-item:not(a){cursor:default}.flow--menu-item:has(.flow--menu-item--switch){justify-content:space-between}.flow--menu-item{outline-color:var(--focus--outline-color);outline-offset:var(--focus--outline-offset);outline-width:var(--focus--outline-width);outline-style:none}.flow--menu-item[data-focused],.flow--menu-item:focus{outline-style:none}.flow--menu-item[data-focus-visible],.flow--menu-item:focus-visible{outline-style:auto}.flow--menu-item[data-focused]:not([data-focus-visible]):focus-visible{outline-style:none}.flow--menu-item{outline-offset:calc(var(--size-px--xxs) * -1)}.flow--menu-item .flow--menu-item--icon{color:var(--menu-item--icon-color--default)}.flow--menu-item:hover{background-color:var(--menu-item--background-color--hover)}.flow--menu-item[data-focused]{outline-style:none}.flow--menu-item[data-focus-visible]{outline-style:solid}.flow--menu-item:not(:has(.flow--menu-item--control-icon))[aria-current],.flow--menu-item:not(:has(.flow--menu-item--control-icon))[data-selected]{background-color:var(--menu-item--background-color--current);font-weight:var(--menu-item--font-weight--current);color:var(--menu-item--color--current)}.flow--menu-item[aria-current] .flow--menu-item--icon,.flow--menu-item[data-selected] .flow--menu-item--icon{color:var(--menu-item--icon-color--current)}.flow--menu-item[aria-disabled]{background-color:var(--menu-item--disabled-background-color);color:var(--menu-item--disabled-color)}.flow--menu-item[aria-disabled] .flow--menu-item--icon{color:var(--menu-item--icon-color--disabled)}.flow--menu-item:has(.flow--menu-item--avatar){padding:0;background:none;width:fit-content;position:relative;border-radius:var(--corner-radius--round)}.flow--menu-item:has(.flow--menu-item--avatar) .flow--menu-item--icon{display:none;position:absolute;width:70%;height:70%;top:15%;left:15%;color:var(--image-button--hover-icon-color)}.flow--menu-item:has(.flow--menu-item--avatar):hover .flow--menu-item--avatar{filter:brightness(var(--image-button--brightness--hover))}.flow--menu-item:has(.flow--menu-item--avatar):hover .flow--menu-item--icon{display:block}.flow--menu-item:has(.flow--menu-item--avatar)[data-pressed] .flow--menu-item--avatar{filter:brightness(var(--image-button--brightness--pressed))}.flow--menu-item:has(.flow--menu-item--avatar)[data-pressed] .flow--menu-item--icon{display:block}
|
package/dist/css/Navigation.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.flow--navigation ul{display:flex;flex-direction:column;row-gap:var(--menu--item-to-item-spacing)}.flow--navigation ul:empty{display:none}.flow--navigation .flow--navigation--item{display:flex;flex-direction:row;border:none;border-radius:var(--menu-item--corner-radius);background-color:var(--menu-item--background-color--default);padding:var(--menu-item--padding-y) var(--menu-item--padding-x);align-items:center}.flow--navigation .flow--navigation--item:not(a){cursor:default}.flow--navigation .flow--navigation--item:has(.flow--navigation--switch){justify-content:space-between}.flow--navigation .flow--navigation--item{outline-color:var(--focus--outline-color);outline-offset:var(--focus--outline-offset);outline-width:var(--focus--outline-width);outline-style:none}.flow--navigation .flow--navigation--item[data-focused],.flow--navigation .flow--navigation--item:focus{outline-style:none}.flow--navigation .flow--navigation--item[data-focus-visible],.flow--navigation .flow--navigation--item:focus-visible{outline-style:auto}.flow--navigation .flow--navigation--item[data-focused]:not([data-focus-visible]):focus-visible{outline-style:none}.flow--navigation .flow--navigation--item{outline-offset:calc(var(--size-px--xxs) * -1)}.flow--navigation .flow--navigation--item .flow--navigation--icon{color:var(--menu-item--icon-color--default)
|
|
1
|
+
.flow--navigation ul{display:flex;flex-direction:column;row-gap:var(--menu--item-to-item-spacing)}.flow--navigation ul:empty{display:none}.flow--navigation .flow--navigation--item{display:flex;flex-direction:row;border:none;border-radius:var(--menu-item--corner-radius);background-color:var(--menu-item--background-color--default);padding:var(--menu-item--padding-y) var(--menu-item--padding-x);align-items:center;column-gap:var(--menu-item--spacing)}.flow--navigation .flow--navigation--item:not(a){cursor:default}.flow--navigation .flow--navigation--item:has(.flow--navigation--switch){justify-content:space-between}.flow--navigation .flow--navigation--item{outline-color:var(--focus--outline-color);outline-offset:var(--focus--outline-offset);outline-width:var(--focus--outline-width);outline-style:none}.flow--navigation .flow--navigation--item[data-focused],.flow--navigation .flow--navigation--item:focus{outline-style:none}.flow--navigation .flow--navigation--item[data-focus-visible],.flow--navigation .flow--navigation--item:focus-visible{outline-style:auto}.flow--navigation .flow--navigation--item[data-focused]:not([data-focus-visible]):focus-visible{outline-style:none}.flow--navigation .flow--navigation--item{outline-offset:calc(var(--size-px--xxs) * -1)}.flow--navigation .flow--navigation--item .flow--navigation--icon{color:var(--menu-item--icon-color--default)}.flow--navigation .flow--navigation--item:hover{background-color:var(--menu-item--background-color--hover)}.flow--navigation .flow--navigation--item[data-focused]{outline-style:none}.flow--navigation .flow--navigation--item[data-focus-visible]{outline-style:solid}.flow--navigation .flow--navigation--item:not(:has(.flow--navigation--control-icon))[aria-current],.flow--navigation .flow--navigation--item:not(:has(.flow--navigation--control-icon))[data-selected]{background-color:var(--menu-item--background-color--current);font-weight:var(--menu-item--font-weight--current);color:var(--menu-item--color--current)}.flow--navigation .flow--navigation--item[aria-current] .flow--navigation--icon,.flow--navigation .flow--navigation--item[data-selected] .flow--navigation--icon{color:var(--menu-item--icon-color--current)}.flow--navigation .flow--navigation--item[aria-disabled]{background-color:var(--menu-item--disabled-background-color);color:var(--menu-item--disabled-color)}.flow--navigation .flow--navigation--item[aria-disabled] .flow--navigation--icon{color:var(--menu-item--icon-color--disabled)}.flow--navigation .flow--navigation--item:has(.flow--navigation--avatar){padding:0;background:none;width:fit-content;position:relative;border-radius:var(--corner-radius--round)}.flow--navigation .flow--navigation--item:has(.flow--navigation--avatar) .flow--navigation--icon{display:none;position:absolute;width:70%;height:70%;top:15%;left:15%;color:var(--image-button--hover-icon-color)}.flow--navigation .flow--navigation--item:has(.flow--navigation--avatar):hover .flow--navigation--avatar{filter:brightness(var(--image-button--brightness--hover))}.flow--navigation .flow--navigation--item:has(.flow--navigation--avatar):hover .flow--navigation--icon{display:block}.flow--navigation .flow--navigation--item:has(.flow--navigation--avatar)[data-pressed] .flow--navigation--avatar{filter:brightness(var(--image-button--brightness--pressed))}.flow--navigation .flow--navigation--item:has(.flow--navigation--avatar)[data-pressed] .flow--navigation--icon{display:block}.flow--navigation hr{margin-bottom:var(--menu--group-to-group-spacing)}.flow--navigation--navigation-group:not(.flow--navigation--navigation-group--collapsable) ul{padding-inline:var(--accordion--padding-x);padding-block:var(--accordion--padding-y)}.flow--navigation--navigation-group:not(:last-child){margin-bottom:var(--menu--group-to-group-spacing)}.flow--navigation--navigation-group .flow--navigation--navigation-group--label{display:block;padding-inline-start:var(--accordion--padding-x);padding-block:var(--accordion--padding-y)}
|
package/dist/css/Option.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.flow--options--popover{width:var(--trigger-width)}.flow--options{display:flex;flex-direction:column;row-gap:var(--menu--item-to-item-spacing);outline:none}.flow--option{display:flex;flex-direction:row;border:none;border-radius:var(--menu-item--corner-radius);background-color:var(--menu-item--background-color--default);padding:var(--menu-item--padding-y) var(--menu-item--padding-x);align-items:center}.flow--option:not(a){cursor:default}.flow--option:has(.flow--option--switch){justify-content:space-between}.flow--option{outline-color:var(--focus--outline-color);outline-offset:var(--focus--outline-offset);outline-width:var(--focus--outline-width);outline-style:none}.flow--option[data-focused],.flow--option:focus{outline-style:none}.flow--option[data-focus-visible],.flow--option:focus-visible{outline-style:auto}.flow--option[data-focused]:not([data-focus-visible]):focus-visible{outline-style:none}.flow--option{outline-offset:calc(var(--size-px--xxs) * -1)}.flow--option .flow--option--icon{color:var(--menu-item--icon-color--default)
|
|
1
|
+
.flow--options--popover{width:var(--trigger-width)}.flow--options{display:flex;flex-direction:column;row-gap:var(--menu--item-to-item-spacing);outline:none}.flow--option{display:flex;flex-direction:row;border:none;border-radius:var(--menu-item--corner-radius);background-color:var(--menu-item--background-color--default);padding:var(--menu-item--padding-y) var(--menu-item--padding-x);align-items:center;column-gap:var(--menu-item--spacing)}.flow--option:not(a){cursor:default}.flow--option:has(.flow--option--switch){justify-content:space-between}.flow--option{outline-color:var(--focus--outline-color);outline-offset:var(--focus--outline-offset);outline-width:var(--focus--outline-width);outline-style:none}.flow--option[data-focused],.flow--option:focus{outline-style:none}.flow--option[data-focus-visible],.flow--option:focus-visible{outline-style:auto}.flow--option[data-focused]:not([data-focus-visible]):focus-visible{outline-style:none}.flow--option{outline-offset:calc(var(--size-px--xxs) * -1)}.flow--option .flow--option--icon{color:var(--menu-item--icon-color--default)}.flow--option:hover{background-color:var(--menu-item--background-color--hover)}.flow--option[data-focused]{outline-style:none}.flow--option[data-focus-visible]{outline-style:solid}.flow--option:not(:has(.flow--option--control-icon))[aria-current],.flow--option:not(:has(.flow--option--control-icon))[data-selected]{background-color:var(--menu-item--background-color--current);font-weight:var(--menu-item--font-weight--current);color:var(--menu-item--color--current)}.flow--option[aria-current] .flow--option--icon,.flow--option[data-selected] .flow--option--icon{color:var(--menu-item--icon-color--current)}.flow--option[aria-disabled]{background-color:var(--menu-item--disabled-background-color);color:var(--menu-item--disabled-color)}.flow--option[aria-disabled] .flow--option--icon{color:var(--menu-item--icon-color--disabled)}.flow--option:has(.flow--option--avatar){padding:0;background:none;width:fit-content;position:relative;border-radius:var(--corner-radius--round)}.flow--option:has(.flow--option--avatar) .flow--option--icon{display:none;position:absolute;width:70%;height:70%;top:15%;left:15%;color:var(--image-button--hover-icon-color)}.flow--option:has(.flow--option--avatar):hover .flow--option--avatar{filter:brightness(var(--image-button--brightness--hover))}.flow--option:has(.flow--option--avatar):hover .flow--option--icon{display:block}.flow--option:has(.flow--option--avatar)[data-pressed] .flow--option--avatar{filter:brightness(var(--image-button--brightness--pressed))}.flow--option:has(.flow--option--avatar)[data-pressed] .flow--option--icon{display:block}
|
package/dist/js/Tabs.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
"use client"
|
|
2
2
|
/* */
|
|
3
|
-
import e, { useRef as
|
|
4
|
-
import * as
|
|
5
|
-
import
|
|
6
|
-
import { TunnelExit as
|
|
7
|
-
import { f as
|
|
8
|
-
import { useCallbackRef as
|
|
3
|
+
import e, { useRef as N, useState as w, useEffect as M, useId as g, createContext as I, useContext as P } from "react";
|
|
4
|
+
import * as T from "react-aria-components";
|
|
5
|
+
import b from "clsx";
|
|
6
|
+
import { TunnelExit as C, TunnelProvider as y, TunnelEntry as p } from "@mittwald/react-tunnel";
|
|
7
|
+
import { f as S } from "./flowComponent-B1r5sCmz.js";
|
|
8
|
+
import { useCallbackRef as O } from "use-callback-ref";
|
|
9
9
|
import { a as A, C as B } from "./ContextMenuTrigger-Bc1ziP-n.js";
|
|
10
10
|
import { M as K } from "./MenuItem-C6RgW6U3.js";
|
|
11
11
|
import "./ContextMenuSection-D1i0qzNl.js";
|
|
@@ -19,55 +19,55 @@ import { PropsContextProvider as R } from "./PropsContextProvider.js";
|
|
|
19
19
|
import "@react-aria/utils";
|
|
20
20
|
import "remeda";
|
|
21
21
|
import { A as x } from "./Activity-BtRjnhmA.js";
|
|
22
|
-
const $ = "flow--tabs",
|
|
22
|
+
const $ = "flow--tabs", j = "flow--tabs--list", q = {
|
|
23
23
|
tabs: $,
|
|
24
|
-
list:
|
|
25
|
-
},
|
|
26
|
-
tabList:
|
|
27
|
-
contextMenuButton:
|
|
28
|
-
titles:
|
|
29
|
-
collapsed:
|
|
30
|
-
},
|
|
31
|
-
const
|
|
32
|
-
|
|
33
|
-
}),
|
|
24
|
+
list: j
|
|
25
|
+
}, z = "flow--tabs--tab-list", D = "flow--tabs--tab-list--context-menu-button", G = "flow--tabs--tab-list--titles", H = "flow--tabs--tab-list--collapsed", f = {
|
|
26
|
+
tabList: z,
|
|
27
|
+
contextMenuButton: D,
|
|
28
|
+
titles: G,
|
|
29
|
+
collapsed: H
|
|
30
|
+
}, J = () => {
|
|
31
|
+
const o = N(), [n, r] = w(!1), a = O(null, (t) => {
|
|
32
|
+
s(), c(t);
|
|
33
|
+
}), l = ([
|
|
34
34
|
t
|
|
35
35
|
]) => {
|
|
36
36
|
t && r(!t.isIntersecting);
|
|
37
|
-
}, c = (t =
|
|
37
|
+
}, c = (t = a.current) => {
|
|
38
38
|
if (t && t instanceof Element) {
|
|
39
|
-
const
|
|
39
|
+
const m = new IntersectionObserver(l, {
|
|
40
40
|
root: t.parentElement,
|
|
41
41
|
// 1 = invoke callback when the element is 100% visible within the parent element
|
|
42
42
|
threshold: 1
|
|
43
43
|
});
|
|
44
|
-
|
|
44
|
+
o.current = m, m.observe(t);
|
|
45
45
|
}
|
|
46
|
-
},
|
|
46
|
+
}, s = () => {
|
|
47
47
|
var t;
|
|
48
|
-
(t =
|
|
48
|
+
(t = o.current) == null || t.disconnect();
|
|
49
49
|
};
|
|
50
|
-
return M(() => (c(),
|
|
51
|
-
ref:
|
|
50
|
+
return M(() => (c(), s), [o.current]), {
|
|
51
|
+
ref: a,
|
|
52
52
|
isOverflowing: n
|
|
53
53
|
};
|
|
54
|
-
},
|
|
55
|
-
tabTitle:
|
|
56
|
-
text:
|
|
57
|
-
menuItem:
|
|
58
|
-
},
|
|
59
|
-
const { className: n, ...r } =
|
|
60
|
-
return /* @__PURE__ */ e.createElement("div", { ...r, className:
|
|
61
|
-
},
|
|
62
|
-
const { selection: n, disabledKeys: r, onContextMenuSelectionChange:
|
|
63
|
-
|
|
64
|
-
},
|
|
54
|
+
}, Q = "flow--tabs--tab-title", U = "flow--tabs--tab-title--text", V = "flow--tabs--tab-title--menu-item", E = {
|
|
55
|
+
tabTitle: Q,
|
|
56
|
+
text: U,
|
|
57
|
+
menuItem: V
|
|
58
|
+
}, X = (o) => {
|
|
59
|
+
const { className: n, ...r } = o, a = b(n, E.tabTitle);
|
|
60
|
+
return /* @__PURE__ */ e.createElement("div", { ...r, className: a, "data-selected": !0 }, /* @__PURE__ */ e.createElement(C, { id: "ActiveTitle" }));
|
|
61
|
+
}, Y = (o) => {
|
|
62
|
+
const { selection: n, disabledKeys: r, onContextMenuSelectionChange: a } = o, l = g(), c = J(), s = c.isOverflowing, t = b(f.tabList, s && f.collapsed), m = (v) => {
|
|
63
|
+
a(v);
|
|
64
|
+
}, u = /* @__PURE__ */ e.createElement(T.TabList, { className: f.titles, ref: c.ref }, /* @__PURE__ */ e.createElement(C, { id: "Titles" })), d = s && /* @__PURE__ */ e.createElement(X, { id: l }), i = s && /* @__PURE__ */ e.createElement(A, null, /* @__PURE__ */ e.createElement(
|
|
65
65
|
L,
|
|
66
66
|
{
|
|
67
67
|
variant: "soft",
|
|
68
|
-
className:
|
|
68
|
+
className: f.contextMenuButton,
|
|
69
69
|
color: "secondary",
|
|
70
|
-
"aria-labelledby":
|
|
70
|
+
"aria-labelledby": l
|
|
71
71
|
},
|
|
72
72
|
/* @__PURE__ */ e.createElement(W, null)
|
|
73
73
|
), /* @__PURE__ */ e.createElement(
|
|
@@ -76,53 +76,58 @@ const $ = "flow--tabs", k = "flow--tabs--list", j = {
|
|
|
76
76
|
disabledKeys: r,
|
|
77
77
|
selectedKeys: n ? [n] : void 0,
|
|
78
78
|
selectionMode: "navigation",
|
|
79
|
-
onAction: (v) =>
|
|
79
|
+
onAction: (v) => m(v)
|
|
80
80
|
},
|
|
81
|
-
/* @__PURE__ */ e.createElement(
|
|
81
|
+
/* @__PURE__ */ e.createElement(C, { id: "ContextMenuItems" })
|
|
82
82
|
));
|
|
83
|
-
return /* @__PURE__ */ e.createElement("div", { className: t },
|
|
84
|
-
}, ve =
|
|
83
|
+
return /* @__PURE__ */ e.createElement("div", { className: t }, u, d, i);
|
|
84
|
+
}, ve = S("Tabs", (o) => {
|
|
85
85
|
const {
|
|
86
86
|
children: n,
|
|
87
87
|
className: r,
|
|
88
|
-
defaultSelectedKey:
|
|
89
|
-
disabledKeys:
|
|
88
|
+
defaultSelectedKey: a,
|
|
89
|
+
disabledKeys: l,
|
|
90
90
|
refProp: c,
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
91
|
+
onSelectionChange: s,
|
|
92
|
+
...t
|
|
93
|
+
} = o, m = b(q.tabs, r), [u, d] = w(
|
|
94
|
+
a
|
|
94
95
|
);
|
|
95
|
-
return /* @__PURE__ */ e.createElement(
|
|
96
|
-
|
|
96
|
+
return /* @__PURE__ */ e.createElement(y, null, n, /* @__PURE__ */ e.createElement(
|
|
97
|
+
T.Tabs,
|
|
97
98
|
{
|
|
98
99
|
slot: null,
|
|
99
|
-
className:
|
|
100
|
-
...
|
|
101
|
-
selectedKey:
|
|
102
|
-
onSelectionChange:
|
|
103
|
-
|
|
100
|
+
className: m,
|
|
101
|
+
...t,
|
|
102
|
+
selectedKey: u,
|
|
103
|
+
onSelectionChange: (i) => {
|
|
104
|
+
d(i), s && s(i);
|
|
105
|
+
},
|
|
106
|
+
disabledKeys: l,
|
|
104
107
|
ref: c
|
|
105
108
|
},
|
|
106
109
|
/* @__PURE__ */ e.createElement(
|
|
107
|
-
|
|
110
|
+
Y,
|
|
108
111
|
{
|
|
109
|
-
selection:
|
|
110
|
-
onContextMenuSelectionChange:
|
|
111
|
-
|
|
112
|
+
selection: u,
|
|
113
|
+
onContextMenuSelectionChange: (i) => {
|
|
114
|
+
d(i), s && s(i);
|
|
115
|
+
},
|
|
116
|
+
disabledKeys: l
|
|
112
117
|
}
|
|
113
118
|
),
|
|
114
|
-
/* @__PURE__ */ e.createElement(
|
|
119
|
+
/* @__PURE__ */ e.createElement(C, { id: "Panels" })
|
|
115
120
|
));
|
|
116
|
-
}),
|
|
121
|
+
}), h = I({
|
|
117
122
|
id: "undefined"
|
|
118
|
-
}),
|
|
119
|
-
const { children: n, className: r, ...
|
|
120
|
-
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
|
|
121
|
-
},
|
|
122
|
-
tabPanel:
|
|
123
|
-
}, we = (
|
|
124
|
-
const { children: n, className: r, id:
|
|
125
|
-
const d =
|
|
123
|
+
}), Z = () => P(h), _ = h.Provider, xe = (o) => {
|
|
124
|
+
const { children: n, className: r, ...a } = o, { id: l } = Z(), c = b(E.tabTitle, r);
|
|
125
|
+
return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(p, { id: "Titles" }, /* @__PURE__ */ e.createElement(T.Tab, { ...a, id: l, className: c }, (s) => /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(F, { emulateBoldWidth: !0 }, /* @__PURE__ */ e.createElement("span", { className: E.text }, n)), /* @__PURE__ */ e.createElement(p, { id: "ActiveTitle" }, s.isSelected && n)))), /* @__PURE__ */ e.createElement(p, { id: "ContextMenuItems" }, /* @__PURE__ */ e.createElement(K, { className: E.menuItem, id: l }, n)));
|
|
126
|
+
}, k = "flow--tabs--tab--tab-panel", ee = {
|
|
127
|
+
tabPanel: k
|
|
128
|
+
}, we = (o) => {
|
|
129
|
+
const { children: n, className: r, id: a, ...l } = o, c = b(ee.tabPanel, r), s = g(), t = a ?? s, m = (u) => {
|
|
130
|
+
const d = u.state.selectedKey === t, i = {
|
|
126
131
|
Content: {
|
|
127
132
|
wrapWith: /* @__PURE__ */ e.createElement(x, { isActive: d })
|
|
128
133
|
},
|
|
@@ -133,21 +138,21 @@ const $ = "flow--tabs", k = "flow--tabs--list", j = {
|
|
|
133
138
|
return /* @__PURE__ */ e.createElement(
|
|
134
139
|
R,
|
|
135
140
|
{
|
|
136
|
-
props:
|
|
141
|
+
props: i,
|
|
137
142
|
dependencies: [d, n]
|
|
138
143
|
},
|
|
139
144
|
n
|
|
140
145
|
);
|
|
141
146
|
};
|
|
142
|
-
return /* @__PURE__ */ e.createElement(
|
|
143
|
-
|
|
147
|
+
return /* @__PURE__ */ e.createElement(p, { id: "Panels" }, /* @__PURE__ */ e.createElement(_, { value: { id: t } }, /* @__PURE__ */ e.createElement(
|
|
148
|
+
T.TabPanel,
|
|
144
149
|
{
|
|
145
150
|
className: c,
|
|
146
151
|
shouldForceMount: !0,
|
|
147
152
|
id: t,
|
|
148
|
-
...
|
|
153
|
+
...l
|
|
149
154
|
},
|
|
150
|
-
|
|
155
|
+
m
|
|
151
156
|
)));
|
|
152
157
|
};
|
|
153
158
|
export {
|