@launchpad-ui/form 0.2.9 → 0.3.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/dist/index.es.js +262 -172
- package/dist/index.es.js.map +2 -2
- package/dist/index.js +266 -173
- package/dist/index.js.map +2 -2
- package/dist/styles/styles.css.map +1 -1
- package/package.json +4 -4
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,48 +82,65 @@ 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
|
@@ -133,132 +156,156 @@ var import_FormInput = require("./styles/FormInput.css");
|
|
133
156
|
var createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
|
134
157
|
|
135
158
|
// src/TextField.tsx
|
136
|
-
var
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
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", {
|
154
197
|
...rest,
|
155
198
|
type,
|
156
|
-
className:
|
199
|
+
className: classes,
|
157
200
|
readOnly,
|
201
|
+
tabIndex,
|
158
202
|
ref,
|
159
203
|
"data-test-id": testId,
|
204
|
+
style: overrideWidth ? {
|
205
|
+
width: overrideWidth
|
206
|
+
} : void 0,
|
160
207
|
"aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
|
161
|
-
})
|
162
|
-
className: "FormInput-suffix",
|
163
|
-
htmlFor: rest.id
|
164
|
-
}, suffix));
|
208
|
+
});
|
165
209
|
}
|
166
|
-
|
167
|
-
...rest,
|
168
|
-
type,
|
169
|
-
className: classes,
|
170
|
-
readOnly,
|
171
|
-
tabIndex,
|
172
|
-
ref,
|
173
|
-
"data-test-id": testId,
|
174
|
-
style: overrideWidth ? {
|
175
|
-
width: overrideWidth
|
176
|
-
} : void 0,
|
177
|
-
"aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
|
178
|
-
});
|
179
|
-
});
|
210
|
+
);
|
180
211
|
TextField.displayName = "TextField";
|
181
212
|
|
182
213
|
// src/CompactTextField.tsx
|
183
214
|
var import_CompactTextField = require("./styles/CompactTextField.css");
|
184
215
|
var import_FormInput2 = require("./styles/FormInput.css");
|
185
|
-
var
|
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
|
-
|
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
|
+
);
|
221
262
|
CompactTextField.displayName = "CompactTextField";
|
222
263
|
|
223
264
|
// src/FieldError.tsx
|
224
265
|
var import_clsx5 = __toESM(require("clsx"));
|
225
266
|
var import_Form3 = require("./styles/Form.css");
|
267
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
226
268
|
var FieldError = ({ name, errorMessage, className }) => {
|
227
269
|
if (!errorMessage) {
|
228
270
|
return null;
|
229
271
|
}
|
230
|
-
return /* @__PURE__ */
|
272
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
|
231
273
|
className: (0, import_clsx5.default)("Form-fieldError", className),
|
232
274
|
"aria-live": "polite",
|
233
|
-
id: createFieldErrorId(name)
|
234
|
-
|
275
|
+
id: createFieldErrorId(name),
|
276
|
+
children: `Error - ${errorMessage}`
|
277
|
+
});
|
235
278
|
};
|
236
279
|
|
237
280
|
// src/FieldSet.tsx
|
238
281
|
var import_FieldSet = require("./styles/FieldSet.css");
|
282
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
239
283
|
var FieldSet = ({ children, testId }) => {
|
240
|
-
return /* @__PURE__ */
|
284
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("fieldset", {
|
241
285
|
className: "FieldSet",
|
242
|
-
"data-test-id": testId
|
243
|
-
|
286
|
+
"data-test-id": testId,
|
287
|
+
children
|
288
|
+
});
|
244
289
|
};
|
245
290
|
|
246
291
|
// src/Form.tsx
|
247
292
|
var import_clsx6 = __toESM(require("clsx"));
|
248
293
|
var import_Form4 = require("./styles/Form.css");
|
294
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
249
295
|
var Form = (props) => {
|
250
296
|
const { id, name, className, inline, children, ariaLabel, hasIncreasedErrorMargin, ...rest } = props;
|
251
297
|
const classes = (0, import_clsx6.default)("Form", className, {
|
252
298
|
"Form--inline": inline,
|
253
299
|
"Form--increasedErrorMargin": !!hasIncreasedErrorMargin
|
254
300
|
});
|
255
|
-
return /* @__PURE__ */
|
301
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("form", {
|
256
302
|
id,
|
257
303
|
name,
|
258
304
|
"aria-label": ariaLabel,
|
259
305
|
...rest,
|
260
|
-
className: classes
|
261
|
-
|
306
|
+
className: classes,
|
307
|
+
children
|
308
|
+
});
|
262
309
|
};
|
263
310
|
|
264
311
|
// src/FormField.tsx
|
@@ -267,31 +314,36 @@ var import_clsx9 = __toESM(require("clsx"));
|
|
267
314
|
// src/FormGroup.tsx
|
268
315
|
var import_clsx7 = __toESM(require("clsx"));
|
269
316
|
var import_Form5 = require("./styles/Form.css");
|
317
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
270
318
|
var FormGroup = (props) => {
|
271
319
|
const { className, name, ignoreValidation, isInvalid, children, testId, ...other } = props;
|
272
320
|
const classes = (0, import_clsx7.default)("Form-group", className, {
|
273
321
|
"is-invalid": !ignoreValidation && isInvalid
|
274
322
|
});
|
275
|
-
return /* @__PURE__ */
|
323
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
276
324
|
className: classes,
|
277
325
|
"data-test-id": testId,
|
278
|
-
...other
|
279
|
-
|
326
|
+
...other,
|
327
|
+
children
|
328
|
+
});
|
280
329
|
};
|
281
330
|
|
282
331
|
// src/FormHint.tsx
|
283
332
|
var import_clsx8 = __toESM(require("clsx"));
|
284
333
|
var import_FormHint = require("./styles/FormHint.css");
|
334
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
285
335
|
var FormHint = ({ className, children, ...rest }) => {
|
286
336
|
const classes = (0, import_clsx8.default)("Form-hint", className);
|
287
|
-
return /* @__PURE__ */
|
337
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
288
338
|
...rest,
|
289
|
-
className: classes
|
290
|
-
|
339
|
+
className: classes,
|
340
|
+
children
|
341
|
+
});
|
291
342
|
};
|
292
343
|
|
293
344
|
// src/FormField.tsx
|
294
345
|
var import_FormField = require("./styles/FormField.css");
|
346
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
295
347
|
var FormField = ({
|
296
348
|
isRequired,
|
297
349
|
label,
|
@@ -308,49 +360,68 @@ var FormField = ({
|
|
308
360
|
const handleBlur = () => {
|
309
361
|
onBlur && onBlur(name);
|
310
362
|
};
|
311
|
-
return /* @__PURE__ */
|
363
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FormGroup, {
|
312
364
|
className: (0, import_clsx9.default)("FormField", className),
|
313
365
|
name,
|
314
366
|
ignoreValidation,
|
315
367
|
isInvalid,
|
316
|
-
onBlur: handleBlur
|
317
|
-
|
318
|
-
|
319
|
-
|
320
|
-
|
321
|
-
|
322
|
-
|
323
|
-
|
324
|
-
|
325
|
-
|
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
|
+
});
|
326
389
|
};
|
327
390
|
|
328
391
|
// src/IconField.tsx
|
329
392
|
var import_icons = require("@launchpad-ui/icons");
|
330
393
|
var import_IconField = require("./styles/IconField.css");
|
394
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
331
395
|
var IconField = ({ icon, children }) => {
|
332
396
|
const Icon = icon;
|
333
|
-
return /* @__PURE__ */
|
334
|
-
className: "IconField"
|
335
|
-
|
336
|
-
|
337
|
-
|
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
|
+
});
|
338
406
|
};
|
339
407
|
|
340
408
|
// src/InputGroup.tsx
|
341
409
|
var import_clsx10 = __toESM(require("clsx"));
|
342
410
|
var import_InputGroup = require("./styles/InputGroup.css");
|
411
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
343
412
|
var InputGroup = ({ className, children, ...other }) => {
|
344
413
|
const classes = (0, import_clsx10.default)("InputGroup", className);
|
345
|
-
return /* @__PURE__ */
|
414
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
346
415
|
...other,
|
347
|
-
className: classes
|
348
|
-
|
416
|
+
className: classes,
|
417
|
+
children
|
418
|
+
});
|
349
419
|
};
|
350
420
|
|
351
421
|
// src/Radio.tsx
|
352
422
|
var import_clsx11 = __toESM(require("clsx"));
|
353
423
|
var import_Form6 = require("./styles/Form.css");
|
424
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
354
425
|
var Radio = ({
|
355
426
|
"aria-label": ariaLabel,
|
356
427
|
"aria-labelledby": ariaLabelledby,
|
@@ -368,33 +439,43 @@ var Radio = ({
|
|
368
439
|
}) => {
|
369
440
|
const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
|
370
441
|
if (!children && !hasAriaLabel) {
|
371
|
-
console.warn(
|
442
|
+
console.warn(
|
443
|
+
"If you do not provide children, you must specify an aria-label for accessibility"
|
444
|
+
);
|
372
445
|
}
|
373
|
-
return /* @__PURE__ */
|
374
|
-
|
375
|
-
|
376
|
-
|
377
|
-
|
378
|
-
|
379
|
-
|
380
|
-
|
381
|
-
|
382
|
-
|
383
|
-
|
384
|
-
|
385
|
-
|
386
|
-
|
387
|
-
|
388
|
-
|
389
|
-
|
390
|
-
|
391
|
-
|
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
|
+
});
|
392
472
|
};
|
393
473
|
|
394
474
|
// src/RadioGroup.tsx
|
395
475
|
var import_visually_hidden = require("@react-aria/visually-hidden");
|
396
476
|
var import_react4 = require("react");
|
397
477
|
var import_Form7 = require("./styles/Form.css");
|
478
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
398
479
|
var RadioGroup = (props) => {
|
399
480
|
const { name, value, onChange, children, disabled, legend, ...other } = props;
|
400
481
|
const fieldsetRef = (0, import_react4.useRef)(null);
|
@@ -435,29 +516,41 @@ var RadioGroup = (props) => {
|
|
435
516
|
return null;
|
436
517
|
}
|
437
518
|
const radios = import_react4.Children.map(children, (child) => updateRadioElems(child));
|
438
|
-
return /* @__PURE__ */
|
439
|
-
ref: fieldsetRef
|
440
|
-
|
441
|
-
|
442
|
-
|
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
|
+
});
|
443
533
|
};
|
444
534
|
|
445
535
|
// src/Select.tsx
|
446
536
|
var import_clsx12 = __toESM(require("clsx"));
|
447
537
|
var import_FormInput3 = require("./styles/FormInput.css");
|
538
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
448
539
|
var Select = ({ className, children, testId, ...rest }) => {
|
449
540
|
const classes = (0, import_clsx12.default)("FormInput", "FormInput-select", className);
|
450
|
-
return /* @__PURE__ */
|
541
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("select", {
|
451
542
|
...rest,
|
452
543
|
className: classes,
|
453
|
-
"data-test-id": testId
|
454
|
-
|
544
|
+
"data-test-id": testId,
|
545
|
+
children
|
546
|
+
});
|
455
547
|
};
|
456
548
|
|
457
549
|
// src/TextArea.tsx
|
458
550
|
var import_clsx13 = __toESM(require("clsx"));
|
459
551
|
var import_react5 = require("react");
|
460
552
|
var import_FormInput4 = require("./styles/FormInput.css");
|
553
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
461
554
|
var TextArea = (0, import_react5.forwardRef)(({ className, ...props }, ref) => {
|
462
555
|
const onKeyDown = (e) => {
|
463
556
|
if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
|
@@ -467,7 +560,7 @@ var TextArea = (0, import_react5.forwardRef)(({ className, ...props }, ref) => {
|
|
467
560
|
e.nativeEvent.stopImmediatePropagation();
|
468
561
|
}
|
469
562
|
};
|
470
|
-
return /* @__PURE__ */
|
563
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", {
|
471
564
|
...props,
|
472
565
|
className: (0, import_clsx13.default)("FormInput", className),
|
473
566
|
ref,
|