@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.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);
|
184
146
|
}
|
185
|
-
|
147
|
+
};
|
148
|
+
const handleBlur = (event) => {
|
149
|
+
const value2 = event.target.value || "";
|
150
|
+
setIsActive(value2.trim().length !== 0);
|
151
|
+
if (onBlur) {
|
152
|
+
onBlur(event);
|
153
|
+
}
|
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,119 +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
|
-
|
474
|
-
|
475
|
-
|
373
|
+
const item = elem;
|
374
|
+
if ((item == null ? void 0 : item.type) && item.type === Radio) {
|
375
|
+
return react.cloneElement(item, {
|
376
|
+
...item.props,
|
476
377
|
name,
|
477
|
-
checked:
|
378
|
+
checked: item.props.value === value,
|
478
379
|
onChange,
|
479
|
-
disabled: typeof
|
380
|
+
disabled: typeof ((_a = item.props) == null ? void 0 : _a.disabled) !== "undefined" ? item.props.disabled : disabled
|
480
381
|
});
|
481
382
|
}
|
482
|
-
if (
|
483
|
-
return
|
484
|
-
...
|
383
|
+
if ((item == null ? void 0 : item.type) && item.type === Label) {
|
384
|
+
return react.cloneElement(item, {
|
385
|
+
...item.props,
|
485
386
|
onChange,
|
486
387
|
disabled
|
487
388
|
});
|
488
389
|
}
|
489
|
-
const elemChildren =
|
390
|
+
const elemChildren = (_b = item == null ? void 0 : item.props) == null ? void 0 : _b.children;
|
490
391
|
if (elemChildren) {
|
491
392
|
if (Array.isArray(elemChildren)) {
|
492
|
-
return
|
493
|
-
children:
|
393
|
+
return react.cloneElement(item, {
|
394
|
+
children: react.Children.map(elemChildren, (elemChild) => updateRadioElems(elemChild))
|
494
395
|
});
|
495
396
|
}
|
496
|
-
return
|
397
|
+
return react.cloneElement(item, {
|
497
398
|
children: updateRadioElems(elemChildren)
|
498
399
|
});
|
499
400
|
}
|
500
|
-
if (
|
501
|
-
return
|
401
|
+
if ((item == null ? void 0 : item.type) && item.type !== Radio && item.type !== Label) {
|
402
|
+
return item;
|
502
403
|
}
|
503
404
|
return null;
|
504
405
|
}
|
505
|
-
const radios =
|
506
|
-
return /* @__PURE__ */
|
406
|
+
const radios = react.Children.map(children, (child) => updateRadioElems(child));
|
407
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", {
|
507
408
|
ref: fieldsetRef,
|
508
|
-
children: [
|
509
|
-
|
510
|
-
children:
|
511
|
-
children: legend
|
512
|
-
})
|
513
|
-
}),
|
514
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
515
|
-
...other,
|
516
|
-
children: radios
|
409
|
+
children: [legend && /* @__PURE__ */ jsxRuntime.jsx("legend", {
|
410
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(visuallyHidden.VisuallyHidden, {
|
411
|
+
children: legend
|
517
412
|
})
|
518
|
-
|
413
|
+
}), /* @__PURE__ */ jsxRuntime.jsx("div", {
|
414
|
+
...other,
|
415
|
+
children: radios
|
416
|
+
})]
|
519
417
|
});
|
520
418
|
};
|
521
|
-
|
522
|
-
|
523
|
-
|
524
|
-
|
525
|
-
|
526
|
-
|
527
|
-
const classes =
|
528
|
-
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", {
|
529
427
|
...rest,
|
530
428
|
className: classes,
|
531
429
|
"data-test-id": testId,
|
532
430
|
children
|
533
431
|
});
|
534
432
|
};
|
535
|
-
|
536
|
-
|
537
|
-
|
538
|
-
|
539
|
-
var import_FormInput4 = require("./styles/FormInput.css");
|
540
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
541
|
-
var TextArea = (0, import_react5.forwardRef)(({ className, ...props }, ref) => {
|
433
|
+
const TextArea = react.forwardRef(({
|
434
|
+
className,
|
435
|
+
...props
|
436
|
+
}, ref) => {
|
542
437
|
const onKeyDown = (e) => {
|
543
438
|
if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
|
544
439
|
e.stopPropagation();
|
@@ -547,33 +442,30 @@ var TextArea = (0, import_react5.forwardRef)(({ className, ...props }, ref) => {
|
|
547
442
|
e.nativeEvent.stopImmediatePropagation();
|
548
443
|
}
|
549
444
|
};
|
550
|
-
return /* @__PURE__ */
|
445
|
+
return /* @__PURE__ */ jsxRuntime.jsx("textarea", {
|
551
446
|
...props,
|
552
|
-
className:
|
447
|
+
className: classix.cx("FormInput", className),
|
553
448
|
ref,
|
554
449
|
"aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
|
555
450
|
onKeyDown
|
556
451
|
});
|
557
452
|
});
|
558
453
|
TextArea.displayName = "TextArea";
|
559
|
-
|
560
|
-
|
561
|
-
|
562
|
-
|
563
|
-
|
564
|
-
|
565
|
-
|
566
|
-
|
567
|
-
|
568
|
-
|
569
|
-
|
570
|
-
|
571
|
-
|
572
|
-
|
573
|
-
|
574
|
-
|
575
|
-
|
576
|
-
TextArea,
|
577
|
-
TextField
|
578
|
-
});
|
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;
|
579
471
|
//# sourceMappingURL=index.js.map
|