@midas-ds/components 16.5.3 → 16.5.4
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/assets/Select.css +1 -1
- package/chunks/{Select-Bc7Qj5UC.js → Select-BpSIhRl_.js} +68 -68
- package/grid/Grid.stories.d.ts +4 -6
- package/index.js +1 -1
- package/package.json +1 -1
- package/select/index.js +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,16 @@
|
|
|
1
|
+
## 16.5.4 (2026-01-29)
|
|
2
|
+
|
|
3
|
+
### 🩹 Fixes
|
|
4
|
+
|
|
5
|
+
- **components, select:** change horizontal padding ([#1025](https://github.com/migrationsverket/midas/pull/1025))
|
|
6
|
+
|
|
7
|
+
### 🧪 Tests updated
|
|
8
|
+
|
|
9
|
+
- **components, toast:** add component tests ([86f0fd5363](https://github.com/migrationsverket/midas/commit/86f0fd5363))
|
|
10
|
+
- **components, popover:** add component tests ([e754520aaf](https://github.com/migrationsverket/midas/commit/e754520aaf))
|
|
11
|
+
- **components, link:** add component tests ([ee02374de4](https://github.com/migrationsverket/midas/commit/ee02374de4))
|
|
12
|
+
- **components, grid:** add component tests ([6f75da4a5c](https://github.com/migrationsverket/midas/commit/6f75da4a5c))
|
|
13
|
+
|
|
1
14
|
## 16.5.3 (2026-01-28)
|
|
2
15
|
|
|
3
16
|
### 🩹 Fixes
|
package/assets/Select.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._select_e81uz_1{display:flex;flex-direction:column;align-self:stretch}._triggerContainer_e81uz_7{display:flex;flex-direction:column;position:relative}._trigger_e81uz_7{align-items:center;background-color:var(--midas-field-01-base);border:none;border-bottom:1px solid var(--midas-border-color-primary);border-radius:0;color:var(--midas-text-primary);display:flex;font-size:var(--midas-typography-font-size-30);gap:var(--midas-spacing-20);justify-content:space-between;min-height:var(--midas-size-150);padding-left:var(--midas-size-80);padding-right:var(--midas-size-80);transition:all .1s ease-in}._trigger_e81uz_7._medium_e81uz_29{min-height:var(--midas-size-130)}._trigger_e81uz_7:focus-visible{outline:none;box-shadow:var(--midas-state-focus);transition:all .1s ease-out}@media(forced-colors:active){._trigger_e81uz_7:focus-visible{outline:3px solid highlight;outline-offset:2px}}._trigger_e81uz_7:hover{background-color:var(--midas-field-01-hover);cursor:pointer}._trigger_e81uz_7[data-disabled]{cursor:not-allowed;background:var(--midas-field-disabled);color:var(--midas-text-disabled);border-color:var(--midas-border-color-disabled)}._trigger_e81uz_7[data-invalid]:not(:focus-visible){border:none;box-shadow:var(--midas-state-invalid)}@media(forced-colors:active){._trigger_e81uz_7[data-invalid]:not(:focus-visible){border:5px solid Highlight!important}}._trigger_e81uz_7[data-open] ._icon_e81uz_66 svg{transform:rotate(180deg)}._selectValue_e81uz_72{color:var(--midas-text-primary);font-family:var(--midas-typography-font-family);line-height:var(--midas-typography-line-height-30);max-width:calc(100% - var(--midas-spacing-90))}._selectValue_e81uz_72 ._placeholder_e81uz_78{display:flex}._selectValue_e81uz_72[data-disabled]{color:var(--midas-text-disabled);cursor:not-allowed}._multiSelectValue_e81uz_88{pointer-events:none;color:var(--midas-text-primary);font-family:var(--midas-typography-font-family);line-height:var(--midas-typography-line-height-30);position:absolute;top:50%;transform:translateY(-50%);max-width:calc(100% - var(--midas-spacing-90))}._multiSelectValue_e81uz_88 ._placeholder_e81uz_78{align-items:center;display:flex;justify-content:center;left:var(--midas-spacing-50);position:relative}._multiSelectValue_e81uz_88[data-disabled]{color:var(--midas-text-disabled);cursor:not-allowed}._selectValueTag_e81uz_112{align-items:center;background-color:var(--midas-button-background-primary-base);border-radius:1.25rem;color:var(--midas-text-on-color);display:flex;font-size:.875rem;justify-content:center;left:var(--midas-spacing-30);min-height:1.75rem;padding:0 .5rem;pointer-events:all;position:relative}._selectValueTag_e81uz_112:has(._clearButton_e81uz_126){padding-right:0}._selectValueTag_e81uz_112[data-disabled]{background-color:var(--midas-field-disabled);border:1px solid var(--midas-border-color-disabled);color:var(--midas-text-disabled);pointer-events:none}._truncate_e81uz_138{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._clearButton_e81uz_126{background-color:var(--midas-button-background-primary-base);border:none;border-radius:100%;color:var(--midas-text-on-color);display:flex;margin-left:var(--midas-size-10);padding:var(--midas-size-30)}._clearButton_e81uz_126:hover{background-color:var(--midas-button-background-primary-hover);cursor:pointer}._clearButton_e81uz_126[data-disabled]{background-color:var(--midas-button-background-disabled);color:var(--midas-text-disabled);pointer-events:none}._clearButton_e81uz_126:focus-visible{box-shadow:var(--midas-state-focus);outline:none}@media(forced-colors:active){._clearButton_e81uz_126:focus-visible{outline:3px solid highlight;outline-offset:2px}}._popover_e81uz_175{font-size:var(--midas-typography-font-size-30);padding:0}._popover_e81uz_175 :focus{outline:none}._popover_e81uz_175[data-trigger=Select]{min-width:var(--trigger-width);transition:transform .2s ease-in-out,opacity .2s ease-in-out;opacity:1}._popover_e81uz_175[data-trigger=Select][data-entering],._popover_e81uz_175[data-trigger=Select][data-exiting]{opacity:0}._popover_e81uz_175 ._selectAll_e81uz_201{width:100%;box-sizing:border-box;background-color:var(--midas-layer-01-base);color:var(--midas-text-primary);display:flex;font-family:var(--midas-typography-font-family);line-height:1;margin-bottom:2px!important;padding:var(--midas-size-80);transition:background-color 60ms}._popover_e81uz_175 ._selectAll_e81uz_201:hover:not([data-disabled]){background-color:var(--midas-layer-01-hover);cursor:pointer;transition-delay:60ms}._popover_e81uz_175 ._selectAll_e81uz_201:hover:not([data-disabled]) div{border-color:var(--midas-text-primary)}._popover_e81uz_175 ._selectAll_e81uz_201[data-disabled]{color:var(--midas-text-disabled);cursor:not-allowed}._popover_e81uz_175 ._selectAll_e81uz_201[data-selected]{background-color:var(--midas-layer-01-selected-hover)}._popover_e81uz_175 ._selectAll_e81uz_201[data-selected]:hover:not([data-disabled]){background-color:var(--midas-layer-01-selected-hover);transition-delay:60ms}._popover_e81uz_175 ._selectAll_e81uz_201[data-selected]:hover:not([data-disabled]) div{border-color:transparent}._popover_e81uz_175 ._selectAll_e81uz_201[data-focused]{outline:none;box-shadow:none}@media(forced-colors:active){._popover_e81uz_175 ._selectAll_e81uz_201[data-focused]{outline:var(--midas-state-focus-contrast-mode-outline) solid highlight!important;outline-offset:calc(var(--midas-state-focus-contrast-mode-outline) * -1)}}._popover_e81uz_175 ._selectAll_e81uz_201[data-focus-visible]{box-shadow:var(--midas-state-focus-inset);outline:none}._popover_e81uz_175 ._selectAll_e81uz_201[data-hovered] div{border-color:var(--midas-button-background-primary-hover)}._tagGroup_e81uz_264{margin-top:var(--midas-size-40)}@media(prefers-reduced-motion){._trigger_e81uz_7,._popover_e81uz_175[data-trigger=Select],._selectAll_e81uz_201{transition:none}}
|
|
@@ -1,25 +1,25 @@
|
|
|
1
1
|
import { jsx as e, jsxs as i, Fragment as V } from "react/jsx-runtime";
|
|
2
2
|
import { SelectStateContext as u, SelectValue as h, Button as _, TagList as A, Select as C } from "react-aria-components";
|
|
3
3
|
import { FocusScope as x } from "@react-aria/focus";
|
|
4
|
-
import { a as
|
|
5
|
-
import { a as
|
|
6
|
-
import { T
|
|
4
|
+
import { a as z, L as N } from "./Label-xWKvOuML.js";
|
|
5
|
+
import { a as b, c as y } from "./clsx-AexbMWKp.js";
|
|
6
|
+
import { T } from "./Text-TWzJxnto.js";
|
|
7
7
|
import { F as g } from "./FieldError-Bra5aRT3.js";
|
|
8
8
|
import p, { useContext as f } from "react";
|
|
9
|
-
import { C as
|
|
9
|
+
import { C as B } from "./Checkbox-BTAfwDxU.js";
|
|
10
10
|
import { u as d } from "./useLocalizedStringFormatter-BHvsRxDk.js";
|
|
11
|
-
import { useFocusManager as
|
|
12
|
-
import { X as
|
|
13
|
-
import { L
|
|
14
|
-
import { P as
|
|
15
|
-
import { a as
|
|
16
|
-
import { C as
|
|
17
|
-
import '../assets/Select.css';const
|
|
18
|
-
en:
|
|
19
|
-
sv:
|
|
20
|
-
},
|
|
21
|
-
select:
|
|
22
|
-
triggerContainer:
|
|
11
|
+
import { useFocusManager as M } from "react-aria";
|
|
12
|
+
import { X as F } from "./x-BXShoIAM.js";
|
|
13
|
+
import { L } from "./ListBox-D5BBeZWL.js";
|
|
14
|
+
import { P as I } from "./Popover-BcEtFiU1.js";
|
|
15
|
+
import { a as G, T as j } from "./Tag-CZrQBEgv.js";
|
|
16
|
+
import { C as k } from "./chevron-down-DgT-uSF9.js";
|
|
17
|
+
import '../assets/Select.css';const R = { clearAll: "Clear all", selectAll: "Select all", selectedItems: "Selected items", selected: "selected" }, $ = { clearAll: "Rensa alla", selectAll: "Välj alla", selectedItems: "Valda objekt", selected: "valda" }, m = {
|
|
18
|
+
en: R,
|
|
19
|
+
sv: $
|
|
20
|
+
}, w = "_select_e81uz_1", P = "_triggerContainer_e81uz_7", E = "_trigger_e81uz_7", K = "_medium_e81uz_29", D = "_selectValue_e81uz_72", W = "_placeholder_e81uz_78", X = "_multiSelectValue_e81uz_88", q = "_selectValueTag_e81uz_112", H = "_clearButton_e81uz_126", J = "_truncate_e81uz_138", O = "_popover_e81uz_175", Q = "_selectAll_e81uz_201", U = "_tagGroup_e81uz_264", a = {
|
|
21
|
+
select: w,
|
|
22
|
+
triggerContainer: P,
|
|
23
23
|
trigger: E,
|
|
24
24
|
medium: K,
|
|
25
25
|
selectValue: D,
|
|
@@ -32,35 +32,35 @@ import '../assets/Select.css';const $ = { clearAll: "Clear all", selectAll: "Sel
|
|
|
32
32
|
selectAll: Q,
|
|
33
33
|
tagGroup: U
|
|
34
34
|
}, Y = () => {
|
|
35
|
-
const t = p.useContext(u),
|
|
35
|
+
const t = p.useContext(u), c = d(m), r = () => t?.setValue(
|
|
36
36
|
t?.selectionManager.isSelectAll ? null : Array.from(t.collection.getKeys())
|
|
37
37
|
);
|
|
38
38
|
return /* @__PURE__ */ e(
|
|
39
|
-
|
|
39
|
+
B,
|
|
40
40
|
{
|
|
41
|
-
className:
|
|
41
|
+
className: a.selectAll,
|
|
42
42
|
isIndeterminate: !t?.selectionManager.isSelectAll && !t?.selectionManager.isEmpty,
|
|
43
43
|
isSelected: t?.selectionManager.isSelectAll,
|
|
44
|
-
onChange:
|
|
45
|
-
children:
|
|
44
|
+
onChange: r,
|
|
45
|
+
children: c.format("selectAll")
|
|
46
46
|
}
|
|
47
47
|
);
|
|
48
48
|
}, Z = ({
|
|
49
49
|
isDisabled: t
|
|
50
50
|
}) => {
|
|
51
|
-
const
|
|
51
|
+
const c = d(m), r = (l, o) => l.length === 1 ? o : `${l.length} ${c.format("selected")}`;
|
|
52
52
|
return /* @__PURE__ */ e(
|
|
53
53
|
h,
|
|
54
54
|
{
|
|
55
|
-
className:
|
|
55
|
+
className: a.multiSelectValue,
|
|
56
56
|
"data-disabled": t || void 0,
|
|
57
|
-
children: ({ isPlaceholder: l, selectedItems:
|
|
57
|
+
children: ({ isPlaceholder: l, selectedItems: o, selectedText: s }) => l ? /* @__PURE__ */ e(V, {}) : /* @__PURE__ */ i(
|
|
58
58
|
"div",
|
|
59
59
|
{
|
|
60
|
-
className:
|
|
60
|
+
className: a.selectValueTag,
|
|
61
61
|
"data-disabled": t || void 0,
|
|
62
62
|
children: [
|
|
63
|
-
/* @__PURE__ */ e("span", { className:
|
|
63
|
+
/* @__PURE__ */ e("span", { className: a.truncate, children: r(o, s) }),
|
|
64
64
|
/* @__PURE__ */ e(ee, { isDisabled: t })
|
|
65
65
|
]
|
|
66
66
|
}
|
|
@@ -70,19 +70,19 @@ import '../assets/Select.css';const $ = { clearAll: "Clear all", selectAll: "Sel
|
|
|
70
70
|
}, ee = ({
|
|
71
71
|
isDisabled: t
|
|
72
72
|
}) => {
|
|
73
|
-
const
|
|
74
|
-
l?.focusFirst(),
|
|
73
|
+
const c = p.useContext(u), r = d(m), l = M(), o = () => {
|
|
74
|
+
l?.focusFirst(), c?.setValue(null);
|
|
75
75
|
};
|
|
76
76
|
return /* @__PURE__ */ e(
|
|
77
77
|
_,
|
|
78
78
|
{
|
|
79
|
-
"aria-label":
|
|
80
|
-
className:
|
|
81
|
-
onPress:
|
|
79
|
+
"aria-label": r.format("clearAll"),
|
|
80
|
+
className: a.clearButton,
|
|
81
|
+
onPress: o,
|
|
82
82
|
slot: null,
|
|
83
83
|
isDisabled: t,
|
|
84
84
|
children: /* @__PURE__ */ e(
|
|
85
|
-
|
|
85
|
+
F,
|
|
86
86
|
{
|
|
87
87
|
width: 20,
|
|
88
88
|
height: 20
|
|
@@ -92,54 +92,54 @@ import '../assets/Select.css';const $ = { clearAll: "Clear all", selectAll: "Sel
|
|
|
92
92
|
);
|
|
93
93
|
}, te = ({
|
|
94
94
|
showTags: t,
|
|
95
|
-
isDisabled:
|
|
95
|
+
isDisabled: c
|
|
96
96
|
}) => {
|
|
97
|
-
const
|
|
98
|
-
l?.selectionManager.toggleSelection(Array.from(
|
|
97
|
+
const r = d(m), l = f(u), o = (s) => {
|
|
98
|
+
l?.selectionManager.toggleSelection(Array.from(s)[0]);
|
|
99
99
|
};
|
|
100
100
|
return !l?.selectedItems.length || !t ? null : /* @__PURE__ */ e(
|
|
101
|
-
|
|
101
|
+
G,
|
|
102
102
|
{
|
|
103
|
-
"aria-label":
|
|
104
|
-
className:
|
|
105
|
-
onRemove:
|
|
103
|
+
"aria-label": r.format("selectedItems"),
|
|
104
|
+
className: a.tagGroup,
|
|
105
|
+
onRemove: o,
|
|
106
106
|
selectionBehavior: "toggle",
|
|
107
|
-
children: /* @__PURE__ */ e(A, { items: l.selectedItems, children: (
|
|
108
|
-
|
|
107
|
+
children: /* @__PURE__ */ e(A, { items: l.selectedItems, children: (s) => /* @__PURE__ */ e(
|
|
108
|
+
j,
|
|
109
109
|
{
|
|
110
110
|
dismissable: !0,
|
|
111
|
-
id:
|
|
112
|
-
isDisabled:
|
|
113
|
-
textValue:
|
|
114
|
-
children:
|
|
111
|
+
id: s.key,
|
|
112
|
+
isDisabled: c,
|
|
113
|
+
textValue: s.textValue,
|
|
114
|
+
children: s.textValue
|
|
115
115
|
},
|
|
116
|
-
|
|
116
|
+
s.key
|
|
117
117
|
) })
|
|
118
118
|
}
|
|
119
119
|
);
|
|
120
120
|
}, le = ({
|
|
121
121
|
isDisabled: t,
|
|
122
|
-
selectionMode:
|
|
123
|
-
size:
|
|
122
|
+
selectionMode: c,
|
|
123
|
+
size: r
|
|
124
124
|
}) => {
|
|
125
125
|
const l = f(u);
|
|
126
126
|
return /* @__PURE__ */ i(
|
|
127
127
|
_,
|
|
128
128
|
{
|
|
129
|
-
className:
|
|
129
|
+
className: b(
|
|
130
130
|
{
|
|
131
|
-
[
|
|
131
|
+
[a.medium]: r === "medium"
|
|
132
132
|
},
|
|
133
|
-
|
|
133
|
+
a.trigger
|
|
134
134
|
),
|
|
135
135
|
"data-invalid": !!l?.displayValidation.isInvalid || void 0,
|
|
136
136
|
children: [
|
|
137
137
|
/* @__PURE__ */ e(
|
|
138
138
|
h,
|
|
139
139
|
{
|
|
140
|
-
className:
|
|
140
|
+
className: a.selectValue,
|
|
141
141
|
"data-disabled": t || void 0,
|
|
142
|
-
children: ({ selectedText:
|
|
142
|
+
children: ({ selectedText: o, defaultChildren: s }) => /* @__PURE__ */ e("div", { className: a.placeholder, children: /* @__PURE__ */ e("span", { className: a.truncate, children: c === "multiple" && o ? null : o || s }) })
|
|
143
143
|
}
|
|
144
144
|
),
|
|
145
145
|
/* @__PURE__ */ e(
|
|
@@ -147,7 +147,7 @@ import '../assets/Select.css';const $ = { clearAll: "Clear all", selectAll: "Sel
|
|
|
147
147
|
{
|
|
148
148
|
"aria-hidden": "true",
|
|
149
149
|
style: { display: "flex" },
|
|
150
|
-
children: /* @__PURE__ */ e(
|
|
150
|
+
children: /* @__PURE__ */ e(k, { size: 20 })
|
|
151
151
|
}
|
|
152
152
|
)
|
|
153
153
|
]
|
|
@@ -156,11 +156,11 @@ import '../assets/Select.css';const $ = { clearAll: "Clear all", selectAll: "Sel
|
|
|
156
156
|
};
|
|
157
157
|
function ve({
|
|
158
158
|
children: t,
|
|
159
|
-
description:
|
|
160
|
-
errorMessage:
|
|
159
|
+
description: c,
|
|
160
|
+
errorMessage: r,
|
|
161
161
|
errorPosition: l = "top",
|
|
162
|
-
items:
|
|
163
|
-
label:
|
|
162
|
+
items: o,
|
|
163
|
+
label: s,
|
|
164
164
|
popover: S,
|
|
165
165
|
size: v = "large",
|
|
166
166
|
...n
|
|
@@ -169,15 +169,15 @@ function ve({
|
|
|
169
169
|
C,
|
|
170
170
|
{
|
|
171
171
|
...n,
|
|
172
|
-
className:
|
|
172
|
+
className: y(n.className, a.select),
|
|
173
173
|
children: [
|
|
174
|
-
/* @__PURE__ */ e(
|
|
175
|
-
|
|
176
|
-
l === "top" && /* @__PURE__ */ e(g, { children:
|
|
174
|
+
/* @__PURE__ */ e(z, { popover: S, children: s && /* @__PURE__ */ e(N, { "data-disabled": n.isDisabled || void 0, children: s }) }),
|
|
175
|
+
c && /* @__PURE__ */ e(T, { slot: "description", children: c }),
|
|
176
|
+
l === "top" && /* @__PURE__ */ e(g, { children: r }),
|
|
177
177
|
/* @__PURE__ */ i(
|
|
178
178
|
"div",
|
|
179
179
|
{
|
|
180
|
-
className:
|
|
180
|
+
className: a.triggerContainer,
|
|
181
181
|
"data-disabled": n.isDisabled || void 0,
|
|
182
182
|
children: [
|
|
183
183
|
/* @__PURE__ */ e(
|
|
@@ -191,20 +191,20 @@ function ve({
|
|
|
191
191
|
]
|
|
192
192
|
}
|
|
193
193
|
),
|
|
194
|
-
l === "bottom" && /* @__PURE__ */ e(g, { children:
|
|
194
|
+
l === "bottom" && /* @__PURE__ */ e(g, { children: r }),
|
|
195
195
|
/* @__PURE__ */ i(
|
|
196
|
-
|
|
196
|
+
I,
|
|
197
197
|
{
|
|
198
|
-
className:
|
|
198
|
+
className: a.popover,
|
|
199
199
|
offset: 0,
|
|
200
200
|
hideArrow: !0,
|
|
201
201
|
children: [
|
|
202
202
|
n.isSelectableAll && /* @__PURE__ */ e(Y, {}),
|
|
203
203
|
/* @__PURE__ */ e(
|
|
204
|
-
|
|
204
|
+
L,
|
|
205
205
|
{
|
|
206
206
|
escapeKeyBehavior: "none",
|
|
207
|
-
items:
|
|
207
|
+
items: o,
|
|
208
208
|
children: t
|
|
209
209
|
}
|
|
210
210
|
)
|
package/grid/Grid.stories.d.ts
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
import { StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { Grid } from './Grid';
|
|
3
|
+
type Story = StoryObj<typeof Grid>;
|
|
1
4
|
declare const _default: {
|
|
2
5
|
component: import('react').FC<import('./Grid').GridProps>;
|
|
3
6
|
subcomponents: {
|
|
@@ -22,9 +25,4 @@ declare const _default: {
|
|
|
22
25
|
};
|
|
23
26
|
};
|
|
24
27
|
export default _default;
|
|
25
|
-
export declare const Primary:
|
|
26
|
-
args: {};
|
|
27
|
-
render: ({ ...args }: {
|
|
28
|
-
[x: string]: any;
|
|
29
|
-
}) => import("react/jsx-runtime").JSX.Element;
|
|
30
|
-
};
|
|
28
|
+
export declare const Primary: Story;
|
package/index.js
CHANGED
|
@@ -29,7 +29,7 @@ import { P as So } from "./chunks/Popover-BcEtFiU1.js";
|
|
|
29
29
|
import { P as Io } from "./chunks/ProgressBar-KQdaaME2.js";
|
|
30
30
|
import { R as Po, a as Ro } from "./chunks/Radio-Clk616ep.js";
|
|
31
31
|
import { S as Fo } from "./chunks/SearchField-Cd05nl-B.js";
|
|
32
|
-
import { S as vo } from "./chunks/Select-
|
|
32
|
+
import { S as vo } from "./chunks/Select-BpSIhRl_.js";
|
|
33
33
|
import { S as ho } from "./chunks/Select-CRUskZeu.js";
|
|
34
34
|
import { S as yo } from "./chunks/Skeleton-DqIHQLQl.js";
|
|
35
35
|
import { S as No } from "./chunks/Spinner-tvJ7rPiT.js";
|
package/package.json
CHANGED
package/select/index.js
CHANGED