@midas-ds/components 16.3.1 → 16.3.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 +7 -0
- package/assets/ComboBox.css +1 -1
- package/chunks/ComboBox-BXcuyHPd.js +108 -0
- package/combobox/index.js +1 -1
- package/index.js +1 -1
- package/package.json +1 -1
- package/chunks/ComboBox-CzwpRxSH.js +0 -108
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
## 16.3.2 (2026-01-13)
|
|
2
|
+
|
|
3
|
+
### 🩹 Fixes
|
|
4
|
+
|
|
5
|
+
- **components, combobox:** adjust popover position to show focus indicator ([a5be26d3ab](https://github.com/migrationsverket/midas/commit/a5be26d3ab))
|
|
6
|
+
- **components, combobox:** add focus indicator for mouse interaction ([6cc9a07dc0](https://github.com/migrationsverket/midas/commit/6cc9a07dc0))
|
|
7
|
+
|
|
1
8
|
## 16.3.1 (2026-01-13)
|
|
2
9
|
|
|
3
10
|
### 🚀 Features
|
package/assets/ComboBox.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._combobox_1m9te_1{font-family:var(--midas-typography-font-family);display:flex;flex-direction:column}._combobox_1m9te_1[data-invalid] ._inputField_1m9te_6{border:.125rem solid var(--midas-support-border-warning)}._inputField_1m9te_6{box-sizing:border-box;width:-webkit-fill-available;padding-left:1rem;border:none;border-bottom:1px solid var(--midas-border-color-primary);border-radius:0;font-size:1rem;color:var(--midas-text-primary);height:var(--midas-size-150);background-color:var(--midas-field-01-base)}@media(forced-colors:active){._inputField_1m9te_6{border:1px solid}}._inputField_1m9te_6._medium_1m9te_27{height:var(--midas-size-130)}._inputField_1m9te_6[data-hovered],._inputField_1m9te_6:has(+[data-hovered]){background-color:var(--midas-field-01-hover)}._inputField_1m9te_6::placeholder{color:var(--midas-text-placeholder)}._inputField_1m9te_6:focus-visible,._inputField_1m9te_6[data-focus-visible]{outline:none}._inputField_1m9te_6[data-focused],._inputField_1m9te_6[data-focus-visible]{box-shadow:var(--midas-state-focus)}@media(forced-colors:active){._inputField_1m9te_6[data-focused],._inputField_1m9te_6[data-focus-visible]{outline:3px solid highlight;outline-offset:2px}}._inputField_1m9te_6[data-disabled]{color:var(--midas-text-disabled);background:var(--midas-field-disabled);box-shadow:none;border-bottom:.063rem solid var(--midas-border-color-disabled);cursor:not-allowed}._inputField_1m9te_6[data-readonly]{background-color:transparent;border-color:var(--midas-border-color-subtle)}._inputField_1m9te_6[data-readonly][data-focused],._inputField_1m9te_6[data-readonly][data-focus-visible]{box-shadow:none}._text_1m9te_74{font-size:.875rem;margin-bottom:.5rem}._wrap_1m9te_79{grid-area:Input;position:relative;gap:.5rem}._button_1m9te_85{display:flex;align-items:center;border:none;padding:var(--midas-size-70);color:var(--midas-icon-primary);background-color:transparent;position:absolute;top:0;right:0;height:var(--midas-size-150);transition:transform .3s ease}._button_1m9te_85._medium_1m9te_27{height:var(--midas-size-130);padding:var(--midas-size-50) var(--midas-size-70)}._button_1m9te_85[aria-expanded=true]{transform:rotate(180deg)}._button_1m9te_85[data-disabled]{cursor:not-allowed;color:var(--midas-icon-disabled)}[data-readonly] ._button_1m9te_85[data-disabled]{color:var(--midas-icon-read-only)}._button_1m9te_85[data-hovered]{cursor:pointer}._icon_1m9te_121{display:flex;align-items:center;transition:transform .3s ease}span._emptyState_1m9te_127{display:block;line-height:var(--midas-typography-line-height-30);padding:var(--midas-size-80) var(--midas-size-80) var(--midas-size-60) var(--midas-size-80)}@media(prefers-reduced-motion){._button_1m9te_85,._icon_1m9te_121{transition:none}}
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
import { jsxs as l, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import y from "react";
|
|
3
|
+
import { ComboBox as B, Input as F, Button as w, Collection as C } from "react-aria-components";
|
|
4
|
+
import { c as s } from "./clsx-AexbMWKp.js";
|
|
5
|
+
import { a as S, L as v } from "./Label-6SXmzRZE.js";
|
|
6
|
+
import { T as u } from "./Text-TWzJxnto.js";
|
|
7
|
+
import { F as f } from "./FieldError-Bra5aRT3.js";
|
|
8
|
+
import { L as R } from "./ListBox-D5BBeZWL.js";
|
|
9
|
+
import { a as N, L as g, b as E } from "./ListBoxSection-MZB_5DdD.js";
|
|
10
|
+
import { C as I } from "./chevron-down-DgT-uSF9.js";
|
|
11
|
+
import { u as T } from "./useLocalizedStringFormatter-BHvsRxDk.js";
|
|
12
|
+
import '../assets/ComboBox.css';const j = "_combobox_1m9te_1", O = "_inputField_1m9te_6", U = "_medium_1m9te_27", z = "_wrap_1m9te_79", D = "_button_1m9te_85", M = "_icon_1m9te_121", V = "_emptyState_1m9te_127", o = {
|
|
13
|
+
combobox: j,
|
|
14
|
+
inputField: O,
|
|
15
|
+
medium: U,
|
|
16
|
+
wrap: z,
|
|
17
|
+
button: D,
|
|
18
|
+
icon: M,
|
|
19
|
+
emptyState: V
|
|
20
|
+
}, W = { showList: "Show list", noResultsFound: "No results found" }, $ = { showList: "Visa lista", noResultsFound: "Inga träffar" }, k = {
|
|
21
|
+
en: W,
|
|
22
|
+
sv: $
|
|
23
|
+
};
|
|
24
|
+
function ot({
|
|
25
|
+
label: e,
|
|
26
|
+
description: i,
|
|
27
|
+
errorMessage: r,
|
|
28
|
+
children: p,
|
|
29
|
+
items: h,
|
|
30
|
+
className: _,
|
|
31
|
+
errorPosition: a = "top",
|
|
32
|
+
size: m = "large",
|
|
33
|
+
popover: b,
|
|
34
|
+
...n
|
|
35
|
+
}) {
|
|
36
|
+
const c = y.useRef(null), d = T(k), x = (L) => {
|
|
37
|
+
L.currentTarget.value && c.current?.select();
|
|
38
|
+
};
|
|
39
|
+
return /* @__PURE__ */ l(
|
|
40
|
+
B,
|
|
41
|
+
{
|
|
42
|
+
className: s(o.combobox, _),
|
|
43
|
+
...n,
|
|
44
|
+
"data-readonly": n.isReadOnly || void 0,
|
|
45
|
+
children: [
|
|
46
|
+
/* @__PURE__ */ t(S, { popover: b, children: e && /* @__PURE__ */ t(v, { children: e }) }),
|
|
47
|
+
i && /* @__PURE__ */ t(u, { slot: "description", children: i }),
|
|
48
|
+
a === "top" && /* @__PURE__ */ t(f, { "data-testid": "fieldError", children: r }),
|
|
49
|
+
/* @__PURE__ */ l("div", { className: o.wrap, children: [
|
|
50
|
+
/* @__PURE__ */ t(
|
|
51
|
+
F,
|
|
52
|
+
{
|
|
53
|
+
className: s(o.inputField, {
|
|
54
|
+
[o.medium]: m === "medium"
|
|
55
|
+
}),
|
|
56
|
+
"data-readonly": n.isReadOnly || void 0,
|
|
57
|
+
onMouseUp: x,
|
|
58
|
+
ref: c
|
|
59
|
+
}
|
|
60
|
+
),
|
|
61
|
+
/* @__PURE__ */ t(
|
|
62
|
+
w,
|
|
63
|
+
{
|
|
64
|
+
className: s(o.button, {
|
|
65
|
+
[o.medium]: m === "medium"
|
|
66
|
+
}),
|
|
67
|
+
"aria-label": d.format("showList"),
|
|
68
|
+
children: /* @__PURE__ */ t(
|
|
69
|
+
"div",
|
|
70
|
+
{
|
|
71
|
+
className: o.icon,
|
|
72
|
+
"aria-hidden": "true",
|
|
73
|
+
children: /* @__PURE__ */ t(
|
|
74
|
+
I,
|
|
75
|
+
{
|
|
76
|
+
size: 20,
|
|
77
|
+
"aria-hidden": !0
|
|
78
|
+
}
|
|
79
|
+
)
|
|
80
|
+
}
|
|
81
|
+
)
|
|
82
|
+
}
|
|
83
|
+
)
|
|
84
|
+
] }),
|
|
85
|
+
a === "bottom" && /* @__PURE__ */ t(f, { "data-testid": "fieldError", children: r }),
|
|
86
|
+
/* @__PURE__ */ t(N, { offset: 4, children: /* @__PURE__ */ t(
|
|
87
|
+
R,
|
|
88
|
+
{
|
|
89
|
+
items: h,
|
|
90
|
+
renderEmptyState: () => /* @__PURE__ */ t(u, { className: o.emptyState, children: d.format("noResultsFound") }),
|
|
91
|
+
children: p
|
|
92
|
+
}
|
|
93
|
+
) })
|
|
94
|
+
]
|
|
95
|
+
}
|
|
96
|
+
);
|
|
97
|
+
}
|
|
98
|
+
function q(e) {
|
|
99
|
+
return /* @__PURE__ */ t(g, { ...e });
|
|
100
|
+
}
|
|
101
|
+
function et(e) {
|
|
102
|
+
return /* @__PURE__ */ t(E, { ...e, children: /* @__PURE__ */ t(C, { items: e.children, children: (i) => /* @__PURE__ */ t(q, { children: i.name }, i.id) }) });
|
|
103
|
+
}
|
|
104
|
+
export {
|
|
105
|
+
ot as C,
|
|
106
|
+
q as a,
|
|
107
|
+
et as b
|
|
108
|
+
};
|
package/combobox/index.js
CHANGED
package/index.js
CHANGED
|
@@ -9,7 +9,7 @@ import { C as G } from "./chunks/CharacterCounter-R6vh7AE5.js";
|
|
|
9
9
|
import { C as R } from "./chunks/Checkbox-BTAfwDxU.js";
|
|
10
10
|
import { C as F } from "./chunks/CheckboxGroup-C6LIpj_R.js";
|
|
11
11
|
import { C as v } from "./chunks/ColorSchemeSwitch-D-vCkxQo.js";
|
|
12
|
-
import { C as h, a as H, b as y } from "./chunks/ComboBox-
|
|
12
|
+
import { C as h, a as H, b as y } from "./chunks/ComboBox-BXcuyHPd.js";
|
|
13
13
|
import { D as N } from "./chunks/DateField-DPJrihTz.js";
|
|
14
14
|
import { a as E, b as Q, D as Z } from "./chunks/DateInputDivider-CkTB5q5k.js";
|
|
15
15
|
import { D as q, a as J } from "./chunks/DateRangePicker-DzgK_p0d.js";
|
package/package.json
CHANGED
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
import { jsxs as l, jsx as o } from "react/jsx-runtime";
|
|
2
|
-
import g from "react";
|
|
3
|
-
import { ComboBox as y, Input as B, Button as F, Collection as w } from "react-aria-components";
|
|
4
|
-
import { c as s } from "./clsx-AexbMWKp.js";
|
|
5
|
-
import { a as C, L as S } from "./Label-6SXmzRZE.js";
|
|
6
|
-
import { T as u } from "./Text-TWzJxnto.js";
|
|
7
|
-
import { F as h } from "./FieldError-Bra5aRT3.js";
|
|
8
|
-
import { L as v } from "./ListBox-D5BBeZWL.js";
|
|
9
|
-
import { a as R, L as N, b as E } from "./ListBoxSection-MZB_5DdD.js";
|
|
10
|
-
import { C as I } from "./chevron-down-DgT-uSF9.js";
|
|
11
|
-
import { u as T } from "./useLocalizedStringFormatter-BHvsRxDk.js";
|
|
12
|
-
import '../assets/ComboBox.css';const j = "_combobox_47hgd_1", O = "_inputField_47hgd_6", U = "_medium_47hgd_28", z = "_wrap_47hgd_74", D = "_button_47hgd_80", M = "_icon_47hgd_116", V = "_emptyState_47hgd_122", t = {
|
|
13
|
-
combobox: j,
|
|
14
|
-
inputField: O,
|
|
15
|
-
medium: U,
|
|
16
|
-
wrap: z,
|
|
17
|
-
button: D,
|
|
18
|
-
icon: M,
|
|
19
|
-
emptyState: V
|
|
20
|
-
}, W = { showList: "Show list", noResultsFound: "No results found" }, $ = { showList: "Visa lista", noResultsFound: "Inga träffar" }, k = {
|
|
21
|
-
en: W,
|
|
22
|
-
sv: $
|
|
23
|
-
};
|
|
24
|
-
function to({
|
|
25
|
-
label: e,
|
|
26
|
-
description: i,
|
|
27
|
-
errorMessage: r,
|
|
28
|
-
children: p,
|
|
29
|
-
items: f,
|
|
30
|
-
className: _,
|
|
31
|
-
errorPosition: a = "top",
|
|
32
|
-
size: m = "large",
|
|
33
|
-
popover: b,
|
|
34
|
-
...n
|
|
35
|
-
}) {
|
|
36
|
-
const d = g.useRef(null), c = T(k), x = (L) => {
|
|
37
|
-
L.currentTarget.value && d.current?.select();
|
|
38
|
-
};
|
|
39
|
-
return /* @__PURE__ */ l(
|
|
40
|
-
y,
|
|
41
|
-
{
|
|
42
|
-
className: s(t.combobox, _),
|
|
43
|
-
...n,
|
|
44
|
-
"data-readonly": n.isReadOnly || void 0,
|
|
45
|
-
children: [
|
|
46
|
-
/* @__PURE__ */ o(C, { popover: b, children: e && /* @__PURE__ */ o(S, { children: e }) }),
|
|
47
|
-
i && /* @__PURE__ */ o(u, { slot: "description", children: i }),
|
|
48
|
-
a === "top" && /* @__PURE__ */ o(h, { "data-testid": "fieldError", children: r }),
|
|
49
|
-
/* @__PURE__ */ l("div", { className: t.wrap, children: [
|
|
50
|
-
/* @__PURE__ */ o(
|
|
51
|
-
B,
|
|
52
|
-
{
|
|
53
|
-
className: s(t.inputField, {
|
|
54
|
-
[t.medium]: m === "medium"
|
|
55
|
-
}),
|
|
56
|
-
"data-readonly": n.isReadOnly || void 0,
|
|
57
|
-
onMouseUp: x,
|
|
58
|
-
ref: d
|
|
59
|
-
}
|
|
60
|
-
),
|
|
61
|
-
/* @__PURE__ */ o(
|
|
62
|
-
F,
|
|
63
|
-
{
|
|
64
|
-
className: s(t.button, {
|
|
65
|
-
[t.medium]: m === "medium"
|
|
66
|
-
}),
|
|
67
|
-
"aria-label": c.format("showList"),
|
|
68
|
-
children: /* @__PURE__ */ o(
|
|
69
|
-
"div",
|
|
70
|
-
{
|
|
71
|
-
className: t.icon,
|
|
72
|
-
"aria-hidden": "true",
|
|
73
|
-
children: /* @__PURE__ */ o(
|
|
74
|
-
I,
|
|
75
|
-
{
|
|
76
|
-
size: 20,
|
|
77
|
-
"aria-hidden": !0
|
|
78
|
-
}
|
|
79
|
-
)
|
|
80
|
-
}
|
|
81
|
-
)
|
|
82
|
-
}
|
|
83
|
-
)
|
|
84
|
-
] }),
|
|
85
|
-
a === "bottom" && /* @__PURE__ */ o(h, { "data-testid": "fieldError", children: r }),
|
|
86
|
-
/* @__PURE__ */ o(R, { children: /* @__PURE__ */ o(
|
|
87
|
-
v,
|
|
88
|
-
{
|
|
89
|
-
items: f,
|
|
90
|
-
renderEmptyState: () => /* @__PURE__ */ o(u, { className: t.emptyState, children: c.format("noResultsFound") }),
|
|
91
|
-
children: p
|
|
92
|
-
}
|
|
93
|
-
) })
|
|
94
|
-
]
|
|
95
|
-
}
|
|
96
|
-
);
|
|
97
|
-
}
|
|
98
|
-
function q(e) {
|
|
99
|
-
return /* @__PURE__ */ o(N, { ...e });
|
|
100
|
-
}
|
|
101
|
-
function eo(e) {
|
|
102
|
-
return /* @__PURE__ */ o(E, { ...e, children: /* @__PURE__ */ o(w, { items: e.children, children: (i) => /* @__PURE__ */ o(q, { children: i.name }, i.id) }) });
|
|
103
|
-
}
|
|
104
|
-
export {
|
|
105
|
-
to as C,
|
|
106
|
-
q as a,
|
|
107
|
-
eo as b
|
|
108
|
-
};
|