@launchpad-ui/form 0.3.2 → 0.3.5
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/CompactTextField.d.ts.map +1 -1
- package/dist/Form.d.ts.map +1 -1
- package/dist/FormGroup.d.ts.map +1 -1
- package/dist/RadioGroup.d.ts.map +1 -1
- package/dist/Select.d.ts +3 -1
- package/dist/Select.d.ts.map +1 -1
- package/dist/TextField.d.ts.map +1 -1
- package/dist/index.es.js +37 -43
- package/dist/index.es.js.map +3 -3
- package/dist/index.js +46 -58
- package/dist/index.js.map +4 -4
- package/dist/styles/RequiredAsterisk.css +1 -1
- package/dist/styles/RequiredAsterisk.css.map +1 -1
- package/dist/styles/styles.css +1 -1
- package/dist/styles/styles.css.map +1 -1
- package/package.json +3 -3
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"CompactTextField.d.ts","sourceRoot":"","sources":["../src/CompactTextField.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAQlD,OAAO,+BAA+B,CAAC;AACvC,OAAO,wBAAwB,CAAC;AAEhC,aAAK,qBAAqB,GAAG,cAAc,GAAG;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF,QAAA,MAAM,gBAAgB;;;;;;WAJb,MAAM;;
|
1
|
+
{"version":3,"file":"CompactTextField.d.ts","sourceRoot":"","sources":["../src/CompactTextField.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAQlD,OAAO,+BAA+B,CAAC;AACvC,OAAO,wBAAwB,CAAC;AAEhC,aAAK,qBAAqB,GAAG,cAAc,GAAG;IAC5C,KAAK,EAAE,MAAM,CAAC;IACd,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B,CAAC;AAEF,QAAA,MAAM,gBAAgB;;;;;;WAJb,MAAM;;oDAmDd,CAAC;AAIF,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAC5B,YAAY,EAAE,qBAAqB,EAAE,CAAC"}
|
package/dist/Form.d.ts.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../src/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI9D,OAAO,mBAAmB,CAAC;AAE3B,aAAK,SAAS,GAAG;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAKhB,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,aAAa,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IACpC,QAAQ,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,IAAI,UAAW,SAAS,
|
1
|
+
{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../src/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI9D,OAAO,mBAAmB,CAAC;AAE3B,aAAK,SAAS,GAAG;IACf,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAKhB,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,aAAa,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IACpC,QAAQ,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,IAAI,UAAW,SAAS,gBAe7B,CAAC;AAEF,OAAO,EAAE,IAAI,EAAE,CAAC;AAChB,YAAY,EAAE,SAAS,EAAE,CAAC"}
|
package/dist/FormGroup.d.ts.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"FormGroup.d.ts","sourceRoot":"","sources":["../src/FormGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,mBAAmB,CAAC;AAE3B,aAAK,cAAc,GAAG;IACpB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,SAAS,UAAW,cAAc,
|
1
|
+
{"version":3,"file":"FormGroup.d.ts","sourceRoot":"","sources":["../src/FormGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,OAAO,mBAAmB,CAAC;AAE3B,aAAK,cAAc,GAAG;IACpB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACzB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,SAAS,UAAW,cAAc,gBAUvC,CAAC;AAEF,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,cAAc,EAAE,CAAC"}
|
package/dist/RadioGroup.d.ts.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../src/RadioGroup.tsx"],"names":[],"mappings":";AAKA,OAAO,mBAAmB,CAAC;AAE3B,aAAK,eAAe,GAAG;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IAC1E;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,QAAA,MAAM,UAAU,UAAW,eAAe,
|
1
|
+
{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../src/RadioGroup.tsx"],"names":[],"mappings":";AAKA,OAAO,mBAAmB,CAAC;AAE3B,aAAK,eAAe,GAAG;IACrB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,IAAI,EAAE,MAAM,CAAC;IACb;;OAEG;IACH,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,GAAG,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IAC1E;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,QAAA,MAAM,UAAU,UAAW,eAAe,gBA2DzC,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,CAAC"}
|
package/dist/Select.d.ts
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import type { ChangeEvent, ReactNode } from 'react';
|
1
|
+
import type { ChangeEvent, FocusEvent, ReactNode } from 'react';
|
2
2
|
import './styles/FormInput.css';
|
3
3
|
declare type SelectProps = {
|
4
4
|
children: ReactNode;
|
@@ -7,8 +7,10 @@ declare type SelectProps = {
|
|
7
7
|
id?: string;
|
8
8
|
name?: string;
|
9
9
|
onChange?(event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>): void;
|
10
|
+
onBlur?(event: FocusEvent<HTMLSelectElement, HTMLElement>): void;
|
10
11
|
testId?: string;
|
11
12
|
value?: number | string;
|
13
|
+
placeholder?: string;
|
12
14
|
'aria-label'?: string;
|
13
15
|
};
|
14
16
|
declare const Select: ({ className, children, testId, ...rest }: SelectProps) => JSX.Element;
|
package/dist/Select.d.ts.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../src/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
1
|
+
{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../src/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIhE,OAAO,wBAAwB,CAAC;AAEhC,aAAK,WAAW,GAAG;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,CAAC,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,GAAG,WAAW,CAAC,iBAAiB,CAAC,GAAG,IAAI,CAAC;IACvF,MAAM,CAAC,CAAC,KAAK,EAAE,UAAU,CAAC,iBAAiB,EAAE,WAAW,CAAC,GAAG,IAAI,CAAC;IACjE,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,QAAA,MAAM,MAAM,6CAA8C,WAAW,gBAQpE,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC;AAClB,YAAY,EAAE,WAAW,EAAE,CAAC"}
|
package/dist/TextField.d.ts.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../src/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAKjD,OAAO,wBAAwB,CAAC;AAGhC,aAAK,cAAc,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;IAC5D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,QAAA,MAAM,SAAS;;;;;
|
1
|
+
{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../src/TextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAKjD,OAAO,wBAAwB,CAAC;AAGhC,aAAK,cAAc,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;IAC5D,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,QAAA,MAAM,SAAS;;;;;oDAyDd,CAAC;AAIF,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,cAAc,EAAE,CAAC"}
|
package/dist/index.es.js
CHANGED
@@ -1,14 +1,11 @@
|
|
1
|
-
// ../../scripts/react-shim.js
|
2
|
-
import * as React from "react";
|
3
|
-
|
4
1
|
// src/Checkbox.tsx
|
5
2
|
import { forwardRef } from "react";
|
6
3
|
|
7
4
|
// src/Label.tsx
|
8
|
-
import cx2 from "
|
5
|
+
import { cx as cx2 } from "classix";
|
9
6
|
|
10
7
|
// src/RequiredAsterisk.tsx
|
11
|
-
import cx from "
|
8
|
+
import { cx } from "classix";
|
12
9
|
import "./styles/RequiredAsterisk.css";
|
13
10
|
import { jsx } from "react/jsx-runtime";
|
14
11
|
var RequiredAsterisk = ({ className, testId, ...rest }) => {
|
@@ -33,7 +30,7 @@ var Label = ({
|
|
33
30
|
optional = false,
|
34
31
|
...other
|
35
32
|
}) => {
|
36
|
-
const classes = cx2("Form-label", className,
|
33
|
+
const classes = cx2("Form-label", className, disabled && "Form-label--disabled");
|
37
34
|
return /* @__PURE__ */ jsxs("label", {
|
38
35
|
...other,
|
39
36
|
className: classes,
|
@@ -96,11 +93,11 @@ var Checkbox = forwardRef(
|
|
96
93
|
Checkbox.displayName = "Checkbox";
|
97
94
|
|
98
95
|
// src/CompactTextField.tsx
|
99
|
-
import cx4 from "
|
96
|
+
import { cx as cx4 } from "classix";
|
100
97
|
import { forwardRef as forwardRef3, useState } from "react";
|
101
98
|
|
102
99
|
// src/TextField.tsx
|
103
|
-
import cx3 from "
|
100
|
+
import { cx as cx3 } from "classix";
|
104
101
|
import { forwardRef as forwardRef2 } from "react";
|
105
102
|
import "./styles/FormInput.css";
|
106
103
|
|
@@ -121,9 +118,7 @@ var TextField = forwardRef2(
|
|
121
118
|
overrideWidth,
|
122
119
|
...rest
|
123
120
|
}, ref) => {
|
124
|
-
const classes = overrideWidth ? className : cx3("FormInput", `FormInput-${type}`, className,
|
125
|
-
"FormInput--tiny": tiny
|
126
|
-
});
|
121
|
+
const classes = overrideWidth ? className : cx3("FormInput", `FormInput-${type}`, className, tiny && "FormInput--tiny");
|
127
122
|
if (suffix) {
|
128
123
|
return /* @__PURE__ */ jsxs3("div", {
|
129
124
|
className: "FormInput-suffixContainer",
|
@@ -172,9 +167,7 @@ var CompactTextField = forwardRef3(
|
|
172
167
|
(typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0
|
173
168
|
);
|
174
169
|
const isActiveState = isActive || needsErrorFeedback;
|
175
|
-
const classes = cx4("CompactTextField", className,
|
176
|
-
"is-active": isActiveState
|
177
|
-
});
|
170
|
+
const classes = cx4("CompactTextField", className, isActiveState && "is-active");
|
178
171
|
const placeholder = isActiveState ? "" : label;
|
179
172
|
const handleFocus = (event) => {
|
180
173
|
setIsActive(true);
|
@@ -214,7 +207,7 @@ var CompactTextField = forwardRef3(
|
|
214
207
|
CompactTextField.displayName = "CompactTextField";
|
215
208
|
|
216
209
|
// src/FieldError.tsx
|
217
|
-
import cx5 from "
|
210
|
+
import { cx as cx5 } from "classix";
|
218
211
|
import "./styles/Form.css";
|
219
212
|
import { jsx as jsx6 } from "react/jsx-runtime";
|
220
213
|
var FieldError = ({ name, errorMessage, className }) => {
|
@@ -241,15 +234,17 @@ var FieldSet = ({ children, testId }) => {
|
|
241
234
|
};
|
242
235
|
|
243
236
|
// src/Form.tsx
|
244
|
-
import cx6 from "
|
237
|
+
import { cx as cx6 } from "classix";
|
245
238
|
import "./styles/Form.css";
|
246
239
|
import { jsx as jsx8 } from "react/jsx-runtime";
|
247
240
|
var Form = (props) => {
|
248
241
|
const { id, name, className, inline, children, ariaLabel, hasIncreasedErrorMargin, ...rest } = props;
|
249
|
-
const classes = cx6(
|
250
|
-
"Form
|
251
|
-
|
252
|
-
|
242
|
+
const classes = cx6(
|
243
|
+
"Form",
|
244
|
+
className,
|
245
|
+
inline && "Form--inline",
|
246
|
+
!!hasIncreasedErrorMargin && "Form--increasedErrorMargin"
|
247
|
+
);
|
253
248
|
return /* @__PURE__ */ jsx8("form", {
|
254
249
|
id,
|
255
250
|
name,
|
@@ -261,17 +256,15 @@ var Form = (props) => {
|
|
261
256
|
};
|
262
257
|
|
263
258
|
// src/FormField.tsx
|
264
|
-
import cx9 from "
|
259
|
+
import { cx as cx9 } from "classix";
|
265
260
|
|
266
261
|
// src/FormGroup.tsx
|
267
|
-
import cx7 from "
|
262
|
+
import { cx as cx7 } from "classix";
|
268
263
|
import "./styles/Form.css";
|
269
264
|
import { jsx as jsx9 } from "react/jsx-runtime";
|
270
265
|
var FormGroup = (props) => {
|
271
266
|
const { className, name, ignoreValidation, isInvalid, children, testId, ...other } = props;
|
272
|
-
const classes = cx7("Form-group", className,
|
273
|
-
"is-invalid": !ignoreValidation && isInvalid
|
274
|
-
});
|
267
|
+
const classes = cx7("Form-group", className, !ignoreValidation && isInvalid && "is-invalid");
|
275
268
|
return /* @__PURE__ */ jsx9("div", {
|
276
269
|
className: classes,
|
277
270
|
"data-test-id": testId,
|
@@ -281,7 +274,7 @@ var FormGroup = (props) => {
|
|
281
274
|
};
|
282
275
|
|
283
276
|
// src/FormHint.tsx
|
284
|
-
import cx8 from "
|
277
|
+
import { cx as cx8 } from "classix";
|
285
278
|
import "./styles/FormHint.css";
|
286
279
|
import { jsx as jsx10 } from "react/jsx-runtime";
|
287
280
|
var FormHint = ({ className, children, ...rest }) => {
|
@@ -358,7 +351,7 @@ var IconField = ({ icon, children }) => {
|
|
358
351
|
};
|
359
352
|
|
360
353
|
// src/InputGroup.tsx
|
361
|
-
import cx10 from "
|
354
|
+
import { cx as cx10 } from "classix";
|
362
355
|
import "./styles/InputGroup.css";
|
363
356
|
import { jsx as jsx13 } from "react/jsx-runtime";
|
364
357
|
var InputGroup = ({ className, children, ...other }) => {
|
@@ -371,7 +364,7 @@ var InputGroup = ({ className, children, ...other }) => {
|
|
371
364
|
};
|
372
365
|
|
373
366
|
// src/Radio.tsx
|
374
|
-
import cx11 from "
|
367
|
+
import { cx as cx11 } from "classix";
|
375
368
|
import "./styles/Form.css";
|
376
369
|
import { Fragment, jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
|
377
370
|
var Radio = ({
|
@@ -435,35 +428,36 @@ var RadioGroup = (props) => {
|
|
435
428
|
if (!isValidElement(elem)) {
|
436
429
|
return elem;
|
437
430
|
}
|
438
|
-
|
439
|
-
|
440
|
-
|
431
|
+
const item = elem;
|
432
|
+
if (item?.type && item.type === Radio) {
|
433
|
+
return cloneElement(item, {
|
434
|
+
...item.props,
|
441
435
|
name,
|
442
|
-
checked:
|
436
|
+
checked: item.props.value === value,
|
443
437
|
onChange,
|
444
|
-
disabled: typeof
|
438
|
+
disabled: typeof item.props?.disabled !== "undefined" ? item.props.disabled : disabled
|
445
439
|
});
|
446
440
|
}
|
447
|
-
if (
|
448
|
-
return cloneElement(
|
449
|
-
...
|
441
|
+
if (item?.type && item.type === Label) {
|
442
|
+
return cloneElement(item, {
|
443
|
+
...item.props,
|
450
444
|
onChange,
|
451
445
|
disabled
|
452
446
|
});
|
453
447
|
}
|
454
|
-
const elemChildren =
|
448
|
+
const elemChildren = item?.props?.children;
|
455
449
|
if (elemChildren) {
|
456
450
|
if (Array.isArray(elemChildren)) {
|
457
|
-
return cloneElement(
|
451
|
+
return cloneElement(item, {
|
458
452
|
children: Children.map(elemChildren, (elemChild) => updateRadioElems(elemChild))
|
459
453
|
});
|
460
454
|
}
|
461
|
-
return cloneElement(
|
455
|
+
return cloneElement(item, {
|
462
456
|
children: updateRadioElems(elemChildren)
|
463
457
|
});
|
464
458
|
}
|
465
|
-
if (
|
466
|
-
return
|
459
|
+
if (item?.type && item.type !== Radio && item.type !== Label) {
|
460
|
+
return item;
|
467
461
|
}
|
468
462
|
return null;
|
469
463
|
}
|
@@ -485,7 +479,7 @@ var RadioGroup = (props) => {
|
|
485
479
|
};
|
486
480
|
|
487
481
|
// src/Select.tsx
|
488
|
-
import cx12 from "
|
482
|
+
import { cx as cx12 } from "classix";
|
489
483
|
import "./styles/FormInput.css";
|
490
484
|
import { jsx as jsx16 } from "react/jsx-runtime";
|
491
485
|
var Select = ({ className, children, testId, ...rest }) => {
|
@@ -499,7 +493,7 @@ var Select = ({ className, children, testId, ...rest }) => {
|
|
499
493
|
};
|
500
494
|
|
501
495
|
// src/TextArea.tsx
|
502
|
-
import cx13 from "
|
496
|
+
import { cx as cx13 } from "classix";
|
503
497
|
import { forwardRef as forwardRef4 } from "react";
|
504
498
|
import "./styles/FormInput.css";
|
505
499
|
import { jsx as jsx17 } from "react/jsx-runtime";
|
package/dist/index.es.js.map
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"version": 3,
|
3
|
-
"sources": ["
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { InputHTMLAttributes } from 'react';\n\nimport { forwardRef } from 'react';\n\nimport { Label } from './Label';\nimport './styles/Form.css';\n\ntype CheckboxProps = InputHTMLAttributes<HTMLInputElement> & {\n /**\n * Use an aria-label if you don't pass in children and don't have a visible label to associate with the input element.\n */\n 'aria-label'?: string;\n /**\n * id attribute of the label text elsewhere in the app, used for screen reader support\n * Use this for cases where you have a visible label on the page that is not close to\n * the input. https://tink.uk/the-difference-between-aria-label-and-aria-labelledby/\n */\n 'aria-labelledby'?: string;\n /**\n * Label for the Checkbox\n */\n children?: React.ReactNode;\n /**\n * The className to pass into the Checkbox's Label component\n */\n labelClassName?: string;\n /**\n * The test id for the data-test-id attribute for React Testing Library support\n */\n testId?: string;\n};\n\nconst Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n (\n {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n children,\n disabled,\n testId,\n checked,\n labelClassName,\n ...other\n },\n ref\n ) => {\n const hasAriaLabel = ariaLabel !== undefined || ariaLabelledby !== undefined;\n if (!children && !hasAriaLabel) {\n console.warn(\n 'If you do not provide children, you must specify an aria-label for accessibility'\n );\n }\n\n return (\n <Label className={labelClassName}>\n <input\n {...other}\n ref={ref}\n checked={checked}\n aria-checked={checked ? 'true' : 'false'}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n className=\"Form-checkbox\"\n disabled={disabled}\n data-test-id={testId}\n type=\"checkbox\"\n />{' '}\n {disabled ? <span className=\"Form-label--disabled\">{children}</span> : children}\n </Label>\n );\n }\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox };\nexport type { CheckboxProps };\n", "import cx from 'clsx';\n\nimport { RequiredAsterisk } from './RequiredAsterisk';\nimport './styles/Form.css';\n\ntype LabelProps = {\n htmlFor?: string;\n required?: boolean;\n optional?: boolean;\n disabled?: boolean;\n children?: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n hidden?: boolean;\n};\n\nconst Label = ({\n htmlFor,\n disabled,\n className,\n children,\n required = false,\n optional = false,\n ...other\n}: LabelProps) => {\n const classes = cx('Form-label', className, { 'Form-label--disabled': disabled });\n return (\n <label {...other} className={classes} htmlFor={htmlFor}>\n {children}\n {optional && !required && <small className=\"Form-labelOptional\">(optional)</small>}\n {required && !optional && <RequiredAsterisk />}\n </label>\n );\n};\n\nexport { Label };\nexport type { LabelProps };\n", "import type { HTMLAttributes } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/RequiredAsterisk.css';\n\ntype RequiredAsteriskProps = HTMLAttributes<HTMLSpanElement> & {\n testId?: string;\n};\n\nconst RequiredAsterisk = ({ className, testId, ...rest }: RequiredAsteriskProps) => {\n const classes = cx('RequiredAsterisk');\n\n return (\n <span className={classes} data-test-id={testId} {...rest}>\n *\n </span>\n );\n};\n\nexport { RequiredAsterisk };\nexport type { RequiredAsteriskProps };\n", "import type { TextFieldProps } from './TextField';\nimport type { FocusEvent } from 'react';\n\nimport cx from 'clsx';\nimport { forwardRef, useState } from 'react';\n\nimport { Label } from './Label';\nimport { TextField } from './TextField';\nimport './styles/CompactTextField.css';\nimport './styles/FormInput.css';\n\ntype CompactTextFieldProps = TextFieldProps & {\n label: string;\n needsErrorFeedback?: boolean;\n};\n\nconst CompactTextField = forwardRef<HTMLInputElement, CompactTextFieldProps>(\n (\n { className, id, name, label, type, needsErrorFeedback, value, onFocus, onBlur, ...rest },\n ref\n ) => {\n const [isActive, setIsActive] = useState(\n (typeof value === 'boolean' || value ? value.toString() : '').trim().length !== 0\n );\n\n const isActiveState = isActive || needsErrorFeedback;\n\n const classes = cx('CompactTextField', className, {\n 'is-active': isActiveState,\n });\n\n const placeholder = isActiveState ? '' : label;\n\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n setIsActive(true);\n if (onFocus) {\n onFocus(event);\n }\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n const value = event.target.value || '';\n setIsActive(value.trim().length !== 0);\n if (onBlur) {\n onBlur(event);\n }\n };\n\n return (\n <div className={classes}>\n <Label htmlFor={id}>{label}</Label>\n <TextField\n {...rest}\n id={id}\n name={name}\n type={type}\n placeholder={placeholder}\n value={value}\n ref={ref}\n onFocus={handleFocus}\n onBlur={handleBlur}\n />\n </div>\n );\n }\n);\n\nCompactTextField.displayName = 'CompactTextField';\n\nexport { CompactTextField };\nexport type { CompactTextFieldProps };\n", "import type { InputHTMLAttributes } from 'react';\n\nimport cx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport './styles/FormInput.css';\nimport { createFieldErrorId } from './utils';\n\ntype TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {\n suffix?: string;\n testId?: string;\n tiny?: boolean;\n overrideWidth?: string;\n};\n\nconst TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n (\n {\n className,\n type = 'text',\n tiny = false,\n readOnly,\n tabIndex = 0,\n testId,\n suffix,\n overrideWidth,\n ...rest\n },\n ref\n ) => {\n const classes = overrideWidth\n ? className\n : cx('FormInput', `FormInput-${type}`, className, {\n 'FormInput--tiny': tiny,\n });\n if (suffix) {\n return (\n <div className=\"FormInput-suffixContainer\">\n <input\n {...rest}\n type={type}\n className={cx(classes, 'FormInput-suffix')}\n readOnly={readOnly}\n ref={ref}\n data-test-id={testId}\n aria-describedby={rest['aria-describedby'] || createFieldErrorId(rest.id)}\n />\n <label className=\"FormInput-suffix\" htmlFor={rest.id}>\n {suffix}\n </label>\n </div>\n );\n }\n\n return (\n <input\n {...rest}\n type={type}\n className={classes}\n readOnly={readOnly}\n tabIndex={tabIndex}\n ref={ref}\n data-test-id={testId}\n style={\n overrideWidth\n ? {\n width: overrideWidth,\n }\n : undefined\n }\n aria-describedby={rest['aria-describedby'] || createFieldErrorId(rest.id)}\n />\n );\n }\n);\n\nTextField.displayName = 'TextField';\n\nexport { TextField };\nexport type { TextFieldProps };\n", "type FieldPath = string | string[];\n\nconst createFieldErrorId = (fieldIdentifier?: FieldPath) =>\n fieldIdentifier ? `${[...fieldIdentifier].join('')}-err` : undefined;\n\nexport { createFieldErrorId };\nexport type { FieldPath };\n", "import type { FieldPath } from './utils';\n\nimport cx from 'clsx';\n\nimport './styles/Form.css';\nimport { createFieldErrorId } from './utils';\n\ntype FieldErrorProps = {\n name: FieldPath;\n errorMessage?: string;\n className?: string;\n};\n\nconst FieldError = ({ name, errorMessage, className }: FieldErrorProps) => {\n if (!errorMessage) {\n return null;\n }\n\n return (\n <span\n className={cx('Form-fieldError', className)}\n aria-live=\"polite\"\n id={createFieldErrorId(name)}\n >\n {`Error - ${errorMessage}`}\n </span>\n );\n};\n\nexport { FieldError };\nexport type { FieldErrorProps };\n", "import type { ReactNode } from 'react';\n\nimport './styles/FieldSet.css';\n\ntype FieldSetProps = {\n children?: ReactNode;\n testId?: string;\n};\n\nconst FieldSet = ({ children, testId }: FieldSetProps) => {\n return (\n <fieldset className=\"FieldSet\" data-test-id={testId}>\n {children}\n </fieldset>\n );\n};\n\nexport { FieldSet };\nexport type { FieldSetProps };\n", "import type { FocusEvent, FormEvent, ReactNode } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/Form.css';\n\ntype FormProps = {\n id?: string;\n name?: string;\n action?: string;\n className?: string;\n inline?: boolean;\n method?: string;\n // Increases margin between form fields to make room for error messages.\n // This prevents the form from shifting when rendering a field error.\n // This may be desired when the form contains external links that will\n // shift while clicking if the form shifts from validation.\n hasIncreasedErrorMargin?: boolean;\n onBlurCapture?(e: FocusEvent): void;\n onSubmit?(e: FormEvent<EventTarget>): void;\n ariaLabel?: string;\n children: ReactNode;\n};\n\nconst Form = (props: FormProps) => {\n const { id, name, className, inline, children, ariaLabel, hasIncreasedErrorMargin, ...rest } =\n props;\n const classes = cx('Form', className, {\n 'Form--inline': inline,\n 'Form--increasedErrorMargin': !!hasIncreasedErrorMargin,\n });\n\n return (\n <form id={id} name={name} aria-label={ariaLabel} {...rest} className={classes}>\n {children}\n </form>\n );\n};\n\nexport { Form };\nexport type { FormProps };\n", "import cx from 'clsx';\n\nimport { FieldError } from './FieldError';\nimport { FormGroup } from './FormGroup';\nimport { FormHint } from './FormHint';\nimport { RequiredAsterisk } from './RequiredAsterisk';\nimport './styles/FormField.css';\n\ntype FormFieldProps = {\n isRequired: boolean;\n label?: string;\n name: string;\n htmlFor: string;\n hint?: string;\n errorMessage?: string;\n ignoreValidation?: boolean;\n isInvalid?: boolean;\n children: JSX.Element;\n className?: string;\n onBlur?: (field: string) => void;\n};\n\nconst FormField = ({\n isRequired,\n label,\n name,\n htmlFor,\n hint,\n errorMessage,\n ignoreValidation,\n isInvalid,\n children,\n className,\n onBlur,\n}: FormFieldProps) => {\n const handleBlur = () => {\n onBlur && onBlur(name);\n };\n\n return (\n <FormGroup\n className={cx('FormField', className)}\n name={name}\n ignoreValidation={ignoreValidation}\n isInvalid={isInvalid}\n onBlur={handleBlur}\n >\n {label && (\n <label htmlFor={htmlFor}>\n {label}\n {isRequired && <RequiredAsterisk />}\n </label>\n )}\n {hint && <FormHint className=\"FormField-hint\">{hint}</FormHint>}\n {children}\n <FieldError className=\"FormField-errorMessage\" name={name} errorMessage={errorMessage} />\n </FormGroup>\n );\n};\n\nexport type { FormFieldProps };\nexport { FormField };\n", "import type { ReactNode } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/Form.css';\n\ntype FormGroupProps = {\n name?: string | string[];\n ignoreValidation?: boolean;\n isInvalid?: boolean;\n className?: string;\n onBlur?: () => void;\n testId?: string;\n children: ReactNode;\n};\n\nconst FormGroup = (props: FormGroupProps) => {\n const { className, name, ignoreValidation, isInvalid, children, testId, ...other } = props;\n\n const classes = cx('Form-group', className, {\n 'is-invalid': !ignoreValidation && isInvalid,\n });\n\n return (\n <div className={classes} data-test-id={testId} {...other}>\n {children}\n </div>\n );\n};\n\nexport { FormGroup };\nexport type { FormGroupProps };\n", "import type { ReactNode } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/FormHint.css';\n\ntype FormHintProps = {\n children: ReactNode;\n className?: string;\n id?: string;\n};\n\nconst FormHint = ({ className, children, ...rest }: FormHintProps) => {\n const classes = cx('Form-hint', className);\n\n return (\n <div {...rest} className={classes}>\n {children}\n </div>\n );\n};\n\nexport { FormHint };\nexport type { FormHintProps };\n", "import type { IconProps } from '@launchpad-ui/icons';\n\nimport { IconSize } from '@launchpad-ui/icons';\n\nimport './styles/IconField.css';\n\ntype IconFieldProps = {\n icon({ ...other }: IconProps): JSX.Element;\n children: JSX.Element | JSX.Element[];\n};\n\nconst IconField = ({ icon, children }: IconFieldProps) => {\n const Icon = icon;\n\n return (\n <div className=\"IconField\">\n {children}\n <Icon size={IconSize.SMALL} />\n </div>\n );\n};\n\nexport { IconField };\nexport type { IconFieldProps };\n", "import type { ComponentPropsWithRef } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/InputGroup.css';\n\ntype InputGroupProps = ComponentPropsWithRef<'div'>;\n\nconst InputGroup = ({ className, children, ...other }: InputGroupProps) => {\n const classes = cx('InputGroup', className);\n\n return (\n <div {...other} className={classes}>\n {children}\n </div>\n );\n};\n\nexport { InputGroup };\nexport type { InputGroupProps };\n", "import cx from 'clsx';\n\nimport { Label } from './Label';\nimport './styles/Form.css';\n\ntype RadioProps = {\n /**\n * Use an aria-label if you don't pass in children and don't have a visible label to associate with the input element.\n */\n 'aria-label'?: string;\n /**\n * id attribute of the label text elsewhere in the app, used for screen reader support. Use this for cases where you have a visible label on the page that **is not close to** to the input. https://tink.uk/the-difference-between-aria-label-and-aria-labelledby/\n */\n 'aria-labelledby'?: string;\n /**\n * Is the Radio checked?\n */\n checked?: boolean;\n /**\n * Label for the Checkbox\n */\n children?: React.ReactNode;\n /**\n * Custom classname(s) to add to the Radio.\n */\n className?: string;\n /**\n * Is the Radio disabled?\n */\n disabled?: boolean;\n /**\n * The id to pair the Radio input with the label for screen reader support.\n */\n id?: string;\n /**\n * The className to pass into the Radio's Label component\n */\n labelClassName?: string;\n /**\n * Name to apply to the underlying Radio. Pass in the same name value to each Radio when grouping in a RadioGroup for screen reader support.\n */\n name?: string;\n /**\n * The function to pass into the Radio onChange synthetic event handler.\n */\n onChange?(e: React.ChangeEvent): void;\n /**\n * Optional inline CSS styles to add to the Radio label.\n */\n labelStyle?: React.CSSProperties;\n /**\n * The value passed into Radio.\n */\n value: number | string;\n};\n\nconst Radio = ({\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n checked = false,\n children,\n className,\n disabled = false,\n id,\n labelClassName,\n name,\n onChange = () => undefined,\n labelStyle,\n value,\n ...props\n}: RadioProps) => {\n const hasAriaLabel = ariaLabel !== undefined || ariaLabelledby !== undefined;\n\n if (!children && !hasAriaLabel) {\n console.warn(\n 'If you do not provide children, you must specify an aria-label for accessibility'\n );\n }\n\n return (\n <>\n <input\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n className={cx('Form-radio', className)}\n checked={checked}\n disabled={disabled}\n id={id}\n name={name}\n onChange={onChange}\n type=\"radio\"\n value={value}\n {...props}\n />\n <Label className={labelClassName} htmlFor={id} style={labelStyle}>\n {disabled ? <span className=\"Form-label--disabled\">{children}</span> : children}\n </Label>\n </>\n );\n};\n\nexport { Radio };\nexport type { RadioProps };\n", "import { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { Children, cloneElement, isValidElement, useRef } from 'react';\n\nimport { Label } from './Label';\nimport { Radio } from './Radio';\nimport './styles/Form.css';\n\ntype RadioGroupProps = {\n /**\n * The legend that describes this groups of radio buttons. The legend\n * is important for screen reader users.\n */\n legend?: string;\n /**\n * The children passed into the RadioGroup.\n */\n children?: React.ReactNode;\n /**\n * Custom classname(s) passed to the fieldset inner div.\n */\n className?: string;\n /**\n * Set the underlying Radio to disabled if the Radio's disabled prop is undefined.\n */\n disabled?: boolean;\n /**\n * The RadioGroup's id.\n */\n id?: string;\n /**\n * Name to apply to the underlying Radio. The same name value is passed to each Radio when grouping in a RadioGroup for screen reader support.\n */\n name: string;\n /**\n * This function is passed into each Radio onChange synthetic event handler.\n */\n onChange?(e: React.ChangeEvent | React.FormEvent<HTMLInputElement>): void;\n /**\n * The value to compare against the Radio's value to determine if the Radio will be checked.\n */\n value: string;\n};\n\nconst RadioGroup = (props: RadioGroupProps) => {\n const { name, value, onChange, children, disabled, legend, ...other } = props;\n const fieldsetRef = useRef<HTMLFieldSetElement>(null);\n\n function updateRadioElems(elem: React.ReactNode): React.ReactNode {\n if (!isValidElement(elem)) {\n return elem;\n }\n\n if (elem?.type && elem.type === Radio) {\n return cloneElement(elem, {\n ...elem.props,\n name,\n checked: elem.props.value === value,\n onChange,\n disabled: typeof elem.props?.disabled !== 'undefined' ? elem.props.disabled : disabled,\n });\n }\n\n if (elem?.type && elem.type === Label) {\n return cloneElement(elem, {\n ...elem.props,\n onChange,\n disabled,\n });\n }\n\n const elemChildren = elem?.props?.children;\n if (elemChildren) {\n if (Array.isArray(elemChildren)) {\n return cloneElement(elem, {\n children: Children.map(elemChildren, (elemChild) => updateRadioElems(elemChild)),\n });\n }\n return cloneElement(elem, {\n children: updateRadioElems(elemChildren),\n });\n }\n\n if (elem?.type && elem.type !== Radio && elem.type !== Label) {\n return elem;\n }\n\n return null;\n }\n\n const radios = Children.map(children, (child) => updateRadioElems(child));\n return (\n <fieldset ref={fieldsetRef}>\n {legend && (\n <legend>\n <VisuallyHidden>{legend}</VisuallyHidden>\n </legend>\n )}\n <div {...other}>{radios}</div>\n </fieldset>\n );\n};\n\nexport { RadioGroup };\nexport type { RadioGroupProps };\n", "import type { ChangeEvent, ReactNode } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/FormInput.css';\n\ntype SelectProps = {\n children: ReactNode;\n className?: string;\n disabled?: boolean;\n id?: string;\n name?: string;\n onChange?(event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>): void;\n testId?: string;\n value?: number | string;\n 'aria-label'?: string;\n};\n\nconst Select = ({ className, children, testId, ...rest }: SelectProps) => {\n const classes = cx('FormInput', 'FormInput-select', className);\n\n return (\n <select {...rest} className={classes} data-test-id={testId}>\n {children}\n </select>\n );\n};\n\nexport { Select };\nexport type { SelectProps };\n", "import type { TextareaHTMLAttributes } from 'react';\n\nimport cx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport './styles/FormInput.css';\nimport { createFieldErrorId } from './utils';\n\ntype TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(({ className, ...props }, ref) => {\n const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n if (\n e.key === 'ArrowRight' ||\n e.key === 'ArrowDown' ||\n e.key === 'ArrowUp' ||\n e.key === 'ArrowLeft'\n ) {\n e.stopPropagation();\n }\n if (e.key === 'Escape') {\n e.nativeEvent.stopImmediatePropagation();\n }\n };\n\n return (\n <textarea\n {...props}\n className={cx('FormInput', className)}\n ref={ref}\n aria-describedby={props['aria-describedby'] || createFieldErrorId(props.id)}\n onKeyDown={onKeyDown}\n />\n );\n});\n\nTextArea.displayName = 'TextArea';\n\nexport { TextArea };\nexport type { TextAreaProps };\n"],
|
5
|
-
"mappings": ";
|
3
|
+
"sources": ["../src/Checkbox.tsx", "../src/Label.tsx", "../src/RequiredAsterisk.tsx", "../src/CompactTextField.tsx", "../src/TextField.tsx", "../src/utils/index.ts", "../src/FieldError.tsx", "../src/FieldSet.tsx", "../src/Form.tsx", "../src/FormField.tsx", "../src/FormGroup.tsx", "../src/FormHint.tsx", "../src/IconField.tsx", "../src/InputGroup.tsx", "../src/Radio.tsx", "../src/RadioGroup.tsx", "../src/Select.tsx", "../src/TextArea.tsx"],
|
4
|
+
"sourcesContent": ["import type { InputHTMLAttributes } from 'react';\n\nimport { forwardRef } from 'react';\n\nimport { Label } from './Label';\nimport './styles/Form.css';\n\ntype CheckboxProps = InputHTMLAttributes<HTMLInputElement> & {\n /**\n * Use an aria-label if you don't pass in children and don't have a visible label to associate with the input element.\n */\n 'aria-label'?: string;\n /**\n * id attribute of the label text elsewhere in the app, used for screen reader support\n * Use this for cases where you have a visible label on the page that is not close to\n * the input. https://tink.uk/the-difference-between-aria-label-and-aria-labelledby/\n */\n 'aria-labelledby'?: string;\n /**\n * Label for the Checkbox\n */\n children?: React.ReactNode;\n /**\n * The className to pass into the Checkbox's Label component\n */\n labelClassName?: string;\n /**\n * The test id for the data-test-id attribute for React Testing Library support\n */\n testId?: string;\n};\n\nconst Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n (\n {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n children,\n disabled,\n testId,\n checked,\n labelClassName,\n ...other\n },\n ref\n ) => {\n const hasAriaLabel = ariaLabel !== undefined || ariaLabelledby !== undefined;\n if (!children && !hasAriaLabel) {\n console.warn(\n 'If you do not provide children, you must specify an aria-label for accessibility'\n );\n }\n\n return (\n <Label className={labelClassName}>\n <input\n {...other}\n ref={ref}\n checked={checked}\n aria-checked={checked ? 'true' : 'false'}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n className=\"Form-checkbox\"\n disabled={disabled}\n data-test-id={testId}\n type=\"checkbox\"\n />{' '}\n {disabled ? <span className=\"Form-label--disabled\">{children}</span> : children}\n </Label>\n );\n }\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox };\nexport type { CheckboxProps };\n", "import { cx } from 'classix';\n\nimport { RequiredAsterisk } from './RequiredAsterisk';\nimport './styles/Form.css';\n\ntype LabelProps = {\n htmlFor?: string;\n required?: boolean;\n optional?: boolean;\n disabled?: boolean;\n children?: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n hidden?: boolean;\n};\n\nconst Label = ({\n htmlFor,\n disabled,\n className,\n children,\n required = false,\n optional = false,\n ...other\n}: LabelProps) => {\n const classes = cx('Form-label', className, disabled && 'Form-label--disabled');\n return (\n <label {...other} className={classes} htmlFor={htmlFor}>\n {children}\n {optional && !required && <small className=\"Form-labelOptional\">(optional)</small>}\n {required && !optional && <RequiredAsterisk />}\n </label>\n );\n};\n\nexport { Label };\nexport type { LabelProps };\n", "import type { HTMLAttributes } from 'react';\n\nimport { cx } from 'classix';\n\nimport './styles/RequiredAsterisk.css';\n\ntype RequiredAsteriskProps = HTMLAttributes<HTMLSpanElement> & {\n testId?: string;\n};\n\nconst RequiredAsterisk = ({ className, testId, ...rest }: RequiredAsteriskProps) => {\n const classes = cx('RequiredAsterisk');\n\n return (\n <span className={classes} data-test-id={testId} {...rest}>\n *\n </span>\n );\n};\n\nexport { RequiredAsterisk };\nexport type { RequiredAsteriskProps };\n", "import type { TextFieldProps } from './TextField';\nimport type { FocusEvent } from 'react';\n\nimport { cx } from 'classix';\nimport { forwardRef, useState } from 'react';\n\nimport { Label } from './Label';\nimport { TextField } from './TextField';\nimport './styles/CompactTextField.css';\nimport './styles/FormInput.css';\n\ntype CompactTextFieldProps = TextFieldProps & {\n label: string;\n needsErrorFeedback?: boolean;\n};\n\nconst CompactTextField = forwardRef<HTMLInputElement, CompactTextFieldProps>(\n (\n { className, id, name, label, type, needsErrorFeedback, value, onFocus, onBlur, ...rest },\n ref\n ) => {\n const [isActive, setIsActive] = useState(\n (typeof value === 'boolean' || value ? value.toString() : '').trim().length !== 0\n );\n\n const isActiveState = isActive || needsErrorFeedback;\n\n const classes = cx('CompactTextField', className, isActiveState && 'is-active');\n\n const placeholder = isActiveState ? '' : label;\n\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n setIsActive(true);\n if (onFocus) {\n onFocus(event);\n }\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n const value = event.target.value || '';\n setIsActive(value.trim().length !== 0);\n if (onBlur) {\n onBlur(event);\n }\n };\n\n return (\n <div className={classes}>\n <Label htmlFor={id}>{label}</Label>\n <TextField\n {...rest}\n id={id}\n name={name}\n type={type}\n placeholder={placeholder}\n value={value}\n ref={ref}\n onFocus={handleFocus}\n onBlur={handleBlur}\n />\n </div>\n );\n }\n);\n\nCompactTextField.displayName = 'CompactTextField';\n\nexport { CompactTextField };\nexport type { CompactTextFieldProps };\n", "import type { InputHTMLAttributes } from 'react';\n\nimport { cx } from 'classix';\nimport { forwardRef } from 'react';\n\nimport './styles/FormInput.css';\nimport { createFieldErrorId } from './utils';\n\ntype TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {\n suffix?: string;\n testId?: string;\n tiny?: boolean;\n overrideWidth?: string;\n};\n\nconst TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n (\n {\n className,\n type = 'text',\n tiny = false,\n readOnly,\n tabIndex = 0,\n testId,\n suffix,\n overrideWidth,\n ...rest\n },\n ref\n ) => {\n const classes = overrideWidth\n ? className\n : cx('FormInput', `FormInput-${type}`, className, tiny && 'FormInput--tiny');\n if (suffix) {\n return (\n <div className=\"FormInput-suffixContainer\">\n <input\n {...rest}\n type={type}\n className={cx(classes, 'FormInput-suffix')}\n readOnly={readOnly}\n ref={ref}\n data-test-id={testId}\n aria-describedby={rest['aria-describedby'] || createFieldErrorId(rest.id)}\n />\n <label className=\"FormInput-suffix\" htmlFor={rest.id}>\n {suffix}\n </label>\n </div>\n );\n }\n\n return (\n <input\n {...rest}\n type={type}\n className={classes}\n readOnly={readOnly}\n tabIndex={tabIndex}\n ref={ref}\n data-test-id={testId}\n style={\n overrideWidth\n ? {\n width: overrideWidth,\n }\n : undefined\n }\n aria-describedby={rest['aria-describedby'] || createFieldErrorId(rest.id)}\n />\n );\n }\n);\n\nTextField.displayName = 'TextField';\n\nexport { TextField };\nexport type { TextFieldProps };\n", "type FieldPath = string | string[];\n\nconst createFieldErrorId = (fieldIdentifier?: FieldPath) =>\n fieldIdentifier ? `${[...fieldIdentifier].join('')}-err` : undefined;\n\nexport { createFieldErrorId };\nexport type { FieldPath };\n", "import type { FieldPath } from './utils';\n\nimport { cx } from 'classix';\n\nimport './styles/Form.css';\nimport { createFieldErrorId } from './utils';\n\ntype FieldErrorProps = {\n name: FieldPath;\n errorMessage?: string;\n className?: string;\n};\n\nconst FieldError = ({ name, errorMessage, className }: FieldErrorProps) => {\n if (!errorMessage) {\n return null;\n }\n\n return (\n <span\n className={cx('Form-fieldError', className)}\n aria-live=\"polite\"\n id={createFieldErrorId(name)}\n >\n {`Error - ${errorMessage}`}\n </span>\n );\n};\n\nexport { FieldError };\nexport type { FieldErrorProps };\n", "import type { ReactNode } from 'react';\n\nimport './styles/FieldSet.css';\n\ntype FieldSetProps = {\n children?: ReactNode;\n testId?: string;\n};\n\nconst FieldSet = ({ children, testId }: FieldSetProps) => {\n return (\n <fieldset className=\"FieldSet\" data-test-id={testId}>\n {children}\n </fieldset>\n );\n};\n\nexport { FieldSet };\nexport type { FieldSetProps };\n", "import type { FocusEvent, FormEvent, ReactNode } from 'react';\n\nimport { cx } from 'classix';\n\nimport './styles/Form.css';\n\ntype FormProps = {\n id?: string;\n name?: string;\n action?: string;\n className?: string;\n inline?: boolean;\n method?: string;\n // Increases margin between form fields to make room for error messages.\n // This prevents the form from shifting when rendering a field error.\n // This may be desired when the form contains external links that will\n // shift while clicking if the form shifts from validation.\n hasIncreasedErrorMargin?: boolean;\n onBlurCapture?(e: FocusEvent): void;\n onSubmit?(e: FormEvent<EventTarget>): void;\n ariaLabel?: string;\n children: ReactNode;\n};\n\nconst Form = (props: FormProps) => {\n const { id, name, className, inline, children, ariaLabel, hasIncreasedErrorMargin, ...rest } =\n props;\n const classes = cx(\n 'Form',\n className,\n inline && 'Form--inline',\n !!hasIncreasedErrorMargin && 'Form--increasedErrorMargin'\n );\n\n return (\n <form id={id} name={name} aria-label={ariaLabel} {...rest} className={classes}>\n {children}\n </form>\n );\n};\n\nexport { Form };\nexport type { FormProps };\n", "import { cx } from 'classix';\n\nimport { FieldError } from './FieldError';\nimport { FormGroup } from './FormGroup';\nimport { FormHint } from './FormHint';\nimport { RequiredAsterisk } from './RequiredAsterisk';\nimport './styles/FormField.css';\n\ntype FormFieldProps = {\n isRequired: boolean;\n label?: string;\n name: string;\n htmlFor: string;\n hint?: string;\n errorMessage?: string;\n ignoreValidation?: boolean;\n isInvalid?: boolean;\n children: JSX.Element;\n className?: string;\n onBlur?: (field: string) => void;\n};\n\nconst FormField = ({\n isRequired,\n label,\n name,\n htmlFor,\n hint,\n errorMessage,\n ignoreValidation,\n isInvalid,\n children,\n className,\n onBlur,\n}: FormFieldProps) => {\n const handleBlur = () => {\n onBlur && onBlur(name);\n };\n\n return (\n <FormGroup\n className={cx('FormField', className)}\n name={name}\n ignoreValidation={ignoreValidation}\n isInvalid={isInvalid}\n onBlur={handleBlur}\n >\n {label && (\n <label htmlFor={htmlFor}>\n {label}\n {isRequired && <RequiredAsterisk />}\n </label>\n )}\n {hint && <FormHint className=\"FormField-hint\">{hint}</FormHint>}\n {children}\n <FieldError className=\"FormField-errorMessage\" name={name} errorMessage={errorMessage} />\n </FormGroup>\n );\n};\n\nexport type { FormFieldProps };\nexport { FormField };\n", "import type { ReactNode } from 'react';\n\nimport { cx } from 'classix';\n\nimport './styles/Form.css';\n\ntype FormGroupProps = {\n name?: string | string[];\n ignoreValidation?: boolean;\n isInvalid?: boolean;\n className?: string;\n onBlur?: () => void;\n testId?: string;\n children: ReactNode;\n};\n\nconst FormGroup = (props: FormGroupProps) => {\n const { className, name, ignoreValidation, isInvalid, children, testId, ...other } = props;\n\n const classes = cx('Form-group', className, !ignoreValidation && isInvalid && 'is-invalid');\n\n return (\n <div className={classes} data-test-id={testId} {...other}>\n {children}\n </div>\n );\n};\n\nexport { FormGroup };\nexport type { FormGroupProps };\n", "import type { ReactNode } from 'react';\n\nimport { cx } from 'classix';\n\nimport './styles/FormHint.css';\n\ntype FormHintProps = {\n children: ReactNode;\n className?: string;\n id?: string;\n};\n\nconst FormHint = ({ className, children, ...rest }: FormHintProps) => {\n const classes = cx('Form-hint', className);\n\n return (\n <div {...rest} className={classes}>\n {children}\n </div>\n );\n};\n\nexport { FormHint };\nexport type { FormHintProps };\n", "import type { IconProps } from '@launchpad-ui/icons';\n\nimport { IconSize } from '@launchpad-ui/icons';\n\nimport './styles/IconField.css';\n\ntype IconFieldProps = {\n icon({ ...other }: IconProps): JSX.Element;\n children: JSX.Element | JSX.Element[];\n};\n\nconst IconField = ({ icon, children }: IconFieldProps) => {\n const Icon = icon;\n\n return (\n <div className=\"IconField\">\n {children}\n <Icon size={IconSize.SMALL} />\n </div>\n );\n};\n\nexport { IconField };\nexport type { IconFieldProps };\n", "import type { ComponentPropsWithRef } from 'react';\n\nimport { cx } from 'classix';\n\nimport './styles/InputGroup.css';\n\ntype InputGroupProps = ComponentPropsWithRef<'div'>;\n\nconst InputGroup = ({ className, children, ...other }: InputGroupProps) => {\n const classes = cx('InputGroup', className);\n\n return (\n <div {...other} className={classes}>\n {children}\n </div>\n );\n};\n\nexport { InputGroup };\nexport type { InputGroupProps };\n", "import { cx } from 'classix';\n\nimport { Label } from './Label';\nimport './styles/Form.css';\n\ntype RadioProps = {\n /**\n * Use an aria-label if you don't pass in children and don't have a visible label to associate with the input element.\n */\n 'aria-label'?: string;\n /**\n * id attribute of the label text elsewhere in the app, used for screen reader support. Use this for cases where you have a visible label on the page that **is not close to** to the input. https://tink.uk/the-difference-between-aria-label-and-aria-labelledby/\n */\n 'aria-labelledby'?: string;\n /**\n * Is the Radio checked?\n */\n checked?: boolean;\n /**\n * Label for the Checkbox\n */\n children?: React.ReactNode;\n /**\n * Custom classname(s) to add to the Radio.\n */\n className?: string;\n /**\n * Is the Radio disabled?\n */\n disabled?: boolean;\n /**\n * The id to pair the Radio input with the label for screen reader support.\n */\n id?: string;\n /**\n * The className to pass into the Radio's Label component\n */\n labelClassName?: string;\n /**\n * Name to apply to the underlying Radio. Pass in the same name value to each Radio when grouping in a RadioGroup for screen reader support.\n */\n name?: string;\n /**\n * The function to pass into the Radio onChange synthetic event handler.\n */\n onChange?(e: React.ChangeEvent): void;\n /**\n * Optional inline CSS styles to add to the Radio label.\n */\n labelStyle?: React.CSSProperties;\n /**\n * The value passed into Radio.\n */\n value: number | string;\n};\n\nconst Radio = ({\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n checked = false,\n children,\n className,\n disabled = false,\n id,\n labelClassName,\n name,\n onChange = () => undefined,\n labelStyle,\n value,\n ...props\n}: RadioProps) => {\n const hasAriaLabel = ariaLabel !== undefined || ariaLabelledby !== undefined;\n\n if (!children && !hasAriaLabel) {\n console.warn(\n 'If you do not provide children, you must specify an aria-label for accessibility'\n );\n }\n\n return (\n <>\n <input\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n className={cx('Form-radio', className)}\n checked={checked}\n disabled={disabled}\n id={id}\n name={name}\n onChange={onChange}\n type=\"radio\"\n value={value}\n {...props}\n />\n <Label className={labelClassName} htmlFor={id} style={labelStyle}>\n {disabled ? <span className=\"Form-label--disabled\">{children}</span> : children}\n </Label>\n </>\n );\n};\n\nexport { Radio };\nexport type { RadioProps };\n", "import { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { Children, cloneElement, isValidElement, useRef } from 'react';\n\nimport { Label } from './Label';\nimport { Radio } from './Radio';\nimport './styles/Form.css';\n\ntype RadioGroupProps = {\n /**\n * The legend that describes this groups of radio buttons. The legend\n * is important for screen reader users.\n */\n legend?: string;\n /**\n * The children passed into the RadioGroup.\n */\n children?: React.ReactNode;\n /**\n * Custom classname(s) passed to the fieldset inner div.\n */\n className?: string;\n /**\n * Set the underlying Radio to disabled if the Radio's disabled prop is undefined.\n */\n disabled?: boolean;\n /**\n * The RadioGroup's id.\n */\n id?: string;\n /**\n * Name to apply to the underlying Radio. The same name value is passed to each Radio when grouping in a RadioGroup for screen reader support.\n */\n name: string;\n /**\n * This function is passed into each Radio onChange synthetic event handler.\n */\n onChange?(e: React.ChangeEvent | React.FormEvent<HTMLInputElement>): void;\n /**\n * The value to compare against the Radio's value to determine if the Radio will be checked.\n */\n value: string;\n};\n\nconst RadioGroup = (props: RadioGroupProps) => {\n const { name, value, onChange, children, disabled, legend, ...other } = props;\n const fieldsetRef = useRef<HTMLFieldSetElement>(null);\n\n function updateRadioElems(elem: React.ReactNode): React.ReactNode {\n if (!isValidElement(elem)) {\n return elem;\n }\n\n const item = elem as React.ReactElement;\n\n if (item?.type && item.type === Radio) {\n return cloneElement(item, {\n ...item.props,\n name,\n checked: item.props.value === value,\n onChange,\n disabled: typeof item.props?.disabled !== 'undefined' ? item.props.disabled : disabled,\n });\n }\n\n if (item?.type && item.type === Label) {\n return cloneElement(item, {\n ...item.props,\n onChange,\n disabled,\n });\n }\n\n const elemChildren = item?.props?.children;\n if (elemChildren) {\n if (Array.isArray(elemChildren)) {\n return cloneElement(item, {\n children: Children.map(elemChildren, (elemChild) => updateRadioElems(elemChild)),\n });\n }\n return cloneElement(item, {\n children: updateRadioElems(elemChildren),\n });\n }\n\n if (item?.type && item.type !== Radio && item.type !== Label) {\n return item;\n }\n\n return null;\n }\n\n const radios = Children.map(children, (child) => updateRadioElems(child));\n return (\n <fieldset ref={fieldsetRef}>\n {legend && (\n <legend>\n <VisuallyHidden>{legend}</VisuallyHidden>\n </legend>\n )}\n <div {...other}>{radios}</div>\n </fieldset>\n );\n};\n\nexport { RadioGroup };\nexport type { RadioGroupProps };\n", "import type { ChangeEvent, FocusEvent, ReactNode } from 'react';\n\nimport { cx } from 'classix';\n\nimport './styles/FormInput.css';\n\ntype SelectProps = {\n children: ReactNode;\n className?: string;\n disabled?: boolean;\n id?: string;\n name?: string;\n onChange?(event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>): void;\n onBlur?(event: FocusEvent<HTMLSelectElement, HTMLElement>): void;\n testId?: string;\n value?: number | string;\n placeholder?: string;\n 'aria-label'?: string;\n};\n\nconst Select = ({ className, children, testId, ...rest }: SelectProps) => {\n const classes = cx('FormInput', 'FormInput-select', className);\n\n return (\n <select {...rest} className={classes} data-test-id={testId}>\n {children}\n </select>\n );\n};\n\nexport { Select };\nexport type { SelectProps };\n", "import type { TextareaHTMLAttributes } from 'react';\n\nimport { cx } from 'classix';\nimport { forwardRef } from 'react';\n\nimport './styles/FormInput.css';\nimport { createFieldErrorId } from './utils';\n\ntype TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(({ className, ...props }, ref) => {\n const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n if (\n e.key === 'ArrowRight' ||\n e.key === 'ArrowDown' ||\n e.key === 'ArrowUp' ||\n e.key === 'ArrowLeft'\n ) {\n e.stopPropagation();\n }\n if (e.key === 'Escape') {\n e.nativeEvent.stopImmediatePropagation();\n }\n };\n\n return (\n <textarea\n {...props}\n className={cx('FormInput', className)}\n ref={ref}\n aria-describedby={props['aria-describedby'] || createFieldErrorId(props.id)}\n onKeyDown={onKeyDown}\n />\n );\n});\n\nTextArea.displayName = 'TextArea';\n\nexport { TextArea };\nexport type { TextAreaProps };\n"],
|
5
|
+
"mappings": ";AAEA,SAAS,kBAAkB;;;ACF3B,SAAS,MAAAA,WAAU;;;ACEnB,SAAS,UAAU;AAEnB,OAAO;AAUH;AAJJ,IAAM,mBAAmB,CAAC,EAAE,WAAW,WAAW,KAAK,MAA6B;AAClF,QAAM,UAAU,GAAG,kBAAkB;AAErC,SACE,oBAAC;AAAA,IAAK,WAAW;AAAA,IAAS,gBAAc;AAAA,IAAS,GAAG;AAAA,IAAM;AAAA,GAE1D;AAEJ;;;ADfA,OAAO;AAwBH,SAE4B,OAAAC,MAF5B;AAXJ,IAAM,QAAQ,CAAC;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,WAAW;AAAA,KACR;AACL,MAAkB;AAChB,QAAM,UAAUC,IAAG,cAAc,WAAW,YAAY,sBAAsB;AAC9E,SACE,qBAAC;AAAA,IAAO,GAAG;AAAA,IAAO,WAAW;AAAA,IAAS;AAAA,IACnC;AAAA;AAAA,MACA,YAAY,CAAC,YAAY,gBAAAD,KAAC;AAAA,QAAM,WAAU;AAAA,QAAqB;AAAA,OAAU;AAAA,MACzE,YAAY,CAAC,YAAY,gBAAAA,KAAC,oBAAiB;AAAA;AAAA,GAC9C;AAEJ;;;AD5BA,OAAO;AAiDD,SACE,OAAAE,MADF,QAAAC,aAAA;AAtBN,IAAM,WAAW;AAAA,EACf,CACE;AAAA,IACE,cAAc;AAAA,IACd,mBAAmB;AAAA,IACnB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,OACG;AAAA,EACL,GACA,QACG;AACH,UAAM,eAAe,cAAc,UAAa,mBAAmB;AACnE,QAAI,CAAC,YAAY,CAAC,cAAc;AAC9B,cAAQ;AAAA,QACN;AAAA,MACF;AAAA,IACF;AAEA,WACE,gBAAAA,MAAC;AAAA,MAAM,WAAW;AAAA,MAChB;AAAA,wBAAAD,KAAC;AAAA,UACE,GAAG;AAAA,UACJ;AAAA,UACA;AAAA,UACA,gBAAc,UAAU,SAAS;AAAA,UACjC,cAAY;AAAA,UACZ,mBAAiB;AAAA,UACjB,WAAU;AAAA,UACV;AAAA,UACA,gBAAc;AAAA,UACd,MAAK;AAAA,SACP;AAAA,QAAG;AAAA,QACF,WAAW,gBAAAA,KAAC;AAAA,UAAK,WAAU;AAAA,UAAwB;AAAA,SAAS,IAAU;AAAA;AAAA,KACzE;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;;;AGtEvB,SAAS,MAAAE,WAAU;AACnB,SAAS,cAAAC,aAAY,gBAAgB;;;ACFrC,SAAS,MAAAC,WAAU;AACnB,SAAS,cAAAC,mBAAkB;AAE3B,OAAO;;;ACHP,IAAM,qBAAqB,CAAC,oBAC1B,kBAAkB,GAAG,CAAC,GAAG,eAAe,EAAE,KAAK,EAAE,UAAU;;;ADgCrD,SACE,OAAAC,MADF,QAAAC,aAAA;AApBR,IAAM,YAAYC;AAAA,EAChB,CACE;AAAA,IACE;AAAA,IACA,OAAO;AAAA,IACP,OAAO;AAAA,IACP;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,OACG;AAAA,EACL,GACA,QACG;AACH,UAAM,UAAU,gBACZ,YACAC,IAAG,aAAa,aAAa,QAAQ,WAAW,QAAQ,iBAAiB;AAC7E,QAAI,QAAQ;AACV,aACE,gBAAAF,MAAC;AAAA,QAAI,WAAU;AAAA,QACb;AAAA,0BAAAD,KAAC;AAAA,YACE,GAAG;AAAA,YACJ;AAAA,YACA,WAAWG,IAAG,SAAS,kBAAkB;AAAA,YACzC;AAAA,YACA;AAAA,YACA,gBAAc;AAAA,YACd,oBAAkB,KAAK,uBAAuB,mBAAmB,KAAK,EAAE;AAAA,WAC1E;AAAA,UACA,gBAAAH,KAAC;AAAA,YAAM,WAAU;AAAA,YAAmB,SAAS,KAAK;AAAA,YAC/C;AAAA,WACH;AAAA;AAAA,OACF;AAAA,IAEJ;AAEA,WACE,gBAAAA,KAAC;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MACA,gBAAc;AAAA,MACd,OACE,gBACI;AAAA,QACE,OAAO;AAAA,MACT,IACA;AAAA,MAEN,oBAAkB,KAAK,uBAAuB,mBAAmB,KAAK,EAAE;AAAA,KAC1E;AAAA,EAEJ;AACF;AAEA,UAAU,cAAc;;;ADlExB,OAAO;AACP,OAAO;AAsCD,SACE,OAAAI,MADF,QAAAC,aAAA;AA/BN,IAAM,mBAAmBC;AAAA,EACvB,CACE,EAAE,WAAW,IAAI,MAAM,OAAO,MAAM,oBAAoB,OAAO,SAAS,WAAW,KAAK,GACxF,QACG;AACH,UAAM,CAAC,UAAU,WAAW,IAAI;AAAA,OAC7B,OAAO,UAAU,aAAa,QAAQ,MAAM,SAAS,IAAI,IAAI,KAAK,EAAE,WAAW;AAAA,IAClF;AAEA,UAAM,gBAAgB,YAAY;AAElC,UAAM,UAAUC,IAAG,oBAAoB,WAAW,iBAAiB,WAAW;AAE9E,UAAM,cAAc,gBAAgB,KAAK;AAEzC,UAAM,cAAc,CAAC,UAAwC;AAC3D,kBAAY,IAAI;AAChB,UAAI,SAAS;AACX,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF;AAEA,UAAM,aAAa,CAAC,UAAwC;AAC1D,YAAMC,SAAQ,MAAM,OAAO,SAAS;AACpC,kBAAYA,OAAM,KAAK,EAAE,WAAW,CAAC;AACrC,UAAI,QAAQ;AACV,eAAO,KAAK;AAAA,MACd;AAAA,IACF;AAEA,WACE,gBAAAH,MAAC;AAAA,MAAI,WAAW;AAAA,MACd;AAAA,wBAAAD,KAAC;AAAA,UAAM,SAAS;AAAA,UAAK;AAAA,SAAM;AAAA,QAC3B,gBAAAA,KAAC;AAAA,UACE,GAAG;AAAA,UACJ;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA,SAAS;AAAA,UACT,QAAQ;AAAA,SACV;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;;;AG/D/B,SAAS,MAAAK,WAAU;AAEnB,OAAO;AAeH,gBAAAC,YAAA;AANJ,IAAM,aAAa,CAAC,EAAE,MAAM,cAAc,UAAU,MAAuB;AACzE,MAAI,CAAC,cAAc;AACjB,WAAO;AAAA,EACT;AAEA,SACE,gBAAAA,KAAC;AAAA,IACC,WAAWC,IAAG,mBAAmB,SAAS;AAAA,IAC1C,aAAU;AAAA,IACV,IAAI,mBAAmB,IAAI;AAAA,IAE1B,qBAAW;AAAA,GACd;AAEJ;;;ACzBA,OAAO;AASH,gBAAAC,YAAA;AAFJ,IAAM,WAAW,CAAC,EAAE,UAAU,OAAO,MAAqB;AACxD,SACE,gBAAAA,KAAC;AAAA,IAAS,WAAU;AAAA,IAAW,gBAAc;AAAA,IAC1C;AAAA,GACH;AAEJ;;;ACbA,SAAS,MAAAC,WAAU;AAEnB,OAAO;AA+BH,gBAAAC,YAAA;AAXJ,IAAM,OAAO,CAAC,UAAqB;AACjC,QAAM,EAAE,IAAI,MAAM,WAAW,QAAQ,UAAU,WAAW,4BAA4B,KAAK,IACzF;AACF,QAAM,UAAUD;AAAA,IACd;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,CAAC,CAAC,2BAA2B;AAAA,EAC/B;AAEA,SACE,gBAAAC,KAAC;AAAA,IAAK;AAAA,IAAQ;AAAA,IAAY,cAAY;AAAA,IAAY,GAAG;AAAA,IAAM,WAAW;AAAA,IACnE;AAAA,GACH;AAEJ;;;ACvCA,SAAS,MAAAC,WAAU;;;ACEnB,SAAS,MAAAC,WAAU;AAEnB,OAAO;AAkBH,gBAAAC,YAAA;AANJ,IAAM,YAAY,CAAC,UAA0B;AAC3C,QAAM,EAAE,WAAW,MAAM,kBAAkB,WAAW,UAAU,WAAW,MAAM,IAAI;AAErF,QAAM,UAAUD,IAAG,cAAc,WAAW,CAAC,oBAAoB,aAAa,YAAY;AAE1F,SACE,gBAAAC,KAAC;AAAA,IAAI,WAAW;AAAA,IAAS,gBAAc;AAAA,IAAS,GAAG;AAAA,IAChD;AAAA,GACH;AAEJ;;;ACxBA,SAAS,MAAAC,WAAU;AAEnB,OAAO;AAYH,gBAAAC,aAAA;AAJJ,IAAM,WAAW,CAAC,EAAE,WAAW,aAAa,KAAK,MAAqB;AACpE,QAAM,UAAUD,IAAG,aAAa,SAAS;AAEzC,SACE,gBAAAC,MAAC;AAAA,IAAK,GAAG;AAAA,IAAM,WAAW;AAAA,IACvB;AAAA,GACH;AAEJ;;;AFdA,OAAO;AA0CC,SAEiB,OAAAC,OAFjB,QAAAC,aAAA;AA1BR,IAAM,YAAY,CAAC;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAsB;AACpB,QAAM,aAAa,MAAM;AACvB,cAAU,OAAO,IAAI;AAAA,EACvB;AAEA,SACE,gBAAAA,MAAC;AAAA,IACC,WAAWC,IAAG,aAAa,SAAS;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IAEP;AAAA,eACC,gBAAAD,MAAC;AAAA,QAAM;AAAA,QACJ;AAAA;AAAA,UACA,cAAc,gBAAAD,MAAC,oBAAiB;AAAA;AAAA,OACnC;AAAA,MAED,QAAQ,gBAAAA,MAAC;AAAA,QAAS,WAAU;AAAA,QAAkB;AAAA,OAAK;AAAA,MACnD;AAAA,MACD,gBAAAA,MAAC;AAAA,QAAW,WAAU;AAAA,QAAyB;AAAA,QAAY;AAAA,OAA4B;AAAA;AAAA,GACzF;AAEJ;;;AGxDA,SAAS,gBAAgB;AAEzB,OAAO;AAWH,SAEE,OAAAG,OAFF,QAAAC,aAAA;AAJJ,IAAM,YAAY,CAAC,EAAE,MAAM,SAAS,MAAsB;AACxD,QAAM,OAAO;AAEb,SACE,gBAAAA,MAAC;AAAA,IAAI,WAAU;AAAA,IACZ;AAAA;AAAA,MACD,gBAAAD,MAAC;AAAA,QAAK,MAAM,SAAS;AAAA,OAAO;AAAA;AAAA,GAC9B;AAEJ;;;AClBA,SAAS,MAAAE,YAAU;AAEnB,OAAO;AAQH,gBAAAC,aAAA;AAJJ,IAAM,aAAa,CAAC,EAAE,WAAW,aAAa,MAAM,MAAuB;AACzE,QAAM,UAAUD,KAAG,cAAc,SAAS;AAE1C,SACE,gBAAAC,MAAC;AAAA,IAAK,GAAG;AAAA,IAAO,WAAW;AAAA,IACxB;AAAA,GACH;AAEJ;;;AChBA,SAAS,MAAAC,YAAU;AAGnB,OAAO;AA6EH,mBACE,OAAAC,OADF,QAAAC,aAAA;AAxBJ,IAAM,QAAQ,CAAC;AAAA,EACb,cAAc;AAAA,EACd,mBAAmB;AAAA,EACnB,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW,MAAM;AAAA,EACjB;AAAA,EACA;AAAA,KACG;AACL,MAAkB;AAChB,QAAM,eAAe,cAAc,UAAa,mBAAmB;AAEnE,MAAI,CAAC,YAAY,CAAC,cAAc;AAC9B,YAAQ;AAAA,MACN;AAAA,IACF;AAAA,EACF;AAEA,SACE,gBAAAA,MAAA;AAAA,IACE;AAAA,sBAAAD,MAAC;AAAA,QACC,cAAY;AAAA,QACZ,mBAAiB;AAAA,QACjB,WAAWE,KAAG,cAAc,SAAS;AAAA,QACrC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,MAAK;AAAA,QACL;AAAA,QACC,GAAG;AAAA,OACN;AAAA,MACA,gBAAAF,MAAC;AAAA,QAAM,WAAW;AAAA,QAAgB,SAAS;AAAA,QAAI,OAAO;AAAA,QACnD,qBAAW,gBAAAA,MAAC;AAAA,UAAK,WAAU;AAAA,UAAwB;AAAA,SAAS,IAAU;AAAA,OACzE;AAAA;AAAA,GACF;AAEJ;;;ACnGA,SAAS,sBAAsB;AAC/B,SAAS,UAAU,cAAc,gBAAgB,cAAc;AAI/D,OAAO;AAwFH,SAGM,OAAAG,OAHN,QAAAC,aAAA;AAlDJ,IAAM,aAAa,CAAC,UAA2B;AAC7C,QAAM,EAAE,MAAM,OAAO,UAAU,UAAU,UAAU,WAAW,MAAM,IAAI;AACxE,QAAM,cAAc,OAA4B,IAAI;AAEpD,WAAS,iBAAiB,MAAwC;AAChE,QAAI,CAAC,eAAe,IAAI,GAAG;AACzB,aAAO;AAAA,IACT;AAEA,UAAM,OAAO;AAEb,QAAI,MAAM,QAAQ,KAAK,SAAS,OAAO;AACrC,aAAO,aAAa,MAAM;AAAA,QACxB,GAAG,KAAK;AAAA,QACR;AAAA,QACA,SAAS,KAAK,MAAM,UAAU;AAAA,QAC9B;AAAA,QACA,UAAU,OAAO,KAAK,OAAO,aAAa,cAAc,KAAK,MAAM,WAAW;AAAA,MAChF,CAAC;AAAA,IACH;AAEA,QAAI,MAAM,QAAQ,KAAK,SAAS,OAAO;AACrC,aAAO,aAAa,MAAM;AAAA,QACxB,GAAG,KAAK;AAAA,QACR;AAAA,QACA;AAAA,MACF,CAAC;AAAA,IACH;AAEA,UAAM,eAAe,MAAM,OAAO;AAClC,QAAI,cAAc;AAChB,UAAI,MAAM,QAAQ,YAAY,GAAG;AAC/B,eAAO,aAAa,MAAM;AAAA,UACxB,UAAU,SAAS,IAAI,cAAc,CAAC,cAAc,iBAAiB,SAAS,CAAC;AAAA,QACjF,CAAC;AAAA,MACH;AACA,aAAO,aAAa,MAAM;AAAA,QACxB,UAAU,iBAAiB,YAAY;AAAA,MACzC,CAAC;AAAA,IACH;AAEA,QAAI,MAAM,QAAQ,KAAK,SAAS,SAAS,KAAK,SAAS,OAAO;AAC5D,aAAO;AAAA,IACT;AAEA,WAAO;AAAA,EACT;AAEA,QAAM,SAAS,SAAS,IAAI,UAAU,CAAC,UAAU,iBAAiB,KAAK,CAAC;AACxE,SACE,gBAAAA,MAAC;AAAA,IAAS,KAAK;AAAA,IACZ;AAAA,gBACC,gBAAAD,MAAC;AAAA,QACC,0BAAAA,MAAC;AAAA,UAAgB;AAAA,SAAO;AAAA,OAC1B;AAAA,MAEF,gBAAAA,MAAC;AAAA,QAAK,GAAG;AAAA,QAAQ;AAAA,OAAO;AAAA;AAAA,GAC1B;AAEJ;;;ACpGA,SAAS,MAAAE,YAAU;AAEnB,OAAO;AAoBH,gBAAAC,aAAA;AAJJ,IAAM,SAAS,CAAC,EAAE,WAAW,UAAU,WAAW,KAAK,MAAmB;AACxE,QAAM,UAAUD,KAAG,aAAa,oBAAoB,SAAS;AAE7D,SACE,gBAAAC,MAAC;AAAA,IAAQ,GAAG;AAAA,IAAM,WAAW;AAAA,IAAS,gBAAc;AAAA,IACjD;AAAA,GACH;AAEJ;;;AC1BA,SAAS,MAAAC,YAAU;AACnB,SAAS,cAAAC,mBAAkB;AAE3B,OAAO;AAqBH,gBAAAC,aAAA;AAhBJ,IAAM,WAAWC,YAA+C,CAAC,EAAE,cAAc,MAAM,GAAG,QAAQ;AAChG,QAAM,YAAY,CAAC,MAAgD;AACjE,QACE,EAAE,QAAQ,gBACV,EAAE,QAAQ,eACV,EAAE,QAAQ,aACV,EAAE,QAAQ,aACV;AACA,QAAE,gBAAgB;AAAA,IACpB;AACA,QAAI,EAAE,QAAQ,UAAU;AACtB,QAAE,YAAY,yBAAyB;AAAA,IACzC;AAAA,EACF;AAEA,SACE,gBAAAD,MAAC;AAAA,IACE,GAAG;AAAA,IACJ,WAAWE,KAAG,aAAa,SAAS;AAAA,IACpC;AAAA,IACA,oBAAkB,MAAM,uBAAuB,mBAAmB,MAAM,EAAE;AAAA,IAC1E;AAAA,GACF;AAEJ,CAAC;AAED,SAAS,cAAc;",
|
6
6
|
"names": ["cx", "jsx", "cx", "jsx", "jsxs", "cx", "forwardRef", "cx", "forwardRef", "jsx", "jsxs", "forwardRef", "cx", "jsx", "jsxs", "forwardRef", "cx", "value", "cx", "jsx", "cx", "jsx", "cx", "jsx", "cx", "cx", "jsx", "cx", "jsx", "jsx", "jsxs", "cx", "jsx", "jsxs", "cx", "jsx", "cx", "jsx", "jsxs", "cx", "jsx", "jsxs", "cx", "jsx", "cx", "forwardRef", "jsx", "forwardRef", "cx"]
|
7
7
|
}
|
package/dist/index.js
CHANGED
@@ -1,9 +1,7 @@
|
|
1
1
|
"use strict";
|
2
|
-
var __create = Object.create;
|
3
2
|
var __defProp = Object.defineProperty;
|
4
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
5
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
7
5
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
8
6
|
var __export = (target, all) => {
|
9
7
|
for (var name in all)
|
@@ -17,10 +15,6 @@ var __copyProps = (to, from, except, desc) => {
|
|
17
15
|
}
|
18
16
|
return to;
|
19
17
|
};
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
21
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
22
|
-
mod
|
23
|
-
));
|
24
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
25
19
|
|
26
20
|
// src/index.ts
|
@@ -46,21 +40,18 @@ __export(src_exports, {
|
|
46
40
|
});
|
47
41
|
module.exports = __toCommonJS(src_exports);
|
48
42
|
|
49
|
-
// ../../scripts/react-shim.js
|
50
|
-
var React = __toESM(require("react"));
|
51
|
-
|
52
43
|
// src/Checkbox.tsx
|
53
44
|
var import_react = require("react");
|
54
45
|
|
55
46
|
// src/Label.tsx
|
56
|
-
var
|
47
|
+
var import_classix2 = require("classix");
|
57
48
|
|
58
49
|
// src/RequiredAsterisk.tsx
|
59
|
-
var
|
50
|
+
var import_classix = require("classix");
|
60
51
|
var import_RequiredAsterisk = require("./styles/RequiredAsterisk.css");
|
61
52
|
var import_jsx_runtime = require("react/jsx-runtime");
|
62
53
|
var RequiredAsterisk = ({ className, testId, ...rest }) => {
|
63
|
-
const classes = (0,
|
54
|
+
const classes = (0, import_classix.cx)("RequiredAsterisk");
|
64
55
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
|
65
56
|
className: classes,
|
66
57
|
"data-test-id": testId,
|
@@ -81,7 +72,7 @@ var Label = ({
|
|
81
72
|
optional = false,
|
82
73
|
...other
|
83
74
|
}) => {
|
84
|
-
const classes = (0,
|
75
|
+
const classes = (0, import_classix2.cx)("Form-label", className, disabled && "Form-label--disabled");
|
85
76
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", {
|
86
77
|
...other,
|
87
78
|
className: classes,
|
@@ -144,11 +135,11 @@ var Checkbox = (0, import_react.forwardRef)(
|
|
144
135
|
Checkbox.displayName = "Checkbox";
|
145
136
|
|
146
137
|
// src/CompactTextField.tsx
|
147
|
-
var
|
138
|
+
var import_classix4 = require("classix");
|
148
139
|
var import_react3 = require("react");
|
149
140
|
|
150
141
|
// src/TextField.tsx
|
151
|
-
var
|
142
|
+
var import_classix3 = require("classix");
|
152
143
|
var import_react2 = require("react");
|
153
144
|
var import_FormInput = require("./styles/FormInput.css");
|
154
145
|
|
@@ -169,9 +160,7 @@ var TextField = (0, import_react2.forwardRef)(
|
|
169
160
|
overrideWidth,
|
170
161
|
...rest
|
171
162
|
}, ref) => {
|
172
|
-
const classes = overrideWidth ? className : (0,
|
173
|
-
"FormInput--tiny": tiny
|
174
|
-
});
|
163
|
+
const classes = overrideWidth ? className : (0, import_classix3.cx)("FormInput", `FormInput-${type}`, className, tiny && "FormInput--tiny");
|
175
164
|
if (suffix) {
|
176
165
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
|
177
166
|
className: "FormInput-suffixContainer",
|
@@ -179,7 +168,7 @@ var TextField = (0, import_react2.forwardRef)(
|
|
179
168
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
|
180
169
|
...rest,
|
181
170
|
type,
|
182
|
-
className: (0,
|
171
|
+
className: (0, import_classix3.cx)(classes, "FormInput-suffix"),
|
183
172
|
readOnly,
|
184
173
|
ref,
|
185
174
|
"data-test-id": testId,
|
@@ -220,9 +209,7 @@ var CompactTextField = (0, import_react3.forwardRef)(
|
|
220
209
|
(typeof value === "boolean" || value ? value.toString() : "").trim().length !== 0
|
221
210
|
);
|
222
211
|
const isActiveState = isActive || needsErrorFeedback;
|
223
|
-
const classes = (0,
|
224
|
-
"is-active": isActiveState
|
225
|
-
});
|
212
|
+
const classes = (0, import_classix4.cx)("CompactTextField", className, isActiveState && "is-active");
|
226
213
|
const placeholder = isActiveState ? "" : label;
|
227
214
|
const handleFocus = (event) => {
|
228
215
|
setIsActive(true);
|
@@ -262,7 +249,7 @@ var CompactTextField = (0, import_react3.forwardRef)(
|
|
262
249
|
CompactTextField.displayName = "CompactTextField";
|
263
250
|
|
264
251
|
// src/FieldError.tsx
|
265
|
-
var
|
252
|
+
var import_classix5 = require("classix");
|
266
253
|
var import_Form3 = require("./styles/Form.css");
|
267
254
|
var import_jsx_runtime = require("react/jsx-runtime");
|
268
255
|
var FieldError = ({ name, errorMessage, className }) => {
|
@@ -270,7 +257,7 @@ var FieldError = ({ name, errorMessage, className }) => {
|
|
270
257
|
return null;
|
271
258
|
}
|
272
259
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
|
273
|
-
className: (0,
|
260
|
+
className: (0, import_classix5.cx)("Form-fieldError", className),
|
274
261
|
"aria-live": "polite",
|
275
262
|
id: createFieldErrorId(name),
|
276
263
|
children: `Error - ${errorMessage}`
|
@@ -289,15 +276,17 @@ var FieldSet = ({ children, testId }) => {
|
|
289
276
|
};
|
290
277
|
|
291
278
|
// src/Form.tsx
|
292
|
-
var
|
279
|
+
var import_classix6 = require("classix");
|
293
280
|
var import_Form4 = require("./styles/Form.css");
|
294
281
|
var import_jsx_runtime = require("react/jsx-runtime");
|
295
282
|
var Form = (props) => {
|
296
283
|
const { id, name, className, inline, children, ariaLabel, hasIncreasedErrorMargin, ...rest } = props;
|
297
|
-
const classes = (0,
|
298
|
-
"Form
|
299
|
-
|
300
|
-
|
284
|
+
const classes = (0, import_classix6.cx)(
|
285
|
+
"Form",
|
286
|
+
className,
|
287
|
+
inline && "Form--inline",
|
288
|
+
!!hasIncreasedErrorMargin && "Form--increasedErrorMargin"
|
289
|
+
);
|
301
290
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("form", {
|
302
291
|
id,
|
303
292
|
name,
|
@@ -309,17 +298,15 @@ var Form = (props) => {
|
|
309
298
|
};
|
310
299
|
|
311
300
|
// src/FormField.tsx
|
312
|
-
var
|
301
|
+
var import_classix9 = require("classix");
|
313
302
|
|
314
303
|
// src/FormGroup.tsx
|
315
|
-
var
|
304
|
+
var import_classix7 = require("classix");
|
316
305
|
var import_Form5 = require("./styles/Form.css");
|
317
306
|
var import_jsx_runtime = require("react/jsx-runtime");
|
318
307
|
var FormGroup = (props) => {
|
319
308
|
const { className, name, ignoreValidation, isInvalid, children, testId, ...other } = props;
|
320
|
-
const classes = (0,
|
321
|
-
"is-invalid": !ignoreValidation && isInvalid
|
322
|
-
});
|
309
|
+
const classes = (0, import_classix7.cx)("Form-group", className, !ignoreValidation && isInvalid && "is-invalid");
|
323
310
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
324
311
|
className: classes,
|
325
312
|
"data-test-id": testId,
|
@@ -329,11 +316,11 @@ var FormGroup = (props) => {
|
|
329
316
|
};
|
330
317
|
|
331
318
|
// src/FormHint.tsx
|
332
|
-
var
|
319
|
+
var import_classix8 = require("classix");
|
333
320
|
var import_FormHint = require("./styles/FormHint.css");
|
334
321
|
var import_jsx_runtime = require("react/jsx-runtime");
|
335
322
|
var FormHint = ({ className, children, ...rest }) => {
|
336
|
-
const classes = (0,
|
323
|
+
const classes = (0, import_classix8.cx)("Form-hint", className);
|
337
324
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
338
325
|
...rest,
|
339
326
|
className: classes,
|
@@ -361,7 +348,7 @@ var FormField = ({
|
|
361
348
|
onBlur && onBlur(name);
|
362
349
|
};
|
363
350
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FormGroup, {
|
364
|
-
className: (0,
|
351
|
+
className: (0, import_classix9.cx)("FormField", className),
|
365
352
|
name,
|
366
353
|
ignoreValidation,
|
367
354
|
isInvalid,
|
@@ -406,11 +393,11 @@ var IconField = ({ icon, children }) => {
|
|
406
393
|
};
|
407
394
|
|
408
395
|
// src/InputGroup.tsx
|
409
|
-
var
|
396
|
+
var import_classix10 = require("classix");
|
410
397
|
var import_InputGroup = require("./styles/InputGroup.css");
|
411
398
|
var import_jsx_runtime = require("react/jsx-runtime");
|
412
399
|
var InputGroup = ({ className, children, ...other }) => {
|
413
|
-
const classes = (0,
|
400
|
+
const classes = (0, import_classix10.cx)("InputGroup", className);
|
414
401
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
|
415
402
|
...other,
|
416
403
|
className: classes,
|
@@ -419,7 +406,7 @@ var InputGroup = ({ className, children, ...other }) => {
|
|
419
406
|
};
|
420
407
|
|
421
408
|
// src/Radio.tsx
|
422
|
-
var
|
409
|
+
var import_classix11 = require("classix");
|
423
410
|
var import_Form6 = require("./styles/Form.css");
|
424
411
|
var import_jsx_runtime = require("react/jsx-runtime");
|
425
412
|
var Radio = ({
|
@@ -448,7 +435,7 @@ var Radio = ({
|
|
448
435
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("input", {
|
449
436
|
"aria-label": ariaLabel,
|
450
437
|
"aria-labelledby": ariaLabelledby,
|
451
|
-
className: (0,
|
438
|
+
className: (0, import_classix11.cx)("Form-radio", className),
|
452
439
|
checked,
|
453
440
|
disabled,
|
454
441
|
id,
|
@@ -483,35 +470,36 @@ var RadioGroup = (props) => {
|
|
483
470
|
if (!(0, import_react4.isValidElement)(elem)) {
|
484
471
|
return elem;
|
485
472
|
}
|
486
|
-
|
487
|
-
|
488
|
-
|
473
|
+
const item = elem;
|
474
|
+
if (item?.type && item.type === Radio) {
|
475
|
+
return (0, import_react4.cloneElement)(item, {
|
476
|
+
...item.props,
|
489
477
|
name,
|
490
|
-
checked:
|
478
|
+
checked: item.props.value === value,
|
491
479
|
onChange,
|
492
|
-
disabled: typeof
|
480
|
+
disabled: typeof item.props?.disabled !== "undefined" ? item.props.disabled : disabled
|
493
481
|
});
|
494
482
|
}
|
495
|
-
if (
|
496
|
-
return (0, import_react4.cloneElement)(
|
497
|
-
...
|
483
|
+
if (item?.type && item.type === Label) {
|
484
|
+
return (0, import_react4.cloneElement)(item, {
|
485
|
+
...item.props,
|
498
486
|
onChange,
|
499
487
|
disabled
|
500
488
|
});
|
501
489
|
}
|
502
|
-
const elemChildren =
|
490
|
+
const elemChildren = item?.props?.children;
|
503
491
|
if (elemChildren) {
|
504
492
|
if (Array.isArray(elemChildren)) {
|
505
|
-
return (0, import_react4.cloneElement)(
|
493
|
+
return (0, import_react4.cloneElement)(item, {
|
506
494
|
children: import_react4.Children.map(elemChildren, (elemChild) => updateRadioElems(elemChild))
|
507
495
|
});
|
508
496
|
}
|
509
|
-
return (0, import_react4.cloneElement)(
|
497
|
+
return (0, import_react4.cloneElement)(item, {
|
510
498
|
children: updateRadioElems(elemChildren)
|
511
499
|
});
|
512
500
|
}
|
513
|
-
if (
|
514
|
-
return
|
501
|
+
if (item?.type && item.type !== Radio && item.type !== Label) {
|
502
|
+
return item;
|
515
503
|
}
|
516
504
|
return null;
|
517
505
|
}
|
@@ -533,11 +521,11 @@ var RadioGroup = (props) => {
|
|
533
521
|
};
|
534
522
|
|
535
523
|
// src/Select.tsx
|
536
|
-
var
|
524
|
+
var import_classix12 = require("classix");
|
537
525
|
var import_FormInput3 = require("./styles/FormInput.css");
|
538
526
|
var import_jsx_runtime = require("react/jsx-runtime");
|
539
527
|
var Select = ({ className, children, testId, ...rest }) => {
|
540
|
-
const classes = (0,
|
528
|
+
const classes = (0, import_classix12.cx)("FormInput", "FormInput-select", className);
|
541
529
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("select", {
|
542
530
|
...rest,
|
543
531
|
className: classes,
|
@@ -547,7 +535,7 @@ var Select = ({ className, children, testId, ...rest }) => {
|
|
547
535
|
};
|
548
536
|
|
549
537
|
// src/TextArea.tsx
|
550
|
-
var
|
538
|
+
var import_classix13 = require("classix");
|
551
539
|
var import_react5 = require("react");
|
552
540
|
var import_FormInput4 = require("./styles/FormInput.css");
|
553
541
|
var import_jsx_runtime = require("react/jsx-runtime");
|
@@ -562,7 +550,7 @@ var TextArea = (0, import_react5.forwardRef)(({ className, ...props }, ref) => {
|
|
562
550
|
};
|
563
551
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", {
|
564
552
|
...props,
|
565
|
-
className: (0,
|
553
|
+
className: (0, import_classix13.cx)("FormInput", className),
|
566
554
|
ref,
|
567
555
|
"aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
|
568
556
|
onKeyDown
|
package/dist/index.js.map
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"version": 3,
|
3
|
-
"sources": ["../src/index.ts", "
|
4
|
-
"sourcesContent": ["export type { CheckboxProps } from './Checkbox';\nexport type { CompactTextFieldProps } from './CompactTextField';\nexport type { FieldErrorProps } from './FieldError';\nexport type { FieldSetProps } from './FieldSet';\nexport type { FormProps } from './Form';\nexport type { FormFieldProps } from './FormField';\nexport type { FormGroupProps } from './FormGroup';\nexport type { FormHintProps } from './FormHint';\nexport type { IconFieldProps } from './IconField';\nexport type { InputGroupProps } from './InputGroup';\nexport type { LabelProps } from './Label';\nexport type { RadioProps } from './Radio';\nexport type { RadioGroupProps } from './RadioGroup';\nexport type { RequiredAsteriskProps } from './RequiredAsterisk';\nexport type { SelectProps } from './Select';\nexport type { TextAreaProps } from './TextArea';\nexport type { TextFieldProps } from './TextField';\n\nexport { Checkbox } from './Checkbox';\nexport { CompactTextField } from './CompactTextField';\nexport { FieldError } from './FieldError';\nexport { FieldSet } from './FieldSet';\nexport { Form } from './Form';\nexport { FormField } from './FormField';\nexport { FormGroup } from './FormGroup';\nexport { FormHint } from './FormHint';\nexport { IconField } from './IconField';\nexport { InputGroup } from './InputGroup';\nexport { Label } from './Label';\nexport { Radio } from './Radio';\nexport { RadioGroup } from './RadioGroup';\nexport { RequiredAsterisk } from './RequiredAsterisk';\nexport { Select } from './Select';\nexport { TextArea } from './TextArea';\nexport { TextField } from './TextField';\n", "import * as React from 'react';\nexport { React };\n", "import type { InputHTMLAttributes } from 'react';\n\nimport { forwardRef } from 'react';\n\nimport { Label } from './Label';\nimport './styles/Form.css';\n\ntype CheckboxProps = InputHTMLAttributes<HTMLInputElement> & {\n /**\n * Use an aria-label if you don't pass in children and don't have a visible label to associate with the input element.\n */\n 'aria-label'?: string;\n /**\n * id attribute of the label text elsewhere in the app, used for screen reader support\n * Use this for cases where you have a visible label on the page that is not close to\n * the input. https://tink.uk/the-difference-between-aria-label-and-aria-labelledby/\n */\n 'aria-labelledby'?: string;\n /**\n * Label for the Checkbox\n */\n children?: React.ReactNode;\n /**\n * The className to pass into the Checkbox's Label component\n */\n labelClassName?: string;\n /**\n * The test id for the data-test-id attribute for React Testing Library support\n */\n testId?: string;\n};\n\nconst Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n (\n {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n children,\n disabled,\n testId,\n checked,\n labelClassName,\n ...other\n },\n ref\n ) => {\n const hasAriaLabel = ariaLabel !== undefined || ariaLabelledby !== undefined;\n if (!children && !hasAriaLabel) {\n console.warn(\n 'If you do not provide children, you must specify an aria-label for accessibility'\n );\n }\n\n return (\n <Label className={labelClassName}>\n <input\n {...other}\n ref={ref}\n checked={checked}\n aria-checked={checked ? 'true' : 'false'}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n className=\"Form-checkbox\"\n disabled={disabled}\n data-test-id={testId}\n type=\"checkbox\"\n />{' '}\n {disabled ? <span className=\"Form-label--disabled\">{children}</span> : children}\n </Label>\n );\n }\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox };\nexport type { CheckboxProps };\n", "import cx from 'clsx';\n\nimport { RequiredAsterisk } from './RequiredAsterisk';\nimport './styles/Form.css';\n\ntype LabelProps = {\n htmlFor?: string;\n required?: boolean;\n optional?: boolean;\n disabled?: boolean;\n children?: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n hidden?: boolean;\n};\n\nconst Label = ({\n htmlFor,\n disabled,\n className,\n children,\n required = false,\n optional = false,\n ...other\n}: LabelProps) => {\n const classes = cx('Form-label', className, { 'Form-label--disabled': disabled });\n return (\n <label {...other} className={classes} htmlFor={htmlFor}>\n {children}\n {optional && !required && <small className=\"Form-labelOptional\">(optional)</small>}\n {required && !optional && <RequiredAsterisk />}\n </label>\n );\n};\n\nexport { Label };\nexport type { LabelProps };\n", "import type { HTMLAttributes } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/RequiredAsterisk.css';\n\ntype RequiredAsteriskProps = HTMLAttributes<HTMLSpanElement> & {\n testId?: string;\n};\n\nconst RequiredAsterisk = ({ className, testId, ...rest }: RequiredAsteriskProps) => {\n const classes = cx('RequiredAsterisk');\n\n return (\n <span className={classes} data-test-id={testId} {...rest}>\n *\n </span>\n );\n};\n\nexport { RequiredAsterisk };\nexport type { RequiredAsteriskProps };\n", "import type { TextFieldProps } from './TextField';\nimport type { FocusEvent } from 'react';\n\nimport cx from 'clsx';\nimport { forwardRef, useState } from 'react';\n\nimport { Label } from './Label';\nimport { TextField } from './TextField';\nimport './styles/CompactTextField.css';\nimport './styles/FormInput.css';\n\ntype CompactTextFieldProps = TextFieldProps & {\n label: string;\n needsErrorFeedback?: boolean;\n};\n\nconst CompactTextField = forwardRef<HTMLInputElement, CompactTextFieldProps>(\n (\n { className, id, name, label, type, needsErrorFeedback, value, onFocus, onBlur, ...rest },\n ref\n ) => {\n const [isActive, setIsActive] = useState(\n (typeof value === 'boolean' || value ? value.toString() : '').trim().length !== 0\n );\n\n const isActiveState = isActive || needsErrorFeedback;\n\n const classes = cx('CompactTextField', className, {\n 'is-active': isActiveState,\n });\n\n const placeholder = isActiveState ? '' : label;\n\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n setIsActive(true);\n if (onFocus) {\n onFocus(event);\n }\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n const value = event.target.value || '';\n setIsActive(value.trim().length !== 0);\n if (onBlur) {\n onBlur(event);\n }\n };\n\n return (\n <div className={classes}>\n <Label htmlFor={id}>{label}</Label>\n <TextField\n {...rest}\n id={id}\n name={name}\n type={type}\n placeholder={placeholder}\n value={value}\n ref={ref}\n onFocus={handleFocus}\n onBlur={handleBlur}\n />\n </div>\n );\n }\n);\n\nCompactTextField.displayName = 'CompactTextField';\n\nexport { CompactTextField };\nexport type { CompactTextFieldProps };\n", "import type { InputHTMLAttributes } from 'react';\n\nimport cx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport './styles/FormInput.css';\nimport { createFieldErrorId } from './utils';\n\ntype TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {\n suffix?: string;\n testId?: string;\n tiny?: boolean;\n overrideWidth?: string;\n};\n\nconst TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n (\n {\n className,\n type = 'text',\n tiny = false,\n readOnly,\n tabIndex = 0,\n testId,\n suffix,\n overrideWidth,\n ...rest\n },\n ref\n ) => {\n const classes = overrideWidth\n ? className\n : cx('FormInput', `FormInput-${type}`, className, {\n 'FormInput--tiny': tiny,\n });\n if (suffix) {\n return (\n <div className=\"FormInput-suffixContainer\">\n <input\n {...rest}\n type={type}\n className={cx(classes, 'FormInput-suffix')}\n readOnly={readOnly}\n ref={ref}\n data-test-id={testId}\n aria-describedby={rest['aria-describedby'] || createFieldErrorId(rest.id)}\n />\n <label className=\"FormInput-suffix\" htmlFor={rest.id}>\n {suffix}\n </label>\n </div>\n );\n }\n\n return (\n <input\n {...rest}\n type={type}\n className={classes}\n readOnly={readOnly}\n tabIndex={tabIndex}\n ref={ref}\n data-test-id={testId}\n style={\n overrideWidth\n ? {\n width: overrideWidth,\n }\n : undefined\n }\n aria-describedby={rest['aria-describedby'] || createFieldErrorId(rest.id)}\n />\n );\n }\n);\n\nTextField.displayName = 'TextField';\n\nexport { TextField };\nexport type { TextFieldProps };\n", "type FieldPath = string | string[];\n\nconst createFieldErrorId = (fieldIdentifier?: FieldPath) =>\n fieldIdentifier ? `${[...fieldIdentifier].join('')}-err` : undefined;\n\nexport { createFieldErrorId };\nexport type { FieldPath };\n", "import type { FieldPath } from './utils';\n\nimport cx from 'clsx';\n\nimport './styles/Form.css';\nimport { createFieldErrorId } from './utils';\n\ntype FieldErrorProps = {\n name: FieldPath;\n errorMessage?: string;\n className?: string;\n};\n\nconst FieldError = ({ name, errorMessage, className }: FieldErrorProps) => {\n if (!errorMessage) {\n return null;\n }\n\n return (\n <span\n className={cx('Form-fieldError', className)}\n aria-live=\"polite\"\n id={createFieldErrorId(name)}\n >\n {`Error - ${errorMessage}`}\n </span>\n );\n};\n\nexport { FieldError };\nexport type { FieldErrorProps };\n", "import type { ReactNode } from 'react';\n\nimport './styles/FieldSet.css';\n\ntype FieldSetProps = {\n children?: ReactNode;\n testId?: string;\n};\n\nconst FieldSet = ({ children, testId }: FieldSetProps) => {\n return (\n <fieldset className=\"FieldSet\" data-test-id={testId}>\n {children}\n </fieldset>\n );\n};\n\nexport { FieldSet };\nexport type { FieldSetProps };\n", "import type { FocusEvent, FormEvent, ReactNode } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/Form.css';\n\ntype FormProps = {\n id?: string;\n name?: string;\n action?: string;\n className?: string;\n inline?: boolean;\n method?: string;\n // Increases margin between form fields to make room for error messages.\n // This prevents the form from shifting when rendering a field error.\n // This may be desired when the form contains external links that will\n // shift while clicking if the form shifts from validation.\n hasIncreasedErrorMargin?: boolean;\n onBlurCapture?(e: FocusEvent): void;\n onSubmit?(e: FormEvent<EventTarget>): void;\n ariaLabel?: string;\n children: ReactNode;\n};\n\nconst Form = (props: FormProps) => {\n const { id, name, className, inline, children, ariaLabel, hasIncreasedErrorMargin, ...rest } =\n props;\n const classes = cx('Form', className, {\n 'Form--inline': inline,\n 'Form--increasedErrorMargin': !!hasIncreasedErrorMargin,\n });\n\n return (\n <form id={id} name={name} aria-label={ariaLabel} {...rest} className={classes}>\n {children}\n </form>\n );\n};\n\nexport { Form };\nexport type { FormProps };\n", "import cx from 'clsx';\n\nimport { FieldError } from './FieldError';\nimport { FormGroup } from './FormGroup';\nimport { FormHint } from './FormHint';\nimport { RequiredAsterisk } from './RequiredAsterisk';\nimport './styles/FormField.css';\n\ntype FormFieldProps = {\n isRequired: boolean;\n label?: string;\n name: string;\n htmlFor: string;\n hint?: string;\n errorMessage?: string;\n ignoreValidation?: boolean;\n isInvalid?: boolean;\n children: JSX.Element;\n className?: string;\n onBlur?: (field: string) => void;\n};\n\nconst FormField = ({\n isRequired,\n label,\n name,\n htmlFor,\n hint,\n errorMessage,\n ignoreValidation,\n isInvalid,\n children,\n className,\n onBlur,\n}: FormFieldProps) => {\n const handleBlur = () => {\n onBlur && onBlur(name);\n };\n\n return (\n <FormGroup\n className={cx('FormField', className)}\n name={name}\n ignoreValidation={ignoreValidation}\n isInvalid={isInvalid}\n onBlur={handleBlur}\n >\n {label && (\n <label htmlFor={htmlFor}>\n {label}\n {isRequired && <RequiredAsterisk />}\n </label>\n )}\n {hint && <FormHint className=\"FormField-hint\">{hint}</FormHint>}\n {children}\n <FieldError className=\"FormField-errorMessage\" name={name} errorMessage={errorMessage} />\n </FormGroup>\n );\n};\n\nexport type { FormFieldProps };\nexport { FormField };\n", "import type { ReactNode } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/Form.css';\n\ntype FormGroupProps = {\n name?: string | string[];\n ignoreValidation?: boolean;\n isInvalid?: boolean;\n className?: string;\n onBlur?: () => void;\n testId?: string;\n children: ReactNode;\n};\n\nconst FormGroup = (props: FormGroupProps) => {\n const { className, name, ignoreValidation, isInvalid, children, testId, ...other } = props;\n\n const classes = cx('Form-group', className, {\n 'is-invalid': !ignoreValidation && isInvalid,\n });\n\n return (\n <div className={classes} data-test-id={testId} {...other}>\n {children}\n </div>\n );\n};\n\nexport { FormGroup };\nexport type { FormGroupProps };\n", "import type { ReactNode } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/FormHint.css';\n\ntype FormHintProps = {\n children: ReactNode;\n className?: string;\n id?: string;\n};\n\nconst FormHint = ({ className, children, ...rest }: FormHintProps) => {\n const classes = cx('Form-hint', className);\n\n return (\n <div {...rest} className={classes}>\n {children}\n </div>\n );\n};\n\nexport { FormHint };\nexport type { FormHintProps };\n", "import type { IconProps } from '@launchpad-ui/icons';\n\nimport { IconSize } from '@launchpad-ui/icons';\n\nimport './styles/IconField.css';\n\ntype IconFieldProps = {\n icon({ ...other }: IconProps): JSX.Element;\n children: JSX.Element | JSX.Element[];\n};\n\nconst IconField = ({ icon, children }: IconFieldProps) => {\n const Icon = icon;\n\n return (\n <div className=\"IconField\">\n {children}\n <Icon size={IconSize.SMALL} />\n </div>\n );\n};\n\nexport { IconField };\nexport type { IconFieldProps };\n", "import type { ComponentPropsWithRef } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/InputGroup.css';\n\ntype InputGroupProps = ComponentPropsWithRef<'div'>;\n\nconst InputGroup = ({ className, children, ...other }: InputGroupProps) => {\n const classes = cx('InputGroup', className);\n\n return (\n <div {...other} className={classes}>\n {children}\n </div>\n );\n};\n\nexport { InputGroup };\nexport type { InputGroupProps };\n", "import cx from 'clsx';\n\nimport { Label } from './Label';\nimport './styles/Form.css';\n\ntype RadioProps = {\n /**\n * Use an aria-label if you don't pass in children and don't have a visible label to associate with the input element.\n */\n 'aria-label'?: string;\n /**\n * id attribute of the label text elsewhere in the app, used for screen reader support. Use this for cases where you have a visible label on the page that **is not close to** to the input. https://tink.uk/the-difference-between-aria-label-and-aria-labelledby/\n */\n 'aria-labelledby'?: string;\n /**\n * Is the Radio checked?\n */\n checked?: boolean;\n /**\n * Label for the Checkbox\n */\n children?: React.ReactNode;\n /**\n * Custom classname(s) to add to the Radio.\n */\n className?: string;\n /**\n * Is the Radio disabled?\n */\n disabled?: boolean;\n /**\n * The id to pair the Radio input with the label for screen reader support.\n */\n id?: string;\n /**\n * The className to pass into the Radio's Label component\n */\n labelClassName?: string;\n /**\n * Name to apply to the underlying Radio. Pass in the same name value to each Radio when grouping in a RadioGroup for screen reader support.\n */\n name?: string;\n /**\n * The function to pass into the Radio onChange synthetic event handler.\n */\n onChange?(e: React.ChangeEvent): void;\n /**\n * Optional inline CSS styles to add to the Radio label.\n */\n labelStyle?: React.CSSProperties;\n /**\n * The value passed into Radio.\n */\n value: number | string;\n};\n\nconst Radio = ({\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n checked = false,\n children,\n className,\n disabled = false,\n id,\n labelClassName,\n name,\n onChange = () => undefined,\n labelStyle,\n value,\n ...props\n}: RadioProps) => {\n const hasAriaLabel = ariaLabel !== undefined || ariaLabelledby !== undefined;\n\n if (!children && !hasAriaLabel) {\n console.warn(\n 'If you do not provide children, you must specify an aria-label for accessibility'\n );\n }\n\n return (\n <>\n <input\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n className={cx('Form-radio', className)}\n checked={checked}\n disabled={disabled}\n id={id}\n name={name}\n onChange={onChange}\n type=\"radio\"\n value={value}\n {...props}\n />\n <Label className={labelClassName} htmlFor={id} style={labelStyle}>\n {disabled ? <span className=\"Form-label--disabled\">{children}</span> : children}\n </Label>\n </>\n );\n};\n\nexport { Radio };\nexport type { RadioProps };\n", "import { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { Children, cloneElement, isValidElement, useRef } from 'react';\n\nimport { Label } from './Label';\nimport { Radio } from './Radio';\nimport './styles/Form.css';\n\ntype RadioGroupProps = {\n /**\n * The legend that describes this groups of radio buttons. The legend\n * is important for screen reader users.\n */\n legend?: string;\n /**\n * The children passed into the RadioGroup.\n */\n children?: React.ReactNode;\n /**\n * Custom classname(s) passed to the fieldset inner div.\n */\n className?: string;\n /**\n * Set the underlying Radio to disabled if the Radio's disabled prop is undefined.\n */\n disabled?: boolean;\n /**\n * The RadioGroup's id.\n */\n id?: string;\n /**\n * Name to apply to the underlying Radio. The same name value is passed to each Radio when grouping in a RadioGroup for screen reader support.\n */\n name: string;\n /**\n * This function is passed into each Radio onChange synthetic event handler.\n */\n onChange?(e: React.ChangeEvent | React.FormEvent<HTMLInputElement>): void;\n /**\n * The value to compare against the Radio's value to determine if the Radio will be checked.\n */\n value: string;\n};\n\nconst RadioGroup = (props: RadioGroupProps) => {\n const { name, value, onChange, children, disabled, legend, ...other } = props;\n const fieldsetRef = useRef<HTMLFieldSetElement>(null);\n\n function updateRadioElems(elem: React.ReactNode): React.ReactNode {\n if (!isValidElement(elem)) {\n return elem;\n }\n\n if (elem?.type && elem.type === Radio) {\n return cloneElement(elem, {\n ...elem.props,\n name,\n checked: elem.props.value === value,\n onChange,\n disabled: typeof elem.props?.disabled !== 'undefined' ? elem.props.disabled : disabled,\n });\n }\n\n if (elem?.type && elem.type === Label) {\n return cloneElement(elem, {\n ...elem.props,\n onChange,\n disabled,\n });\n }\n\n const elemChildren = elem?.props?.children;\n if (elemChildren) {\n if (Array.isArray(elemChildren)) {\n return cloneElement(elem, {\n children: Children.map(elemChildren, (elemChild) => updateRadioElems(elemChild)),\n });\n }\n return cloneElement(elem, {\n children: updateRadioElems(elemChildren),\n });\n }\n\n if (elem?.type && elem.type !== Radio && elem.type !== Label) {\n return elem;\n }\n\n return null;\n }\n\n const radios = Children.map(children, (child) => updateRadioElems(child));\n return (\n <fieldset ref={fieldsetRef}>\n {legend && (\n <legend>\n <VisuallyHidden>{legend}</VisuallyHidden>\n </legend>\n )}\n <div {...other}>{radios}</div>\n </fieldset>\n );\n};\n\nexport { RadioGroup };\nexport type { RadioGroupProps };\n", "import type { ChangeEvent, ReactNode } from 'react';\n\nimport cx from 'clsx';\n\nimport './styles/FormInput.css';\n\ntype SelectProps = {\n children: ReactNode;\n className?: string;\n disabled?: boolean;\n id?: string;\n name?: string;\n onChange?(event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>): void;\n testId?: string;\n value?: number | string;\n 'aria-label'?: string;\n};\n\nconst Select = ({ className, children, testId, ...rest }: SelectProps) => {\n const classes = cx('FormInput', 'FormInput-select', className);\n\n return (\n <select {...rest} className={classes} data-test-id={testId}>\n {children}\n </select>\n );\n};\n\nexport { Select };\nexport type { SelectProps };\n", "import type { TextareaHTMLAttributes } from 'react';\n\nimport cx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport './styles/FormInput.css';\nimport { createFieldErrorId } from './utils';\n\ntype TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(({ className, ...props }, ref) => {\n const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n if (\n e.key === 'ArrowRight' ||\n e.key === 'ArrowDown' ||\n e.key === 'ArrowUp' ||\n e.key === 'ArrowLeft'\n ) {\n e.stopPropagation();\n }\n if (e.key === 'Escape') {\n e.nativeEvent.stopImmediatePropagation();\n }\n };\n\n return (\n <textarea\n {...props}\n className={cx('FormInput', className)}\n ref={ref}\n aria-describedby={props['aria-describedby'] || createFieldErrorId(props.id)}\n onKeyDown={onKeyDown}\n />\n );\n});\n\nTextArea.displayName = 'TextArea';\n\nexport { TextArea };\nexport type { TextAreaProps };\n"],
|
5
|
-
"mappings": "
|
6
|
-
"names": ["
|
3
|
+
"sources": ["../src/index.ts", "../src/Checkbox.tsx", "../src/Label.tsx", "../src/RequiredAsterisk.tsx", "../src/CompactTextField.tsx", "../src/TextField.tsx", "../src/utils/index.ts", "../src/FieldError.tsx", "../src/FieldSet.tsx", "../src/Form.tsx", "../src/FormField.tsx", "../src/FormGroup.tsx", "../src/FormHint.tsx", "../src/IconField.tsx", "../src/InputGroup.tsx", "../src/Radio.tsx", "../src/RadioGroup.tsx", "../src/Select.tsx", "../src/TextArea.tsx"],
|
4
|
+
"sourcesContent": ["export type { CheckboxProps } from './Checkbox';\nexport type { CompactTextFieldProps } from './CompactTextField';\nexport type { FieldErrorProps } from './FieldError';\nexport type { FieldSetProps } from './FieldSet';\nexport type { FormProps } from './Form';\nexport type { FormFieldProps } from './FormField';\nexport type { FormGroupProps } from './FormGroup';\nexport type { FormHintProps } from './FormHint';\nexport type { IconFieldProps } from './IconField';\nexport type { InputGroupProps } from './InputGroup';\nexport type { LabelProps } from './Label';\nexport type { RadioProps } from './Radio';\nexport type { RadioGroupProps } from './RadioGroup';\nexport type { RequiredAsteriskProps } from './RequiredAsterisk';\nexport type { SelectProps } from './Select';\nexport type { TextAreaProps } from './TextArea';\nexport type { TextFieldProps } from './TextField';\n\nexport { Checkbox } from './Checkbox';\nexport { CompactTextField } from './CompactTextField';\nexport { FieldError } from './FieldError';\nexport { FieldSet } from './FieldSet';\nexport { Form } from './Form';\nexport { FormField } from './FormField';\nexport { FormGroup } from './FormGroup';\nexport { FormHint } from './FormHint';\nexport { IconField } from './IconField';\nexport { InputGroup } from './InputGroup';\nexport { Label } from './Label';\nexport { Radio } from './Radio';\nexport { RadioGroup } from './RadioGroup';\nexport { RequiredAsterisk } from './RequiredAsterisk';\nexport { Select } from './Select';\nexport { TextArea } from './TextArea';\nexport { TextField } from './TextField';\n", "import type { InputHTMLAttributes } from 'react';\n\nimport { forwardRef } from 'react';\n\nimport { Label } from './Label';\nimport './styles/Form.css';\n\ntype CheckboxProps = InputHTMLAttributes<HTMLInputElement> & {\n /**\n * Use an aria-label if you don't pass in children and don't have a visible label to associate with the input element.\n */\n 'aria-label'?: string;\n /**\n * id attribute of the label text elsewhere in the app, used for screen reader support\n * Use this for cases where you have a visible label on the page that is not close to\n * the input. https://tink.uk/the-difference-between-aria-label-and-aria-labelledby/\n */\n 'aria-labelledby'?: string;\n /**\n * Label for the Checkbox\n */\n children?: React.ReactNode;\n /**\n * The className to pass into the Checkbox's Label component\n */\n labelClassName?: string;\n /**\n * The test id for the data-test-id attribute for React Testing Library support\n */\n testId?: string;\n};\n\nconst Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n (\n {\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n children,\n disabled,\n testId,\n checked,\n labelClassName,\n ...other\n },\n ref\n ) => {\n const hasAriaLabel = ariaLabel !== undefined || ariaLabelledby !== undefined;\n if (!children && !hasAriaLabel) {\n console.warn(\n 'If you do not provide children, you must specify an aria-label for accessibility'\n );\n }\n\n return (\n <Label className={labelClassName}>\n <input\n {...other}\n ref={ref}\n checked={checked}\n aria-checked={checked ? 'true' : 'false'}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n className=\"Form-checkbox\"\n disabled={disabled}\n data-test-id={testId}\n type=\"checkbox\"\n />{' '}\n {disabled ? <span className=\"Form-label--disabled\">{children}</span> : children}\n </Label>\n );\n }\n);\n\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox };\nexport type { CheckboxProps };\n", "import { cx } from 'classix';\n\nimport { RequiredAsterisk } from './RequiredAsterisk';\nimport './styles/Form.css';\n\ntype LabelProps = {\n htmlFor?: string;\n required?: boolean;\n optional?: boolean;\n disabled?: boolean;\n children?: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n hidden?: boolean;\n};\n\nconst Label = ({\n htmlFor,\n disabled,\n className,\n children,\n required = false,\n optional = false,\n ...other\n}: LabelProps) => {\n const classes = cx('Form-label', className, disabled && 'Form-label--disabled');\n return (\n <label {...other} className={classes} htmlFor={htmlFor}>\n {children}\n {optional && !required && <small className=\"Form-labelOptional\">(optional)</small>}\n {required && !optional && <RequiredAsterisk />}\n </label>\n );\n};\n\nexport { Label };\nexport type { LabelProps };\n", "import type { HTMLAttributes } from 'react';\n\nimport { cx } from 'classix';\n\nimport './styles/RequiredAsterisk.css';\n\ntype RequiredAsteriskProps = HTMLAttributes<HTMLSpanElement> & {\n testId?: string;\n};\n\nconst RequiredAsterisk = ({ className, testId, ...rest }: RequiredAsteriskProps) => {\n const classes = cx('RequiredAsterisk');\n\n return (\n <span className={classes} data-test-id={testId} {...rest}>\n *\n </span>\n );\n};\n\nexport { RequiredAsterisk };\nexport type { RequiredAsteriskProps };\n", "import type { TextFieldProps } from './TextField';\nimport type { FocusEvent } from 'react';\n\nimport { cx } from 'classix';\nimport { forwardRef, useState } from 'react';\n\nimport { Label } from './Label';\nimport { TextField } from './TextField';\nimport './styles/CompactTextField.css';\nimport './styles/FormInput.css';\n\ntype CompactTextFieldProps = TextFieldProps & {\n label: string;\n needsErrorFeedback?: boolean;\n};\n\nconst CompactTextField = forwardRef<HTMLInputElement, CompactTextFieldProps>(\n (\n { className, id, name, label, type, needsErrorFeedback, value, onFocus, onBlur, ...rest },\n ref\n ) => {\n const [isActive, setIsActive] = useState(\n (typeof value === 'boolean' || value ? value.toString() : '').trim().length !== 0\n );\n\n const isActiveState = isActive || needsErrorFeedback;\n\n const classes = cx('CompactTextField', className, isActiveState && 'is-active');\n\n const placeholder = isActiveState ? '' : label;\n\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n setIsActive(true);\n if (onFocus) {\n onFocus(event);\n }\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n const value = event.target.value || '';\n setIsActive(value.trim().length !== 0);\n if (onBlur) {\n onBlur(event);\n }\n };\n\n return (\n <div className={classes}>\n <Label htmlFor={id}>{label}</Label>\n <TextField\n {...rest}\n id={id}\n name={name}\n type={type}\n placeholder={placeholder}\n value={value}\n ref={ref}\n onFocus={handleFocus}\n onBlur={handleBlur}\n />\n </div>\n );\n }\n);\n\nCompactTextField.displayName = 'CompactTextField';\n\nexport { CompactTextField };\nexport type { CompactTextFieldProps };\n", "import type { InputHTMLAttributes } from 'react';\n\nimport { cx } from 'classix';\nimport { forwardRef } from 'react';\n\nimport './styles/FormInput.css';\nimport { createFieldErrorId } from './utils';\n\ntype TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {\n suffix?: string;\n testId?: string;\n tiny?: boolean;\n overrideWidth?: string;\n};\n\nconst TextField = forwardRef<HTMLInputElement, TextFieldProps>(\n (\n {\n className,\n type = 'text',\n tiny = false,\n readOnly,\n tabIndex = 0,\n testId,\n suffix,\n overrideWidth,\n ...rest\n },\n ref\n ) => {\n const classes = overrideWidth\n ? className\n : cx('FormInput', `FormInput-${type}`, className, tiny && 'FormInput--tiny');\n if (suffix) {\n return (\n <div className=\"FormInput-suffixContainer\">\n <input\n {...rest}\n type={type}\n className={cx(classes, 'FormInput-suffix')}\n readOnly={readOnly}\n ref={ref}\n data-test-id={testId}\n aria-describedby={rest['aria-describedby'] || createFieldErrorId(rest.id)}\n />\n <label className=\"FormInput-suffix\" htmlFor={rest.id}>\n {suffix}\n </label>\n </div>\n );\n }\n\n return (\n <input\n {...rest}\n type={type}\n className={classes}\n readOnly={readOnly}\n tabIndex={tabIndex}\n ref={ref}\n data-test-id={testId}\n style={\n overrideWidth\n ? {\n width: overrideWidth,\n }\n : undefined\n }\n aria-describedby={rest['aria-describedby'] || createFieldErrorId(rest.id)}\n />\n );\n }\n);\n\nTextField.displayName = 'TextField';\n\nexport { TextField };\nexport type { TextFieldProps };\n", "type FieldPath = string | string[];\n\nconst createFieldErrorId = (fieldIdentifier?: FieldPath) =>\n fieldIdentifier ? `${[...fieldIdentifier].join('')}-err` : undefined;\n\nexport { createFieldErrorId };\nexport type { FieldPath };\n", "import type { FieldPath } from './utils';\n\nimport { cx } from 'classix';\n\nimport './styles/Form.css';\nimport { createFieldErrorId } from './utils';\n\ntype FieldErrorProps = {\n name: FieldPath;\n errorMessage?: string;\n className?: string;\n};\n\nconst FieldError = ({ name, errorMessage, className }: FieldErrorProps) => {\n if (!errorMessage) {\n return null;\n }\n\n return (\n <span\n className={cx('Form-fieldError', className)}\n aria-live=\"polite\"\n id={createFieldErrorId(name)}\n >\n {`Error - ${errorMessage}`}\n </span>\n );\n};\n\nexport { FieldError };\nexport type { FieldErrorProps };\n", "import type { ReactNode } from 'react';\n\nimport './styles/FieldSet.css';\n\ntype FieldSetProps = {\n children?: ReactNode;\n testId?: string;\n};\n\nconst FieldSet = ({ children, testId }: FieldSetProps) => {\n return (\n <fieldset className=\"FieldSet\" data-test-id={testId}>\n {children}\n </fieldset>\n );\n};\n\nexport { FieldSet };\nexport type { FieldSetProps };\n", "import type { FocusEvent, FormEvent, ReactNode } from 'react';\n\nimport { cx } from 'classix';\n\nimport './styles/Form.css';\n\ntype FormProps = {\n id?: string;\n name?: string;\n action?: string;\n className?: string;\n inline?: boolean;\n method?: string;\n // Increases margin between form fields to make room for error messages.\n // This prevents the form from shifting when rendering a field error.\n // This may be desired when the form contains external links that will\n // shift while clicking if the form shifts from validation.\n hasIncreasedErrorMargin?: boolean;\n onBlurCapture?(e: FocusEvent): void;\n onSubmit?(e: FormEvent<EventTarget>): void;\n ariaLabel?: string;\n children: ReactNode;\n};\n\nconst Form = (props: FormProps) => {\n const { id, name, className, inline, children, ariaLabel, hasIncreasedErrorMargin, ...rest } =\n props;\n const classes = cx(\n 'Form',\n className,\n inline && 'Form--inline',\n !!hasIncreasedErrorMargin && 'Form--increasedErrorMargin'\n );\n\n return (\n <form id={id} name={name} aria-label={ariaLabel} {...rest} className={classes}>\n {children}\n </form>\n );\n};\n\nexport { Form };\nexport type { FormProps };\n", "import { cx } from 'classix';\n\nimport { FieldError } from './FieldError';\nimport { FormGroup } from './FormGroup';\nimport { FormHint } from './FormHint';\nimport { RequiredAsterisk } from './RequiredAsterisk';\nimport './styles/FormField.css';\n\ntype FormFieldProps = {\n isRequired: boolean;\n label?: string;\n name: string;\n htmlFor: string;\n hint?: string;\n errorMessage?: string;\n ignoreValidation?: boolean;\n isInvalid?: boolean;\n children: JSX.Element;\n className?: string;\n onBlur?: (field: string) => void;\n};\n\nconst FormField = ({\n isRequired,\n label,\n name,\n htmlFor,\n hint,\n errorMessage,\n ignoreValidation,\n isInvalid,\n children,\n className,\n onBlur,\n}: FormFieldProps) => {\n const handleBlur = () => {\n onBlur && onBlur(name);\n };\n\n return (\n <FormGroup\n className={cx('FormField', className)}\n name={name}\n ignoreValidation={ignoreValidation}\n isInvalid={isInvalid}\n onBlur={handleBlur}\n >\n {label && (\n <label htmlFor={htmlFor}>\n {label}\n {isRequired && <RequiredAsterisk />}\n </label>\n )}\n {hint && <FormHint className=\"FormField-hint\">{hint}</FormHint>}\n {children}\n <FieldError className=\"FormField-errorMessage\" name={name} errorMessage={errorMessage} />\n </FormGroup>\n );\n};\n\nexport type { FormFieldProps };\nexport { FormField };\n", "import type { ReactNode } from 'react';\n\nimport { cx } from 'classix';\n\nimport './styles/Form.css';\n\ntype FormGroupProps = {\n name?: string | string[];\n ignoreValidation?: boolean;\n isInvalid?: boolean;\n className?: string;\n onBlur?: () => void;\n testId?: string;\n children: ReactNode;\n};\n\nconst FormGroup = (props: FormGroupProps) => {\n const { className, name, ignoreValidation, isInvalid, children, testId, ...other } = props;\n\n const classes = cx('Form-group', className, !ignoreValidation && isInvalid && 'is-invalid');\n\n return (\n <div className={classes} data-test-id={testId} {...other}>\n {children}\n </div>\n );\n};\n\nexport { FormGroup };\nexport type { FormGroupProps };\n", "import type { ReactNode } from 'react';\n\nimport { cx } from 'classix';\n\nimport './styles/FormHint.css';\n\ntype FormHintProps = {\n children: ReactNode;\n className?: string;\n id?: string;\n};\n\nconst FormHint = ({ className, children, ...rest }: FormHintProps) => {\n const classes = cx('Form-hint', className);\n\n return (\n <div {...rest} className={classes}>\n {children}\n </div>\n );\n};\n\nexport { FormHint };\nexport type { FormHintProps };\n", "import type { IconProps } from '@launchpad-ui/icons';\n\nimport { IconSize } from '@launchpad-ui/icons';\n\nimport './styles/IconField.css';\n\ntype IconFieldProps = {\n icon({ ...other }: IconProps): JSX.Element;\n children: JSX.Element | JSX.Element[];\n};\n\nconst IconField = ({ icon, children }: IconFieldProps) => {\n const Icon = icon;\n\n return (\n <div className=\"IconField\">\n {children}\n <Icon size={IconSize.SMALL} />\n </div>\n );\n};\n\nexport { IconField };\nexport type { IconFieldProps };\n", "import type { ComponentPropsWithRef } from 'react';\n\nimport { cx } from 'classix';\n\nimport './styles/InputGroup.css';\n\ntype InputGroupProps = ComponentPropsWithRef<'div'>;\n\nconst InputGroup = ({ className, children, ...other }: InputGroupProps) => {\n const classes = cx('InputGroup', className);\n\n return (\n <div {...other} className={classes}>\n {children}\n </div>\n );\n};\n\nexport { InputGroup };\nexport type { InputGroupProps };\n", "import { cx } from 'classix';\n\nimport { Label } from './Label';\nimport './styles/Form.css';\n\ntype RadioProps = {\n /**\n * Use an aria-label if you don't pass in children and don't have a visible label to associate with the input element.\n */\n 'aria-label'?: string;\n /**\n * id attribute of the label text elsewhere in the app, used for screen reader support. Use this for cases where you have a visible label on the page that **is not close to** to the input. https://tink.uk/the-difference-between-aria-label-and-aria-labelledby/\n */\n 'aria-labelledby'?: string;\n /**\n * Is the Radio checked?\n */\n checked?: boolean;\n /**\n * Label for the Checkbox\n */\n children?: React.ReactNode;\n /**\n * Custom classname(s) to add to the Radio.\n */\n className?: string;\n /**\n * Is the Radio disabled?\n */\n disabled?: boolean;\n /**\n * The id to pair the Radio input with the label for screen reader support.\n */\n id?: string;\n /**\n * The className to pass into the Radio's Label component\n */\n labelClassName?: string;\n /**\n * Name to apply to the underlying Radio. Pass in the same name value to each Radio when grouping in a RadioGroup for screen reader support.\n */\n name?: string;\n /**\n * The function to pass into the Radio onChange synthetic event handler.\n */\n onChange?(e: React.ChangeEvent): void;\n /**\n * Optional inline CSS styles to add to the Radio label.\n */\n labelStyle?: React.CSSProperties;\n /**\n * The value passed into Radio.\n */\n value: number | string;\n};\n\nconst Radio = ({\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n checked = false,\n children,\n className,\n disabled = false,\n id,\n labelClassName,\n name,\n onChange = () => undefined,\n labelStyle,\n value,\n ...props\n}: RadioProps) => {\n const hasAriaLabel = ariaLabel !== undefined || ariaLabelledby !== undefined;\n\n if (!children && !hasAriaLabel) {\n console.warn(\n 'If you do not provide children, you must specify an aria-label for accessibility'\n );\n }\n\n return (\n <>\n <input\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n className={cx('Form-radio', className)}\n checked={checked}\n disabled={disabled}\n id={id}\n name={name}\n onChange={onChange}\n type=\"radio\"\n value={value}\n {...props}\n />\n <Label className={labelClassName} htmlFor={id} style={labelStyle}>\n {disabled ? <span className=\"Form-label--disabled\">{children}</span> : children}\n </Label>\n </>\n );\n};\n\nexport { Radio };\nexport type { RadioProps };\n", "import { VisuallyHidden } from '@react-aria/visually-hidden';\nimport { Children, cloneElement, isValidElement, useRef } from 'react';\n\nimport { Label } from './Label';\nimport { Radio } from './Radio';\nimport './styles/Form.css';\n\ntype RadioGroupProps = {\n /**\n * The legend that describes this groups of radio buttons. The legend\n * is important for screen reader users.\n */\n legend?: string;\n /**\n * The children passed into the RadioGroup.\n */\n children?: React.ReactNode;\n /**\n * Custom classname(s) passed to the fieldset inner div.\n */\n className?: string;\n /**\n * Set the underlying Radio to disabled if the Radio's disabled prop is undefined.\n */\n disabled?: boolean;\n /**\n * The RadioGroup's id.\n */\n id?: string;\n /**\n * Name to apply to the underlying Radio. The same name value is passed to each Radio when grouping in a RadioGroup for screen reader support.\n */\n name: string;\n /**\n * This function is passed into each Radio onChange synthetic event handler.\n */\n onChange?(e: React.ChangeEvent | React.FormEvent<HTMLInputElement>): void;\n /**\n * The value to compare against the Radio's value to determine if the Radio will be checked.\n */\n value: string;\n};\n\nconst RadioGroup = (props: RadioGroupProps) => {\n const { name, value, onChange, children, disabled, legend, ...other } = props;\n const fieldsetRef = useRef<HTMLFieldSetElement>(null);\n\n function updateRadioElems(elem: React.ReactNode): React.ReactNode {\n if (!isValidElement(elem)) {\n return elem;\n }\n\n const item = elem as React.ReactElement;\n\n if (item?.type && item.type === Radio) {\n return cloneElement(item, {\n ...item.props,\n name,\n checked: item.props.value === value,\n onChange,\n disabled: typeof item.props?.disabled !== 'undefined' ? item.props.disabled : disabled,\n });\n }\n\n if (item?.type && item.type === Label) {\n return cloneElement(item, {\n ...item.props,\n onChange,\n disabled,\n });\n }\n\n const elemChildren = item?.props?.children;\n if (elemChildren) {\n if (Array.isArray(elemChildren)) {\n return cloneElement(item, {\n children: Children.map(elemChildren, (elemChild) => updateRadioElems(elemChild)),\n });\n }\n return cloneElement(item, {\n children: updateRadioElems(elemChildren),\n });\n }\n\n if (item?.type && item.type !== Radio && item.type !== Label) {\n return item;\n }\n\n return null;\n }\n\n const radios = Children.map(children, (child) => updateRadioElems(child));\n return (\n <fieldset ref={fieldsetRef}>\n {legend && (\n <legend>\n <VisuallyHidden>{legend}</VisuallyHidden>\n </legend>\n )}\n <div {...other}>{radios}</div>\n </fieldset>\n );\n};\n\nexport { RadioGroup };\nexport type { RadioGroupProps };\n", "import type { ChangeEvent, FocusEvent, ReactNode } from 'react';\n\nimport { cx } from 'classix';\n\nimport './styles/FormInput.css';\n\ntype SelectProps = {\n children: ReactNode;\n className?: string;\n disabled?: boolean;\n id?: string;\n name?: string;\n onChange?(event: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLSelectElement>): void;\n onBlur?(event: FocusEvent<HTMLSelectElement, HTMLElement>): void;\n testId?: string;\n value?: number | string;\n placeholder?: string;\n 'aria-label'?: string;\n};\n\nconst Select = ({ className, children, testId, ...rest }: SelectProps) => {\n const classes = cx('FormInput', 'FormInput-select', className);\n\n return (\n <select {...rest} className={classes} data-test-id={testId}>\n {children}\n </select>\n );\n};\n\nexport { Select };\nexport type { SelectProps };\n", "import type { TextareaHTMLAttributes } from 'react';\n\nimport { cx } from 'classix';\nimport { forwardRef } from 'react';\n\nimport './styles/FormInput.css';\nimport { createFieldErrorId } from './utils';\n\ntype TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(({ className, ...props }, ref) => {\n const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {\n if (\n e.key === 'ArrowRight' ||\n e.key === 'ArrowDown' ||\n e.key === 'ArrowUp' ||\n e.key === 'ArrowLeft'\n ) {\n e.stopPropagation();\n }\n if (e.key === 'Escape') {\n e.nativeEvent.stopImmediatePropagation();\n }\n };\n\n return (\n <textarea\n {...props}\n className={cx('FormInput', className)}\n ref={ref}\n aria-describedby={props['aria-describedby'] || createFieldErrorId(props.id)}\n onKeyDown={onKeyDown}\n />\n );\n});\n\nTextArea.displayName = 'TextArea';\n\nexport { TextArea };\nexport type { TextAreaProps };\n"],
|
5
|
+
"mappings": "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",
|
6
|
+
"names": ["import_classix", "import_Form", "import_classix", "import_react", "import_classix", "import_react", "import_FormInput", "value", "import_classix", "import_Form", "import_classix", "import_Form", "import_classix", "import_classix", "import_Form", "import_classix", "import_classix", "import_classix", "import_Form", "import_react", "import_Form", "import_classix", "import_FormInput", "import_classix", "import_react", "import_FormInput"]
|
7
7
|
}
|
@@ -1,2 +1,2 @@
|
|
1
|
-
.RequiredAsterisk{
|
1
|
+
.RequiredAsterisk{color:var(--color-system-red-700)}
|
2
2
|
/*# sourceMappingURL=RequiredAsterisk.css.map */
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"AAAA","sources":["src/styles/RequiredAsterisk.css"],"sourcesContent":[".RequiredAsterisk {\n
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"AAAA","sources":["src/styles/RequiredAsterisk.css"],"sourcesContent":[".RequiredAsterisk {\n color: var(--color-system-red-700);\n}\n"],"names":[]}
|
package/dist/styles/styles.css
CHANGED
@@ -1,2 +1,2 @@
|
|
1
|
-
.CompactTextField{width:100%;position:relative}.CompactTextField .Form-label{color:var(--color-text);opacity:0;pointer-events:none;background-color:var(--color-background);transform-origin:0 0;z-index:1;padding:0 3px;transition:all .1s ease-in-out;position:absolute;top:-2px;left:10px}.CompactTextField.is-active .Form-label{border-radius:var(--border-radius);opacity:1;pointer-events:auto;transform:matrix(.9,0,0,.9,0,-8)}.FieldSet{border:none;margin:2rem 0;padding:0}.Form-group{margin:2rem 0}.Form--increasedErrorMargin .Form-group{margin:2.8rem 0}.Form--inline .Form-group{vertical-align:middle;margin:0;display:inline-block}.Form .Form-group:first-child{margin-top:0}.Form .Form-group:last-child{margin-bottom:0}.Form--inline .Form-group+.Form-group,.Form--inline .Form-group+.Button{margin-left:1rem}.Form-label{font-size:1.3rem;font-family:var(--font-family-base);word-break:break-word}.Form-label--disabled{color:var(--color-gray-800)}.Form-labelOptional{color:var(--color-text-subtle-primary);fill:var(--color-text-subtle-primary);margin-left:.4em}.Form-group .Form-label{align-items:center;margin-bottom:.2rem;display:flex}.u-d-inline .Form-label+.Form-label{margin-left:1rem}.Form-group .Form-label+.Form-label{margin-top:.5rem}.Form .Form-error{background:var(--color-system-red-600);color:var(--color-white);font-weight:var(--font-weight-regular);border-radius:var(--border-radius);padding:.7rem 1.4rem}.Form-fieldError{color:var(--color-system-red-600);font-size:1.3rem}.Form--increasedErrorMargin .Form-fieldError{min-height:2.8rem}.Form-label .Form-fieldError{float:right}.Form:not(.Form--inline) .Form-fieldError{text-align:left;padding-top:.5rem;display:block}.Form--increasedErrorMargin:not(.Form--inline) .Form-fieldError{padding-top:.1rem;padding-bottom:.5rem}.Form .is-invalid .Form-label{color:var(--color-system-red-600)}::placeholder{color:var(--color-gray-600)}.Form .is-invalid .Select-control,.Form .is-invalid .CustomSelect>div,.Form .is-invalid .FormInput{border-color:var(--color-system-red-600)}.Form--increasedErrorMargin .Form-group.is-invalid{margin-bottom:0}.Form--increasedErrorMargin .Form-group.is-invalid+.Form-group,.Form--increasedErrorMargin .Form-group.is-invalid+.Form-hint{margin-top:0}.FormField-hint{color:var(--color-text-subtle-primary);fill:var(--color-text-subtle-primary);margin:0;font-size:1.3rem}.Form .FormField .Form-label,.Form .FormField .is-invalid .Form-label{color:var(--color-text)}.FormField-errorMessage{color:var(--color-system-red-600);font-size:1.3rem}.FormField.Form-group{margin:1rem 0}.FormField.Form-group:first-child{margin-top:0}.Form-hint{font-size:1.3rem;font-weight:var(--font-weight-regular);color:var(--color-text-subtle-primary);margin-top:.3rem;display:block}.FormInput{width:100%;font-size:1.3rem;font-family:var(--font-family-base);line-height:var(--line-height-base);background-color:var(--color-background-field);color:var(--color-text);border:1px solid var(--color-gray-500);border-radius:var(--border-radius);padding:.6rem 1rem;transition:all .1s linear;display:block}.FormInput:placeholder-shown{text-overflow:ellipsis;overflow:hidden}input.FormInput,select.FormInput{height:3.2rem}.FormInput.is-disabled,input.FormInput:disabled,select.FormInput:disabled,input.FormInput:read-only{background-color:var(--color-white-100)}.FormInput.is-disabled:hover,.FormInput:disabled:hover{cursor:not-allowed}textarea.FormInput{min-height:2.5em;resize:none}textarea.FormInput:disabled,textarea.FormInput:read-only{background-color:var(--color-white-100)}input.FormInput::-webkit-autofill{box-shadow:0 0 0 50px var(--color-background-field)inset}input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input[type=text]::-ms-clear,input[type=text]::-ms-reveal{width:0;height:0;display:none}input[type=search]::-ms-clear,input[type=search]::-ms-reveal{width:0;height:0;display:none}input[type=checkbox]:disabled{pointer-events:none}input.FormInput--tiny{height:2.4rem;padding:.1rem .6rem}.FormInput.is-focused,.FormInput:focus{border-color:var(--color-focus);outline:0;box-shadow:0 0 0 3px #405bff1a}.FormInput[readonly],.FormInput[readonly]:focus{color:var(--color-text-subtle-primary);border-color:var(--color-gray-500);box-shadow:none}.Form-checkbox{flex-shrink:0;align-self:flex-start;margin-top:.4rem;margin-right:.5rem}.Form-radio{margin-right:.5rem}.FormInput-select{-webkit-appearance:none;appearance:none;background-color:#0000;background-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M7.41 8.84L12 13.42l4.59-4.58L18 10.25l-6 6-6-6 1.41-1.41z\" fill=\"%23646f7a\"/></svg>");background-position:right .4em top 50%,0 0;background-repeat:no-repeat;background-size:2rem;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;padding-right:2rem}.FormInput-number{min-width:4.5rem}.FormInput-suffixContainer{border:1px solid var(--color-gray-500);border-radius:var(--border-radius);transition:all .1s linear;display:inline-flex;overflow:hidden}.FormInput-suffixContainer:focus-within{border-color:var(--color-focus);box-shadow:0 0 0 3px #405bff1a}.FormInput-suffixContainer .FormInput{border-radius:var(--border-radius)0 0 var(--border-radius);border:none}.FormInput-suffixContainer .FormInput:focus{box-shadow:none}.FormInput-suffixContainer label.FormInput-suffix{background-color:var(--color-gray-100);color:var(--color-gray-500);cursor:text;position:initial;align-items:center;padding:0 2px;display:inline-flex}input.FormInput-suffix::-webkit-outer-spin-button,input.FormInput-suffix::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}input.FormInput-suffix[type=number]{-webkit-appearance:textfield;appearance:textfield}.IconField{position:relative}.IconField .FormInput{padding-left:3rem}.FormInput~.Icon{fill:var(--color-gray-600);position:absolute;top:50%;left:1rem;transform:translateY(-50%)}.InputGroup{display:flex}.InputGroup>*+*{margin-left:1rem}.RequiredAsterisk{
|
1
|
+
.CompactTextField{width:100%;position:relative}.CompactTextField .Form-label{color:var(--color-text);opacity:0;pointer-events:none;background-color:var(--color-background);transform-origin:0 0;z-index:1;padding:0 3px;transition:all .1s ease-in-out;position:absolute;top:-2px;left:10px}.CompactTextField.is-active .Form-label{border-radius:var(--border-radius);opacity:1;pointer-events:auto;transform:matrix(.9,0,0,.9,0,-8)}.FieldSet{border:none;margin:2rem 0;padding:0}.Form-group{margin:2rem 0}.Form--increasedErrorMargin .Form-group{margin:2.8rem 0}.Form--inline .Form-group{vertical-align:middle;margin:0;display:inline-block}.Form .Form-group:first-child{margin-top:0}.Form .Form-group:last-child{margin-bottom:0}.Form--inline .Form-group+.Form-group,.Form--inline .Form-group+.Button{margin-left:1rem}.Form-label{font-size:1.3rem;font-family:var(--font-family-base);word-break:break-word}.Form-label--disabled{color:var(--color-gray-800)}.Form-labelOptional{color:var(--color-text-subtle-primary);fill:var(--color-text-subtle-primary);margin-left:.4em}.Form-group .Form-label{align-items:center;margin-bottom:.2rem;display:flex}.u-d-inline .Form-label+.Form-label{margin-left:1rem}.Form-group .Form-label+.Form-label{margin-top:.5rem}.Form .Form-error{background:var(--color-system-red-600);color:var(--color-white);font-weight:var(--font-weight-regular);border-radius:var(--border-radius);padding:.7rem 1.4rem}.Form-fieldError{color:var(--color-system-red-600);font-size:1.3rem}.Form--increasedErrorMargin .Form-fieldError{min-height:2.8rem}.Form-label .Form-fieldError{float:right}.Form:not(.Form--inline) .Form-fieldError{text-align:left;padding-top:.5rem;display:block}.Form--increasedErrorMargin:not(.Form--inline) .Form-fieldError{padding-top:.1rem;padding-bottom:.5rem}.Form .is-invalid .Form-label{color:var(--color-system-red-600)}::placeholder{color:var(--color-gray-600)}.Form .is-invalid .Select-control,.Form .is-invalid .CustomSelect>div,.Form .is-invalid .FormInput{border-color:var(--color-system-red-600)}.Form--increasedErrorMargin .Form-group.is-invalid{margin-bottom:0}.Form--increasedErrorMargin .Form-group.is-invalid+.Form-group,.Form--increasedErrorMargin .Form-group.is-invalid+.Form-hint{margin-top:0}.FormField-hint{color:var(--color-text-subtle-primary);fill:var(--color-text-subtle-primary);margin:0;font-size:1.3rem}.Form .FormField .Form-label,.Form .FormField .is-invalid .Form-label{color:var(--color-text)}.FormField-errorMessage{color:var(--color-system-red-600);font-size:1.3rem}.FormField.Form-group{margin:1rem 0}.FormField.Form-group:first-child{margin-top:0}.Form-hint{font-size:1.3rem;font-weight:var(--font-weight-regular);color:var(--color-text-subtle-primary);margin-top:.3rem;display:block}.FormInput{width:100%;font-size:1.3rem;font-family:var(--font-family-base);line-height:var(--line-height-base);background-color:var(--color-background-field);color:var(--color-text);border:1px solid var(--color-gray-500);border-radius:var(--border-radius);padding:.6rem 1rem;transition:all .1s linear;display:block}.FormInput:placeholder-shown{text-overflow:ellipsis;overflow:hidden}input.FormInput,select.FormInput{height:3.2rem}.FormInput.is-disabled,input.FormInput:disabled,select.FormInput:disabled,input.FormInput:read-only{background-color:var(--color-white-100)}.FormInput.is-disabled:hover,.FormInput:disabled:hover{cursor:not-allowed}textarea.FormInput{min-height:2.5em;resize:none}textarea.FormInput:disabled,textarea.FormInput:read-only{background-color:var(--color-white-100)}input.FormInput::-webkit-autofill{box-shadow:0 0 0 50px var(--color-background-field)inset}input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}input[type=text]::-ms-clear,input[type=text]::-ms-reveal{width:0;height:0;display:none}input[type=search]::-ms-clear,input[type=search]::-ms-reveal{width:0;height:0;display:none}input[type=checkbox]:disabled{pointer-events:none}input.FormInput--tiny{height:2.4rem;padding:.1rem .6rem}.FormInput.is-focused,.FormInput:focus{border-color:var(--color-focus);outline:0;box-shadow:0 0 0 3px #405bff1a}.FormInput[readonly],.FormInput[readonly]:focus{color:var(--color-text-subtle-primary);border-color:var(--color-gray-500);box-shadow:none}.Form-checkbox{flex-shrink:0;align-self:flex-start;margin-top:.4rem;margin-right:.5rem}.Form-radio{margin-right:.5rem}.FormInput-select{-webkit-appearance:none;appearance:none;background-color:#0000;background-image:url("data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M7.41 8.84L12 13.42l4.59-4.58L18 10.25l-6 6-6-6 1.41-1.41z\" fill=\"%23646f7a\"/></svg>");background-position:right .4em top 50%,0 0;background-repeat:no-repeat;background-size:2rem;background-attachment:scroll;background-origin:padding-box;background-clip:border-box;padding-right:2rem}.FormInput-number{min-width:4.5rem}.FormInput-suffixContainer{border:1px solid var(--color-gray-500);border-radius:var(--border-radius);transition:all .1s linear;display:inline-flex;overflow:hidden}.FormInput-suffixContainer:focus-within{border-color:var(--color-focus);box-shadow:0 0 0 3px #405bff1a}.FormInput-suffixContainer .FormInput{border-radius:var(--border-radius)0 0 var(--border-radius);border:none}.FormInput-suffixContainer .FormInput:focus{box-shadow:none}.FormInput-suffixContainer label.FormInput-suffix{background-color:var(--color-gray-100);color:var(--color-gray-500);cursor:text;position:initial;align-items:center;padding:0 2px;display:inline-flex}input.FormInput-suffix::-webkit-outer-spin-button,input.FormInput-suffix::-webkit-inner-spin-button{-webkit-appearance:none;appearance:none;margin:0}input.FormInput-suffix[type=number]{-webkit-appearance:textfield;appearance:textfield}.IconField{position:relative}.IconField .FormInput{padding-left:3rem}.FormInput~.Icon{fill:var(--color-gray-600);position:absolute;top:50%;left:1rem;transform:translateY(-50%)}.InputGroup{display:flex}.InputGroup>*+*{margin-left:1rem}.RequiredAsterisk{color:var(--color-system-red-700)}
|
2
2
|
/*# sourceMappingURL=styles.css.map */
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sourceRoot":null,"mappings":"ACAA,+CAKA,8OAcA,0ICnBA,8CCAA,0BAMA,wDAIA,8EAMA,2CAIA,6CAIA,yFAKA,uFAMA,kDAIA,kHAMA,4EAMA,qDAIA,qDAIA,iLAQA,oEAOA,+DAIA,yCAIA,0FAMA,uGAKA,gEAIA,0CAIA,4IAMA,mEAIA,0IC/GA,uHAOA,8FAKA,2EAKA,oCAIA,+CCrBA,yICEA,2TAcA,oEAKA,+CAKA,4IAOA,0EAKA,gDAKA,iGAKA,2FAKA,oNAQA,uFAOA,2FAOA,kDAIA,wDAKA,gHAOA,0IAOA,uFAOA,+BAIA,weAUA,mCAIA,mKAQA,uGAKA,6GAKA,4DAIA,uMAUA,qJAOA,sFClKA,6BAIA,wCAIA,2GCRA,yBAIA,iCCJA","sources":["src/styles/styles.css","src/styles/CompactTextField.css","src/styles/FieldSet.css","src/styles/Form.css","src/styles/FormField.css","src/styles/FormHint.css","src/styles/FormInput.css","src/styles/IconField.css","src/styles/InputGroup.css","src/styles/RequiredAsterisk.css"],"sourcesContent":["@import './CompactTextField.css';\n@import './FieldSet.css';\n@import './Form.css';\n@import './FormField.css';\n@import './FormHint.css';\n@import './FormInput.css';\n@import './IconField.css';\n@import './InputGroup.css';\n@import './RequiredAsterisk.css';\n",".CompactTextField {\n position: relative;\n width: 100%;\n}\n\n.CompactTextField .Form-label {\n position: absolute;\n top: -2px;\n left: 10px;\n padding: 0 3px;\n color: var(--color-text);\n opacity: 0;\n pointer-events: none;\n background-color: var(--color-background);\n transform-origin: 0 0; /* preserve left alignment after scaling */\n transition: all 100ms ease-in-out;\n z-index: 1; /* Fixes layout issue in Firefox */\n}\n\n.CompactTextField.is-active .Form-label {\n border-radius: var(--border-radius);\n opacity: 1;\n pointer-events: auto;\n transform: translate(0, -8px) scale(0.9); /* 2d transform to avoid webkit blurry text */\n}\n",".FieldSet {\n border: none;\n margin: 2rem 0;\n padding: 0;\n}\n",".Form-group {\n margin: 2rem 0;\n}\n\n/* The margin for .Form-group and the min-height of .Form-fieldError\n should be equal to avoid content shift when errors are shown */\n.Form--increasedErrorMargin .Form-group {\n margin: 2.8rem 0;\n}\n\n.Form--inline .Form-group {\n display: inline-block;\n vertical-align: middle;\n margin: 0;\n}\n\n.Form .Form-group:first-child {\n margin-top: 0;\n}\n\n.Form .Form-group:last-child {\n margin-bottom: 0;\n}\n\n.Form--inline .Form-group + .Form-group,\n.Form--inline .Form-group + .Button {\n margin-left: 1rem;\n}\n\n.Form-label {\n font-size: 1.3rem;\n font-family: var(--font-family-base);\n word-break: break-word;\n}\n\n.Form-label--disabled {\n color: var(--color-gray-800);\n}\n\n.Form-labelOptional {\n margin-left: 0.4em;\n color: var(--color-text-subtle-primary);\n fill: var(--color-text-subtle-primary);\n}\n\n.Form-group .Form-label {\n display: flex;\n align-items: center;\n margin-bottom: 0.2rem;\n}\n\n.u-d-inline .Form-label + .Form-label {\n margin-left: 1rem;\n}\n\n.Form-group .Form-label + .Form-label {\n margin-top: 0.5rem;\n}\n\n.Form .Form-error {\n background: var(--color-system-red-600);\n color: var(--color-white);\n font-weight: var(--font-weight-regular);\n padding: 0.7rem 1.4rem;\n border-radius: var(--border-radius);\n}\n\n.Form-fieldError {\n color: var(--color-system-red-600);\n font-size: 1.3rem;\n}\n\n/* The margin for .Form-group and the min-height of .Form-fieldError\n should be equal to avoid content shift when errors are shown */\n.Form--increasedErrorMargin .Form-fieldError {\n min-height: 2.8rem;\n}\n\n.Form-label .Form-fieldError {\n float: right;\n}\n\n.Form:not(.Form--inline) .Form-fieldError {\n display: block;\n padding-top: 0.5rem;\n text-align: left;\n}\n\n.Form--increasedErrorMargin:not(.Form--inline) .Form-fieldError {\n padding-top: 0.1rem;\n padding-bottom: 0.5rem;\n}\n\n.Form .is-invalid .Form-label {\n color: var(--color-system-red-600);\n}\n\n::placeholder {\n color: var(--color-gray-600);\n}\n\n.Form .is-invalid .Select-control,\n.Form .is-invalid .CustomSelect > div,\n.Form .is-invalid .FormInput {\n border-color: var(--color-system-red-600);\n}\n\n.Form--increasedErrorMargin .Form-group.is-invalid {\n margin-bottom: 0;\n}\n\n.Form--increasedErrorMargin .Form-group.is-invalid + .Form-group {\n margin-top: 0;\n}\n\n.Form--increasedErrorMargin .Form-group.is-invalid + .Form-hint {\n margin-top: 0;\n}\n",".FormField-hint {\n margin: 0;\n font-size: 1.3rem;\n color: var(--color-text-subtle-primary);\n fill: var(--color-text-subtle-primary);\n}\n\n.Form .FormField .Form-label,\n.Form .FormField .is-invalid .Form-label {\n color: var(--color-text);\n}\n\n.FormField-errorMessage {\n color: var(--color-system-red-600);\n font-size: 1.3rem;\n}\n\n.FormField.Form-group {\n margin: 1rem 0;\n}\n\n.FormField.Form-group:first-child {\n margin-top: 0;\n}\n",".Form-hint {\n display: block;\n margin-top: 0.3rem;\n font-size: 1.3rem;\n font-weight: var(--font-weight-regular);\n color: var(--color-text-subtle-primary);\n}\n","/* stylelint-disable no-descending-specificity */\n\n.FormInput {\n display: block;\n width: 100%;\n padding: 0.6rem 1rem;\n font-size: 1.3rem;\n font-family: var(--font-family-base);\n line-height: var(--line-height-base);\n background-color: var(--color-background-field);\n color: var(--color-text);\n border: 1px solid var(--color-gray-500);\n border-radius: var(--border-radius);\n transition: all 100ms linear;\n}\n\n.FormInput:placeholder-shown {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\ninput.FormInput,\nselect.FormInput {\n height: 3.2rem;\n}\n\n.FormInput.is-disabled,\ninput.FormInput:disabled,\nselect.FormInput:disabled,\ninput.FormInput:read-only {\n background-color: var(--color-white-100);\n}\n\n.FormInput.is-disabled:hover,\n.FormInput:disabled:hover {\n cursor: not-allowed;\n}\n\ntextarea.FormInput {\n min-height: 2.5em;\n resize: none;\n}\n\ntextarea.FormInput:disabled,\ntextarea.FormInput:read-only {\n background-color: var(--color-white-100);\n}\n\ninput.FormInput::-webkit-autofill {\n box-shadow: 0 0 0 50px var(--color-background-field) inset;\n}\n\n/* Hide the type=search cancel button in Webkit for consistency */\ninput[type='search']::-webkit-search-decoration,\ninput[type='search']::-webkit-search-cancel-button,\ninput[type='search']::-webkit-search-results-button,\ninput[type='search']::-webkit-search-results-decoration {\n display: none;\n}\n\n/* Hide the type=search cancel button in IE for consistency */\ninput[type='text']::-ms-clear,\ninput[type='text']::-ms-reveal {\n display: none;\n width: 0;\n height: 0;\n}\n\ninput[type='search']::-ms-clear,\ninput[type='search']::-ms-reveal {\n display: none;\n width: 0;\n height: 0;\n}\n\ninput[type='checkbox']:disabled {\n pointer-events: none;\n}\n\ninput.FormInput--tiny {\n padding: 0.1rem 0.6rem;\n height: 2.4rem;\n}\n\n.FormInput.is-focused,\n.FormInput:focus {\n outline: 0;\n border-color: var(--color-focus);\n box-shadow: 0 0 0 3px hsl(231.5 100% 62.5% / 0.1);\n}\n\n.FormInput[readonly],\n.FormInput[readonly]:focus {\n color: var(--color-text-subtle-primary);\n border-color: var(--color-gray-500);\n box-shadow: none;\n}\n\n.Form-checkbox {\n align-self: flex-start; /* Default for .Form-label is center, but this looks bad on multi-line checkbox labels */\n flex-shrink: 0; /* Make sure the input itself doesn't shrink in flex layouts */\n margin-right: 0.5rem;\n margin-top: 0.4rem;\n}\n\n.Form-radio {\n margin-right: 0.5rem;\n}\n\n.FormInput-select {\n appearance: none;\n background: transparent;\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M7.41 8.84L12 13.42l4.59-4.58L18 10.25l-6 6-6-6 1.41-1.41z\" fill=\"%23646f7a\"/></svg>');\n background-size: 2rem;\n background-repeat: no-repeat;\n background-position: right 0.4em top 50%, 0 0;\n padding-right: 2rem;\n}\n\n.FormInput-number {\n min-width: 4.5rem;\n}\n\n.FormInput-suffixContainer {\n display: inline-flex;\n border: 1px solid var(--color-gray-500);\n border-radius: var(--border-radius);\n overflow: hidden;\n transition: all 0.1s linear;\n}\n\n.FormInput-suffixContainer:focus-within {\n border-color: var(--color-focus);\n box-shadow: 0 0 0 3px hsl(231.5 100% 62.5% / 0.1);\n}\n\n.FormInput-suffixContainer .FormInput {\n border: none;\n border-radius: var(--border-radius) 0 0 var(--border-radius);\n}\n\n.FormInput-suffixContainer .FormInput:focus {\n box-shadow: none;\n}\n\n.FormInput-suffixContainer label.FormInput-suffix {\n padding: 0 2px;\n background-color: var(--color-gray-100);\n color: var(--color-gray-500);\n cursor: text;\n display: inline-flex;\n align-items: center;\n position: initial;\n}\n\ninput.FormInput-suffix::-webkit-outer-spin-button,\ninput.FormInput-suffix::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n}\n\n/* Firefox */\ninput.FormInput-suffix[type='number'] {\n appearance: textfield;\n}\n\n/* stylelint-enable no-descending-specificity */\n",".IconField {\n position: relative;\n}\n\n.IconField .FormInput {\n padding-left: 3rem;\n}\n\n.FormInput ~ .Icon {\n position: absolute;\n fill: var(--color-gray-600);\n top: 50%;\n transform: translateY(-50%);\n left: 1rem;\n}\n",".InputGroup {\n display: flex;\n}\n\n.InputGroup > * + * {\n margin-left: 1rem;\n}\n",".RequiredAsterisk {\n
|
1
|
+
{"version":3,"sourceRoot":null,"mappings":"ACAA,+CAKA,8OAcA,0ICnBA,8CCAA,0BAMA,wDAIA,8EAMA,2CAIA,6CAIA,yFAKA,uFAMA,kDAIA,kHAMA,4EAMA,qDAIA,qDAIA,iLAQA,oEAOA,+DAIA,yCAIA,0FAMA,uGAKA,gEAIA,0CAIA,4IAMA,mEAIA,0IC/GA,uHAOA,8FAKA,2EAKA,oCAIA,+CCrBA,yICEA,2TAcA,oEAKA,+CAKA,4IAOA,0EAKA,gDAKA,iGAKA,2FAKA,oNAQA,uFAOA,2FAOA,kDAIA,wDAKA,gHAOA,0IAOA,uFAOA,+BAIA,weAUA,mCAIA,mKAQA,uGAKA,6GAKA,4DAIA,uMAUA,qJAOA,sFClKA,6BAIA,wCAIA,2GCRA,yBAIA,iCCJA","sources":["src/styles/styles.css","src/styles/CompactTextField.css","src/styles/FieldSet.css","src/styles/Form.css","src/styles/FormField.css","src/styles/FormHint.css","src/styles/FormInput.css","src/styles/IconField.css","src/styles/InputGroup.css","src/styles/RequiredAsterisk.css"],"sourcesContent":["@import './CompactTextField.css';\n@import './FieldSet.css';\n@import './Form.css';\n@import './FormField.css';\n@import './FormHint.css';\n@import './FormInput.css';\n@import './IconField.css';\n@import './InputGroup.css';\n@import './RequiredAsterisk.css';\n",".CompactTextField {\n position: relative;\n width: 100%;\n}\n\n.CompactTextField .Form-label {\n position: absolute;\n top: -2px;\n left: 10px;\n padding: 0 3px;\n color: var(--color-text);\n opacity: 0;\n pointer-events: none;\n background-color: var(--color-background);\n transform-origin: 0 0; /* preserve left alignment after scaling */\n transition: all 100ms ease-in-out;\n z-index: 1; /* Fixes layout issue in Firefox */\n}\n\n.CompactTextField.is-active .Form-label {\n border-radius: var(--border-radius);\n opacity: 1;\n pointer-events: auto;\n transform: translate(0, -8px) scale(0.9); /* 2d transform to avoid webkit blurry text */\n}\n",".FieldSet {\n border: none;\n margin: 2rem 0;\n padding: 0;\n}\n",".Form-group {\n margin: 2rem 0;\n}\n\n/* The margin for .Form-group and the min-height of .Form-fieldError\n should be equal to avoid content shift when errors are shown */\n.Form--increasedErrorMargin .Form-group {\n margin: 2.8rem 0;\n}\n\n.Form--inline .Form-group {\n display: inline-block;\n vertical-align: middle;\n margin: 0;\n}\n\n.Form .Form-group:first-child {\n margin-top: 0;\n}\n\n.Form .Form-group:last-child {\n margin-bottom: 0;\n}\n\n.Form--inline .Form-group + .Form-group,\n.Form--inline .Form-group + .Button {\n margin-left: 1rem;\n}\n\n.Form-label {\n font-size: 1.3rem;\n font-family: var(--font-family-base);\n word-break: break-word;\n}\n\n.Form-label--disabled {\n color: var(--color-gray-800);\n}\n\n.Form-labelOptional {\n margin-left: 0.4em;\n color: var(--color-text-subtle-primary);\n fill: var(--color-text-subtle-primary);\n}\n\n.Form-group .Form-label {\n display: flex;\n align-items: center;\n margin-bottom: 0.2rem;\n}\n\n.u-d-inline .Form-label + .Form-label {\n margin-left: 1rem;\n}\n\n.Form-group .Form-label + .Form-label {\n margin-top: 0.5rem;\n}\n\n.Form .Form-error {\n background: var(--color-system-red-600);\n color: var(--color-white);\n font-weight: var(--font-weight-regular);\n padding: 0.7rem 1.4rem;\n border-radius: var(--border-radius);\n}\n\n.Form-fieldError {\n color: var(--color-system-red-600);\n font-size: 1.3rem;\n}\n\n/* The margin for .Form-group and the min-height of .Form-fieldError\n should be equal to avoid content shift when errors are shown */\n.Form--increasedErrorMargin .Form-fieldError {\n min-height: 2.8rem;\n}\n\n.Form-label .Form-fieldError {\n float: right;\n}\n\n.Form:not(.Form--inline) .Form-fieldError {\n display: block;\n padding-top: 0.5rem;\n text-align: left;\n}\n\n.Form--increasedErrorMargin:not(.Form--inline) .Form-fieldError {\n padding-top: 0.1rem;\n padding-bottom: 0.5rem;\n}\n\n.Form .is-invalid .Form-label {\n color: var(--color-system-red-600);\n}\n\n::placeholder {\n color: var(--color-gray-600);\n}\n\n.Form .is-invalid .Select-control,\n.Form .is-invalid .CustomSelect > div,\n.Form .is-invalid .FormInput {\n border-color: var(--color-system-red-600);\n}\n\n.Form--increasedErrorMargin .Form-group.is-invalid {\n margin-bottom: 0;\n}\n\n.Form--increasedErrorMargin .Form-group.is-invalid + .Form-group {\n margin-top: 0;\n}\n\n.Form--increasedErrorMargin .Form-group.is-invalid + .Form-hint {\n margin-top: 0;\n}\n",".FormField-hint {\n margin: 0;\n font-size: 1.3rem;\n color: var(--color-text-subtle-primary);\n fill: var(--color-text-subtle-primary);\n}\n\n.Form .FormField .Form-label,\n.Form .FormField .is-invalid .Form-label {\n color: var(--color-text);\n}\n\n.FormField-errorMessage {\n color: var(--color-system-red-600);\n font-size: 1.3rem;\n}\n\n.FormField.Form-group {\n margin: 1rem 0;\n}\n\n.FormField.Form-group:first-child {\n margin-top: 0;\n}\n",".Form-hint {\n display: block;\n margin-top: 0.3rem;\n font-size: 1.3rem;\n font-weight: var(--font-weight-regular);\n color: var(--color-text-subtle-primary);\n}\n","/* stylelint-disable no-descending-specificity */\n\n.FormInput {\n display: block;\n width: 100%;\n padding: 0.6rem 1rem;\n font-size: 1.3rem;\n font-family: var(--font-family-base);\n line-height: var(--line-height-base);\n background-color: var(--color-background-field);\n color: var(--color-text);\n border: 1px solid var(--color-gray-500);\n border-radius: var(--border-radius);\n transition: all 100ms linear;\n}\n\n.FormInput:placeholder-shown {\n overflow: hidden;\n text-overflow: ellipsis;\n}\n\ninput.FormInput,\nselect.FormInput {\n height: 3.2rem;\n}\n\n.FormInput.is-disabled,\ninput.FormInput:disabled,\nselect.FormInput:disabled,\ninput.FormInput:read-only {\n background-color: var(--color-white-100);\n}\n\n.FormInput.is-disabled:hover,\n.FormInput:disabled:hover {\n cursor: not-allowed;\n}\n\ntextarea.FormInput {\n min-height: 2.5em;\n resize: none;\n}\n\ntextarea.FormInput:disabled,\ntextarea.FormInput:read-only {\n background-color: var(--color-white-100);\n}\n\ninput.FormInput::-webkit-autofill {\n box-shadow: 0 0 0 50px var(--color-background-field) inset;\n}\n\n/* Hide the type=search cancel button in Webkit for consistency */\ninput[type='search']::-webkit-search-decoration,\ninput[type='search']::-webkit-search-cancel-button,\ninput[type='search']::-webkit-search-results-button,\ninput[type='search']::-webkit-search-results-decoration {\n display: none;\n}\n\n/* Hide the type=search cancel button in IE for consistency */\ninput[type='text']::-ms-clear,\ninput[type='text']::-ms-reveal {\n display: none;\n width: 0;\n height: 0;\n}\n\ninput[type='search']::-ms-clear,\ninput[type='search']::-ms-reveal {\n display: none;\n width: 0;\n height: 0;\n}\n\ninput[type='checkbox']:disabled {\n pointer-events: none;\n}\n\ninput.FormInput--tiny {\n padding: 0.1rem 0.6rem;\n height: 2.4rem;\n}\n\n.FormInput.is-focused,\n.FormInput:focus {\n outline: 0;\n border-color: var(--color-focus);\n box-shadow: 0 0 0 3px hsl(231.5 100% 62.5% / 0.1);\n}\n\n.FormInput[readonly],\n.FormInput[readonly]:focus {\n color: var(--color-text-subtle-primary);\n border-color: var(--color-gray-500);\n box-shadow: none;\n}\n\n.Form-checkbox {\n align-self: flex-start; /* Default for .Form-label is center, but this looks bad on multi-line checkbox labels */\n flex-shrink: 0; /* Make sure the input itself doesn't shrink in flex layouts */\n margin-right: 0.5rem;\n margin-top: 0.4rem;\n}\n\n.Form-radio {\n margin-right: 0.5rem;\n}\n\n.FormInput-select {\n appearance: none;\n background: transparent;\n background-image: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M7.41 8.84L12 13.42l4.59-4.58L18 10.25l-6 6-6-6 1.41-1.41z\" fill=\"%23646f7a\"/></svg>');\n background-size: 2rem;\n background-repeat: no-repeat;\n background-position: right 0.4em top 50%, 0 0;\n padding-right: 2rem;\n}\n\n.FormInput-number {\n min-width: 4.5rem;\n}\n\n.FormInput-suffixContainer {\n display: inline-flex;\n border: 1px solid var(--color-gray-500);\n border-radius: var(--border-radius);\n overflow: hidden;\n transition: all 0.1s linear;\n}\n\n.FormInput-suffixContainer:focus-within {\n border-color: var(--color-focus);\n box-shadow: 0 0 0 3px hsl(231.5 100% 62.5% / 0.1);\n}\n\n.FormInput-suffixContainer .FormInput {\n border: none;\n border-radius: var(--border-radius) 0 0 var(--border-radius);\n}\n\n.FormInput-suffixContainer .FormInput:focus {\n box-shadow: none;\n}\n\n.FormInput-suffixContainer label.FormInput-suffix {\n padding: 0 2px;\n background-color: var(--color-gray-100);\n color: var(--color-gray-500);\n cursor: text;\n display: inline-flex;\n align-items: center;\n position: initial;\n}\n\ninput.FormInput-suffix::-webkit-outer-spin-button,\ninput.FormInput-suffix::-webkit-inner-spin-button {\n appearance: none;\n margin: 0;\n}\n\n/* Firefox */\ninput.FormInput-suffix[type='number'] {\n appearance: textfield;\n}\n\n/* stylelint-enable no-descending-specificity */\n",".IconField {\n position: relative;\n}\n\n.IconField .FormInput {\n padding-left: 3rem;\n}\n\n.FormInput ~ .Icon {\n position: absolute;\n fill: var(--color-gray-600);\n top: 50%;\n transform: translateY(-50%);\n left: 1rem;\n}\n",".InputGroup {\n display: flex;\n}\n\n.InputGroup > * + * {\n margin-left: 1rem;\n}\n",".RequiredAsterisk {\n color: var(--color-system-red-700);\n}\n"],"names":[]}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@launchpad-ui/form",
|
3
|
-
"version": "0.3.
|
3
|
+
"version": "0.3.5",
|
4
4
|
"status": "beta",
|
5
5
|
"publishConfig": {
|
6
6
|
"access": "public"
|
@@ -26,10 +26,10 @@
|
|
26
26
|
},
|
27
27
|
"source": "src/index.ts",
|
28
28
|
"dependencies": {
|
29
|
-
"@launchpad-ui/icons": "~0.3.
|
29
|
+
"@launchpad-ui/icons": "~0.3.3",
|
30
30
|
"@launchpad-ui/tokens": "~0.1.5",
|
31
31
|
"@react-aria/visually-hidden": "^3.4.0",
|
32
|
-
"
|
32
|
+
"classix": "^2.1.13"
|
33
33
|
},
|
34
34
|
"peerDependencies": {
|
35
35
|
"react": "^18.0.0",
|