@midas-ds/components 17.3.1 โ 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 +10 -0
- package/assets/TabList.css +1 -1
- package/chunks/TabList-CJSnr6O0.js +87 -0
- package/index.js +2 -2
- 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/TabList-BHX-cuhB.js +0 -82
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,13 @@
|
|
|
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
|
+
|
|
1
11
|
## 17.3.1 (2026-02-25)
|
|
2
12
|
|
|
3
13
|
### ๐ฉน Fixes
|
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,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/index.js
CHANGED
|
@@ -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,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
|
-
};
|