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