envoc-form 4.0.1-9 → 4.1.0

package/src/Input/IconInputGroup.tsx

@@ -7,11 +7,13 @@ import { FormDefaults } from '../FormDefaults';
 // or should we just give a div a className and let each project decide? (this seems to be the patern)
 export interface IconInputGroupProps
   extends Omit<
-    InputGroupProps<string | undefined>,
+    InputGroupProps<string | undefined | null>,
     'onChange' | 'type' | 'value'
   > {
   type?: 'color' | 'email' | 'search' | 'tel' | 'text' | 'url';
+  /** Icon to display on the input group. */
   icon: React.ReactNode;
+  /** Text to display after the input group to give more information to the user. */
   helpText?: string;
 }
 
@@ -30,7 +32,7 @@ function IconInputGroup(
           className,
           FormDefaults.cssClassPrefix + 'icon-input-group'
         )}
-        value={input.value || ''}
+        value={input.value ?? ''}
         onChange={(e) => {
           if (!e.target.value) {
             input.onChange(undefined);
@@ -44,6 +46,7 @@ function IconInputGroup(
   );
 }
 
+/** Input group with an icon. */
 const IconInputGroupWithRef = React.forwardRef(
   IconInputGroup
 ) as React.ComponentType<IconInputGroupProps>;

package/src/Input/InputGroup.tsx

@@ -1,22 +1,25 @@
 import React, { ChangeEventHandler, LegacyRef } from 'react';
 import classNames from 'classnames';
 import { InjectedFieldProps } from '../Field/InjectedFieldProps';
-import Group, { GroupProps } from '../Group';
 import { FormDefaults } from '../FormDefaults';
+import Group, { GroupProps } from '../Group';
 
 export interface InputGroupProps<TValue>
   extends InjectedFieldProps<TValue>,
     Omit<
       React.HTMLProps<HTMLInputElement>,
-      keyof InjectedFieldProps<any> | 'children' | 'className' | 'label'
+      | keyof InjectedFieldProps<any>
+      | 'children'
+      | 'className'
+      | 'label'
+      | 'value'
     >,
     Omit<GroupProps, keyof InjectedFieldProps<any> | 'children'> {
   onChange: ChangeEventHandler<HTMLInputElement>;
-  value: string | number;
+  value: string | number | null | undefined;
   icon?: React.ReactNode;
 }
 
-/** generic controlled <input/> wrapped by a Group */
 function InputGroup<TValue>(
   {
     input,
@@ -24,6 +27,7 @@ function InputGroup<TValue>(
     label,
     helpText,
     className,
+    required,
     disabled,
     onChange,
     value,
@@ -36,6 +40,7 @@ function InputGroup<TValue>(
     <Group
       input={input}
       meta={meta}
+      required={required}
       disabled={disabled}
       label={label}
       helpText={helpText}
@@ -47,7 +52,9 @@ function InputGroup<TValue>(
       <input
         {...input}
         {...rest}
-        value={value}
+        aria-invalid={!!meta.error}
+        aria-errormessage={!!meta.error ? `${input.name}-error` : undefined}
+        value={value ?? ''}
         onChange={onChange}
         ref={ref}
         className={classNames(
@@ -59,6 +66,7 @@ function InputGroup<TValue>(
   );
 }
 
+/** Generic controlled `<input/>` wrapped by a `<Group/>` */
 const InputGroupWithRef = React.forwardRef(InputGroup) as typeof InputGroup;
 
 export default InputGroupWithRef;

package/src/Input/MoneyInputGroup.tsx

@@ -5,9 +5,10 @@ import { FormDefaults } from '../FormDefaults';
 
 export interface MoneyInputGroupProps
   extends Omit<
-    InputGroupProps<number | undefined>,
+    InputGroupProps<number | undefined | null>,
     'onChange' | 'type' | 'value'
   > {
+  /** Custom parsing function when the value changes. */
   parseFunc?: typeof parseInt | typeof parseFloat;
 }
 
@@ -41,6 +42,7 @@ function MoneyInputGroup(
   );
 }
 
+/** Input group for inputting money. */
 const MoneyInputGroupWithRef = React.forwardRef(
   MoneyInputGroup
 ) as React.FunctionComponent<MoneyInputGroupProps>;

package/src/Input/NumberInputGroup.tsx

@@ -5,9 +5,10 @@ import { FormDefaults } from '../FormDefaults';
 
 export interface NumberInputGroupProps
   extends Omit<
-    InputGroupProps<number | undefined>,
+    InputGroupProps<number | undefined | null>,
     'onChange' | 'type' | 'value'
   > {
+  /** Custom parsing function when the value changes. */
   parseFunc?: typeof parseInt | typeof parseFloat;
 }
 
@@ -39,6 +40,7 @@ function NumberInputGroup(
   );
 }
 
+/** Standard number input group. By default allows for float values. */
 const NumberInputGroupWithRef = React.forwardRef(
   NumberInputGroup
 ) as React.ComponentType<NumberInputGroupProps>;

package/src/Input/StringInputGroup.tsx

@@ -5,7 +5,7 @@ import { FormDefaults } from '../FormDefaults';
 
 export interface StringInputGroupProps
   extends Omit<
-    InputGroupProps<string | undefined>,
+    InputGroupProps<string | undefined | null>,
     'onChange' | 'type' | 'value'
   > {
   type?:
@@ -33,7 +33,7 @@ function StringInputGroup(
         className,
         FormDefaults.cssClassPrefix + 'string-group'
       )}
-      value={input.value || ''}
+      value={input.value ?? ''}
       onChange={(e) => {
         if (!e.target.value) {
           input.onChange(undefined);
@@ -45,6 +45,7 @@ function StringInputGroup(
   );
 }
 
+/** Standard string input group. */
 const StringInputGroupWithRef = React.forwardRef(
   StringInputGroup
 ) as React.ComponentType<StringInputGroupProps>;

package/src/Input/__Tests__/__snapshots__/IconInputGroup.test.tsx.snap

@@ -20,6 +20,7 @@ exports[`IconInputGroup has matching snapshot 1`] = `
         Pretend this is an icon
       </span>
       <input
+        aria-invalid="false"
         class="envoc-form-icon-input-group envoc-form-input-group"
         id="nameWithIcon"
         name="nameWithIcon"

package/src/Input/__Tests__/__snapshots__/MoneyInputGroup.test.tsx.snap

@@ -19,6 +19,7 @@ exports[`MoneyInputGroup has matching snapshot 1`] = `
         Salary
       </label>
       <input
+        aria-invalid="false"
         class="something-here envoc-form-money-group envoc-form-input-group"
         id="yearlySalaryUSD"
         min="0"

package/src/Input/__Tests__/__snapshots__/NumberInputGroup.test.tsx.snap

@@ -19,6 +19,7 @@ exports[`NumberInputGroup has matching snapshot 1`] = `
         Arm Count
       </label>
       <input
+        aria-invalid="false"
         class="envoc-form-number-group envoc-form-input-group"
         id="numberOfArms"
         name="numberOfArms"

package/src/Input/__Tests__/__snapshots__/StringInputGroup.test.tsx.snap

@@ -19,6 +19,7 @@ exports[`StringInputGroup has matching snapshot 1`] = `
         Name
       </label>
       <input
+        aria-invalid="false"
         class="envoc-form-string-group envoc-form-input-group"
         id="name"
         name="name"

package/src/Normalization/normalizers.ts

@@ -1,4 +1,5 @@
-export const phoneNumber = (value: string | undefined) => {
+/** Normalizer for converting a string into a valid phone number. */
+export const phoneNumber = (value: string | undefined | null) => {
   if (!value) {
     return undefined;
   }
@@ -30,7 +31,8 @@ export const phoneNumber = (value: string | undefined) => {
   return onlyNums;
 };
 
-export const zipCode = (value: string | undefined) => {
+/** Normalizer for converting a string into a valid zip code. Allows for XXXXX and XXXXX-XXXX format. */
+export const zipCode = (value: string | undefined | null) => {
   if (!value) {
     return undefined;
   }

package/src/Select/BooleanSelectGroup.tsx

@@ -13,9 +13,10 @@ const booleanOptions: SelectOption<boolean>[] = [
 ];
 
 export interface BooleanSelectGroupProps
-  extends Omit<SelectGroupPropsHelper<boolean>, 'options'> {
+  extends Omit<SelectGroupPropsHelper<boolean | undefined | null>, 'options'> {
   options?: SelectOption<boolean>[];
 }
+/** A `<SelectGroup/>` dropdown with two options. Default options are 'Yes' and 'No' with values of `true` and `false`. */
 export function BooleanSelectGroup(props: BooleanSelectGroupProps) {
   return (
     <SelectGroup

package/src/Select/NumberSelectGroup.tsx

@@ -2,13 +2,15 @@ import SelectGroup from './SelectGroup';
 import { SelectGroupPropsHelper } from './SelectGroupPropsHelper';
 
 export interface MultiNumberSelectGroupProps
-  extends SelectGroupPropsHelper<number[]> {}
+  extends SelectGroupPropsHelper<number[] | undefined | null> {}
+/** A `<SelectGroup/>` dropdown with values as numbers. Many options can be selected at a time. */
 export function MultiNumberSelectGroup(props: MultiNumberSelectGroupProps) {
   return <SelectGroup multiple={true} {...props} />;
 }
 
 export interface SingleNumberSelectGroupProps
-  extends SelectGroupPropsHelper<number> {}
+  extends SelectGroupPropsHelper<number | undefined | null> {}
+/** A `<SelectGroup/>` dropdown with values as numbers. Only one option can be selected at a time. */
 export function SingleNumberSelectGroup(props: SingleNumberSelectGroupProps) {
   return <SelectGroup multiple={false} {...props} />;
 }

package/src/Select/SelectGroup.tsx

@@ -1,11 +1,13 @@
 import { default as ReactSelect } from 'react-select';
 import classNames from 'classnames';
 import { InjectedFieldProps } from '../Field/InjectedFieldProps';
-import Group, { GroupProps } from '../Group';
 import { FormDefaults } from '../FormDefaults';
+import Group, { GroupProps } from '../Group';
 
 export interface SelectOption<TValue> {
+  /** Value for the select. This will be sent to the API. */
   value: (TValue extends Array<infer P> ? P : TValue) | undefined;
+  /** Label for the select. This is displayed to the user. */
   label: string;
 }
 
@@ -23,21 +25,27 @@ interface OptionsUseServiceResult<TValue> {
 }
 
 export interface SelectGroupProps<TValue>
-  extends InjectedFieldProps<TValue | undefined>,
+  extends InjectedFieldProps<TValue | undefined | null>,
     Omit<GroupProps, 'input' | 'meta' | 'children'> {
   // allows for "useService" or other handles to control the data - including cache
   // TODO: do we still want a version of select that has a "url" or maybe a promise func or something?
   // eventually we can just add the shape of, say, useQuery (TanStack) to the union type
+  /** Options for the dropdown. Includes the label and value. */
   options: SelectOption<TValue>[] | OptionsUseServiceResult<TValue>;
+  /** Whether the user should be able to have multiple values selected. */
   multiple: TValue extends Array<any> ? true : false;
+  /** Text diplayed when no value is selected. */
   placeholder?: string;
 }
 
 // TODO: we could also name this "ReactSelectGroup" or similar but the types are strongly defined now so kept the names consistent
+/** Generic select dropdown. Uses [react-select](https://react-select.com/home). */
 export default function SelectGroup<TValue>({
   input,
   meta,
   className,
+  required,
+  disabled,
   options,
   multiple,
   placeholder,
@@ -64,6 +72,8 @@ export default function SelectGroup<TValue>({
       {...rest}
       input={input}
       meta={meta}
+      required={required}
+      disabled={disabled}
       className={classNames(
         className,
         {
@@ -78,6 +88,7 @@ export default function SelectGroup<TValue>({
       >
         inputId={input.id}
         isMulti={multiple}
+        isDisabled={disabled}
         options={effectiveOptions}
         onBlur={input.onBlur}
         value={getValue()}

package/src/Select/StringSelectGroup.tsx

@@ -3,12 +3,14 @@ import { SelectGroupPropsHelper } from './SelectGroupPropsHelper';
 
 export interface MultiStringSelectGroupProps
   extends SelectGroupPropsHelper<string[]> {}
+/** A `<SelectGroup/>` dropdown with values as strings. Multiple options can be selected at a time. */
 export function MultiStringSelectGroup(props: MultiStringSelectGroupProps) {
   return <SelectGroup multiple={true} {...props} />;
 }
 
 export interface SingleStringSelectGroupProps
   extends SelectGroupPropsHelper<string> {}
+/** A `<SelectGroup/>` dropdown with the value as a string. Only one option can be selected at a time. */
 export function SingleStringSelectGroup(props: SingleStringSelectGroupProps) {
   return <SelectGroup multiple={false} {...props} />;
 }

package/src/StandardFormActions.tsx

@@ -5,10 +5,15 @@ import SubmitFormButton from './SubmitFormButton';
 import { FormDefaults } from './FormDefaults';
 
 export interface StandardFormActionsProps {
+  /** Allow the form to be submitted without any changes. By default this is not allowed. */
   allowPristineSubmit?: boolean;
+  /** The cancel button's `onClick`.
+   * @defaultValue `window.history.back()`
+   */
   handleCancel?: MouseEventHandler<HTMLButtonElement>;
 }
 
+/** Standard submit and cancel buttons. */
 export default function StandardFormActions({
   allowPristineSubmit,
   handleCancel,

package/src/SubmitFormButton.tsx

@@ -5,9 +5,12 @@ import { FormDefaults } from './FormDefaults';
 
 export interface SubmitFormButtonProps
   extends Omit<React.HTMLProps<HTMLButtonElement>, 'type'> {
+  /** Allow the form to be submitted without any changes. By default this is not allowed. */
   allowPristineSubmit?: boolean;
+  /** Text to display on the button. Default text is 'Submit'. */
   children?: React.ReactNode;
 }
+
 function SubmitFormButton(
   {
     allowPristineSubmit,
@@ -45,6 +48,7 @@ function SubmitFormButton(
   );
 }
 
+/** Generic submit button for forms. */
 export default React.forwardRef(
   SubmitFormButton
-) as React.ComponentType<SubmitFormButtonProps>;
+) as React.FunctionComponent<SubmitFormButtonProps>;

package/src/TextArea/TextAreaGroup.tsx

@@ -1,11 +1,11 @@
 import React, { LegacyRef } from 'react';
 import classNames from 'classnames';
 import { InjectedFieldProps } from '../Field/InjectedFieldProps';
-import Group, { GroupProps } from '../Group';
 import { FormDefaults } from '../FormDefaults';
+import Group, { GroupProps } from '../Group';
 
 export interface TextAreaGroupProps
-  extends InjectedFieldProps<string | undefined>,
+  extends InjectedFieldProps<string | undefined | null>,
     Omit<
       React.HTMLProps<HTMLTextAreaElement>,
       keyof InjectedFieldProps<any> | 'children' | 'className' | 'label'
@@ -14,7 +14,6 @@ export interface TextAreaGroupProps
   icon?: React.ReactNode;
 }
 
-/** generic controlled <textarea/> wrapped by a Group */
 function TextAreaGroup(
   {
     input,
@@ -22,6 +21,7 @@ function TextAreaGroup(
     label,
     helpText,
     className,
+    required,
     disabled,
     icon,
     ...rest
@@ -32,6 +32,7 @@ function TextAreaGroup(
     <Group
       input={input}
       meta={meta}
+      required={required}
       disabled={disabled}
       label={label}
       helpText={helpText}
@@ -43,7 +44,7 @@ function TextAreaGroup(
       <textarea
         {...input}
         {...rest}
-        value={input.value}
+        value={input.value ?? ''}
         onChange={(val) => input.onChange(val.target.value)}
         ref={ref}
         className={classNames(
@@ -55,6 +56,7 @@ function TextAreaGroup(
   );
 }
 
+/** Generic controlled `<textarea/>` wrapped by a `<Group/>` */
 const TextAreaGroupWithRef = React.forwardRef(
   TextAreaGroup
 ) as React.ComponentType<TextAreaGroupProps>;

package/src/Validation/validators.ts

@@ -9,13 +9,14 @@ export const required = (value: any) =>
     ? undefined
     : 'Required';
 
-//asserts that the value is a certain number of characters. numbers are coerced to a string
-export const length = (len: number) => (value: string | number | undefined) => {
-  const hasError = getLengthOfValue(value) !== len;
-  return !hasError ? undefined : `Length must be ${len}`;
-};
+/** Asserts that the value is a certain number of characters. numbers are coerced to a string */
+export const length =
+  (len: number) => (value: string | number | undefined | null) => {
+    const hasError = getLengthOfValue(value) !== len;
+    return !hasError ? undefined : `Length must be ${len}`;
+  };
 
-export const integer = (val: string | number | undefined) => {
+export const integer = (val: string | number | undefined | null) => {
   if (!val) {
     return undefined;
   }
@@ -25,41 +26,42 @@ export const integer = (val: string | number | undefined) => {
 };
 
 export const maxLength =
-  (len: number) => (value: string | number | undefined) => {
+  (len: number) => (value: string | number | undefined | null) => {
     const hasError = getLengthOfValue(value) > len;
     return !hasError ? undefined : `Maximum length ${len} exceeded`;
   };
 
 export const maxCount =
-  (count: number) => (value: { isDeleted?: boolean }[] | undefined) => {
+  (count: number) => (value: { isDeleted?: boolean }[] | undefined | null) => {
     const hasError =
       !!value && value.filter((x) => !x.isDeleted).length > count;
     return !hasError ? undefined : `Should not have more than ${count}`;
   };
 
 export const minCount =
-  (count: number) => (value: { isDeleted?: boolean }[] | undefined) => {
+  (count: number) => (value: { isDeleted?: boolean }[] | undefined | null) => {
     const hasError = !value || value.filter((x) => !x.isDeleted).length < count;
     return !hasError ? undefined : `Should have at least ${count}`;
   };
 
-export const maxValue = (max: number) => (value: number | undefined) => {
+export const maxValue = (max: number) => (value: number | undefined | null) => {
   const hasError = !!value && value > max;
   return !hasError ? undefined : `Maximum value ${max} exceeded`;
 };
 
-export const minValue = (min: number) => (value: number | undefined) => {
+export const minValue = (min: number) => (value: number | undefined | null) => {
   const hasError = !value || value < min;
   return !hasError ? undefined : `Minimum value ${min} not met`;
 };
 
-export const zipCode = (value: string | undefined) => {
+/** Validate for a ZIP Code. Accepts formats: ##### and #####-#### */
+export const zipCode = (value: string | undefined | null) => {
   return value && !/^[0-9]{5}(?:-[0-9]{4})?$/.test(value)
     ? 'Invalid ZIP Code'
     : undefined;
 };
 
-//one of the validators provided must be true
+/** One of the validators provided must be true. */
 export const any =
   <TValue>(validatorList: ValidationFunction<TValue>[]) =>
   (value: TValue) => {
@@ -73,7 +75,10 @@ export const any =
     );
   };
 
-function getLengthOfValue(value: string | number | undefined) {
+function getLengthOfValue(value: string | number | undefined | null) {
+  if (value === null) {
+    return 0;
+  }
   switch (typeof value) {
     case 'undefined':
       return 0;

package/src/__Tests__/FormTestBase.tsx

@@ -1,28 +1,29 @@
-import '@testing-library/jest-dom/extend-expect';
 import { HashRouter } from 'react-router-dom';
-import { ValidatedApiResult } from 'Validation/ValidatedApiResult';
-import { Form, FormBuilderProp } from '../../src';
+import { Form, FormBuilderProp } from '../';
+import { ValidatedApiResult } from '../Validation/ValidatedApiResult';
 
 interface FormTestBaseProps<TForm extends object> {
   children: (formBuilder: FormBuilderProp<TForm>) => JSX.Element;
   initialValues?: TForm;
+  handleSubmit?: (data: TForm | FormData) => Promise<ValidatedApiResult>;
 }
 
 export default function FormTestBase<TForm extends PersonDto>({
   children,
   initialValues,
+  handleSubmit,
 }: FormTestBaseProps<TForm>) {
   return (
     <HashRouter>
-      <Form onSubmit={onSubmit} initialValues={initialValues}>
+      <Form
+        onSubmit={handleSubmit ? handleSubmit : onSubmit}
+        initialValues={initialValues}>
         {children}
       </Form>
     </HashRouter>
   );
 
-  async function onSubmit(
-    data: PersonDto | FormData
-  ): Promise<ValidatedApiResult> {
+  async function onSubmit(data: TForm | FormData): Promise<ValidatedApiResult> {
     const isFormData = data instanceof FormData;
     const result = await fetch('/api/submit', {
       body: isFormData ? data : JSON.stringify(data),
@@ -43,7 +44,7 @@ export default function FormTestBase<TForm extends PersonDto>({
   }
 }
 
-interface PersonDto {
+export interface PersonDto {
   name?: string | undefined;
   nameWithIcon?: string | undefined;
   numberOfArms?: number;

package/src/__Tests__/RealisticForm.test.tsx

@@ -0,0 +1,82 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import user from '@testing-library/user-event';
+import FormTestBase from './FormTestBase';
+import { Form, StringInputGroup, ValidatedApiResult } from '../';
+import { PersonDto } from '../__Tests__/FormTestBase';
+import StandardFormActions from '../StandardFormActions';
+import { validators } from '../';
+
+const handleSubmitMock = jest.fn((value: PersonDto | FormData) => {
+  //return value;
+  return new Promise<ValidatedApiResult>((res, rej) => {
+    setTimeout(() => {
+      res({});
+    }, 15);
+  });
+});
+
+describe('Realistic Form', () => {
+  it('Validates, resolves validation, submits values', async () => {
+    global.scrollTo = jest.fn();
+    const fullForm = (
+      <FormTestBase handleSubmit={handleSubmitMock}>
+        {({ Field }) => (
+          <>
+            <Field name="name" label="name" Component={StringInputGroup} />
+            <Field
+              name="nameWithIcon"
+              label="Name with Icon"
+              Component={StringInputGroup}
+              validate={validators.required}
+            />
+            <StandardFormActions />
+            <Form.DisplayFormState />
+          </>
+        )}
+      </FormTestBase>
+    );
+
+    render(fullForm);
+    const nameInput = screen.getByLabelText('name');
+    const formSubmitButton = screen.getByRole('button', {
+      name: 'Submit',
+    });
+    //The form should start off with the submit button disabled
+    expect(formSubmitButton).toBeDisabled();
+
+    //Enter a name into the name input
+    user.click(nameInput);
+    user.type(nameInput, 'Travis Overmier');
+    expect(nameInput).toHaveValue('Travis Overmier');
+
+    //Submit should be enabled, click submit
+    expect(formSubmitButton).toBeEnabled();
+    user.click(formSubmitButton);
+
+    //Submit should disable while 'submitting' then re-enable
+    expect(formSubmitButton).toBeDisabled();
+    await waitFor(() => {
+      expect(formSubmitButton).toBeEnabled();
+    });
+
+    //Validation message should appear
+    const nameWithIconInput = screen.getByLabelText('Name with Icon');
+    expect(nameWithIconInput).toHaveErrorMessage('Required');
+
+    //Fill in field, error message goes away
+    user.type(nameWithIconInput, 'Kyle Joiner');
+    user.tab();
+    await waitFor(() => {
+      expect(nameWithIconInput).not.toHaveErrorMessage();
+    });
+
+    //Click the submit button
+    user.click(formSubmitButton);
+    await waitFor(() => {
+      expect(handleSubmitMock).toHaveBeenCalled();
+      expect(JSON.stringify(handleSubmitMock.mock.calls[0][0])).toBe(
+        `{"name":"Travis Overmier","nameWithIcon":"Kyle Joiner"}`
+      );
+    });
+  });
+});

package/src/index.ts

@@ -16,7 +16,7 @@ export type { ConfirmDeleteFormProps } from './ConfirmDeleteForm/ConfirmDeleteFo
 
 // Date
 export { default as DatePickerGroup } from './DatePicker/DatePickerGroup';
-export type { DatePickerGroupProps as DatePickerGroupProps } from './DatePicker/DatePickerGroup';
+export type { DatePickerGroupProps } from './DatePicker/DatePickerGroup';
 export { convertToTimeZoneInsensitiveISOString } from './DatePicker/DatePickerGroup';
 
 export type { DatePickerHelper } from './DatePicker/DatePickerHelper';
@@ -68,17 +68,17 @@ export type {
 } from './Form/ServerErrorContext';
 
 export { default as FormActions } from './FormActions';
-export type { FormActionsProps as FormActionsProps } from './FormActions';
+export type { FormActionsProps } from './FormActions';
 
 export { default as StandardFormActions } from './StandardFormActions';
-export type { StandardFormActionsProps as StandardFormActionsProps } from './StandardFormActions';
+export type { StandardFormActionsProps } from './StandardFormActions';
 
 // FormDefaults
 export { FormDefaults } from './FormDefaults';
 
 // Input
 export { default as Group } from './Group';
-export type { GroupProps as GroupProps } from './Group';
+export type { GroupProps } from './Group';
 
 export { default as IconInputGroup } from './Input/IconInputGroup';
 export type { IconInputGroupProps } from './Input/IconInputGroup';

package/src/setupTests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';