@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.js CHANGED
@@ -1,9 +1,9 @@
1
1
  require('./style.css');
2
2
  "use strict";
3
- Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
4
+ const jsxRuntime = require("react/jsx-runtime");
4
5
  const react = require("react");
5
6
  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,12 +69,7 @@ const RequiredAsterisk = ({
69
69
  ...rest
70
70
  }) => {
71
71
  const classes = classix.cx(styles.requiredAsterisk, className);
72
- return /* @__PURE__ */ jsxRuntime.jsx("span", {
73
- ...rest,
74
- "data-test-id": testId,
75
- className: classes,
76
- children: "*"
77
- });
72
+ return /* @__PURE__ */ jsxRuntime.jsx("span", { ...rest, "data-test-id": testId, className: classes, children: "*" });
78
73
  };
79
74
  const Label = ({
80
75
  disabled,
@@ -86,141 +81,149 @@ const Label = ({
86
81
  ...rest
87
82
  }) => {
88
83
  const classes = classix.cx(styles.label, className, disabled && styles.labelDisabled);
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
- });
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
+ ] });
98
89
  };
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");
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
+ ] });
112
126
  }
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
- });
127
+ );
132
128
  Checkbox.displayName = "Checkbox";
133
129
  const createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
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", {
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
+ {
150
163
  ...rest,
151
164
  type,
152
- "data-test-id": testId,
153
165
  className: classes,
154
166
  readOnly,
167
+ tabIndex,
155
168
  ref,
169
+ "data-test-id": testId,
170
+ style: overrideWidth ? {
171
+ width: overrideWidth
172
+ } : void 0,
156
173
  "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
157
- }), /* @__PURE__ */ jsxRuntime.jsx("label", {
158
- className: styles.suffix,
159
- htmlFor: rest.id,
160
- children: suffix2
161
- })]
162
- });
174
+ }
175
+ );
163
176
  }
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
- });
177
+ );
178
178
  TextField.displayName = "TextField";
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
- });
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
+ );
224
227
  CompactTextField.displayName = "CompactTextField";
225
228
  const FieldError = ({
226
229
  name,
@@ -232,14 +235,17 @@ const FieldError = ({
232
235
  if (!errorMessage) {
233
236
  return null;
234
237
  }
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
- });
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
+ );
243
249
  };
244
250
  const FieldSet = ({
245
251
  children,
@@ -248,12 +254,7 @@ const FieldSet = ({
248
254
  ...rest
249
255
  }) => {
250
256
  const classes = classix.cx(styles.fieldSet, className);
251
- return /* @__PURE__ */ jsxRuntime.jsx("fieldset", {
252
- "data-test-id": testId,
253
- className: classes,
254
- ...rest,
255
- children
256
- });
257
+ return /* @__PURE__ */ jsxRuntime.jsx("fieldset", { "data-test-id": testId, className: classes, ...rest, children });
257
258
  };
258
259
  const Form = (props) => {
259
260
  const {
@@ -264,13 +265,13 @@ const Form = (props) => {
264
265
  "data-test-id": testId = "form",
265
266
  ...rest
266
267
  } = props;
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
- });
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 });
274
275
  };
275
276
  const FormGroup = (props) => {
276
277
  const {
@@ -282,13 +283,12 @@ const FormGroup = (props) => {
282
283
  "data-test-id": testId = "form-group",
283
284
  ...rest
284
285
  } = props;
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
- });
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 });
292
292
  };
293
293
  const FormHint = ({
294
294
  className,
@@ -297,12 +297,7 @@ const FormHint = ({
297
297
  ...rest
298
298
  }) => {
299
299
  const classes = classix.cx(styles.hint, className);
300
- return /* @__PURE__ */ jsxRuntime.jsx("div", {
301
- ...rest,
302
- "data-test-id": testId,
303
- className: classes,
304
- children
305
- });
300
+ return /* @__PURE__ */ jsxRuntime.jsx("div", { ...rest, "data-test-id": testId, className: classes, children });
306
301
  };
307
302
  const FormField = ({
308
303
  isRequired,
@@ -321,25 +316,26 @@ const FormField = ({
321
316
  const handleBlur = () => {
322
317
  onBlur && onBlur(name);
323
318
  };
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,
319
+ return /* @__PURE__ */ jsxRuntime.jsxs(
320
+ FormGroup,
321
+ {
322
+ className: classix.cx(styles.field, className),
339
323
  name,
340
- errorMessage
341
- })]
342
- });
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
+ );
343
339
  };
344
340
  const IconField = ({
345
341
  icon,
@@ -350,15 +346,10 @@ const IconField = ({
350
346
  }) => {
351
347
  const Icon = icon;
352
348
  const classes = classix.cx(styles.iconField, className);
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
- });
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
+ ] });
362
353
  };
363
354
  const Radio = ({
364
355
  "aria-label": ariaLabel,
@@ -375,29 +366,27 @@ const Radio = ({
375
366
  }) => {
376
367
  const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
377
368
  if (!children && !hasAriaLabel) {
378
- console.warn("If you do not provide children, you must specify an aria-label for accessibility");
369
+ console.warn(
370
+ "If you do not provide children, you must specify an aria-label for accessibility"
371
+ );
379
372
  }
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
- });
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
+ ] });
401
390
  };
402
391
  const RadioGroup = (props) => {
403
392
  const {
@@ -450,18 +439,10 @@ const RadioGroup = (props) => {
450
439
  return null;
451
440
  }
452
441
  const radios = react.Children.map(children, (child) => updateRadioElems(child));
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
- });
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
+ ] });
465
446
  };
466
447
  const Select = ({
467
448
  className,
@@ -470,35 +451,31 @@ const Select = ({
470
451
  ...rest
471
452
  }) => {
472
453
  const classes = classix.cx(styles.formInput, className);
473
- return /* @__PURE__ */ jsxRuntime.jsx("select", {
474
- ...rest,
475
- "data-test-id": testId,
476
- className: classes,
477
- children
478
- });
454
+ return /* @__PURE__ */ jsxRuntime.jsx("select", { ...rest, "data-test-id": testId, className: classes, children });
479
455
  };
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
- });
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
+ );
502
479
  TextArea.displayName = "TextArea";
503
480
  exports.Checkbox = Checkbox;
504
481
  exports.CompactTextField = CompactTextField;