@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.
Files changed (5) hide show
  1. package/dist/index.es.js +230 -253
  2. package/dist/index.es.js.map +1 -1
  3. package/dist/index.js +231 -254
  4. package/dist/index.js.map +1 -1
  5. 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
- ...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
- });
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
- "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");
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
- 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
- });
125
+ );
130
126
  Checkbox.displayName = "Checkbox";
131
127
  const createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
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", {
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
- }), /* @__PURE__ */ jsx("label", {
156
- className: styles.suffix,
157
- htmlFor: rest.id,
158
- children: suffix2
159
- })]
160
- });
172
+ }
173
+ );
161
174
  }
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
- });
175
+ );
176
176
  TextField.displayName = "TextField";
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
- });
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("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
- });
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(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
- });
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(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
- });
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(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,
317
+ return /* @__PURE__ */ jsxs(
318
+ FormGroup,
319
+ {
320
+ className: cx(styles.field, className),
337
321
  name,
338
- errorMessage
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
- className: classes,
353
- "data-test-id": testId,
354
- ...rest,
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("If you do not provide children, you must specify an aria-label for accessibility");
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
- 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
- });
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
- "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
- });
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
- "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
- });
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,