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