@mtes-mct/monitor-ui 1.10.0 → 1.10.2

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## [1.10.1](https://github.com/MTES-MCT/monitor-ui/compare/v1.10.0...v1.10.1) (2022-12-06)
+
+# [1.10.0](https://github.com/MTES-MCT/monitor-ui/compare/v1.9.2...v1.10.0) (2022-12-01)
+
+
+### Features
+
+* **components:** add Dropdown ([#93](https://github.com/MTES-MCT/monitor-ui/issues/93)) ([1d5ec1b](https://github.com/MTES-MCT/monitor-ui/commit/1d5ec1b06b0f9ed06b44518de60cd69f0286e8fb))
+* **elements:** add IconButton ([#92](https://github.com/MTES-MCT/monitor-ui/issues/92)) ([5ea52c3](https://github.com/MTES-MCT/monitor-ui/commit/5ea52c3bc2c20226641e46b114a6bea617caeb45))
+
 ## [1.9.2](https://github.com/MTES-MCT/monitor-ui/compare/v1.9.1...v1.9.2) (2022-12-01)
 
 

package/ThemeProvider.d.ts

@@ -1,6 +1,6 @@
 import { Theme } from './theme';
 import type { DeepPartial } from './types';
-export declare type ThemeProviderProps = {
+export type ThemeProviderProps = {
     children: any;
     theme?: DeepPartial<Theme>;
 };

package/components/Dropdown/Item.d.ts

@@ -1,7 +1,7 @@
 import type { IconProps } from '../../types';
 import type { FunctionComponent } from 'react';
 import type { DropdownMenuItemProps as RsuiteDropdownMenuItemProps } from 'rsuite';
-export declare type DropdownItemProps = Omit<RsuiteDropdownMenuItemProps, 'as' | 'icon'> & {
+export type DropdownItemProps = Omit<RsuiteDropdownMenuItemProps, 'as' | 'icon'> & {
     Icon?: FunctionComponent<IconProps>;
 };
 export declare function Item({ Icon, ...originalProps }: DropdownItemProps): JSX.Element;

package/components/Dropdown/index.d.ts

@@ -2,7 +2,7 @@ import type { IconProps } from '../../types';
 import type { DropdownItemProps } from './Item';
 import type { FunctionComponent } from 'react';
 import type { DropdownProps as RsuiteDropdownProps } from 'rsuite';
-export declare type DropdownProps = Omit<RsuiteDropdownProps, 'as' | 'icon'> & {
+export type DropdownProps = Omit<RsuiteDropdownProps, 'as' | 'icon'> & {
     Icon?: FunctionComponent<IconProps>;
 };
 export declare const Dropdown: FunctionComponent<DropdownProps> & {

package/elements/Button.d.ts

@@ -1,7 +1,7 @@
 import { Accent, Size } from '../contants';
 import type { IconProps } from '../types';
 import type { ButtonHTMLAttributes, FunctionComponent } from 'react';
-export declare type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
     Icon?: FunctionComponent<IconProps>;
     accent?: Accent;
     isFullWidth?: boolean;

package/elements/Field.d.ts

@@ -1,3 +1,3 @@
 import type { HTMLAttributes } from 'react';
-export declare type FieldProps = HTMLAttributes<HTMLDivElement>;
+export type FieldProps = HTMLAttributes<HTMLDivElement>;
 export declare const Field: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/elements/Fieldset.d.ts

@@ -1,3 +1,3 @@
 import type { FieldsetHTMLAttributes } from 'react';
-export declare type FieldsetProps = FieldsetHTMLAttributes<HTMLFieldSetElement>;
+export type FieldsetProps = FieldsetHTMLAttributes<HTMLFieldSetElement>;
 export declare function Fieldset(nativeProps: FieldsetProps): JSX.Element;

package/elements/IconBox.d.ts

@@ -1,4 +1,4 @@
-export declare type IconBoxProps = {
+export type IconBoxProps = {
     color?: string;
     /** In REM */
     size?: number;

package/elements/IconButton.d.ts

@@ -1,7 +1,7 @@
 import { Accent, Size } from '../contants';
 import type { IconProps } from '../types';
 import type { ButtonHTMLAttributes, FunctionComponent } from 'react';
-export declare type IconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & {
+export type IconButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> & {
     Icon: FunctionComponent<IconProps>;
     accent?: Accent;
     size?: Size;

package/elements/Label.d.ts

@@ -1,5 +1,5 @@
 import type { LabelHTMLAttributes } from 'react';
-export declare type LabelProps = LabelHTMLAttributes<HTMLLabelElement> & {
+export type LabelProps = LabelHTMLAttributes<HTMLLabelElement> & {
     isHidden: boolean;
 };
 export declare const Label: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, {

package/elements/Legend.d.ts

@@ -1,5 +1,5 @@
 import type { HTMLAttributes } from 'react';
-export declare type LegendProps = HTMLAttributes<HTMLLegendElement> & {
+export type LegendProps = HTMLAttributes<HTMLLegendElement> & {
     isHidden?: boolean;
 };
 export declare function Legend({ isHidden, ...nativeProps }: LegendProps): JSX.Element;

package/fields/Checkbox.d.ts

@@ -1,6 +1,6 @@
 import type { CheckboxProps as RsuiteCheckboxProps } from 'rsuite';
 import type { Promisable } from 'type-fest';
-export declare type CheckboxProps = Omit<RsuiteCheckboxProps, 'as' | 'checked' | 'id' | 'onChange'> & {
+export type CheckboxProps = Omit<RsuiteCheckboxProps, 'as' | 'checked' | 'id' | 'onChange'> & {
     label: string;
     name: string;
     onChange?: (isCheched: boolean) => Promisable<void>;

package/fields/DatePicker/CalendarPicker.d.ts

@@ -1,6 +1,6 @@
 import type { DateTuple } from '../DateRangePicker/types';
 import type { Promisable } from 'type-fest';
-declare type CalendarPickerProps = {
+type CalendarPickerProps = {
     defaultValue?: Date;
     isHistorical?: boolean;
     onChange: (nextDateTuple: DateTuple) => Promisable<void>;

package/fields/DatePicker/index.d.ts

@@ -1,5 +1,5 @@
 import type { Promisable } from 'type-fest';
-export declare type DatePickerProps = {
+export type DatePickerProps = {
     defaultValue?: Date;
     /** Only allow past dates until today. */
     isHistorical?: boolean;

package/fields/DateRangePicker/DateInput.d.ts

@@ -2,7 +2,7 @@
 import type { NumberInputProps } from './NumberInput';
 import type { DateTuple, DateOrTimeInputRef } from './types';
 import type { Promisable } from 'type-fest';
-export declare type DateInputProps = Pick<NumberInputProps, 'onBack' | 'onPrevious' | 'onNext'> & {
+export type DateInputProps = Pick<NumberInputProps, 'onBack' | 'onPrevious' | 'onNext'> & {
     defaultValue?: DateTuple;
     isEndDate?: boolean;
     isForcedFocused: boolean;

package/fields/DateRangePicker/NumberInput.d.ts

@@ -1,6 +1,6 @@
 import type { InputHTMLAttributes } from 'react';
 import type { Promisable } from 'type-fest';
-export declare type NumberInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'maxLength' | 'onInput' | 'pattern' | 'type'> & {
+export type NumberInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'maxLength' | 'onInput' | 'pattern' | 'type'> & {
     max: number;
     min: number;
     /** Called when the use press backspace key while the input is empty. */

package/fields/DateRangePicker/RangeCalendarPicker.d.ts

@@ -1,7 +1,7 @@
 import type { DateRange } from '../../types';
 import type { DateTupleRange } from './types';
 import type { Promisable } from 'type-fest';
-declare type RangeCalendarPickerProps = {
+type RangeCalendarPickerProps = {
     defaultValue?: DateRange;
     isHistorical?: boolean;
     onChange: (nextDateTupleRange: DateTupleRange) => Promisable<void>;

package/fields/DateRangePicker/RangedTimePicker.d.ts

@@ -1,6 +1,6 @@
 import type { TimeTuple } from './types';
 import type { Promisable } from 'type-fest';
-declare type RangedTimePickerProps = {
+type RangedTimePickerProps = {
     filter: RegExp;
     minutesRange: number;
     onChange: (nextTimeTuple: TimeTuple) => Promisable<void>;

package/fields/DateRangePicker/TimeInput.d.ts

@@ -2,7 +2,7 @@
 import type { NumberInputProps } from './NumberInput';
 import type { DateOrTimeInputRef, TimeTuple } from './types';
 import type { Promisable } from 'type-fest';
-export declare type TimeInputProps = Pick<NumberInputProps, 'onBack' | 'onPrevious' | 'onNext'> & {
+export type TimeInputProps = Pick<NumberInputProps, 'onBack' | 'onPrevious' | 'onNext'> & {
     defaultValue?: TimeTuple;
     isStartDate?: boolean;
     minutesRange?: number;

package/fields/DateRangePicker/index.d.ts

@@ -1,6 +1,6 @@
 import type { DateRange } from '../../types';
 import type { Promisable } from 'type-fest';
-export declare type DateRangePickerProps = {
+export type DateRangePickerProps = {
     defaultValue?: DateRange;
     /** Only allow past dates until today. */
     isHistorical?: boolean;

package/fields/DateRangePicker/types.d.ts

@@ -1,4 +1,4 @@
-export declare type DateOrTimeInputRef = {
+export type DateOrTimeInputRef = {
     boxSpan: HTMLSpanElement;
     /**
      * Focus the first input in the group.
@@ -12,7 +12,7 @@ export declare enum DateRangePosition {
     START = "START"
 }
 /** In the shape of ["YYYY", "MM", "DD"]. */
-export declare type DateTuple = [string, string, string];
-export declare type DateTupleRange = [DateTuple, DateTuple];
+export type DateTuple = [string, string, string];
+export type DateTupleRange = [DateTuple, DateTuple];
 /** In the shape of ["hh", "mm"]. */
-export declare type TimeTuple = [string, string];
+export type TimeTuple = [string, string];

package/fields/MultiCheckbox.d.ts

@@ -1,6 +1,6 @@
 import type { Option } from '../types';
 import type { Promisable } from 'type-fest';
-export declare type MultiCheckboxProps = {
+export type MultiCheckboxProps = {
     defaultValue?: string[];
     isInline?: boolean;
     isLabelHidden?: boolean;

package/fields/MultiRadio.d.ts

@@ -1,6 +1,6 @@
 import type { Option } from '../types';
 import type { Promisable } from 'type-fest';
-export declare type MultiRadioProps = {
+export type MultiRadioProps = {
     defaultValue?: string;
     isInline?: boolean;
     isLabelHidden?: boolean;

package/fields/MultiSelect.d.ts

@@ -1,7 +1,7 @@
 import type { Option } from '../types';
 import type { TagPickerProps } from 'rsuite';
 import type { Promisable } from 'type-fest';
-export declare type MultiSelectProps = Omit<TagPickerProps, 'as' | 'data' | 'defaultValue' | 'id' | 'onChange' | 'value'> & {
+export type MultiSelectProps = Omit<TagPickerProps, 'as' | 'data' | 'defaultValue' | 'id' | 'onChange' | 'value'> & {
     defaultValue?: string[];
     /** Width in REM */
     fixedWidth?: number;

package/fields/Select.d.ts

@@ -1,7 +1,7 @@
 import type { Option } from '../types';
 import type { SelectPickerProps } from 'rsuite';
 import type { Promisable } from 'type-fest';
-export declare type SelectProps = Omit<SelectPickerProps<any>, 'as' | 'data' | 'defaultValue' | 'id' | 'onChange' | 'value'> & {
+export type SelectProps = Omit<SelectPickerProps<any>, 'as' | 'data' | 'defaultValue' | 'id' | 'onChange' | 'value'> & {
     defaultValue?: string;
     isLabelHidden?: boolean;
     label: string;

package/fields/TextInput.d.ts

@@ -1,6 +1,6 @@
 import type { InputProps } from 'rsuite';
 import type { Promisable } from 'type-fest';
-export declare type TextInputProps = Omit<InputProps, 'as' | 'defaultValue' | 'id' | 'onChange' | 'value'> & {
+export type TextInputProps = Omit<InputProps, 'as' | 'defaultValue' | 'id' | 'onChange' | 'value'> & {
     defaultValue?: string;
     isLabelHidden?: boolean;
     label: string;

package/fields/Textarea.d.ts

@@ -1,6 +1,6 @@
 import type { TextareaHTMLAttributes } from 'react';
 import type { Promisable } from 'type-fest';
-export declare type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'defaultValue' | 'id' | 'onChange' | 'value'> & {
+export type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'defaultValue' | 'id' | 'onChange' | 'value'> & {
     defaultValue?: string;
     isLabelHidden?: boolean;
     label: string;

package/formiks/FormikCheckbox.d.ts

@@ -1,3 +1,3 @@
 import type { CheckboxProps } from '../fields/Checkbox';
-export declare type FormikCheckboxProps = Omit<CheckboxProps, 'checked' | 'defaultChecked' | 'onChange'>;
+export type FormikCheckboxProps = Omit<CheckboxProps, 'checked' | 'defaultChecked' | 'onChange'>;
 export declare function FormikCheckbox({ name, ...originalProps }: FormikCheckboxProps): JSX.Element;

package/formiks/FormikDatePicker.d.ts

@@ -1,5 +1,5 @@
 import type { DatePickerProps } from '../fields/DatePicker';
-export declare type FormikDatePickerProps = Omit<DatePickerProps, 'onChange'> & {
+export type FormikDatePickerProps = Omit<DatePickerProps, 'onChange'> & {
     name: string;
 };
 export declare function FormikDatePicker({ name, ...originalProps }: FormikDatePickerProps): JSX.Element;

package/formiks/FormikDateRangePicker.d.ts

@@ -1,5 +1,5 @@
 import type { DateRangePickerProps } from '../fields/DateRangePicker';
-export declare type FormikDateRangePickerProps = Omit<DateRangePickerProps, 'onChange'> & {
+export type FormikDateRangePickerProps = Omit<DateRangePickerProps, 'onChange'> & {
     name: string;
 };
 export declare function FormikDateRangePicker({ name, ...originalProps }: FormikDateRangePickerProps): JSX.Element;

package/formiks/FormikEffect.d.ts

@@ -1,5 +1,5 @@
 import type { Promisable } from 'type-fest';
-export declare type FormikEffectProps = {
+export type FormikEffectProps = {
     onChange: (nextValues: Record<string, any>) => Promisable<void>;
 };
 export declare function FormikEffect({ onChange }: FormikEffectProps): JSX.Element;

package/formiks/FormikMultiCheckbox.d.ts

@@ -1,3 +1,3 @@
 import type { MultiCheckboxProps } from '../fields/MultiCheckbox';
-export declare type FormikMultiCheckboxProps = Omit<MultiCheckboxProps, 'defaultValue' | 'onChange'>;
+export type FormikMultiCheckboxProps = Omit<MultiCheckboxProps, 'defaultValue' | 'onChange'>;
 export declare function FormikMultiCheckbox({ name, ...originalProps }: FormikMultiCheckboxProps): JSX.Element;

package/formiks/FormikMultiRadio.d.ts

@@ -1,3 +1,3 @@
 import type { MultiRadioProps } from '../fields/MultiRadio';
-export declare type FormikMultiRadioProps = Omit<MultiRadioProps, 'defaultValue' | 'onChange'>;
+export type FormikMultiRadioProps = Omit<MultiRadioProps, 'defaultValue' | 'onChange'>;
 export declare function FormikMultiRadio({ name, ...originalProps }: FormikMultiRadioProps): JSX.Element;

package/formiks/FormikMultiSelect.d.ts

@@ -1,3 +1,3 @@
 import type { MultiSelectProps } from '../fields/MultiSelect';
-export declare type FormikMultiSelectProps = Omit<MultiSelectProps, 'defaultValue' | 'onChange'>;
+export type FormikMultiSelectProps = Omit<MultiSelectProps, 'defaultValue' | 'onChange'>;
 export declare function FormikMultiSelect({ name, ...originalProps }: FormikMultiSelectProps): JSX.Element;

package/formiks/FormikSelect.d.ts

@@ -1,3 +1,3 @@
 import type { SelectProps } from '../fields/Select';
-export declare type FormikSelectProps = Omit<SelectProps, 'defaultValue' | 'onChange'>;
+export type FormikSelectProps = Omit<SelectProps, 'defaultValue' | 'onChange'>;
 export declare function FormikSelect({ name, ...originalProps }: FormikSelectProps): JSX.Element;

package/formiks/FormikTextInput.d.ts

@@ -1,3 +1,3 @@
 import type { TextInputProps } from '../fields/TextInput';
-export declare type FormikTextInputProps = Omit<TextInputProps, 'defaultValue' | 'onChange'>;
+export type FormikTextInputProps = Omit<TextInputProps, 'defaultValue' | 'onChange'>;
 export declare function FormikTextInput({ name, ...originalProps }: FormikTextInputProps): JSX.Element;

package/formiks/FormikTextarea.d.ts

@@ -1,3 +1,3 @@
 import type { TextareaProps } from '../fields/Textarea';
-export declare type FormikTextareaProps = Omit<TextareaProps, 'defaultValue' | 'onChange'>;
+export type FormikTextareaProps = Omit<TextareaProps, 'defaultValue' | 'onChange'>;
 export declare function FormikTextarea({ name, ...originalProps }: FormikTextareaProps): JSX.Element;

package/index.js

@@ -1372,7 +1372,7 @@ const SecondaryButton = styled.button `
 const TertiaryButton$1 = styled.button `
   background-color: ${p => p.theme.color.white};
   border: 1px solid ${p => p.theme.color.white};
-  color: ${p => p.theme.color.gainsboro};
+  color: ${p => p.theme.color.charcoal};
 
   :hover,
   &._hover {
@@ -3659,37 +3659,34 @@ const StyledInput = styled(Input) `
 
 function FormikCheckbox({ name, ...originalProps }) {
     const [field, , helpers] = useField(name);
-    const value = useMemo(() => field.value, [field.value]);
-    // We don't include `setValues` in `useCallback()` and `useEffect()` dependencies
-    // both because it is useless and it will trigger infinite hook calls
-    const setValue = useMemo(() => helpers.setValue, [helpers.setValue]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps, @typescript-eslint/naming-convention
+    const defaultChecked = useMemo(() => Boolean(field.value), []);
     const handleChange = useCallback((isChecked) => {
-        setValue(isChecked);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+        helpers.setValue(isChecked);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(() => () => setValue(undefined), []);
-    return jsx(Checkbox, { defaultChecked: value, name: name, onChange: handleChange, ...originalProps });
+    useEffect(() => () => helpers.setValue(undefined), []);
+    return jsx(Checkbox, { defaultChecked: defaultChecked, name: name, onChange: handleChange, ...originalProps });
 }
 
 function FormikDatePicker({ name, ...originalProps }) {
-    const [, , helpers] = useField(name);
-    const { setValue } = helpers;
-    // We don't include `setValues` in `useEffect()` dependencies
-    // both because it is useless and it will trigger infinite hook calls
+    const [field, , helpers] = useField(name);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const defaultValue = useMemo(() => field.value, []);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(() => () => setValue(undefined), []);
-    return jsx(DatePicker, { onChange: setValue, ...originalProps });
+    useEffect(() => () => helpers.setValue(undefined), []);
+    return jsx(DatePicker, { defaultValue: defaultValue, onChange: helpers.setValue, ...originalProps });
 }
 
 function FormikDateRangePicker({ name, ...originalProps }) {
-    const [, , helpers] = useField(name);
-    const { setValue } = helpers;
-    // We don't include `setValues` in  `useEffect()` dependencies
-    // both because it is useless and it will trigger infinite hook calls
+    const [field, , helpers] = useField(name);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const defaultValue = useMemo(() => field.value, []);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(() => () => setValue(undefined), []);
-    return jsx(DateRangePicker, { onChange: setValue, ...originalProps });
+    useEffect(() => () => helpers.setValue(undefined), []);
+    return jsx(DateRangePicker, { defaultValue: defaultValue, onChange: helpers.setValue, ...originalProps });
 }
 
 function FormikEffect({ onChange }) {
@@ -3701,87 +3698,87 @@ function FormikEffect({ onChange }) {
 }
 
 function FormikMultiCheckbox({ name, ...originalProps }) {
-    const [, , helpers] = useField(name);
-    // We don't include `setValues` in `useCallback()` and `useEffect()` dependencies
-    // both because it is useless and it will trigger infinite hook calls
-    const { setValue } = helpers;
+    const [field, , helpers] = useField(name);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const defaultValue = useMemo(() => field.value, []);
     const handleChange = useCallback((nextValue) => {
-        setValue(nextValue);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+        helpers.setValue(nextValue);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(() => () => setValue(undefined), []);
-    return jsx(MultiCheckbox, { name: name, onChange: handleChange, ...originalProps });
+    useEffect(() => () => helpers.setValue(undefined), []);
+    return jsx(MultiCheckbox, { defaultValue: defaultValue, name: name, onChange: handleChange, ...originalProps });
 }
 
 function FormikMultiSelect({ name, ...originalProps }) {
-    const [, , helpers] = useField(name);
-    // We don't include `setValues` in `useCallback()` and `useEffect()` dependencies
-    // both because it is useless and it will trigger infinite hook calls
-    const { setValue } = helpers;
+    const [field, , helpers] = useField(name);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const defaultValue = useMemo(() => field.value, []);
     const handleChange = useCallback((nextValue) => {
-        setValue(nextValue);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+        helpers.setValue(nextValue);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(() => () => setValue(undefined), []);
-    return jsx(MultiSelect, { name: name, onChange: handleChange, ...originalProps });
+    useEffect(() => () => helpers.setValue(undefined), []);
+    return jsx(MultiSelect, { defaultValue: defaultValue, name: name, onChange: handleChange, ...originalProps });
 }
 
 function FormikMultiRadio({ name, ...originalProps }) {
-    const [, , helpers] = useField(name);
-    // We don't include `setValues` in `useCallback()` and `useEffect()` dependencies
-    // both because it is useless and it will trigger infinite hook calls
-    const { setValue } = helpers;
+    const [field, , helpers] = useField(name);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const defaultValue = useMemo(() => field.value, []);
     const handleChange = useCallback((nextValue) => {
-        setValue(nextValue);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+        helpers.setValue(nextValue);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(() => () => setValue(undefined), []);
-    return jsx(MultiRadio, { name: name, onChange: handleChange, ...originalProps });
+    useEffect(() => () => helpers.setValue(undefined), []);
+    return jsx(MultiRadio, { defaultValue: defaultValue, name: name, onChange: handleChange, ...originalProps });
 }
 
 function FormikSelect({ name, ...originalProps }) {
-    const [, , helpers] = useField(name);
-    // We don't include `setValues` in `useCallback()` and `useEffect()` dependencies
-    // both because it is useless and it will trigger infinite hook calls
-    const { setValue } = helpers;
+    const [field, , helpers] = useField(name);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const defaultValue = useMemo(() => field.value, []);
     const handleChange = useCallback((nextValue) => {
-        setValue(nextValue);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+        helpers.setValue(nextValue);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(() => () => setValue(undefined), []);
-    return jsx(Select, { name: name, onChange: handleChange, ...originalProps });
+    useEffect(() => () => helpers.setValue(undefined), []);
+    return jsx(Select, { defaultValue: defaultValue, name: name, onChange: handleChange, ...originalProps });
 }
 
 function FormikTextarea({ name, ...originalProps }) {
-    const [, , helpers] = useField(name);
-    // We don't include `setValues` in `useCallback()` and `useEffect()` dependencies
-    // both because it is useless and it will trigger infinite hook calls
-    const { setValue } = helpers;
+    const [field, , helpers] = useField(name);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const defaultValue = useMemo(() => field.value, []);
     const handleChange = useCallback((nextValue) => {
-        setValue(nextValue);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+        helpers.setValue(nextValue);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(() => () => setValue(undefined), []);
-    return jsx(Textarea, { name: name, onChange: handleChange, ...originalProps });
+    useEffect(() => () => helpers.setValue(undefined), []);
+    return jsx(Textarea, { defaultValue: defaultValue, name: name, onChange: handleChange, ...originalProps });
 }
 
 function FormikTextInput({ name, ...originalProps }) {
-    const [, , helpers] = useField(name);
-    // We don't include `setValues` in `useCallback()` and `useEffect()` dependencies
-    // both because it is useless and it will trigger infinite hook calls
-    const { setValue } = helpers;
+    const [field, , helpers] = useField(name);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    const defaultValue = useMemo(() => field.value, []);
     const handleChange = useCallback((nextValue) => {
-        setValue(nextValue);
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
+        helpers.setValue(nextValue);
+    }, 
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    useEffect(() => () => setValue(undefined), []);
-    return jsx(TextInput, { name: name, onChange: handleChange, ...originalProps });
+    useEffect(() => () => helpers.setValue(undefined), []);
+    return jsx(TextInput, { defaultValue: defaultValue, name: name, onChange: handleChange, ...originalProps });
 }
 
 const IconBox = styled.div `