@launchpad-ui/form 0.6.28 → 0.6.30

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