@launchpad-ui/form 0.6.27 → 0.6.28
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/index.es.js +230 -253
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +231 -254
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
package/dist/index.es.js
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
import './style.css';
|
2
|
+
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
2
3
|
import { forwardRef, useState, useRef, Children, isValidElement, cloneElement } from "react";
|
3
4
|
import { cx } from "classix";
|
4
|
-
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
5
5
|
import { VisuallyHidden } from "@react-aria/visually-hidden";
|
6
6
|
const formGroup = "_formGroup_1qrlg_1";
|
7
7
|
const formIncreasedErrorMargin = "_formIncreasedErrorMargin_1qrlg_9";
|
@@ -67,12 +67,7 @@ const RequiredAsterisk = ({
|
|
67
67
|
...rest
|
68
68
|
}) => {
|
69
69
|
const classes = cx(styles.requiredAsterisk, className);
|
70
|
-
return /* @__PURE__ */ jsx("span", {
|
71
|
-
...rest,
|
72
|
-
"data-test-id": testId,
|
73
|
-
className: classes,
|
74
|
-
children: "*"
|
75
|
-
});
|
70
|
+
return /* @__PURE__ */ jsx("span", { ...rest, "data-test-id": testId, className: classes, children: "*" });
|
76
71
|
};
|
77
72
|
const Label = ({
|
78
73
|
disabled,
|
@@ -84,141 +79,149 @@ const Label = ({
|
|
84
79
|
...rest
|
85
80
|
}) => {
|
86
81
|
const classes = cx(styles.label, className, disabled && styles.labelDisabled);
|
87
|
-
return /* @__PURE__ */ jsxs("label", {
|
88
|
-
|
89
|
-
"
|
90
|
-
|
91
|
-
|
92
|
-
className: styles.labelOptional,
|
93
|
-
children: "(optional)"
|
94
|
-
}), required && !optional && /* @__PURE__ */ jsx(RequiredAsterisk, {})]
|
95
|
-
});
|
82
|
+
return /* @__PURE__ */ jsxs("label", { ...rest, "data-test-id": testId, className: classes, children: [
|
83
|
+
children,
|
84
|
+
optional && !required && /* @__PURE__ */ jsx("small", { className: styles.labelOptional, children: "(optional)" }),
|
85
|
+
required && !optional && /* @__PURE__ */ jsx(RequiredAsterisk, {})
|
86
|
+
] });
|
96
87
|
};
|
97
|
-
const Checkbox = forwardRef(
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
88
|
+
const Checkbox = forwardRef(
|
89
|
+
({
|
90
|
+
"aria-label": ariaLabel,
|
91
|
+
"aria-labelledby": ariaLabelledby,
|
92
|
+
children,
|
93
|
+
disabled,
|
94
|
+
checked,
|
95
|
+
labelClassName,
|
96
|
+
"data-test-id": testId = "checkbox",
|
97
|
+
...rest
|
98
|
+
}, ref) => {
|
99
|
+
const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
|
100
|
+
if (!children && !hasAriaLabel) {
|
101
|
+
console.warn(
|
102
|
+
"If you do not provide children, you must specify an aria-label for accessibility"
|
103
|
+
);
|
104
|
+
}
|
105
|
+
return /* @__PURE__ */ jsxs(Label, { className: labelClassName, children: [
|
106
|
+
/* @__PURE__ */ jsx(
|
107
|
+
"input",
|
108
|
+
{
|
109
|
+
...rest,
|
110
|
+
ref,
|
111
|
+
checked,
|
112
|
+
"aria-checked": checked ? "true" : "false",
|
113
|
+
"aria-label": ariaLabel,
|
114
|
+
"aria-labelledby": ariaLabelledby,
|
115
|
+
className: styles.checkbox,
|
116
|
+
disabled,
|
117
|
+
type: "checkbox",
|
118
|
+
"data-test-id": testId
|
119
|
+
}
|
120
|
+
),
|
121
|
+
" ",
|
122
|
+
disabled ? /* @__PURE__ */ jsx("span", { className: styles.labelDisabled, children }) : children
|
123
|
+
] });
|
110
124
|
}
|
111
|
-
|
112
|
-
className: labelClassName,
|
113
|
-
children: [/* @__PURE__ */ jsx("input", {
|
114
|
-
...rest,
|
115
|
-
ref,
|
116
|
-
checked,
|
117
|
-
"aria-checked": checked ? "true" : "false",
|
118
|
-
"aria-label": ariaLabel,
|
119
|
-
"aria-labelledby": ariaLabelledby,
|
120
|
-
className: styles.checkbox,
|
121
|
-
disabled,
|
122
|
-
type: "checkbox",
|
123
|
-
"data-test-id": testId
|
124
|
-
}), " ", disabled ? /* @__PURE__ */ jsx("span", {
|
125
|
-
className: styles.labelDisabled,
|
126
|
-
children
|
127
|
-
}) : children]
|
128
|
-
});
|
129
|
-
});
|
125
|
+
);
|
130
126
|
Checkbox.displayName = "Checkbox";
|
131
127
|
const createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
|
132
|
-
const TextField = forwardRef(
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
className: styles.suffixContainer,
|
147
|
-
|
128
|
+
const TextField = forwardRef(
|
129
|
+
({
|
130
|
+
className,
|
131
|
+
type = "text",
|
132
|
+
tiny = false,
|
133
|
+
readOnly,
|
134
|
+
tabIndex = 0,
|
135
|
+
suffix: suffix2,
|
136
|
+
overrideWidth,
|
137
|
+
"data-test-id": testId = "text-field",
|
138
|
+
...rest
|
139
|
+
}, ref) => {
|
140
|
+
const classes = overrideWidth ? className : cx(styles.formInput, tiny && styles.formInputTiny, className);
|
141
|
+
if (suffix2) {
|
142
|
+
return /* @__PURE__ */ jsxs("div", { className: styles.suffixContainer, children: [
|
143
|
+
/* @__PURE__ */ jsx(
|
144
|
+
"input",
|
145
|
+
{
|
146
|
+
...rest,
|
147
|
+
type,
|
148
|
+
"data-test-id": testId,
|
149
|
+
className: classes,
|
150
|
+
readOnly,
|
151
|
+
ref,
|
152
|
+
"aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
|
153
|
+
}
|
154
|
+
),
|
155
|
+
/* @__PURE__ */ jsx("label", { className: styles.suffix, htmlFor: rest.id, children: suffix2 })
|
156
|
+
] });
|
157
|
+
}
|
158
|
+
return /* @__PURE__ */ jsx(
|
159
|
+
"input",
|
160
|
+
{
|
148
161
|
...rest,
|
149
162
|
type,
|
150
|
-
"data-test-id": testId,
|
151
163
|
className: classes,
|
152
164
|
readOnly,
|
165
|
+
tabIndex,
|
153
166
|
ref,
|
167
|
+
"data-test-id": testId,
|
168
|
+
style: overrideWidth ? {
|
169
|
+
width: overrideWidth
|
170
|
+
} : void 0,
|
154
171
|
"aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
|
155
|
-
}
|
156
|
-
|
157
|
-
htmlFor: rest.id,
|
158
|
-
children: suffix2
|
159
|
-
})]
|
160
|
-
});
|
172
|
+
}
|
173
|
+
);
|
161
174
|
}
|
162
|
-
|
163
|
-
...rest,
|
164
|
-
type,
|
165
|
-
className: classes,
|
166
|
-
readOnly,
|
167
|
-
tabIndex,
|
168
|
-
ref,
|
169
|
-
"data-test-id": testId,
|
170
|
-
style: overrideWidth ? {
|
171
|
-
width: overrideWidth
|
172
|
-
} : void 0,
|
173
|
-
"aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
|
174
|
-
});
|
175
|
-
});
|
175
|
+
);
|
176
176
|
TextField.displayName = "TextField";
|
177
|
-
const CompactTextField = forwardRef(
|
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
|
-
|
207
|
-
|
208
|
-
|
209
|
-
htmlFor: id,
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
217
|
-
|
218
|
-
|
219
|
-
|
220
|
-
|
221
|
-
|
177
|
+
const CompactTextField = forwardRef(
|
178
|
+
({
|
179
|
+
className,
|
180
|
+
id,
|
181
|
+
label: label2,
|
182
|
+
needsErrorFeedback,
|
183
|
+
value,
|
184
|
+
onFocus,
|
185
|
+
onBlur,
|
186
|
+
"data-test-id": testId = "compact-text-field",
|
187
|
+
...rest
|
188
|
+
}, ref) => {
|
189
|
+
const [isActive2, setIsActive] = useState(
|
190
|
+
(typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0
|
191
|
+
);
|
192
|
+
const isActiveState = isActive2 || needsErrorFeedback;
|
193
|
+
const classes = cx(styles.compactTextField, className, isActiveState && styles.isActive);
|
194
|
+
const placeholder = isActiveState ? "" : label2;
|
195
|
+
const handleFocus = (event) => {
|
196
|
+
setIsActive(true);
|
197
|
+
if (onFocus) {
|
198
|
+
onFocus(event);
|
199
|
+
}
|
200
|
+
};
|
201
|
+
const handleBlur = (event) => {
|
202
|
+
const value2 = event.target.value || "";
|
203
|
+
setIsActive(value2.trim().length !== 0);
|
204
|
+
if (onBlur) {
|
205
|
+
onBlur(event);
|
206
|
+
}
|
207
|
+
};
|
208
|
+
return /* @__PURE__ */ jsxs("div", { className: classes, "data-test-id": testId, children: [
|
209
|
+
/* @__PURE__ */ jsx(Label, { htmlFor: id, children: label2 }),
|
210
|
+
/* @__PURE__ */ jsx(
|
211
|
+
TextField,
|
212
|
+
{
|
213
|
+
...rest,
|
214
|
+
id,
|
215
|
+
placeholder,
|
216
|
+
value,
|
217
|
+
ref,
|
218
|
+
onFocus: handleFocus,
|
219
|
+
onBlur: handleBlur
|
220
|
+
}
|
221
|
+
)
|
222
|
+
] });
|
223
|
+
}
|
224
|
+
);
|
222
225
|
CompactTextField.displayName = "CompactTextField";
|
223
226
|
const FieldError = ({
|
224
227
|
name,
|
@@ -230,14 +233,17 @@ const FieldError = ({
|
|
230
233
|
if (!errorMessage) {
|
231
234
|
return null;
|
232
235
|
}
|
233
|
-
return /* @__PURE__ */ jsx(
|
234
|
-
|
235
|
-
|
236
|
-
|
237
|
-
|
238
|
-
|
239
|
-
|
240
|
-
|
236
|
+
return /* @__PURE__ */ jsx(
|
237
|
+
"span",
|
238
|
+
{
|
239
|
+
...rest,
|
240
|
+
className: cx(styles.fieldError, className),
|
241
|
+
"aria-live": "polite",
|
242
|
+
"data-test-id": testId,
|
243
|
+
id: createFieldErrorId(name),
|
244
|
+
children: `Error - ${errorMessage}`
|
245
|
+
}
|
246
|
+
);
|
241
247
|
};
|
242
248
|
const FieldSet = ({
|
243
249
|
children,
|
@@ -246,12 +252,7 @@ const FieldSet = ({
|
|
246
252
|
...rest
|
247
253
|
}) => {
|
248
254
|
const classes = cx(styles.fieldSet, className);
|
249
|
-
return /* @__PURE__ */ jsx("fieldset", {
|
250
|
-
"data-test-id": testId,
|
251
|
-
className: classes,
|
252
|
-
...rest,
|
253
|
-
children
|
254
|
-
});
|
255
|
+
return /* @__PURE__ */ jsx("fieldset", { "data-test-id": testId, className: classes, ...rest, children });
|
255
256
|
};
|
256
257
|
const Form = (props) => {
|
257
258
|
const {
|
@@ -262,13 +263,13 @@ const Form = (props) => {
|
|
262
263
|
"data-test-id": testId = "form",
|
263
264
|
...rest
|
264
265
|
} = props;
|
265
|
-
const classes = cx(
|
266
|
-
|
267
|
-
|
268
|
-
|
269
|
-
|
270
|
-
|
271
|
-
});
|
266
|
+
const classes = cx(
|
267
|
+
styles.form,
|
268
|
+
className,
|
269
|
+
inline && styles.formInline,
|
270
|
+
!!hasIncreasedErrorMargin && styles.formIncreasedErrorMargin
|
271
|
+
);
|
272
|
+
return /* @__PURE__ */ jsx("form", { ...rest, "data-test-id": testId, className: classes, children });
|
272
273
|
};
|
273
274
|
const FormGroup = (props) => {
|
274
275
|
const {
|
@@ -280,13 +281,12 @@ const FormGroup = (props) => {
|
|
280
281
|
"data-test-id": testId = "form-group",
|
281
282
|
...rest
|
282
283
|
} = props;
|
283
|
-
const classes = cx(
|
284
|
-
|
285
|
-
className
|
286
|
-
|
287
|
-
|
288
|
-
|
289
|
-
});
|
284
|
+
const classes = cx(
|
285
|
+
styles.formGroup,
|
286
|
+
className,
|
287
|
+
!ignoreValidation && isInvalid2 && styles.isInvalid
|
288
|
+
);
|
289
|
+
return /* @__PURE__ */ jsx("fieldset", { className: classes, "data-test-id": testId, ...rest, children });
|
290
290
|
};
|
291
291
|
const FormHint = ({
|
292
292
|
className,
|
@@ -295,12 +295,7 @@ const FormHint = ({
|
|
295
295
|
...rest
|
296
296
|
}) => {
|
297
297
|
const classes = cx(styles.hint, className);
|
298
|
-
return /* @__PURE__ */ jsx("div", {
|
299
|
-
...rest,
|
300
|
-
"data-test-id": testId,
|
301
|
-
className: classes,
|
302
|
-
children
|
303
|
-
});
|
298
|
+
return /* @__PURE__ */ jsx("div", { ...rest, "data-test-id": testId, className: classes, children });
|
304
299
|
};
|
305
300
|
const FormField = ({
|
306
301
|
isRequired,
|
@@ -319,25 +314,26 @@ const FormField = ({
|
|
319
314
|
const handleBlur = () => {
|
320
315
|
onBlur && onBlur(name);
|
321
316
|
};
|
322
|
-
return /* @__PURE__ */ jsxs(
|
323
|
-
|
324
|
-
|
325
|
-
|
326
|
-
isInvalid: isInvalid2,
|
327
|
-
onBlur: handleBlur,
|
328
|
-
"data-test-id": testId,
|
329
|
-
children: [label2 && /* @__PURE__ */ jsxs("label", {
|
330
|
-
htmlFor,
|
331
|
-
children: [label2, isRequired && /* @__PURE__ */ jsx(RequiredAsterisk, {})]
|
332
|
-
}), hint2 && /* @__PURE__ */ jsx(FormHint, {
|
333
|
-
className: styles.hint,
|
334
|
-
children: hint2
|
335
|
-
}), children, /* @__PURE__ */ jsx(FieldError, {
|
336
|
-
className: styles.fieldErrorMessage,
|
317
|
+
return /* @__PURE__ */ jsxs(
|
318
|
+
FormGroup,
|
319
|
+
{
|
320
|
+
className: cx(styles.field, className),
|
337
321
|
name,
|
338
|
-
|
339
|
-
|
340
|
-
|
322
|
+
ignoreValidation,
|
323
|
+
isInvalid: isInvalid2,
|
324
|
+
onBlur: handleBlur,
|
325
|
+
"data-test-id": testId,
|
326
|
+
children: [
|
327
|
+
label2 && /* @__PURE__ */ jsxs("label", { htmlFor, children: [
|
328
|
+
label2,
|
329
|
+
isRequired && /* @__PURE__ */ jsx(RequiredAsterisk, {})
|
330
|
+
] }),
|
331
|
+
hint2 && /* @__PURE__ */ jsx(FormHint, { className: styles.hint, children: hint2 }),
|
332
|
+
children,
|
333
|
+
/* @__PURE__ */ jsx(FieldError, { className: styles.fieldErrorMessage, name, errorMessage })
|
334
|
+
]
|
335
|
+
}
|
336
|
+
);
|
341
337
|
};
|
342
338
|
const IconField = ({
|
343
339
|
icon,
|
@@ -348,15 +344,10 @@ const IconField = ({
|
|
348
344
|
}) => {
|
349
345
|
const Icon = icon;
|
350
346
|
const classes = cx(styles.iconField, className);
|
351
|
-
return /* @__PURE__ */ jsxs("div", {
|
352
|
-
|
353
|
-
"
|
354
|
-
|
355
|
-
children: [children, /* @__PURE__ */ jsx(Icon, {
|
356
|
-
size: "small",
|
357
|
-
className: styles.iconFieldIcon
|
358
|
-
})]
|
359
|
-
});
|
347
|
+
return /* @__PURE__ */ jsxs("div", { className: classes, "data-test-id": testId, ...rest, children: [
|
348
|
+
children,
|
349
|
+
/* @__PURE__ */ jsx(Icon, { size: "small", className: styles.iconFieldIcon })
|
350
|
+
] });
|
360
351
|
};
|
361
352
|
const Radio = ({
|
362
353
|
"aria-label": ariaLabel,
|
@@ -373,29 +364,27 @@ const Radio = ({
|
|
373
364
|
}) => {
|
374
365
|
const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
|
375
366
|
if (!children && !hasAriaLabel) {
|
376
|
-
console.warn(
|
367
|
+
console.warn(
|
368
|
+
"If you do not provide children, you must specify an aria-label for accessibility"
|
369
|
+
);
|
377
370
|
}
|
378
|
-
return /* @__PURE__ */ jsxs(Fragment, {
|
379
|
-
|
380
|
-
|
381
|
-
|
382
|
-
|
383
|
-
|
384
|
-
|
385
|
-
|
386
|
-
|
387
|
-
|
388
|
-
|
389
|
-
|
390
|
-
|
391
|
-
|
392
|
-
|
393
|
-
|
394
|
-
|
395
|
-
children
|
396
|
-
}) : children
|
397
|
-
})]
|
398
|
-
});
|
371
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
372
|
+
/* @__PURE__ */ jsx(
|
373
|
+
"input",
|
374
|
+
{
|
375
|
+
...rest,
|
376
|
+
"aria-label": ariaLabel,
|
377
|
+
"aria-labelledby": ariaLabelledby,
|
378
|
+
className: cx(styles.radio, className),
|
379
|
+
checked,
|
380
|
+
disabled,
|
381
|
+
id,
|
382
|
+
"data-test-id": testId,
|
383
|
+
type: "radio"
|
384
|
+
}
|
385
|
+
),
|
386
|
+
/* @__PURE__ */ jsx(Label, { className: labelClassName, htmlFor: id, style: labelStyle, children: disabled ? /* @__PURE__ */ jsx("span", { className: styles.labelDisabled, children }) : children })
|
387
|
+
] });
|
399
388
|
};
|
400
389
|
const RadioGroup = (props) => {
|
401
390
|
const {
|
@@ -448,18 +437,10 @@ const RadioGroup = (props) => {
|
|
448
437
|
return null;
|
449
438
|
}
|
450
439
|
const radios = Children.map(children, (child) => updateRadioElems(child));
|
451
|
-
return /* @__PURE__ */ jsxs("fieldset", {
|
452
|
-
"
|
453
|
-
|
454
|
-
|
455
|
-
children: /* @__PURE__ */ jsx(VisuallyHidden, {
|
456
|
-
children: legend
|
457
|
-
})
|
458
|
-
}), /* @__PURE__ */ jsx("div", {
|
459
|
-
...rest,
|
460
|
-
children: radios
|
461
|
-
})]
|
462
|
-
});
|
440
|
+
return /* @__PURE__ */ jsxs("fieldset", { "data-test-id": testId, ref: fieldsetRef, children: [
|
441
|
+
legend && /* @__PURE__ */ jsx("legend", { children: /* @__PURE__ */ jsx(VisuallyHidden, { children: legend }) }),
|
442
|
+
/* @__PURE__ */ jsx("div", { ...rest, children: radios })
|
443
|
+
] });
|
463
444
|
};
|
464
445
|
const Select = ({
|
465
446
|
className,
|
@@ -468,35 +449,31 @@ const Select = ({
|
|
468
449
|
...rest
|
469
450
|
}) => {
|
470
451
|
const classes = cx(styles.formInput, className);
|
471
|
-
return /* @__PURE__ */ jsx("select", {
|
472
|
-
...rest,
|
473
|
-
"data-test-id": testId,
|
474
|
-
className: classes,
|
475
|
-
children
|
476
|
-
});
|
452
|
+
return /* @__PURE__ */ jsx("select", { ...rest, "data-test-id": testId, className: classes, children });
|
477
453
|
};
|
478
|
-
const TextArea = forwardRef(
|
479
|
-
className,
|
480
|
-
|
481
|
-
|
482
|
-
|
483
|
-
|
484
|
-
|
485
|
-
|
486
|
-
|
487
|
-
|
488
|
-
|
489
|
-
|
490
|
-
|
491
|
-
|
492
|
-
|
493
|
-
|
494
|
-
|
495
|
-
|
496
|
-
|
497
|
-
|
498
|
-
|
499
|
-
}
|
454
|
+
const TextArea = forwardRef(
|
455
|
+
({ className, "data-test-id": testId = "text-area", ...props }, ref) => {
|
456
|
+
const onKeyDown = (e) => {
|
457
|
+
if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
|
458
|
+
e.stopPropagation();
|
459
|
+
}
|
460
|
+
if (e.key === "Escape") {
|
461
|
+
e.nativeEvent.stopImmediatePropagation();
|
462
|
+
}
|
463
|
+
};
|
464
|
+
return /* @__PURE__ */ jsx(
|
465
|
+
"textarea",
|
466
|
+
{
|
467
|
+
...props,
|
468
|
+
className: cx(styles.formInput, className),
|
469
|
+
ref,
|
470
|
+
"data-test-id": testId,
|
471
|
+
"aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
|
472
|
+
onKeyDown
|
473
|
+
}
|
474
|
+
);
|
475
|
+
}
|
476
|
+
);
|
500
477
|
TextArea.displayName = "TextArea";
|
501
478
|
export {
|
502
479
|
Checkbox,
|