@launchpad-ui/form 0.6.28 → 0.6.30
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/dist/index.es.js +281 -258
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +282 -259
- package/dist/index.js.map +1 -1
- package/dist/style.css +86 -76
- package/package.json +9 -9
package/dist/index.es.js
CHANGED
@@ -1,36 +1,36 @@
|
|
1
1
|
import './style.css';
|
2
|
-
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
3
2
|
import { forwardRef, useState, useRef, Children, isValidElement, cloneElement } from "react";
|
4
3
|
import { cx } from "classix";
|
4
|
+
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
5
5
|
import { VisuallyHidden } from "@react-aria/visually-hidden";
|
6
|
-
const formGroup = "
|
7
|
-
const formIncreasedErrorMargin = "
|
8
|
-
const formInline = "
|
9
|
-
const form = "
|
10
|
-
const formInput = "
|
11
|
-
const isFocused = "
|
12
|
-
const iconField = "
|
13
|
-
const suffixContainer = "
|
14
|
-
const isInvalid = "
|
15
|
-
const inlineForm = "
|
16
|
-
const label = "
|
17
|
-
const labelDisabled = "
|
18
|
-
const labelOptional = "
|
19
|
-
const compactTextField = "
|
20
|
-
const fieldError = "
|
21
|
-
const hint = "
|
22
|
-
const field = "
|
23
|
-
const fieldErrorMessage = "
|
24
|
-
const isDisabled = "
|
25
|
-
const checkbox = "
|
26
|
-
const radio = "
|
27
|
-
const number = "
|
28
|
-
const suffix = "
|
29
|
-
const iconFieldIcon = "
|
30
|
-
const formInputTiny = "
|
31
|
-
const requiredAsterisk = "
|
32
|
-
const fieldSet = "
|
33
|
-
const isActive = "
|
6
|
+
const formGroup = "_formGroup_14n27_1";
|
7
|
+
const formIncreasedErrorMargin = "_formIncreasedErrorMargin_14n27_9";
|
8
|
+
const formInline = "_formInline_14n27_13";
|
9
|
+
const form = "_form_14n27_1";
|
10
|
+
const formInput = "_formInput_14n27_27";
|
11
|
+
const isFocused = "_isFocused_14n27_47";
|
12
|
+
const iconField = "_iconField_14n27_64";
|
13
|
+
const suffixContainer = "_suffixContainer_14n27_68";
|
14
|
+
const isInvalid = "_isInvalid_14n27_73";
|
15
|
+
const inlineForm = "_inlineForm_14n27_84";
|
16
|
+
const label = "_label_14n27_89";
|
17
|
+
const labelDisabled = "_labelDisabled_14n27_95";
|
18
|
+
const labelOptional = "_labelOptional_14n27_103";
|
19
|
+
const compactTextField = "_compactTextField_14n27_109";
|
20
|
+
const fieldError = "_fieldError_14n27_133";
|
21
|
+
const hint = "_hint_14n27_175";
|
22
|
+
const field = "_field_14n27_133";
|
23
|
+
const fieldErrorMessage = "_fieldErrorMessage_14n27_195";
|
24
|
+
const isDisabled = "_isDisabled_14n27_208";
|
25
|
+
const checkbox = "_checkbox_14n27_275";
|
26
|
+
const radio = "_radio_14n27_282";
|
27
|
+
const number = "_number_14n27_286";
|
28
|
+
const suffix = "_suffix_14n27_68";
|
29
|
+
const iconFieldIcon = "_iconFieldIcon_14n27_324";
|
30
|
+
const formInputTiny = "_formInputTiny_14n27_332";
|
31
|
+
const requiredAsterisk = "_requiredAsterisk_14n27_341";
|
32
|
+
const fieldSet = "_fieldSet_14n27_345";
|
33
|
+
const isActive = "_isActive_14n27_356";
|
34
34
|
const styles = {
|
35
35
|
formGroup,
|
36
36
|
formIncreasedErrorMargin,
|
@@ -67,7 +67,12 @@ const RequiredAsterisk = ({
|
|
67
67
|
...rest
|
68
68
|
}) => {
|
69
69
|
const classes = cx(styles.requiredAsterisk, className);
|
70
|
-
return /* @__PURE__ */ jsx("span", {
|
70
|
+
return /* @__PURE__ */ jsx("span", {
|
71
|
+
...rest,
|
72
|
+
"data-test-id": testId,
|
73
|
+
className: classes,
|
74
|
+
children: "*"
|
75
|
+
});
|
71
76
|
};
|
72
77
|
const Label = ({
|
73
78
|
disabled,
|
@@ -79,149 +84,141 @@ const Label = ({
|
|
79
84
|
...rest
|
80
85
|
}) => {
|
81
86
|
const classes = cx(styles.label, className, disabled && styles.labelDisabled);
|
82
|
-
return /* @__PURE__ */ jsxs("label", {
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
+
return /* @__PURE__ */ jsxs("label", {
|
88
|
+
...rest,
|
89
|
+
"data-test-id": testId,
|
90
|
+
className: classes,
|
91
|
+
children: [children, optional && !required && /* @__PURE__ */ jsx("small", {
|
92
|
+
className: styles.labelOptional,
|
93
|
+
children: "(optional)"
|
94
|
+
}), required && !optional && /* @__PURE__ */ jsx(RequiredAsterisk, {})]
|
95
|
+
});
|
87
96
|
};
|
88
|
-
const Checkbox = forwardRef(
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
console.warn(
|
102
|
-
"If you do not provide children, you must specify an aria-label for accessibility"
|
103
|
-
);
|
104
|
-
}
|
105
|
-
return /* @__PURE__ */ jsxs(Label, { className: labelClassName, children: [
|
106
|
-
/* @__PURE__ */ jsx(
|
107
|
-
"input",
|
108
|
-
{
|
109
|
-
...rest,
|
110
|
-
ref,
|
111
|
-
checked,
|
112
|
-
"aria-checked": checked ? "true" : "false",
|
113
|
-
"aria-label": ariaLabel,
|
114
|
-
"aria-labelledby": ariaLabelledby,
|
115
|
-
className: styles.checkbox,
|
116
|
-
disabled,
|
117
|
-
type: "checkbox",
|
118
|
-
"data-test-id": testId
|
119
|
-
}
|
120
|
-
),
|
121
|
-
" ",
|
122
|
-
disabled ? /* @__PURE__ */ jsx("span", { className: styles.labelDisabled, children }) : children
|
123
|
-
] });
|
97
|
+
const Checkbox = forwardRef(({
|
98
|
+
"aria-label": ariaLabel,
|
99
|
+
"aria-labelledby": ariaLabelledby,
|
100
|
+
children,
|
101
|
+
disabled,
|
102
|
+
checked,
|
103
|
+
labelClassName,
|
104
|
+
"data-test-id": testId = "checkbox",
|
105
|
+
...rest
|
106
|
+
}, ref) => {
|
107
|
+
const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
|
108
|
+
if (!children && !hasAriaLabel) {
|
109
|
+
console.warn("If you do not provide children, you must specify an aria-label for accessibility");
|
124
110
|
}
|
125
|
-
|
111
|
+
return /* @__PURE__ */ jsxs(Label, {
|
112
|
+
className: labelClassName,
|
113
|
+
children: [/* @__PURE__ */ jsx("input", {
|
114
|
+
...rest,
|
115
|
+
ref,
|
116
|
+
checked,
|
117
|
+
"aria-checked": checked ? "true" : "false",
|
118
|
+
"aria-label": ariaLabel,
|
119
|
+
"aria-labelledby": ariaLabelledby,
|
120
|
+
className: styles.checkbox,
|
121
|
+
disabled,
|
122
|
+
type: "checkbox",
|
123
|
+
"data-test-id": testId
|
124
|
+
}), " ", disabled ? /* @__PURE__ */ jsx("span", {
|
125
|
+
className: styles.labelDisabled,
|
126
|
+
children
|
127
|
+
}) : children]
|
128
|
+
});
|
129
|
+
});
|
126
130
|
Checkbox.displayName = "Checkbox";
|
127
131
|
const createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
|
128
|
-
const TextField = forwardRef(
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
"input",
|
145
|
-
{
|
146
|
-
...rest,
|
147
|
-
type,
|
148
|
-
"data-test-id": testId,
|
149
|
-
className: classes,
|
150
|
-
readOnly,
|
151
|
-
ref,
|
152
|
-
"aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
|
153
|
-
}
|
154
|
-
),
|
155
|
-
/* @__PURE__ */ jsx("label", { className: styles.suffix, htmlFor: rest.id, children: suffix2 })
|
156
|
-
] });
|
157
|
-
}
|
158
|
-
return /* @__PURE__ */ jsx(
|
159
|
-
"input",
|
160
|
-
{
|
132
|
+
const TextField = forwardRef(({
|
133
|
+
className,
|
134
|
+
type = "text",
|
135
|
+
tiny = false,
|
136
|
+
readOnly,
|
137
|
+
tabIndex = 0,
|
138
|
+
suffix: suffix2,
|
139
|
+
overrideWidth,
|
140
|
+
"data-test-id": testId = "text-field",
|
141
|
+
...rest
|
142
|
+
}, ref) => {
|
143
|
+
const classes = overrideWidth ? className : cx(styles.formInput, tiny && styles.formInputTiny, className);
|
144
|
+
if (suffix2) {
|
145
|
+
return /* @__PURE__ */ jsxs("div", {
|
146
|
+
className: styles.suffixContainer,
|
147
|
+
children: [/* @__PURE__ */ jsx("input", {
|
161
148
|
...rest,
|
162
149
|
type,
|
150
|
+
"data-test-id": testId,
|
163
151
|
className: classes,
|
164
152
|
readOnly,
|
165
|
-
tabIndex,
|
166
153
|
ref,
|
167
|
-
"data-test-id": testId,
|
168
|
-
style: overrideWidth ? {
|
169
|
-
width: overrideWidth
|
170
|
-
} : void 0,
|
171
154
|
"aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
|
172
|
-
}
|
173
|
-
|
155
|
+
}), /* @__PURE__ */ jsx("label", {
|
156
|
+
className: styles.suffix,
|
157
|
+
htmlFor: rest.id,
|
158
|
+
children: suffix2
|
159
|
+
})]
|
160
|
+
});
|
174
161
|
}
|
175
|
-
|
162
|
+
return /* @__PURE__ */ jsx("input", {
|
163
|
+
...rest,
|
164
|
+
type,
|
165
|
+
className: classes,
|
166
|
+
readOnly,
|
167
|
+
tabIndex,
|
168
|
+
ref,
|
169
|
+
"data-test-id": testId,
|
170
|
+
style: overrideWidth ? {
|
171
|
+
width: overrideWidth
|
172
|
+
} : void 0,
|
173
|
+
"aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
|
174
|
+
});
|
175
|
+
});
|
176
176
|
TextField.displayName = "TextField";
|
177
|
-
const CompactTextField = forwardRef(
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
222
|
-
] });
|
223
|
-
}
|
224
|
-
);
|
177
|
+
const CompactTextField = forwardRef(({
|
178
|
+
className,
|
179
|
+
id,
|
180
|
+
label: label2,
|
181
|
+
needsErrorFeedback,
|
182
|
+
value,
|
183
|
+
onFocus,
|
184
|
+
onBlur,
|
185
|
+
"data-test-id": testId = "compact-text-field",
|
186
|
+
...rest
|
187
|
+
}, ref) => {
|
188
|
+
const [isActive2, setIsActive] = useState((typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0);
|
189
|
+
const isActiveState = isActive2 || needsErrorFeedback;
|
190
|
+
const classes = cx(styles.compactTextField, className, isActiveState && styles.isActive);
|
191
|
+
const placeholder = isActiveState ? "" : label2;
|
192
|
+
const handleFocus = (event) => {
|
193
|
+
setIsActive(true);
|
194
|
+
if (onFocus) {
|
195
|
+
onFocus(event);
|
196
|
+
}
|
197
|
+
};
|
198
|
+
const handleBlur = (event) => {
|
199
|
+
const value2 = event.target.value || "";
|
200
|
+
setIsActive(value2.trim().length !== 0);
|
201
|
+
if (onBlur) {
|
202
|
+
onBlur(event);
|
203
|
+
}
|
204
|
+
};
|
205
|
+
return /* @__PURE__ */ jsxs("div", {
|
206
|
+
className: classes,
|
207
|
+
"data-test-id": testId,
|
208
|
+
children: [/* @__PURE__ */ jsx(Label, {
|
209
|
+
htmlFor: id,
|
210
|
+
children: label2
|
211
|
+
}), /* @__PURE__ */ jsx(TextField, {
|
212
|
+
...rest,
|
213
|
+
id,
|
214
|
+
placeholder,
|
215
|
+
value,
|
216
|
+
ref,
|
217
|
+
onFocus: handleFocus,
|
218
|
+
onBlur: handleBlur
|
219
|
+
})]
|
220
|
+
});
|
221
|
+
});
|
225
222
|
CompactTextField.displayName = "CompactTextField";
|
226
223
|
const FieldError = ({
|
227
224
|
name,
|
@@ -233,17 +230,14 @@ const FieldError = ({
|
|
233
230
|
if (!errorMessage) {
|
234
231
|
return null;
|
235
232
|
}
|
236
|
-
return /* @__PURE__ */ jsx(
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
|
241
|
-
|
242
|
-
|
243
|
-
|
244
|
-
children: `Error - ${errorMessage}`
|
245
|
-
}
|
246
|
-
);
|
233
|
+
return /* @__PURE__ */ jsx("span", {
|
234
|
+
...rest,
|
235
|
+
className: cx(styles.fieldError, className),
|
236
|
+
"aria-live": "polite",
|
237
|
+
"data-test-id": testId,
|
238
|
+
id: createFieldErrorId(name),
|
239
|
+
children: `Error - ${errorMessage}`
|
240
|
+
});
|
247
241
|
};
|
248
242
|
const FieldSet = ({
|
249
243
|
children,
|
@@ -252,7 +246,12 @@ const FieldSet = ({
|
|
252
246
|
...rest
|
253
247
|
}) => {
|
254
248
|
const classes = cx(styles.fieldSet, className);
|
255
|
-
return /* @__PURE__ */ jsx("fieldset", {
|
249
|
+
return /* @__PURE__ */ jsx("fieldset", {
|
250
|
+
"data-test-id": testId,
|
251
|
+
className: classes,
|
252
|
+
...rest,
|
253
|
+
children
|
254
|
+
});
|
256
255
|
};
|
257
256
|
const Form = (props) => {
|
258
257
|
const {
|
@@ -263,13 +262,13 @@ const Form = (props) => {
|
|
263
262
|
"data-test-id": testId = "form",
|
264
263
|
...rest
|
265
264
|
} = props;
|
266
|
-
const classes = cx(
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
271
|
-
|
272
|
-
|
265
|
+
const classes = cx(styles.form, className, inline && styles.formInline, !!hasIncreasedErrorMargin && styles.formIncreasedErrorMargin);
|
266
|
+
return /* @__PURE__ */ jsx("form", {
|
267
|
+
...rest,
|
268
|
+
"data-test-id": testId,
|
269
|
+
className: classes,
|
270
|
+
children
|
271
|
+
});
|
273
272
|
};
|
274
273
|
const FormGroup = (props) => {
|
275
274
|
const {
|
@@ -281,12 +280,13 @@ const FormGroup = (props) => {
|
|
281
280
|
"data-test-id": testId = "form-group",
|
282
281
|
...rest
|
283
282
|
} = props;
|
284
|
-
const classes = cx(
|
285
|
-
|
286
|
-
className,
|
287
|
-
|
288
|
-
|
289
|
-
|
283
|
+
const classes = cx(styles.formGroup, className, !ignoreValidation && isInvalid2 && styles.isInvalid);
|
284
|
+
return /* @__PURE__ */ jsx("fieldset", {
|
285
|
+
className: classes,
|
286
|
+
"data-test-id": testId,
|
287
|
+
...rest,
|
288
|
+
children
|
289
|
+
});
|
290
290
|
};
|
291
291
|
const FormHint = ({
|
292
292
|
className,
|
@@ -295,7 +295,12 @@ const FormHint = ({
|
|
295
295
|
...rest
|
296
296
|
}) => {
|
297
297
|
const classes = cx(styles.hint, className);
|
298
|
-
return /* @__PURE__ */ jsx("div", {
|
298
|
+
return /* @__PURE__ */ jsx("div", {
|
299
|
+
...rest,
|
300
|
+
"data-test-id": testId,
|
301
|
+
className: classes,
|
302
|
+
children
|
303
|
+
});
|
299
304
|
};
|
300
305
|
const FormField = ({
|
301
306
|
isRequired,
|
@@ -314,26 +319,25 @@ const FormField = ({
|
|
314
319
|
const handleBlur = () => {
|
315
320
|
onBlur && onBlur(name);
|
316
321
|
};
|
317
|
-
return /* @__PURE__ */ jsxs(
|
318
|
-
|
319
|
-
|
320
|
-
|
322
|
+
return /* @__PURE__ */ jsxs(FormGroup, {
|
323
|
+
className: cx(styles.field, className),
|
324
|
+
name,
|
325
|
+
ignoreValidation,
|
326
|
+
isInvalid: isInvalid2,
|
327
|
+
onBlur: handleBlur,
|
328
|
+
"data-test-id": testId,
|
329
|
+
children: [label2 && /* @__PURE__ */ jsxs("label", {
|
330
|
+
htmlFor,
|
331
|
+
children: [label2, isRequired && /* @__PURE__ */ jsx(RequiredAsterisk, {})]
|
332
|
+
}), hint2 && /* @__PURE__ */ jsx(FormHint, {
|
333
|
+
className: styles.hint,
|
334
|
+
children: hint2
|
335
|
+
}), children, /* @__PURE__ */ jsx(FieldError, {
|
336
|
+
className: styles.fieldErrorMessage,
|
321
337
|
name,
|
322
|
-
|
323
|
-
|
324
|
-
|
325
|
-
"data-test-id": testId,
|
326
|
-
children: [
|
327
|
-
label2 && /* @__PURE__ */ jsxs("label", { htmlFor, children: [
|
328
|
-
label2,
|
329
|
-
isRequired && /* @__PURE__ */ jsx(RequiredAsterisk, {})
|
330
|
-
] }),
|
331
|
-
hint2 && /* @__PURE__ */ jsx(FormHint, { className: styles.hint, children: hint2 }),
|
332
|
-
children,
|
333
|
-
/* @__PURE__ */ jsx(FieldError, { className: styles.fieldErrorMessage, name, errorMessage })
|
334
|
-
]
|
335
|
-
}
|
336
|
-
);
|
338
|
+
errorMessage
|
339
|
+
})]
|
340
|
+
});
|
337
341
|
};
|
338
342
|
const IconField = ({
|
339
343
|
icon,
|
@@ -344,10 +348,15 @@ const IconField = ({
|
|
344
348
|
}) => {
|
345
349
|
const Icon = icon;
|
346
350
|
const classes = cx(styles.iconField, className);
|
347
|
-
return /* @__PURE__ */ jsxs("div", {
|
348
|
-
|
349
|
-
|
350
|
-
|
351
|
+
return /* @__PURE__ */ jsxs("div", {
|
352
|
+
className: classes,
|
353
|
+
"data-test-id": testId,
|
354
|
+
...rest,
|
355
|
+
children: [children, /* @__PURE__ */ jsx(Icon, {
|
356
|
+
size: "small",
|
357
|
+
className: styles.iconFieldIcon
|
358
|
+
})]
|
359
|
+
});
|
351
360
|
};
|
352
361
|
const Radio = ({
|
353
362
|
"aria-label": ariaLabel,
|
@@ -364,27 +373,29 @@ const Radio = ({
|
|
364
373
|
}) => {
|
365
374
|
const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
|
366
375
|
if (!children && !hasAriaLabel) {
|
367
|
-
console.warn(
|
368
|
-
"If you do not provide children, you must specify an aria-label for accessibility"
|
369
|
-
);
|
376
|
+
console.warn("If you do not provide children, you must specify an aria-label for accessibility");
|
370
377
|
}
|
371
|
-
return /* @__PURE__ */ jsxs(Fragment, {
|
372
|
-
/* @__PURE__ */ jsx(
|
373
|
-
|
374
|
-
|
375
|
-
|
376
|
-
|
377
|
-
|
378
|
-
|
379
|
-
|
380
|
-
|
381
|
-
|
382
|
-
|
383
|
-
|
384
|
-
|
385
|
-
|
386
|
-
|
387
|
-
|
378
|
+
return /* @__PURE__ */ jsxs(Fragment, {
|
379
|
+
children: [/* @__PURE__ */ jsx("input", {
|
380
|
+
...rest,
|
381
|
+
"aria-label": ariaLabel,
|
382
|
+
"aria-labelledby": ariaLabelledby,
|
383
|
+
className: cx(styles.radio, className),
|
384
|
+
checked,
|
385
|
+
disabled,
|
386
|
+
id,
|
387
|
+
"data-test-id": testId,
|
388
|
+
type: "radio"
|
389
|
+
}), /* @__PURE__ */ jsx(Label, {
|
390
|
+
className: labelClassName,
|
391
|
+
htmlFor: id,
|
392
|
+
style: labelStyle,
|
393
|
+
children: disabled ? /* @__PURE__ */ jsx("span", {
|
394
|
+
className: styles.labelDisabled,
|
395
|
+
children
|
396
|
+
}) : children
|
397
|
+
})]
|
398
|
+
});
|
388
399
|
};
|
389
400
|
const RadioGroup = (props) => {
|
390
401
|
const {
|
@@ -437,10 +448,18 @@ const RadioGroup = (props) => {
|
|
437
448
|
return null;
|
438
449
|
}
|
439
450
|
const radios = Children.map(children, (child) => updateRadioElems(child));
|
440
|
-
return /* @__PURE__ */ jsxs("fieldset", {
|
441
|
-
|
442
|
-
|
443
|
-
|
451
|
+
return /* @__PURE__ */ jsxs("fieldset", {
|
452
|
+
"data-test-id": testId,
|
453
|
+
ref: fieldsetRef,
|
454
|
+
children: [legend && /* @__PURE__ */ jsx("legend", {
|
455
|
+
children: /* @__PURE__ */ jsx(VisuallyHidden, {
|
456
|
+
children: legend
|
457
|
+
})
|
458
|
+
}), /* @__PURE__ */ jsx("div", {
|
459
|
+
...rest,
|
460
|
+
children: radios
|
461
|
+
})]
|
462
|
+
});
|
444
463
|
};
|
445
464
|
const Select = ({
|
446
465
|
className,
|
@@ -449,31 +468,35 @@ const Select = ({
|
|
449
468
|
...rest
|
450
469
|
}) => {
|
451
470
|
const classes = cx(styles.formInput, className);
|
452
|
-
return /* @__PURE__ */ jsx("select", {
|
471
|
+
return /* @__PURE__ */ jsx("select", {
|
472
|
+
...rest,
|
473
|
+
"data-test-id": testId,
|
474
|
+
className: classes,
|
475
|
+
children
|
476
|
+
});
|
453
477
|
};
|
454
|
-
const TextArea = forwardRef(
|
455
|
-
|
456
|
-
|
457
|
-
|
458
|
-
|
459
|
-
|
460
|
-
|
461
|
-
|
462
|
-
|
463
|
-
|
464
|
-
|
465
|
-
|
466
|
-
|
467
|
-
|
468
|
-
|
469
|
-
|
470
|
-
|
471
|
-
|
472
|
-
|
473
|
-
|
474
|
-
|
475
|
-
|
476
|
-
);
|
478
|
+
const TextArea = forwardRef(({
|
479
|
+
className,
|
480
|
+
"data-test-id": testId = "text-area",
|
481
|
+
...props
|
482
|
+
}, ref) => {
|
483
|
+
const onKeyDown = (e) => {
|
484
|
+
if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
|
485
|
+
e.stopPropagation();
|
486
|
+
}
|
487
|
+
if (e.key === "Escape") {
|
488
|
+
e.nativeEvent.stopImmediatePropagation();
|
489
|
+
}
|
490
|
+
};
|
491
|
+
return /* @__PURE__ */ jsx("textarea", {
|
492
|
+
...props,
|
493
|
+
className: cx(styles.formInput, className),
|
494
|
+
ref,
|
495
|
+
"data-test-id": testId,
|
496
|
+
"aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
|
497
|
+
onKeyDown
|
498
|
+
});
|
499
|
+
});
|
477
500
|
TextArea.displayName = "TextArea";
|
478
501
|
export {
|
479
502
|
Checkbox,
|