@launchpad-ui/form 0.3.3 → 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/Select.d.ts +3 -1
- package/dist/Select.d.ts.map +1 -1
- package/dist/TextArea.d.ts.map +1 -1
- package/dist/index.es.js +288 -353
- package/dist/index.es.js.map +1 -7
- package/dist/index.js +314 -422
- 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,119 +326,112 @@ 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
|
-
|
432
|
-
|
433
|
-
|
371
|
+
const item = elem;
|
372
|
+
if ((item == null ? void 0 : item.type) && item.type === Radio) {
|
373
|
+
return cloneElement(item, {
|
374
|
+
...item.props,
|
434
375
|
name,
|
435
|
-
checked:
|
376
|
+
checked: item.props.value === value,
|
436
377
|
onChange,
|
437
|
-
disabled: typeof
|
378
|
+
disabled: typeof ((_a = item.props) == null ? void 0 : _a.disabled) !== "undefined" ? item.props.disabled : disabled
|
438
379
|
});
|
439
380
|
}
|
440
|
-
if (
|
441
|
-
return cloneElement(
|
442
|
-
...
|
381
|
+
if ((item == null ? void 0 : item.type) && item.type === Label) {
|
382
|
+
return cloneElement(item, {
|
383
|
+
...item.props,
|
443
384
|
onChange,
|
444
385
|
disabled
|
445
386
|
});
|
446
387
|
}
|
447
|
-
const elemChildren =
|
388
|
+
const elemChildren = (_b = item == null ? void 0 : item.props) == null ? void 0 : _b.children;
|
448
389
|
if (elemChildren) {
|
449
390
|
if (Array.isArray(elemChildren)) {
|
450
|
-
return cloneElement(
|
391
|
+
return cloneElement(item, {
|
451
392
|
children: Children.map(elemChildren, (elemChild) => updateRadioElems(elemChild))
|
452
393
|
});
|
453
394
|
}
|
454
|
-
return cloneElement(
|
395
|
+
return cloneElement(item, {
|
455
396
|
children: updateRadioElems(elemChildren)
|
456
397
|
});
|
457
398
|
}
|
458
|
-
if (
|
459
|
-
return
|
399
|
+
if ((item == null ? void 0 : item.type) && item.type !== Radio && item.type !== Label) {
|
400
|
+
return item;
|
460
401
|
}
|
461
402
|
return null;
|
462
403
|
}
|
463
404
|
const radios = Children.map(children, (child) => updateRadioElems(child));
|
464
|
-
return /* @__PURE__ */
|
405
|
+
return /* @__PURE__ */ jsxs("fieldset", {
|
465
406
|
ref: fieldsetRef,
|
466
|
-
children: [
|
467
|
-
|
468
|
-
children:
|
469
|
-
children: legend
|
470
|
-
})
|
471
|
-
}),
|
472
|
-
/* @__PURE__ */ jsx15("div", {
|
473
|
-
...other,
|
474
|
-
children: radios
|
407
|
+
children: [legend && /* @__PURE__ */ jsx("legend", {
|
408
|
+
children: /* @__PURE__ */ jsx(VisuallyHidden, {
|
409
|
+
children: legend
|
475
410
|
})
|
476
|
-
|
411
|
+
}), /* @__PURE__ */ jsx("div", {
|
412
|
+
...other,
|
413
|
+
children: radios
|
414
|
+
})]
|
477
415
|
});
|
478
416
|
};
|
479
|
-
|
480
|
-
|
481
|
-
|
482
|
-
|
483
|
-
|
484
|
-
|
485
|
-
const classes =
|
486
|
-
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", {
|
487
425
|
...rest,
|
488
426
|
className: classes,
|
489
427
|
"data-test-id": testId,
|
490
428
|
children
|
491
429
|
});
|
492
430
|
};
|
493
|
-
|
494
|
-
|
495
|
-
|
496
|
-
|
497
|
-
import "./styles/FormInput.css";
|
498
|
-
import { jsx as jsx17 } from "react/jsx-runtime";
|
499
|
-
var TextArea = forwardRef4(({ className, ...props }, ref) => {
|
431
|
+
const TextArea = forwardRef(({
|
432
|
+
className,
|
433
|
+
...props
|
434
|
+
}, ref) => {
|
500
435
|
const onKeyDown = (e) => {
|
501
436
|
if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
|
502
437
|
e.stopPropagation();
|
@@ -505,9 +440,9 @@ var TextArea = forwardRef4(({ className, ...props }, ref) => {
|
|
505
440
|
e.nativeEvent.stopImmediatePropagation();
|
506
441
|
}
|
507
442
|
};
|
508
|
-
return /* @__PURE__ */
|
443
|
+
return /* @__PURE__ */ jsx("textarea", {
|
509
444
|
...props,
|
510
|
-
className:
|
445
|
+
className: cx("FormInput", className),
|
511
446
|
ref,
|
512
447
|
"aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
|
513
448
|
onKeyDown
|