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