@midas-ds/components 16.6.1 → 16.6.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 +6 -0
- package/assets/Select.css +1 -1
- package/chunks/{Select-CynlKjMH.js → Select-Cz3Y8abd.js} +75 -74
- package/index.js +1 -1
- package/package.json +1 -1
- package/select/index.js +1 -1
package/CHANGELOG.md
CHANGED
package/assets/Select.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._select_11rjo_1{display:flex;flex-direction:column;align-self:stretch}._triggerContainer_11rjo_7{display:flex;flex-direction:column;position:relative}._trigger_11rjo_7{align-items:center;background-color:var(--midas-field-01-base);border:none;border-bottom:1px solid var(--midas-border-color-primary);border-radius:0;color:var(--midas-text-primary);display:flex;font-size:var(--midas-typography-font-size-30);gap:var(--midas-spacing-20);justify-content:space-between;min-height:var(--midas-size-150);padding-left:var(--midas-size-80);padding-right:var(--midas-size-80);transition:all .1s ease-in}._trigger_11rjo_7._medium_11rjo_29{min-height:var(--midas-size-130)}._trigger_11rjo_7:focus-visible{outline:none;box-shadow:var(--midas-state-focus);transition:all .1s ease-out}@media(forced-colors:active){._trigger_11rjo_7:focus-visible{outline:3px solid highlight;outline-offset:2px}}._trigger_11rjo_7:hover{background-color:var(--midas-field-01-hover);cursor:pointer}._trigger_11rjo_7[data-disabled]{cursor:not-allowed;background:var(--midas-field-disabled);color:var(--midas-text-disabled);border-color:var(--midas-border-color-disabled)}._trigger_11rjo_7[data-invalid]:not(:focus-visible){border:none;box-shadow:var(--midas-state-invalid)}@media(forced-colors:active){._trigger_11rjo_7[data-invalid]:not(:focus-visible){border:5px solid Highlight!important}}._trigger_11rjo_7[aria-expanded=true] ._icon_11rjo_66{transform:rotate(180deg)}._selectValue_11rjo_72{color:var(--midas-text-primary);font-family:var(--midas-typography-font-family);line-height:var(--midas-typography-line-height-30);max-width:calc(100% - var(--midas-spacing-90))}._selectValue_11rjo_72 ._placeholder_11rjo_78{display:flex}._selectValue_11rjo_72[data-disabled]{color:var(--midas-text-disabled);cursor:not-allowed}._multiSelectValue_11rjo_88{pointer-events:none;color:var(--midas-text-primary);font-family:var(--midas-typography-font-family);line-height:var(--midas-typography-line-height-30);position:absolute;top:50%;transform:translateY(-50%);max-width:calc(100% - var(--midas-spacing-90))}._multiSelectValue_11rjo_88 ._placeholder_11rjo_78{align-items:center;display:flex;justify-content:center;left:var(--midas-spacing-50);position:relative}._multiSelectValue_11rjo_88[data-disabled]{color:var(--midas-text-disabled);cursor:not-allowed}._selectValueTag_11rjo_112{align-items:center;background-color:var(--midas-button-background-primary-base);border-radius:1.25rem;color:var(--midas-text-on-color);display:flex;font-size:.875rem;justify-content:center;left:var(--midas-spacing-30);min-height:1.75rem;padding:0 .5rem;pointer-events:all;position:relative}._selectValueTag_11rjo_112:has(._clearButton_11rjo_126){padding-right:0}._selectValueTag_11rjo_112[data-disabled]{background-color:var(--midas-field-disabled);border:1px solid var(--midas-border-color-disabled);color:var(--midas-text-disabled);pointer-events:none}._truncate_11rjo_138{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}._clearButton_11rjo_126{background-color:var(--midas-button-background-primary-base);border:none;border-radius:100%;color:var(--midas-text-on-color);display:flex;margin-left:var(--midas-size-10);padding:var(--midas-size-30)}._clearButton_11rjo_126:hover{background-color:var(--midas-button-background-primary-hover);cursor:pointer}._clearButton_11rjo_126[data-disabled]{background-color:var(--midas-button-background-disabled);color:var(--midas-text-disabled);pointer-events:none}._clearButton_11rjo_126:focus-visible{box-shadow:var(--midas-state-focus);outline:none}@media(forced-colors:active){._clearButton_11rjo_126:focus-visible{outline:3px solid highlight;outline-offset:2px}}._popover_11rjo_175{font-size:var(--midas-typography-font-size-30);padding:0}._popover_11rjo_175 :focus{outline:none}._popover_11rjo_175[data-trigger=Select]{min-width:var(--trigger-width);transition:transform .2s ease-in-out,opacity .2s ease-in-out;opacity:1}._popover_11rjo_175[data-trigger=Select][data-entering],._popover_11rjo_175[data-trigger=Select][data-exiting]{opacity:0}._popover_11rjo_175 ._selectAll_11rjo_201{width:100%;box-sizing:border-box;background-color:var(--midas-layer-01-base);color:var(--midas-text-primary);display:flex;font-family:var(--midas-typography-font-family);line-height:1;margin-bottom:2px!important;padding:var(--midas-size-80);transition:background-color 60ms}._popover_11rjo_175 ._selectAll_11rjo_201:hover:not([data-disabled]){background-color:var(--midas-layer-01-hover);cursor:pointer;transition-delay:60ms}._popover_11rjo_175 ._selectAll_11rjo_201:hover:not([data-disabled]) div{border-color:var(--midas-text-primary)}._popover_11rjo_175 ._selectAll_11rjo_201[data-disabled]{color:var(--midas-text-disabled);cursor:not-allowed}._popover_11rjo_175 ._selectAll_11rjo_201[data-selected]{background-color:var(--midas-layer-01-selected-hover)}._popover_11rjo_175 ._selectAll_11rjo_201[data-selected]:hover:not([data-disabled]){background-color:var(--midas-layer-01-selected-hover);transition-delay:60ms}._popover_11rjo_175 ._selectAll_11rjo_201[data-selected]:hover:not([data-disabled]) div{border-color:transparent}._popover_11rjo_175 ._selectAll_11rjo_201[data-focused]{outline:none;box-shadow:none}@media(forced-colors:active){._popover_11rjo_175 ._selectAll_11rjo_201[data-focused]{outline:var(--midas-state-focus-contrast-mode-outline) solid highlight!important;outline-offset:calc(var(--midas-state-focus-contrast-mode-outline) * -1)}}._popover_11rjo_175 ._selectAll_11rjo_201[data-focus-visible]{box-shadow:var(--midas-state-focus-inset);outline:none}._popover_11rjo_175 ._selectAll_11rjo_201[data-hovered] div{border-color:var(--midas-button-background-primary-hover)}._icon_11rjo_66{display:flex;transition:transform var(--midas-transition-duration-normal) ease}._tagGroup_11rjo_269{margin-top:var(--midas-size-40)}@media(prefers-reduced-motion){._trigger_11rjo_7,._popover_11rjo_175[data-trigger=Select],._selectAll_11rjo_201,._icon_11rjo_66{transition:none}}
|
|
@@ -1,38 +1,39 @@
|
|
|
1
1
|
import { jsx as e, jsxs as i, Fragment as V } from "react/jsx-runtime";
|
|
2
|
-
import { SelectStateContext as
|
|
3
|
-
import { FocusScope as
|
|
4
|
-
import { a as
|
|
5
|
-
import { a as b, c as
|
|
6
|
-
import { T } from "./Text-Bxww8mmL.js";
|
|
2
|
+
import { SelectStateContext as d, SelectValue as _, Button as h, TagList as j, Select as A } from "react-aria-components";
|
|
3
|
+
import { FocusScope as C } from "@react-aria/focus";
|
|
4
|
+
import { a as N, L as x } from "./Label-xWKvOuML.js";
|
|
5
|
+
import { a as b, c as T } from "./clsx-AexbMWKp.js";
|
|
6
|
+
import { T as y } from "./Text-Bxww8mmL.js";
|
|
7
7
|
import { F as g } from "./FieldError-C_3uLAGY.js";
|
|
8
8
|
import p, { useContext as f } from "react";
|
|
9
9
|
import { C as B } from "./Checkbox-BTAfwDxU.js";
|
|
10
|
-
import { u as
|
|
10
|
+
import { u as m } from "./useLocalizedStringFormatter-BHvsRxDk.js";
|
|
11
11
|
import { useFocusManager as M } from "react-aria";
|
|
12
12
|
import { X as F } from "./x-BXShoIAM.js";
|
|
13
13
|
import { L } from "./ListBox-D5BBeZWL.js";
|
|
14
14
|
import { P as I } from "./Popover-BcEtFiU1.js";
|
|
15
|
-
import { a as G, T as
|
|
16
|
-
import { C as
|
|
17
|
-
import '../assets/Select.css';const
|
|
18
|
-
en:
|
|
19
|
-
sv:
|
|
20
|
-
},
|
|
21
|
-
select:
|
|
22
|
-
triggerContainer:
|
|
15
|
+
import { a as G, T as k } from "./Tag-CZrQBEgv.js";
|
|
16
|
+
import { C as R } from "./chevron-down-DgT-uSF9.js";
|
|
17
|
+
import '../assets/Select.css';const $ = { clearAll: "Clear all", selectAll: "Select all", selectedItems: "Selected items", selected: "selected" }, w = { clearAll: "Rensa alla", selectAll: "Välj alla", selectedItems: "Valda objekt", selected: "valda" }, u = {
|
|
18
|
+
en: $,
|
|
19
|
+
sv: w
|
|
20
|
+
}, P = "_select_11rjo_1", z = "_triggerContainer_11rjo_7", E = "_trigger_11rjo_7", K = "_medium_11rjo_29", D = "_icon_11rjo_66", W = "_selectValue_11rjo_72", X = "_placeholder_11rjo_78", q = "_multiSelectValue_11rjo_88", H = "_selectValueTag_11rjo_112", J = "_clearButton_11rjo_126", O = "_truncate_11rjo_138", Q = "_popover_11rjo_175", U = "_selectAll_11rjo_201", Y = "_tagGroup_11rjo_269", a = {
|
|
21
|
+
select: P,
|
|
22
|
+
triggerContainer: z,
|
|
23
23
|
trigger: E,
|
|
24
24
|
medium: K,
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
25
|
+
icon: D,
|
|
26
|
+
selectValue: W,
|
|
27
|
+
placeholder: X,
|
|
28
|
+
multiSelectValue: q,
|
|
29
|
+
selectValueTag: H,
|
|
30
|
+
clearButton: J,
|
|
31
|
+
truncate: O,
|
|
32
|
+
popover: Q,
|
|
33
|
+
selectAll: U,
|
|
34
|
+
tagGroup: Y
|
|
35
|
+
}, Z = () => {
|
|
36
|
+
const t = p.useContext(d), r = m(u), o = () => t?.setValue(
|
|
36
37
|
t?.selectionManager.isSelectAll ? null : Array.from(t.collection.getKeys())
|
|
37
38
|
);
|
|
38
39
|
return /* @__PURE__ */ e(
|
|
@@ -41,44 +42,44 @@ import '../assets/Select.css';const R = { clearAll: "Clear all", selectAll: "Sel
|
|
|
41
42
|
className: a.selectAll,
|
|
42
43
|
isIndeterminate: !t?.selectionManager.isSelectAll && !t?.selectionManager.isEmpty,
|
|
43
44
|
isSelected: t?.selectionManager.isSelectAll,
|
|
44
|
-
onChange:
|
|
45
|
-
children:
|
|
45
|
+
onChange: o,
|
|
46
|
+
children: r.format("selectAll")
|
|
46
47
|
}
|
|
47
48
|
);
|
|
48
|
-
},
|
|
49
|
+
}, ee = ({
|
|
49
50
|
isDisabled: t
|
|
50
51
|
}) => {
|
|
51
|
-
const
|
|
52
|
+
const r = m(u), o = (l, c) => l.length === 1 ? c : `${l.length} ${r.format("selected")}`;
|
|
52
53
|
return /* @__PURE__ */ e(
|
|
53
|
-
|
|
54
|
+
_,
|
|
54
55
|
{
|
|
55
56
|
className: a.multiSelectValue,
|
|
56
57
|
"data-disabled": t || void 0,
|
|
57
|
-
children: ({ isPlaceholder: l, selectedItems:
|
|
58
|
+
children: ({ isPlaceholder: l, selectedItems: c, selectedText: s }) => l ? /* @__PURE__ */ e(V, {}) : /* @__PURE__ */ i(
|
|
58
59
|
"div",
|
|
59
60
|
{
|
|
60
61
|
className: a.selectValueTag,
|
|
61
62
|
"data-disabled": t || void 0,
|
|
62
63
|
children: [
|
|
63
|
-
/* @__PURE__ */ e("span", { className: a.truncate, children:
|
|
64
|
-
/* @__PURE__ */ e(
|
|
64
|
+
/* @__PURE__ */ e("span", { className: a.truncate, children: o(c, s) }),
|
|
65
|
+
/* @__PURE__ */ e(te, { isDisabled: t })
|
|
65
66
|
]
|
|
66
67
|
}
|
|
67
68
|
)
|
|
68
69
|
}
|
|
69
70
|
);
|
|
70
|
-
},
|
|
71
|
+
}, te = ({
|
|
71
72
|
isDisabled: t
|
|
72
73
|
}) => {
|
|
73
|
-
const
|
|
74
|
-
l?.focusFirst(),
|
|
74
|
+
const r = p.useContext(d), o = m(u), l = M(), c = () => {
|
|
75
|
+
l?.focusFirst(), r?.setValue(null);
|
|
75
76
|
};
|
|
76
77
|
return /* @__PURE__ */ e(
|
|
77
|
-
|
|
78
|
+
h,
|
|
78
79
|
{
|
|
79
|
-
"aria-label":
|
|
80
|
+
"aria-label": o.format("clearAll"),
|
|
80
81
|
className: a.clearButton,
|
|
81
|
-
onPress:
|
|
82
|
+
onPress: c,
|
|
82
83
|
slot: null,
|
|
83
84
|
isDisabled: t,
|
|
84
85
|
children: /* @__PURE__ */ e(
|
|
@@ -90,26 +91,26 @@ import '../assets/Select.css';const R = { clearAll: "Clear all", selectAll: "Sel
|
|
|
90
91
|
)
|
|
91
92
|
}
|
|
92
93
|
);
|
|
93
|
-
},
|
|
94
|
+
}, le = ({
|
|
94
95
|
showTags: t,
|
|
95
|
-
isDisabled:
|
|
96
|
+
isDisabled: r
|
|
96
97
|
}) => {
|
|
97
|
-
const
|
|
98
|
+
const o = m(u), l = f(d), c = (s) => {
|
|
98
99
|
l?.selectionManager.toggleSelection(Array.from(s)[0]);
|
|
99
100
|
};
|
|
100
101
|
return !l?.selectedItems.length || !t ? null : /* @__PURE__ */ e(
|
|
101
102
|
G,
|
|
102
103
|
{
|
|
103
|
-
"aria-label":
|
|
104
|
+
"aria-label": o.format("selectedItems"),
|
|
104
105
|
className: a.tagGroup,
|
|
105
|
-
onRemove:
|
|
106
|
+
onRemove: c,
|
|
106
107
|
selectionBehavior: "toggle",
|
|
107
|
-
children: /* @__PURE__ */ e(
|
|
108
|
-
|
|
108
|
+
children: /* @__PURE__ */ e(j, { items: l.selectedItems, children: (s) => /* @__PURE__ */ e(
|
|
109
|
+
k,
|
|
109
110
|
{
|
|
110
111
|
dismissable: !0,
|
|
111
112
|
id: s.key,
|
|
112
|
-
isDisabled:
|
|
113
|
+
isDisabled: r,
|
|
113
114
|
textValue: s.textValue,
|
|
114
115
|
children: s.textValue
|
|
115
116
|
},
|
|
@@ -117,63 +118,63 @@ import '../assets/Select.css';const R = { clearAll: "Clear all", selectAll: "Sel
|
|
|
117
118
|
) })
|
|
118
119
|
}
|
|
119
120
|
);
|
|
120
|
-
},
|
|
121
|
+
}, ae = ({
|
|
121
122
|
isDisabled: t,
|
|
122
|
-
selectionMode:
|
|
123
|
-
size:
|
|
123
|
+
selectionMode: r,
|
|
124
|
+
size: o
|
|
124
125
|
}) => {
|
|
125
|
-
const l = f(
|
|
126
|
+
const l = f(d);
|
|
126
127
|
return /* @__PURE__ */ i(
|
|
127
|
-
|
|
128
|
+
h,
|
|
128
129
|
{
|
|
129
130
|
className: b(
|
|
130
131
|
{
|
|
131
|
-
[a.medium]:
|
|
132
|
+
[a.medium]: o === "medium"
|
|
132
133
|
},
|
|
133
134
|
a.trigger
|
|
134
135
|
),
|
|
135
136
|
"data-invalid": !!l?.displayValidation.isInvalid || void 0,
|
|
136
137
|
children: [
|
|
137
138
|
/* @__PURE__ */ e(
|
|
138
|
-
|
|
139
|
+
_,
|
|
139
140
|
{
|
|
140
141
|
className: a.selectValue,
|
|
141
142
|
"data-disabled": t || void 0,
|
|
142
|
-
children: ({ selectedText:
|
|
143
|
+
children: ({ selectedText: c, defaultChildren: s }) => /* @__PURE__ */ e("div", { className: a.placeholder, children: /* @__PURE__ */ e("span", { className: a.truncate, children: r === "multiple" && c ? null : c || s }) })
|
|
143
144
|
}
|
|
144
145
|
),
|
|
145
146
|
/* @__PURE__ */ e(
|
|
146
147
|
"span",
|
|
147
148
|
{
|
|
148
149
|
"aria-hidden": "true",
|
|
149
|
-
|
|
150
|
-
children: /* @__PURE__ */ e(
|
|
150
|
+
className: a.icon,
|
|
151
|
+
children: /* @__PURE__ */ e(R, { size: 20 })
|
|
151
152
|
}
|
|
152
153
|
)
|
|
153
154
|
]
|
|
154
155
|
}
|
|
155
156
|
);
|
|
156
157
|
};
|
|
157
|
-
function
|
|
158
|
+
function Ve({
|
|
158
159
|
children: t,
|
|
159
|
-
description:
|
|
160
|
-
errorMessage:
|
|
160
|
+
description: r,
|
|
161
|
+
errorMessage: o,
|
|
161
162
|
errorPosition: l = "top",
|
|
162
|
-
items:
|
|
163
|
+
items: c,
|
|
163
164
|
label: s,
|
|
164
165
|
popover: S,
|
|
165
166
|
size: v = "large",
|
|
166
167
|
...n
|
|
167
168
|
}) {
|
|
168
|
-
return /* @__PURE__ */ e(
|
|
169
|
-
|
|
169
|
+
return /* @__PURE__ */ e(C, { children: /* @__PURE__ */ i(
|
|
170
|
+
A,
|
|
170
171
|
{
|
|
171
172
|
...n,
|
|
172
|
-
className:
|
|
173
|
+
className: T(n.className, a.select),
|
|
173
174
|
children: [
|
|
174
|
-
/* @__PURE__ */ e(
|
|
175
|
-
|
|
176
|
-
l === "top" && /* @__PURE__ */ e(g, { children:
|
|
175
|
+
/* @__PURE__ */ e(N, { popover: S, children: s && /* @__PURE__ */ e(x, { "data-disabled": n.isDisabled || void 0, children: s }) }),
|
|
176
|
+
r && /* @__PURE__ */ e(y, { slot: "description", children: r }),
|
|
177
|
+
l === "top" && /* @__PURE__ */ e(g, { children: o }),
|
|
177
178
|
/* @__PURE__ */ i(
|
|
178
179
|
"div",
|
|
179
180
|
{
|
|
@@ -181,17 +182,17 @@ function ve({
|
|
|
181
182
|
"data-disabled": n.isDisabled || void 0,
|
|
182
183
|
children: [
|
|
183
184
|
/* @__PURE__ */ e(
|
|
184
|
-
|
|
185
|
+
ae,
|
|
185
186
|
{
|
|
186
187
|
size: v,
|
|
187
188
|
...n
|
|
188
189
|
}
|
|
189
190
|
),
|
|
190
|
-
n.selectionMode === "multiple" ? /* @__PURE__ */ e(
|
|
191
|
+
n.selectionMode === "multiple" ? /* @__PURE__ */ e(ee, { ...n }) : null
|
|
191
192
|
]
|
|
192
193
|
}
|
|
193
194
|
),
|
|
194
|
-
l === "bottom" && /* @__PURE__ */ e(g, { children:
|
|
195
|
+
l === "bottom" && /* @__PURE__ */ e(g, { children: o }),
|
|
195
196
|
/* @__PURE__ */ i(
|
|
196
197
|
I,
|
|
197
198
|
{
|
|
@@ -199,23 +200,23 @@ function ve({
|
|
|
199
200
|
offset: 0,
|
|
200
201
|
hideArrow: !0,
|
|
201
202
|
children: [
|
|
202
|
-
n.isSelectableAll && /* @__PURE__ */ e(
|
|
203
|
+
n.isSelectableAll && /* @__PURE__ */ e(Z, {}),
|
|
203
204
|
/* @__PURE__ */ e(
|
|
204
205
|
L,
|
|
205
206
|
{
|
|
206
207
|
escapeKeyBehavior: "none",
|
|
207
|
-
items:
|
|
208
|
+
items: c,
|
|
208
209
|
children: t
|
|
209
210
|
}
|
|
210
211
|
)
|
|
211
212
|
]
|
|
212
213
|
}
|
|
213
214
|
),
|
|
214
|
-
/* @__PURE__ */ e(
|
|
215
|
+
/* @__PURE__ */ e(le, { ...n })
|
|
215
216
|
]
|
|
216
217
|
}
|
|
217
218
|
) });
|
|
218
219
|
}
|
|
219
220
|
export {
|
|
220
|
-
|
|
221
|
+
Ve as S
|
|
221
222
|
};
|
package/index.js
CHANGED
|
@@ -29,7 +29,7 @@ import { P as So } from "./chunks/Popover-BcEtFiU1.js";
|
|
|
29
29
|
import { P as Io } from "./chunks/ProgressBar-KQdaaME2.js";
|
|
30
30
|
import { R as Po, a as Ro } from "./chunks/Radio-BD-ICPhb.js";
|
|
31
31
|
import { S as Fo } from "./chunks/SearchField-44UKmB8Z.js";
|
|
32
|
-
import { S as vo } from "./chunks/Select-
|
|
32
|
+
import { S as vo } from "./chunks/Select-Cz3Y8abd.js";
|
|
33
33
|
import { S as ho } from "./chunks/Select-BJlDjYWX.js";
|
|
34
34
|
import { S as yo } from "./chunks/Skeleton-DqIHQLQl.js";
|
|
35
35
|
import { S as No } from "./chunks/Spinner-tvJ7rPiT.js";
|
package/package.json
CHANGED
package/select/index.js
CHANGED