From 027708ec69d7f920252d8ab58054ded28b7b82d6 Mon Sep 17 00:00:00 2001
From: jxom <jakemoxey@gmail.com>
Date: Thu, 14 Feb 2019 12:04:55 +1100
Subject: [PATCH] Add isFilled prop to Set; Make SelectMenu more form friendly

---
 src/Checkbox/Checkbox.tsx                     |  6 +-
 .../__snapshots__/FieldSet.test.tsx.snap      |  9 +-
 .../__snapshots__/LayoutSet.test.tsx.snap     | 18 ++--
 src/Menu/MenuButton.tsx                       |  1 +
 src/Menu/MenuItem.tsx                         |  2 +-
 .../__snapshots__/Menu.test.tsx.snap          | 22 +++++
 src/SelectMenu/SelectMenu.tsx                 | 60 +++++++++---
 src/Set/Set.mdx                               | 14 +++
 src/Set/Set.tsx                               |  3 +
 .../__tests__/__snapshots__/Set.test.tsx.snap |  9 +-
 src/Set/styled.ts                             | 10 +-
 src/adaptors/fields.tsx                       | 97 +++++++++++++++++++
 src/adaptors/formikField.tsx                  | 17 ----
 src/adaptors/index.ts                         |  3 +-
 src/adaptors/reduxFormField.tsx               | 17 ----
 15 files changed, 211 insertions(+), 77 deletions(-)
 create mode 100644 src/adaptors/fields.tsx
 delete mode 100644 src/adaptors/formikField.tsx
 delete mode 100644 src/adaptors/reduxFormField.tsx

diff --git a/src/Checkbox/Checkbox.tsx b/src/Checkbox/Checkbox.tsx
index 11d46c978..1d2877f8c 100644
--- a/src/Checkbox/Checkbox.tsx
+++ b/src/Checkbox/Checkbox.tsx
@@ -25,7 +25,7 @@ export type LocalCheckboxProps = {
   /** State of the checkbox. Can be any color in the palette. */
   state?: string;
   /** Initial value of the checkbox */
-  value?: string;
+  value?: boolean | string;
   /** Function to invoke when focus is lost */
   onBlur?: React.FocusEventHandler<HTMLInputElement>;
   /** Function to invoke when checkbox has changed */
@@ -73,6 +73,7 @@ export const Checkbox: React.FunctionComponent<LocalCheckboxProps> = ({
       name={name}
       state={state}
       type="checkbox"
+      // @ts-ignore
       value={value}
     />
     <CheckboxIcon state={state} />
@@ -96,7 +97,7 @@ export const checkboxPropTypes = {
   label: PropTypes.string,
   name: PropTypes.string,
   state: PropTypes.string,
-  value: PropTypes.string,
+  value: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
   onFocus: PropTypes.func
@@ -122,5 +123,6 @@ export const checkboxDefaultProps = {
 };
 Checkbox.defaultProps = checkboxDefaultProps;
 
+// @ts-ignore
 const C: React.FunctionComponent<CheckboxProps> = Checkbox;
 export default C;
diff --git a/src/FieldSet/__tests__/__snapshots__/FieldSet.test.tsx.snap b/src/FieldSet/__tests__/__snapshots__/FieldSet.test.tsx.snap
index 4c8c355eb..9f5256542 100644
--- a/src/FieldSet/__tests__/__snapshots__/FieldSet.test.tsx.snap
+++ b/src/FieldSet/__tests__/__snapshots__/FieldSet.test.tsx.snap
@@ -65,16 +65,13 @@ exports[`renders correctly for a basic field 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   -webkit-align-items: flex-start;
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
   align-items: flex-start;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
 }
 
 .c1 > *:not(:last-child) {
diff --git a/src/LayoutSet/__tests__/__snapshots__/LayoutSet.test.tsx.snap b/src/LayoutSet/__tests__/__snapshots__/LayoutSet.test.tsx.snap
index 381b29012..c15ad1f99 100644
--- a/src/LayoutSet/__tests__/__snapshots__/LayoutSet.test.tsx.snap
+++ b/src/LayoutSet/__tests__/__snapshots__/LayoutSet.test.tsx.snap
@@ -23,16 +23,13 @@ exports[`renders correctly for a basic field 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   -webkit-align-items: flex-start;
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
   align-items: flex-start;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
 }
 
 .c1 > *:not(:last-child) {
@@ -44,16 +41,13 @@ exports[`renders correctly for a basic field 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   -webkit-align-items: flex-start;
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
   align-items: flex-start;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
 }
 
 .c8 > *:not(:last-child) {
diff --git a/src/Menu/MenuButton.tsx b/src/Menu/MenuButton.tsx
index 106f205cb..104831bc4 100644
--- a/src/Menu/MenuButton.tsx
+++ b/src/Menu/MenuButton.tsx
@@ -48,6 +48,7 @@ export class MenuButton extends React.Component<LocalMenuButtonProps> {
         onKeyDown={this.handleKeyDown}
         {...context}
         {...props}
+        type="button"
       />
     );
   };
diff --git a/src/Menu/MenuItem.tsx b/src/Menu/MenuItem.tsx
index 57f801395..f1b17957d 100644
--- a/src/Menu/MenuItem.tsx
+++ b/src/Menu/MenuItem.tsx
@@ -48,7 +48,7 @@ export class MenuItem extends React.Component<LocalMenuItemProps> {
   render = () => {
     const { children, icon, isDisabled, ...props } = this.props;
     return (
-      <_MenuItem role="menuitem" disabled={isDisabled} {...props} onClick={this.handleClick}>
+      <_MenuItem role="menuitem" disabled={isDisabled} {...props} onClick={this.handleClick} type="button">
         {icon && (
           // @ts-ignore
           <MenuIcon a11yHidden icon={icon} />
diff --git a/src/Menu/__tests__/__snapshots__/Menu.test.tsx.snap b/src/Menu/__tests__/__snapshots__/Menu.test.tsx.snap
index 838f88e1d..98578c0ee 100644
--- a/src/Menu/__tests__/__snapshots__/Menu.test.tsx.snap
+++ b/src/Menu/__tests__/__snapshots__/Menu.test.tsx.snap
@@ -111,12 +111,14 @@ a.c3:hover {
     <button
       class="c3 c4"
       role="menuitem"
+      type="button"
     >
       Edit...
     </button>
     <button
       class="c3 c4"
       role="menuitem"
+      type="button"
     >
       Share...
     </button>
@@ -287,6 +289,7 @@ a.c5:hover {
     <button
       class="c4 c5 c6"
       role="menuitem"
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -307,6 +310,7 @@ a.c5:hover {
     <button
       class="c4 c5 c6"
       role="menuitem"
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -335,6 +339,7 @@ a.c5:hover {
     <button
       class="c4 c5 c6"
       role="menuitem"
+      type="button"
     >
       Go to google
     </button>
@@ -707,18 +712,21 @@ a.c15:hover {
         <button
           class="c14 c15 c16"
           role="menuitem"
+          type="button"
         >
           Edit...
         </button>
         <button
           class="c14 c15 c16"
           role="menuitem"
+          type="button"
         >
           Share...
         </button>
         <button
           class="c14 c15 c16"
           role="menuitem"
+          type="button"
         >
           Rename...
         </button>
@@ -726,6 +734,7 @@ a.c15:hover {
           class="c14 c15 c17"
           color="danger"
           role="menuitem"
+          type="button"
         >
           Delete...
         </button>
@@ -746,6 +755,7 @@ a.c15:hover {
           class="c14 c15 c16 c21 "
           href="https://google.com"
           role="menuitem"
+          type="button"
         >
           Go to Google
         </a>
@@ -883,6 +893,7 @@ a.c3:hover {
       class="c3 c4"
       disabled=""
       role="menuitem"
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -903,6 +914,7 @@ a.c3:hover {
     <button
       class="c3 c4"
       role="menuitem"
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -1070,6 +1082,7 @@ a.c3:hover {
     <button
       class="c3 c4"
       role="menuitem"
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -1090,6 +1103,7 @@ a.c3:hover {
     <button
       class="c3 c4"
       role="menuitem"
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -1118,6 +1132,7 @@ a.c3:hover {
     <button
       class="c3 c4"
       role="menuitem"
+      type="button"
     >
       Go to google
     </button>
@@ -1299,6 +1314,7 @@ a.c3:hover {
     <button
       class="c3 c4"
       role="menuitem"
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -1319,6 +1335,7 @@ a.c3:hover {
     <button
       class="c8 c4"
       role="menuitem"
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -1463,6 +1480,7 @@ a.c3:hover {
     <button
       class="c3 c4"
       role="menuitem"
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -1483,6 +1501,7 @@ a.c3:hover {
     <button
       class="c3 c4"
       role="menuitem"
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -1631,6 +1650,7 @@ a.c3:hover {
     <button
       class="c3 c4"
       role="menuitem"
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -1651,6 +1671,7 @@ a.c3:hover {
     <button
       class="c3 c4"
       role="menuitem"
+      type="button"
     >
       <svg
         aria-hidden="true"
@@ -1675,6 +1696,7 @@ a.c3:hover {
     <button
       class="c3 c4"
       role="menuitem"
+      type="button"
     >
       Go to google
     </button>
diff --git a/src/SelectMenu/SelectMenu.tsx b/src/SelectMenu/SelectMenu.tsx
index 0c17110af..eb01a0d74 100644
--- a/src/SelectMenu/SelectMenu.tsx
+++ b/src/SelectMenu/SelectMenu.tsx
@@ -48,7 +48,7 @@ export type SelectMenuItemObject = {
   label: string;
   value?: string | number | boolean | Object;
 };
-export type SelectMenuItem = string | SelectMenuItemObject;
+export type SelectMenuItem = string | SelectMenuItemObject | null;
 export type SelectMenuItems = Array<SelectMenuItem>;
 
 export type LocalSelectMenuProps = Omit<LocalMenuProps, 'children'> & {
@@ -72,7 +72,11 @@ export type LocalSelectMenuProps = Omit<LocalMenuProps, 'children'> & {
     page: number;
     searchText?: string;
   }): Promise<{ options: SelectMenuItems }>;
-  onChange?(value: string | SelectMenuItemObject['value'], item: SelectMenuItem): void;
+  onChange?(
+    value: string | SelectMenuItemObject['value'] | null,
+    item: SelectMenuItem,
+    values: SelectMenuItem | SelectMenuItems | null
+  ): void;
   options?: SelectMenuItems;
   placeholder?: string;
   renderBottomActions?(opts: {
@@ -91,6 +95,7 @@ export type LocalSelectMenuProps = Omit<LocalMenuProps, 'children'> & {
     items: { [key: string]: SelectMenuItem }
   ): React.ReactNode;
   searchInputProps?: LocalSelectMenuSearchInputProps;
+  value?: SelectMenuItem | SelectMenuItems;
   useTags?: boolean;
 };
 export type SelectMenuProps = Omit<Omit<MenuProps, 'as'>, 'children'> & LocalSelectMenuProps;
@@ -126,8 +131,27 @@ const selectMenuItemObjectPropType = PropTypes.shape({
 const selectMenuItemPropType = PropTypes.oneOfType([PropTypes.string, selectMenuItemObjectPropType]);
 const selectMenuItemsPropType = PropTypes.arrayOf(selectMenuItemPropType);
 
-const getDefaultOptions = (props: SelectMenuProps) => {
-  const { defaultKey, defaultKeys, defaultOption, defaultOptions, options } = props;
+const getSelectedOptionsFromValue = (value: SelectMenuItem | SelectMenuItems) => {
+  if (typeof value === 'string') {
+    return { [value]: value };
+  }
+  if (Array.isArray(value)) {
+    return value.reduce((currentSelectedOptions, defaultOption) => {
+      const key = _get(defaultOption, 'key', defaultOption);
+      return { ...currentSelectedOptions, [key]: defaultOption };
+    }, {});
+  }
+  if (typeof value === 'object') {
+    const key = _get(value, 'key', value);
+    return { [key]: value };
+  }
+  return {};
+};
+const getDefaultSelectedOptionsFromProps = (props: SelectMenuProps) => {
+  const { defaultKey, defaultKeys, defaultOption, defaultOptions, options, value } = props;
+  if (value) {
+    return getSelectedOptionsFromValue(value);
+  }
   if (defaultOption) {
     const key = _get(defaultOption, 'key', defaultOption);
     return { [key]: defaultOption };
@@ -241,7 +265,8 @@ export class SelectMenu extends React.Component<SelectMenuProps, SelectMenuState
     renderOption: PropTypes.func,
     renderValue: PropTypes.func,
     searchInputProps: PropTypes.shape(selectMenuSearchInputPropTypes),
-    useTags: PropTypes.bool
+    useTags: PropTypes.bool,
+    value: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.array])
   };
   static defaultProps = {
     defaultKey: undefined,
@@ -265,7 +290,8 @@ export class SelectMenu extends React.Component<SelectMenuProps, SelectMenuState
     renderOption: optionRenderer,
     renderValue: valueRenderer,
     searchInputProps: undefined,
-    useTags: false
+    useTags: false,
+    value: undefined
   };
 
   optionsGroup = React.createRef<HTMLDivElement>();
@@ -275,14 +301,17 @@ export class SelectMenu extends React.Component<SelectMenuProps, SelectMenuState
     contextKey: this.props.loadQuery ? Object.values(this.props.loadQuery).join('.') : undefined,
     options: this.props.options || [],
     page: 1,
-    selectedOptions: getDefaultOptions(this.props),
+    selectedOptions: getDefaultSelectedOptionsFromProps(this.props),
     searchText: ''
   };
 
   componentDidUpdate = (prevProps: SelectMenuProps) => {
-    const { loadQuery, options } = this.props;
-    const { loadQuery: prevLoadQuery, options: prevOptions } = prevProps;
+    const { loadQuery, options, value } = this.props;
+    const { loadQuery: prevLoadQuery, options: prevOptions, value: prevValue } = prevProps;
 
+    if (value && value !== prevValue) {
+      this.setState({ selectedOptions: getSelectedOptionsFromValue(value) });
+    }
     if (options && _get(options, 'length') !== _get(prevOptions, 'length')) {
       this.filterOptions();
     }
@@ -321,6 +350,8 @@ export class SelectMenu extends React.Component<SelectMenuProps, SelectMenuState
   };
 
   handleClearSelected = () => {
+    const { onChange } = this.props;
+    onChange && onChange(null, null, null);
     this.setState({ selectedOptions: {} });
   };
 
@@ -342,8 +373,15 @@ export class SelectMenu extends React.Component<SelectMenuProps, SelectMenuState
       }
       this.setState({ selectedOptions: newSelectedOptions });
 
+      let newValues: SelectMenuItems | SelectMenuItem | null = Object.values(newSelectedOptions);
+      if (newValues.length === 0) {
+        newValues = null;
+      } else if (!isMultiSelect) {
+        newValues = newValues[0];
+      }
       const value = _get(option, 'value', option);
-      onChange && onChange(value, option);
+
+      onChange && onChange(value, option, newValues);
     };
   };
 
@@ -489,8 +527,8 @@ export class SelectMenu extends React.Component<SelectMenuProps, SelectMenuState
     const { emptyText, isDropdown, isMultiSelect, renderEmpty, renderError, renderOption, useTags } = this.props;
     const { options, selectedOptions } = this.state;
     return (
+      // @ts-ignore
       <SelectMenuGroup
-        // @ts-ignore
         elementRef={this.optionsGroup}
         isDropdown={isDropdown}
         isMultiSelect={isMultiSelect}
diff --git a/src/Set/Set.mdx b/src/Set/Set.mdx
index 5129d4907..ce274857e 100644
--- a/src/Set/Set.mdx
+++ b/src/Set/Set.mdx
@@ -64,6 +64,20 @@ You can also have a vertical set with the `isVertical` prop.
   </Set>
 </Playground>
 
+By default, `<Set>` will preserve the width of it's children. However, if you'd like your children to fill the width of `<Set>`, use the `isFilled` prop:
+
+<Playground>
+  <Set isVertical isFilled spacing="minor-1">
+    <Tag>Tag 1</Tag>
+    <Tag>Tag 2</Tag>
+    <Tag>Tag 3</Tag>
+    <Tag>Tag 4</Tag>
+    <Tag>Tag 5</Tag>
+    <Tag>Tag 6</Tag>
+    <Tag>Tag 7</Tag>
+  </Set>
+</Playground>
+
 ## Props
 
 <PropsTable component={Set} />
diff --git a/src/Set/Set.tsx b/src/Set/Set.tsx
index fe94d5ddd..006d4f965 100644
--- a/src/Set/Set.tsx
+++ b/src/Set/Set.tsx
@@ -7,6 +7,7 @@ import _Set from './styled';
 export type LocalSetProps = {
   className?: string;
   children: React.ReactNode;
+  isFilled?: boolean;
   isVertical?: boolean;
   spacing?: string;
 };
@@ -19,11 +20,13 @@ export const Set: React.FunctionComponent<LocalSetProps> = ({ children, ...props
 Set.propTypes = {
   className: PropTypes.string,
   children: PropTypes.node.isRequired,
+  isFilled: PropTypes.bool,
   isVertical: PropTypes.bool,
   spacing: PropTypes.string
 };
 Set.defaultProps = {
   className: undefined,
+  isFilled: false,
   isVertical: false,
   spacing: 'minor-2'
 };
diff --git a/src/Set/__tests__/__snapshots__/Set.test.tsx.snap b/src/Set/__tests__/__snapshots__/Set.test.tsx.snap
index ee855cfb0..07c9d6aa5 100644
--- a/src/Set/__tests__/__snapshots__/Set.test.tsx.snap
+++ b/src/Set/__tests__/__snapshots__/Set.test.tsx.snap
@@ -135,16 +135,13 @@ exports[`renders correctly for a vertical set 1`] = `
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
   -webkit-align-items: flex-start;
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
   align-items: flex-start;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
 }
 
 .c0 > *:not(:last-child) {
diff --git a/src/Set/styled.ts b/src/Set/styled.ts
index e78e81b64..57e6fe4a2 100644
--- a/src/Set/styled.ts
+++ b/src/Set/styled.ts
@@ -5,15 +5,19 @@ import { Flex } from '../primitives';
 import { LocalSetProps } from './Set';
 
 export default styled(Flex)<LocalSetProps>`
-  flex-wrap: wrap;
-
   ${props =>
     props.isVertical
       ? css`
-          align-items: flex-start;
           flex-direction: column;
+
+          ${props =>
+            !props.isFilled &&
+            css`
+              align-items: flex-start;
+            `};
         `
       : css`
+          flex-wrap: wrap;
           align-items: center;
           justify-content: flex-start;
           margin-left: -${props => space(props.spacing)(props)}rem;
diff --git a/src/adaptors/fields.tsx b/src/adaptors/fields.tsx
new file mode 100644
index 000000000..112932599
--- /dev/null
+++ b/src/adaptors/fields.tsx
@@ -0,0 +1,97 @@
+import * as React from 'react';
+
+const FIELDS_WITH_FIELD_WRAPPERS = [
+  'CheckboxField',
+  'InputField',
+  'RadioField',
+  'RadioGroupField',
+  'SelectField',
+  'SelectMenuField',
+  'SwitchField',
+  'TextareaField'
+];
+const SELECT_MENUS = ['SelectMenu', 'SelectMenuField'];
+
+const bindFns = (...fns: Array<Function>) => (...args: any) => {
+  fns.forEach(fn => fn && fn(...args));
+};
+
+export function formikField(Component: any) {
+  return ({ field, form, ...props }: any) => {
+    let overrideProps = {};
+
+    if (FIELDS_WITH_FIELD_WRAPPERS.includes(Component.name)) {
+      let state = form.touched[field.name] && form.errors[field.name] ? 'danger' : undefined;
+      if (props.state) {
+        state = props.state;
+      }
+
+      let validationText = form.touched[field.name] && form.errors[field.name] ? form.errors[field.name] : undefined;
+      if (props.validationText) {
+        validationText = props.validationText;
+      }
+
+      overrideProps = {
+        ...overrideProps,
+        state,
+        validationText
+      };
+    }
+
+    let onBlur = field.onBlur;
+    let onChange = field.onChange;
+    if (SELECT_MENUS.includes(Component.name)) {
+      onBlur = () => form.setFieldTouched(field.name);
+      // @ts-ignore
+      onChange = (value: any, option: any, newValues: any) => form.setFieldValue(field.name, newValues);
+    }
+
+    overrideProps = {
+      ...overrideProps,
+      onBlur: bindFns(onBlur, props.onBlur),
+      onChange: bindFns(onChange, props.onChange)
+    };
+
+    return <Component {...props} {...field} {...overrideProps} />;
+  };
+}
+
+export function reduxFormField(Component: any) {
+  return ({ input, meta, ...props }: any) => {
+    let overrideProps = {};
+
+    if (FIELDS_WITH_FIELD_WRAPPERS.includes(Component.name)) {
+      let state = meta.touched && meta.error ? 'danger' : undefined;
+      if (props.state) {
+        state = props.state;
+      }
+
+      let validationText = meta.touched && meta.error ? meta.error : undefined;
+      if (props.validationText) {
+        validationText = props.validationText;
+      }
+
+      overrideProps = {
+        ...overrideProps,
+        state,
+        validationText
+      };
+    }
+
+    let onBlur = input.onBlur;
+    let onChange = input.onChange;
+    if (SELECT_MENUS.includes(Component.name)) {
+      // @ts-ignore
+      onChange = (value: any, option: any, newValues: any) => input.onChange(newValues);
+      onBlur = () => input.onBlur(input.value);
+    }
+
+    overrideProps = {
+      ...overrideProps,
+      onBlur: bindFns(onBlur, props.onBlur),
+      onChange: bindFns(onChange, props.onChange)
+    };
+
+    return <Component {...props} {...input} {...overrideProps} />;
+  };
+}
diff --git a/src/adaptors/formikField.tsx b/src/adaptors/formikField.tsx
deleted file mode 100644
index 6b6d5b83b..000000000
--- a/src/adaptors/formikField.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from 'react';
-
-export default function formikField(Component: any) {
-  return ({ field, form, ...props }: any) => {
-    let state = form.touched[field.name] && form.errors[field.name] ? 'danger' : undefined;
-    if (props.state) {
-      state = props.state;
-    }
-
-    let validationText = form.touched[field.name] && form.errors[field.name] ? form.errors[field.name] : undefined;
-    if (props.validationText) {
-      validationText = props.validationText;
-    }
-
-    return <Component {...props} {...field} state={state} validationText={validationText} />;
-  };
-}
diff --git a/src/adaptors/index.ts b/src/adaptors/index.ts
index a4192b960..746efc18d 100644
--- a/src/adaptors/index.ts
+++ b/src/adaptors/index.ts
@@ -1,2 +1 @@
-export { default as formikField } from './formikField';
-export { default as reduxFormField } from './reduxFormField';
+export { formikField, reduxFormField } from './fields';
diff --git a/src/adaptors/reduxFormField.tsx b/src/adaptors/reduxFormField.tsx
deleted file mode 100644
index 661bb4656..000000000
--- a/src/adaptors/reduxFormField.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as React from 'react';
-
-export default function reduxFormField(Component: any) {
-  return ({ input, meta, ...props }: any) => {
-    let state = meta.touched && meta.error ? 'danger' : undefined;
-    if (props.state) {
-      state = props.state;
-    }
-
-    let validationText = meta.touched && meta.error ? meta.error : undefined;
-    if (props.validationText) {
-      validationText = props.validationText;
-    }
-
-    return <Component {...props} {...input} state={state} validationText={validationText} />;
-  };
-}