@midas-ds/components 17.23.0 → 17.23.2
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 +12 -0
- package/assets/table.css +1 -1
- package/assets/tabs.css +1 -1
- package/chunks/{table-DCAJvtk-.js → table-CM0cx0UW.js} +11 -11
- package/chunks/tabs-C08F_2gW.js +56 -0
- package/index.js +3 -3
- package/package.json +1 -1
- package/table/Table.stories.d.ts +7 -0
- package/table/index.js +1 -1
- package/tabs/Tabs.stories.d.ts +1 -0
- package/tabs/index.js +1 -1
- package/chunks/tabs-CvnKD2lM.js +0 -52
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
## 17.23.2 (2026-08-28)
|
|
2
|
+
|
|
3
|
+
### 🩹 Fixes
|
|
4
|
+
|
|
5
|
+
- **components,table:** add cursor:pointer for selectable rows ([c21cec7e6f4](https://github.com/migrationsverket/midas/commit/c21cec7e6f4))
|
|
6
|
+
|
|
7
|
+
## 17.23.1 (2026-08-27)
|
|
8
|
+
|
|
9
|
+
### 🩹 Fixes
|
|
10
|
+
|
|
11
|
+
- **components,tabs:** remove animation when used in a dialog ([faecf1b0cae](https://github.com/migrationsverket/midas/commit/faecf1b0cae))
|
|
12
|
+
|
|
1
13
|
## 17.23.0 (2026-08-27)
|
|
2
14
|
|
|
3
15
|
### 🚀 Features
|
package/assets/table.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._table_1lyes_1{border-spacing:0;font-family:var(--midas-typography-font-family);font-size:var(--midas-typography-font-size-20);line-height:var(--midas-typography-line-height-20)}._table_1lyes_1>div{pointer-events:auto!important}._table_1lyes_1 ._tableHeader_1lyes_11 ._column_1lyes_12{background-color:var(--midas-layer-accent-01-base);color:var(--midas-text-primary);padding:var(--midas-space-75) var(--midas-space-medium);text-align:left;font-weight:500}._table_1lyes_1 ._tableHeader_1lyes_11 ._column_1lyes_12[data-focus-visible]{outline:var(--midas-space-10) solid var(--midas-border-color-primary);outline-offset:-4px}._table_1lyes_1 ._tableHeader_1lyes_11 ._column_1lyes_12[data-allows-sorting]{cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation}._table_1lyes_1 ._tableHeader_1lyes_11 ._column_1lyes_12[data-allows-sorting] ._sortIndicator_1lyes_29{margin-left:var(--midas-space-xsmall);vertical-align:text-bottom;justify-content:center;align-items:center;display:inline-flex}._table_1lyes_1 ._tableHeader_1lyes_11 ._column_1lyes_12[data-allows-sorting] ._sortIconNeutral_1lyes_37{opacity:0;transition:opacity var(--midas-transition-duration-quick) var(--midas-transition-timing-ease-in-out)}@media (prefers-reduced-motion){._table_1lyes_1 ._tableHeader_1lyes_11 ._column_1lyes_12[data-allows-sorting] ._sortIconNeutral_1lyes_37{transition:none}}@media (hover:none){._table_1lyes_1 ._tableHeader_1lyes_11 ._column_1lyes_12[data-allows-sorting] ._sortIconNeutral_1lyes_37{opacity:.5}}._table_1lyes_1 ._tableHeader_1lyes_11 ._column_1lyes_12[data-allows-sorting]:hover ._sortIconNeutral_1lyes_37{opacity:.5}._table_1lyes_1 ._tableHeader_1lyes_11 ._column_1lyes_12 ._selection_1lyes_56{height:18px}._table_1lyes_1 ._row_1lyes_62{background-color:var(--midas-layer-01-base)}._table_1lyes_1 ._row_1lyes_62[data-focused]{outline:var(--midas-space-10) solid var(--midas-border-color-primary);outline-offset:-4px}._table_1lyes_1 ._row_1lyes_62{height:100%}._table_1lyes_1 ._row_1lyes_62[data-href],._table_1lyes_1 ._row_1lyes_62[data-react-aria-pressable]{cursor:pointer}._table_1lyes_1 ._row_1lyes_62[data-hovered]{background-color:var(--midas-layer-01-hover)}._table_1lyes_1 ._row_1lyes_62 ._cell_1lyes_81{border-bottom:1px var(--midas-border-color-subtle) solid;color:var(--midas-text-primary);padding:calc(var(--midas-space-75) - 1px) var(--midas-space-medium) var(--midas-space-75)}._table_1lyes_1 ._row_1lyes_62 ._cell_1lyes_81[data-focus-visible]{outline-offset:-4px;outline:var(--midas-space-10) solid var(--midas-border-color-primary)}._table_1lyes_1 ._row_1lyes_62 ._cell_1lyes_81 ._selection_1lyes_56{height:18px}._table_1lyes_1._narrow_1lyes_98{font-size:var(--midas-typography-font-size-10);line-height:var(--midas-typography-line-height-10)}._table_1lyes_1._narrow_1lyes_98 ._column_1lyes_12{padding:var(--midas-space-xsmall) var(--midas-space-medium);height:14px}._table_1lyes_1._narrow_1lyes_98 ._column_1lyes_12 ._selection_1lyes_56{height:14px}._table_1lyes_1._narrow_1lyes_98 ._cell_1lyes_81{padding:calc(var(--midas-space-xsmall) - 1px) var(--midas-space-medium) var(--midas-space-xsmall)}._table_1lyes_1._narrow_1lyes_98 ._cell_1lyes_81 ._selection_1lyes_56{height:16px}._table_1lyes_1._medium_1lyes_121:not(._narrow_1lyes_98) ._column_1lyes_12{padding:calc(var(--midas-space-60) - 1px) var(--midas-space-medium)}._table_1lyes_1._medium_1lyes_121:not(._narrow_1lyes_98) ._cell_1lyes_81{padding:calc(var(--midas-space-60) - 2px) var(--midas-space-medium) calc(var(--midas-space-60) - 1px)}._table_1lyes_1._striped_1lyes_132 ._row_1lyes_62:nth-child(odd):not([data-even=false]),._table_1lyes_1._striped_1lyes_132 ._row_1lyes_62[data-even=true]{background-color:#0000}:is(._table_1lyes_1._striped_1lyes_132 ._row_1lyes_62:nth-child(odd):not([data-even=false]),._table_1lyes_1._striped_1lyes_132 ._row_1lyes_62[data-even=true])[data-hovered]{background-color:var(--midas-layer-accent-01-hover)}
|
package/assets/tabs.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._tabs_ninos_1{font-weight:var(--midas-typography-weight-regular);line-height:var(--midas-typography-line-height-30);font-family:var(--midas-typography-font-family);display:flex}._tabs_ninos_1[data-orientation=horizontal]{flex-direction:column}._tabList_ninos_12{display:flex}._tabList_ninos_12[data-orientation=vertical]{flex-direction:column}._tab_ninos_1{padding:var(--midas-space-70) var(--midas-space-medium);cursor:default;transition-duration:var(--midas-transition-duration-normal);forced-color-adjust:none;color:var(--midas-text-primary);outline:none;transition-property:color,border-color;position:relative}._tab_ninos_1[data-disabled]{border-color:var(--midas-border-color-disabled);color:var(--midas-text-disabled)}._tab_ninos_1[data-selected]{color:var(--midas-text-primary);font-weight:var(--midas-typography-weight-medium);forced-color-adjust:none}._tab_ninos_1[data-hovered]{cursor:pointer}._tab_ninos_1[data-focus-visible]{box-shadow:var(--midas-state-focus);outline:none}@media (forced-colors:active){._tab_ninos_1[data-focus-visible]{outline:var(--midas-state-focus-contrast-mode-outline) solid;outline-offset:var(--midas-state-focus-contrast-mode-offset)}}._tab_ninos_1._contained_ninos_55{background-color:var(--midas-layer-accent-01-base)}._tab_ninos_1._contained_ninos_55[data-selected]{background-color:var(--midas-layer-01-base)}._tab_ninos_1._contained_ninos_55[data-hovered]{background-color:var(--midas-layer-accent-01-hover)}._tab_ninos_1._contained_ninos_55[data-hovered][data-selected]{background-color:var(--midas-layer-01-hover)}._tab_ninos_1._contained_ninos_55:not([data-selected])+._tab_ninos_1._contained_ninos_55._contained_ninos_55:not([data-selected]){border-color:var(--midas-border-color-subtle)}._tab_ninos_1._medium_ninos_75{padding:var(--midas-space-50) var(--midas-space-small)}[data-orientation=horizontal] ._tab_ninos_1._contained_ninos_55{border-inline-start:1px solid #0000}[data-orientation=vertical] ._tab_ninos_1._contained_ninos_55{border-top:1px solid #0000}[data-orientation=horizontal] ._tab_ninos_1:not(._contained_ninos_55){border-bottom:1px solid var(--midas-border-color-subtle);margin-bottom:-1px}[data-orientation=vertical] ._tab_ninos_1:not(._contained_ninos_55){border-inline-end:1px solid var(--midas-border-color-subtle);margin-right:-1px}._selectionIndicator_ninos_98{position:absolute}._selectionIndicator_ninos_98._animated_ninos_101{transition-duration:var(--midas-transition-duration-normal);transition-property:translate,width,height}[data-orientation=horizontal] ._tab_ninos_1 ._selectionIndicator_ninos_98{border-bottom:3px solid var(--midas-border-color-tertiary);width:100%;bottom:0;left:0}[data-orientation=vertical] ._tab_ninos_1 ._selectionIndicator_ninos_98{border-inline-end:3px solid var(--midas-border-color-tertiary);height:100%;top:0;right:0}._tab_ninos_1 ._selectionIndicator_ninos_98._contained_ninos_55{z-index:var(--midas-z-index-base);border-width:2px}[data-orientation=horizontal] ._tab_ninos_1 ._selectionIndicator_ninos_98._contained_ninos_55{bottom:unset;top:0}[data-orientation=vertical] ._tab_ninos_1 ._selectionIndicator_ninos_98._contained_ninos_55{left:0;right:unset}._tabPanel_ninos_136{padding:var(--midas-space-medium);color:var(--midas-text-primary)}._tabPanel_ninos_136[data-focus-visible]{box-shadow:var(--midas-state-focus);outline:none}._tabPanel_ninos_136._contained_ninos_55{background-color:var(--midas-layer-01-base);--midas-field-base:var(--midas-field-02-base);--midas-field-hover:var(--midas-field-02-hover)}._tabPanel_ninos_136._medium_ninos_75{padding:var(--midas-space-small)}
|
|
@@ -71,17 +71,17 @@ import '../assets/table.css';var h = t("arrow-down", [["path", {
|
|
|
71
71
|
key: "f4zoj3"
|
|
72
72
|
}]
|
|
73
73
|
]), y = {
|
|
74
|
-
table: "
|
|
75
|
-
tableHeader: "
|
|
76
|
-
column: "
|
|
77
|
-
sortIndicator: "
|
|
78
|
-
sortIconNeutral: "
|
|
79
|
-
selection: "
|
|
80
|
-
row: "
|
|
81
|
-
cell: "
|
|
82
|
-
narrow: "
|
|
83
|
-
medium: "
|
|
84
|
-
striped: "
|
|
74
|
+
table: "_table_1lyes_1",
|
|
75
|
+
tableHeader: "_tableHeader_1lyes_11",
|
|
76
|
+
column: "_column_1lyes_12",
|
|
77
|
+
sortIndicator: "_sortIndicator_1lyes_29",
|
|
78
|
+
sortIconNeutral: "_sortIconNeutral_1lyes_37",
|
|
79
|
+
selection: "_selection_1lyes_56",
|
|
80
|
+
row: "_row_1lyes_62",
|
|
81
|
+
cell: "_cell_1lyes_81",
|
|
82
|
+
narrow: "_narrow_1lyes_98",
|
|
83
|
+
medium: "_medium_1lyes_121",
|
|
84
|
+
striped: "_striped_1lyes_132"
|
|
85
85
|
}, b = ({ size: t = "large", striped: n = !1, className: r, ...i }) => /* @__PURE__ */ p(c, {
|
|
86
86
|
className: e(y.table, r, {
|
|
87
87
|
[y.medium]: t === "medium",
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { t as e } from "./clsx-BtlV5Vo3.js";
|
|
3
|
+
import * as t from "react";
|
|
4
|
+
import { createContext as n } from "react";
|
|
5
|
+
import { DialogContext as r, SelectionIndicator as i, Tab as a, TabList as o, TabPanel as s, Tabs as c, composeRenderProps as l } from "react-aria-components";
|
|
6
|
+
import { Fragment as u, jsx as d, jsxs as f } from "react/jsx-runtime";
|
|
7
|
+
import '../assets/tabs.css';//#region packages/components/src/tabs/TabsContext.ts
|
|
8
|
+
var p = n({
|
|
9
|
+
variant: "uncontained",
|
|
10
|
+
size: "large"
|
|
11
|
+
}), m = {
|
|
12
|
+
tabs: "_tabs_ninos_1",
|
|
13
|
+
tabList: "_tabList_ninos_12",
|
|
14
|
+
tab: "_tab_ninos_1",
|
|
15
|
+
contained: "_contained_ninos_55",
|
|
16
|
+
medium: "_medium_ninos_75",
|
|
17
|
+
selectionIndicator: "_selectionIndicator_ninos_98",
|
|
18
|
+
animated: "_animated_ninos_101",
|
|
19
|
+
tabPanel: "_tabPanel_ninos_136"
|
|
20
|
+
}, h = ({ className: t, variant: n = "uncontained", size: r = "large", ...i }) => /* @__PURE__ */ d(p.Provider, {
|
|
21
|
+
value: {
|
|
22
|
+
variant: n,
|
|
23
|
+
size: r
|
|
24
|
+
},
|
|
25
|
+
children: /* @__PURE__ */ d(c, {
|
|
26
|
+
className: e(m.tabs, t),
|
|
27
|
+
...i
|
|
28
|
+
})
|
|
29
|
+
}), g = ({ className: n, ...o }) => {
|
|
30
|
+
let { variant: s, size: c } = t.useContext(p), h = t.useContext(r);
|
|
31
|
+
return /* @__PURE__ */ d(a, {
|
|
32
|
+
...o,
|
|
33
|
+
className: e(m.tab, {
|
|
34
|
+
[m.contained]: s === "contained",
|
|
35
|
+
[m.medium]: c === "medium"
|
|
36
|
+
}, n),
|
|
37
|
+
children: l(o.children, (t) => /* @__PURE__ */ f(u, { children: [t, /* @__PURE__ */ d(i, { className: e(m.selectionIndicator, {
|
|
38
|
+
[m.contained]: s === "contained",
|
|
39
|
+
[m.animated]: !h
|
|
40
|
+
}) })] }))
|
|
41
|
+
});
|
|
42
|
+
}, _ = ({ className: n, ...r }) => {
|
|
43
|
+
let { variant: i, size: a } = t.useContext(p);
|
|
44
|
+
return /* @__PURE__ */ d(s, {
|
|
45
|
+
className: e(m.tabPanel, {
|
|
46
|
+
[m.contained]: i === "contained",
|
|
47
|
+
[m.medium]: a === "medium"
|
|
48
|
+
}, n),
|
|
49
|
+
...r
|
|
50
|
+
});
|
|
51
|
+
}, v = ({ className: t, ...n }) => /* @__PURE__ */ d(o, {
|
|
52
|
+
className: e(m.tabList, t),
|
|
53
|
+
...n
|
|
54
|
+
});
|
|
55
|
+
//#endregion
|
|
56
|
+
export { h as i, _ as n, g as r, v as t };
|
package/index.js
CHANGED
|
@@ -5,7 +5,7 @@ import { t as n } from "./chunks/clsx-BtlV5Vo3.js";
|
|
|
5
5
|
import { t as r } from "./chunks/spinner-C3WiZYld.js";
|
|
6
6
|
import { a as i, i as a, n as o, r as s, t as c } from "./chunks/layout-DibnX6Za.js";
|
|
7
7
|
import { t as l } from "./chunks/link-CZNuhFX6.js";
|
|
8
|
-
import { a as u, i as d, n as f, o as p, r as m, t as h } from "./chunks/table-
|
|
8
|
+
import { a as u, i as d, n as f, o as p, r as m, t as h } from "./chunks/table-CM0cx0UW.js";
|
|
9
9
|
import { t as g } from "./chunks/link-button-ZsK6UGko.js";
|
|
10
10
|
import { n as _, t as v } from "./chunks/date-picker-D7zsIEas.js";
|
|
11
11
|
import { n as y, t as b } from "./chunks/calendar-C0rlcHfr.js";
|
|
@@ -41,7 +41,7 @@ import { n as je, t as Me } from "./chunks/radio-CROWwbyc.js";
|
|
|
41
41
|
import { t as Ne } from "./chunks/select-pg3jFmch.js";
|
|
42
42
|
import { n as Pe, r as Fe, t as Ie } from "./chunks/tag-CELJrUEQ.js";
|
|
43
43
|
import { t as Le } from "./chunks/skeleton-OqKFBcmO.js";
|
|
44
|
-
import { i as Re, n as ze, r as Be, t as Ve } from "./chunks/tabs-
|
|
44
|
+
import { i as Re, n as ze, r as Be, t as Ve } from "./chunks/tabs-C08F_2gW.js";
|
|
45
45
|
import { i as He, n as Ue, r as We, t as Ge } from "./chunks/textfield-Bch4DRNl.js";
|
|
46
46
|
import { t as Ke } from "./chunks/time-field-BCZIgZEI.js";
|
|
47
47
|
import { a as qe, i as Je, n as Ye, o as Xe, r as Ze, t as Qe } from "./chunks/toast-AYzfHBcQ.js";
|
|
@@ -59,7 +59,7 @@ var $e = {
|
|
|
59
59
|
description: "Midas Components",
|
|
60
60
|
homepage: "https://designsystem.migrationsverket.se/",
|
|
61
61
|
license: "CC0-1.0",
|
|
62
|
-
version: "17.23.
|
|
62
|
+
version: "17.23.2",
|
|
63
63
|
module: "./index.js",
|
|
64
64
|
type: "module",
|
|
65
65
|
main: "./index.js",
|
package/package.json
CHANGED
package/table/Table.stories.d.ts
CHANGED
|
@@ -20,6 +20,13 @@ declare const _default: {
|
|
|
20
20
|
size: {
|
|
21
21
|
control: false;
|
|
22
22
|
};
|
|
23
|
+
selectionMode: {
|
|
24
|
+
options: string[];
|
|
25
|
+
control: {
|
|
26
|
+
type: "radio";
|
|
27
|
+
};
|
|
28
|
+
defaultValue: string;
|
|
29
|
+
};
|
|
23
30
|
};
|
|
24
31
|
render: (args: import('./Table').TableProps) => import("react/jsx-runtime").JSX.Element;
|
|
25
32
|
};
|
package/table/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { a as e, i as t, n, o as r, r as i, t as a } from "../chunks/table-
|
|
1
|
+
import { a as e, i as t, n, o as r, r as i, t as a } from "../chunks/table-CM0cx0UW.js";
|
|
2
2
|
export { a as Cell, n as Column, i as Row, t as Table, e as TableBody, r as TableHeader };
|
package/tabs/Tabs.stories.d.ts
CHANGED
|
@@ -25,6 +25,7 @@ export declare const Medium: Story;
|
|
|
25
25
|
export declare const Contained: Story;
|
|
26
26
|
export declare const Vertical: Story;
|
|
27
27
|
export declare const DisabledTabs: Story;
|
|
28
|
+
export declare const InModal: Story;
|
|
28
29
|
export declare const DefaultSelectedKey: Story;
|
|
29
30
|
export declare const Controlled: Story;
|
|
30
31
|
export declare const MoreItemsThanChildren: Story;
|
package/tabs/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { i as e, n as t, r as n, t as r } from "../chunks/tabs-
|
|
1
|
+
import { i as e, n as t, r as n, t as r } from "../chunks/tabs-C08F_2gW.js";
|
|
2
2
|
export { n as Tab, r as TabList, t as TabPanel, e as Tabs };
|
package/chunks/tabs-CvnKD2lM.js
DELETED
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { t as e } from "./clsx-BtlV5Vo3.js";
|
|
3
|
-
import * as t from "react";
|
|
4
|
-
import { createContext as n } from "react";
|
|
5
|
-
import { SelectionIndicator as r, Tab as i, TabList as a, TabPanel as o, Tabs as s, composeRenderProps as c } from "react-aria-components";
|
|
6
|
-
import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
|
|
7
|
-
import '../assets/tabs.css';//#region packages/components/src/tabs/TabsContext.ts
|
|
8
|
-
var f = n({
|
|
9
|
-
variant: "uncontained",
|
|
10
|
-
size: "large"
|
|
11
|
-
}), p = {
|
|
12
|
-
tabs: "_tabs_m2smu_1",
|
|
13
|
-
tabList: "_tabList_m2smu_12",
|
|
14
|
-
tab: "_tab_m2smu_1",
|
|
15
|
-
contained: "_contained_m2smu_55",
|
|
16
|
-
medium: "_medium_m2smu_75",
|
|
17
|
-
selectionIndicator: "_selectionIndicator_m2smu_98",
|
|
18
|
-
tabPanel: "_tabPanel_m2smu_133"
|
|
19
|
-
}, m = ({ className: t, variant: n = "uncontained", size: r = "large", ...i }) => /* @__PURE__ */ u(f.Provider, {
|
|
20
|
-
value: {
|
|
21
|
-
variant: n,
|
|
22
|
-
size: r
|
|
23
|
-
},
|
|
24
|
-
children: /* @__PURE__ */ u(s, {
|
|
25
|
-
className: e(p.tabs, t),
|
|
26
|
-
...i
|
|
27
|
-
})
|
|
28
|
-
}), h = ({ className: n, ...a }) => {
|
|
29
|
-
let { variant: o, size: s } = t.useContext(f);
|
|
30
|
-
return /* @__PURE__ */ u(i, {
|
|
31
|
-
...a,
|
|
32
|
-
className: e(p.tab, {
|
|
33
|
-
[p.contained]: o === "contained",
|
|
34
|
-
[p.medium]: s === "medium"
|
|
35
|
-
}, n),
|
|
36
|
-
children: c(a.children, (t) => /* @__PURE__ */ d(l, { children: [t, /* @__PURE__ */ u(r, { className: e(p.selectionIndicator, { [p.contained]: o === "contained" }) })] }))
|
|
37
|
-
});
|
|
38
|
-
}, g = ({ className: n, ...r }) => {
|
|
39
|
-
let { variant: i, size: a } = t.useContext(f);
|
|
40
|
-
return /* @__PURE__ */ u(o, {
|
|
41
|
-
className: e(p.tabPanel, {
|
|
42
|
-
[p.contained]: i === "contained",
|
|
43
|
-
[p.medium]: a === "medium"
|
|
44
|
-
}, n),
|
|
45
|
-
...r
|
|
46
|
-
});
|
|
47
|
-
}, _ = ({ className: t, ...n }) => /* @__PURE__ */ u(a, {
|
|
48
|
-
className: e(p.tabList, t),
|
|
49
|
-
...n
|
|
50
|
-
});
|
|
51
|
-
//#endregion
|
|
52
|
-
export { m as i, g as n, h as r, _ as t };
|