@launchpad-ui/form 0.10.9 → 0.10.11
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 +277 -328
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +277 -328
- package/dist/index.js.map +1 -1
- package/dist/style.css +2 -2
- package/package.json +10 -10
package/dist/index.es.js
CHANGED
@@ -83,12 +83,7 @@ const RequiredAsterisk = ({
|
|
83
83
|
...rest
|
84
84
|
}) => {
|
85
85
|
const classes = cx(styles.requiredAsterisk, className);
|
86
|
-
return /* @__PURE__ */ jsx("span", {
|
87
|
-
...rest,
|
88
|
-
"data-test-id": testId,
|
89
|
-
className: classes,
|
90
|
-
children: "*"
|
91
|
-
});
|
86
|
+
return /* @__PURE__ */ jsx("span", { ...rest, "data-test-id": testId, className: classes, children: "*" });
|
92
87
|
};
|
93
88
|
const Label = ({
|
94
89
|
disabled,
|
@@ -100,49 +95,50 @@ const Label = ({
|
|
100
95
|
...rest
|
101
96
|
}) => {
|
102
97
|
const classes = cx(styles.label, className, disabled && styles.labelDisabled);
|
103
|
-
return /* @__PURE__ */ jsxs("label", {
|
104
|
-
|
105
|
-
"
|
106
|
-
|
107
|
-
|
108
|
-
className: styles.labelOptional,
|
109
|
-
children: "(optional)"
|
110
|
-
}), required && !optional && /* @__PURE__ */ jsx(RequiredAsterisk, {})]
|
111
|
-
});
|
98
|
+
return /* @__PURE__ */ jsxs("label", { ...rest, "data-test-id": testId, className: classes, children: [
|
99
|
+
children,
|
100
|
+
optional && !required && /* @__PURE__ */ jsx("small", { className: styles.labelOptional, children: "(optional)" }),
|
101
|
+
required && !optional && /* @__PURE__ */ jsx(RequiredAsterisk, {})
|
102
|
+
] });
|
112
103
|
};
|
113
|
-
const Checkbox = /* @__PURE__ */ forwardRef(
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
104
|
+
const Checkbox = /* @__PURE__ */ forwardRef(
|
105
|
+
({
|
106
|
+
"aria-label": ariaLabel,
|
107
|
+
"aria-labelledby": ariaLabelledby,
|
108
|
+
children,
|
109
|
+
disabled,
|
110
|
+
checked,
|
111
|
+
labelClassName,
|
112
|
+
"data-test-id": testId = "checkbox",
|
113
|
+
...rest
|
114
|
+
}, ref) => {
|
115
|
+
const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
|
116
|
+
if (!children && !hasAriaLabel) {
|
117
|
+
console.warn(
|
118
|
+
"If you do not provide children, you must specify an aria-label for accessibility"
|
119
|
+
);
|
120
|
+
}
|
121
|
+
return /* @__PURE__ */ jsxs(Label, { className: labelClassName, children: [
|
122
|
+
/* @__PURE__ */ jsx(
|
123
|
+
"input",
|
124
|
+
{
|
125
|
+
...rest,
|
126
|
+
ref,
|
127
|
+
checked,
|
128
|
+
"aria-checked": checked ? "true" : "false",
|
129
|
+
"aria-label": ariaLabel,
|
130
|
+
"aria-labelledby": ariaLabelledby,
|
131
|
+
className: styles.checkbox,
|
132
|
+
disabled,
|
133
|
+
type: "checkbox",
|
134
|
+
"data-test-id": testId
|
135
|
+
}
|
136
|
+
),
|
137
|
+
" ",
|
138
|
+
disabled ? /* @__PURE__ */ jsx("span", { className: styles.labelDisabled, children }) : children
|
139
|
+
] });
|
126
140
|
}
|
127
|
-
|
128
|
-
className: labelClassName,
|
129
|
-
children: [/* @__PURE__ */ jsx("input", {
|
130
|
-
...rest,
|
131
|
-
ref,
|
132
|
-
checked,
|
133
|
-
"aria-checked": checked ? "true" : "false",
|
134
|
-
"aria-label": ariaLabel,
|
135
|
-
"aria-labelledby": ariaLabelledby,
|
136
|
-
className: styles.checkbox,
|
137
|
-
disabled,
|
138
|
-
type: "checkbox",
|
139
|
-
"data-test-id": testId
|
140
|
-
}), " ", disabled ? /* @__PURE__ */ jsx("span", {
|
141
|
-
className: styles.labelDisabled,
|
142
|
-
children
|
143
|
-
}) : children]
|
144
|
-
});
|
145
|
-
});
|
141
|
+
);
|
146
142
|
Checkbox.displayName = "Checkbox";
|
147
143
|
const createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
|
148
144
|
function hasObjectChanged(obj1, obj2) {
|
@@ -160,101 +156,108 @@ function useObjectMemo(obj) {
|
|
160
156
|
return objRef.current;
|
161
157
|
}, [obj]);
|
162
158
|
}
|
163
|
-
const TextField = /* @__PURE__ */ forwardRef(
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
className: styles.suffixContainer,
|
180
|
-
|
159
|
+
const TextField = /* @__PURE__ */ forwardRef(
|
160
|
+
({
|
161
|
+
className,
|
162
|
+
type = "text",
|
163
|
+
tiny = false,
|
164
|
+
readOnly,
|
165
|
+
tabIndex = 0,
|
166
|
+
suffix: suffix2,
|
167
|
+
overrideWidth,
|
168
|
+
"data-test-id": testId = "text-field",
|
169
|
+
autoComplete,
|
170
|
+
...rest
|
171
|
+
}, ref) => {
|
172
|
+
const classes = overrideWidth ? className : cx(styles.formInput, tiny && styles.formInputTiny, className);
|
173
|
+
const disablePasswordManagers = autoComplete === "off";
|
174
|
+
if (suffix2) {
|
175
|
+
return /* @__PURE__ */ jsxs("div", { className: styles.suffixContainer, children: [
|
176
|
+
/* @__PURE__ */ jsx(
|
177
|
+
"input",
|
178
|
+
{
|
179
|
+
...rest,
|
180
|
+
type,
|
181
|
+
"data-test-id": testId,
|
182
|
+
autoComplete,
|
183
|
+
className: classes,
|
184
|
+
readOnly,
|
185
|
+
ref,
|
186
|
+
"aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
|
187
|
+
}
|
188
|
+
),
|
189
|
+
/* @__PURE__ */ jsx("label", { className: styles.suffix, htmlFor: rest.id, children: suffix2 })
|
190
|
+
] });
|
191
|
+
}
|
192
|
+
return /* @__PURE__ */ jsx(
|
193
|
+
"input",
|
194
|
+
{
|
181
195
|
...rest,
|
196
|
+
"data-1p-ignore": disablePasswordManagers,
|
182
197
|
type,
|
183
|
-
"data-test-id": testId,
|
184
|
-
autoComplete,
|
185
198
|
className: classes,
|
186
199
|
readOnly,
|
200
|
+
tabIndex,
|
201
|
+
autoComplete,
|
187
202
|
ref,
|
203
|
+
"data-test-id": testId,
|
204
|
+
style: overrideWidth ? {
|
205
|
+
width: overrideWidth
|
206
|
+
} : void 0,
|
188
207
|
"aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
|
189
|
-
}
|
190
|
-
|
191
|
-
htmlFor: rest.id,
|
192
|
-
children: suffix2
|
193
|
-
})]
|
194
|
-
});
|
208
|
+
}
|
209
|
+
);
|
195
210
|
}
|
196
|
-
|
197
|
-
...rest,
|
198
|
-
"data-1p-ignore": disablePasswordManagers,
|
199
|
-
type,
|
200
|
-
className: classes,
|
201
|
-
readOnly,
|
202
|
-
tabIndex,
|
203
|
-
autoComplete,
|
204
|
-
ref,
|
205
|
-
"data-test-id": testId,
|
206
|
-
style: overrideWidth ? {
|
207
|
-
width: overrideWidth
|
208
|
-
} : void 0,
|
209
|
-
"aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
|
210
|
-
});
|
211
|
-
});
|
211
|
+
);
|
212
212
|
TextField.displayName = "TextField";
|
213
|
-
const CompactTextField = /* @__PURE__ */ forwardRef(
|
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
|
-
htmlFor: id,
|
246
|
-
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
|
251
|
-
|
252
|
-
|
253
|
-
|
254
|
-
|
255
|
-
|
256
|
-
|
257
|
-
|
213
|
+
const CompactTextField = /* @__PURE__ */ forwardRef(
|
214
|
+
({
|
215
|
+
className,
|
216
|
+
id,
|
217
|
+
label: label2,
|
218
|
+
needsErrorFeedback,
|
219
|
+
value,
|
220
|
+
onFocus,
|
221
|
+
onBlur,
|
222
|
+
"data-test-id": testId = "compact-text-field",
|
223
|
+
...rest
|
224
|
+
}, ref) => {
|
225
|
+
const [isActive2, setIsActive] = useState(
|
226
|
+
(typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0
|
227
|
+
);
|
228
|
+
const isActiveState = isActive2 || needsErrorFeedback;
|
229
|
+
const classes = cx(styles.compactTextField, className, isActiveState && styles.isActive);
|
230
|
+
const placeholder = isActiveState ? "" : label2;
|
231
|
+
const handleFocus = (event) => {
|
232
|
+
setIsActive(true);
|
233
|
+
if (onFocus) {
|
234
|
+
onFocus(event);
|
235
|
+
}
|
236
|
+
};
|
237
|
+
const handleBlur = (event) => {
|
238
|
+
const value2 = event.target.value || "";
|
239
|
+
setIsActive(value2.trim().length !== 0);
|
240
|
+
if (onBlur) {
|
241
|
+
onBlur(event);
|
242
|
+
}
|
243
|
+
};
|
244
|
+
return /* @__PURE__ */ jsxs("div", { className: classes, "data-test-id": testId, children: [
|
245
|
+
/* @__PURE__ */ jsx(Label, { htmlFor: id, children: label2 }),
|
246
|
+
/* @__PURE__ */ jsx(
|
247
|
+
TextField,
|
248
|
+
{
|
249
|
+
...rest,
|
250
|
+
id,
|
251
|
+
placeholder,
|
252
|
+
value,
|
253
|
+
ref,
|
254
|
+
onFocus: handleFocus,
|
255
|
+
onBlur: handleBlur
|
256
|
+
}
|
257
|
+
)
|
258
|
+
] });
|
259
|
+
}
|
260
|
+
);
|
258
261
|
CompactTextField.displayName = "CompactTextField";
|
259
262
|
const FieldError = ({
|
260
263
|
name,
|
@@ -266,18 +269,22 @@ const FieldError = ({
|
|
266
269
|
if (!errorMessage) {
|
267
270
|
return null;
|
268
271
|
}
|
269
|
-
return /* @__PURE__ */ jsxs(
|
270
|
-
|
271
|
-
|
272
|
-
|
273
|
-
|
274
|
-
|
275
|
-
|
276
|
-
|
277
|
-
|
278
|
-
|
279
|
-
|
280
|
-
|
272
|
+
return /* @__PURE__ */ jsxs(
|
273
|
+
"span",
|
274
|
+
{
|
275
|
+
...rest,
|
276
|
+
className: cx(styles.fieldError, className),
|
277
|
+
"aria-live": "polite",
|
278
|
+
"data-test-id": testId,
|
279
|
+
"aria-label": "Error",
|
280
|
+
id: createFieldErrorId(name),
|
281
|
+
children: [
|
282
|
+
/* @__PURE__ */ jsx(Icon, { name: "alert-rhombus", size: "small" }),
|
283
|
+
" ",
|
284
|
+
errorMessage
|
285
|
+
]
|
286
|
+
}
|
287
|
+
);
|
281
288
|
};
|
282
289
|
const FieldSet = ({
|
283
290
|
children,
|
@@ -286,12 +293,7 @@ const FieldSet = ({
|
|
286
293
|
...rest
|
287
294
|
}) => {
|
288
295
|
const classes = cx(styles.fieldSet, className);
|
289
|
-
return /* @__PURE__ */ jsx("fieldset", {
|
290
|
-
"data-test-id": testId,
|
291
|
-
className: classes,
|
292
|
-
...rest,
|
293
|
-
children
|
294
|
-
});
|
296
|
+
return /* @__PURE__ */ jsx("fieldset", { "data-test-id": testId, className: classes, ...rest, children });
|
295
297
|
};
|
296
298
|
const Form = (props) => {
|
297
299
|
const {
|
@@ -302,13 +304,13 @@ const Form = (props) => {
|
|
302
304
|
"data-test-id": testId = "form",
|
303
305
|
...rest
|
304
306
|
} = props;
|
305
|
-
const classes = cx(
|
306
|
-
|
307
|
-
|
308
|
-
|
309
|
-
|
310
|
-
|
311
|
-
});
|
307
|
+
const classes = cx(
|
308
|
+
styles.form,
|
309
|
+
className,
|
310
|
+
inline && styles.formInline,
|
311
|
+
!!hasIncreasedErrorMargin && styles.formIncreasedErrorMargin
|
312
|
+
);
|
313
|
+
return /* @__PURE__ */ jsx("form", { ...rest, "data-test-id": testId, className: classes, children });
|
312
314
|
};
|
313
315
|
const FormGroup = (props) => {
|
314
316
|
const {
|
@@ -320,13 +322,12 @@ const FormGroup = (props) => {
|
|
320
322
|
"data-test-id": testId = "form-group",
|
321
323
|
...rest
|
322
324
|
} = props;
|
323
|
-
const classes = cx(
|
324
|
-
|
325
|
-
className
|
326
|
-
|
327
|
-
|
328
|
-
|
329
|
-
});
|
325
|
+
const classes = cx(
|
326
|
+
styles.formGroup,
|
327
|
+
className,
|
328
|
+
!ignoreValidation && isInvalid2 && styles.isInvalid
|
329
|
+
);
|
330
|
+
return /* @__PURE__ */ jsx("fieldset", { className: classes, "data-test-id": testId, ...rest, children });
|
330
331
|
};
|
331
332
|
const FormHint = ({
|
332
333
|
className,
|
@@ -335,12 +336,7 @@ const FormHint = ({
|
|
335
336
|
...rest
|
336
337
|
}) => {
|
337
338
|
const classes = cx(styles.hint, className);
|
338
|
-
return /* @__PURE__ */ jsx("div", {
|
339
|
-
...rest,
|
340
|
-
"data-test-id": testId,
|
341
|
-
className: classes,
|
342
|
-
children
|
343
|
-
});
|
339
|
+
return /* @__PURE__ */ jsx("div", { ...rest, "data-test-id": testId, className: classes, children });
|
344
340
|
};
|
345
341
|
const FormField = ({
|
346
342
|
isRequired,
|
@@ -362,29 +358,31 @@ const FormField = ({
|
|
362
358
|
const handleBlur = () => {
|
363
359
|
onBlur && onBlur(name);
|
364
360
|
};
|
365
|
-
return /* @__PURE__ */ jsxs(
|
366
|
-
|
367
|
-
|
368
|
-
|
369
|
-
isInvalid: isInvalid2,
|
370
|
-
onBlur: handleBlur,
|
371
|
-
"data-test-id": testId,
|
372
|
-
children: [label2 && /* @__PURE__ */ jsx(Label, {
|
373
|
-
htmlFor,
|
374
|
-
required: isRequired,
|
375
|
-
...LabelProps,
|
376
|
-
children: label2
|
377
|
-
}), hint2 && /* @__PURE__ */ jsx(FormHint, {
|
378
|
-
className: styles.hint,
|
379
|
-
...FormHintProps,
|
380
|
-
children: hint2
|
381
|
-
}), children, /* @__PURE__ */ jsx(FieldError, {
|
382
|
-
className: styles.fieldErrorMessage,
|
361
|
+
return /* @__PURE__ */ jsxs(
|
362
|
+
FormGroup,
|
363
|
+
{
|
364
|
+
className: cx(styles.field, className),
|
383
365
|
name,
|
384
|
-
|
385
|
-
|
386
|
-
|
387
|
-
|
366
|
+
ignoreValidation,
|
367
|
+
isInvalid: isInvalid2,
|
368
|
+
onBlur: handleBlur,
|
369
|
+
"data-test-id": testId,
|
370
|
+
children: [
|
371
|
+
label2 && /* @__PURE__ */ jsx(Label, { htmlFor, required: isRequired, ...LabelProps, children: label2 }),
|
372
|
+
hint2 && /* @__PURE__ */ jsx(FormHint, { className: styles.hint, ...FormHintProps, children: hint2 }),
|
373
|
+
children,
|
374
|
+
/* @__PURE__ */ jsx(
|
375
|
+
FieldError,
|
376
|
+
{
|
377
|
+
className: styles.fieldErrorMessage,
|
378
|
+
name,
|
379
|
+
errorMessage,
|
380
|
+
...FieldErrorProps
|
381
|
+
}
|
382
|
+
)
|
383
|
+
]
|
384
|
+
}
|
385
|
+
);
|
388
386
|
};
|
389
387
|
const IconField = ({
|
390
388
|
icon,
|
@@ -401,29 +399,23 @@ const IconField = ({
|
|
401
399
|
className: cx(styles.iconFieldIcon, styles.iconFieldIconFill)
|
402
400
|
});
|
403
401
|
const classes = cx(styles.iconField, renderIconLast ? "IconAfter" : "IconBefore", className);
|
404
|
-
const renderIcon = tooltip ? /* @__PURE__ */ jsx(Tooltip, {
|
405
|
-
|
406
|
-
|
407
|
-
children: /* @__PURE__ */ jsx(IconButton, {
|
402
|
+
const renderIcon = tooltip ? /* @__PURE__ */ jsx(Tooltip, { content: tooltip, targetClassName: styles.iconFieldButton, children: /* @__PURE__ */ jsx(
|
403
|
+
IconButton,
|
404
|
+
{
|
408
405
|
icon: /* @__PURE__ */ cloneElement(icon, {
|
409
406
|
className: styles.iconFieldIconFill
|
410
407
|
}),
|
411
408
|
size: "small",
|
412
409
|
className: styles.iconFieldIcon,
|
413
|
-
style: renderIconLast ? {
|
414
|
-
right: "0.313rem"
|
415
|
-
} : {
|
416
|
-
left: "0.313rem"
|
417
|
-
},
|
410
|
+
style: renderIconLast ? { right: "0.313rem" } : { left: "0.313rem" },
|
418
411
|
"aria-label": ariaLabel
|
419
|
-
}
|
420
|
-
}) : iconElement;
|
421
|
-
return /* @__PURE__ */ jsxs("div", {
|
422
|
-
|
423
|
-
|
424
|
-
|
425
|
-
|
426
|
-
});
|
412
|
+
}
|
413
|
+
) }) : iconElement;
|
414
|
+
return /* @__PURE__ */ jsxs("div", { className: classes, "data-test-id": testId, ...rest, children: [
|
415
|
+
!renderIconLast && renderIcon,
|
416
|
+
children,
|
417
|
+
renderIconLast && renderIcon
|
418
|
+
] });
|
427
419
|
};
|
428
420
|
const Radio = ({
|
429
421
|
"aria-label": ariaLabel,
|
@@ -440,29 +432,27 @@ const Radio = ({
|
|
440
432
|
}) => {
|
441
433
|
const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
|
442
434
|
if (!children && !hasAriaLabel) {
|
443
|
-
console.warn(
|
435
|
+
console.warn(
|
436
|
+
"If you do not provide children, you must specify an aria-label for accessibility"
|
437
|
+
);
|
444
438
|
}
|
445
|
-
return /* @__PURE__ */ jsxs(Fragment, {
|
446
|
-
|
447
|
-
|
448
|
-
|
449
|
-
|
450
|
-
|
451
|
-
|
452
|
-
|
453
|
-
|
454
|
-
|
455
|
-
|
456
|
-
|
457
|
-
|
458
|
-
|
459
|
-
|
460
|
-
|
461
|
-
|
462
|
-
children
|
463
|
-
}) : children
|
464
|
-
})]
|
465
|
-
});
|
439
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
440
|
+
/* @__PURE__ */ jsx(
|
441
|
+
"input",
|
442
|
+
{
|
443
|
+
...rest,
|
444
|
+
"aria-label": ariaLabel,
|
445
|
+
"aria-labelledby": ariaLabelledby,
|
446
|
+
className: cx(styles.radio, className),
|
447
|
+
checked,
|
448
|
+
disabled,
|
449
|
+
id,
|
450
|
+
"data-test-id": testId,
|
451
|
+
type: "radio"
|
452
|
+
}
|
453
|
+
),
|
454
|
+
/* @__PURE__ */ jsx(Label, { className: labelClassName, htmlFor: id, style: labelStyle, children: disabled ? /* @__PURE__ */ jsx("span", { className: styles.labelDisabled, children }) : children })
|
455
|
+
] });
|
466
456
|
};
|
467
457
|
const RadioGroup = (props) => {
|
468
458
|
const {
|
@@ -515,57 +505,41 @@ const RadioGroup = (props) => {
|
|
515
505
|
return null;
|
516
506
|
}
|
517
507
|
const radios = Children.map(children, (child) => updateRadioElems(child));
|
518
|
-
return /* @__PURE__ */ jsxs("fieldset", {
|
519
|
-
"
|
520
|
-
|
521
|
-
|
522
|
-
children: /* @__PURE__ */ jsx(VisuallyHidden, {
|
523
|
-
children: legend
|
524
|
-
})
|
525
|
-
}), /* @__PURE__ */ jsx("div", {
|
526
|
-
...rest,
|
527
|
-
children: radios
|
528
|
-
})]
|
529
|
-
});
|
508
|
+
return /* @__PURE__ */ jsxs("fieldset", { "data-test-id": testId, ref: fieldsetRef, children: [
|
509
|
+
legend && /* @__PURE__ */ jsx("legend", { children: /* @__PURE__ */ jsx(VisuallyHidden, { children: legend }) }),
|
510
|
+
/* @__PURE__ */ jsx("div", { ...rest, children: radios })
|
511
|
+
] });
|
530
512
|
};
|
531
|
-
const SelectField = /* @__PURE__ */ forwardRef(
|
532
|
-
className,
|
533
|
-
|
534
|
-
|
535
|
-
|
536
|
-
|
537
|
-
const classes = cx(styles.formInput, className);
|
538
|
-
return /* @__PURE__ */ jsx("select", {
|
539
|
-
...rest,
|
540
|
-
"data-test-id": testId,
|
541
|
-
className: classes,
|
542
|
-
ref,
|
543
|
-
children
|
544
|
-
});
|
545
|
-
});
|
513
|
+
const SelectField = /* @__PURE__ */ forwardRef(
|
514
|
+
({ className, children, "data-test-id": testId = "select", ...rest }, ref) => {
|
515
|
+
const classes = cx(styles.formInput, className);
|
516
|
+
return /* @__PURE__ */ jsx("select", { ...rest, "data-test-id": testId, className: classes, ref, children });
|
517
|
+
}
|
518
|
+
);
|
546
519
|
SelectField.displayName = "SelectField";
|
547
|
-
const TextArea = /* @__PURE__ */ forwardRef(
|
548
|
-
className,
|
549
|
-
|
550
|
-
|
551
|
-
|
552
|
-
|
553
|
-
|
554
|
-
|
555
|
-
|
556
|
-
|
557
|
-
|
558
|
-
|
559
|
-
|
560
|
-
|
561
|
-
|
562
|
-
|
563
|
-
|
564
|
-
|
565
|
-
|
566
|
-
|
567
|
-
|
568
|
-
}
|
520
|
+
const TextArea = /* @__PURE__ */ forwardRef(
|
521
|
+
({ className, "data-test-id": testId = "text-area", ...props }, ref) => {
|
522
|
+
const onKeyDown = (e) => {
|
523
|
+
if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
|
524
|
+
e.stopPropagation();
|
525
|
+
}
|
526
|
+
if (e.key === "Escape") {
|
527
|
+
e.nativeEvent.stopImmediatePropagation();
|
528
|
+
}
|
529
|
+
};
|
530
|
+
return /* @__PURE__ */ jsx(
|
531
|
+
"textarea",
|
532
|
+
{
|
533
|
+
...props,
|
534
|
+
className: cx(styles.formInput, className),
|
535
|
+
ref,
|
536
|
+
"data-test-id": testId,
|
537
|
+
"aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
|
538
|
+
onKeyDown
|
539
|
+
}
|
540
|
+
);
|
541
|
+
}
|
542
|
+
);
|
569
543
|
TextArea.displayName = "TextArea";
|
570
544
|
const defaultFormatOptions = {
|
571
545
|
maximumFractionDigits: 6
|
@@ -581,14 +555,8 @@ const useNumberField = ({
|
|
581
555
|
...defaultFormatOptions,
|
582
556
|
...otherProps.formatOptions
|
583
557
|
});
|
584
|
-
const {
|
585
|
-
|
586
|
-
} = useLocale();
|
587
|
-
const numberFieldState = useNumberFieldState({
|
588
|
-
...otherProps,
|
589
|
-
locale,
|
590
|
-
formatOptions
|
591
|
-
});
|
558
|
+
const { locale } = useLocale();
|
559
|
+
const numberFieldState = useNumberFieldState({ ...otherProps, locale, formatOptions });
|
592
560
|
const inputRef = useRef(null);
|
593
561
|
const {
|
594
562
|
descriptionProps: formHintProps,
|
@@ -598,52 +566,33 @@ const useNumberField = ({
|
|
598
566
|
inputProps,
|
599
567
|
incrementButtonProps,
|
600
568
|
decrementButtonProps
|
601
|
-
} = useNumberField$1({
|
602
|
-
...otherProps,
|
603
|
-
formatOptions,
|
604
|
-
id
|
605
|
-
}, numberFieldState, inputRef);
|
569
|
+
} = useNumberField$1({ ...otherProps, formatOptions, id }, numberFieldState, inputRef);
|
606
570
|
return {
|
607
571
|
fieldErrorProps,
|
608
572
|
formHintProps,
|
609
573
|
labelProps,
|
610
|
-
renderNumberField: () => /* @__PURE__ */ jsxs("div", {
|
611
|
-
|
612
|
-
|
613
|
-
|
614
|
-
|
615
|
-
|
616
|
-
|
617
|
-
|
618
|
-
|
619
|
-
|
620
|
-
|
621
|
-
|
622
|
-
|
623
|
-
|
624
|
-
|
625
|
-
|
626
|
-
}), /* @__PURE__ */ jsx(Stepper, {
|
627
|
-
...decrementButtonProps,
|
628
|
-
children: /* @__PURE__ */ jsx(Icon, {
|
629
|
-
name: "chevron-down"
|
630
|
-
})
|
631
|
-
})]
|
632
|
-
})]
|
633
|
-
})
|
574
|
+
renderNumberField: () => /* @__PURE__ */ jsxs("div", { ...groupProps, className: styles.numberField, children: [
|
575
|
+
/* @__PURE__ */ jsx(
|
576
|
+
"input",
|
577
|
+
{
|
578
|
+
...inputProps,
|
579
|
+
className: cx(styles.formInput, styles["numberField-input"]),
|
580
|
+
"data-test-id": testId,
|
581
|
+
name,
|
582
|
+
ref: inputRef
|
583
|
+
}
|
584
|
+
),
|
585
|
+
/* @__PURE__ */ jsxs("div", { className: styles["numberField-stepperContainer"], children: [
|
586
|
+
/* @__PURE__ */ jsx(Stepper, { ...incrementButtonProps, children: /* @__PURE__ */ jsx(Icon, { name: "chevron-up" }) }),
|
587
|
+
/* @__PURE__ */ jsx(Stepper, { ...decrementButtonProps, children: /* @__PURE__ */ jsx(Icon, { name: "chevron-down" }) })
|
588
|
+
] })
|
589
|
+
] })
|
634
590
|
};
|
635
591
|
};
|
636
592
|
const Stepper = (props) => {
|
637
593
|
const buttonRef = useRef(null);
|
638
|
-
const {
|
639
|
-
|
640
|
-
} = useButton(props, buttonRef);
|
641
|
-
return /* @__PURE__ */ jsx("button", {
|
642
|
-
...buttonProps,
|
643
|
-
className: styles["numberField-stepper"],
|
644
|
-
ref: buttonRef,
|
645
|
-
children: props.children
|
646
|
-
});
|
594
|
+
const { buttonProps } = useButton(props, buttonRef);
|
595
|
+
return /* @__PURE__ */ jsx("button", { ...buttonProps, className: styles["numberField-stepper"], ref: buttonRef, children: props.children });
|
647
596
|
};
|
648
597
|
export {
|
649
598
|
Checkbox,
|