@launchpad-ui/form 0.3.5 → 0.4.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/Checkbox.d.ts +3 -3
- package/dist/Checkbox.d.ts.map +1 -1
- package/dist/Label.d.ts +3 -3
- package/dist/Label.d.ts.map +1 -1
- package/dist/Radio.d.ts +4 -4
- package/dist/Radio.d.ts.map +1 -1
- package/dist/RadioGroup.d.ts +3 -3
- package/dist/RadioGroup.d.ts.map +1 -1
- package/dist/TextArea.d.ts.map +1 -1
- package/dist/index.es.js +279 -345
- package/dist/index.es.js.map +1 -7
- package/dist/index.js +309 -418
- package/dist/index.js.map +1 -7
- package/dist/style.css +409 -0
- package/package.json +4 -4
- package/dist/styles/CompactTextField.css +0 -2
- package/dist/styles/CompactTextField.css.map +0 -1
- package/dist/styles/FieldSet.css +0 -2
- package/dist/styles/FieldSet.css.map +0 -1
- package/dist/styles/Form.css +0 -2
- package/dist/styles/Form.css.map +0 -1
- package/dist/styles/FormField.css +0 -2
- package/dist/styles/FormField.css.map +0 -1
- package/dist/styles/FormHint.css +0 -2
- package/dist/styles/FormHint.css.map +0 -1
- package/dist/styles/FormInput.css +0 -2
- package/dist/styles/FormInput.css.map +0 -1
- package/dist/styles/IconField.css +0 -2
- package/dist/styles/IconField.css.map +0 -1
- package/dist/styles/InputGroup.css +0 -2
- package/dist/styles/InputGroup.css.map +0 -1
- package/dist/styles/RequiredAsterisk.css +0 -2
- package/dist/styles/RequiredAsterisk.css.map +0 -1
- package/dist/styles/styles.css +0 -2
- package/dist/styles/styles.css.map +0 -1
package/dist/index.es.js
CHANGED
@@ -1,14 +1,15 @@
|
|
1
|
-
|
2
|
-
import { forwardRef } from "react";
|
3
|
-
|
4
|
-
// src/Label.tsx
|
5
|
-
import { cx as cx2 } from "classix";
|
6
|
-
|
7
|
-
// src/RequiredAsterisk.tsx
|
1
|
+
import './style.css';
|
2
|
+
import { forwardRef, useState, useRef, Children, isValidElement, cloneElement } from "react";
|
8
3
|
import { cx } from "classix";
|
9
|
-
import "
|
10
|
-
import {
|
11
|
-
|
4
|
+
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
5
|
+
import { IconSize } from "@launchpad-ui/icons";
|
6
|
+
import { VisuallyHidden } from "@react-aria/visually-hidden";
|
7
|
+
const RequiredAsterisk$1 = "";
|
8
|
+
const RequiredAsterisk = ({
|
9
|
+
className,
|
10
|
+
testId,
|
11
|
+
...rest
|
12
|
+
}) => {
|
12
13
|
const classes = cx("RequiredAsterisk");
|
13
14
|
return /* @__PURE__ */ jsx("span", {
|
14
15
|
className: classes,
|
@@ -17,11 +18,8 @@ var RequiredAsterisk = ({ className, testId, ...rest }) => {
|
|
17
18
|
children: "*"
|
18
19
|
});
|
19
20
|
};
|
20
|
-
|
21
|
-
|
22
|
-
import "./styles/Form.css";
|
23
|
-
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
|
24
|
-
var Label = ({
|
21
|
+
const Form$1 = "";
|
22
|
+
const Label = ({
|
25
23
|
htmlFor,
|
26
24
|
disabled,
|
27
25
|
className,
|
@@ -30,222 +28,186 @@ var Label = ({
|
|
30
28
|
optional = false,
|
31
29
|
...other
|
32
30
|
}) => {
|
33
|
-
const classes =
|
31
|
+
const classes = cx("Form-label", className, disabled && "Form-label--disabled");
|
34
32
|
return /* @__PURE__ */ jsxs("label", {
|
35
33
|
...other,
|
36
34
|
className: classes,
|
37
35
|
htmlFor,
|
38
|
-
children: [
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
children: "(optional)"
|
43
|
-
}),
|
44
|
-
required && !optional && /* @__PURE__ */ jsx2(RequiredAsterisk, {})
|
45
|
-
]
|
36
|
+
children: [children, optional && !required && /* @__PURE__ */ jsx("small", {
|
37
|
+
className: "Form-labelOptional",
|
38
|
+
children: "(optional)"
|
39
|
+
}), required && !optional && /* @__PURE__ */ jsx(RequiredAsterisk, {})]
|
46
40
|
});
|
47
41
|
};
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
...other
|
62
|
-
}, ref) => {
|
63
|
-
const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
|
64
|
-
if (!children && !hasAriaLabel) {
|
65
|
-
console.warn(
|
66
|
-
"If you do not provide children, you must specify an aria-label for accessibility"
|
67
|
-
);
|
68
|
-
}
|
69
|
-
return /* @__PURE__ */ jsxs2(Label, {
|
70
|
-
className: labelClassName,
|
71
|
-
children: [
|
72
|
-
/* @__PURE__ */ jsx3("input", {
|
73
|
-
...other,
|
74
|
-
ref,
|
75
|
-
checked,
|
76
|
-
"aria-checked": checked ? "true" : "false",
|
77
|
-
"aria-label": ariaLabel,
|
78
|
-
"aria-labelledby": ariaLabelledby,
|
79
|
-
className: "Form-checkbox",
|
80
|
-
disabled,
|
81
|
-
"data-test-id": testId,
|
82
|
-
type: "checkbox"
|
83
|
-
}),
|
84
|
-
" ",
|
85
|
-
disabled ? /* @__PURE__ */ jsx3("span", {
|
86
|
-
className: "Form-label--disabled",
|
87
|
-
children
|
88
|
-
}) : children
|
89
|
-
]
|
90
|
-
});
|
42
|
+
const Checkbox = forwardRef(({
|
43
|
+
"aria-label": ariaLabel,
|
44
|
+
"aria-labelledby": ariaLabelledby,
|
45
|
+
children,
|
46
|
+
disabled,
|
47
|
+
testId,
|
48
|
+
checked,
|
49
|
+
labelClassName,
|
50
|
+
...other
|
51
|
+
}, ref) => {
|
52
|
+
const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
|
53
|
+
if (!children && !hasAriaLabel) {
|
54
|
+
console.warn("If you do not provide children, you must specify an aria-label for accessibility");
|
91
55
|
}
|
92
|
-
|
56
|
+
return /* @__PURE__ */ jsxs(Label, {
|
57
|
+
className: labelClassName,
|
58
|
+
children: [/* @__PURE__ */ jsx("input", {
|
59
|
+
...other,
|
60
|
+
ref,
|
61
|
+
checked,
|
62
|
+
"aria-checked": checked ? "true" : "false",
|
63
|
+
"aria-label": ariaLabel,
|
64
|
+
"aria-labelledby": ariaLabelledby,
|
65
|
+
className: "Form-checkbox",
|
66
|
+
disabled,
|
67
|
+
"data-test-id": testId,
|
68
|
+
type: "checkbox"
|
69
|
+
}), " ", disabled ? /* @__PURE__ */ jsx("span", {
|
70
|
+
className: "Form-label--disabled",
|
71
|
+
children
|
72
|
+
}) : children]
|
73
|
+
});
|
74
|
+
});
|
93
75
|
Checkbox.displayName = "Checkbox";
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
76
|
+
const FormInput = "";
|
77
|
+
const createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
|
78
|
+
const TextField = forwardRef(({
|
79
|
+
className,
|
80
|
+
type = "text",
|
81
|
+
tiny = false,
|
82
|
+
readOnly,
|
83
|
+
tabIndex = 0,
|
84
|
+
testId,
|
85
|
+
suffix,
|
86
|
+
overrideWidth,
|
87
|
+
...rest
|
88
|
+
}, ref) => {
|
89
|
+
const classes = overrideWidth ? className : cx("FormInput", `FormInput-${type}`, className, tiny && "FormInput--tiny");
|
90
|
+
if (suffix) {
|
91
|
+
return /* @__PURE__ */ jsxs("div", {
|
92
|
+
className: "FormInput-suffixContainer",
|
93
|
+
children: [/* @__PURE__ */ jsx("input", {
|
94
|
+
...rest,
|
95
|
+
type,
|
96
|
+
className: cx(classes, "FormInput-suffix"),
|
97
|
+
readOnly,
|
98
|
+
ref,
|
99
|
+
"data-test-id": testId,
|
100
|
+
"aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
|
101
|
+
}), /* @__PURE__ */ jsx("label", {
|
102
|
+
className: "FormInput-suffix",
|
103
|
+
htmlFor: rest.id,
|
104
|
+
children: suffix
|
105
|
+
})]
|
106
|
+
});
|
107
|
+
}
|
108
|
+
return /* @__PURE__ */ jsx("input", {
|
109
|
+
...rest,
|
110
|
+
type,
|
111
|
+
className: classes,
|
114
112
|
readOnly,
|
115
|
-
tabIndex
|
116
|
-
|
117
|
-
|
118
|
-
overrideWidth
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
113
|
+
tabIndex,
|
114
|
+
ref,
|
115
|
+
"data-test-id": testId,
|
116
|
+
style: overrideWidth ? {
|
117
|
+
width: overrideWidth
|
118
|
+
} : void 0,
|
119
|
+
"aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
|
120
|
+
});
|
121
|
+
});
|
122
|
+
TextField.displayName = "TextField";
|
123
|
+
const CompactTextField$1 = "";
|
124
|
+
const CompactTextField = forwardRef(({
|
125
|
+
className,
|
126
|
+
id,
|
127
|
+
name,
|
128
|
+
label,
|
129
|
+
type,
|
130
|
+
needsErrorFeedback,
|
131
|
+
value,
|
132
|
+
onFocus,
|
133
|
+
onBlur,
|
134
|
+
...rest
|
135
|
+
}, ref) => {
|
136
|
+
const [isActive, setIsActive] = useState((typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0);
|
137
|
+
const isActiveState = isActive || needsErrorFeedback;
|
138
|
+
const classes = cx("CompactTextField", className, isActiveState && "is-active");
|
139
|
+
const placeholder = isActiveState ? "" : label;
|
140
|
+
const handleFocus = (event) => {
|
141
|
+
setIsActive(true);
|
142
|
+
if (onFocus) {
|
143
|
+
onFocus(event);
|
144
|
+
}
|
145
|
+
};
|
146
|
+
const handleBlur = (event) => {
|
147
|
+
const value2 = event.target.value || "";
|
148
|
+
setIsActive(value2.trim().length !== 0);
|
149
|
+
if (onBlur) {
|
150
|
+
onBlur(event);
|
142
151
|
}
|
143
|
-
|
152
|
+
};
|
153
|
+
return /* @__PURE__ */ jsxs("div", {
|
154
|
+
className: classes,
|
155
|
+
children: [/* @__PURE__ */ jsx(Label, {
|
156
|
+
htmlFor: id,
|
157
|
+
children: label
|
158
|
+
}), /* @__PURE__ */ jsx(TextField, {
|
144
159
|
...rest,
|
160
|
+
id,
|
161
|
+
name,
|
145
162
|
type,
|
146
|
-
|
147
|
-
|
148
|
-
tabIndex,
|
163
|
+
placeholder,
|
164
|
+
value,
|
149
165
|
ref,
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
});
|
156
|
-
}
|
157
|
-
);
|
158
|
-
TextField.displayName = "TextField";
|
159
|
-
|
160
|
-
// src/CompactTextField.tsx
|
161
|
-
import "./styles/CompactTextField.css";
|
162
|
-
import "./styles/FormInput.css";
|
163
|
-
import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
|
164
|
-
var CompactTextField = forwardRef3(
|
165
|
-
({ className, id, name, label, type, needsErrorFeedback, value, onFocus, onBlur, ...rest }, ref) => {
|
166
|
-
const [isActive, setIsActive] = useState(
|
167
|
-
(typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0
|
168
|
-
);
|
169
|
-
const isActiveState = isActive || needsErrorFeedback;
|
170
|
-
const classes = cx4("CompactTextField", className, isActiveState && "is-active");
|
171
|
-
const placeholder = isActiveState ? "" : label;
|
172
|
-
const handleFocus = (event) => {
|
173
|
-
setIsActive(true);
|
174
|
-
if (onFocus) {
|
175
|
-
onFocus(event);
|
176
|
-
}
|
177
|
-
};
|
178
|
-
const handleBlur = (event) => {
|
179
|
-
const value2 = event.target.value || "";
|
180
|
-
setIsActive(value2.trim().length !== 0);
|
181
|
-
if (onBlur) {
|
182
|
-
onBlur(event);
|
183
|
-
}
|
184
|
-
};
|
185
|
-
return /* @__PURE__ */ jsxs4("div", {
|
186
|
-
className: classes,
|
187
|
-
children: [
|
188
|
-
/* @__PURE__ */ jsx5(Label, {
|
189
|
-
htmlFor: id,
|
190
|
-
children: label
|
191
|
-
}),
|
192
|
-
/* @__PURE__ */ jsx5(TextField, {
|
193
|
-
...rest,
|
194
|
-
id,
|
195
|
-
name,
|
196
|
-
type,
|
197
|
-
placeholder,
|
198
|
-
value,
|
199
|
-
ref,
|
200
|
-
onFocus: handleFocus,
|
201
|
-
onBlur: handleBlur
|
202
|
-
})
|
203
|
-
]
|
204
|
-
});
|
205
|
-
}
|
206
|
-
);
|
166
|
+
onFocus: handleFocus,
|
167
|
+
onBlur: handleBlur
|
168
|
+
})]
|
169
|
+
});
|
170
|
+
});
|
207
171
|
CompactTextField.displayName = "CompactTextField";
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
var FieldError = ({ name, errorMessage, className }) => {
|
172
|
+
const FieldError = ({
|
173
|
+
name,
|
174
|
+
errorMessage,
|
175
|
+
className
|
176
|
+
}) => {
|
214
177
|
if (!errorMessage) {
|
215
178
|
return null;
|
216
179
|
}
|
217
|
-
return /* @__PURE__ */
|
218
|
-
className:
|
180
|
+
return /* @__PURE__ */ jsx("span", {
|
181
|
+
className: cx("Form-fieldError", className),
|
219
182
|
"aria-live": "polite",
|
220
183
|
id: createFieldErrorId(name),
|
221
184
|
children: `Error - ${errorMessage}`
|
222
185
|
});
|
223
186
|
};
|
224
|
-
|
225
|
-
|
226
|
-
|
227
|
-
|
228
|
-
|
229
|
-
return /* @__PURE__ */
|
187
|
+
const FieldSet$1 = "";
|
188
|
+
const FieldSet = ({
|
189
|
+
children,
|
190
|
+
testId
|
191
|
+
}) => {
|
192
|
+
return /* @__PURE__ */ jsx("fieldset", {
|
230
193
|
className: "FieldSet",
|
231
194
|
"data-test-id": testId,
|
232
195
|
children
|
233
196
|
});
|
234
197
|
};
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
|
239
|
-
import { jsx as jsx8 } from "react/jsx-runtime";
|
240
|
-
var Form = (props) => {
|
241
|
-
const { id, name, className, inline, children, ariaLabel, hasIncreasedErrorMargin, ...rest } = props;
|
242
|
-
const classes = cx6(
|
243
|
-
"Form",
|
198
|
+
const Form = (props) => {
|
199
|
+
const {
|
200
|
+
id,
|
201
|
+
name,
|
244
202
|
className,
|
245
|
-
inline
|
246
|
-
|
247
|
-
|
248
|
-
|
203
|
+
inline,
|
204
|
+
children,
|
205
|
+
ariaLabel,
|
206
|
+
hasIncreasedErrorMargin,
|
207
|
+
...rest
|
208
|
+
} = props;
|
209
|
+
const classes = cx("Form", className, inline && "Form--inline", !!hasIncreasedErrorMargin && "Form--increasedErrorMargin");
|
210
|
+
return /* @__PURE__ */ jsx("form", {
|
249
211
|
id,
|
250
212
|
name,
|
251
213
|
"aria-label": ariaLabel,
|
@@ -254,42 +216,39 @@ var Form = (props) => {
|
|
254
216
|
children
|
255
217
|
});
|
256
218
|
};
|
257
|
-
|
258
|
-
|
259
|
-
|
260
|
-
|
261
|
-
|
262
|
-
|
263
|
-
|
264
|
-
|
265
|
-
|
266
|
-
|
267
|
-
const classes =
|
268
|
-
return /* @__PURE__ */
|
219
|
+
const FormGroup = (props) => {
|
220
|
+
const {
|
221
|
+
className,
|
222
|
+
name,
|
223
|
+
ignoreValidation,
|
224
|
+
isInvalid,
|
225
|
+
children,
|
226
|
+
testId,
|
227
|
+
...other
|
228
|
+
} = props;
|
229
|
+
const classes = cx("Form-group", className, !ignoreValidation && isInvalid && "is-invalid");
|
230
|
+
return /* @__PURE__ */ jsx("div", {
|
269
231
|
className: classes,
|
270
232
|
"data-test-id": testId,
|
271
233
|
...other,
|
272
234
|
children
|
273
235
|
});
|
274
236
|
};
|
275
|
-
|
276
|
-
|
277
|
-
|
278
|
-
|
279
|
-
|
280
|
-
|
281
|
-
const classes =
|
282
|
-
return /* @__PURE__ */
|
237
|
+
const FormHint$1 = "";
|
238
|
+
const FormHint = ({
|
239
|
+
className,
|
240
|
+
children,
|
241
|
+
...rest
|
242
|
+
}) => {
|
243
|
+
const classes = cx("Form-hint", className);
|
244
|
+
return /* @__PURE__ */ jsx("div", {
|
283
245
|
...rest,
|
284
246
|
className: classes,
|
285
247
|
children
|
286
248
|
});
|
287
249
|
};
|
288
|
-
|
289
|
-
|
290
|
-
import "./styles/FormField.css";
|
291
|
-
import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
|
292
|
-
var FormField = ({
|
250
|
+
const FormField$1 = "";
|
251
|
+
const FormField = ({
|
293
252
|
isRequired,
|
294
253
|
label,
|
295
254
|
name,
|
@@ -305,69 +264,52 @@ var FormField = ({
|
|
305
264
|
const handleBlur = () => {
|
306
265
|
onBlur && onBlur(name);
|
307
266
|
};
|
308
|
-
return /* @__PURE__ */
|
309
|
-
className:
|
267
|
+
return /* @__PURE__ */ jsxs(FormGroup, {
|
268
|
+
className: cx("FormField", className),
|
310
269
|
name,
|
311
270
|
ignoreValidation,
|
312
271
|
isInvalid,
|
313
272
|
onBlur: handleBlur,
|
314
|
-
children: [
|
315
|
-
|
316
|
-
|
317
|
-
|
318
|
-
|
319
|
-
|
320
|
-
|
321
|
-
|
322
|
-
|
323
|
-
|
324
|
-
|
325
|
-
}),
|
326
|
-
children,
|
327
|
-
/* @__PURE__ */ jsx11(FieldError, {
|
328
|
-
className: "FormField-errorMessage",
|
329
|
-
name,
|
330
|
-
errorMessage
|
331
|
-
})
|
332
|
-
]
|
273
|
+
children: [label && /* @__PURE__ */ jsxs("label", {
|
274
|
+
htmlFor,
|
275
|
+
children: [label, isRequired && /* @__PURE__ */ jsx(RequiredAsterisk, {})]
|
276
|
+
}), hint && /* @__PURE__ */ jsx(FormHint, {
|
277
|
+
className: "FormField-hint",
|
278
|
+
children: hint
|
279
|
+
}), children, /* @__PURE__ */ jsx(FieldError, {
|
280
|
+
className: "FormField-errorMessage",
|
281
|
+
name,
|
282
|
+
errorMessage
|
283
|
+
})]
|
333
284
|
});
|
334
285
|
};
|
335
|
-
|
336
|
-
|
337
|
-
|
338
|
-
|
339
|
-
|
340
|
-
var IconField = ({ icon, children }) => {
|
286
|
+
const IconField$1 = "";
|
287
|
+
const IconField = ({
|
288
|
+
icon,
|
289
|
+
children
|
290
|
+
}) => {
|
341
291
|
const Icon = icon;
|
342
|
-
return /* @__PURE__ */
|
292
|
+
return /* @__PURE__ */ jsxs("div", {
|
343
293
|
className: "IconField",
|
344
|
-
children: [
|
345
|
-
|
346
|
-
|
347
|
-
size: IconSize.SMALL
|
348
|
-
})
|
349
|
-
]
|
294
|
+
children: [children, /* @__PURE__ */ jsx(Icon, {
|
295
|
+
size: IconSize.SMALL
|
296
|
+
})]
|
350
297
|
});
|
351
298
|
};
|
352
|
-
|
353
|
-
|
354
|
-
|
355
|
-
|
356
|
-
|
357
|
-
|
358
|
-
const classes =
|
359
|
-
return /* @__PURE__ */
|
299
|
+
const InputGroup$1 = "";
|
300
|
+
const InputGroup = ({
|
301
|
+
className,
|
302
|
+
children,
|
303
|
+
...other
|
304
|
+
}) => {
|
305
|
+
const classes = cx("InputGroup", className);
|
306
|
+
return /* @__PURE__ */ jsx("div", {
|
360
307
|
...other,
|
361
308
|
className: classes,
|
362
309
|
children
|
363
310
|
});
|
364
311
|
};
|
365
|
-
|
366
|
-
// src/Radio.tsx
|
367
|
-
import { cx as cx11 } from "classix";
|
368
|
-
import "./styles/Form.css";
|
369
|
-
import { Fragment, jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
|
370
|
-
var Radio = ({
|
312
|
+
const Radio = ({
|
371
313
|
"aria-label": ariaLabel,
|
372
314
|
"aria-labelledby": ariaLabelledby,
|
373
315
|
checked = false,
|
@@ -384,68 +326,66 @@ var Radio = ({
|
|
384
326
|
}) => {
|
385
327
|
const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
|
386
328
|
if (!children && !hasAriaLabel) {
|
387
|
-
console.warn(
|
388
|
-
"If you do not provide children, you must specify an aria-label for accessibility"
|
389
|
-
);
|
329
|
+
console.warn("If you do not provide children, you must specify an aria-label for accessibility");
|
390
330
|
}
|
391
|
-
return /* @__PURE__ */
|
392
|
-
children: [
|
393
|
-
|
394
|
-
|
395
|
-
|
396
|
-
|
397
|
-
|
398
|
-
|
399
|
-
|
400
|
-
|
401
|
-
|
402
|
-
|
403
|
-
|
404
|
-
|
405
|
-
|
406
|
-
|
407
|
-
|
408
|
-
|
409
|
-
|
410
|
-
children
|
411
|
-
|
412
|
-
|
413
|
-
}) : children
|
414
|
-
})
|
415
|
-
]
|
331
|
+
return /* @__PURE__ */ jsxs(Fragment, {
|
332
|
+
children: [/* @__PURE__ */ jsx("input", {
|
333
|
+
"aria-label": ariaLabel,
|
334
|
+
"aria-labelledby": ariaLabelledby,
|
335
|
+
className: cx("Form-radio", className),
|
336
|
+
checked,
|
337
|
+
disabled,
|
338
|
+
id,
|
339
|
+
name,
|
340
|
+
onChange,
|
341
|
+
type: "radio",
|
342
|
+
value,
|
343
|
+
...props
|
344
|
+
}), /* @__PURE__ */ jsx(Label, {
|
345
|
+
className: labelClassName,
|
346
|
+
htmlFor: id,
|
347
|
+
style: labelStyle,
|
348
|
+
children: disabled ? /* @__PURE__ */ jsx("span", {
|
349
|
+
className: "Form-label--disabled",
|
350
|
+
children
|
351
|
+
}) : children
|
352
|
+
})]
|
416
353
|
});
|
417
354
|
};
|
418
|
-
|
419
|
-
|
420
|
-
|
421
|
-
|
422
|
-
|
423
|
-
|
424
|
-
|
425
|
-
|
355
|
+
const RadioGroup = (props) => {
|
356
|
+
const {
|
357
|
+
name,
|
358
|
+
value,
|
359
|
+
onChange,
|
360
|
+
children,
|
361
|
+
disabled,
|
362
|
+
legend,
|
363
|
+
...other
|
364
|
+
} = props;
|
426
365
|
const fieldsetRef = useRef(null);
|
427
366
|
function updateRadioElems(elem) {
|
367
|
+
var _a, _b;
|
428
368
|
if (!isValidElement(elem)) {
|
429
369
|
return elem;
|
430
370
|
}
|
431
371
|
const item = elem;
|
432
|
-
if (item
|
372
|
+
if ((item == null ? void 0 : item.type) && item.type === Radio) {
|
433
373
|
return cloneElement(item, {
|
434
374
|
...item.props,
|
435
375
|
name,
|
436
376
|
checked: item.props.value === value,
|
437
377
|
onChange,
|
438
|
-
disabled: typeof item.props
|
378
|
+
disabled: typeof ((_a = item.props) == null ? void 0 : _a.disabled) !== "undefined" ? item.props.disabled : disabled
|
439
379
|
});
|
440
380
|
}
|
441
|
-
if (item
|
381
|
+
if ((item == null ? void 0 : item.type) && item.type === Label) {
|
442
382
|
return cloneElement(item, {
|
443
383
|
...item.props,
|
444
384
|
onChange,
|
445
385
|
disabled
|
446
386
|
});
|
447
387
|
}
|
448
|
-
const elemChildren = item
|
388
|
+
const elemChildren = (_b = item == null ? void 0 : item.props) == null ? void 0 : _b.children;
|
449
389
|
if (elemChildren) {
|
450
390
|
if (Array.isArray(elemChildren)) {
|
451
391
|
return cloneElement(item, {
|
@@ -456,48 +396,42 @@ var RadioGroup = (props) => {
|
|
456
396
|
children: updateRadioElems(elemChildren)
|
457
397
|
});
|
458
398
|
}
|
459
|
-
if (item
|
399
|
+
if ((item == null ? void 0 : item.type) && item.type !== Radio && item.type !== Label) {
|
460
400
|
return item;
|
461
401
|
}
|
462
402
|
return null;
|
463
403
|
}
|
464
404
|
const radios = Children.map(children, (child) => updateRadioElems(child));
|
465
|
-
return /* @__PURE__ */
|
405
|
+
return /* @__PURE__ */ jsxs("fieldset", {
|
466
406
|
ref: fieldsetRef,
|
467
|
-
children: [
|
468
|
-
|
469
|
-
children:
|
470
|
-
children: legend
|
471
|
-
})
|
472
|
-
}),
|
473
|
-
/* @__PURE__ */ jsx15("div", {
|
474
|
-
...other,
|
475
|
-
children: radios
|
407
|
+
children: [legend && /* @__PURE__ */ jsx("legend", {
|
408
|
+
children: /* @__PURE__ */ jsx(VisuallyHidden, {
|
409
|
+
children: legend
|
476
410
|
})
|
477
|
-
|
411
|
+
}), /* @__PURE__ */ jsx("div", {
|
412
|
+
...other,
|
413
|
+
children: radios
|
414
|
+
})]
|
478
415
|
});
|
479
416
|
};
|
480
|
-
|
481
|
-
|
482
|
-
|
483
|
-
|
484
|
-
|
485
|
-
|
486
|
-
const classes =
|
487
|
-
return /* @__PURE__ */
|
417
|
+
const Select = ({
|
418
|
+
className,
|
419
|
+
children,
|
420
|
+
testId,
|
421
|
+
...rest
|
422
|
+
}) => {
|
423
|
+
const classes = cx("FormInput", "FormInput-select", className);
|
424
|
+
return /* @__PURE__ */ jsx("select", {
|
488
425
|
...rest,
|
489
426
|
className: classes,
|
490
427
|
"data-test-id": testId,
|
491
428
|
children
|
492
429
|
});
|
493
430
|
};
|
494
|
-
|
495
|
-
|
496
|
-
|
497
|
-
|
498
|
-
import "./styles/FormInput.css";
|
499
|
-
import { jsx as jsx17 } from "react/jsx-runtime";
|
500
|
-
var TextArea = forwardRef4(({ className, ...props }, ref) => {
|
431
|
+
const TextArea = forwardRef(({
|
432
|
+
className,
|
433
|
+
...props
|
434
|
+
}, ref) => {
|
501
435
|
const onKeyDown = (e) => {
|
502
436
|
if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
|
503
437
|
e.stopPropagation();
|
@@ -506,9 +440,9 @@ var TextArea = forwardRef4(({ className, ...props }, ref) => {
|
|
506
440
|
e.nativeEvent.stopImmediatePropagation();
|
507
441
|
}
|
508
442
|
};
|
509
|
-
return /* @__PURE__ */
|
443
|
+
return /* @__PURE__ */ jsx("textarea", {
|
510
444
|
...props,
|
511
|
-
className:
|
445
|
+
className: cx("FormInput", className),
|
512
446
|
ref,
|
513
447
|
"aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
|
514
448
|
onKeyDown
|