@launchpad-ui/form 0.1.1 → 0.2.0
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/Checkbox.d.ts +25 -8
- package/dist/Checkbox.d.ts.map +1 -1
- package/dist/CompactTextField.d.ts +11 -13
- package/dist/CompactTextField.d.ts.map +1 -1
- package/dist/InputGroup.d.ts +3 -2
- package/dist/InputGroup.d.ts.map +1 -1
- package/dist/Label.d.ts +4 -2
- package/dist/Label.d.ts.map +1 -1
- package/dist/RequiredAsterisk.d.ts +1 -0
- package/dist/RequiredAsterisk.d.ts.map +1 -1
- package/dist/TextArea.d.ts +2 -7
- package/dist/TextArea.d.ts.map +1 -1
- package/dist/TextField.d.ts +8 -12
- package/dist/TextField.d.ts.map +1 -1
- package/dist/index.d.ts +8 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.es.js +129 -186
- package/dist/index.es.js.map +2 -2
- package/dist/index.js +125 -182
- package/dist/index.js.map +2 -2
- package/package.json +3 -3
package/dist/Checkbox.d.ts
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import {
|
1
|
+
import type { InputHTMLAttributes } from 'react';
|
2
2
|
import './styles/Form.css';
|
3
3
|
declare type CheckboxProps = InputHTMLAttributes<HTMLInputElement> & {
|
4
4
|
/**
|
@@ -24,13 +24,30 @@ declare type CheckboxProps = InputHTMLAttributes<HTMLInputElement> & {
|
|
24
24
|
*/
|
25
25
|
testId?: string;
|
26
26
|
};
|
27
|
-
declare
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
27
|
+
declare const Checkbox: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
|
28
|
+
/**
|
29
|
+
* Use an aria-label if you don't pass in children and don't have a visible label to associate with the input element.
|
30
|
+
*/
|
31
|
+
'aria-label'?: string | undefined;
|
32
|
+
/**
|
33
|
+
* id attribute of the label text elsewhere in the app, used for screen reader support
|
34
|
+
* Use this for cases where you have a visible label on the page that is not close to
|
35
|
+
* the input. https://tink.uk/the-difference-between-aria-label-and-aria-labelledby/
|
36
|
+
*/
|
37
|
+
'aria-labelledby'?: string | undefined;
|
38
|
+
/**
|
39
|
+
* Label for the Checkbox
|
40
|
+
*/
|
41
|
+
children?: React.ReactNode;
|
42
|
+
/**
|
43
|
+
* The className to pass into the Checkbox's Label component
|
44
|
+
*/
|
45
|
+
labelClassName?: string | undefined;
|
46
|
+
/**
|
47
|
+
* The test id for the data-test-id attribute for React Testing Library support
|
48
|
+
*/
|
49
|
+
testId?: string | undefined;
|
50
|
+
} & import("react").RefAttributes<HTMLInputElement>>;
|
34
51
|
export { Checkbox };
|
35
52
|
export type { CheckboxProps };
|
36
53
|
//# sourceMappingURL=Checkbox.d.ts.map
|
package/dist/Checkbox.d.ts.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../src/Checkbox.tsx"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../src/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAKjD,OAAO,mBAAmB,CAAC;AAE3B,aAAK,aAAa,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;IAC3D;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,QAAA,MAAM,QAAQ;IAxBZ;;OAEG;;IAEH;;;;OAIG;;IAEH;;OAEG;eACQ,MAAM,SAAS;IAC1B;;OAEG;;IAEH;;OAEG;;oDA2CJ,CAAC;AAIF,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,CAAC"}
|
@@ -1,22 +1,20 @@
|
|
1
|
-
|
2
|
-
import {
|
1
|
+
/// <reference types="react" />
|
2
|
+
import { TextFieldProps } from './TextField';
|
3
3
|
import './styles/CompactTextField.css';
|
4
4
|
import './styles/FormInput.css';
|
5
5
|
declare type CompactTextFieldProps = TextFieldProps & {
|
6
6
|
label: string;
|
7
7
|
needsErrorFeedback?: boolean;
|
8
8
|
};
|
9
|
-
declare
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
focus: () => void;
|
19
|
-
}
|
9
|
+
declare const CompactTextField: import("react").ForwardRefExoticComponent<import("react").InputHTMLAttributes<HTMLInputElement> & {
|
10
|
+
suffix?: string | undefined;
|
11
|
+
testId?: string | undefined;
|
12
|
+
tiny?: boolean | undefined;
|
13
|
+
overrideWidth?: string | undefined;
|
14
|
+
} & {
|
15
|
+
label: string;
|
16
|
+
needsErrorFeedback?: boolean | undefined;
|
17
|
+
} & import("react").RefAttributes<HTMLInputElement>>;
|
20
18
|
export { CompactTextField };
|
21
19
|
export type { CompactTextFieldProps };
|
22
20
|
//# sourceMappingURL=CompactTextField.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"CompactTextField.d.ts","sourceRoot":"","sources":["../src/CompactTextField.tsx"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"CompactTextField.d.ts","sourceRoot":"","sources":["../src/CompactTextField.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAa,cAAc,EAAE,MAAM,aAAa,CAAC;AACxD,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;;oDAqDd,CAAC;AAIF,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAC5B,YAAY,EAAE,qBAAqB,EAAE,CAAC"}
|
package/dist/InputGroup.d.ts
CHANGED
@@ -1,6 +1,7 @@
|
|
1
1
|
import type { ComponentPropsWithRef } from 'react';
|
2
2
|
import './styles/InputGroup.css';
|
3
3
|
declare type InputGroupProps = ComponentPropsWithRef<'div'>;
|
4
|
-
|
5
|
-
export {};
|
4
|
+
declare const InputGroup: ({ className, children, ...other }: InputGroupProps) => JSX.Element;
|
5
|
+
export { InputGroup };
|
6
|
+
export type { InputGroupProps };
|
6
7
|
//# sourceMappingURL=InputGroup.d.ts.map
|
package/dist/InputGroup.d.ts.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../src/InputGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAInD,OAAO,yBAAyB,CAAC;AAEjC,aAAK,eAAe,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;AAEpD,
|
1
|
+
{"version":3,"file":"InputGroup.d.ts","sourceRoot":"","sources":["../src/InputGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAC;AAInD,OAAO,yBAAyB,CAAC;AAEjC,aAAK,eAAe,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;AAEpD,QAAA,MAAM,UAAU,sCAAuC,eAAe,gBAQrE,CAAC;AAEF,OAAO,EAAE,UAAU,EAAE,CAAC;AACtB,YAAY,EAAE,eAAe,EAAE,CAAC"}
|
package/dist/Label.d.ts
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
/// <reference types="react" />
|
2
2
|
import './styles/Form.css';
|
3
|
-
|
3
|
+
declare type LabelProps = {
|
4
4
|
htmlFor?: string;
|
5
5
|
required?: boolean;
|
6
6
|
optional?: boolean;
|
@@ -10,5 +10,7 @@ export declare type LabelProps = {
|
|
10
10
|
style?: React.CSSProperties;
|
11
11
|
hidden?: boolean;
|
12
12
|
};
|
13
|
-
|
13
|
+
declare const Label: ({ htmlFor, disabled, className, children, required, optional, ...other }: LabelProps) => JSX.Element;
|
14
|
+
export { Label };
|
15
|
+
export type { LabelProps };
|
14
16
|
//# sourceMappingURL=Label.d.ts.map
|
package/dist/Label.d.ts.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../src/Label.tsx"],"names":[],"mappings":";AAGA,OAAO,mBAAmB,CAAC;AAE3B,
|
1
|
+
{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../src/Label.tsx"],"names":[],"mappings":";AAGA,OAAO,mBAAmB,CAAC;AAE3B,aAAK,UAAU,GAAG;IAChB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,QAAA,MAAM,KAAK,6EAQR,UAAU,gBASZ,CAAC;AAEF,OAAO,EAAE,KAAK,EAAE,CAAC;AACjB,YAAY,EAAE,UAAU,EAAE,CAAC"}
|
@@ -5,4 +5,5 @@ declare type RequiredAsteriskProps = HTMLAttributes<HTMLSpanElement> & {
|
|
5
5
|
};
|
6
6
|
declare const RequiredAsterisk: ({ className, testId, ...rest }: RequiredAsteriskProps) => JSX.Element;
|
7
7
|
export { RequiredAsterisk };
|
8
|
+
export type { RequiredAsteriskProps };
|
8
9
|
//# sourceMappingURL=RequiredAsterisk.d.ts.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"RequiredAsterisk.d.ts","sourceRoot":"","sources":["../src/RequiredAsterisk.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,OAAO,+BAA+B,CAAC;AAEvC,aAAK,qBAAqB,GAAG,cAAc,CAAC,eAAe,CAAC,GAAG;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,QAAA,MAAM,gBAAgB,mCAAoC,qBAAqB,gBAQ9E,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
|
1
|
+
{"version":3,"file":"RequiredAsterisk.d.ts","sourceRoot":"","sources":["../src/RequiredAsterisk.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAI5C,OAAO,+BAA+B,CAAC;AAEvC,aAAK,qBAAqB,GAAG,cAAc,CAAC,eAAe,CAAC,GAAG;IAC7D,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,QAAA,MAAM,gBAAgB,mCAAoC,qBAAqB,gBAQ9E,CAAC;AAEF,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAC5B,YAAY,EAAE,qBAAqB,EAAE,CAAC"}
|
package/dist/TextArea.d.ts
CHANGED
@@ -1,12 +1,7 @@
|
|
1
|
-
import {
|
1
|
+
import type { TextareaHTMLAttributes } from 'react';
|
2
2
|
import './styles/FormInput.css';
|
3
3
|
declare type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
|
4
|
-
declare
|
5
|
-
textareaRef: RefObject<HTMLTextAreaElement>;
|
6
|
-
constructor(props: TextAreaProps);
|
7
|
-
render(): JSX.Element;
|
8
|
-
focus(): void;
|
9
|
-
}
|
4
|
+
declare const TextArea: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
|
10
5
|
export { TextArea };
|
11
6
|
export type { TextAreaProps };
|
12
7
|
//# sourceMappingURL=TextArea.d.ts.map
|
package/dist/TextArea.d.ts.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../src/TextArea.tsx"],"names":[],"mappings":"
|
1
|
+
{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../src/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAKpD,OAAO,wBAAwB,CAAC;AAGhC,aAAK,aAAa,GAAG,sBAAsB,CAAC,mBAAmB,CAAC,CAAC;AAEjE,QAAA,MAAM,QAAQ,+GAwBZ,CAAC;AAIH,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,CAAC"}
|
package/dist/TextField.d.ts
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
import {
|
1
|
+
import type { InputHTMLAttributes } from 'react';
|
2
2
|
import './styles/FormInput.css';
|
3
3
|
declare type TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {
|
4
4
|
suffix?: string;
|
@@ -6,16 +6,12 @@ declare type TextFieldProps = InputHTMLAttributes<HTMLInputElement> & {
|
|
6
6
|
tiny?: boolean;
|
7
7
|
overrideWidth?: string;
|
8
8
|
};
|
9
|
-
declare
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
focus(): void;
|
16
|
-
blur(): void;
|
17
|
-
select(): void;
|
18
|
-
}
|
19
|
-
export type { TextFieldProps };
|
9
|
+
declare const TextField: import("react").ForwardRefExoticComponent<InputHTMLAttributes<HTMLInputElement> & {
|
10
|
+
suffix?: string | undefined;
|
11
|
+
testId?: string | undefined;
|
12
|
+
tiny?: boolean | undefined;
|
13
|
+
overrideWidth?: string | undefined;
|
14
|
+
} & import("react").RefAttributes<HTMLInputElement>>;
|
20
15
|
export { TextField };
|
16
|
+
export type { TextFieldProps };
|
21
17
|
//# sourceMappingURL=TextField.d.ts.map
|
package/dist/TextField.d.ts.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../src/TextField.tsx"],"names":[],"mappings":"
|
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;;;;;oDA2Dd,CAAC;AAIF,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,cAAc,EAAE,CAAC"}
|
package/dist/index.d.ts
CHANGED
@@ -1,14 +1,20 @@
|
|
1
1
|
export type { CheckboxProps } from './Checkbox';
|
2
2
|
export type { CompactTextFieldProps } from './CompactTextField';
|
3
|
+
export type { FieldErrorProps } from './FieldError';
|
4
|
+
export type { FieldSetProps } from './FieldSet';
|
5
|
+
export type { FormProps } from './Form';
|
3
6
|
export type { FormFieldProps } from './FormField';
|
7
|
+
export type { FormGroupProps } from './FormGroup';
|
4
8
|
export type { FormHintProps } from './FormHint';
|
5
|
-
export type { FormProps } from './Form';
|
6
9
|
export type { IconFieldProps } from './IconField';
|
10
|
+
export type { InputGroupProps } from './InputGroup';
|
7
11
|
export type { LabelProps } from './Label';
|
8
|
-
export type { RadioGroupProps } from './RadioGroup';
|
9
12
|
export type { RadioProps } from './Radio';
|
13
|
+
export type { RadioGroupProps } from './RadioGroup';
|
14
|
+
export type { RequiredAsteriskProps } from './RequiredAsterisk';
|
10
15
|
export type { SelectProps } from './Select';
|
11
16
|
export type { TextAreaProps } from './TextArea';
|
17
|
+
export type { TextFieldProps } from './TextField';
|
12
18
|
export { Checkbox } from './Checkbox';
|
13
19
|
export { CompactTextField } from './CompactTextField';
|
14
20
|
export { FieldError } from './FieldError';
|
package/dist/index.d.ts.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EAAE,
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAElD,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}
|
package/dist/index.es.js
CHANGED
@@ -2,7 +2,7 @@
|
|
2
2
|
import * as React from "react";
|
3
3
|
|
4
4
|
// src/Checkbox.tsx
|
5
|
-
import {
|
5
|
+
import { forwardRef } from "react";
|
6
6
|
|
7
7
|
// src/Label.tsx
|
8
8
|
import cx2 from "clsx";
|
@@ -42,187 +42,139 @@ var Label = ({
|
|
42
42
|
|
43
43
|
// src/Checkbox.tsx
|
44
44
|
import "./styles/Form.css";
|
45
|
-
var Checkbox =
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
"aria-label": ariaLabel,
|
59
|
-
"aria-labelledby": ariaLabelledby,
|
60
|
-
children,
|
61
|
-
disabled,
|
62
|
-
testId,
|
63
|
-
checked,
|
64
|
-
labelClassName,
|
65
|
-
...other
|
66
|
-
} = this.props;
|
67
|
-
const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
|
68
|
-
if (!children && !hasAriaLabel) {
|
69
|
-
console.warn("If you do not provide children, you must specify an aria-label for accessibility");
|
70
|
-
}
|
71
|
-
return /* @__PURE__ */ React.createElement(Label, {
|
72
|
-
className: labelClassName
|
73
|
-
}, /* @__PURE__ */ React.createElement("input", {
|
74
|
-
...other,
|
75
|
-
ref: this.inputRef,
|
76
|
-
checked,
|
77
|
-
"aria-checked": checked ? "true" : "false",
|
78
|
-
"aria-label": ariaLabel,
|
79
|
-
"aria-labelledby": ariaLabelledby,
|
80
|
-
className: "Form-checkbox",
|
81
|
-
disabled,
|
82
|
-
"data-test-id": testId,
|
83
|
-
type: "checkbox"
|
84
|
-
}), " ", disabled ? /* @__PURE__ */ React.createElement("span", {
|
85
|
-
className: "Form-label--disabled"
|
86
|
-
}, children) : children);
|
45
|
+
var Checkbox = forwardRef(({
|
46
|
+
"aria-label": ariaLabel,
|
47
|
+
"aria-labelledby": ariaLabelledby,
|
48
|
+
children,
|
49
|
+
disabled,
|
50
|
+
testId,
|
51
|
+
checked,
|
52
|
+
labelClassName,
|
53
|
+
...other
|
54
|
+
}, ref) => {
|
55
|
+
const hasAriaLabel = ariaLabel !== void 0 || ariaLabelledby !== void 0;
|
56
|
+
if (!children && !hasAriaLabel) {
|
57
|
+
console.warn("If you do not provide children, you must specify an aria-label for accessibility");
|
87
58
|
}
|
88
|
-
|
59
|
+
return /* @__PURE__ */ React.createElement(Label, {
|
60
|
+
className: labelClassName
|
61
|
+
}, /* @__PURE__ */ React.createElement("input", {
|
62
|
+
...other,
|
63
|
+
ref,
|
64
|
+
checked,
|
65
|
+
"aria-checked": checked ? "true" : "false",
|
66
|
+
"aria-label": ariaLabel,
|
67
|
+
"aria-labelledby": ariaLabelledby,
|
68
|
+
className: "Form-checkbox",
|
69
|
+
disabled,
|
70
|
+
"data-test-id": testId,
|
71
|
+
type: "checkbox"
|
72
|
+
}), " ", disabled ? /* @__PURE__ */ React.createElement("span", {
|
73
|
+
className: "Form-label--disabled"
|
74
|
+
}, children) : children);
|
75
|
+
});
|
76
|
+
Checkbox.displayName = "Checkbox";
|
89
77
|
|
90
78
|
// src/CompactTextField.tsx
|
91
79
|
import cx4 from "clsx";
|
92
80
|
import { isBoolean } from "lodash-es";
|
93
|
-
import {
|
81
|
+
import { forwardRef as forwardRef3, useState } from "react";
|
94
82
|
|
95
83
|
// src/TextField.tsx
|
96
84
|
import cx3 from "clsx";
|
97
|
-
import {
|
85
|
+
import { forwardRef as forwardRef2 } from "react";
|
98
86
|
import "./styles/FormInput.css";
|
99
87
|
|
100
88
|
// src/utils/index.ts
|
101
89
|
var createFieldErrorId = (fieldIdentifier) => fieldIdentifier ? `${[...fieldIdentifier].join("")}-err` : void 0;
|
102
90
|
|
103
91
|
// src/TextField.tsx
|
104
|
-
var TextField =
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
"FormInput--tiny": tiny
|
123
|
-
});
|
124
|
-
if (suffix) {
|
125
|
-
return /* @__PURE__ */ React.createElement("div", {
|
126
|
-
className: "FormInput-suffixContainer"
|
127
|
-
}, /* @__PURE__ */ React.createElement("input", {
|
128
|
-
...rest,
|
129
|
-
type,
|
130
|
-
className: cx3(classes, "FormInput-suffix"),
|
131
|
-
readOnly,
|
132
|
-
ref: this.inputRef,
|
133
|
-
"data-test-id": testId,
|
134
|
-
"aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
|
135
|
-
}), /* @__PURE__ */ React.createElement("label", {
|
136
|
-
className: "FormInput-suffix",
|
137
|
-
htmlFor: rest.id
|
138
|
-
}, suffix));
|
139
|
-
}
|
140
|
-
return /* @__PURE__ */ React.createElement("input", {
|
92
|
+
var TextField = forwardRef2(({
|
93
|
+
className,
|
94
|
+
type = "text",
|
95
|
+
tiny = false,
|
96
|
+
readOnly,
|
97
|
+
tabIndex = 0,
|
98
|
+
testId,
|
99
|
+
suffix,
|
100
|
+
overrideWidth,
|
101
|
+
...rest
|
102
|
+
}, ref) => {
|
103
|
+
const classes = overrideWidth ? className : cx3("FormInput", `FormInput-${type}`, className, {
|
104
|
+
"FormInput--tiny": tiny
|
105
|
+
});
|
106
|
+
if (suffix) {
|
107
|
+
return /* @__PURE__ */ React.createElement("div", {
|
108
|
+
className: "FormInput-suffixContainer"
|
109
|
+
}, /* @__PURE__ */ React.createElement("input", {
|
141
110
|
...rest,
|
142
111
|
type,
|
143
|
-
className: classes,
|
112
|
+
className: cx3(classes, "FormInput-suffix"),
|
144
113
|
readOnly,
|
145
|
-
|
146
|
-
ref: this.inputRef,
|
114
|
+
ref,
|
147
115
|
"data-test-id": testId,
|
148
|
-
style: overrideWidth ? {
|
149
|
-
width: overrideWidth
|
150
|
-
} : void 0,
|
151
116
|
"aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
|
152
|
-
})
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
}
|
157
|
-
value() {
|
158
|
-
return this.inputRef.current?.value;
|
117
|
+
}), /* @__PURE__ */ React.createElement("label", {
|
118
|
+
className: "FormInput-suffix",
|
119
|
+
htmlFor: rest.id
|
120
|
+
}, suffix));
|
159
121
|
}
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
122
|
+
return /* @__PURE__ */ React.createElement("input", {
|
123
|
+
...rest,
|
124
|
+
type,
|
125
|
+
className: classes,
|
126
|
+
readOnly,
|
127
|
+
tabIndex,
|
128
|
+
ref,
|
129
|
+
"data-test-id": testId,
|
130
|
+
style: overrideWidth ? {
|
131
|
+
width: overrideWidth
|
132
|
+
} : void 0,
|
133
|
+
"aria-describedby": rest["aria-describedby"] || createFieldErrorId(rest.id)
|
134
|
+
});
|
135
|
+
});
|
136
|
+
TextField.displayName = "TextField";
|
170
137
|
|
171
138
|
// src/CompactTextField.tsx
|
172
139
|
import "./styles/CompactTextField.css";
|
173
140
|
import "./styles/FormInput.css";
|
174
|
-
var CompactTextField =
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
htmlFor: id
|
212
|
-
}, label), /* @__PURE__ */ React.createElement(TextField, {
|
213
|
-
...rest,
|
214
|
-
id,
|
215
|
-
name,
|
216
|
-
type,
|
217
|
-
placeholder,
|
218
|
-
ref: (textField) => {
|
219
|
-
this.textField = textField;
|
220
|
-
},
|
221
|
-
onFocus: this.handleFocus,
|
222
|
-
onBlur: this.handleBlur
|
223
|
-
}));
|
224
|
-
}
|
225
|
-
};
|
141
|
+
var CompactTextField = forwardRef3(({ className, id, name, label, type, needsErrorFeedback, value, onFocus, onBlur, ...rest }, ref) => {
|
142
|
+
const [isActive, setIsActive] = useState((isBoolean(value) || value ? value.toString() : "").trim().length !== 0);
|
143
|
+
const isActiveState = isActive || needsErrorFeedback;
|
144
|
+
const classes = cx4("CompactTextField", className, {
|
145
|
+
"is-active": isActiveState
|
146
|
+
});
|
147
|
+
const placeholder = isActiveState ? "" : label;
|
148
|
+
const handleFocus = (event) => {
|
149
|
+
setIsActive(true);
|
150
|
+
if (onFocus) {
|
151
|
+
onFocus(event);
|
152
|
+
}
|
153
|
+
};
|
154
|
+
const handleBlur = (event) => {
|
155
|
+
const value2 = event.target.value || "";
|
156
|
+
setIsActive(value2.trim().length !== 0);
|
157
|
+
if (onBlur) {
|
158
|
+
onBlur(event);
|
159
|
+
}
|
160
|
+
};
|
161
|
+
return /* @__PURE__ */ React.createElement("div", {
|
162
|
+
className: classes
|
163
|
+
}, /* @__PURE__ */ React.createElement(Label, {
|
164
|
+
htmlFor: id
|
165
|
+
}, label), /* @__PURE__ */ React.createElement(TextField, {
|
166
|
+
...rest,
|
167
|
+
id,
|
168
|
+
name,
|
169
|
+
type,
|
170
|
+
placeholder,
|
171
|
+
value,
|
172
|
+
ref,
|
173
|
+
onFocus: handleFocus,
|
174
|
+
onBlur: handleBlur
|
175
|
+
}));
|
176
|
+
});
|
177
|
+
CompactTextField.displayName = "CompactTextField";
|
226
178
|
|
227
179
|
// src/FieldError.tsx
|
228
180
|
import cx5 from "clsx";
|
@@ -460,35 +412,26 @@ var Select = ({ className, children, testId, ...rest }) => {
|
|
460
412
|
|
461
413
|
// src/TextArea.tsx
|
462
414
|
import cx13 from "clsx";
|
463
|
-
import {
|
415
|
+
import { forwardRef as forwardRef4 } from "react";
|
464
416
|
import "./styles/FormInput.css";
|
465
|
-
var TextArea =
|
466
|
-
|
467
|
-
|
468
|
-
|
469
|
-
|
470
|
-
|
471
|
-
|
472
|
-
|
473
|
-
|
474
|
-
|
475
|
-
|
476
|
-
|
477
|
-
|
478
|
-
|
479
|
-
|
480
|
-
|
481
|
-
|
482
|
-
|
483
|
-
};
|
484
|
-
function onKeyDown(e) {
|
485
|
-
if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
|
486
|
-
e.stopPropagation();
|
487
|
-
}
|
488
|
-
if (e.key === "Escape") {
|
489
|
-
e.nativeEvent.stopImmediatePropagation();
|
490
|
-
}
|
491
|
-
}
|
417
|
+
var TextArea = forwardRef4(({ className, ...props }, ref) => {
|
418
|
+
const onKeyDown = (e) => {
|
419
|
+
if (e.key === "ArrowRight" || e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "ArrowLeft") {
|
420
|
+
e.stopPropagation();
|
421
|
+
}
|
422
|
+
if (e.key === "Escape") {
|
423
|
+
e.nativeEvent.stopImmediatePropagation();
|
424
|
+
}
|
425
|
+
};
|
426
|
+
return /* @__PURE__ */ React.createElement("textarea", {
|
427
|
+
...props,
|
428
|
+
className: cx13("FormInput", className),
|
429
|
+
ref,
|
430
|
+
"aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
|
431
|
+
onKeyDown
|
432
|
+
});
|
433
|
+
});
|
434
|
+
TextArea.displayName = "TextArea";
|
492
435
|
export {
|
493
436
|
Checkbox,
|
494
437
|
CompactTextField,
|