@launchpad-ui/form 0.2.9 → 0.3.2

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 CHANGED
@@ -10,17 +10,20 @@ import cx2 from "clsx";
10
10
  // src/RequiredAsterisk.tsx
11
11
  import cx from "clsx";
12
12
  import "./styles/RequiredAsterisk.css";
13
+ import { jsx } from "react/jsx-runtime";
13
14
  var RequiredAsterisk = ({ className, testId, ...rest }) => {
14
15
  const classes = cx("RequiredAsterisk");
15
- return /* @__PURE__ */ React.createElement("span", {
16
+ return /* @__PURE__ */ jsx("span", {
16
17
  className: classes,
17
18
  "data-test-id": testId,
18
- ...rest
19
- }, "*");
19
+ ...rest,
20
+ children: "*"
21
+ });
20
22
  };
21
23
 
22
24
  // src/Label.tsx
23
25
  import "./styles/Form.css";
26
+ import { jsx as jsx2, jsxs } from "react/jsx-runtime";
24
27
  var Label = ({
25
28
  htmlFor,
26
29
  disabled,
@@ -31,48 +34,65 @@ var Label = ({
31
34
  ...other
32
35
  }) => {
33
36
  const classes = cx2("Form-label", className, { "Form-label--disabled": disabled });
34
- return /* @__PURE__ */ React.createElement("label", {
37
+ return /* @__PURE__ */ jsxs("label", {
35
38
  ...other,
36
39
  className: classes,
37
- htmlFor
38
- }, children, optional && !required && /* @__PURE__ */ React.createElement("small", {
39
- className: "Form-labelOptional"
40
- }, "(optional)"), required && !optional && /* @__PURE__ */ React.createElement(RequiredAsterisk, null));
40
+ htmlFor,
41
+ children: [
42
+ children,
43
+ optional && !required && /* @__PURE__ */ jsx2("small", {
44
+ className: "Form-labelOptional",
45
+ children: "(optional)"
46
+ }),
47
+ required && !optional && /* @__PURE__ */ jsx2(RequiredAsterisk, {})
48
+ ]
49
+ });
41
50
  };
42
51
 
43
52
  // src/Checkbox.tsx
44
53
  import "./styles/Form.css";
45
- var Checkbox = forwardRef(({
46
- "aria-label": ariaLabel,
47
- "aria-labelledby": ariaLabelledby,
48
- children,
49
- disabled,
50
- testId,
51
- checked,
52
- labelClassName,
53
- ...other
54
- }, ref) => {
55
- const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
56
- if (!children && !hasAriaLabel) {
57
- console.warn("If you do not provide children, you must specify an aria-label for accessibility");
58
- }
59
- return /* @__PURE__ */ React.createElement(Label, {
60
- className: labelClassName
61
- }, /* @__PURE__ */ React.createElement("input", {
62
- ...other,
63
- ref,
64
- checked,
65
- "aria-checked": checked ? "true" : "false",
54
+ import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
55
+ var Checkbox = forwardRef(
56
+ ({
66
57
  "aria-label": ariaLabel,
67
58
  "aria-labelledby": ariaLabelledby,
68
- className: "Form-checkbox",
59
+ children,
69
60
  disabled,
70
- "data-test-id": testId,
71
- type: "checkbox"
72
- }), " ", disabled ? /* @__PURE__ */ React.createElement("span", {
73
- className: "Form-label--disabled"
74
- }, children) : children);
75
- });
61
+ testId,
62
+ checked,
63
+ labelClassName,
64
+ ...other
65
+ }, ref) => {
66
+ const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
67
+ if (!children && !hasAriaLabel) {
68
+ console.warn(
69
+ "If you do not provide children, you must specify an aria-label for accessibility"
70
+ );
71
+ }
72
+ return /* @__PURE__ */ jsxs2(Label, {
73
+ className: labelClassName,
74
+ children: [
75
+ /* @__PURE__ */ jsx3("input", {
76
+ ...other,
77
+ ref,
78
+ checked,
79
+ "aria-checked": checked ? "true" : "false",
80
+ "aria-label": ariaLabel,
81
+ "aria-labelledby": ariaLabelledby,
82
+ className: "Form-checkbox",
83
+ disabled,
84
+ "data-test-id": testId,
85
+ type: "checkbox"
86
+ }),
87
+ " ",
88
+ disabled ? /* @__PURE__ */ jsx3("span", {
89
+ className: "Form-label--disabled",
90
+ children
91
+ }) : children
92
+ ]
93
+ });
94
+ }
95
+ );
76
96
  Checkbox.displayName = "Checkbox";
77
97
 
78
98
  // src/CompactTextField.tsx
@@ -88,132 +108,156 @@ import "./styles/FormInput.css";
88
108
  var createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
89
109
 
90
110
  // src/TextField.tsx
91
- var TextField = forwardRef2(({
92
- className,
93
- type = "text",
94
- tiny = false,
95
- readOnly,
96
- tabIndex = 0,
97
- testId,
98
- suffix,
99
- overrideWidth,
100
- ...rest
101
- }, ref) => {
102
- const classes = overrideWidth ? className : cx3("FormInput", `FormInput-${type}`, className, {
103
- "FormInput--tiny": tiny
104
- });
105
- if (suffix) {
106
- return /* @__PURE__ */ React.createElement("div", {
107
- className: "FormInput-suffixContainer"
108
- }, /* @__PURE__ */ React.createElement("input", {
111
+ import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
112
+ var TextField = forwardRef2(
113
+ ({
114
+ className,
115
+ type = "text",
116
+ tiny = false,
117
+ readOnly,
118
+ tabIndex = 0,
119
+ testId,
120
+ suffix,
121
+ overrideWidth,
122
+ ...rest
123
+ }, ref) => {
124
+ const classes = overrideWidth ? className : cx3("FormInput", `FormInput-${type}`, className, {
125
+ "FormInput--tiny": tiny
126
+ });
127
+ if (suffix) {
128
+ return /* @__PURE__ */ jsxs3("div", {
129
+ className: "FormInput-suffixContainer",
130
+ children: [
131
+ /* @__PURE__ */ jsx4("input", {
132
+ ...rest,
133
+ type,
134
+ className: cx3(classes, "FormInput-suffix"),
135
+ readOnly,
136
+ ref,
137
+ "data-test-id": testId,
138
+ "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
139
+ }),
140
+ /* @__PURE__ */ jsx4("label", {
141
+ className: "FormInput-suffix",
142
+ htmlFor: rest.id,
143
+ children: suffix
144
+ })
145
+ ]
146
+ });
147
+ }
148
+ return /* @__PURE__ */ jsx4("input", {
109
149
  ...rest,
110
150
  type,
111
- className: cx3(classes, "FormInput-suffix"),
151
+ className: classes,
112
152
  readOnly,
153
+ tabIndex,
113
154
  ref,
114
155
  "data-test-id": testId,
156
+ style: overrideWidth ? {
157
+ width: overrideWidth
158
+ } : void 0,
115
159
  "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
116
- }), /* @__PURE__ */ React.createElement("label", {
117
- className: "FormInput-suffix",
118
- htmlFor: rest.id
119
- }, suffix));
160
+ });
120
161
  }
121
- return /* @__PURE__ */ React.createElement("input", {
122
- ...rest,
123
- type,
124
- className: classes,
125
- readOnly,
126
- tabIndex,
127
- ref,
128
- "data-test-id": testId,
129
- style: overrideWidth ? {
130
- width: overrideWidth
131
- } : void 0,
132
- "aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
133
- });
134
- });
162
+ );
135
163
  TextField.displayName = "TextField";
136
164
 
137
165
  // src/CompactTextField.tsx
138
166
  import "./styles/CompactTextField.css";
139
167
  import "./styles/FormInput.css";
140
- var CompactTextField = forwardRef3(({ className, id, name, label, type, needsErrorFeedback, value, onFocus, onBlur, ...rest }, ref) => {
141
- const [isActive, setIsActive] = useState((typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0);
142
- const isActiveState = isActive || needsErrorFeedback;
143
- const classes = cx4("CompactTextField", className, {
144
- "is-active": isActiveState
145
- });
146
- const placeholder = isActiveState ? "" : label;
147
- const handleFocus = (event) => {
148
- setIsActive(true);
149
- if (onFocus) {
150
- onFocus(event);
151
- }
152
- };
153
- const handleBlur = (event) => {
154
- const value2 = event.target.value || "";
155
- setIsActive(value2.trim().length !== 0);
156
- if (onBlur) {
157
- onBlur(event);
158
- }
159
- };
160
- return /* @__PURE__ */ React.createElement("div", {
161
- className: classes
162
- }, /* @__PURE__ */ React.createElement(Label, {
163
- htmlFor: id
164
- }, label), /* @__PURE__ */ React.createElement(TextField, {
165
- ...rest,
166
- id,
167
- name,
168
- type,
169
- placeholder,
170
- value,
171
- ref,
172
- onFocus: handleFocus,
173
- onBlur: handleBlur
174
- }));
175
- });
168
+ import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
169
+ var CompactTextField = forwardRef3(
170
+ ({ className, id, name, label, type, needsErrorFeedback, value, onFocus, onBlur, ...rest }, ref) => {
171
+ const [isActive, setIsActive] = useState(
172
+ (typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0
173
+ );
174
+ const isActiveState = isActive || needsErrorFeedback;
175
+ const classes = cx4("CompactTextField", className, {
176
+ "is-active": isActiveState
177
+ });
178
+ const placeholder = isActiveState ? "" : label;
179
+ const handleFocus = (event) => {
180
+ setIsActive(true);
181
+ if (onFocus) {
182
+ onFocus(event);
183
+ }
184
+ };
185
+ const handleBlur = (event) => {
186
+ const value2 = event.target.value || "";
187
+ setIsActive(value2.trim().length !== 0);
188
+ if (onBlur) {
189
+ onBlur(event);
190
+ }
191
+ };
192
+ return /* @__PURE__ */ jsxs4("div", {
193
+ className: classes,
194
+ children: [
195
+ /* @__PURE__ */ jsx5(Label, {
196
+ htmlFor: id,
197
+ children: label
198
+ }),
199
+ /* @__PURE__ */ jsx5(TextField, {
200
+ ...rest,
201
+ id,
202
+ name,
203
+ type,
204
+ placeholder,
205
+ value,
206
+ ref,
207
+ onFocus: handleFocus,
208
+ onBlur: handleBlur
209
+ })
210
+ ]
211
+ });
212
+ }
213
+ );
176
214
  CompactTextField.displayName = "CompactTextField";
177
215
 
178
216
  // src/FieldError.tsx
179
217
  import cx5 from "clsx";
180
218
  import "./styles/Form.css";
219
+ import { jsx as jsx6 } from "react/jsx-runtime";
181
220
  var FieldError = ({ name, errorMessage, className }) => {
182
221
  if (!errorMessage) {
183
222
  return null;
184
223
  }
185
- return /* @__PURE__ */ React.createElement("span", {
224
+ return /* @__PURE__ */ jsx6("span", {
186
225
  className: cx5("Form-fieldError", className),
187
226
  "aria-live": "polite",
188
- id: createFieldErrorId(name)
189
- }, `Error - ${errorMessage}`);
227
+ id: createFieldErrorId(name),
228
+ children: `Error - ${errorMessage}`
229
+ });
190
230
  };
191
231
 
192
232
  // src/FieldSet.tsx
193
233
  import "./styles/FieldSet.css";
234
+ import { jsx as jsx7 } from "react/jsx-runtime";
194
235
  var FieldSet = ({ children, testId }) => {
195
- return /* @__PURE__ */ React.createElement("fieldset", {
236
+ return /* @__PURE__ */ jsx7("fieldset", {
196
237
  className: "FieldSet",
197
- "data-test-id": testId
198
- }, children);
238
+ "data-test-id": testId,
239
+ children
240
+ });
199
241
  };
200
242
 
201
243
  // src/Form.tsx
202
244
  import cx6 from "clsx";
203
245
  import "./styles/Form.css";
246
+ import { jsx as jsx8 } from "react/jsx-runtime";
204
247
  var Form = (props) => {
205
248
  const { id, name, className, inline, children, ariaLabel, hasIncreasedErrorMargin, ...rest } = props;
206
249
  const classes = cx6("Form", className, {
207
250
  "Form--inline": inline,
208
251
  "Form--increasedErrorMargin": !!hasIncreasedErrorMargin
209
252
  });
210
- return /* @__PURE__ */ React.createElement("form", {
253
+ return /* @__PURE__ */ jsx8("form", {
211
254
  id,
212
255
  name,
213
256
  "aria-label": ariaLabel,
214
257
  ...rest,
215
- className: classes
216
- }, children);
258
+ className: classes,
259
+ children
260
+ });
217
261
  };
218
262
 
219
263
  // src/FormField.tsx
@@ -222,31 +266,36 @@ import cx9 from "clsx";
222
266
  // src/FormGroup.tsx
223
267
  import cx7 from "clsx";
224
268
  import "./styles/Form.css";
269
+ import { jsx as jsx9 } from "react/jsx-runtime";
225
270
  var FormGroup = (props) => {
226
271
  const { className, name, ignoreValidation, isInvalid, children, testId, ...other } = props;
227
272
  const classes = cx7("Form-group", className, {
228
273
  "is-invalid": !ignoreValidation && isInvalid
229
274
  });
230
- return /* @__PURE__ */ React.createElement("div", {
275
+ return /* @__PURE__ */ jsx9("div", {
231
276
  className: classes,
232
277
  "data-test-id": testId,
233
- ...other
234
- }, children);
278
+ ...other,
279
+ children
280
+ });
235
281
  };
236
282
 
237
283
  // src/FormHint.tsx
238
284
  import cx8 from "clsx";
239
285
  import "./styles/FormHint.css";
286
+ import { jsx as jsx10 } from "react/jsx-runtime";
240
287
  var FormHint = ({ className, children, ...rest }) => {
241
288
  const classes = cx8("Form-hint", className);
242
- return /* @__PURE__ */ React.createElement("div", {
289
+ return /* @__PURE__ */ jsx10("div", {
243
290
  ...rest,
244
- className: classes
245
- }, children);
291
+ className: classes,
292
+ children
293
+ });
246
294
  };
247
295
 
248
296
  // src/FormField.tsx
249
297
  import "./styles/FormField.css";
298
+ import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
250
299
  var FormField = ({
251
300
  isRequired,
252
301
  label,
@@ -263,49 +312,68 @@ var FormField = ({
263
312
  const handleBlur = () => {
264
313
  onBlur && onBlur(name);
265
314
  };
266
- return /* @__PURE__ */ React.createElement(FormGroup, {
315
+ return /* @__PURE__ */ jsxs5(FormGroup, {
267
316
  className: cx9("FormField", className),
268
317
  name,
269
318
  ignoreValidation,
270
319
  isInvalid,
271
- onBlur: handleBlur
272
- }, label && /* @__PURE__ */ React.createElement("label", {
273
- htmlFor
274
- }, label, isRequired && /* @__PURE__ */ React.createElement(RequiredAsterisk, null)), hint && /* @__PURE__ */ React.createElement(FormHint, {
275
- className: "FormField-hint"
276
- }, hint), children, /* @__PURE__ */ React.createElement(FieldError, {
277
- className: "FormField-errorMessage",
278
- name,
279
- errorMessage
280
- }));
320
+ onBlur: handleBlur,
321
+ children: [
322
+ label && /* @__PURE__ */ jsxs5("label", {
323
+ htmlFor,
324
+ children: [
325
+ label,
326
+ isRequired && /* @__PURE__ */ jsx11(RequiredAsterisk, {})
327
+ ]
328
+ }),
329
+ hint && /* @__PURE__ */ jsx11(FormHint, {
330
+ className: "FormField-hint",
331
+ children: hint
332
+ }),
333
+ children,
334
+ /* @__PURE__ */ jsx11(FieldError, {
335
+ className: "FormField-errorMessage",
336
+ name,
337
+ errorMessage
338
+ })
339
+ ]
340
+ });
281
341
  };
282
342
 
283
343
  // src/IconField.tsx
284
344
  import { IconSize } from "@launchpad-ui/icons";
285
345
  import "./styles/IconField.css";
346
+ import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
286
347
  var IconField = ({ icon, children }) => {
287
348
  const Icon = icon;
288
- return /* @__PURE__ */ React.createElement("div", {
289
- className: "IconField"
290
- }, children, /* @__PURE__ */ React.createElement(Icon, {
291
- size: IconSize.SMALL
292
- }));
349
+ return /* @__PURE__ */ jsxs6("div", {
350
+ className: "IconField",
351
+ children: [
352
+ children,
353
+ /* @__PURE__ */ jsx12(Icon, {
354
+ size: IconSize.SMALL
355
+ })
356
+ ]
357
+ });
293
358
  };
294
359
 
295
360
  // src/InputGroup.tsx
296
361
  import cx10 from "clsx";
297
362
  import "./styles/InputGroup.css";
363
+ import { jsx as jsx13 } from "react/jsx-runtime";
298
364
  var InputGroup = ({ className, children, ...other }) => {
299
365
  const classes = cx10("InputGroup", className);
300
- return /* @__PURE__ */ React.createElement("div", {
366
+ return /* @__PURE__ */ jsx13("div", {
301
367
  ...other,
302
- className: classes
303
- }, children);
368
+ className: classes,
369
+ children
370
+ });
304
371
  };
305
372
 
306
373
  // src/Radio.tsx
307
374
  import cx11 from "clsx";
308
375
  import "./styles/Form.css";
376
+ import { Fragment, jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
309
377
  var Radio = ({
310
378
  "aria-label": ariaLabel,
311
379
  "aria-labelledby": ariaLabelledby,
@@ -323,33 +391,43 @@ var Radio = ({
323
391
  }) => {
324
392
  const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
325
393
  if (!children && !hasAriaLabel) {
326
- console.warn("If you do not provide children, you must specify an aria-label for accessibility");
394
+ console.warn(
395
+ "If you do not provide children, you must specify an aria-label for accessibility"
396
+ );
327
397
  }
328
- return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("input", {
329
- "aria-label": ariaLabel,
330
- "aria-labelledby": ariaLabelledby,
331
- className: cx11("Form-radio", className),
332
- checked,
333
- disabled,
334
- id,
335
- name,
336
- onChange,
337
- type: "radio",
338
- value,
339
- ...props
340
- }), /* @__PURE__ */ React.createElement(Label, {
341
- className: labelClassName,
342
- htmlFor: id,
343
- style: labelStyle
344
- }, disabled ? /* @__PURE__ */ React.createElement("span", {
345
- className: "Form-label--disabled"
346
- }, children) : children));
398
+ return /* @__PURE__ */ jsxs7(Fragment, {
399
+ children: [
400
+ /* @__PURE__ */ jsx14("input", {
401
+ "aria-label": ariaLabel,
402
+ "aria-labelledby": ariaLabelledby,
403
+ className: cx11("Form-radio", className),
404
+ checked,
405
+ disabled,
406
+ id,
407
+ name,
408
+ onChange,
409
+ type: "radio",
410
+ value,
411
+ ...props
412
+ }),
413
+ /* @__PURE__ */ jsx14(Label, {
414
+ className: labelClassName,
415
+ htmlFor: id,
416
+ style: labelStyle,
417
+ children: disabled ? /* @__PURE__ */ jsx14("span", {
418
+ className: "Form-label--disabled",
419
+ children
420
+ }) : children
421
+ })
422
+ ]
423
+ });
347
424
  };
348
425
 
349
426
  // src/RadioGroup.tsx
350
427
  import { VisuallyHidden } from "@react-aria/visually-hidden";
351
428
  import { Children, cloneElement, isValidElement, useRef } from "react";
352
429
  import "./styles/Form.css";
430
+ import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
353
431
  var RadioGroup = (props) => {
354
432
  const { name, value, onChange, children, disabled, legend, ...other } = props;
355
433
  const fieldsetRef = useRef(null);
@@ -390,29 +468,41 @@ var RadioGroup = (props) => {
390
468
  return null;
391
469
  }
392
470
  const radios = Children.map(children, (child) => updateRadioElems(child));
393
- return /* @__PURE__ */ React.createElement("fieldset", {
394
- ref: fieldsetRef
395
- }, legend && /* @__PURE__ */ React.createElement("legend", null, /* @__PURE__ */ React.createElement(VisuallyHidden, null, legend)), /* @__PURE__ */ React.createElement("div", {
396
- ...other
397
- }, radios));
471
+ return /* @__PURE__ */ jsxs8("fieldset", {
472
+ ref: fieldsetRef,
473
+ children: [
474
+ legend && /* @__PURE__ */ jsx15("legend", {
475
+ children: /* @__PURE__ */ jsx15(VisuallyHidden, {
476
+ children: legend
477
+ })
478
+ }),
479
+ /* @__PURE__ */ jsx15("div", {
480
+ ...other,
481
+ children: radios
482
+ })
483
+ ]
484
+ });
398
485
  };
399
486
 
400
487
  // src/Select.tsx
401
488
  import cx12 from "clsx";
402
489
  import "./styles/FormInput.css";
490
+ import { jsx as jsx16 } from "react/jsx-runtime";
403
491
  var Select = ({ className, children, testId, ...rest }) => {
404
492
  const classes = cx12("FormInput", "FormInput-select", className);
405
- return /* @__PURE__ */ React.createElement("select", {
493
+ return /* @__PURE__ */ jsx16("select", {
406
494
  ...rest,
407
495
  className: classes,
408
- "data-test-id": testId
409
- }, children);
496
+ "data-test-id": testId,
497
+ children
498
+ });
410
499
  };
411
500
 
412
501
  // src/TextArea.tsx
413
502
  import cx13 from "clsx";
414
503
  import { forwardRef as forwardRef4 } from "react";
415
504
  import "./styles/FormInput.css";
505
+ import { jsx as jsx17 } from "react/jsx-runtime";
416
506
  var TextArea = forwardRef4(({ className, ...props }, ref) => {
417
507
  const onKeyDown = (e) => {
418
508
  if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
@@ -422,7 +512,7 @@ var TextArea = forwardRef4(({ className, ...props }, ref) => {
422
512
  e.nativeEvent.stopImmediatePropagation();
423
513
  }
424
514
  };
425
- return /* @__PURE__ */ React.createElement("textarea", {
515
+ return /* @__PURE__ */ jsx17("textarea", {
426
516
  ...props,
427
517
  className: cx13("FormInput", className),
428
518
  ref,