@midas-ds/components 17.19.0 → 17.20.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 CHANGED
@@ -1,3 +1,13 @@
1
+ ## 17.20.0 (2026-08-14)
2
+
3
+ ### 🚀 Features
4
+
5
+ - **components,search-field:** add label and description support ([96dcf586333](https://github.com/migrationsverket/midas/commit/96dcf586333))
6
+
7
+ ### 🩹 Fixes
8
+
9
+ - **components,badge:** pin badge to icon corner in width-constrained containers ([b1d8e302d10](https://github.com/migrationsverket/midas/commit/b1d8e302d10))
10
+
1
11
  ## 17.19.0 (2026-08-13)
2
12
 
3
13
  ### 🚀 Features
package/assets/badge.css CHANGED
@@ -1 +1 @@
1
- ._badge_1fwow_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_1fwow_1._hasChildren_1fwow_10{justify-content:center;align-items:center;min-height:1rem;padding:0 .25rem;display:flex}._badgeContainer_1fwow_19{min-width:0;display:flex;position:relative}._badgeContainer_1fwow_19 ._badge_1fwow_1{transform-origin:0;position:absolute;top:0;right:0;transform:translate(50%,-50%)}
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%)}
@@ -1 +1 @@
1
- ._container_1msv3_1{font-family:var(--midas-typography-font-family);color:var(--midas-text-primary)}._container_1msv3_1[data-disabled]{cursor:not-allowed}._inner_1msv3_10{width:100%;display:flex}._inputContainer_1msv3_15{height:var(--midas-size-control);width:100%;display:flex;position:relative}._inputContainer_1msv3_15._medium_1msv3_21{height:var(--midas-size-control-md)}._icon_1msv3_26{color:var(--midas-icon-primary);left:var(--midas-space-70);position:absolute;top:50%;transform:translateY(-50%)}@media (forced-colors:active){._icon_1msv3_26{stroke:canvastext}}._clear_1msv3_38{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_1msv3_38._medium_1msv3_21{height:var(--midas-size-control-md);padding:var(--midas-space-50) var(--midas-space-70)}._input_1msv3_15{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_1msv3_15{border:1px solid}}._input_1msv3_15._medium_1msv3_21{height:var(--midas-size-control-md);padding:var(--midas-space-50) 0 var(--midas-space-50) var(--midas-space-150)}._input_1msv3_15:focus-visible{box-shadow:var(--midas-state-focus)}@media (forced-colors:active){._input_1msv3_15:focus-visible{outline-offset:2px;outline:3px solid highlight}}._input_1msv3_15[data-invalid]{box-shadow:var(--midas-state-invalid);border:none}._input_1msv3_15[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_1msv3_15[data-disabled]{border:1px solid}}._input_1msv3_15::-webkit-search-decoration{-webkit-appearance:none}._input_1msv3_15::-webkit-search-cancel-button{-webkit-appearance:none}._input_1msv3_15::-webkit-search-results-button{-webkit-appearance:none}._input_1msv3_15::-webkit-search-results-decoration{-webkit-appearance:none}
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/badge/index.js CHANGED
@@ -1,2 +1,2 @@
1
- import { n as e, t } from "../chunks/badge-DrCn-5SX.js";
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: "_badge_1fwow_1",
6
- hasChildren: "_hasChildren_1fwow_10",
7
- badgeContainer: "_badgeContainer_1fwow_19"
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-DrCn-5SX.js";
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 };
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-BzK7P4Xn.js";
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-Ci2UjkmK.js";
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-DrCn-5SX.js";
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";
@@ -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.19.0",
62
+ version: "17.20.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-BzK7P4Xn.js";
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
@@ -14,7 +14,7 @@
14
14
  "description": "Midas Components",
15
15
  "homepage": "https://designsystem.migrationsverket.se/",
16
16
  "license": "CC0-1.0",
17
- "version": "17.19.0",
17
+ "version": "17.20.0",
18
18
  "module": "./index.js",
19
19
  "type": "module",
20
20
  "main": "./index.js",
@@ -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;
@@ -1,2 +1,2 @@
1
- import { t as e } from "../chunks/search-field-Ci2UjkmK.js";
1
+ import { t as e } from "../chunks/search-field-lz0_j_HR.js";
2
2
  export { e as SearchField };
@@ -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 };