@midas-ds/components 17.3.0 β 17.4.0
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 +25 -0
- package/assets/TabList.css +1 -1
- package/chunks/DateRangePicker-X6gmcMdv.js +197 -0
- package/chunks/TabList-CJSnr6O0.js +87 -0
- package/date-picker/index.js +1 -1
- package/date-picker/intl/translations.json.d.ts +4 -2
- package/index.js +3 -3
- package/package.json +1 -1
- package/tabs/Tabs.d.ts +3 -0
- package/tabs/Tabs.stories.d.ts +8 -0
- package/tabs/TabsContext.d.ts +1 -1
- package/tabs/index.js +1 -1
- package/chunks/DateRangePicker-BCZ6i1w0.js +0 -193
- package/chunks/TabList-BHX-cuhB.js +0 -82
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,28 @@
|
|
|
1
|
+
## 17.4.0 (2026-02-25)
|
|
2
|
+
|
|
3
|
+
### π Features
|
|
4
|
+
|
|
5
|
+
- **components,tabs:** add size prop with large/medium variants ([9a6c169311](https://github.com/migrationsverket/midas/commit/9a6c169311))
|
|
6
|
+
|
|
7
|
+
### π§ͺ Tests updated
|
|
8
|
+
|
|
9
|
+
- **components, menu:** remove flaky keyboard interactions ([e7fc6cfb6d](https://github.com/migrationsverket/midas/commit/e7fc6cfb6d))
|
|
10
|
+
|
|
11
|
+
## 17.3.1 (2026-02-25)
|
|
12
|
+
|
|
13
|
+
### π©Ή Fixes
|
|
14
|
+
|
|
15
|
+
- **components:** give focus target a unique id to prevent ambiguous locator ([7cd771d591](https://github.com/migrationsverket/midas/commit/7cd771d591))
|
|
16
|
+
- **components,date-picker:** replace fragile tab-counting with role-based queries in tests ([fb5b0b060a](https://github.com/migrationsverket/midas/commit/fb5b0b060a))
|
|
17
|
+
|
|
18
|
+
### π§ Maintenance
|
|
19
|
+
|
|
20
|
+
- **components:** move render wrapper focus target outside React container ([3f17dd9030](https://github.com/migrationsverket/midas/commit/3f17dd9030))
|
|
21
|
+
|
|
22
|
+
### π Rollback changes
|
|
23
|
+
|
|
24
|
+
- **components:** restore original render wrapper ([9c6fcdc5a7](https://github.com/migrationsverket/midas/commit/9c6fcdc5a7))
|
|
25
|
+
|
|
1
26
|
## 17.3.0 (2026-02-24)
|
|
2
27
|
|
|
3
28
|
### π Features
|
package/assets/TabList.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._tabs_1jqj8_1{display:flex;font-weight:var(--midas-typography-weight-regular);line-height:var(--midas-typography-line-height-30);font-family:var(--midas-typography-font-family)}._tabs_1jqj8_1[data-orientation=horizontal]{flex-direction:column}._tabList_1jqj8_12{display:flex}._tabList_1jqj8_12[data-orientation=vertical]{flex-direction:column}._tab_1jqj8_1{padding:var(--midas-space-70) var(--midas-space-medium);cursor:default;outline:none;position:relative;transition-duration:var(--midas-transition-duration-normal);transition-property:color,border-color;forced-color-adjust:none;color:var(--midas-text-primary)}._tab_1jqj8_1[data-disabled]{border-color:var(--midas-border-color-disabled);color:var(--midas-text-disabled)}._tab_1jqj8_1[data-selected]{color:var(--midas-text-primary);font-weight:var(--midas-typography-weight-medium);forced-color-adjust:none}._tab_1jqj8_1[data-hovered]{cursor:pointer}._tab_1jqj8_1[data-focus-visible]{outline:none;box-shadow:var(--midas-state-focus)}@media(forced-colors:active){._tab_1jqj8_1[data-focus-visible]{outline:var(--midas-state-focus-contrast-mode-outline) solid;outline-offset:var(--midas-state-focus-contrast-mode-offset)}}._tab_1jqj8_1._contained_1jqj8_55{background-color:var(--midas-layer-accent-01-base)}._tab_1jqj8_1._contained_1jqj8_55[data-selected]{background-color:var(--midas-layer-01-base)}._tab_1jqj8_1._contained_1jqj8_55[data-hovered]{background-color:var(--midas-layer-accent-01-hover)}._tab_1jqj8_1._contained_1jqj8_55[data-hovered][data-selected]{background-color:var(--midas-layer-01-hover)}._tab_1jqj8_1._contained_1jqj8_55:not([data-selected])+._tab_1jqj8_1._contained_1jqj8_55._contained_1jqj8_55:not([data-selected]){border-color:var(--midas-border-color-subtle)}._tab_1jqj8_1._medium_1jqj8_75{padding:var(--midas-space-50) var(--midas-space-small)}[data-orientation=horizontal] ._tab_1jqj8_1._contained_1jqj8_55{border-inline-start:1px solid transparent}[data-orientation=vertical] ._tab_1jqj8_1._contained_1jqj8_55{border-top:1px solid transparent}[data-orientation=horizontal] ._tab_1jqj8_1:not(._contained_1jqj8_55){border-bottom:1px solid var(--midas-border-color-subtle);margin-bottom:-1px}[data-orientation=vertical] ._tab_1jqj8_1:not(._contained_1jqj8_55){border-inline-end:1px solid var(--midas-border-color-subtle);margin-right:-1px}._selectionIndicator_1jqj8_98{position:absolute;transition-duration:var(--midas-transition-duration-normal);transition-property:translate,width,height}[data-orientation=horizontal] ._tab_1jqj8_1 ._selectionIndicator_1jqj8_98{border-bottom:3px solid var(--midas-border-color-tertiary);left:0;bottom:0;width:100%}[data-orientation=vertical] ._tab_1jqj8_1 ._selectionIndicator_1jqj8_98{border-inline-end:3px solid var(--midas-border-color-tertiary);height:100%;right:0;top:0}._tab_1jqj8_1 ._selectionIndicator_1jqj8_98._contained_1jqj8_55{border-width:2px;z-index:var(--midas-z-index-base)}[data-orientation=horizontal] ._tab_1jqj8_1 ._selectionIndicator_1jqj8_98._contained_1jqj8_55{bottom:unset;top:0}[data-orientation=vertical] ._tab_1jqj8_1 ._selectionIndicator_1jqj8_98._contained_1jqj8_55{left:0;right:unset}._tabPanel_1jqj8_133{padding:var(--midas-space-medium);color:var(--midas-text-primary)}._tabPanel_1jqj8_133[data-focus-visible]{outline:none;box-shadow:var(--midas-state-focus)}._tabPanel_1jqj8_133._contained_1jqj8_55{background-color:var(--midas-layer-01-base)}._tabPanel_1jqj8_133._medium_1jqj8_75{padding:var(--midas-space-small)}
|
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as e, jsxs as h } from "react/jsx-runtime";
|
|
3
|
+
import { Group as B, DatePickerStateContext as M, DateRangePickerStateContext as S, Popover as N, Dialog as R, DatePicker as G, DateRangePicker as L } from "react-aria-components";
|
|
4
|
+
import { a as k } from "./clsx-AexbMWKp.js";
|
|
5
|
+
import { C as I, R as O } from "./RangeCalendar-LheFd9WF.js";
|
|
6
|
+
import { D as P, b as _, a as V } from "./DateInputDivider-DwopMIb9.js";
|
|
7
|
+
import { F as g } from "./FieldError-krpMBtie.js";
|
|
8
|
+
import { a as y, L as v } from "./Label-s4J9sYdy.js";
|
|
9
|
+
import { T as D } from "./Text-D0r_W4lH.js";
|
|
10
|
+
import * as f from "react";
|
|
11
|
+
import { C as j } from "./ClearButton-DBr9Zfwq.js";
|
|
12
|
+
import { FocusScope as w, useFocusManager as T } from "@react-aria/focus";
|
|
13
|
+
import { B as $ } from "./Button-BhIvfqOc.js";
|
|
14
|
+
import { c as E } from "./createLucideIcon-CP-mMPfa.js";
|
|
15
|
+
import { u as b } from "./useLocalizedStringFormatter-BHvsRxDk.js";
|
|
16
|
+
import '../assets/DateRangePicker.css';const W = [
|
|
17
|
+
["path", { d: "M8 2v4", key: "1cmpym" }],
|
|
18
|
+
["path", { d: "M16 2v4", key: "4m81vk" }],
|
|
19
|
+
["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
|
|
20
|
+
["path", { d: "M3 10h18", key: "8toen8" }],
|
|
21
|
+
["path", { d: "M8 14h.01", key: "6423bh" }],
|
|
22
|
+
["path", { d: "M12 14h.01", key: "1etili" }],
|
|
23
|
+
["path", { d: "M16 14h.01", key: "1gbofw" }],
|
|
24
|
+
["path", { d: "M8 18h.01", key: "lrp35t" }],
|
|
25
|
+
["path", { d: "M12 18h.01", key: "mhygvu" }],
|
|
26
|
+
["path", { d: "M16 18h.01", key: "kzsmim" }]
|
|
27
|
+
], q = E("calendar-days", W), A = { clear: "Clear date", "open-calendar": "Open calendar" }, H = { clear: "Rensa datum", "open-calendar": "Γppna kalender" }, C = {
|
|
28
|
+
en: A,
|
|
29
|
+
sv: H
|
|
30
|
+
}, J = "_datePicker_1g3e7_1", K = "_inputField_1g3e7_8", Q = "_medium_1g3e7_24", U = "_readOnly_1g3e7_47", X = "_buttonGroup_1g3e7_52", Y = "_iconButton_1g3e7_58", Z = "_dialog_1g3e7_81", n = {
|
|
31
|
+
datePicker: J,
|
|
32
|
+
inputField: K,
|
|
33
|
+
medium: Q,
|
|
34
|
+
readOnly: U,
|
|
35
|
+
buttonGroup: X,
|
|
36
|
+
iconButton: Y,
|
|
37
|
+
dialog: Z
|
|
38
|
+
}, z = (t) => !!t && !!t.value && Object.prototype.hasOwnProperty.call(t.value, "start"), ee = ({
|
|
39
|
+
isClearable: t,
|
|
40
|
+
isDisabled: c,
|
|
41
|
+
isReadOnly: i,
|
|
42
|
+
size: a
|
|
43
|
+
}) => {
|
|
44
|
+
const r = f.useContext(M), s = f.useContext(S), l = b(C), d = T(), o = s ?? r, p = z(o) ? !!o.value.start && o.value.end : !!o?.value;
|
|
45
|
+
return t && p && !i ? /* @__PURE__ */ e(
|
|
46
|
+
j,
|
|
47
|
+
{
|
|
48
|
+
onPress: () => {
|
|
49
|
+
o?.setValue(null), d?.focusFirst();
|
|
50
|
+
},
|
|
51
|
+
size: a,
|
|
52
|
+
isDisabled: c,
|
|
53
|
+
"aria-label": l.format("clear"),
|
|
54
|
+
className: k(n.iconButton, {
|
|
55
|
+
[n.medium]: a === "medium"
|
|
56
|
+
})
|
|
57
|
+
}
|
|
58
|
+
) : null;
|
|
59
|
+
}, x = ({
|
|
60
|
+
children: t,
|
|
61
|
+
isDisabled: c,
|
|
62
|
+
isInvalid: i,
|
|
63
|
+
isReadOnly: a,
|
|
64
|
+
size: r = "large",
|
|
65
|
+
isClearable: s = !1
|
|
66
|
+
}) => {
|
|
67
|
+
const l = b(C);
|
|
68
|
+
return /* @__PURE__ */ e(
|
|
69
|
+
B,
|
|
70
|
+
{
|
|
71
|
+
className: k(n.inputField, {
|
|
72
|
+
[n.medium]: r === "medium",
|
|
73
|
+
[n.readOnly]: a
|
|
74
|
+
}),
|
|
75
|
+
children: /* @__PURE__ */ h(w, { children: [
|
|
76
|
+
t,
|
|
77
|
+
/* @__PURE__ */ h("div", { className: n.buttonGroup, children: [
|
|
78
|
+
/* @__PURE__ */ e(
|
|
79
|
+
ee,
|
|
80
|
+
{
|
|
81
|
+
isClearable: s,
|
|
82
|
+
isDisabled: c,
|
|
83
|
+
isReadOnly: a,
|
|
84
|
+
size: r
|
|
85
|
+
}
|
|
86
|
+
),
|
|
87
|
+
/* @__PURE__ */ e(
|
|
88
|
+
$,
|
|
89
|
+
{
|
|
90
|
+
variant: "icon",
|
|
91
|
+
"aria-label": l.format("open-calendar"),
|
|
92
|
+
className: k(n.iconButton, {
|
|
93
|
+
[n.medium]: r === "medium",
|
|
94
|
+
[n.readOnly]: a
|
|
95
|
+
}),
|
|
96
|
+
"data-invalid": i || void 0,
|
|
97
|
+
size: r,
|
|
98
|
+
children: /* @__PURE__ */ e(
|
|
99
|
+
q,
|
|
100
|
+
{
|
|
101
|
+
"aria-hidden": !0,
|
|
102
|
+
size: 20
|
|
103
|
+
}
|
|
104
|
+
)
|
|
105
|
+
}
|
|
106
|
+
)
|
|
107
|
+
] })
|
|
108
|
+
] })
|
|
109
|
+
}
|
|
110
|
+
);
|
|
111
|
+
}, F = ({
|
|
112
|
+
children: t
|
|
113
|
+
}) => /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e(R, { className: n.dialog, children: t }) }), he = ({
|
|
114
|
+
className: t,
|
|
115
|
+
description: c,
|
|
116
|
+
errorMessage: i,
|
|
117
|
+
errorPosition: a = "top",
|
|
118
|
+
label: r,
|
|
119
|
+
popover: s,
|
|
120
|
+
isClearable: l = !1,
|
|
121
|
+
isReadOnly: d,
|
|
122
|
+
isDisabled: o,
|
|
123
|
+
size: p,
|
|
124
|
+
...m
|
|
125
|
+
}) => /* @__PURE__ */ h(
|
|
126
|
+
G,
|
|
127
|
+
{
|
|
128
|
+
className: k(n.datePicker, t),
|
|
129
|
+
isReadOnly: d,
|
|
130
|
+
isDisabled: o,
|
|
131
|
+
...m,
|
|
132
|
+
children: [
|
|
133
|
+
/* @__PURE__ */ e(y, { popover: s, children: r && /* @__PURE__ */ e(v, { children: r }) }),
|
|
134
|
+
c && /* @__PURE__ */ e(D, { slot: "description", children: c }),
|
|
135
|
+
a === "top" && /* @__PURE__ */ e(g, { children: i }),
|
|
136
|
+
/* @__PURE__ */ e(
|
|
137
|
+
x,
|
|
138
|
+
{
|
|
139
|
+
isClearable: l,
|
|
140
|
+
isReadOnly: d,
|
|
141
|
+
isDisabled: o,
|
|
142
|
+
size: p,
|
|
143
|
+
...m,
|
|
144
|
+
children: /* @__PURE__ */ e(P, { children: (u) => /* @__PURE__ */ e(_, { segment: u }) })
|
|
145
|
+
}
|
|
146
|
+
),
|
|
147
|
+
a === "bottom" && /* @__PURE__ */ e(g, { children: i }),
|
|
148
|
+
/* @__PURE__ */ e(F, { children: /* @__PURE__ */ e(I, {}) })
|
|
149
|
+
]
|
|
150
|
+
}
|
|
151
|
+
), ke = ({
|
|
152
|
+
className: t,
|
|
153
|
+
description: c,
|
|
154
|
+
errorMessage: i,
|
|
155
|
+
errorPosition: a = "top",
|
|
156
|
+
label: r,
|
|
157
|
+
popover: s,
|
|
158
|
+
isClearable: l = !1,
|
|
159
|
+
isReadOnly: d,
|
|
160
|
+
isDisabled: o,
|
|
161
|
+
size: p,
|
|
162
|
+
...m
|
|
163
|
+
}) => /* @__PURE__ */ h(
|
|
164
|
+
L,
|
|
165
|
+
{
|
|
166
|
+
className: k(n.datePicker, t),
|
|
167
|
+
isReadOnly: d,
|
|
168
|
+
isDisabled: o,
|
|
169
|
+
...m,
|
|
170
|
+
children: [
|
|
171
|
+
/* @__PURE__ */ e(y, { popover: s, children: r && /* @__PURE__ */ e(v, { children: r }) }),
|
|
172
|
+
c && /* @__PURE__ */ e(D, { slot: "description", children: c }),
|
|
173
|
+
a === "top" && /* @__PURE__ */ e(g, { children: i }),
|
|
174
|
+
/* @__PURE__ */ h(
|
|
175
|
+
x,
|
|
176
|
+
{
|
|
177
|
+
isClearable: l,
|
|
178
|
+
isReadOnly: d,
|
|
179
|
+
isDisabled: o,
|
|
180
|
+
size: p,
|
|
181
|
+
...m,
|
|
182
|
+
children: [
|
|
183
|
+
/* @__PURE__ */ e(P, { slot: "start", children: (u) => /* @__PURE__ */ e(_, { segment: u }) }),
|
|
184
|
+
/* @__PURE__ */ e(V, {}),
|
|
185
|
+
/* @__PURE__ */ e(P, { slot: "end", children: (u) => /* @__PURE__ */ e(_, { segment: u }) })
|
|
186
|
+
]
|
|
187
|
+
}
|
|
188
|
+
),
|
|
189
|
+
a === "bottom" && /* @__PURE__ */ e(g, { children: i }),
|
|
190
|
+
/* @__PURE__ */ e(F, { children: /* @__PURE__ */ e(O, {}) })
|
|
191
|
+
]
|
|
192
|
+
}
|
|
193
|
+
);
|
|
194
|
+
export {
|
|
195
|
+
he as D,
|
|
196
|
+
ke as a
|
|
197
|
+
};
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as s, jsxs as b, Fragment as d } from "react/jsx-runtime";
|
|
3
|
+
import { Tabs as l, Tab as _, composeRenderProps as j, SelectionIndicator as u, TabPanel as T, TabList as P } from "react-aria-components";
|
|
4
|
+
import { c } from "./clsx-AexbMWKp.js";
|
|
5
|
+
import * as r from "react";
|
|
6
|
+
import { createContext as x } from "react";
|
|
7
|
+
import '../assets/TabList.css';const i = x({
|
|
8
|
+
variant: "uncontained",
|
|
9
|
+
size: "large"
|
|
10
|
+
}), q = "_tabs_1jqj8_1", L = "_tabList_1jqj8_12", p = "_tab_1jqj8_1", f = "_contained_1jqj8_55", v = "_medium_1jqj8_75", I = "_selectionIndicator_1jqj8_98", N = "_tabPanel_1jqj8_133", a = {
|
|
11
|
+
tabs: q,
|
|
12
|
+
tabList: L,
|
|
13
|
+
tab: p,
|
|
14
|
+
contained: f,
|
|
15
|
+
medium: v,
|
|
16
|
+
selectionIndicator: I,
|
|
17
|
+
tabPanel: N
|
|
18
|
+
}, z = ({
|
|
19
|
+
className: n,
|
|
20
|
+
variant: t = "uncontained",
|
|
21
|
+
size: e = "large",
|
|
22
|
+
...o
|
|
23
|
+
}) => /* @__PURE__ */ s(i.Provider, { value: { variant: t, size: e }, children: /* @__PURE__ */ s(
|
|
24
|
+
l,
|
|
25
|
+
{
|
|
26
|
+
className: c(a.tabs, n),
|
|
27
|
+
...o
|
|
28
|
+
}
|
|
29
|
+
) }), R = ({ className: n, ...t }) => {
|
|
30
|
+
const { variant: e, size: o } = r.useContext(i);
|
|
31
|
+
return /* @__PURE__ */ s(
|
|
32
|
+
_,
|
|
33
|
+
{
|
|
34
|
+
...t,
|
|
35
|
+
className: c(
|
|
36
|
+
a.tab,
|
|
37
|
+
{
|
|
38
|
+
[a.contained]: e === "contained",
|
|
39
|
+
[a.medium]: o === "medium"
|
|
40
|
+
},
|
|
41
|
+
n
|
|
42
|
+
),
|
|
43
|
+
children: j(t.children, (m) => /* @__PURE__ */ b(d, { children: [
|
|
44
|
+
m,
|
|
45
|
+
/* @__PURE__ */ s(
|
|
46
|
+
u,
|
|
47
|
+
{
|
|
48
|
+
className: c(a.selectionIndicator, {
|
|
49
|
+
[a.contained]: e === "contained"
|
|
50
|
+
})
|
|
51
|
+
}
|
|
52
|
+
)
|
|
53
|
+
] }))
|
|
54
|
+
}
|
|
55
|
+
);
|
|
56
|
+
}, y = ({ className: n, ...t }) => {
|
|
57
|
+
const { variant: e, size: o } = r.useContext(i);
|
|
58
|
+
return /* @__PURE__ */ s(
|
|
59
|
+
T,
|
|
60
|
+
{
|
|
61
|
+
className: c(
|
|
62
|
+
a.tabPanel,
|
|
63
|
+
{
|
|
64
|
+
[a.contained]: e === "contained",
|
|
65
|
+
[a.medium]: o === "medium"
|
|
66
|
+
},
|
|
67
|
+
n
|
|
68
|
+
),
|
|
69
|
+
...t
|
|
70
|
+
}
|
|
71
|
+
);
|
|
72
|
+
}, F = ({
|
|
73
|
+
className: n,
|
|
74
|
+
...t
|
|
75
|
+
}) => /* @__PURE__ */ s(
|
|
76
|
+
P,
|
|
77
|
+
{
|
|
78
|
+
className: c(a.tabList, n),
|
|
79
|
+
...t
|
|
80
|
+
}
|
|
81
|
+
);
|
|
82
|
+
export {
|
|
83
|
+
R as T,
|
|
84
|
+
F as a,
|
|
85
|
+
y as b,
|
|
86
|
+
z as c
|
|
87
|
+
};
|
package/date-picker/index.js
CHANGED
package/index.js
CHANGED
|
@@ -13,7 +13,7 @@ import { C as y } from "./chunks/ColorSchemeSwitch-DkY8VTVR.js";
|
|
|
13
13
|
import { C as N } from "./chunks/ComboBox-Dx4GD2oe.js";
|
|
14
14
|
import { D as z } from "./chunks/DateField-h3l0qG7u.js";
|
|
15
15
|
import { D as Q, a as V, b as Z } from "./chunks/DateInputDivider-DwopMIb9.js";
|
|
16
|
-
import { D as q, a as J } from "./chunks/DateRangePicker-
|
|
16
|
+
import { D as q, a as J } from "./chunks/DateRangePicker-X6gmcMdv.js";
|
|
17
17
|
import { F as U } from "./chunks/FieldError-krpMBtie.js";
|
|
18
18
|
import { D as X, F as Y } from "./chunks/FileUpload-Cu8DCSjX.js";
|
|
19
19
|
import { G as $ } from "./chunks/Grid-CettmpaZ.js";
|
|
@@ -34,7 +34,7 @@ import { S as ho } from "./chunks/Select-CV0H13h-.js";
|
|
|
34
34
|
import { S as yo } from "./chunks/Skeleton-D6mxKxuu.js";
|
|
35
35
|
import { S as No } from "./chunks/Spinner-CfKMn18u.js";
|
|
36
36
|
import { C as zo, a as Oo, R as Qo, T as Vo, b as Zo, c as jo } from "./chunks/Table-Bg-AKi7d.js";
|
|
37
|
-
import { T as Jo, a as Ko, b as Uo, c as Wo } from "./chunks/TabList-
|
|
37
|
+
import { T as Jo, a as Ko, b as Uo, c as Wo } from "./chunks/TabList-CJSnr6O0.js";
|
|
38
38
|
import { T as Yo, a as _o, b as $o } from "./chunks/TagGroup-BscTXQ_E.js";
|
|
39
39
|
import { T as aa } from "./chunks/Text-D0r_W4lH.js";
|
|
40
40
|
import { I as ea, T as ta, a as sa, b as pa } from "./chunks/TextArea-CBRE_gsN.js";
|
|
@@ -49,7 +49,7 @@ import { c as Na } from "./chunks/clsx-AexbMWKp.js";
|
|
|
49
49
|
import { DialogTrigger as za, MenuTrigger as Oa, RouterProvider as Qa } from "react-aria-components";
|
|
50
50
|
import { u as Za } from "./chunks/useLocalizedStringFormatter-BHvsRxDk.js";
|
|
51
51
|
import { useToastState as qa } from "react-stately";
|
|
52
|
-
const o = "17.
|
|
52
|
+
const o = "17.4.0", a = {
|
|
53
53
|
version: o
|
|
54
54
|
}, r = a.version;
|
|
55
55
|
export {
|
package/package.json
CHANGED
package/tabs/Tabs.d.ts
CHANGED
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { TabsProps as AriaTabsProps } from 'react-aria-components';
|
|
2
|
+
import { Size } from '../common/types';
|
|
2
3
|
import * as React from 'react';
|
|
3
4
|
export interface TabsProps extends AriaTabsProps {
|
|
4
5
|
variant?: 'uncontained' | 'contained';
|
|
6
|
+
/** @default 'large' */
|
|
7
|
+
size?: Size;
|
|
5
8
|
}
|
|
6
9
|
export declare const Tabs: React.FC<TabsProps>;
|
package/tabs/Tabs.stories.d.ts
CHANGED
|
@@ -6,14 +6,22 @@ declare const _default: {
|
|
|
6
6
|
component: React.FC<import('./Tabs').TabsProps>;
|
|
7
7
|
title: string;
|
|
8
8
|
tags: string[];
|
|
9
|
+
argTypes: {
|
|
10
|
+
size: {
|
|
11
|
+
control: "radio";
|
|
12
|
+
options: string[];
|
|
13
|
+
};
|
|
14
|
+
};
|
|
9
15
|
args: {
|
|
10
16
|
orientation: "horizontal";
|
|
11
17
|
variant: "uncontained";
|
|
18
|
+
size: "large";
|
|
12
19
|
};
|
|
13
20
|
render: (args: import('./Tabs').TabsProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
21
|
};
|
|
15
22
|
export default _default;
|
|
16
23
|
export declare const Primary: Story;
|
|
24
|
+
export declare const Medium: Story;
|
|
17
25
|
export declare const Contained: Story;
|
|
18
26
|
export declare const Vertical: Story;
|
|
19
27
|
export declare const DisabledTabs: Story;
|
package/tabs/TabsContext.d.ts
CHANGED
package/tabs/index.js
CHANGED
|
@@ -1,193 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsx as e, jsxs as h } from "react/jsx-runtime";
|
|
3
|
-
import { Group as x, DatePickerStateContext as F, DateRangePickerStateContext as B, Popover as M, Dialog as S, DatePicker as N, DateRangePicker as R } from "react-aria-components";
|
|
4
|
-
import { a as k } from "./clsx-AexbMWKp.js";
|
|
5
|
-
import { C as G, R as L } from "./RangeCalendar-LheFd9WF.js";
|
|
6
|
-
import { D as P, b as _, a as I } from "./DateInputDivider-DwopMIb9.js";
|
|
7
|
-
import { F as g } from "./FieldError-krpMBtie.js";
|
|
8
|
-
import { a as y, L as v } from "./Label-s4J9sYdy.js";
|
|
9
|
-
import { T as D } from "./Text-D0r_W4lH.js";
|
|
10
|
-
import * as f from "react";
|
|
11
|
-
import { C as V } from "./ClearButton-DBr9Zfwq.js";
|
|
12
|
-
import { FocusScope as j, useFocusManager as w } from "@react-aria/focus";
|
|
13
|
-
import { B as O } from "./Button-BhIvfqOc.js";
|
|
14
|
-
import { c as T } from "./createLucideIcon-CP-mMPfa.js";
|
|
15
|
-
import { u as $ } from "./useLocalizedStringFormatter-BHvsRxDk.js";
|
|
16
|
-
import '../assets/DateRangePicker.css';const E = [
|
|
17
|
-
["path", { d: "M8 2v4", key: "1cmpym" }],
|
|
18
|
-
["path", { d: "M16 2v4", key: "4m81vk" }],
|
|
19
|
-
["rect", { width: "18", height: "18", x: "3", y: "4", rx: "2", key: "1hopcy" }],
|
|
20
|
-
["path", { d: "M3 10h18", key: "8toen8" }],
|
|
21
|
-
["path", { d: "M8 14h.01", key: "6423bh" }],
|
|
22
|
-
["path", { d: "M12 14h.01", key: "1etili" }],
|
|
23
|
-
["path", { d: "M16 14h.01", key: "1gbofw" }],
|
|
24
|
-
["path", { d: "M8 18h.01", key: "lrp35t" }],
|
|
25
|
-
["path", { d: "M12 18h.01", key: "mhygvu" }],
|
|
26
|
-
["path", { d: "M16 18h.01", key: "kzsmim" }]
|
|
27
|
-
], W = T("calendar-days", E), q = { clear: "Clear date" }, A = { clear: "Rensa datum" }, H = {
|
|
28
|
-
en: q,
|
|
29
|
-
sv: A
|
|
30
|
-
}, J = "_datePicker_1g3e7_1", K = "_inputField_1g3e7_8", Q = "_medium_1g3e7_24", U = "_readOnly_1g3e7_47", X = "_buttonGroup_1g3e7_52", Y = "_iconButton_1g3e7_58", Z = "_dialog_1g3e7_81", o = {
|
|
31
|
-
datePicker: J,
|
|
32
|
-
inputField: K,
|
|
33
|
-
medium: Q,
|
|
34
|
-
readOnly: U,
|
|
35
|
-
buttonGroup: X,
|
|
36
|
-
iconButton: Y,
|
|
37
|
-
dialog: Z
|
|
38
|
-
}, z = (t) => !!t && !!t.value && Object.prototype.hasOwnProperty.call(t.value, "start"), ee = ({
|
|
39
|
-
isClearable: t,
|
|
40
|
-
isDisabled: c,
|
|
41
|
-
isReadOnly: i,
|
|
42
|
-
size: a
|
|
43
|
-
}) => {
|
|
44
|
-
const r = f.useContext(F), s = f.useContext(B), u = $(H), l = w(), n = s ?? r, p = z(n) ? !!n.value.start && n.value.end : !!n?.value;
|
|
45
|
-
return t && p && !i ? /* @__PURE__ */ e(
|
|
46
|
-
V,
|
|
47
|
-
{
|
|
48
|
-
onPress: () => {
|
|
49
|
-
n?.setValue(null), l?.focusFirst();
|
|
50
|
-
},
|
|
51
|
-
size: a,
|
|
52
|
-
isDisabled: c,
|
|
53
|
-
"aria-label": u.format("clear"),
|
|
54
|
-
className: k(o.iconButton, {
|
|
55
|
-
[o.medium]: a === "medium"
|
|
56
|
-
})
|
|
57
|
-
}
|
|
58
|
-
) : null;
|
|
59
|
-
}, C = ({
|
|
60
|
-
children: t,
|
|
61
|
-
isDisabled: c,
|
|
62
|
-
isInvalid: i,
|
|
63
|
-
isReadOnly: a,
|
|
64
|
-
size: r = "large",
|
|
65
|
-
isClearable: s = !1
|
|
66
|
-
}) => /* @__PURE__ */ e(
|
|
67
|
-
x,
|
|
68
|
-
{
|
|
69
|
-
className: k(o.inputField, {
|
|
70
|
-
[o.medium]: r === "medium",
|
|
71
|
-
[o.readOnly]: a
|
|
72
|
-
}),
|
|
73
|
-
children: /* @__PURE__ */ h(j, { children: [
|
|
74
|
-
t,
|
|
75
|
-
/* @__PURE__ */ h("div", { className: o.buttonGroup, children: [
|
|
76
|
-
/* @__PURE__ */ e(
|
|
77
|
-
ee,
|
|
78
|
-
{
|
|
79
|
-
isClearable: s,
|
|
80
|
-
isDisabled: c,
|
|
81
|
-
isReadOnly: a,
|
|
82
|
-
size: r
|
|
83
|
-
}
|
|
84
|
-
),
|
|
85
|
-
/* @__PURE__ */ e(
|
|
86
|
-
O,
|
|
87
|
-
{
|
|
88
|
-
variant: "icon",
|
|
89
|
-
className: k(o.iconButton, {
|
|
90
|
-
[o.medium]: r === "medium",
|
|
91
|
-
[o.readOnly]: a
|
|
92
|
-
}),
|
|
93
|
-
"data-invalid": i || void 0,
|
|
94
|
-
size: r,
|
|
95
|
-
children: /* @__PURE__ */ e(
|
|
96
|
-
W,
|
|
97
|
-
{
|
|
98
|
-
"aria-hidden": !0,
|
|
99
|
-
size: 20
|
|
100
|
-
}
|
|
101
|
-
)
|
|
102
|
-
}
|
|
103
|
-
)
|
|
104
|
-
] })
|
|
105
|
-
] })
|
|
106
|
-
}
|
|
107
|
-
), b = ({
|
|
108
|
-
children: t
|
|
109
|
-
}) => /* @__PURE__ */ e(M, { children: /* @__PURE__ */ e(S, { className: o.dialog, children: t }) }), he = ({
|
|
110
|
-
className: t,
|
|
111
|
-
description: c,
|
|
112
|
-
errorMessage: i,
|
|
113
|
-
errorPosition: a = "top",
|
|
114
|
-
label: r,
|
|
115
|
-
popover: s,
|
|
116
|
-
isClearable: u = !1,
|
|
117
|
-
isReadOnly: l,
|
|
118
|
-
isDisabled: n,
|
|
119
|
-
size: p,
|
|
120
|
-
...d
|
|
121
|
-
}) => /* @__PURE__ */ h(
|
|
122
|
-
N,
|
|
123
|
-
{
|
|
124
|
-
className: k(o.datePicker, t),
|
|
125
|
-
isReadOnly: l,
|
|
126
|
-
isDisabled: n,
|
|
127
|
-
...d,
|
|
128
|
-
children: [
|
|
129
|
-
/* @__PURE__ */ e(y, { popover: s, children: r && /* @__PURE__ */ e(v, { children: r }) }),
|
|
130
|
-
c && /* @__PURE__ */ e(D, { slot: "description", children: c }),
|
|
131
|
-
a === "top" && /* @__PURE__ */ e(g, { children: i }),
|
|
132
|
-
/* @__PURE__ */ e(
|
|
133
|
-
C,
|
|
134
|
-
{
|
|
135
|
-
isClearable: u,
|
|
136
|
-
isReadOnly: l,
|
|
137
|
-
isDisabled: n,
|
|
138
|
-
size: p,
|
|
139
|
-
...d,
|
|
140
|
-
children: /* @__PURE__ */ e(P, { children: (m) => /* @__PURE__ */ e(_, { segment: m }) })
|
|
141
|
-
}
|
|
142
|
-
),
|
|
143
|
-
a === "bottom" && /* @__PURE__ */ e(g, { children: i }),
|
|
144
|
-
/* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(G, {}) })
|
|
145
|
-
]
|
|
146
|
-
}
|
|
147
|
-
), ke = ({
|
|
148
|
-
className: t,
|
|
149
|
-
description: c,
|
|
150
|
-
errorMessage: i,
|
|
151
|
-
errorPosition: a = "top",
|
|
152
|
-
label: r,
|
|
153
|
-
popover: s,
|
|
154
|
-
isClearable: u = !1,
|
|
155
|
-
isReadOnly: l,
|
|
156
|
-
isDisabled: n,
|
|
157
|
-
size: p,
|
|
158
|
-
...d
|
|
159
|
-
}) => /* @__PURE__ */ h(
|
|
160
|
-
R,
|
|
161
|
-
{
|
|
162
|
-
className: k(o.datePicker, t),
|
|
163
|
-
isReadOnly: l,
|
|
164
|
-
isDisabled: n,
|
|
165
|
-
...d,
|
|
166
|
-
children: [
|
|
167
|
-
/* @__PURE__ */ e(y, { popover: s, children: r && /* @__PURE__ */ e(v, { children: r }) }),
|
|
168
|
-
c && /* @__PURE__ */ e(D, { slot: "description", children: c }),
|
|
169
|
-
a === "top" && /* @__PURE__ */ e(g, { children: i }),
|
|
170
|
-
/* @__PURE__ */ h(
|
|
171
|
-
C,
|
|
172
|
-
{
|
|
173
|
-
isClearable: u,
|
|
174
|
-
isReadOnly: l,
|
|
175
|
-
isDisabled: n,
|
|
176
|
-
size: p,
|
|
177
|
-
...d,
|
|
178
|
-
children: [
|
|
179
|
-
/* @__PURE__ */ e(P, { slot: "start", children: (m) => /* @__PURE__ */ e(_, { segment: m }) }),
|
|
180
|
-
/* @__PURE__ */ e(I, {}),
|
|
181
|
-
/* @__PURE__ */ e(P, { slot: "end", children: (m) => /* @__PURE__ */ e(_, { segment: m }) })
|
|
182
|
-
]
|
|
183
|
-
}
|
|
184
|
-
),
|
|
185
|
-
a === "bottom" && /* @__PURE__ */ e(g, { children: i }),
|
|
186
|
-
/* @__PURE__ */ e(b, { children: /* @__PURE__ */ e(L, {}) })
|
|
187
|
-
]
|
|
188
|
-
}
|
|
189
|
-
);
|
|
190
|
-
export {
|
|
191
|
-
he as D,
|
|
192
|
-
ke as a
|
|
193
|
-
};
|
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsx as e, jsxs as b, Fragment as l } from "react/jsx-runtime";
|
|
3
|
-
import { Tabs as d, Tab as _, composeRenderProps as m, SelectionIndicator as T, TabPanel as u, TabList as P } from "react-aria-components";
|
|
4
|
-
import { c as o } from "./clsx-AexbMWKp.js";
|
|
5
|
-
import * as i from "react";
|
|
6
|
-
import { createContext as x } from "react";
|
|
7
|
-
import '../assets/TabList.css';const c = x({
|
|
8
|
-
variant: "uncontained"
|
|
9
|
-
}), L = "_tabs_1nli1_1", p = "_tabList_1nli1_12", f = "_tab_1nli1_1", v = "_contained_1nli1_55", I = "_selectionIndicator_1nli1_94", N = "_tabPanel_1nli1_129", t = {
|
|
10
|
-
tabs: L,
|
|
11
|
-
tabList: p,
|
|
12
|
-
tab: f,
|
|
13
|
-
contained: v,
|
|
14
|
-
selectionIndicator: I,
|
|
15
|
-
tabPanel: N
|
|
16
|
-
}, R = ({
|
|
17
|
-
className: n,
|
|
18
|
-
variant: a = "uncontained",
|
|
19
|
-
...s
|
|
20
|
-
}) => /* @__PURE__ */ e(c.Provider, { value: { variant: a }, children: /* @__PURE__ */ e(
|
|
21
|
-
d,
|
|
22
|
-
{
|
|
23
|
-
className: o(t.tabs, n),
|
|
24
|
-
...s
|
|
25
|
-
}
|
|
26
|
-
) }), g = ({ className: n, ...a }) => {
|
|
27
|
-
const { variant: s } = i.useContext(c);
|
|
28
|
-
return /* @__PURE__ */ e(
|
|
29
|
-
_,
|
|
30
|
-
{
|
|
31
|
-
...a,
|
|
32
|
-
className: o(
|
|
33
|
-
t.tab,
|
|
34
|
-
{
|
|
35
|
-
[t.contained]: s === "contained"
|
|
36
|
-
},
|
|
37
|
-
n
|
|
38
|
-
),
|
|
39
|
-
children: m(a.children, (r) => /* @__PURE__ */ b(l, { children: [
|
|
40
|
-
r,
|
|
41
|
-
/* @__PURE__ */ e(
|
|
42
|
-
T,
|
|
43
|
-
{
|
|
44
|
-
className: o(t.selectionIndicator, {
|
|
45
|
-
[t.contained]: s === "contained"
|
|
46
|
-
})
|
|
47
|
-
}
|
|
48
|
-
)
|
|
49
|
-
] }))
|
|
50
|
-
}
|
|
51
|
-
);
|
|
52
|
-
}, y = ({ className: n, ...a }) => {
|
|
53
|
-
const { variant: s } = i.useContext(c);
|
|
54
|
-
return /* @__PURE__ */ e(
|
|
55
|
-
u,
|
|
56
|
-
{
|
|
57
|
-
className: o(
|
|
58
|
-
t.tabPanel,
|
|
59
|
-
{
|
|
60
|
-
[t.contained]: s === "contained"
|
|
61
|
-
},
|
|
62
|
-
n
|
|
63
|
-
),
|
|
64
|
-
...a
|
|
65
|
-
}
|
|
66
|
-
);
|
|
67
|
-
}, F = ({
|
|
68
|
-
className: n,
|
|
69
|
-
...a
|
|
70
|
-
}) => /* @__PURE__ */ e(
|
|
71
|
-
P,
|
|
72
|
-
{
|
|
73
|
-
className: o(t.tabList, n),
|
|
74
|
-
...a
|
|
75
|
-
}
|
|
76
|
-
);
|
|
77
|
-
export {
|
|
78
|
-
g as T,
|
|
79
|
-
F as a,
|
|
80
|
-
y as b,
|
|
81
|
-
R as c
|
|
82
|
-
};
|