@midas-ds/components 17.8.3 β 17.10.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 +47 -0
- package/assets/ColorSchemeSwitch.css +1 -1
- package/assets/FileListItem.css +1 -0
- package/assets/SearchField.css +1 -1
- package/chunks/ColorSchemeSwitch-Bp3PSGkA.js +113 -0
- package/chunks/FileListItem-CKF9HPjw.js +69 -0
- package/chunks/SearchField-VIMb28RB.js +118 -0
- package/color-scheme-switch/ColorSchemeSwitch.d.ts +10 -6
- package/color-scheme-switch/index.js +1 -1
- package/file-list/FileList.d.ts +3 -0
- package/file-list/FileList.stories.d.ts +19 -0
- package/file-list/FileListItem.d.ts +7 -0
- package/file-list/index.d.ts +4 -0
- package/file-list/index.js +5 -0
- package/file-list/intl/translations.json.d.ts +11 -0
- package/index.d.ts +1 -0
- package/index.js +127 -124
- package/package.json +1 -1
- package/search-field/SearchField.d.ts +22 -4
- package/search-field/SearchField.stories.d.ts +10 -1
- package/search-field/index.js +1 -1
- package/chunks/ColorSchemeSwitch-gD9pFu9h.js +0 -105
- package/chunks/SearchField-C_wD8YuG.js +0 -128
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,50 @@
|
|
|
1
|
+
## 17.10.0 (2026-03-19)
|
|
2
|
+
|
|
3
|
+
### π Features
|
|
4
|
+
|
|
5
|
+
- **components,file-list:** localize delete button aria-label ([30410e821d](https://github.com/migrationsverket/midas/commit/30410e821d))
|
|
6
|
+
- **components,docs:** add FileList component ([dae5f056c2](https://github.com/migrationsverket/midas/commit/dae5f056c2))
|
|
7
|
+
- **components,color-scheme-switch:** deprecate defaultValue in favor of defaultScheme ([1c48d0b7f1](https://github.com/migrationsverket/midas/commit/1c48d0b7f1))
|
|
8
|
+
|
|
9
|
+
### π©Ή Fixes
|
|
10
|
+
|
|
11
|
+
- **components,file-list:** remove id prop from FileListItem ([688bb0b04a](https://github.com/migrationsverket/midas/commit/688bb0b04a))
|
|
12
|
+
- **components,file-list:** don't forward id to li element ([214378b006](https://github.com/migrationsverket/midas/commit/214378b006))
|
|
13
|
+
- **components,file-list:** correct font size and weight tokens for file name and size ([0ae7b21451](https://github.com/migrationsverket/midas/commit/0ae7b21451))
|
|
14
|
+
- **components,color-scheme-switch:** show focus ring on selected button ([b112b5f823](https://github.com/migrationsverket/midas/commit/b112b5f823))
|
|
15
|
+
|
|
16
|
+
### π Refactoring
|
|
17
|
+
|
|
18
|
+
- **components,docs,file-list:** replace GridList with plain list ([6046308cb3](https://github.com/migrationsverket/midas/commit/6046308cb3))
|
|
19
|
+
|
|
20
|
+
### π§ Maintenance
|
|
21
|
+
|
|
22
|
+
- **components,docs,file-list:** remove leftover id props from docs, spec and playground ([4439e37443](https://github.com/migrationsverket/midas/commit/4439e37443))
|
|
23
|
+
- **components,file-list:** remove id prop from stories ([0fb0bba495](https://github.com/migrationsverket/midas/commit/0fb0bba495))
|
|
24
|
+
- **components,file-list:** fix trailing blank line in css ([39b8525728](https://github.com/migrationsverket/midas/commit/39b8525728))
|
|
25
|
+
- **components,file-list:** fix empty interface lint error ([405d702ee9](https://github.com/migrationsverket/midas/commit/405d702ee9))
|
|
26
|
+
- **components,file-list:** fix lint errors ([d175b49ea4](https://github.com/migrationsverket/midas/commit/d175b49ea4))
|
|
27
|
+
- **components,color-scheme-switch:** fix button sizing and selected state styles ([fe5b1dc132](https://github.com/migrationsverket/midas/commit/fe5b1dc132))
|
|
28
|
+
- **components,color-scheme-switch:** replace hardcoded padding with space token ([3f29552fe2](https://github.com/migrationsverket/midas/commit/3f29552fe2))
|
|
29
|
+
|
|
30
|
+
## 17.9.0 (2026-03-19)
|
|
31
|
+
|
|
32
|
+
### π Features
|
|
33
|
+
|
|
34
|
+
- **components,search-field:** deprecate built-in submit button, fix a11y ([717b9b34ab](https://github.com/migrationsverket/midas/commit/717b9b34ab))
|
|
35
|
+
|
|
36
|
+
### π©Ή Fixes
|
|
37
|
+
|
|
38
|
+
- **components,search-field:** make built-in button non-breaking, add future flag ([4c6a0b985e](https://github.com/migrationsverket/midas/commit/4c6a0b985e))
|
|
39
|
+
|
|
40
|
+
### π Refactoring
|
|
41
|
+
|
|
42
|
+
- **components,search-field:** rebuild on RAC SearchField component ([86de78182e](https://github.com/migrationsverket/midas/commit/86de78182e))
|
|
43
|
+
|
|
44
|
+
### π Documentation changes
|
|
45
|
+
|
|
46
|
+
- **components,search-field:** link v18 tracking issue from showButton JSDoc ([51c90e03b7](https://github.com/migrationsverket/midas/commit/51c90e03b7))
|
|
47
|
+
|
|
1
48
|
## 17.8.3 (2026-03-18)
|
|
2
49
|
|
|
3
50
|
### π§ Maintenance
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._button_1r8vq_1{padding:calc(var(--midas-space-60) - 1px);position:relative}._button_1r8vq_1[data-selected]:not([data-focus-visible]){box-shadow:none}._button_1r8vq_1[data-focus-visible]{box-shadow:var(--midas-state-focus)}._selectionIndicator_1r8vq_14{background-color:var(--midas-border-color-tertiary);bottom:0;height:2px;left:0;position:absolute;right:0;transition:translate var(--midas-transition-duration-fast) ease}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._fileList_1jd3b_1{display:flex;flex-direction:column;gap:var(--midas-space-small);list-style:none;margin:0;padding:0}._fileListItem_1jd3b_10{align-items:center;background-color:var(--midas-layer-01-base);box-sizing:border-box;display:flex;font-family:var(--midas-typography-font-family);height:var(--midas-size-control);padding-inline-start:var(--midas-space-medium)}._fileInfo_1jd3b_20{align-items:baseline;display:flex;flex:1;gap:var(--midas-space-small);min-width:0}._fileName_1jd3b_28{color:var(--midas-text-primary);font-size:var(--midas-typography-font-size-30);font-weight:var(--midas-typography-weight-medium);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._fileSize_1jd3b_37{color:var(--midas-text-secondary);flex-shrink:0;font-size:var(--midas-typography-font-size-30)}._deleteButton_1jd3b_43{color:var(--midas-icon-primary);flex-shrink:0}
|
package/assets/SearchField.css
CHANGED
|
@@ -1 +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{display:flex;width:100%}._inputContainer_1msv3_15{display:flex;position:relative;height:var(--midas-size-control);width:100%}._inputContainer_1msv3_15._medium_1msv3_21{height:var(--midas-size-control-md)}._icon_1msv3_26{color:var(--midas-icon-primary);position:absolute;left:var(--midas-space-70);top:50%;transform:translateY(-50%)}@media(forced-colors:active){._icon_1msv3_26{stroke:canvastext}}._clear_1msv3_38{display:flex;align-items:center;position:absolute;padding:var(--midas-space-70);border:none;right:0;top:50%;transform:translateY(-50%);background-color:transparent}._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:3px solid highlight;outline-offset:2px}}._input_1msv3_15[data-invalid]{border:none;box-shadow:var(--midas-state-invalid)}._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,._input_1msv3_15::-webkit-search-cancel-button,._input_1msv3_15::-webkit-search-results-button,._input_1msv3_15::-webkit-search-results-decoration{-webkit-appearance:none}
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsxs as s, jsx as e } from "react/jsx-runtime";
|
|
3
|
+
import * as h from "react";
|
|
4
|
+
import { VisuallyHidden as r } from "react-aria";
|
|
5
|
+
import { SelectionIndicator as l } from "react-aria-components";
|
|
6
|
+
import { a as k, T as i } from "./ToggleButtonGroup-DRnEEi5-.js";
|
|
7
|
+
import { c as d } from "./createLucideIcon-CP-mMPfa.js";
|
|
8
|
+
import { u as f } from "./useLocalizedStringFormatter-BHvsRxDk.js";
|
|
9
|
+
import '../assets/ColorSchemeSwitch.css';const M = [
|
|
10
|
+
[
|
|
11
|
+
"path",
|
|
12
|
+
{
|
|
13
|
+
d: "M18 5a2 2 0 0 1 2 2v8.526a2 2 0 0 0 .212.897l1.068 2.127a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45l1.068-2.127A2 2 0 0 0 4 15.526V7a2 2 0 0 1 2-2z",
|
|
14
|
+
key: "1pdavp"
|
|
15
|
+
}
|
|
16
|
+
],
|
|
17
|
+
["path", { d: "M20.054 15.987H3.946", key: "14rxg9" }]
|
|
18
|
+
], S = d("laptop", M);
|
|
19
|
+
const _ = [
|
|
20
|
+
[
|
|
21
|
+
"path",
|
|
22
|
+
{
|
|
23
|
+
d: "M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401",
|
|
24
|
+
key: "kfwtm"
|
|
25
|
+
}
|
|
26
|
+
]
|
|
27
|
+
], N = d("moon", _);
|
|
28
|
+
const v = [
|
|
29
|
+
["circle", { cx: "12", cy: "12", r: "4", key: "4exip2" }],
|
|
30
|
+
["path", { d: "M12 2v2", key: "tus03m" }],
|
|
31
|
+
["path", { d: "M12 20v2", key: "1lh1kg" }],
|
|
32
|
+
["path", { d: "m4.93 4.93 1.41 1.41", key: "149t6j" }],
|
|
33
|
+
["path", { d: "m17.66 17.66 1.41 1.41", key: "ptbguv" }],
|
|
34
|
+
["path", { d: "M2 12h2", key: "1t8f8n" }],
|
|
35
|
+
["path", { d: "M20 12h2", key: "1q8mjw" }],
|
|
36
|
+
["path", { d: "m6.34 17.66-1.41 1.41", key: "1m8zz5" }],
|
|
37
|
+
["path", { d: "m19.07 4.93-1.41 1.41", key: "1shlcs" }]
|
|
38
|
+
], I = d("sun", v), b = "_button_1r8vq_1", j = "_selectionIndicator_1r8vq_14", t = {
|
|
39
|
+
button: b,
|
|
40
|
+
selectionIndicator: j
|
|
41
|
+
}, w = { darkMode: "Dark Mode", lightMode: "Light Mode", system: "System Setting" }, x = { darkMode: "MΓΆrkt lΓ€ge", lightMode: "Ljust lΓ€ge", system: "SysteminstΓ€llning" }, L = {
|
|
42
|
+
en: w,
|
|
43
|
+
sv: x
|
|
44
|
+
}, $ = ({
|
|
45
|
+
selector: c = ":root",
|
|
46
|
+
defaultScheme: p = "light dark",
|
|
47
|
+
defaultValue: y,
|
|
48
|
+
className: g
|
|
49
|
+
}) => {
|
|
50
|
+
const [n, u] = h.useState(
|
|
51
|
+
y ?? /* @__PURE__ */ new Set([p])
|
|
52
|
+
);
|
|
53
|
+
h.useEffect(() => {
|
|
54
|
+
const o = document.querySelector(c);
|
|
55
|
+
if (o) {
|
|
56
|
+
const m = Array.from(n).join(" ");
|
|
57
|
+
o.style.removeProperty("color-scheme"), m === "light dark" ? delete o.dataset.colorScheme : o.dataset.colorScheme = m;
|
|
58
|
+
} else
|
|
59
|
+
console.warn(`No element found for selector: "${c}"`);
|
|
60
|
+
}, [n, c]);
|
|
61
|
+
const a = f(L);
|
|
62
|
+
return /* @__PURE__ */ s(
|
|
63
|
+
k,
|
|
64
|
+
{
|
|
65
|
+
selectionMode: "single",
|
|
66
|
+
selectedKeys: n,
|
|
67
|
+
onSelectionChange: u,
|
|
68
|
+
disallowEmptySelection: !0,
|
|
69
|
+
className: g,
|
|
70
|
+
children: [
|
|
71
|
+
/* @__PURE__ */ s(
|
|
72
|
+
i,
|
|
73
|
+
{
|
|
74
|
+
id: "light dark",
|
|
75
|
+
className: t.button,
|
|
76
|
+
children: [
|
|
77
|
+
/* @__PURE__ */ e(S, {}),
|
|
78
|
+
/* @__PURE__ */ e(r, { children: a.format("system") }),
|
|
79
|
+
/* @__PURE__ */ e(l, { className: t.selectionIndicator })
|
|
80
|
+
]
|
|
81
|
+
}
|
|
82
|
+
),
|
|
83
|
+
/* @__PURE__ */ s(
|
|
84
|
+
i,
|
|
85
|
+
{
|
|
86
|
+
id: "light",
|
|
87
|
+
className: t.button,
|
|
88
|
+
children: [
|
|
89
|
+
/* @__PURE__ */ e(I, {}),
|
|
90
|
+
/* @__PURE__ */ e(r, { children: a.format("lightMode") }),
|
|
91
|
+
/* @__PURE__ */ e(l, { className: t.selectionIndicator })
|
|
92
|
+
]
|
|
93
|
+
}
|
|
94
|
+
),
|
|
95
|
+
/* @__PURE__ */ s(
|
|
96
|
+
i,
|
|
97
|
+
{
|
|
98
|
+
id: "dark",
|
|
99
|
+
className: t.button,
|
|
100
|
+
children: [
|
|
101
|
+
/* @__PURE__ */ e(N, {}),
|
|
102
|
+
/* @__PURE__ */ e(r, { children: a.format("darkMode") }),
|
|
103
|
+
/* @__PURE__ */ e(l, { className: t.selectionIndicator })
|
|
104
|
+
]
|
|
105
|
+
}
|
|
106
|
+
)
|
|
107
|
+
]
|
|
108
|
+
}
|
|
109
|
+
);
|
|
110
|
+
};
|
|
111
|
+
export {
|
|
112
|
+
$ as C
|
|
113
|
+
};
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as t, jsxs as a } from "react/jsx-runtime";
|
|
3
|
+
import { c as l } from "./clsx-AexbMWKp.js";
|
|
4
|
+
import { B as c } from "./Button-GCROAMSl.js";
|
|
5
|
+
import { c as m } from "./createLucideIcon-CP-mMPfa.js";
|
|
6
|
+
import { u as f } from "./useLocalizedStringFormatter-BHvsRxDk.js";
|
|
7
|
+
import '../assets/FileListItem.css';const d = [
|
|
8
|
+
["path", { d: "M10 11v6", key: "nco0om" }],
|
|
9
|
+
["path", { d: "M14 11v6", key: "outv1u" }],
|
|
10
|
+
["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6", key: "miytrc" }],
|
|
11
|
+
["path", { d: "M3 6h18", key: "d0wm0j" }],
|
|
12
|
+
["path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2", key: "e791ji" }]
|
|
13
|
+
], _ = m("trash-2", d), h = "_fileList_1jd3b_1", p = "_fileListItem_1jd3b_10", u = "_fileInfo_1jd3b_20", L = "_fileName_1jd3b_28", v = "_fileSize_1jd3b_37", j = "_deleteButton_1jd3b_43", e = {
|
|
14
|
+
fileList: h,
|
|
15
|
+
fileListItem: p,
|
|
16
|
+
fileInfo: u,
|
|
17
|
+
fileName: L,
|
|
18
|
+
fileSize: v,
|
|
19
|
+
deleteButton: j
|
|
20
|
+
}, M = ({ className: s, children: i, ...o }) => /* @__PURE__ */ t(
|
|
21
|
+
"ul",
|
|
22
|
+
{
|
|
23
|
+
...o,
|
|
24
|
+
className: l(e.fileList, s),
|
|
25
|
+
children: i
|
|
26
|
+
}
|
|
27
|
+
), I = { removeFile: "Remove" }, N = { removeFile: "Ta bort" }, b = {
|
|
28
|
+
en: I,
|
|
29
|
+
sv: N
|
|
30
|
+
}, x = ({
|
|
31
|
+
fileName: s,
|
|
32
|
+
fileSize: i,
|
|
33
|
+
onDelete: o,
|
|
34
|
+
className: n
|
|
35
|
+
}) => {
|
|
36
|
+
const r = f(b);
|
|
37
|
+
return /* @__PURE__ */ a(
|
|
38
|
+
"li",
|
|
39
|
+
{
|
|
40
|
+
className: l(e.fileListItem, n),
|
|
41
|
+
children: [
|
|
42
|
+
/* @__PURE__ */ a("span", { className: e.fileInfo, children: [
|
|
43
|
+
/* @__PURE__ */ t("span", { className: e.fileName, children: s }),
|
|
44
|
+
i && /* @__PURE__ */ t("span", { className: e.fileSize, children: i })
|
|
45
|
+
] }),
|
|
46
|
+
o && /* @__PURE__ */ t(
|
|
47
|
+
c,
|
|
48
|
+
{
|
|
49
|
+
variant: "icon",
|
|
50
|
+
onPress: o,
|
|
51
|
+
"aria-label": `${r.format("removeFile")} ${s}`,
|
|
52
|
+
className: e.deleteButton,
|
|
53
|
+
children: /* @__PURE__ */ t(
|
|
54
|
+
_,
|
|
55
|
+
{
|
|
56
|
+
size: 20,
|
|
57
|
+
"aria-hidden": !0
|
|
58
|
+
}
|
|
59
|
+
)
|
|
60
|
+
}
|
|
61
|
+
)
|
|
62
|
+
]
|
|
63
|
+
}
|
|
64
|
+
);
|
|
65
|
+
};
|
|
66
|
+
export {
|
|
67
|
+
M as F,
|
|
68
|
+
x as a
|
|
69
|
+
};
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
import { jsx as i, jsxs as s, Fragment as F } from "react/jsx-runtime";
|
|
3
|
+
import { useSlottedContext as j, FormContext as N, SearchField as g, Input as y } from "react-aria-components";
|
|
4
|
+
import { s as B } from "./TextField.module-BDIbEV87.js";
|
|
5
|
+
import { B as u } from "./Button-GCROAMSl.js";
|
|
6
|
+
import { c as o } from "./clsx-AexbMWKp.js";
|
|
7
|
+
import { F as h } from "./FieldError-krpMBtie.js";
|
|
8
|
+
import { c as C } from "./createLucideIcon-CP-mMPfa.js";
|
|
9
|
+
import { X as k } from "./x-B9bYxG31.js";
|
|
10
|
+
import { u as I } from "./useLocalizedStringFormatter-BHvsRxDk.js";
|
|
11
|
+
import '../assets/SearchField.css';const D = [
|
|
12
|
+
["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
|
|
13
|
+
["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
|
|
14
|
+
], E = C("search", D), L = "_container_1msv3_1", T = "_inner_1msv3_10", V = "_inputContainer_1msv3_15", $ = "_medium_1msv3_21", w = "_icon_1msv3_26", O = "_clear_1msv3_38", P = "_input_1msv3_15", n = {
|
|
15
|
+
container: L,
|
|
16
|
+
inner: T,
|
|
17
|
+
inputContainer: V,
|
|
18
|
+
medium: $,
|
|
19
|
+
icon: w,
|
|
20
|
+
clear: O,
|
|
21
|
+
input: P
|
|
22
|
+
}, X = { search: "Search" }, q = { search: "SΓΆk" }, A = {
|
|
23
|
+
en: X,
|
|
24
|
+
sv: q
|
|
25
|
+
};
|
|
26
|
+
function G(a) {
|
|
27
|
+
return !!a?.length;
|
|
28
|
+
}
|
|
29
|
+
const z = ({
|
|
30
|
+
errorPosition: a = "top",
|
|
31
|
+
size: r = "large",
|
|
32
|
+
showButton: _,
|
|
33
|
+
className: v,
|
|
34
|
+
errorMessage: m,
|
|
35
|
+
placeholder: l,
|
|
36
|
+
validationBehavior: f,
|
|
37
|
+
...e
|
|
38
|
+
}) => {
|
|
39
|
+
const S = I(A), b = j(N), p = f ?? b?.validationBehavior ?? "aria", x = _ !== !1, d = (t) => {
|
|
40
|
+
!t || e.isInvalid || e.validate && G(e.validate(t)) || e.onSubmit?.(t);
|
|
41
|
+
};
|
|
42
|
+
return /* @__PURE__ */ i(
|
|
43
|
+
g,
|
|
44
|
+
{
|
|
45
|
+
...e,
|
|
46
|
+
onSubmit: d,
|
|
47
|
+
"aria-label": e["aria-label"] ?? l,
|
|
48
|
+
className: o(n.container, v),
|
|
49
|
+
validationBehavior: p,
|
|
50
|
+
children: ({ state: t }) => /* @__PURE__ */ s(F, { children: [
|
|
51
|
+
a === "top" && /* @__PURE__ */ i(h, { children: ({ validationErrors: c }) => m ?? c.join(" ") }),
|
|
52
|
+
/* @__PURE__ */ s("div", { className: n.inner, children: [
|
|
53
|
+
/* @__PURE__ */ s(
|
|
54
|
+
"div",
|
|
55
|
+
{
|
|
56
|
+
className: o(n.inputContainer, {
|
|
57
|
+
[n.medium]: r === "medium"
|
|
58
|
+
}),
|
|
59
|
+
children: [
|
|
60
|
+
/* @__PURE__ */ i(
|
|
61
|
+
E,
|
|
62
|
+
{
|
|
63
|
+
size: 20,
|
|
64
|
+
className: n.icon
|
|
65
|
+
}
|
|
66
|
+
),
|
|
67
|
+
/* @__PURE__ */ i(
|
|
68
|
+
y,
|
|
69
|
+
{
|
|
70
|
+
placeholder: l,
|
|
71
|
+
className: o(
|
|
72
|
+
B.input,
|
|
73
|
+
n.input,
|
|
74
|
+
{ [n.medium]: r === "medium" }
|
|
75
|
+
)
|
|
76
|
+
}
|
|
77
|
+
),
|
|
78
|
+
t.value.length > 0 && /* @__PURE__ */ i(
|
|
79
|
+
u,
|
|
80
|
+
{
|
|
81
|
+
variant: "icon",
|
|
82
|
+
size: r,
|
|
83
|
+
className: o(n.clear, {
|
|
84
|
+
[n.medium]: r === "medium"
|
|
85
|
+
}),
|
|
86
|
+
children: /* @__PURE__ */ i(
|
|
87
|
+
k,
|
|
88
|
+
{
|
|
89
|
+
size: 20,
|
|
90
|
+
"aria-hidden": !0
|
|
91
|
+
}
|
|
92
|
+
)
|
|
93
|
+
}
|
|
94
|
+
)
|
|
95
|
+
]
|
|
96
|
+
}
|
|
97
|
+
),
|
|
98
|
+
x && /* @__PURE__ */ i(
|
|
99
|
+
u,
|
|
100
|
+
{
|
|
101
|
+
slot: null,
|
|
102
|
+
excludeFromTabOrder: !0,
|
|
103
|
+
size: r,
|
|
104
|
+
isDisabled: e.isDisabled,
|
|
105
|
+
type: "button",
|
|
106
|
+
onPress: () => d(t.value),
|
|
107
|
+
children: e.buttonText ?? S.format("search")
|
|
108
|
+
}
|
|
109
|
+
)
|
|
110
|
+
] }),
|
|
111
|
+
a === "bottom" && /* @__PURE__ */ i(h, { children: ({ validationErrors: c }) => m ?? c.join(" ") })
|
|
112
|
+
] })
|
|
113
|
+
}
|
|
114
|
+
);
|
|
115
|
+
};
|
|
116
|
+
export {
|
|
117
|
+
z as S
|
|
118
|
+
};
|
|
@@ -1,14 +1,18 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
export type ColorScheme = 'light' | 'dark' | 'light dark';
|
|
2
3
|
export interface ColorSchemeSwitchProps {
|
|
3
|
-
/**
|
|
4
|
-
* @default :root
|
|
4
|
+
/** The CSS selector for the element to apply the color scheme to.
|
|
5
|
+
* @default ':root'
|
|
5
6
|
*/
|
|
6
7
|
selector?: string;
|
|
7
|
-
/**
|
|
8
|
-
*
|
|
9
|
-
* @default new Set(['light dark'])
|
|
8
|
+
/** The default color scheme. Use `'light dark'` to follow the system setting.
|
|
9
|
+
* @default 'light dark'
|
|
10
10
|
*/
|
|
11
|
-
|
|
11
|
+
defaultScheme?: ColorScheme;
|
|
12
|
+
/**
|
|
13
|
+
* @deprecated since v17.9.0 Use `defaultScheme` instead.
|
|
14
|
+
*/
|
|
15
|
+
defaultValue?: Set<ColorScheme>;
|
|
12
16
|
className?: string;
|
|
13
17
|
}
|
|
14
18
|
export declare const ColorSchemeSwitch: React.FC<ColorSchemeSwitchProps>;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { StoryObj } from '@storybook/react-vite';
|
|
2
|
+
import { FileList } from './FileList';
|
|
3
|
+
type Story = StoryObj<typeof FileList>;
|
|
4
|
+
declare const _default: {
|
|
5
|
+
component: ({ className, children, ...props }: import('./FileList').FileListProps) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
subcomponents: {
|
|
7
|
+
FileListItem: ({ fileName, fileSize, onDelete, className, }: import('./FileListItem').FileListItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
};
|
|
9
|
+
title: string;
|
|
10
|
+
tags: string[];
|
|
11
|
+
args: {
|
|
12
|
+
'aria-label': string;
|
|
13
|
+
};
|
|
14
|
+
render: (args: import('./FileList').FileListProps) => import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
};
|
|
16
|
+
export default _default;
|
|
17
|
+
export declare const Default: Story;
|
|
18
|
+
export declare const WithoutFileSize: Story;
|
|
19
|
+
export declare const Empty: Story;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export interface FileListItemProps {
|
|
2
|
+
fileName: string;
|
|
3
|
+
fileSize?: string;
|
|
4
|
+
onDelete?: () => void;
|
|
5
|
+
className?: string;
|
|
6
|
+
}
|
|
7
|
+
export declare const FileListItem: ({ fileName, fileSize, onDelete, className, }: FileListItemProps) => import("react/jsx-runtime").JSX.Element;
|
package/index.d.ts
CHANGED
package/index.js
CHANGED
|
@@ -1,55 +1,56 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { A as s, a as p } from "./chunks/AccordionItem-DHhQDd6o.js";
|
|
3
3
|
import { B as m, a as i } from "./chunks/BadgeContainer-CKVsfTlF.js";
|
|
4
|
-
import { B as
|
|
5
|
-
import { B as
|
|
6
|
-
import { B as
|
|
7
|
-
import { C, R as
|
|
8
|
-
import { C as b, a as S, b as
|
|
9
|
-
import { C as
|
|
4
|
+
import { B as n, a as d } from "./chunks/Breadcrumb-Bs836gOn.js";
|
|
5
|
+
import { B as l } from "./chunks/Button-GCROAMSl.js";
|
|
6
|
+
import { B as g } from "./chunks/ButtonGroup-Dr6HOBo2.js";
|
|
7
|
+
import { C as L, R as C } from "./chunks/RangeCalendar-DL6cCjH3.js";
|
|
8
|
+
import { C as b, a as S, b as I, c as D, d as F, e as R, f as G } from "./chunks/Card-CVwiT9zm.js";
|
|
9
|
+
import { C as k } from "./chunks/CharacterCounter-Dgnv-orm.js";
|
|
10
10
|
import { C as M } from "./chunks/Checkbox-DSW-_Qpm.js";
|
|
11
11
|
import { C as h } from "./chunks/CheckboxGroup-DteJIgnR.js";
|
|
12
|
-
import { C as y } from "./chunks/ColorSchemeSwitch-
|
|
12
|
+
import { C as y } from "./chunks/ColorSchemeSwitch-Bp3PSGkA.js";
|
|
13
13
|
import { C as N } from "./chunks/ComboBox-BEUfJ6IN.js";
|
|
14
14
|
import { D as z } from "./chunks/DateField-Bwis4G2o.js";
|
|
15
15
|
import { D as Q, a as V, b as Z } from "./chunks/DateInputDivider-DwopMIb9.js";
|
|
16
16
|
import { D as q, a as J } from "./chunks/DateRangePicker-5E41DzGI.js";
|
|
17
17
|
import { F as U } from "./chunks/FieldError-krpMBtie.js";
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import { G as
|
|
21
|
-
import {
|
|
22
|
-
import {
|
|
23
|
-
import {
|
|
24
|
-
import {
|
|
25
|
-
import { L as lo } from "./chunks/
|
|
26
|
-
import { L as Co } from "./chunks/
|
|
27
|
-
import { L as
|
|
28
|
-
import {
|
|
29
|
-
import {
|
|
30
|
-
import { P as Po } from "./chunks/
|
|
31
|
-
import {
|
|
32
|
-
import {
|
|
33
|
-
import { S as
|
|
34
|
-
import { S as
|
|
35
|
-
import { S as
|
|
36
|
-
import {
|
|
37
|
-
import {
|
|
38
|
-
import { T as
|
|
39
|
-
import { T as ra } from "./chunks/
|
|
40
|
-
import {
|
|
41
|
-
import {
|
|
42
|
-
import { T as
|
|
43
|
-
import { T as
|
|
44
|
-
import {
|
|
45
|
-
import { L as Da
|
|
46
|
-
import { L as
|
|
47
|
-
import {
|
|
48
|
-
import { c as wa } from "./chunks/
|
|
49
|
-
import {
|
|
50
|
-
import {
|
|
51
|
-
import {
|
|
52
|
-
|
|
18
|
+
import { F as X, a as Y } from "./chunks/FileListItem-CKF9HPjw.js";
|
|
19
|
+
import { D as $, F as oo } from "./chunks/FileUpload-Cu8DCSjX.js";
|
|
20
|
+
import { G as ro } from "./chunks/Grid-CettmpaZ.js";
|
|
21
|
+
import { G as to } from "./chunks/GridItem-z7zclNdT.js";
|
|
22
|
+
import { H as po } from "./chunks/Heading-nfcRc2QF.js";
|
|
23
|
+
import { I as mo } from "./chunks/InfoBanner-CWLvkP6D.js";
|
|
24
|
+
import { L as fo } from "./chunks/Label-Cg0aAlnt.js";
|
|
25
|
+
import { H as To, L as lo, N as co, S as go, a as uo } from "./chunks/Layout-BLP0HVR-.js";
|
|
26
|
+
import { L as Co } from "./chunks/Link-CyY3-8M8.js";
|
|
27
|
+
import { L as bo } from "./chunks/LinkButton-DWKAbxXF.js";
|
|
28
|
+
import { L as Io, a as Do } from "./chunks/Logo-DDykn5b2.js";
|
|
29
|
+
import { M as Ro } from "./chunks/Dialog-BSWBlyJI.js";
|
|
30
|
+
import { P as Po } from "./chunks/Popover-CjEPHe4A.js";
|
|
31
|
+
import { P as vo } from "./chunks/ProgressBar-CBz_dIOH.js";
|
|
32
|
+
import { R as Ao, a as ho } from "./chunks/Radio-CRHdSthr.js";
|
|
33
|
+
import { S as yo } from "./chunks/SearchField-VIMb28RB.js";
|
|
34
|
+
import { S as No } from "./chunks/Select-C01v_D--.js";
|
|
35
|
+
import { S as zo } from "./chunks/Skeleton-tiP1Syzf.js";
|
|
36
|
+
import { S as Qo } from "./chunks/Spinner-CfKMn18u.js";
|
|
37
|
+
import { C as Zo, a as jo, R as qo, T as Jo, b as Ko, c as Uo } from "./chunks/Table-BpVSZ3aM.js";
|
|
38
|
+
import { T as Xo, a as Yo, b as _o, c as $o } from "./chunks/TabList-CJSnr6O0.js";
|
|
39
|
+
import { T as aa, a as ra, b as ea } from "./chunks/TagGroup-DPFh8qHR.js";
|
|
40
|
+
import { T as sa } from "./chunks/Text-D0r_W4lH.js";
|
|
41
|
+
import { I as xa, T as ma, a as ia, b as fa } from "./chunks/TextArea-C7l7_Kof.js";
|
|
42
|
+
import { G as da, T as Ta, a as la, b as ca, t as ga } from "./chunks/Toast-BFq_0Ue4.js";
|
|
43
|
+
import { T as La, a as Ca } from "./chunks/ToggleButtonGroup-DRnEEi5-.js";
|
|
44
|
+
import { T as ba, a as Sa } from "./chunks/Tooltip-BYEaNkZG.js";
|
|
45
|
+
import { L as Da } from "./chunks/ListBox-CRtyHPj1.js";
|
|
46
|
+
import { L as Ra, a as Ga, b as Pa, c as ka, d as va } from "./chunks/ListBoxHeader-DIxY1gOH.js";
|
|
47
|
+
import { L as Aa, a as ha } from "./chunks/ListBoxEmptyState-D6Jvy1WT.js";
|
|
48
|
+
import { M as ya, a as Ea, b as Na, c as wa, S as za } from "./chunks/Separator-CDRwpeHz.js";
|
|
49
|
+
import { c as Qa } from "./chunks/clsx-AexbMWKp.js";
|
|
50
|
+
import { DialogTrigger as Za, MenuTrigger as ja, RouterProvider as qa } from "react-aria-components";
|
|
51
|
+
import { u as Ka } from "./chunks/useLocalizedStringFormatter-BHvsRxDk.js";
|
|
52
|
+
import { useToastState as Wa } from "react-stately";
|
|
53
|
+
const o = "17.10.0", a = {
|
|
53
54
|
version: o
|
|
54
55
|
}, r = a.version;
|
|
55
56
|
export {
|
|
@@ -57,24 +58,24 @@ export {
|
|
|
57
58
|
p as AccordionItem,
|
|
58
59
|
m as Badge,
|
|
59
60
|
i as BadgeContainer,
|
|
60
|
-
|
|
61
|
+
n as Breadcrumb,
|
|
61
62
|
d as Breadcrumbs,
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
63
|
+
l as Button,
|
|
64
|
+
g as ButtonGroup,
|
|
65
|
+
L as Calendar,
|
|
65
66
|
b as Card,
|
|
66
67
|
S as CardActionArea,
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
68
|
+
I as CardActions,
|
|
69
|
+
D as CardContent,
|
|
70
|
+
F as CardImage,
|
|
71
|
+
R as CardLink,
|
|
72
|
+
G as CardTitle,
|
|
73
|
+
Zo as Cell,
|
|
74
|
+
k as CharacterCounter,
|
|
74
75
|
M as Checkbox,
|
|
75
76
|
h as CheckboxGroup,
|
|
76
77
|
y as ColorSchemeSwitch,
|
|
77
|
-
|
|
78
|
+
jo as Column,
|
|
78
79
|
N as ComboBox,
|
|
79
80
|
z as DateField,
|
|
80
81
|
Q as DateInput,
|
|
@@ -82,76 +83,78 @@ export {
|
|
|
82
83
|
q as DatePicker,
|
|
83
84
|
J as DateRangePicker,
|
|
84
85
|
Z as DateSegment,
|
|
85
|
-
|
|
86
|
-
|
|
86
|
+
Za as DialogTrigger,
|
|
87
|
+
$ as DropZone,
|
|
87
88
|
U as FieldError,
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
Ga as
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
Ro as
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
$o as
|
|
140
|
-
|
|
141
|
-
ra as
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
fa as
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
89
|
+
X as FileList,
|
|
90
|
+
Y as FileListItem,
|
|
91
|
+
oo as FileTrigger,
|
|
92
|
+
da as GlobalToastRegion,
|
|
93
|
+
ro as Grid,
|
|
94
|
+
to as GridItem,
|
|
95
|
+
To as Header,
|
|
96
|
+
po as Heading,
|
|
97
|
+
mo as InfoBanner,
|
|
98
|
+
xa as Input,
|
|
99
|
+
fo as Label,
|
|
100
|
+
lo as Layout,
|
|
101
|
+
Co as Link,
|
|
102
|
+
bo as LinkButton,
|
|
103
|
+
Da as ListBox,
|
|
104
|
+
Ra as ListBoxButton,
|
|
105
|
+
Aa as ListBoxEmptyState,
|
|
106
|
+
Ga as ListBoxHeader,
|
|
107
|
+
Pa as ListBoxItem,
|
|
108
|
+
ka as ListBoxLoadMoreItem,
|
|
109
|
+
ha as ListBoxPopover,
|
|
110
|
+
va as ListBoxSection,
|
|
111
|
+
Io as Logo,
|
|
112
|
+
Do as LogoContext,
|
|
113
|
+
ya as Menu,
|
|
114
|
+
Ea as MenuItem,
|
|
115
|
+
Na as MenuPopover,
|
|
116
|
+
wa as MenuSection,
|
|
117
|
+
ja as MenuTrigger,
|
|
118
|
+
Ro as Modal,
|
|
119
|
+
co as Navbar,
|
|
120
|
+
Po as Popover,
|
|
121
|
+
vo as ProgressBar,
|
|
122
|
+
Ao as Radio,
|
|
123
|
+
ho as RadioGroup,
|
|
124
|
+
C as RangeCalendar,
|
|
125
|
+
qa as RouterProvider,
|
|
126
|
+
qo as Row,
|
|
127
|
+
yo as SearchField,
|
|
128
|
+
No as Select,
|
|
129
|
+
za as Separator,
|
|
130
|
+
go as Sidebar,
|
|
131
|
+
uo as SidebarLink,
|
|
132
|
+
zo as Skeleton,
|
|
133
|
+
Qo as Spinner,
|
|
134
|
+
Xo as Tab,
|
|
135
|
+
Yo as TabList,
|
|
136
|
+
_o as TabPanel,
|
|
137
|
+
Jo as Table,
|
|
138
|
+
Ko as TableBody,
|
|
139
|
+
Uo as TableHeader,
|
|
140
|
+
$o as Tabs,
|
|
141
|
+
aa as Tag,
|
|
142
|
+
ra as TagGroup,
|
|
143
|
+
ea as TagList,
|
|
144
|
+
sa as Text,
|
|
145
|
+
ma as TextArea,
|
|
146
|
+
ia as TextField,
|
|
147
|
+
fa as TextFieldBase,
|
|
148
|
+
Ta as Toast,
|
|
149
|
+
la as ToastProvider,
|
|
150
|
+
ca as ToastRegion,
|
|
151
|
+
La as ToggleButton,
|
|
152
|
+
Ca as ToggleButtonGroup,
|
|
153
|
+
ba as Tooltip,
|
|
154
|
+
Sa as TooltipTrigger,
|
|
152
155
|
r as VERSION,
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
156
|
+
Qa as clsx,
|
|
157
|
+
ga as toastQueue,
|
|
158
|
+
Ka as useLocalizedStringFormatter,
|
|
159
|
+
Wa as useToastState
|
|
157
160
|
};
|
package/package.json
CHANGED
|
@@ -1,13 +1,31 @@
|
|
|
1
1
|
import { SearchFieldProps as AriaSearchFieldProps } from 'react-aria-components';
|
|
2
2
|
import { Size } from '../common/types';
|
|
3
3
|
import * as React from 'react';
|
|
4
|
-
export interface SearchFieldProps extends AriaSearchFieldProps {
|
|
4
|
+
export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'children'> {
|
|
5
5
|
/** Placeholder text */
|
|
6
6
|
placeholder: string;
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
8
|
+
* Whether to render a built-in submit button.
|
|
9
|
+
*
|
|
10
|
+
* **Future flag:** pass `showButton={false}` to opt into the v18 default today.
|
|
11
|
+
* In v18 the button will no longer be shown by default β compose your own `Button`
|
|
12
|
+
* outside `SearchField` instead. This prop will be removed in v18.
|
|
13
|
+
*
|
|
14
|
+
* @see https://github.com/migrationsverket/midas/issues/1109
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* // Opt into v18 behavior now:
|
|
18
|
+
* <SearchField placeholder="SΓΆk" onSubmit={handleSubmit} />
|
|
19
|
+
* <Button onPress={() => handleSubmit(value)}>SΓΆk</Button>
|
|
20
|
+
*
|
|
21
|
+
* @default true
|
|
22
|
+
*/
|
|
23
|
+
showButton?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Text displayed on the built-in submit button.
|
|
26
|
+
*
|
|
27
|
+
* @deprecated since v17.9.0 β use your own `Button` instead. See `showButton`.
|
|
28
|
+
* @default 'SΓΆk'
|
|
11
29
|
*/
|
|
12
30
|
buttonText?: string;
|
|
13
31
|
/**
|
|
@@ -9,14 +9,23 @@ declare const _default: {
|
|
|
9
9
|
layout: string;
|
|
10
10
|
};
|
|
11
11
|
args: {
|
|
12
|
-
buttonText: string;
|
|
13
12
|
errorPosition: "top";
|
|
14
13
|
className: string;
|
|
15
14
|
size: "large";
|
|
16
15
|
};
|
|
17
16
|
};
|
|
18
17
|
export default _default;
|
|
18
|
+
/**
|
|
19
|
+
* Default behavior in v17 β the built-in submit button is shown.
|
|
20
|
+
* The button is not in the tab order; use Enter to submit or click the button.
|
|
21
|
+
*/
|
|
19
22
|
export declare const Primary: Story;
|
|
20
23
|
export declare const CustomValidation: Story;
|
|
21
24
|
export declare const Invalid: Story;
|
|
22
25
|
export declare const Disabled: Story;
|
|
26
|
+
/**
|
|
27
|
+
* Future default in v18 β opt in today with `showButton={false}`.
|
|
28
|
+
* Compose your own `Button` outside `SearchField` for explicit submit.
|
|
29
|
+
* Enter still works for keyboard submission.
|
|
30
|
+
*/
|
|
31
|
+
export declare const WithoutButton: Story;
|
package/search-field/index.js
CHANGED
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsxs as o, jsx as e } from "react/jsx-runtime";
|
|
3
|
-
import * as m from "react";
|
|
4
|
-
import { VisuallyHidden as c } from "react-aria";
|
|
5
|
-
import { a as g, T as r } from "./ToggleButtonGroup-DRnEEi5-.js";
|
|
6
|
-
import { c as l } from "./createLucideIcon-CP-mMPfa.js";
|
|
7
|
-
import { u } from "./useLocalizedStringFormatter-BHvsRxDk.js";
|
|
8
|
-
import '../assets/ColorSchemeSwitch.css';const k = [
|
|
9
|
-
[
|
|
10
|
-
"path",
|
|
11
|
-
{
|
|
12
|
-
d: "M18 5a2 2 0 0 1 2 2v8.526a2 2 0 0 0 .212.897l1.068 2.127a1 1 0 0 1-.9 1.45H3.62a1 1 0 0 1-.9-1.45l1.068-2.127A2 2 0 0 0 4 15.526V7a2 2 0 0 1 2-2z",
|
|
13
|
-
key: "1pdavp"
|
|
14
|
-
}
|
|
15
|
-
],
|
|
16
|
-
["path", { d: "M20.054 15.987H3.946", key: "14rxg9" }]
|
|
17
|
-
], f = l("laptop", k);
|
|
18
|
-
const M = [
|
|
19
|
-
[
|
|
20
|
-
"path",
|
|
21
|
-
{
|
|
22
|
-
d: "M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401",
|
|
23
|
-
key: "kfwtm"
|
|
24
|
-
}
|
|
25
|
-
]
|
|
26
|
-
], S = l("moon", M);
|
|
27
|
-
const _ = [
|
|
28
|
-
["circle", { cx: "12", cy: "12", r: "4", key: "4exip2" }],
|
|
29
|
-
["path", { d: "M12 2v2", key: "tus03m" }],
|
|
30
|
-
["path", { d: "M12 20v2", key: "1lh1kg" }],
|
|
31
|
-
["path", { d: "m4.93 4.93 1.41 1.41", key: "149t6j" }],
|
|
32
|
-
["path", { d: "m17.66 17.66 1.41 1.41", key: "ptbguv" }],
|
|
33
|
-
["path", { d: "M2 12h2", key: "1t8f8n" }],
|
|
34
|
-
["path", { d: "M20 12h2", key: "1q8mjw" }],
|
|
35
|
-
["path", { d: "m6.34 17.66-1.41 1.41", key: "1m8zz5" }],
|
|
36
|
-
["path", { d: "m19.07 4.93-1.41 1.41", key: "1shlcs" }]
|
|
37
|
-
], b = l("sun", _), v = "_button_1dy1i_1", d = {
|
|
38
|
-
button: v
|
|
39
|
-
}, N = { darkMode: "Dark Mode", lightMode: "Light Mode", system: "System Setting" }, j = { darkMode: "MΓΆrkt lΓ€ge", lightMode: "Ljust lΓ€ge", system: "SysteminstΓ€llning" }, w = {
|
|
40
|
-
en: N,
|
|
41
|
-
sv: j
|
|
42
|
-
}, H = ({
|
|
43
|
-
selector: s = ":root",
|
|
44
|
-
defaultValue: h = /* @__PURE__ */ new Set(["light dark"]),
|
|
45
|
-
className: p
|
|
46
|
-
}) => {
|
|
47
|
-
const [n, y] = m.useState(h);
|
|
48
|
-
m.useEffect(() => {
|
|
49
|
-
const t = document.querySelector(s);
|
|
50
|
-
if (t) {
|
|
51
|
-
const i = Array.from(n).join(" ");
|
|
52
|
-
t.style.removeProperty("color-scheme"), i === "light dark" ? delete t.dataset.colorScheme : t.dataset.colorScheme = i;
|
|
53
|
-
} else
|
|
54
|
-
console.warn(`No element found for selector: "${s}"`);
|
|
55
|
-
}, [n, s]);
|
|
56
|
-
const a = u(w);
|
|
57
|
-
return /* @__PURE__ */ o(
|
|
58
|
-
g,
|
|
59
|
-
{
|
|
60
|
-
selectionMode: "single",
|
|
61
|
-
selectedKeys: n,
|
|
62
|
-
onSelectionChange: y,
|
|
63
|
-
disallowEmptySelection: !0,
|
|
64
|
-
className: p,
|
|
65
|
-
children: [
|
|
66
|
-
/* @__PURE__ */ o(
|
|
67
|
-
r,
|
|
68
|
-
{
|
|
69
|
-
id: "light dark",
|
|
70
|
-
className: d.button,
|
|
71
|
-
children: [
|
|
72
|
-
/* @__PURE__ */ e(f, {}),
|
|
73
|
-
/* @__PURE__ */ e(c, { children: a.format("system") })
|
|
74
|
-
]
|
|
75
|
-
}
|
|
76
|
-
),
|
|
77
|
-
/* @__PURE__ */ o(
|
|
78
|
-
r,
|
|
79
|
-
{
|
|
80
|
-
id: "light",
|
|
81
|
-
className: d.button,
|
|
82
|
-
children: [
|
|
83
|
-
/* @__PURE__ */ e(b, {}),
|
|
84
|
-
/* @__PURE__ */ e(c, { children: a.format("lightMode") })
|
|
85
|
-
]
|
|
86
|
-
}
|
|
87
|
-
),
|
|
88
|
-
/* @__PURE__ */ o(
|
|
89
|
-
r,
|
|
90
|
-
{
|
|
91
|
-
id: "dark",
|
|
92
|
-
className: d.button,
|
|
93
|
-
children: [
|
|
94
|
-
/* @__PURE__ */ e(S, {}),
|
|
95
|
-
/* @__PURE__ */ e(c, { children: a.format("darkMode") })
|
|
96
|
-
]
|
|
97
|
-
}
|
|
98
|
-
)
|
|
99
|
-
]
|
|
100
|
-
}
|
|
101
|
-
);
|
|
102
|
-
};
|
|
103
|
-
export {
|
|
104
|
-
H as C
|
|
105
|
-
};
|
|
@@ -1,128 +0,0 @@
|
|
|
1
|
-
'use client';
|
|
2
|
-
import { jsxs as u, jsx as a } from "react/jsx-runtime";
|
|
3
|
-
import { s as y } from "./TextField.module-BDIbEV87.js";
|
|
4
|
-
import { B as C } from "./Button-GCROAMSl.js";
|
|
5
|
-
import { C as F } from "./ClearButton-DkC8PIMi.js";
|
|
6
|
-
import { c as l } from "./clsx-AexbMWKp.js";
|
|
7
|
-
import * as N from "react";
|
|
8
|
-
import { useSearchFieldState as x } from "react-stately";
|
|
9
|
-
import { useSearchField as j } from "react-aria";
|
|
10
|
-
import { F as f } from "./FieldError-krpMBtie.js";
|
|
11
|
-
import { c as p } from "./createLucideIcon-CP-mMPfa.js";
|
|
12
|
-
import { u as B } from "./useLocalizedStringFormatter-BHvsRxDk.js";
|
|
13
|
-
import '../assets/SearchField.css';const D = [
|
|
14
|
-
["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
|
|
15
|
-
["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
|
|
16
|
-
], E = p("search", D), k = "_container_19q7q_1", P = "_inner_19q7q_10", T = "_inputContainer_19q7q_15", w = "_medium_19q7q_21", I = "_icon_19q7q_26", K = "_clear_19q7q_39", L = "_input_19q7q_15", n = {
|
|
17
|
-
container: k,
|
|
18
|
-
inner: P,
|
|
19
|
-
inputContainer: T,
|
|
20
|
-
medium: w,
|
|
21
|
-
icon: I,
|
|
22
|
-
clear: K,
|
|
23
|
-
input: L
|
|
24
|
-
}, M = { search: "Search" }, R = { search: "SΓΆk" }, V = {
|
|
25
|
-
en: M,
|
|
26
|
-
sv: R
|
|
27
|
-
};
|
|
28
|
-
function O(r) {
|
|
29
|
-
return !!r?.length;
|
|
30
|
-
}
|
|
31
|
-
const Z = ({
|
|
32
|
-
errorPosition: r = "top",
|
|
33
|
-
size: i = "large",
|
|
34
|
-
...e
|
|
35
|
-
}) => {
|
|
36
|
-
const { value: t, setValue: m } = x(e), b = B(V), d = N.useRef(null), { inputProps: o, isInvalid: c, validationErrors: h, clearButtonProps: q } = j(
|
|
37
|
-
{
|
|
38
|
-
...e,
|
|
39
|
-
label: e.placeholder,
|
|
40
|
-
validationBehavior: "native"
|
|
41
|
-
},
|
|
42
|
-
{ value: t, setValue: m },
|
|
43
|
-
d
|
|
44
|
-
), v = ({ target: s }) => m(s.value), S = () => m(""), _ = () => {
|
|
45
|
-
if (e.validate && O(e.validate(t)) || c || !t) {
|
|
46
|
-
d.current?.focus();
|
|
47
|
-
return;
|
|
48
|
-
}
|
|
49
|
-
e.onSubmit && e.onSubmit(t);
|
|
50
|
-
}, g = ({ key: s }) => {
|
|
51
|
-
s === "Enter" && _();
|
|
52
|
-
};
|
|
53
|
-
return /* @__PURE__ */ u(
|
|
54
|
-
"div",
|
|
55
|
-
{
|
|
56
|
-
className: l(n.container, e.className),
|
|
57
|
-
"data-disabled": o.disabled,
|
|
58
|
-
children: [
|
|
59
|
-
r === "top" && /* @__PURE__ */ a(f, { isInvalid: c, children: e.errorMessage ?? h.join(" ") }),
|
|
60
|
-
/* @__PURE__ */ u("div", { className: n.inner, children: [
|
|
61
|
-
/* @__PURE__ */ u(
|
|
62
|
-
"div",
|
|
63
|
-
{
|
|
64
|
-
className: l(n.inputContainer, {
|
|
65
|
-
[n.medium]: i === "medium"
|
|
66
|
-
}),
|
|
67
|
-
children: [
|
|
68
|
-
/* @__PURE__ */ a(
|
|
69
|
-
E,
|
|
70
|
-
{
|
|
71
|
-
size: 20,
|
|
72
|
-
className: n.icon
|
|
73
|
-
}
|
|
74
|
-
),
|
|
75
|
-
/* @__PURE__ */ a(
|
|
76
|
-
"input",
|
|
77
|
-
{
|
|
78
|
-
...o,
|
|
79
|
-
...o.disabled && { "data-disabled": !0 },
|
|
80
|
-
className: l(
|
|
81
|
-
y.input,
|
|
82
|
-
n.input,
|
|
83
|
-
o.className,
|
|
84
|
-
{ [n.medium]: i === "medium" }
|
|
85
|
-
),
|
|
86
|
-
ref: d,
|
|
87
|
-
onChange: v,
|
|
88
|
-
value: t,
|
|
89
|
-
"aria-invalid": c,
|
|
90
|
-
onKeyDown: g,
|
|
91
|
-
"aria-label": e.placeholder,
|
|
92
|
-
"aria-labelledby": ""
|
|
93
|
-
}
|
|
94
|
-
),
|
|
95
|
-
t.length > 0 && /* @__PURE__ */ a(
|
|
96
|
-
F,
|
|
97
|
-
{
|
|
98
|
-
...q,
|
|
99
|
-
onPress: S,
|
|
100
|
-
size: i,
|
|
101
|
-
className: l(n.clear, {
|
|
102
|
-
[n.medium]: i === "medium"
|
|
103
|
-
})
|
|
104
|
-
}
|
|
105
|
-
)
|
|
106
|
-
]
|
|
107
|
-
}
|
|
108
|
-
),
|
|
109
|
-
/* @__PURE__ */ a(
|
|
110
|
-
C,
|
|
111
|
-
{
|
|
112
|
-
size: i,
|
|
113
|
-
isDisabled: e.isDisabled,
|
|
114
|
-
excludeFromTabOrder: !0,
|
|
115
|
-
onPress: _,
|
|
116
|
-
type: "button",
|
|
117
|
-
children: e.buttonText ? e.buttonText : b.format("search")
|
|
118
|
-
}
|
|
119
|
-
)
|
|
120
|
-
] }),
|
|
121
|
-
r === "bottom" && /* @__PURE__ */ a(f, { isInvalid: c, children: e.errorMessage ?? h.join(" ") })
|
|
122
|
-
]
|
|
123
|
-
}
|
|
124
|
-
);
|
|
125
|
-
};
|
|
126
|
-
export {
|
|
127
|
-
Z as S
|
|
128
|
-
};
|