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