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