@launchpad-ui/form 0.2.7 → 0.3.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/dist/CompactTextField.d.ts.map +1 -1
- package/dist/Radio.d.ts +1 -1
- package/dist/Radio.d.ts.map +1 -1
- package/dist/index.es.js +262 -173
- package/dist/index.es.js.map +3 -3
- package/dist/index.js +266 -174
- package/dist/index.js.map +3 -3
- package/package.json +5 -7
package/dist/index.js
CHANGED
@@ -17,7 +17,10 @@ var __copyProps = (to, from, except, desc) => {
|
|
17
17
|
}
|
18
18
|
return to;
|
19
19
|
};
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
22
|
+
mod
|
23
|
+
));
|
21
24
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
22
25
|
|
23
26
|
// src/index.ts
|
@@ -55,17 +58,20 @@ var import_clsx2 = __toESM(require("clsx"));
|
|
55
58
|
// src/RequiredAsterisk.tsx
|
56
59
|
var import_clsx = __toESM(require("clsx"));
|
57
60
|
var import_RequiredAsterisk = require("./styles/RequiredAsterisk.css");
|
61
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
58
62
|
var RequiredAsterisk = ({ className, testId, ...rest }) => {
|
59
63
|
const classes = (0, import_clsx.default)("RequiredAsterisk");
|
60
|
-
return /* @__PURE__ */
|
64
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
|
61
65
|
className: classes,
|
62
66
|
"data-test-id": testId,
|
63
|
-
...rest
|
64
|
-
|
67
|
+
...rest,
|
68
|
+
children: "*"
|
69
|
+
});
|
65
70
|
};
|
66
71
|
|
67
72
|
// src/Label.tsx
|
68
73
|
var import_Form = require("./styles/Form.css");
|
74
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
69
75
|
var Label = ({
|
70
76
|
htmlFor,
|
71
77
|
disabled,
|
@@ -76,53 +82,69 @@ var Label = ({
|
|
76
82
|
...other
|
77
83
|
}) => {
|
78
84
|
const classes = (0, import_clsx2.default)("Form-label", className, { "Form-label--disabled": disabled });
|
79
|
-
return /* @__PURE__ */
|
85
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", {
|
80
86
|
...other,
|
81
87
|
className: classes,
|
82
|
-
htmlFor
|
83
|
-
|
84
|
-
|
85
|
-
|
88
|
+
htmlFor,
|
89
|
+
children: [
|
90
|
+
children,
|
91
|
+
optional && !required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("small", {
|
92
|
+
className: "Form-labelOptional",
|
93
|
+
children: "(optional)"
|
94
|
+
}),
|
95
|
+
required && !optional && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RequiredAsterisk, {})
|
96
|
+
]
|
97
|
+
});
|
86
98
|
};
|
87
99
|
|
88
100
|
// src/Checkbox.tsx
|
89
101
|
var import_Form2 = require("./styles/Form.css");
|
90
|
-
var
|
91
|
-
|
92
|
-
|
93
|
-
children,
|
94
|
-
disabled,
|
95
|
-
testId,
|
96
|
-
checked,
|
97
|
-
labelClassName,
|
98
|
-
...other
|
99
|
-
}, ref) => {
|
100
|
-
const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
|
101
|
-
if (!children && !hasAriaLabel) {
|
102
|
-
console.warn("If you do not provide children, you must specify an aria-label for accessibility");
|
103
|
-
}
|
104
|
-
return /* @__PURE__ */ React.createElement(Label, {
|
105
|
-
className: labelClassName
|
106
|
-
}, /* @__PURE__ */ React.createElement("input", {
|
107
|
-
...other,
|
108
|
-
ref,
|
109
|
-
checked,
|
110
|
-
"aria-checked": checked ? "true" : "false",
|
102
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
103
|
+
var Checkbox = (0, import_react.forwardRef)(
|
104
|
+
({
|
111
105
|
"aria-label": ariaLabel,
|
112
106
|
"aria-labelledby": ariaLabelledby,
|
113
|
-
|
107
|
+
children,
|
114
108
|
disabled,
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
},
|
120
|
-
|
109
|
+
testId,
|
110
|
+
checked,
|
111
|
+
labelClassName,
|
112
|
+
...other
|
113
|
+
}, ref) => {
|
114
|
+
const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
|
115
|
+
if (!children && !hasAriaLabel) {
|
116
|
+
console.warn(
|
117
|
+
"If you do not provide children, you must specify an aria-label for accessibility"
|
118
|
+
);
|
119
|
+
}
|
120
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Label, {
|
121
|
+
className: labelClassName,
|
122
|
+
children: [
|
123
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
|
124
|
+
...other,
|
125
|
+
ref,
|
126
|
+
checked,
|
127
|
+
"aria-checked": checked ? "true" : "false",
|
128
|
+
"aria-label": ariaLabel,
|
129
|
+
"aria-labelledby": ariaLabelledby,
|
130
|
+
className: "Form-checkbox",
|
131
|
+
disabled,
|
132
|
+
"data-test-id": testId,
|
133
|
+
type: "checkbox"
|
134
|
+
}),
|
135
|
+
" ",
|
136
|
+
disabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
|
137
|
+
className: "Form-label--disabled",
|
138
|
+
children
|
139
|
+
}) : children
|
140
|
+
]
|
141
|
+
});
|
142
|
+
}
|
143
|
+
);
|
121
144
|
Checkbox.displayName = "Checkbox";
|
122
145
|
|
123
146
|
// src/CompactTextField.tsx
|
124
147
|
var import_clsx4 = __toESM(require("clsx"));
|
125
|
-
var import_lodash_es = require("lodash-es");
|
126
148
|
var import_react3 = require("react");
|
127
149
|
|
128
150
|
// src/TextField.tsx
|
@@ -134,132 +156,156 @@ var import_FormInput = require("./styles/FormInput.css");
|
|
134
156
|
var createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
|
135
157
|
|
136
158
|
// src/TextField.tsx
|
137
|
-
var
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
159
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
160
|
+
var TextField = (0, import_react2.forwardRef)(
|
161
|
+
({
|
162
|
+
className,
|
163
|
+
type = "text",
|
164
|
+
tiny = false,
|
165
|
+
readOnly,
|
166
|
+
tabIndex = 0,
|
167
|
+
testId,
|
168
|
+
suffix,
|
169
|
+
overrideWidth,
|
170
|
+
...rest
|
171
|
+
}, ref) => {
|
172
|
+
const classes = overrideWidth ? className : (0, import_clsx3.default)("FormInput", `FormInput-${type}`, className, {
|
173
|
+
"FormInput--tiny": tiny
|
174
|
+
});
|
175
|
+
if (suffix) {
|
176
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
177
|
+
className: "FormInput-suffixContainer",
|
178
|
+
children: [
|
179
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
|
180
|
+
...rest,
|
181
|
+
type,
|
182
|
+
className: (0, import_clsx3.default)(classes, "FormInput-suffix"),
|
183
|
+
readOnly,
|
184
|
+
ref,
|
185
|
+
"data-test-id": testId,
|
186
|
+
"aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
|
187
|
+
}),
|
188
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("label", {
|
189
|
+
className: "FormInput-suffix",
|
190
|
+
htmlFor: rest.id,
|
191
|
+
children: suffix
|
192
|
+
})
|
193
|
+
]
|
194
|
+
});
|
195
|
+
}
|
196
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
|
155
197
|
...rest,
|
156
198
|
type,
|
157
|
-
className:
|
199
|
+
className: classes,
|
158
200
|
readOnly,
|
201
|
+
tabIndex,
|
159
202
|
ref,
|
160
203
|
"data-test-id": testId,
|
204
|
+
style: overrideWidth ? {
|
205
|
+
width: overrideWidth
|
206
|
+
} : void 0,
|
161
207
|
"aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
|
162
|
-
})
|
163
|
-
className: "FormInput-suffix",
|
164
|
-
htmlFor: rest.id
|
165
|
-
}, suffix));
|
208
|
+
});
|
166
209
|
}
|
167
|
-
|
168
|
-
...rest,
|
169
|
-
type,
|
170
|
-
className: classes,
|
171
|
-
readOnly,
|
172
|
-
tabIndex,
|
173
|
-
ref,
|
174
|
-
"data-test-id": testId,
|
175
|
-
style: overrideWidth ? {
|
176
|
-
width: overrideWidth
|
177
|
-
} : void 0,
|
178
|
-
"aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
|
179
|
-
});
|
180
|
-
});
|
210
|
+
);
|
181
211
|
TextField.displayName = "TextField";
|
182
212
|
|
183
213
|
// src/CompactTextField.tsx
|
184
214
|
var import_CompactTextField = require("./styles/CompactTextField.css");
|
185
215
|
var import_FormInput2 = require("./styles/FormInput.css");
|
186
|
-
var
|
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
|
-
|
216
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
217
|
+
var CompactTextField = (0, import_react3.forwardRef)(
|
218
|
+
({ className, id, name, label, type, needsErrorFeedback, value, onFocus, onBlur, ...rest }, ref) => {
|
219
|
+
const [isActive, setIsActive] = (0, import_react3.useState)(
|
220
|
+
(typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0
|
221
|
+
);
|
222
|
+
const isActiveState = isActive || needsErrorFeedback;
|
223
|
+
const classes = (0, import_clsx4.default)("CompactTextField", className, {
|
224
|
+
"is-active": isActiveState
|
225
|
+
});
|
226
|
+
const placeholder = isActiveState ? "" : label;
|
227
|
+
const handleFocus = (event) => {
|
228
|
+
setIsActive(true);
|
229
|
+
if (onFocus) {
|
230
|
+
onFocus(event);
|
231
|
+
}
|
232
|
+
};
|
233
|
+
const handleBlur = (event) => {
|
234
|
+
const value2 = event.target.value || "";
|
235
|
+
setIsActive(value2.trim().length !== 0);
|
236
|
+
if (onBlur) {
|
237
|
+
onBlur(event);
|
238
|
+
}
|
239
|
+
};
|
240
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
241
|
+
className: classes,
|
242
|
+
children: [
|
243
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, {
|
244
|
+
htmlFor: id,
|
245
|
+
children: label
|
246
|
+
}),
|
247
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextField, {
|
248
|
+
...rest,
|
249
|
+
id,
|
250
|
+
name,
|
251
|
+
type,
|
252
|
+
placeholder,
|
253
|
+
value,
|
254
|
+
ref,
|
255
|
+
onFocus: handleFocus,
|
256
|
+
onBlur: handleBlur
|
257
|
+
})
|
258
|
+
]
|
259
|
+
});
|
260
|
+
}
|
261
|
+
);
|
222
262
|
CompactTextField.displayName = "CompactTextField";
|
223
263
|
|
224
264
|
// src/FieldError.tsx
|
225
265
|
var import_clsx5 = __toESM(require("clsx"));
|
226
266
|
var import_Form3 = require("./styles/Form.css");
|
267
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
227
268
|
var FieldError = ({ name, errorMessage, className }) => {
|
228
269
|
if (!errorMessage) {
|
229
270
|
return null;
|
230
271
|
}
|
231
|
-
return /* @__PURE__ */
|
272
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
|
232
273
|
className: (0, import_clsx5.default)("Form-fieldError", className),
|
233
274
|
"aria-live": "polite",
|
234
|
-
id: createFieldErrorId(name)
|
235
|
-
|
275
|
+
id: createFieldErrorId(name),
|
276
|
+
children: `Error - ${errorMessage}`
|
277
|
+
});
|
236
278
|
};
|
237
279
|
|
238
280
|
// src/FieldSet.tsx
|
239
281
|
var import_FieldSet = require("./styles/FieldSet.css");
|
282
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
240
283
|
var FieldSet = ({ children, testId }) => {
|
241
|
-
return /* @__PURE__ */
|
284
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("fieldset", {
|
242
285
|
className: "FieldSet",
|
243
|
-
"data-test-id": testId
|
244
|
-
|
286
|
+
"data-test-id": testId,
|
287
|
+
children
|
288
|
+
});
|
245
289
|
};
|
246
290
|
|
247
291
|
// src/Form.tsx
|
248
292
|
var import_clsx6 = __toESM(require("clsx"));
|
249
293
|
var import_Form4 = require("./styles/Form.css");
|
294
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
250
295
|
var Form = (props) => {
|
251
296
|
const { id, name, className, inline, children, ariaLabel, hasIncreasedErrorMargin, ...rest } = props;
|
252
297
|
const classes = (0, import_clsx6.default)("Form", className, {
|
253
298
|
"Form--inline": inline,
|
254
299
|
"Form--increasedErrorMargin": !!hasIncreasedErrorMargin
|
255
300
|
});
|
256
|
-
return /* @__PURE__ */
|
301
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("form", {
|
257
302
|
id,
|
258
303
|
name,
|
259
304
|
"aria-label": ariaLabel,
|
260
305
|
...rest,
|
261
|
-
className: classes
|
262
|
-
|
306
|
+
className: classes,
|
307
|
+
children
|
308
|
+
});
|
263
309
|
};
|
264
310
|
|
265
311
|
// src/FormField.tsx
|
@@ -268,31 +314,36 @@ var import_clsx9 = __toESM(require("clsx"));
|
|
268
314
|
// src/FormGroup.tsx
|
269
315
|
var import_clsx7 = __toESM(require("clsx"));
|
270
316
|
var import_Form5 = require("./styles/Form.css");
|
317
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
271
318
|
var FormGroup = (props) => {
|
272
319
|
const { className, name, ignoreValidation, isInvalid, children, testId, ...other } = props;
|
273
320
|
const classes = (0, import_clsx7.default)("Form-group", className, {
|
274
321
|
"is-invalid": !ignoreValidation && isInvalid
|
275
322
|
});
|
276
|
-
return /* @__PURE__ */
|
323
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
277
324
|
className: classes,
|
278
325
|
"data-test-id": testId,
|
279
|
-
...other
|
280
|
-
|
326
|
+
...other,
|
327
|
+
children
|
328
|
+
});
|
281
329
|
};
|
282
330
|
|
283
331
|
// src/FormHint.tsx
|
284
332
|
var import_clsx8 = __toESM(require("clsx"));
|
285
333
|
var import_FormHint = require("./styles/FormHint.css");
|
334
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
286
335
|
var FormHint = ({ className, children, ...rest }) => {
|
287
336
|
const classes = (0, import_clsx8.default)("Form-hint", className);
|
288
|
-
return /* @__PURE__ */
|
337
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
289
338
|
...rest,
|
290
|
-
className: classes
|
291
|
-
|
339
|
+
className: classes,
|
340
|
+
children
|
341
|
+
});
|
292
342
|
};
|
293
343
|
|
294
344
|
// src/FormField.tsx
|
295
345
|
var import_FormField = require("./styles/FormField.css");
|
346
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
296
347
|
var FormField = ({
|
297
348
|
isRequired,
|
298
349
|
label,
|
@@ -309,49 +360,68 @@ var FormField = ({
|
|
309
360
|
const handleBlur = () => {
|
310
361
|
onBlur && onBlur(name);
|
311
362
|
};
|
312
|
-
return /* @__PURE__ */
|
363
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FormGroup, {
|
313
364
|
className: (0, import_clsx9.default)("FormField", className),
|
314
365
|
name,
|
315
366
|
ignoreValidation,
|
316
367
|
isInvalid,
|
317
|
-
onBlur: handleBlur
|
318
|
-
|
319
|
-
|
320
|
-
|
321
|
-
|
322
|
-
|
323
|
-
|
324
|
-
|
325
|
-
|
326
|
-
|
368
|
+
onBlur: handleBlur,
|
369
|
+
children: [
|
370
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", {
|
371
|
+
htmlFor,
|
372
|
+
children: [
|
373
|
+
label,
|
374
|
+
isRequired && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RequiredAsterisk, {})
|
375
|
+
]
|
376
|
+
}),
|
377
|
+
hint && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormHint, {
|
378
|
+
className: "FormField-hint",
|
379
|
+
children: hint
|
380
|
+
}),
|
381
|
+
children,
|
382
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldError, {
|
383
|
+
className: "FormField-errorMessage",
|
384
|
+
name,
|
385
|
+
errorMessage
|
386
|
+
})
|
387
|
+
]
|
388
|
+
});
|
327
389
|
};
|
328
390
|
|
329
391
|
// src/IconField.tsx
|
330
392
|
var import_icons = require("@launchpad-ui/icons");
|
331
393
|
var import_IconField = require("./styles/IconField.css");
|
394
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
332
395
|
var IconField = ({ icon, children }) => {
|
333
396
|
const Icon = icon;
|
334
|
-
return /* @__PURE__ */
|
335
|
-
className: "IconField"
|
336
|
-
|
337
|
-
|
338
|
-
|
397
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
398
|
+
className: "IconField",
|
399
|
+
children: [
|
400
|
+
children,
|
401
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {
|
402
|
+
size: import_icons.IconSize.SMALL
|
403
|
+
})
|
404
|
+
]
|
405
|
+
});
|
339
406
|
};
|
340
407
|
|
341
408
|
// src/InputGroup.tsx
|
342
409
|
var import_clsx10 = __toESM(require("clsx"));
|
343
410
|
var import_InputGroup = require("./styles/InputGroup.css");
|
411
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
344
412
|
var InputGroup = ({ className, children, ...other }) => {
|
345
413
|
const classes = (0, import_clsx10.default)("InputGroup", className);
|
346
|
-
return /* @__PURE__ */
|
414
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
347
415
|
...other,
|
348
|
-
className: classes
|
349
|
-
|
416
|
+
className: classes,
|
417
|
+
children
|
418
|
+
});
|
350
419
|
};
|
351
420
|
|
352
421
|
// src/Radio.tsx
|
353
422
|
var import_clsx11 = __toESM(require("clsx"));
|
354
423
|
var import_Form6 = require("./styles/Form.css");
|
424
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
355
425
|
var Radio = ({
|
356
426
|
"aria-label": ariaLabel,
|
357
427
|
"aria-labelledby": ariaLabelledby,
|
@@ -369,33 +439,43 @@ var Radio = ({
|
|
369
439
|
}) => {
|
370
440
|
const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
|
371
441
|
if (!children && !hasAriaLabel) {
|
372
|
-
console.warn(
|
442
|
+
console.warn(
|
443
|
+
"If you do not provide children, you must specify an aria-label for accessibility"
|
444
|
+
);
|
373
445
|
}
|
374
|
-
return /* @__PURE__ */
|
375
|
-
|
376
|
-
|
377
|
-
|
378
|
-
|
379
|
-
|
380
|
-
|
381
|
-
|
382
|
-
|
383
|
-
|
384
|
-
|
385
|
-
|
386
|
-
|
387
|
-
|
388
|
-
|
389
|
-
|
390
|
-
|
391
|
-
|
392
|
-
|
446
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
|
447
|
+
children: [
|
448
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
|
449
|
+
"aria-label": ariaLabel,
|
450
|
+
"aria-labelledby": ariaLabelledby,
|
451
|
+
className: (0, import_clsx11.default)("Form-radio", className),
|
452
|
+
checked,
|
453
|
+
disabled,
|
454
|
+
id,
|
455
|
+
name,
|
456
|
+
onChange,
|
457
|
+
type: "radio",
|
458
|
+
value,
|
459
|
+
...props
|
460
|
+
}),
|
461
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Label, {
|
462
|
+
className: labelClassName,
|
463
|
+
htmlFor: id,
|
464
|
+
style: labelStyle,
|
465
|
+
children: disabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
|
466
|
+
className: "Form-label--disabled",
|
467
|
+
children
|
468
|
+
}) : children
|
469
|
+
})
|
470
|
+
]
|
471
|
+
});
|
393
472
|
};
|
394
473
|
|
395
474
|
// src/RadioGroup.tsx
|
396
475
|
var import_visually_hidden = require("@react-aria/visually-hidden");
|
397
476
|
var import_react4 = require("react");
|
398
477
|
var import_Form7 = require("./styles/Form.css");
|
478
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
399
479
|
var RadioGroup = (props) => {
|
400
480
|
const { name, value, onChange, children, disabled, legend, ...other } = props;
|
401
481
|
const fieldsetRef = (0, import_react4.useRef)(null);
|
@@ -436,29 +516,41 @@ var RadioGroup = (props) => {
|
|
436
516
|
return null;
|
437
517
|
}
|
438
518
|
const radios = import_react4.Children.map(children, (child) => updateRadioElems(child));
|
439
|
-
return /* @__PURE__ */
|
440
|
-
ref: fieldsetRef
|
441
|
-
|
442
|
-
|
443
|
-
|
519
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("fieldset", {
|
520
|
+
ref: fieldsetRef,
|
521
|
+
children: [
|
522
|
+
legend && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("legend", {
|
523
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_visually_hidden.VisuallyHidden, {
|
524
|
+
children: legend
|
525
|
+
})
|
526
|
+
}),
|
527
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
528
|
+
...other,
|
529
|
+
children: radios
|
530
|
+
})
|
531
|
+
]
|
532
|
+
});
|
444
533
|
};
|
445
534
|
|
446
535
|
// src/Select.tsx
|
447
536
|
var import_clsx12 = __toESM(require("clsx"));
|
448
537
|
var import_FormInput3 = require("./styles/FormInput.css");
|
538
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
449
539
|
var Select = ({ className, children, testId, ...rest }) => {
|
450
540
|
const classes = (0, import_clsx12.default)("FormInput", "FormInput-select", className);
|
451
|
-
return /* @__PURE__ */
|
541
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("select", {
|
452
542
|
...rest,
|
453
543
|
className: classes,
|
454
|
-
"data-test-id": testId
|
455
|
-
|
544
|
+
"data-test-id": testId,
|
545
|
+
children
|
546
|
+
});
|
456
547
|
};
|
457
548
|
|
458
549
|
// src/TextArea.tsx
|
459
550
|
var import_clsx13 = __toESM(require("clsx"));
|
460
551
|
var import_react5 = require("react");
|
461
552
|
var import_FormInput4 = require("./styles/FormInput.css");
|
553
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
462
554
|
var TextArea = (0, import_react5.forwardRef)(({ className, ...props }, ref) => {
|
463
555
|
const onKeyDown = (e) => {
|
464
556
|
if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
|
@@ -468,7 +560,7 @@ var TextArea = (0, import_react5.forwardRef)(({ className, ...props }, ref) => {
|
|
468
560
|
e.nativeEvent.stopImmediatePropagation();
|
469
561
|
}
|
470
562
|
};
|
471
|
-
return /* @__PURE__ */
|
563
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", {
|
472
564
|
...props,
|
473
565
|
className: (0, import_clsx13.default)("FormInput", className),
|
474
566
|
ref,
|