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