@midas-ds/components 17.19.0 → 17.21.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 +16 -0
- package/assets/badge.css +1 -1
- package/assets/search-field.css +1 -1
- package/assets/select.css +1 -1
- package/badge/index.js +1 -1
- package/chunks/{badge-DrCn-5SX.js → badge-DwPG4Jz8.js} +3 -3
- package/chunks/{layout-BzK7P4Xn.js → layout-DibnX6Za.js} +1 -1
- package/chunks/search-field-lz0_j_HR.js +100 -0
- package/chunks/{select-DneAUko_.js → select-m7BIivwY.js} +14 -14
- package/index.js +5 -5
- package/layout/index.js +1 -1
- package/package.json +1 -1
- package/search-field/SearchField.d.ts +7 -1
- package/search-field/SearchField.stories.d.ts +4 -1
- package/search-field/index.js +1 -1
- package/select/index.js +1 -1
- package/chunks/search-field-Ci2UjkmK.js +0 -90
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,19 @@
|
|
|
1
|
+
## 17.21.0 (2026-08-18)
|
|
2
|
+
|
|
3
|
+
### 🚀 Features
|
|
4
|
+
|
|
5
|
+
- **components, select:** add pressed state for trigger ([273c9f27673](https://github.com/migrationsverket/midas/commit/273c9f27673))
|
|
6
|
+
|
|
7
|
+
## 17.20.0 (2026-08-14)
|
|
8
|
+
|
|
9
|
+
### 🚀 Features
|
|
10
|
+
|
|
11
|
+
- **components,search-field:** add label and description support ([96dcf586333](https://github.com/migrationsverket/midas/commit/96dcf586333))
|
|
12
|
+
|
|
13
|
+
### 🩹 Fixes
|
|
14
|
+
|
|
15
|
+
- **components,badge:** pin badge to icon corner in width-constrained containers ([b1d8e302d10](https://github.com/migrationsverket/midas/commit/b1d8e302d10))
|
|
16
|
+
|
|
1
17
|
## 17.19.0 (2026-08-13)
|
|
2
18
|
|
|
3
19
|
### 🚀 Features
|
package/assets/badge.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._badge_1nq3o_1{font-family:var(--midas-typography-font-family);background-color:var(--midas-badge-background);min-width:.5rem;min-height:.5rem;color:var(--midas-text-on-color);border-radius:.5rem;font-size:.625rem}._badge_1nq3o_1._hasChildren_1nq3o_10{justify-content:center;align-items:center;min-height:1rem;padding:0 .25rem;display:flex}._badgeContainer_1nq3o_19{flex-shrink:0;min-width:0;display:flex;position:relative}._badgeContainer_1nq3o_19 ._badge_1nq3o_1{transform-origin:0;position:absolute;top:0;right:0;transform:translate(50%,-50%)}
|
package/assets/search-field.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._container_qg7th_1{font-family:var(--midas-typography-font-family);color:var(--midas-text-primary);flex-direction:column;display:flex}._container_qg7th_1[data-disabled]{cursor:not-allowed}._inner_qg7th_12{width:100%;display:flex}._inputContainer_qg7th_17{height:var(--midas-size-control);width:100%;display:flex;position:relative}._inputContainer_qg7th_17._medium_qg7th_23{height:var(--midas-size-control-md)}._icon_qg7th_28{color:var(--midas-icon-primary);left:var(--midas-space-70);position:absolute;top:50%;transform:translateY(-50%)}@media (forced-colors:active){._icon_qg7th_28{stroke:canvastext}}._clear_qg7th_40{padding:var(--midas-space-70);background-color:#0000;border:none;align-items:center;display:flex;position:absolute;top:50%;right:0;transform:translateY(-50%)}._clear_qg7th_40._medium_qg7th_23{height:var(--midas-size-control-md);padding:var(--midas-space-50) var(--midas-space-70)}._input_qg7th_17{all:unset;color:var(--midas-text-primary);box-sizing:border-box;line-height:var(--midas-typography-line-height-10);appearance:none;background-color:var(--midas-field-01-base);width:100%;height:var(--midas-size-control);padding:var(--midas-space-70) 0 var(--midas-space-70) var(--midas-space-150);border-bottom:1px solid var(--midas-border-color-primary)}@media (forced-colors:active){._input_qg7th_17{border:1px solid}}._input_qg7th_17._medium_qg7th_23{height:var(--midas-size-control-md);padding:var(--midas-space-50) 0 var(--midas-space-50) var(--midas-space-150)}._input_qg7th_17:focus-visible{box-shadow:var(--midas-state-focus)}@media (forced-colors:active){._input_qg7th_17:focus-visible{outline-offset:2px;outline:3px solid highlight}}._input_qg7th_17[data-invalid]{box-shadow:var(--midas-state-invalid);border:none}._input_qg7th_17[data-disabled]{pointer-events:none;background-color:var(--midas-field-disabled);border:none;border-bottom:1px solid var(--midas-border-color-disabled);color:var(--midas-text-disabled)}@media (forced-colors:active){._input_qg7th_17[data-disabled]{border:1px solid}}._input_qg7th_17::-webkit-search-decoration{-webkit-appearance:none}._input_qg7th_17::-webkit-search-cancel-button{-webkit-appearance:none}._input_qg7th_17::-webkit-search-results-button{-webkit-appearance:none}._input_qg7th_17::-webkit-search-results-decoration{-webkit-appearance:none}
|
package/assets/select.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._select_1vl9w_1{flex-direction:column;align-self:stretch;display:flex}._triggerContainer_1vl9w_7{flex-direction:column;display:flex;position:relative}._trigger_1vl9w_7{background-color:var(--midas-field-01-base);border:none;border-bottom:1px solid var(--midas-border-color-primary);color:var(--midas-text-primary);font-size:var(--midas-typography-font-size-30);align-items:center;gap:var(--midas-space-xsmall);min-height:var(--midas-size-control);padding-left:var(--midas-space-medium);padding-right:var(--midas-space-medium);transition:all var(--midas-transition-duration-instant) var(--midas-transition-timing-ease-in);border-radius:0;justify-content:space-between;display:flex}._trigger_1vl9w_7._medium_1vl9w_30{min-height:var(--midas-size-control-md)}._trigger_1vl9w_7:focus-visible{box-shadow:var(--midas-state-focus);transition:all var(--midas-transition-duration-instant) var(--midas-transition-timing-ease-out);outline:none}@media (forced-colors:active){._trigger_1vl9w_7:focus-visible{outline-offset:2px;outline:3px solid highlight}}._trigger_1vl9w_7[data-hovered]{background-color:var(--midas-field-01-hover);cursor:pointer}._trigger_1vl9w_7[data-disabled]{cursor:not-allowed;background:var(--midas-field-disabled);color:var(--midas-text-disabled);border-color:var(--midas-border-color-disabled)}._trigger_1vl9w_7[data-invalid]:not(:focus-visible){box-shadow:var(--midas-state-invalid);border:none}@media (forced-colors:active){._trigger_1vl9w_7[data-invalid]:not(:focus-visible){border:5px solid highlight!important}}._trigger_1vl9w_7[data-pressed]{background-color:var(--midas-field-01-active)}._trigger_1vl9w_7[aria-expanded=true] ._icon_1vl9w_72{transform:rotate(180deg)}._selectValue_1vl9w_78{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-space-150))}._selectValue_1vl9w_78 ._placeholder_1vl9w_84{display:flex}._selectValue_1vl9w_78[data-disabled]{color:var(--midas-text-disabled);cursor:not-allowed}._multiSelectValue_1vl9w_94{pointer-events:none;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-space-150));position:absolute;top:50%;transform:translateY(-50%)}._multiSelectValue_1vl9w_94 ._placeholder_1vl9w_84{left:var(--midas-space-medium);justify-content:center;align-items:center;display:flex;position:relative}._multiSelectValue_1vl9w_94[data-disabled]{color:var(--midas-text-disabled);cursor:not-allowed}._selectValueTag_1vl9w_118{background-color:var(--midas-button-background-primary-base);color:var(--midas-text-on-color);left:var(--midas-space-small);pointer-events:all;border-radius:1.25rem;justify-content:center;align-items:center;min-height:1.75rem;padding:0 .5rem;font-size:.875rem;display:flex;position:relative}._selectValueTag_1vl9w_118:has(._clearButton_1vl9w_132){padding-right:0}._selectValueTag_1vl9w_118[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_1vl9w_144{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}._clearButton_1vl9w_132{background-color:var(--midas-button-background-primary-base);color:var(--midas-text-on-color);margin-left:var(--midas-space-10);padding:var(--midas-space-30);border:none;border-radius:100%;display:flex}._clearButton_1vl9w_132[data-hovered]{background-color:var(--midas-button-background-primary-hover);cursor:pointer}._clearButton_1vl9w_132[data-disabled]{background-color:var(--midas-button-background-disabled);color:var(--midas-text-disabled);pointer-events:none}._clearButton_1vl9w_132:focus-visible{box-shadow:var(--midas-state-focus);outline:none}@media (forced-colors:active){._clearButton_1vl9w_132:focus-visible{outline-offset:2px;outline:3px solid highlight}}._popover_1vl9w_181{font-size:var(--midas-typography-font-size-30);padding:0}._popover_1vl9w_181 :focus{outline:none}._popover_1vl9w_181[data-trigger=Select]{min-width:var(--trigger-width);opacity:1;transition:opacity var(--midas-transition-duration-quick) var(--midas-transition-timing-ease-out)}._popover_1vl9w_181[data-trigger=Select][data-entering]{opacity:0}._popover_1vl9w_181[data-trigger=Select][data-exiting]{opacity:0;transition-timing-function:var(--midas-transition-timing-ease-in)}._popover_1vl9w_181 ._selectAll_1vl9w_209{box-sizing:border-box;background-color:var(--midas-layer-01-base);width:100%;color:var(--midas-text-primary);font-family:var(--midas-typography-font-family);padding:var(--midas-space-medium);line-height:1;display:flex;margin-bottom:2px!important}._popover_1vl9w_181 ._selectAll_1vl9w_209[data-hovered]:not([data-disabled]){background-color:var(--midas-layer-01-hover);cursor:pointer}._popover_1vl9w_181 ._selectAll_1vl9w_209[data-hovered]:not([data-disabled]) div{border-color:var(--midas-text-primary)}._popover_1vl9w_181 ._selectAll_1vl9w_209[data-disabled]{color:var(--midas-text-disabled);cursor:not-allowed}._popover_1vl9w_181 ._selectAll_1vl9w_209[data-selected]{background-color:var(--midas-layer-01-selected-hover)}._popover_1vl9w_181 ._selectAll_1vl9w_209[data-selected][data-hovered]:not([data-disabled]){background-color:var(--midas-layer-01-selected-hover)}._popover_1vl9w_181 ._selectAll_1vl9w_209[data-selected][data-hovered]:not([data-disabled]) div{border-color:#0000}._popover_1vl9w_181 ._selectAll_1vl9w_209[data-focused]{box-shadow:none;outline:none}@media (forced-colors:active){._popover_1vl9w_181 ._selectAll_1vl9w_209[data-focused]{outline-offset:calc(var(--midas-state-focus-contrast-mode-outline) * -1);outline:var(--midas-state-focus-contrast-mode-outline) solid highlight!important}}._popover_1vl9w_181 ._selectAll_1vl9w_209[data-focus-visible]{box-shadow:var(--midas-state-focus-inset);outline:none}._popover_1vl9w_181 ._selectAll_1vl9w_209[data-hovered] div{border-color:var(--midas-button-background-primary-hover)}._icon_1vl9w_72{transition:transform var(--midas-transition-duration-normal) var(--midas-transition-timing-ease-in-out);display:flex}._tagGroup_1vl9w_275{margin-top:var(--midas-space-small)}@media (prefers-reduced-motion){._trigger_1vl9w_7,._popover_1vl9w_181[data-trigger=Select],._icon_1vl9w_72{transition:none}}
|
package/badge/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { n as e, t } from "../chunks/badge-
|
|
1
|
+
import { n as e, t } from "../chunks/badge-DwPG4Jz8.js";
|
|
2
2
|
export { e as Badge, t as BadgeContainer };
|
|
@@ -2,9 +2,9 @@ import { t as e } from "./clsx-BtlV5Vo3.js";
|
|
|
2
2
|
import * as t from "react";
|
|
3
3
|
import { jsx as n } from "react/jsx-runtime";
|
|
4
4
|
import '../assets/badge.css';var r = {
|
|
5
|
-
badge: "
|
|
6
|
-
hasChildren: "
|
|
7
|
-
badgeContainer: "
|
|
5
|
+
badge: "_badge_1nq3o_1",
|
|
6
|
+
hasChildren: "_hasChildren_1nq3o_10",
|
|
7
|
+
badgeContainer: "_badgeContainer_1nq3o_19"
|
|
8
8
|
}, i = ({ children: i, className: a, ...o }) => {
|
|
9
9
|
let s = t.Children.count(i) > 0;
|
|
10
10
|
return /* @__PURE__ */ n("span", {
|
|
@@ -4,7 +4,7 @@ import { t } from "./createLucideIcon-DhIhuN5D.js";
|
|
|
4
4
|
import { t as n } from "./x-Bs_QW3q8.js";
|
|
5
5
|
import { t as r } from "./useLocalizedStringFormatter-bRLuRzVD.js";
|
|
6
6
|
import { n as i } from "./button-CFjf-bDe.js";
|
|
7
|
-
import { n as a, t as o } from "./badge-
|
|
7
|
+
import { n as a, t as o } from "./badge-DwPG4Jz8.js";
|
|
8
8
|
import { t as s } from "./grid-CUYMbO7c.js";
|
|
9
9
|
import { n as c, t as l } from "./tooltip-BE_r_CBm.js";
|
|
10
10
|
import { t as u } from "./logo-D7tz-4hp.js";
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { t as e } from "./clsx-BtlV5Vo3.js";
|
|
3
|
+
import { t } from "./createLucideIcon-DhIhuN5D.js";
|
|
4
|
+
import { t as n } from "./x-Bs_QW3q8.js";
|
|
5
|
+
import { t as r } from "./useLocalizedStringFormatter-bRLuRzVD.js";
|
|
6
|
+
import { n as i } from "./button-CFjf-bDe.js";
|
|
7
|
+
import { t as a } from "./text-mAeDlv5N.js";
|
|
8
|
+
import { t as o } from "./field-error-DYp2kgFr.js";
|
|
9
|
+
import { n as s, t as c } from "./label-Bius53F0.js";
|
|
10
|
+
import { t as l } from "./TextField.module-nF-1HOkH.js";
|
|
11
|
+
import { FormContext as u, Input as d, SearchField as f, useSlottedContext as p } from "react-aria-components";
|
|
12
|
+
import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
|
|
13
|
+
import '../assets/search-field.css';var _ = t("search", [["path", {
|
|
14
|
+
d: "m21 21-4.34-4.34",
|
|
15
|
+
key: "14j7rj"
|
|
16
|
+
}], ["circle", {
|
|
17
|
+
cx: "11",
|
|
18
|
+
cy: "11",
|
|
19
|
+
r: "8",
|
|
20
|
+
key: "4ej97u"
|
|
21
|
+
}]]), v = {
|
|
22
|
+
container: "_container_qg7th_1",
|
|
23
|
+
inner: "_inner_qg7th_12",
|
|
24
|
+
inputContainer: "_inputContainer_qg7th_17",
|
|
25
|
+
medium: "_medium_qg7th_23",
|
|
26
|
+
icon: "_icon_qg7th_28",
|
|
27
|
+
clear: "_clear_qg7th_40",
|
|
28
|
+
input: "_input_qg7th_17"
|
|
29
|
+
}, y = {
|
|
30
|
+
en: { search: "Search" },
|
|
31
|
+
sv: { search: "Sök" }
|
|
32
|
+
};
|
|
33
|
+
//#endregion
|
|
34
|
+
//#region packages/components/src/search-field/SearchField.tsx
|
|
35
|
+
function b(e) {
|
|
36
|
+
return !!e?.length;
|
|
37
|
+
}
|
|
38
|
+
var x = ({ errorPosition: t = "top", size: x = "large", showButton: S, className: C, errorMessage: w, placeholder: T, label: E, description: D, popover: O, validationBehavior: k, inputMode: A = "search", ...j }) => {
|
|
39
|
+
let M = r(y), N = p(u), P = k ?? N?.validationBehavior ?? "aria", F = S !== !1, I = (e) => {
|
|
40
|
+
!e || j.isInvalid || j.validate && b(j.validate(e)) || j.onSubmit?.(e);
|
|
41
|
+
};
|
|
42
|
+
return /* @__PURE__ */ h(f, {
|
|
43
|
+
...j,
|
|
44
|
+
inputMode: A,
|
|
45
|
+
onSubmit: I,
|
|
46
|
+
"aria-label": E ? j["aria-label"] : j["aria-label"] ?? T,
|
|
47
|
+
className: e(v.container, C),
|
|
48
|
+
validationBehavior: P,
|
|
49
|
+
children: ({ state: r }) => /* @__PURE__ */ g(m, { children: [
|
|
50
|
+
/* @__PURE__ */ h(s, {
|
|
51
|
+
popover: O,
|
|
52
|
+
children: E && /* @__PURE__ */ h(c, { children: E })
|
|
53
|
+
}),
|
|
54
|
+
D && /* @__PURE__ */ h(a, {
|
|
55
|
+
slot: "description",
|
|
56
|
+
children: D
|
|
57
|
+
}),
|
|
58
|
+
t === "top" && /* @__PURE__ */ h(o, { children: ({ validationErrors: e }) => w ?? e.join(" ") }),
|
|
59
|
+
/* @__PURE__ */ g("div", {
|
|
60
|
+
className: v.inner,
|
|
61
|
+
children: [/* @__PURE__ */ g("div", {
|
|
62
|
+
className: e(v.inputContainer, { [v.medium]: x === "medium" }),
|
|
63
|
+
children: [
|
|
64
|
+
/* @__PURE__ */ h(_, {
|
|
65
|
+
size: 20,
|
|
66
|
+
className: v.icon
|
|
67
|
+
}),
|
|
68
|
+
/* @__PURE__ */ h(d, {
|
|
69
|
+
placeholder: T,
|
|
70
|
+
className: e(l.input, v.input, { [v.medium]: x === "medium" }),
|
|
71
|
+
onKeyDown: j.onSubmit ? void 0 : (e) => {
|
|
72
|
+
e.key === "Enter" && r.value && !j.isInvalid && e.currentTarget.form?.requestSubmit();
|
|
73
|
+
}
|
|
74
|
+
}),
|
|
75
|
+
r.value.length > 0 && /* @__PURE__ */ h(i, {
|
|
76
|
+
variant: "icon",
|
|
77
|
+
size: x,
|
|
78
|
+
className: e(v.clear, { [v.medium]: x === "medium" }),
|
|
79
|
+
children: /* @__PURE__ */ h(n, {
|
|
80
|
+
size: 20,
|
|
81
|
+
"aria-hidden": !0
|
|
82
|
+
})
|
|
83
|
+
})
|
|
84
|
+
]
|
|
85
|
+
}), F && /* @__PURE__ */ h(i, {
|
|
86
|
+
slot: null,
|
|
87
|
+
excludeFromTabOrder: !0,
|
|
88
|
+
size: x,
|
|
89
|
+
isDisabled: j.isDisabled,
|
|
90
|
+
type: "button",
|
|
91
|
+
onPress: () => I(r.value),
|
|
92
|
+
children: j.buttonText ?? M.format("search")
|
|
93
|
+
})]
|
|
94
|
+
}),
|
|
95
|
+
t === "bottom" && /* @__PURE__ */ h(o, { children: ({ validationErrors: e }) => w ?? e.join(" ") })
|
|
96
|
+
] })
|
|
97
|
+
});
|
|
98
|
+
};
|
|
99
|
+
//#endregion
|
|
100
|
+
export { x as t };
|
|
@@ -27,20 +27,20 @@ import '../assets/select.css';var E = {
|
|
|
27
27
|
selected: "valda"
|
|
28
28
|
}
|
|
29
29
|
}, D = {
|
|
30
|
-
select: "
|
|
31
|
-
triggerContainer: "
|
|
32
|
-
trigger: "
|
|
33
|
-
medium: "
|
|
34
|
-
icon: "
|
|
35
|
-
selectValue: "
|
|
36
|
-
placeholder: "
|
|
37
|
-
multiSelectValue: "
|
|
38
|
-
selectValueTag: "
|
|
39
|
-
clearButton: "
|
|
40
|
-
truncate: "
|
|
41
|
-
popover: "
|
|
42
|
-
selectAll: "
|
|
43
|
-
tagGroup: "
|
|
30
|
+
select: "_select_1vl9w_1",
|
|
31
|
+
triggerContainer: "_triggerContainer_1vl9w_7",
|
|
32
|
+
trigger: "_trigger_1vl9w_7",
|
|
33
|
+
medium: "_medium_1vl9w_30",
|
|
34
|
+
icon: "_icon_1vl9w_72",
|
|
35
|
+
selectValue: "_selectValue_1vl9w_78",
|
|
36
|
+
placeholder: "_placeholder_1vl9w_84",
|
|
37
|
+
multiSelectValue: "_multiSelectValue_1vl9w_94",
|
|
38
|
+
selectValueTag: "_selectValueTag_1vl9w_118",
|
|
39
|
+
clearButton: "_clearButton_1vl9w_132",
|
|
40
|
+
truncate: "_truncate_1vl9w_144",
|
|
41
|
+
popover: "_popover_1vl9w_181",
|
|
42
|
+
selectAll: "_selectAll_1vl9w_209",
|
|
43
|
+
tagGroup: "_tagGroup_1vl9w_275"
|
|
44
44
|
}, O = () => {
|
|
45
45
|
let e = h.useContext(y), t = a(E);
|
|
46
46
|
return /* @__PURE__ */ S(r, {
|
package/index.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
import { n as e, t } from "./chunks/accordion-KEgnlzYi.js";
|
|
4
4
|
import { t as n } from "./chunks/clsx-BtlV5Vo3.js";
|
|
5
5
|
import { t as r } from "./chunks/spinner-C3WiZYld.js";
|
|
6
|
-
import { a as i, i as a, n as o, r as s, t as c } from "./chunks/layout-
|
|
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
8
|
import { a as u, i as d, n as f, o as p, r as m, t as h } from "./chunks/table-jarDZ4q4.js";
|
|
9
9
|
import { t as g } from "./chunks/link-button-ZsK6UGko.js";
|
|
@@ -11,12 +11,12 @@ import { n as _, t as v } from "./chunks/date-picker-BQcIYROH.js";
|
|
|
11
11
|
import { n as y, t as b } from "./chunks/calendar-C0rlcHfr.js";
|
|
12
12
|
import { n as x, t as S } from "./chunks/checkbox-DEN5T_Km.js";
|
|
13
13
|
import { n as C, t as w } from "./chunks/color-scheme-switch-FjmPZdE4.js";
|
|
14
|
-
import { t as T } from "./chunks/search-field-
|
|
14
|
+
import { t as T } from "./chunks/search-field-lz0_j_HR.js";
|
|
15
15
|
import { n as E, t as D } from "./chunks/file-list-DYOuch5G.js";
|
|
16
16
|
import { t as O } from "./chunks/useLocalizedStringFormatter-bRLuRzVD.js";
|
|
17
17
|
import { n as k, t as A } from "./chunks/button-CFjf-bDe.js";
|
|
18
18
|
import { t as j } from "./chunks/heading-595zCrRS.js";
|
|
19
|
-
import { n as M, t as N } from "./chunks/badge-
|
|
19
|
+
import { n as M, t as N } from "./chunks/badge-DwPG4Jz8.js";
|
|
20
20
|
import { n as P, t as F } from "./chunks/breadcrumbs-XTH3axtt.js";
|
|
21
21
|
import { t as I } from "./chunks/text-mAeDlv5N.js";
|
|
22
22
|
import { t as L } from "./chunks/field-error-DYp2kgFr.js";
|
|
@@ -38,7 +38,7 @@ import { n as Ee, t as De } from "./chunks/tooltip-BE_r_CBm.js";
|
|
|
38
38
|
import { n as Oe, t as ke } from "./chunks/logo-D7tz-4hp.js";
|
|
39
39
|
import { t as Ae } from "./chunks/progress-bar-5H5WvG7R.js";
|
|
40
40
|
import { n as je, t as Me } from "./chunks/radio-CsAvwCn2.js";
|
|
41
|
-
import { t as Ne } from "./chunks/select-
|
|
41
|
+
import { t as Ne } from "./chunks/select-m7BIivwY.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
44
|
import { i as Re, n as ze, r as Be, t as Ve } from "./chunks/tabs-eshGdQJJ.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.
|
|
62
|
+
version: "17.21.0",
|
|
63
63
|
module: "./index.js",
|
|
64
64
|
type: "module",
|
|
65
65
|
main: "./index.js",
|
package/layout/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { a as e, i as t, n, r, t as i } from "../chunks/layout-
|
|
1
|
+
import { a as e, i as t, n, r, t as i } from "../chunks/layout-DibnX6Za.js";
|
|
2
2
|
export { r as Header, i as Layout, n as Navbar, t as Sidebar, e as SidebarLink };
|
package/package.json
CHANGED
|
@@ -1,8 +1,14 @@
|
|
|
1
1
|
import { SearchFieldProps as AriaSearchFieldProps } from 'react-aria-components';
|
|
2
2
|
import { Size } from '../common/types';
|
|
3
|
+
import { InfoPopoverProps } from '../label';
|
|
3
4
|
export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'children'> {
|
|
4
5
|
/** Placeholder text */
|
|
5
6
|
placeholder: string;
|
|
7
|
+
/** Specify label displayed above the SearchField */
|
|
8
|
+
label?: string;
|
|
9
|
+
/** Specify description displayed below the label */
|
|
10
|
+
description?: string;
|
|
11
|
+
popover?: InfoPopoverProps;
|
|
6
12
|
/**
|
|
7
13
|
* Whether to render a built-in submit button.
|
|
8
14
|
*
|
|
@@ -37,4 +43,4 @@ export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'children'>
|
|
|
37
43
|
* */
|
|
38
44
|
size?: Size;
|
|
39
45
|
}
|
|
40
|
-
export declare const SearchField: ({ errorPosition, size, showButton, className, errorMessage, placeholder, validationBehavior, inputMode, ...props }: SearchFieldProps) => import("react/jsx-runtime").JSX.Element;
|
|
46
|
+
export declare const SearchField: ({ errorPosition, size, showButton, className, errorMessage, placeholder, label, description, popover, validationBehavior, inputMode, ...props }: SearchFieldProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -2,7 +2,7 @@ import { StoryObj } from '@storybook/react-vite';
|
|
|
2
2
|
import { SearchField } from './SearchField';
|
|
3
3
|
type Story = StoryObj<typeof SearchField>;
|
|
4
4
|
declare const _default: {
|
|
5
|
-
component: ({ errorPosition, size, showButton, className, errorMessage, placeholder, validationBehavior, inputMode, ...props }: import('./SearchField').SearchFieldProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
component: ({ errorPosition, size, showButton, className, errorMessage, placeholder, label, description, popover, validationBehavior, inputMode, ...props }: import('./SearchField').SearchFieldProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
6
|
title: string;
|
|
7
7
|
tags: string[];
|
|
8
8
|
parameters: {
|
|
@@ -29,3 +29,6 @@ export declare const Disabled: Story;
|
|
|
29
29
|
* Enter still works for keyboard submission.
|
|
30
30
|
*/
|
|
31
31
|
export declare const WithoutButton: Story;
|
|
32
|
+
export declare const WithHelpPopover: Story;
|
|
33
|
+
export declare const WithLabelAndDescription: Story;
|
|
34
|
+
export declare const WithLabelAndDescriptionWithoutButton: Story;
|
package/search-field/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as e } from "../chunks/search-field-
|
|
1
|
+
import { t as e } from "../chunks/search-field-lz0_j_HR.js";
|
|
2
2
|
export { e as SearchField };
|
package/select/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { t as e } from "../chunks/select-
|
|
1
|
+
import { t as e } from "../chunks/select-m7BIivwY.js";
|
|
2
2
|
export { e as Select };
|
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { t as e } from "./clsx-BtlV5Vo3.js";
|
|
3
|
-
import { t } from "./createLucideIcon-DhIhuN5D.js";
|
|
4
|
-
import { t as n } from "./x-Bs_QW3q8.js";
|
|
5
|
-
import { t as r } from "./useLocalizedStringFormatter-bRLuRzVD.js";
|
|
6
|
-
import { n as i } from "./button-CFjf-bDe.js";
|
|
7
|
-
import { t as a } from "./field-error-DYp2kgFr.js";
|
|
8
|
-
import { t as o } from "./TextField.module-nF-1HOkH.js";
|
|
9
|
-
import { FormContext as s, Input as c, SearchField as l, useSlottedContext as u } from "react-aria-components";
|
|
10
|
-
import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
|
|
11
|
-
import '../assets/search-field.css';var m = t("search", [["path", {
|
|
12
|
-
d: "m21 21-4.34-4.34",
|
|
13
|
-
key: "14j7rj"
|
|
14
|
-
}], ["circle", {
|
|
15
|
-
cx: "11",
|
|
16
|
-
cy: "11",
|
|
17
|
-
r: "8",
|
|
18
|
-
key: "4ej97u"
|
|
19
|
-
}]]), h = {
|
|
20
|
-
container: "_container_1msv3_1",
|
|
21
|
-
inner: "_inner_1msv3_10",
|
|
22
|
-
inputContainer: "_inputContainer_1msv3_15",
|
|
23
|
-
medium: "_medium_1msv3_21",
|
|
24
|
-
icon: "_icon_1msv3_26",
|
|
25
|
-
clear: "_clear_1msv3_38",
|
|
26
|
-
input: "_input_1msv3_15"
|
|
27
|
-
}, g = {
|
|
28
|
-
en: { search: "Search" },
|
|
29
|
-
sv: { search: "Sök" }
|
|
30
|
-
};
|
|
31
|
-
//#endregion
|
|
32
|
-
//#region packages/components/src/search-field/SearchField.tsx
|
|
33
|
-
function _(e) {
|
|
34
|
-
return !!e?.length;
|
|
35
|
-
}
|
|
36
|
-
var v = ({ errorPosition: t = "top", size: v = "large", showButton: y, className: b, errorMessage: x, placeholder: S, validationBehavior: C, inputMode: w = "search", ...T }) => {
|
|
37
|
-
let E = r(g), D = u(s), O = C ?? D?.validationBehavior ?? "aria", k = y !== !1, A = (e) => {
|
|
38
|
-
!e || T.isInvalid || T.validate && _(T.validate(e)) || T.onSubmit?.(e);
|
|
39
|
-
};
|
|
40
|
-
return /* @__PURE__ */ f(l, {
|
|
41
|
-
...T,
|
|
42
|
-
inputMode: w,
|
|
43
|
-
onSubmit: A,
|
|
44
|
-
"aria-label": T["aria-label"] ?? S,
|
|
45
|
-
className: e(h.container, b),
|
|
46
|
-
validationBehavior: O,
|
|
47
|
-
children: ({ state: r }) => /* @__PURE__ */ p(d, { children: [
|
|
48
|
-
t === "top" && /* @__PURE__ */ f(a, { children: ({ validationErrors: e }) => x ?? e.join(" ") }),
|
|
49
|
-
/* @__PURE__ */ p("div", {
|
|
50
|
-
className: h.inner,
|
|
51
|
-
children: [/* @__PURE__ */ p("div", {
|
|
52
|
-
className: e(h.inputContainer, { [h.medium]: v === "medium" }),
|
|
53
|
-
children: [
|
|
54
|
-
/* @__PURE__ */ f(m, {
|
|
55
|
-
size: 20,
|
|
56
|
-
className: h.icon
|
|
57
|
-
}),
|
|
58
|
-
/* @__PURE__ */ f(c, {
|
|
59
|
-
placeholder: S,
|
|
60
|
-
className: e(o.input, h.input, { [h.medium]: v === "medium" }),
|
|
61
|
-
onKeyDown: T.onSubmit ? void 0 : (e) => {
|
|
62
|
-
e.key === "Enter" && r.value && !T.isInvalid && e.currentTarget.form?.requestSubmit();
|
|
63
|
-
}
|
|
64
|
-
}),
|
|
65
|
-
r.value.length > 0 && /* @__PURE__ */ f(i, {
|
|
66
|
-
variant: "icon",
|
|
67
|
-
size: v,
|
|
68
|
-
className: e(h.clear, { [h.medium]: v === "medium" }),
|
|
69
|
-
children: /* @__PURE__ */ f(n, {
|
|
70
|
-
size: 20,
|
|
71
|
-
"aria-hidden": !0
|
|
72
|
-
})
|
|
73
|
-
})
|
|
74
|
-
]
|
|
75
|
-
}), k && /* @__PURE__ */ f(i, {
|
|
76
|
-
slot: null,
|
|
77
|
-
excludeFromTabOrder: !0,
|
|
78
|
-
size: v,
|
|
79
|
-
isDisabled: T.isDisabled,
|
|
80
|
-
type: "button",
|
|
81
|
-
onPress: () => A(r.value),
|
|
82
|
-
children: T.buttonText ?? E.format("search")
|
|
83
|
-
})]
|
|
84
|
-
}),
|
|
85
|
-
t === "bottom" && /* @__PURE__ */ f(a, { children: ({ validationErrors: e }) => x ?? e.join(" ") })
|
|
86
|
-
] })
|
|
87
|
-
});
|
|
88
|
-
};
|
|
89
|
-
//#endregion
|
|
90
|
-
export { v as t };
|