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