@launchpad-ui/form 0.6.28 → 0.6.29

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