@launchpad-ui/form 0.1.1 → 0.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,4 +1,4 @@
1
- import { Component, InputHTMLAttributes, RefObject } from 'react';
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 class Checkbox extends Component<CheckboxProps> {
28
- inputRef: RefObject<HTMLInputElement>;
29
- constructor(props: CheckboxProps);
30
- value(): string | undefined;
31
- checked(): boolean | undefined;
32
- render(): JSX.Element;
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
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../src/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAa,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7E,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,cAAM,QAAS,SAAQ,SAAS,CAAC,aAAa,CAAC;IAC7C,QAAQ,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;gBAE1B,KAAK,EAAE,aAAa;IAKhC,KAAK;IAIL,OAAO;IAIP,MAAM;CAqCP;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,CAAC"}
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
- import { Component, FocusEvent } from 'react';
2
- import { TextField, TextFieldProps } from './TextField';
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 class CompactTextField extends Component<CompactTextFieldProps, {
10
- isActive: boolean;
11
- }> {
12
- textField?: TextField | null;
13
- constructor(props: CompactTextFieldProps);
14
- render(): JSX.Element;
15
- handleFocus: (event: FocusEvent<HTMLInputElement>) => void;
16
- handleBlur: (event: FocusEvent<HTMLInputElement>) => void;
17
- value: () => string | undefined;
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":"AAGA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAG9C,OAAO,EAAE,SAAS,EAAE,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,cAAM,gBAAiB,SAAQ,SAAS,CAAC,qBAAqB,EAAE;IAAE,QAAQ,EAAE,OAAO,CAAA;CAAE,CAAC;IACpF,SAAS,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;gBAEjB,KAAK,EAAE,qBAAqB;IASxC,MAAM;IA6BN,WAAW,UAAW,WAAW,gBAAgB,CAAC,UAKhD;IAEF,UAAU,UAAW,WAAW,gBAAgB,CAAC,UAM/C;IAEF,KAAK,2BAAwD;IAE7D,KAAK,aAIH;CACH;AAED,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAC5B,YAAY,EAAE,qBAAqB,EAAE,CAAC"}
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"}
@@ -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
- export declare const InputGroup: ({ className, children, ...other }: InputGroupProps) => JSX.Element;
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
@@ -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,eAAO,MAAM,UAAU,sCAAuC,eAAe,gBAQ5E,CAAC"}
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
- export declare type LabelProps = {
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
- export declare const Label: ({ htmlFor, disabled, className, children, required, optional, ...other }: LabelProps) => JSX.Element;
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
@@ -1 +1 @@
1
- {"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../src/Label.tsx"],"names":[],"mappings":";AAGA,OAAO,mBAAmB,CAAC;AAE3B,oBAAY,UAAU,GAAG;IACvB,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,eAAO,MAAM,KAAK,6EAQf,UAAU,gBASZ,CAAC"}
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"}
@@ -1,12 +1,7 @@
1
- import { Component, RefObject, TextareaHTMLAttributes } from 'react';
1
+ import type { TextareaHTMLAttributes } from 'react';
2
2
  import './styles/FormInput.css';
3
3
  declare type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement>;
4
- declare class TextArea extends Component<TextAreaProps> {
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
@@ -1 +1 @@
1
- {"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../src/TextArea.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAa,SAAS,EAAE,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAEhF,OAAO,wBAAwB,CAAC;AAGhC,aAAK,aAAa,GAAG,sBAAsB,CAAC,mBAAmB,CAAC,CAAC;AAEjE,cAAM,QAAS,SAAQ,SAAS,CAAC,aAAa,CAAC;IAC7C,WAAW,EAAE,SAAS,CAAC,mBAAmB,CAAC,CAAC;gBAEhC,KAAK,EAAE,aAAa;IAKhC,MAAM;IAcN,KAAK;CAGN;AAgBD,OAAO,EAAE,QAAQ,EAAE,CAAC;AACpB,YAAY,EAAE,aAAa,EAAE,CAAC"}
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"}
@@ -1,4 +1,4 @@
1
- import { Component, InputHTMLAttributes, RefObject } from 'react';
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 class TextField extends Component<TextFieldProps> {
10
- inputRef: RefObject<HTMLInputElement>;
11
- constructor(props: TextFieldProps);
12
- render(): JSX.Element;
13
- getElement(): HTMLInputElement | null;
14
- value(): string | undefined;
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
@@ -1 +1 @@
1
- {"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../src/TextField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAa,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7E,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,cAAM,SAAU,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/C,QAAQ,EAAE,SAAS,CAAC,gBAAgB,CAAC,CAAC;gBAC1B,KAAK,EAAE,cAAc;IAKjC,MAAM;IAyDN,UAAU;IAIV,KAAK;IAIL,KAAK;IAIL,IAAI;IAIJ,MAAM;CAGP;AAED,YAAY,EAAE,cAAc,EAAE,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,CAAC"}
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';
@@ -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,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,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,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,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"}
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 { Component, createRef } from "react";
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 = class extends Component {
46
- constructor(props) {
47
- super(props);
48
- this.inputRef = createRef();
49
- }
50
- value() {
51
- return this.inputRef.current?.value;
52
- }
53
- checked() {
54
- return this.inputRef.current?.checked;
55
- }
56
- render() {
57
- const {
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 { Component as Component3 } from "react";
81
+ import { forwardRef as forwardRef3, useState } from "react";
94
82
 
95
83
  // src/TextField.tsx
96
84
  import cx3 from "clsx";
97
- import { Component as Component2, createRef as createRef2 } from "react";
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 = class extends Component2 {
105
- constructor(props) {
106
- super(props);
107
- this.inputRef = createRef2();
108
- }
109
- render() {
110
- const {
111
- className,
112
- type = "text",
113
- tiny = false,
114
- readOnly,
115
- tabIndex = 0,
116
- testId,
117
- suffix,
118
- overrideWidth,
119
- ...rest
120
- } = this.props;
121
- const classes = overrideWidth ? className : cx3("FormInput", `FormInput-${type}`, className, {
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
- tabIndex,
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
- getElement() {
155
- return this.inputRef.current;
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
- focus() {
161
- this.inputRef.current?.focus();
162
- }
163
- blur() {
164
- this.inputRef.current?.blur();
165
- }
166
- select() {
167
- this.inputRef.current?.focus();
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 = class extends Component3 {
175
- constructor(props) {
176
- super(props);
177
- this.handleFocus = (event) => {
178
- this.setState({ isActive: true });
179
- if (this.props.onFocus) {
180
- this.props.onFocus(event);
181
- }
182
- };
183
- this.handleBlur = (event) => {
184
- const value = event.target.value || "";
185
- this.setState({ isActive: value.trim().length !== 0 });
186
- if (this.props.onBlur) {
187
- this.props.onBlur(event);
188
- }
189
- };
190
- this.value = () => this.textField ? this.textField.value() : "";
191
- this.focus = () => {
192
- if (this.textField) {
193
- this.textField.focus();
194
- }
195
- };
196
- const value = props.value;
197
- this.state = {
198
- isActive: (isBoolean(value) || value ? value.toString() : "").trim().length !== 0
199
- };
200
- }
201
- render() {
202
- const { className, id, name, label, type, needsErrorFeedback, ...rest } = this.props;
203
- const isActive = this.state.isActive || needsErrorFeedback;
204
- const classes = cx4("CompactTextField", className, {
205
- "is-active": isActive
206
- });
207
- const placeholder = isActive ? "" : label;
208
- return /* @__PURE__ */ React.createElement("div", {
209
- className: classes
210
- }, /* @__PURE__ */ React.createElement(Label, {
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 { Component as Component4, createRef as createRef3 } from "react";
415
+ import { forwardRef as forwardRef4 } from "react";
464
416
  import "./styles/FormInput.css";
465
- var TextArea = class extends Component4 {
466
- constructor(props) {
467
- super(props);
468
- this.textareaRef = createRef3();
469
- }
470
- render() {
471
- const { className, ...props } = this.props;
472
- return /* @__PURE__ */ React.createElement("textarea", {
473
- ...props,
474
- className: cx13("FormInput", className),
475
- ref: this.textareaRef,
476
- "aria-describedby": props["aria-describedby"] || createFieldErrorId(props.id),
477
- onKeyDown
478
- });
479
- }
480
- focus() {
481
- this.textareaRef.current?.focus();
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,