From c47309cadb488818ff0a6738fb3d08b3a2ebddab Mon Sep 17 00:00:00 2001
From: Richard Vsiansky <r.vsia@seznam.cz>
Date: Tue, 14 Jan 2020 13:50:10 +0100
Subject: [PATCH 1/7] Add meta and formGroup propTypes

---
 packages/common/src/prop-types-templates.js | 27 +++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/packages/common/src/prop-types-templates.js b/packages/common/src/prop-types-templates.js
index 9dc86f2de..a5801d28c 100644
--- a/packages/common/src/prop-types-templates.js
+++ b/packages/common/src/prop-types-templates.js
@@ -1,3 +1,30 @@
 import PropTypes from 'prop-types';
 
 export const optionsPropType = PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string.isRequired, value: PropTypes.any }));
+
+export const meta = PropTypes.shape({
+  active: PropTypes.bool,
+  dirty: PropTypes.bool,
+  dirtySinceLastSubmit: PropTypes.bool,
+  error: PropTypes.any,
+  initial: PropTypes.any,
+  invalid: PropTypes.bool,
+  modified: PropTypes.bool,
+  pristine: PropTypes.bool,
+  submitError: PropTypes.any,
+  submitFailed: PropTypes.bool,
+  submitSucceeded: PropTypes.bool,
+  submitting: PropTypes.bool,
+  touched: PropTypes.bool,
+  valid: PropTypes.bool,
+  validating: PropTypes.bool,
+  visited: PropTypes.bool,
+});
+
+export const formGroup = {
+  isRequired: PropTypes.bool,
+  label: PropTypes.node,
+  helperText: PropTypes.node,
+  meta,
+  description: PropTypes.node,
+};

From fe5c70329b79c876c21f022ef1123285145dd33c Mon Sep 17 00:00:00 2001
From: Richard Vsiansky <r.vsia@seznam.cz>
Date: Tue, 14 Jan 2020 13:50:27 +0100
Subject: [PATCH 2/7] Add common MultipleChoiceList component

---
 packages/common/src/multiple-choice-list.js | 80 +++++++++++++++++++++
 1 file changed, 80 insertions(+)
 create mode 100644 packages/common/src/multiple-choice-list.js

diff --git a/packages/common/src/multiple-choice-list.js b/packages/common/src/multiple-choice-list.js
new file mode 100644
index 000000000..ab85e9fe4
--- /dev/null
+++ b/packages/common/src/multiple-choice-list.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { composeValidators } from '@data-driven-forms/react-form-renderer';
+
+import { formGroup } from './prop-types-templates';
+
+const MultipleChoiceList = ({ validate, FieldProvider, Wrapper, Checkbox, ...props }) => (
+  <FieldProvider
+    { ...props }
+    validate={ composeValidators(props.validate || []) }
+    render={ ({
+      label,
+      isRequired,
+      helperText,
+      meta,
+      options,
+      isDisabled,
+      isReadOnly,
+      description,
+      ...rest
+    }) => {
+      const { error, touched } = meta;
+      const showError = touched && error;
+      const groupValues = rest.input.value;
+      return (
+        <Wrapper
+          showError={ showError }
+          isRequired={ isRequired }
+          label={ label }
+          helperText={ helperText }
+          meta={ meta }
+          description={ description }
+          rest={ rest }
+        >
+          { options.map(option =>
+            (<FieldProvider
+              formOptions={ rest.formOptions }
+              id={ `${rest.id}-${option.value}` }
+              key={ option.value }
+              { ...option }
+              name={ props.name }
+              type="checkbox"
+              render={ ({ input, meta, formOptions, componentType, ...rest }) => {
+                const indexValue = groupValues.indexOf(input.value);
+                return (
+                  <Checkbox
+                    aria-label={ option['aria-label'] || option.label }
+                    { ...input }
+                    { ...rest }
+                    isDisabled={ isDisabled || isReadOnly }
+                    onChange={ () => (indexValue === -1
+                      ? input.onChange([ ...groupValues, input.value ])
+                      : input.onChange([ ...groupValues.slice(0, indexValue), ...groupValues.slice(indexValue + 1) ])) }
+                    label={ rest.label }
+                  />
+                );
+              } }
+            />)) }
+        </Wrapper>);
+    } }
+  />
+);
+
+MultipleChoiceList.propTypes = {
+  validate: PropTypes.func,
+  FieldProvider: PropTypes.oneOfType([ PropTypes.node, PropTypes.func ]),
+  name: PropTypes.string.isRequired,
+  Wrapper: PropTypes.oneOfType([ PropTypes.node, PropTypes.func ]),
+  Checkbox: PropTypes.oneOfType([ PropTypes.node, PropTypes.func ]),
+};
+
+export default MultipleChoiceList;
+
+export const wrapperProps = {
+  ...formGroup,
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]).isRequired,
+};

From 552ab49cb73677cbcf35d021e07f08c560f768c5 Mon Sep 17 00:00:00 2001
From: Richard Vsiansky <r.vsia@seznam.cz>
Date: Tue, 14 Jan 2020 13:53:03 +0100
Subject: [PATCH 3/7] fix(pf3): Convert PF3 multiplechoice to use common

---
 .../src/form-fields/multiple-choice-list.js   |  90 +--
 .../multiple-choice-list.test.js.snap         | 572 ++++++++++--------
 2 files changed, 342 insertions(+), 320 deletions(-)

diff --git a/packages/pf3-component-mapper/src/form-fields/multiple-choice-list.js b/packages/pf3-component-mapper/src/form-fields/multiple-choice-list.js
index 65594582e..3d1d9f961 100644
--- a/packages/pf3-component-mapper/src/form-fields/multiple-choice-list.js
+++ b/packages/pf3-component-mapper/src/form-fields/multiple-choice-list.js
@@ -1,71 +1,43 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Checkbox,  FormGroup, ControlLabel, FieldLevelHelp } from 'patternfly-react';
-import { composeValidators } from '@data-driven-forms/react-form-renderer';
+import MultipleChoiceListCommon, { wrapperProps } from '@data-driven-forms/common/src/multiple-choice-list';
 
 import RequiredLabel from './required-label';
 import { renderHelperText } from './form-fields';
 
-const MultipleChoiceList = ({ validate, FieldProvider, ...props }) => (
-  <FieldProvider { ...props } validate={ composeValidators(props.validate || []) }>
-    { ({
-      label,
-      isRequired,
-      helperText,
-      meta,
-      options,
-      isDisabled,
-      isReadOnly,
-      description,
-      ...rest
-    }) => {
-      const { error, touched } = meta;
-      const showError = touched && error;
-      const groupValues = rest.input.value;
-      return (
-        <FormGroup validationState={ showError ? 'error' : null }>
-          <ControlLabel>
-            { (isRequired ? <RequiredLabel label={ label } /> : label) }
-            { helperText && <FieldLevelHelp content={ helperText } /> }
-          </ControlLabel>
-          <div>
-            { options.map(option =>
-              (<FieldProvider
-                formOptions={ rest.formOptions }
-                id={ `${rest.id}-${option.value}` }
-                key={ option.value }
-                { ...option }
-                name={ props.name }
-                type="checkbox"
-                render={ ({ input, meta, formOptions, componentType, ...rest }) => {
-                  const indexValue = groupValues.indexOf(input.value);
-                  return (
-                    <Checkbox
-                      aria-label={ option['aria-label'] || option.label }
-                      { ...input }
-                      { ...rest }
-                      disabled={ isDisabled || isReadOnly }
-                      onChange={ () => (indexValue === -1
-                        ? input.onChange([ ...groupValues, input.value ])
-                        : input.onChange([ ...groupValues.slice(0, indexValue), ...groupValues.slice(indexValue + 1) ])) }
-                    >
-                      { rest.label }
-                    </Checkbox>
-                  );
-                } }
-              />)) }
-          </div>
-          { renderHelperText(showError && meta.error, description) }
-        </FormGroup>
-      );
-    } }
-  </FieldProvider>
+const FinalCheckbox = ({ label, isDisabled, ...props }) => (
+  <Checkbox { ...props } disabled={ isDisabled }>{ label }</Checkbox>
 );
 
-MultipleChoiceList.propTypes = {
-  validate: PropTypes.func,
-  FieldProvider: PropTypes.oneOfType([ PropTypes.node, PropTypes.func ]),
-  name: PropTypes.string.isRequired,
+FinalCheckbox.propTypes = {
+  label: PropTypes.node,
+  isDisabled: PropTypes.bool,
 };
 
+const Wrapper = ({ showError, isRequired, helperText, label, meta, description, children }) => (
+  <FormGroup validationState={ showError ? 'error' : null }>
+    <ControlLabel>
+      { isRequired ? <RequiredLabel label={ label } /> : label }
+      { helperText && <FieldLevelHelp content={ helperText } /> }
+    </ControlLabel>
+    <div>
+      { children }
+    </div>
+    { renderHelperText(showError && meta.error, description) }
+  </FormGroup>
+);
+
+Wrapper.propTypes = {
+  ...wrapperProps,
+};
+
+const MultipleChoiceList = (props) => (
+  <MultipleChoiceListCommon
+    { ...props }
+    Wrapper={ Wrapper }
+    Checkbox={ FinalCheckbox }
+  />
+);
+
 export default MultipleChoiceList;
diff --git a/packages/pf3-component-mapper/src/tests/__snapshots__/multiple-choice-list.test.js.snap b/packages/pf3-component-mapper/src/tests/__snapshots__/multiple-choice-list.test.js.snap
index 79fd6fe71..3cd54a750 100644
--- a/packages/pf3-component-mapper/src/tests/__snapshots__/multiple-choice-list.test.js.snap
+++ b/packages/pf3-component-mapper/src/tests/__snapshots__/multiple-choice-list.test.js.snap
@@ -16,7 +16,10 @@ exports[`<MultipleChoiceList /> should render correctly 1`] = `
     ]
   }
 >
-  <FieldProvider
+  <MultipleChoiceList
+    Checkbox={[Function]}
+    FieldProvider={[Function]}
+    Wrapper={[Function]}
     options={
       Array [
         Object {
@@ -29,15 +32,8 @@ exports[`<MultipleChoiceList /> should render correctly 1`] = `
         },
       ]
     }
-    validate={[Function]}
   >
-    <MockFieldProvider
-      input={
-        Object {
-          "onChange": [MockFunction],
-          "value": Array [],
-        }
-      }
+    <FieldProvider
       options={
         Array [
           Object {
@@ -52,135 +48,161 @@ exports[`<MultipleChoiceList /> should render correctly 1`] = `
       }
       validate={[Function]}
     >
-      <FormGroup
-        bsClass="form-group"
-        validationState={null}
+      <MockFieldProvider
+        input={
+          Object {
+            "onChange": [MockFunction],
+            "value": Array [],
+          }
+        }
+        options={
+          Array [
+            Object {
+              "label": "Foo",
+              "value": 0,
+            },
+            Object {
+              "label": "Bar",
+              "value": 1,
+            },
+          ]
+        }
+        validate={[Function]}
       >
-        <div
-          className="form-group"
+        <Wrapper
+          meta={Object {}}
         >
-          <ControlLabel
-            bsClass="control-label"
-            srOnly={false}
+          <FormGroup
+            bsClass="form-group"
+            validationState={null}
           >
-            <label
-              className="control-label"
-            />
-          </ControlLabel>
-          <div>
-            <FieldProvider
-              id="undefined-0"
-              key="0"
-              label="Foo"
-              render={[Function]}
-              type="checkbox"
-              value={0}
+            <div
+              className="form-group"
             >
-              <MockFieldProvider
-                id="undefined-0"
-                input={
-                  Object {
-                    "onChange": [MockFunction],
-                    "value": Array [],
-                  }
-                }
-                label="Foo"
-                render={[Function]}
-                type="checkbox"
-                value={0}
+              <ControlLabel
+                bsClass="control-label"
+                srOnly={false}
               >
-                <Checkbox
-                  aria-label="Foo"
-                  bsClass="checkbox"
-                  disabled={false}
+                <label
+                  className="control-label"
+                />
+              </ControlLabel>
+              <div>
+                <FieldProvider
                   id="undefined-0"
-                  inline={false}
+                  key="0"
                   label="Foo"
-                  onChange={[Function]}
-                  title=""
+                  render={[Function]}
                   type="checkbox"
                   value={0}
                 >
-                  <div
-                    className="checkbox"
+                  <MockFieldProvider
+                    id="undefined-0"
+                    input={
+                      Object {
+                        "onChange": [MockFunction],
+                        "value": Array [],
+                      }
+                    }
+                    label="Foo"
+                    render={[Function]}
+                    type="checkbox"
+                    value={0}
                   >
-                    <label
+                    <Checkbox
+                      aria-label="Foo"
+                      bsClass="checkbox"
+                      disabled={false}
+                      id="undefined-0"
+                      inline={false}
+                      label="Foo"
+                      onChange={[Function]}
                       title=""
+                      type="checkbox"
+                      value={0}
                     >
-                      <input
-                        aria-label="Foo"
-                        disabled={false}
-                        id="undefined-0"
-                        label="Foo"
-                        onChange={[Function]}
-                        type="checkbox"
-                        value={0}
-                      />
-                      Foo
-                    </label>
-                  </div>
-                </Checkbox>
-              </MockFieldProvider>
-            </FieldProvider>
-            <FieldProvider
-              id="undefined-1"
-              key="1"
-              label="Bar"
-              render={[Function]}
-              type="checkbox"
-              value={1}
-            >
-              <MockFieldProvider
-                id="undefined-1"
-                input={
-                  Object {
-                    "onChange": [MockFunction],
-                    "value": 1,
-                  }
-                }
-                label="Bar"
-                render={[Function]}
-                type="checkbox"
-                value={1}
-              >
-                <Checkbox
-                  aria-label="Bar"
-                  bsClass="checkbox"
-                  disabled={false}
+                      <div
+                        className="checkbox"
+                      >
+                        <label
+                          title=""
+                        >
+                          <input
+                            aria-label="Foo"
+                            disabled={false}
+                            id="undefined-0"
+                            label="Foo"
+                            onChange={[Function]}
+                            type="checkbox"
+                            value={0}
+                          />
+                          Foo
+                        </label>
+                      </div>
+                    </Checkbox>
+                  </MockFieldProvider>
+                </FieldProvider>
+                <FieldProvider
                   id="undefined-1"
-                  inline={false}
+                  key="1"
                   label="Bar"
-                  onChange={[Function]}
-                  title=""
+                  render={[Function]}
                   type="checkbox"
                   value={1}
                 >
-                  <div
-                    className="checkbox"
+                  <MockFieldProvider
+                    id="undefined-1"
+                    input={
+                      Object {
+                        "onChange": [MockFunction],
+                        "value": 1,
+                      }
+                    }
+                    label="Bar"
+                    render={[Function]}
+                    type="checkbox"
+                    value={1}
                   >
-                    <label
+                    <Checkbox
+                      aria-label="Bar"
+                      bsClass="checkbox"
+                      disabled={false}
+                      id="undefined-1"
+                      inline={false}
+                      label="Bar"
+                      onChange={[Function]}
                       title=""
+                      type="checkbox"
+                      value={1}
                     >
-                      <input
-                        aria-label="Bar"
-                        disabled={false}
-                        id="undefined-1"
-                        label="Bar"
-                        onChange={[Function]}
-                        type="checkbox"
-                        value={1}
-                      />
-                      Bar
-                    </label>
-                  </div>
-                </Checkbox>
-              </MockFieldProvider>
-            </FieldProvider>
-          </div>
-        </div>
-      </FormGroup>
-    </MockFieldProvider>
-  </FieldProvider>
+                      <div
+                        className="checkbox"
+                      >
+                        <label
+                          title=""
+                        >
+                          <input
+                            aria-label="Bar"
+                            disabled={false}
+                            id="undefined-1"
+                            label="Bar"
+                            onChange={[Function]}
+                            type="checkbox"
+                            value={1}
+                          />
+                          Bar
+                        </label>
+                      </div>
+                    </Checkbox>
+                  </MockFieldProvider>
+                </FieldProvider>
+              </div>
+            </div>
+          </FormGroup>
+        </Wrapper>
+      </MockFieldProvider>
+    </FieldProvider>
+  </MultipleChoiceList>
 </MultipleChoiceList>
 `;
 
@@ -200,7 +222,10 @@ exports[`<MultipleChoiceList /> should render in error state 1`] = `
     ]
   }
 >
-  <FieldProvider
+  <MultipleChoiceList
+    Checkbox={[Function]}
+    FieldProvider={[Function]}
+    Wrapper={[Function]}
     options={
       Array [
         Object {
@@ -213,21 +238,8 @@ exports[`<MultipleChoiceList /> should render in error state 1`] = `
         },
       ]
     }
-    validate={[Function]}
   >
-    <MockFieldProvider
-      input={
-        Object {
-          "onChange": [MockFunction],
-          "value": Array [],
-        }
-      }
-      meta={
-        Object {
-          "error": "Error message",
-          "touched": true,
-        }
-      }
+    <FieldProvider
       options={
         Array [
           Object {
@@ -242,155 +254,193 @@ exports[`<MultipleChoiceList /> should render in error state 1`] = `
       }
       validate={[Function]}
     >
-      <FormGroup
-        bsClass="form-group"
-        validationState="error"
+      <MockFieldProvider
+        input={
+          Object {
+            "onChange": [MockFunction],
+            "value": Array [],
+          }
+        }
+        meta={
+          Object {
+            "error": "Error message",
+            "touched": true,
+          }
+        }
+        options={
+          Array [
+            Object {
+              "label": "Foo",
+              "value": 0,
+            },
+            Object {
+              "label": "Bar",
+              "value": 1,
+            },
+          ]
+        }
+        validate={[Function]}
       >
-        <div
-          className="form-group has-error"
+        <Wrapper
+          meta={
+            Object {
+              "error": "Error message",
+              "touched": true,
+            }
+          }
+          showError="Error message"
         >
-          <ControlLabel
-            bsClass="control-label"
-            srOnly={false}
+          <FormGroup
+            bsClass="form-group"
+            validationState="error"
           >
-            <label
-              className="control-label"
-            />
-          </ControlLabel>
-          <div>
-            <FieldProvider
-              id="undefined-0"
-              key="0"
-              label="Foo"
-              render={[Function]}
-              type="checkbox"
-              value={0}
+            <div
+              className="form-group has-error"
             >
-              <MockFieldProvider
-                id="undefined-0"
-                input={
-                  Object {
-                    "onChange": [MockFunction],
-                    "value": Array [],
-                  }
-                }
-                label="Foo"
-                meta={
-                  Object {
-                    "error": "Error message",
-                    "touched": true,
-                  }
-                }
-                render={[Function]}
-                type="checkbox"
-                value={0}
+              <ControlLabel
+                bsClass="control-label"
+                srOnly={false}
               >
-                <Checkbox
-                  aria-label="Foo"
-                  bsClass="checkbox"
-                  disabled={false}
+                <label
+                  className="control-label"
+                />
+              </ControlLabel>
+              <div>
+                <FieldProvider
                   id="undefined-0"
-                  inline={false}
+                  key="0"
                   label="Foo"
-                  onChange={[Function]}
-                  title=""
+                  render={[Function]}
                   type="checkbox"
                   value={0}
                 >
-                  <div
-                    className="checkbox"
+                  <MockFieldProvider
+                    id="undefined-0"
+                    input={
+                      Object {
+                        "onChange": [MockFunction],
+                        "value": Array [],
+                      }
+                    }
+                    label="Foo"
+                    meta={
+                      Object {
+                        "error": "Error message",
+                        "touched": true,
+                      }
+                    }
+                    render={[Function]}
+                    type="checkbox"
+                    value={0}
                   >
-                    <label
+                    <Checkbox
+                      aria-label="Foo"
+                      bsClass="checkbox"
+                      disabled={false}
+                      id="undefined-0"
+                      inline={false}
+                      label="Foo"
+                      onChange={[Function]}
                       title=""
+                      type="checkbox"
+                      value={0}
                     >
-                      <input
-                        aria-label="Foo"
-                        disabled={false}
-                        id="undefined-0"
-                        label="Foo"
-                        onChange={[Function]}
-                        type="checkbox"
-                        value={0}
-                      />
-                      Foo
-                    </label>
-                  </div>
-                </Checkbox>
-              </MockFieldProvider>
-            </FieldProvider>
-            <FieldProvider
-              id="undefined-1"
-              key="1"
-              label="Bar"
-              render={[Function]}
-              type="checkbox"
-              value={1}
-            >
-              <MockFieldProvider
-                id="undefined-1"
-                input={
-                  Object {
-                    "onChange": [MockFunction],
-                    "value": Array [],
-                  }
-                }
-                label="Bar"
-                meta={
-                  Object {
-                    "error": "Error message",
-                    "touched": true,
-                  }
-                }
-                render={[Function]}
-                type="checkbox"
-                value={1}
-              >
-                <Checkbox
-                  aria-label="Bar"
-                  bsClass="checkbox"
-                  disabled={false}
+                      <div
+                        className="checkbox"
+                      >
+                        <label
+                          title=""
+                        >
+                          <input
+                            aria-label="Foo"
+                            disabled={false}
+                            id="undefined-0"
+                            label="Foo"
+                            onChange={[Function]}
+                            type="checkbox"
+                            value={0}
+                          />
+                          Foo
+                        </label>
+                      </div>
+                    </Checkbox>
+                  </MockFieldProvider>
+                </FieldProvider>
+                <FieldProvider
                   id="undefined-1"
-                  inline={false}
+                  key="1"
                   label="Bar"
-                  onChange={[Function]}
-                  title=""
+                  render={[Function]}
                   type="checkbox"
                   value={1}
                 >
-                  <div
-                    className="checkbox"
+                  <MockFieldProvider
+                    id="undefined-1"
+                    input={
+                      Object {
+                        "onChange": [MockFunction],
+                        "value": Array [],
+                      }
+                    }
+                    label="Bar"
+                    meta={
+                      Object {
+                        "error": "Error message",
+                        "touched": true,
+                      }
+                    }
+                    render={[Function]}
+                    type="checkbox"
+                    value={1}
                   >
-                    <label
+                    <Checkbox
+                      aria-label="Bar"
+                      bsClass="checkbox"
+                      disabled={false}
+                      id="undefined-1"
+                      inline={false}
+                      label="Bar"
+                      onChange={[Function]}
                       title=""
+                      type="checkbox"
+                      value={1}
                     >
-                      <input
-                        aria-label="Bar"
-                        disabled={false}
-                        id="undefined-1"
-                        label="Bar"
-                        onChange={[Function]}
-                        type="checkbox"
-                        value={1}
-                      />
-                      Bar
-                    </label>
-                  </div>
-                </Checkbox>
-              </MockFieldProvider>
-            </FieldProvider>
-          </div>
-          <HelpBlock
-            bsClass="help-block"
-          >
-            <span
-              className="help-block"
-            >
-              Error message
-            </span>
-          </HelpBlock>
-        </div>
-      </FormGroup>
-    </MockFieldProvider>
-  </FieldProvider>
+                      <div
+                        className="checkbox"
+                      >
+                        <label
+                          title=""
+                        >
+                          <input
+                            aria-label="Bar"
+                            disabled={false}
+                            id="undefined-1"
+                            label="Bar"
+                            onChange={[Function]}
+                            type="checkbox"
+                            value={1}
+                          />
+                          Bar
+                        </label>
+                      </div>
+                    </Checkbox>
+                  </MockFieldProvider>
+                </FieldProvider>
+              </div>
+              <HelpBlock
+                bsClass="help-block"
+              >
+                <span
+                  className="help-block"
+                >
+                  Error message
+                </span>
+              </HelpBlock>
+            </div>
+          </FormGroup>
+        </Wrapper>
+      </MockFieldProvider>
+    </FieldProvider>
+  </MultipleChoiceList>
 </MultipleChoiceList>
 `;

From f4e10fa6f5b7088acf030f0ad88a034dff8f34f3 Mon Sep 17 00:00:00 2001
From: Richard Vsiansky <r.vsia@seznam.cz>
Date: Tue, 14 Jan 2020 15:44:03 +0100
Subject: [PATCH 4/7] Convert PF4 multiple choice list to use common

---
 .../src/form-fields/multiple-choice-list.js   | 81 +++++++------------
 1 file changed, 28 insertions(+), 53 deletions(-)

diff --git a/packages/pf4-component-mapper/src/form-fields/multiple-choice-list.js b/packages/pf4-component-mapper/src/form-fields/multiple-choice-list.js
index aac04189f..212c7b173 100644
--- a/packages/pf4-component-mapper/src/form-fields/multiple-choice-list.js
+++ b/packages/pf4-component-mapper/src/form-fields/multiple-choice-list.js
@@ -1,64 +1,39 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Checkbox, FormGroup } from '@patternfly/react-core';
-import { composeValidators } from '@data-driven-forms/react-form-renderer';
+import MultipleChoiceListCommon, { wrapperProps } from '@data-driven-forms/common/src/multiple-choice-list';
 
-const propTypes = {
-  validate: PropTypes.oneOfType([ PropTypes.array, PropTypes.func ]),
-  FieldProvider: PropTypes.oneOfType([ PropTypes.node, PropTypes.func ]),
-  name: PropTypes.string.isRequired,
+const FinalCheckbox = (props) => (
+  <Checkbox isChecked={ props.checked } { ...props }/>
+);
+
+FinalCheckbox.propTypes = {
+  checked: PropTypes.bool,
 };
 
-const MultipleChoiceList = ({ validate, FieldProvider, ...props }) => (
-  <FieldProvider
+const Wrapper = ({ showError, isRequired, helperText, label, meta, children, rest }) =>(
+  <FormGroup
+    label={ label }
+    fieldId={ rest.id || rest.key || rest.name }
+    isValid={ !showError }
+    isRequired={ isRequired }
+    helperText={ helperText }
+    helperTextInvalid={ meta.error }
+  >
+    { children }
+  </FormGroup>
+);
+
+Wrapper.propTypes = {
+  ...wrapperProps,
+};
+
+const MultipleChoiceList = (props) => (
+  <MultipleChoiceListCommon
     { ...props }
-    validate={ composeValidators(props.validate || []) }
-    render={ ({
-      label,
-      isRequired,
-      helperText,
-      meta,
-      options,
-      isDisabled,
-      isReadOnly,
-      ...rest
-    }) => {
-      const { error, touched } = meta;
-      const showError = touched && error;
-      const groupValues = rest.input.value;
-      return (
-        <FormGroup label={ label } fieldId={ rest.id || rest.key || rest.name } isValid={ showError } >
-          { options.map(option =>
-            (<FieldProvider
-              formOptions={ rest.formOptions }
-              id={ `${rest.id}-${option.value}` }
-              key={ option.value }
-              { ...option }
-              name={ props.name }
-              type="checkbox"
-              render={ ({ input, meta, formOptions, componentType, ...rest }) => {
-                const indexValue = groupValues.indexOf(input.value);
-                return (
-                  <Checkbox
-                    label={ rest.label }
-                    aria-label={ option['aria-label'] || option.label }
-                    isChecked={ input.checked }
-                    { ...input }
-                    { ...rest }
-                    isDisabled={ isDisabled || isReadOnly }
-                    onChange={ () => (indexValue === -1
-                      ? input.onChange([ ...groupValues, input.value ])
-                      : input.onChange([ ...groupValues.slice(0, indexValue), ...groupValues.slice(indexValue + 1) ])) }
-                  />
-                );
-              } }
-            />)) }
-        </FormGroup>
-      );
-    } }
+    Wrapper={ Wrapper }
+    Checkbox={ FinalCheckbox }
   />
 );
 
-MultipleChoiceList.propTypes = propTypes;
-
 export default MultipleChoiceList;

From bc38f99d96af9327c1825b823887645f22d9cd78 Mon Sep 17 00:00:00 2001
From: Richard Vsiansky <r.vsia@seznam.cz>
Date: Tue, 14 Jan 2020 15:45:32 +0100
Subject: [PATCH 5/7] Update snaps

---
 .../multiple-choice-list.test.js.snap         | 229 ++++---
 .../__snapshots__/form-fields.test.js.snap    | 640 +++++++++++-------
 2 files changed, 553 insertions(+), 316 deletions(-)

diff --git a/packages/pf3-component-mapper/src/tests/__snapshots__/multiple-choice-list.test.js.snap b/packages/pf3-component-mapper/src/tests/__snapshots__/multiple-choice-list.test.js.snap
index 3cd54a750..7b956ba9a 100644
--- a/packages/pf3-component-mapper/src/tests/__snapshots__/multiple-choice-list.test.js.snap
+++ b/packages/pf3-component-mapper/src/tests/__snapshots__/multiple-choice-list.test.js.snap
@@ -46,6 +46,7 @@ exports[`<MultipleChoiceList /> should render correctly 1`] = `
           },
         ]
       }
+      render={[Function]}
       validate={[Function]}
     >
       <MockFieldProvider
@@ -67,10 +68,21 @@ exports[`<MultipleChoiceList /> should render correctly 1`] = `
             },
           ]
         }
+        render={[Function]}
         validate={[Function]}
       >
         <Wrapper
           meta={Object {}}
+          rest={
+            Object {
+              "children": undefined,
+              "input": Object {
+                "onChange": [MockFunction],
+                "value": Array [],
+              },
+              "validate": [Function],
+            }
+          }
         >
           <FormGroup
             bsClass="form-group"
@@ -109,37 +121,44 @@ exports[`<MultipleChoiceList /> should render correctly 1`] = `
                     type="checkbox"
                     value={0}
                   >
-                    <Checkbox
+                    <FinalCheckbox
                       aria-label="Foo"
-                      bsClass="checkbox"
-                      disabled={false}
                       id="undefined-0"
-                      inline={false}
                       label="Foo"
                       onChange={[Function]}
-                      title=""
                       type="checkbox"
                       value={0}
                     >
-                      <div
-                        className="checkbox"
+                      <Checkbox
+                        aria-label="Foo"
+                        bsClass="checkbox"
+                        disabled={false}
+                        id="undefined-0"
+                        inline={false}
+                        onChange={[Function]}
+                        title=""
+                        type="checkbox"
+                        value={0}
                       >
-                        <label
-                          title=""
+                        <div
+                          className="checkbox"
                         >
-                          <input
-                            aria-label="Foo"
-                            disabled={false}
-                            id="undefined-0"
-                            label="Foo"
-                            onChange={[Function]}
-                            type="checkbox"
-                            value={0}
-                          />
-                          Foo
-                        </label>
-                      </div>
-                    </Checkbox>
+                          <label
+                            title=""
+                          >
+                            <input
+                              aria-label="Foo"
+                              disabled={false}
+                              id="undefined-0"
+                              onChange={[Function]}
+                              type="checkbox"
+                              value={0}
+                            />
+                            Foo
+                          </label>
+                        </div>
+                      </Checkbox>
+                    </FinalCheckbox>
                   </MockFieldProvider>
                 </FieldProvider>
                 <FieldProvider
@@ -163,37 +182,44 @@ exports[`<MultipleChoiceList /> should render correctly 1`] = `
                     type="checkbox"
                     value={1}
                   >
-                    <Checkbox
+                    <FinalCheckbox
                       aria-label="Bar"
-                      bsClass="checkbox"
-                      disabled={false}
                       id="undefined-1"
-                      inline={false}
                       label="Bar"
                       onChange={[Function]}
-                      title=""
                       type="checkbox"
                       value={1}
                     >
-                      <div
-                        className="checkbox"
+                      <Checkbox
+                        aria-label="Bar"
+                        bsClass="checkbox"
+                        disabled={false}
+                        id="undefined-1"
+                        inline={false}
+                        onChange={[Function]}
+                        title=""
+                        type="checkbox"
+                        value={1}
                       >
-                        <label
-                          title=""
+                        <div
+                          className="checkbox"
                         >
-                          <input
-                            aria-label="Bar"
-                            disabled={false}
-                            id="undefined-1"
-                            label="Bar"
-                            onChange={[Function]}
-                            type="checkbox"
-                            value={1}
-                          />
-                          Bar
-                        </label>
-                      </div>
-                    </Checkbox>
+                          <label
+                            title=""
+                          >
+                            <input
+                              aria-label="Bar"
+                              disabled={false}
+                              id="undefined-1"
+                              onChange={[Function]}
+                              type="checkbox"
+                              value={1}
+                            />
+                            Bar
+                          </label>
+                        </div>
+                      </Checkbox>
+                    </FinalCheckbox>
                   </MockFieldProvider>
                 </FieldProvider>
               </div>
@@ -252,6 +278,7 @@ exports[`<MultipleChoiceList /> should render in error state 1`] = `
           },
         ]
       }
+      render={[Function]}
       validate={[Function]}
     >
       <MockFieldProvider
@@ -279,15 +306,27 @@ exports[`<MultipleChoiceList /> should render in error state 1`] = `
             },
           ]
         }
+        render={[Function]}
         validate={[Function]}
       >
         <Wrapper
+          error="Error message"
           meta={
             Object {
               "error": "Error message",
               "touched": true,
             }
           }
+          rest={
+            Object {
+              "children": undefined,
+              "input": Object {
+                "onChange": [MockFunction],
+                "value": Array [],
+              },
+              "validate": [Function],
+            }
+          }
           showError="Error message"
         >
           <FormGroup
@@ -333,37 +372,44 @@ exports[`<MultipleChoiceList /> should render in error state 1`] = `
                     type="checkbox"
                     value={0}
                   >
-                    <Checkbox
+                    <FinalCheckbox
                       aria-label="Foo"
-                      bsClass="checkbox"
-                      disabled={false}
                       id="undefined-0"
-                      inline={false}
                       label="Foo"
                       onChange={[Function]}
-                      title=""
                       type="checkbox"
                       value={0}
                     >
-                      <div
-                        className="checkbox"
+                      <Checkbox
+                        aria-label="Foo"
+                        bsClass="checkbox"
+                        disabled={false}
+                        id="undefined-0"
+                        inline={false}
+                        onChange={[Function]}
+                        title=""
+                        type="checkbox"
+                        value={0}
                       >
-                        <label
-                          title=""
+                        <div
+                          className="checkbox"
                         >
-                          <input
-                            aria-label="Foo"
-                            disabled={false}
-                            id="undefined-0"
-                            label="Foo"
-                            onChange={[Function]}
-                            type="checkbox"
-                            value={0}
-                          />
-                          Foo
-                        </label>
-                      </div>
-                    </Checkbox>
+                          <label
+                            title=""
+                          >
+                            <input
+                              aria-label="Foo"
+                              disabled={false}
+                              id="undefined-0"
+                              onChange={[Function]}
+                              type="checkbox"
+                              value={0}
+                            />
+                            Foo
+                          </label>
+                        </div>
+                      </Checkbox>
+                    </FinalCheckbox>
                   </MockFieldProvider>
                 </FieldProvider>
                 <FieldProvider
@@ -393,37 +439,44 @@ exports[`<MultipleChoiceList /> should render in error state 1`] = `
                     type="checkbox"
                     value={1}
                   >
-                    <Checkbox
+                    <FinalCheckbox
                       aria-label="Bar"
-                      bsClass="checkbox"
-                      disabled={false}
                       id="undefined-1"
-                      inline={false}
                       label="Bar"
                       onChange={[Function]}
-                      title=""
                       type="checkbox"
                       value={1}
                     >
-                      <div
-                        className="checkbox"
+                      <Checkbox
+                        aria-label="Bar"
+                        bsClass="checkbox"
+                        disabled={false}
+                        id="undefined-1"
+                        inline={false}
+                        onChange={[Function]}
+                        title=""
+                        type="checkbox"
+                        value={1}
                       >
-                        <label
-                          title=""
+                        <div
+                          className="checkbox"
                         >
-                          <input
-                            aria-label="Bar"
-                            disabled={false}
-                            id="undefined-1"
-                            label="Bar"
-                            onChange={[Function]}
-                            type="checkbox"
-                            value={1}
-                          />
-                          Bar
-                        </label>
-                      </div>
-                    </Checkbox>
+                          <label
+                            title=""
+                          >
+                            <input
+                              aria-label="Bar"
+                              disabled={false}
+                              id="undefined-1"
+                              onChange={[Function]}
+                              type="checkbox"
+                              value={1}
+                            />
+                            Bar
+                          </label>
+                        </div>
+                      </Checkbox>
+                    </FinalCheckbox>
                   </MockFieldProvider>
                 </FieldProvider>
               </div>
diff --git a/packages/pf4-component-mapper/src/tests/__snapshots__/form-fields.test.js.snap b/packages/pf4-component-mapper/src/tests/__snapshots__/form-fields.test.js.snap
index fd453d3f1..3ca7a8bfe 100644
--- a/packages/pf4-component-mapper/src/tests/__snapshots__/form-fields.test.js.snap
+++ b/packages/pf4-component-mapper/src/tests/__snapshots__/form-fields.test.js.snap
@@ -200,7 +200,10 @@ exports[`FormFields should render Checkbox with options correctly 1`] = `
         ]
       }
     >
-      <FieldProvider
+      <MultipleChoiceList
+        Checkbox={[Function]}
+        FieldProvider={[Function]}
+        Wrapper={[Function]}
         componentType="checkbox"
         id="someIdKey"
         input={
@@ -232,165 +235,253 @@ exports[`FormFields should render Checkbox with options correctly 1`] = `
             },
           ]
         }
-        render={[Function]}
-        validate={[Function]}
       >
-        <div>
-          <FormGroup
-            fieldId="someIdKey"
-            isValid={false}
-          >
-            <div
-              className="pf-c-form__group"
+        <FieldProvider
+          componentType="checkbox"
+          id="someIdKey"
+          input={
+            Object {
+              "name": "Name of the field",
+              "value": "",
+            }
+          }
+          meta={
+            Object {
+              "error": false,
+              "touched": false,
+            }
+          }
+          name="Name of the field"
+          options={
+            Array [
+              Object {
+                "label": "One",
+                "value": "1",
+              },
+              Object {
+                "label": "Two",
+                "value": "2",
+              },
+              Object {
+                "label": "Three",
+                "value": "3",
+              },
+            ]
+          }
+          render={[Function]}
+          validate={[Function]}
+        >
+          <div>
+            <Wrapper
+              error={false}
+              meta={
+                Object {
+                  "error": false,
+                  "touched": false,
+                }
+              }
+              rest={
+                Object {
+                  "componentType": "checkbox",
+                  "id": "someIdKey",
+                  "input": Object {
+                    "name": "Name of the field",
+                    "value": "",
+                  },
+                  "name": "Name of the field",
+                  "validate": [Function],
+                }
+              }
+              showError={false}
             >
-              <FieldProvider
-                id="someIdKey-1"
-                key="1"
-                label="One"
-                name="Name of the field"
-                render={[Function]}
-                type="checkbox"
-                value="1"
+              <FormGroup
+                fieldId="someIdKey"
+                helperTextInvalid={false}
+                isValid={true}
               >
-                <div>
-                  <Checkbox
-                    aria-label="One"
-                    className=""
+                <div
+                  className="pf-c-form__group"
+                >
+                  <FieldProvider
                     id="someIdKey-1"
-                    isChecked={false}
-                    isDisabled={false}
-                    isValid={true}
+                    key="1"
                     label="One"
                     name="Name of the field"
-                    onChange={[Function]}
+                    render={[Function]}
                     type="checkbox"
                     value="1"
                   >
-                    <div
-                      className="pf-c-check"
-                    >
-                      <input
-                        aria-invalid={false}
+                    <div>
+                      <FinalCheckbox
                         aria-label="One"
-                        checked={false}
-                        className="pf-c-check__input"
-                        disabled={false}
                         id="someIdKey-1"
+                        label="One"
                         name="Name of the field"
                         onChange={[Function]}
                         type="checkbox"
                         value="1"
-                      />
-                      <label
-                        className="pf-c-check__label"
-                        htmlFor="someIdKey-1"
                       >
-                        One
-                      </label>
+                        <Checkbox
+                          aria-label="One"
+                          className=""
+                          id="someIdKey-1"
+                          isChecked={false}
+                          isDisabled={false}
+                          isValid={true}
+                          label="One"
+                          name="Name of the field"
+                          onChange={[Function]}
+                          type="checkbox"
+                          value="1"
+                        >
+                          <div
+                            className="pf-c-check"
+                          >
+                            <input
+                              aria-invalid={false}
+                              aria-label="One"
+                              checked={false}
+                              className="pf-c-check__input"
+                              disabled={false}
+                              id="someIdKey-1"
+                              name="Name of the field"
+                              onChange={[Function]}
+                              type="checkbox"
+                              value="1"
+                            />
+                            <label
+                              className="pf-c-check__label"
+                              htmlFor="someIdKey-1"
+                            >
+                              One
+                            </label>
+                          </div>
+                        </Checkbox>
+                      </FinalCheckbox>
                     </div>
-                  </Checkbox>
-                </div>
-              </FieldProvider>
-              <FieldProvider
-                id="someIdKey-2"
-                key="2"
-                label="Two"
-                name="Name of the field"
-                render={[Function]}
-                type="checkbox"
-                value="2"
-              >
-                <div>
-                  <Checkbox
-                    aria-label="Two"
-                    className=""
+                  </FieldProvider>
+                  <FieldProvider
                     id="someIdKey-2"
-                    isChecked={false}
-                    isDisabled={false}
-                    isValid={true}
+                    key="2"
                     label="Two"
                     name="Name of the field"
-                    onChange={[Function]}
+                    render={[Function]}
                     type="checkbox"
                     value="2"
                   >
-                    <div
-                      className="pf-c-check"
-                    >
-                      <input
-                        aria-invalid={false}
+                    <div>
+                      <FinalCheckbox
                         aria-label="Two"
-                        checked={false}
-                        className="pf-c-check__input"
-                        disabled={false}
                         id="someIdKey-2"
+                        label="Two"
                         name="Name of the field"
                         onChange={[Function]}
                         type="checkbox"
                         value="2"
-                      />
-                      <label
-                        className="pf-c-check__label"
-                        htmlFor="someIdKey-2"
                       >
-                        Two
-                      </label>
+                        <Checkbox
+                          aria-label="Two"
+                          className=""
+                          id="someIdKey-2"
+                          isChecked={false}
+                          isDisabled={false}
+                          isValid={true}
+                          label="Two"
+                          name="Name of the field"
+                          onChange={[Function]}
+                          type="checkbox"
+                          value="2"
+                        >
+                          <div
+                            className="pf-c-check"
+                          >
+                            <input
+                              aria-invalid={false}
+                              aria-label="Two"
+                              checked={false}
+                              className="pf-c-check__input"
+                              disabled={false}
+                              id="someIdKey-2"
+                              name="Name of the field"
+                              onChange={[Function]}
+                              type="checkbox"
+                              value="2"
+                            />
+                            <label
+                              className="pf-c-check__label"
+                              htmlFor="someIdKey-2"
+                            >
+                              Two
+                            </label>
+                          </div>
+                        </Checkbox>
+                      </FinalCheckbox>
                     </div>
-                  </Checkbox>
-                </div>
-              </FieldProvider>
-              <FieldProvider
-                id="someIdKey-3"
-                key="3"
-                label="Three"
-                name="Name of the field"
-                render={[Function]}
-                type="checkbox"
-                value="3"
-              >
-                <div>
-                  <Checkbox
-                    aria-label="Three"
-                    className=""
+                  </FieldProvider>
+                  <FieldProvider
                     id="someIdKey-3"
-                    isChecked={false}
-                    isDisabled={false}
-                    isValid={true}
+                    key="3"
                     label="Three"
                     name="Name of the field"
-                    onChange={[Function]}
+                    render={[Function]}
                     type="checkbox"
                     value="3"
                   >
-                    <div
-                      className="pf-c-check"
-                    >
-                      <input
-                        aria-invalid={false}
+                    <div>
+                      <FinalCheckbox
                         aria-label="Three"
-                        checked={false}
-                        className="pf-c-check__input"
-                        disabled={false}
                         id="someIdKey-3"
+                        label="Three"
                         name="Name of the field"
                         onChange={[Function]}
                         type="checkbox"
                         value="3"
-                      />
-                      <label
-                        className="pf-c-check__label"
-                        htmlFor="someIdKey-3"
                       >
-                        Three
-                      </label>
+                        <Checkbox
+                          aria-label="Three"
+                          className=""
+                          id="someIdKey-3"
+                          isChecked={false}
+                          isDisabled={false}
+                          isValid={true}
+                          label="Three"
+                          name="Name of the field"
+                          onChange={[Function]}
+                          type="checkbox"
+                          value="3"
+                        >
+                          <div
+                            className="pf-c-check"
+                          >
+                            <input
+                              aria-invalid={false}
+                              aria-label="Three"
+                              checked={false}
+                              className="pf-c-check__input"
+                              disabled={false}
+                              id="someIdKey-3"
+                              name="Name of the field"
+                              onChange={[Function]}
+                              type="checkbox"
+                              value="3"
+                            />
+                            <label
+                              className="pf-c-check__label"
+                              htmlFor="someIdKey-3"
+                            >
+                              Three
+                            </label>
+                          </div>
+                        </Checkbox>
+                      </FinalCheckbox>
                     </div>
-                  </Checkbox>
+                  </FieldProvider>
                 </div>
-              </FieldProvider>
-            </div>
-          </FormGroup>
-        </div>
-      </FieldProvider>
+              </FormGroup>
+            </Wrapper>
+          </div>
+        </FieldProvider>
+      </MultipleChoiceList>
     </MultipleChoiceList>
   </FieldInterface>
 </CheckboxField>
@@ -1406,7 +1497,10 @@ exports[`FormFields should render disabled Checkbox with options correctly 1`] =
         ]
       }
     >
-      <FieldProvider
+      <MultipleChoiceList
+        Checkbox={[Function]}
+        FieldProvider={[Function]}
+        Wrapper={[Function]}
         componentType="checkbox"
         disabled={true}
         id="someIdKey"
@@ -1439,165 +1533,255 @@ exports[`FormFields should render disabled Checkbox with options correctly 1`] =
             },
           ]
         }
-        render={[Function]}
-        validate={[Function]}
       >
-        <div>
-          <FormGroup
-            fieldId="someIdKey"
-            isValid={false}
-          >
-            <div
-              className="pf-c-form__group"
+        <FieldProvider
+          componentType="checkbox"
+          disabled={true}
+          id="someIdKey"
+          input={
+            Object {
+              "name": "Name of the field",
+              "value": "",
+            }
+          }
+          meta={
+            Object {
+              "error": false,
+              "touched": false,
+            }
+          }
+          name="Name of the field"
+          options={
+            Array [
+              Object {
+                "label": "One",
+                "value": "1",
+              },
+              Object {
+                "label": "Two",
+                "value": "2",
+              },
+              Object {
+                "label": "Three",
+                "value": "3",
+              },
+            ]
+          }
+          render={[Function]}
+          validate={[Function]}
+        >
+          <div>
+            <Wrapper
+              error={false}
+              meta={
+                Object {
+                  "error": false,
+                  "touched": false,
+                }
+              }
+              rest={
+                Object {
+                  "componentType": "checkbox",
+                  "disabled": true,
+                  "id": "someIdKey",
+                  "input": Object {
+                    "name": "Name of the field",
+                    "value": "",
+                  },
+                  "name": "Name of the field",
+                  "validate": [Function],
+                }
+              }
+              showError={false}
             >
-              <FieldProvider
-                id="someIdKey-1"
-                key="1"
-                label="One"
-                name="Name of the field"
-                render={[Function]}
-                type="checkbox"
-                value="1"
+              <FormGroup
+                fieldId="someIdKey"
+                helperTextInvalid={false}
+                isValid={true}
               >
-                <div>
-                  <Checkbox
-                    aria-label="One"
-                    className=""
+                <div
+                  className="pf-c-form__group"
+                >
+                  <FieldProvider
                     id="someIdKey-1"
-                    isChecked={false}
-                    isDisabled={false}
-                    isValid={true}
+                    key="1"
                     label="One"
                     name="Name of the field"
-                    onChange={[Function]}
+                    render={[Function]}
                     type="checkbox"
                     value="1"
                   >
-                    <div
-                      className="pf-c-check"
-                    >
-                      <input
-                        aria-invalid={false}
+                    <div>
+                      <FinalCheckbox
                         aria-label="One"
-                        checked={false}
-                        className="pf-c-check__input"
-                        disabled={false}
                         id="someIdKey-1"
+                        label="One"
                         name="Name of the field"
                         onChange={[Function]}
                         type="checkbox"
                         value="1"
-                      />
-                      <label
-                        className="pf-c-check__label"
-                        htmlFor="someIdKey-1"
                       >
-                        One
-                      </label>
+                        <Checkbox
+                          aria-label="One"
+                          className=""
+                          id="someIdKey-1"
+                          isChecked={false}
+                          isDisabled={false}
+                          isValid={true}
+                          label="One"
+                          name="Name of the field"
+                          onChange={[Function]}
+                          type="checkbox"
+                          value="1"
+                        >
+                          <div
+                            className="pf-c-check"
+                          >
+                            <input
+                              aria-invalid={false}
+                              aria-label="One"
+                              checked={false}
+                              className="pf-c-check__input"
+                              disabled={false}
+                              id="someIdKey-1"
+                              name="Name of the field"
+                              onChange={[Function]}
+                              type="checkbox"
+                              value="1"
+                            />
+                            <label
+                              className="pf-c-check__label"
+                              htmlFor="someIdKey-1"
+                            >
+                              One
+                            </label>
+                          </div>
+                        </Checkbox>
+                      </FinalCheckbox>
                     </div>
-                  </Checkbox>
-                </div>
-              </FieldProvider>
-              <FieldProvider
-                id="someIdKey-2"
-                key="2"
-                label="Two"
-                name="Name of the field"
-                render={[Function]}
-                type="checkbox"
-                value="2"
-              >
-                <div>
-                  <Checkbox
-                    aria-label="Two"
-                    className=""
+                  </FieldProvider>
+                  <FieldProvider
                     id="someIdKey-2"
-                    isChecked={false}
-                    isDisabled={false}
-                    isValid={true}
+                    key="2"
                     label="Two"
                     name="Name of the field"
-                    onChange={[Function]}
+                    render={[Function]}
                     type="checkbox"
                     value="2"
                   >
-                    <div
-                      className="pf-c-check"
-                    >
-                      <input
-                        aria-invalid={false}
+                    <div>
+                      <FinalCheckbox
                         aria-label="Two"
-                        checked={false}
-                        className="pf-c-check__input"
-                        disabled={false}
                         id="someIdKey-2"
+                        label="Two"
                         name="Name of the field"
                         onChange={[Function]}
                         type="checkbox"
                         value="2"
-                      />
-                      <label
-                        className="pf-c-check__label"
-                        htmlFor="someIdKey-2"
                       >
-                        Two
-                      </label>
+                        <Checkbox
+                          aria-label="Two"
+                          className=""
+                          id="someIdKey-2"
+                          isChecked={false}
+                          isDisabled={false}
+                          isValid={true}
+                          label="Two"
+                          name="Name of the field"
+                          onChange={[Function]}
+                          type="checkbox"
+                          value="2"
+                        >
+                          <div
+                            className="pf-c-check"
+                          >
+                            <input
+                              aria-invalid={false}
+                              aria-label="Two"
+                              checked={false}
+                              className="pf-c-check__input"
+                              disabled={false}
+                              id="someIdKey-2"
+                              name="Name of the field"
+                              onChange={[Function]}
+                              type="checkbox"
+                              value="2"
+                            />
+                            <label
+                              className="pf-c-check__label"
+                              htmlFor="someIdKey-2"
+                            >
+                              Two
+                            </label>
+                          </div>
+                        </Checkbox>
+                      </FinalCheckbox>
                     </div>
-                  </Checkbox>
-                </div>
-              </FieldProvider>
-              <FieldProvider
-                id="someIdKey-3"
-                key="3"
-                label="Three"
-                name="Name of the field"
-                render={[Function]}
-                type="checkbox"
-                value="3"
-              >
-                <div>
-                  <Checkbox
-                    aria-label="Three"
-                    className=""
+                  </FieldProvider>
+                  <FieldProvider
                     id="someIdKey-3"
-                    isChecked={false}
-                    isDisabled={false}
-                    isValid={true}
+                    key="3"
                     label="Three"
                     name="Name of the field"
-                    onChange={[Function]}
+                    render={[Function]}
                     type="checkbox"
                     value="3"
                   >
-                    <div
-                      className="pf-c-check"
-                    >
-                      <input
-                        aria-invalid={false}
+                    <div>
+                      <FinalCheckbox
                         aria-label="Three"
-                        checked={false}
-                        className="pf-c-check__input"
-                        disabled={false}
                         id="someIdKey-3"
+                        label="Three"
                         name="Name of the field"
                         onChange={[Function]}
                         type="checkbox"
                         value="3"
-                      />
-                      <label
-                        className="pf-c-check__label"
-                        htmlFor="someIdKey-3"
                       >
-                        Three
-                      </label>
+                        <Checkbox
+                          aria-label="Three"
+                          className=""
+                          id="someIdKey-3"
+                          isChecked={false}
+                          isDisabled={false}
+                          isValid={true}
+                          label="Three"
+                          name="Name of the field"
+                          onChange={[Function]}
+                          type="checkbox"
+                          value="3"
+                        >
+                          <div
+                            className="pf-c-check"
+                          >
+                            <input
+                              aria-invalid={false}
+                              aria-label="Three"
+                              checked={false}
+                              className="pf-c-check__input"
+                              disabled={false}
+                              id="someIdKey-3"
+                              name="Name of the field"
+                              onChange={[Function]}
+                              type="checkbox"
+                              value="3"
+                            />
+                            <label
+                              className="pf-c-check__label"
+                              htmlFor="someIdKey-3"
+                            >
+                              Three
+                            </label>
+                          </div>
+                        </Checkbox>
+                      </FinalCheckbox>
                     </div>
-                  </Checkbox>
+                  </FieldProvider>
                 </div>
-              </FieldProvider>
-            </div>
-          </FormGroup>
-        </div>
-      </FieldProvider>
+              </FormGroup>
+            </Wrapper>
+          </div>
+        </FieldProvider>
+      </MultipleChoiceList>
     </MultipleChoiceList>
   </FieldInterface>
 </CheckboxField>

From 357ec55f550c1fe383dca359bcee149d65da3ffd Mon Sep 17 00:00:00 2001
From: Richard Vsiansky <r.vsia@seznam.cz>
Date: Tue, 14 Jan 2020 15:53:16 +0100
Subject: [PATCH 6/7] Convert MUI multiple choice list to use common

---
 packages/common/src/multiple-choice-list.js   |   1 +
 .../src/form-fields/multiple-choice-list.js   | 103 ++++++++----------
 2 files changed, 44 insertions(+), 60 deletions(-)

diff --git a/packages/common/src/multiple-choice-list.js b/packages/common/src/multiple-choice-list.js
index ab85e9fe4..4289c91ea 100644
--- a/packages/common/src/multiple-choice-list.js
+++ b/packages/common/src/multiple-choice-list.js
@@ -31,6 +31,7 @@ const MultipleChoiceList = ({ validate, FieldProvider, Wrapper, Checkbox, ...pro
           meta={ meta }
           description={ description }
           rest={ rest }
+          error={ error }
         >
           { options.map(option =>
             (<FieldProvider
diff --git a/packages/mui-component-mapper/src/form-fields/multiple-choice-list.js b/packages/mui-component-mapper/src/form-fields/multiple-choice-list.js
index 2dfdb8656..e6090d993 100644
--- a/packages/mui-component-mapper/src/form-fields/multiple-choice-list.js
+++ b/packages/mui-component-mapper/src/form-fields/multiple-choice-list.js
@@ -1,5 +1,6 @@
 import React from 'react';
-import { composeValidators } from '@data-driven-forms/react-form-renderer';
+import PropTypes from 'prop-types';
+
 import Grid from '@material-ui/core/Grid';
 import Checkbox from '@material-ui/core/Checkbox';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
@@ -8,65 +9,47 @@ import FormGroup from '@material-ui/core/FormGroup';
 import FormControl from '@material-ui/core/FormControl';
 import FormHelperText from '@material-ui/core/FormHelperText';
 
-const MultipleChoiceList = ({ validate, FieldProvider, ...props }) => (
-  <FieldProvider { ...props } validate={ composeValidators(props.validate || []) }>
-    { ({
-      label,
-      isRequired,
-      helperText,
-      meta,
-      options,
-      isDisabled,
-      formOptions,
-      componentType,
-      ...rest
-    }) => {
-      const { error, touched } = meta;
-      const showError = touched && error;
-      const groupValues = Array.isArray(rest.input.value) ? rest.input.value : [];
-      return (
-        <Grid container >
-          <FormControl component="fieldset" >
-            <FormLabel>{ label }</FormLabel>
-            <FormGroup>
-              { options.map(option =>
-                (<FieldProvider
-                  { ...rest }
-                  id={ `${rest.id}-${option.value}` }
-                  key={ option.value }
-                  { ...option }
-                  name={ props.name }
-                  type="checkbox"
-                  render={ ({ input, meta, value, formOptions, ...rest }) => {
-                    const indexValue = groupValues.indexOf(option.value);
-                    return (
-                      <FormControlLabel
-                        control={ <Checkbox
-                          label={ rest.label }
-                          aria-label={ option['aria-label'] || option.label }
-                          { ...input }
-                          { ...rest }
-                          checked={ indexValue !== -1 }
-                          disabled={ isDisabled }
-                          onChange={ () => {
-                            return (indexValue === -1
-                              ? input.onChange([ ...groupValues, option.value ])
-                              : input.onChange([ ...groupValues.slice(0, indexValue), ...groupValues.slice(indexValue + 1) ]));} }
-                        >
-                          { option.label }
-                        </Checkbox> }
-                        label={ option.label }
-                      />
-                    );
-                  } }
-                />)) }
-            </FormGroup>
-            <FormHelperText>{ showError ? error : null }</FormHelperText>
-          </FormControl>
-        </Grid>
-      );
-    } }
-  </FieldProvider>
+import MultipleChoiceListCommon, { wrapperProps } from '@data-driven-forms/common/src/multiple-choice-list';
+
+const FinalCheckbox = (props) => (
+  <FormControlLabel
+    control={ <Checkbox
+      { ...props }
+      disabled={ props.isDisabled }
+    >
+      { props.label }
+    </Checkbox> }
+    label={ props.label }
+  />
+);
+
+FinalCheckbox.propTypes = {
+  isDisabled: PropTypes.bool,
+  label: PropTypes.node,
+};
+
+const Wrapper = ({ showError, label, error, children }) =>(
+  <Grid container >
+    <FormControl component="fieldset" >
+      <FormLabel>{ label }</FormLabel>
+      <FormGroup>
+        { children }
+      </FormGroup>
+      <FormHelperText>{ showError ? error : null }</FormHelperText>
+    </FormControl>
+  </Grid>
+);
+
+Wrapper.propTypes = {
+  ...wrapperProps,
+};
+
+const MultipleChoiceList = (props) => (
+  <MultipleChoiceListCommon
+    { ...props }
+    Wrapper={ Wrapper }
+    Checkbox={ FinalCheckbox }
+  />
 );
 
 export default MultipleChoiceList;

From 8beb3df12999a98567fb0478c149e501ca08389e Mon Sep 17 00:00:00 2001
From: Richard Vsiansky <r.vsia@seznam.cz>
Date: Tue, 14 Jan 2020 16:55:34 +0100
Subject: [PATCH 7/7] Add tests fo MutlipleChoice list MUI

---
 .../src/form-fields/multiple-choice-list.js   |  8 +-
 .../src/tests/multiple-choice-list.test.js    | 85 +++++++++++++++++++
 2 files changed, 89 insertions(+), 4 deletions(-)
 create mode 100644 packages/mui-component-mapper/src/tests/multiple-choice-list.test.js

diff --git a/packages/mui-component-mapper/src/form-fields/multiple-choice-list.js b/packages/mui-component-mapper/src/form-fields/multiple-choice-list.js
index e6090d993..43ba58a19 100644
--- a/packages/mui-component-mapper/src/form-fields/multiple-choice-list.js
+++ b/packages/mui-component-mapper/src/form-fields/multiple-choice-list.js
@@ -11,15 +11,15 @@ import FormHelperText from '@material-ui/core/FormHelperText';
 
 import MultipleChoiceListCommon, { wrapperProps } from '@data-driven-forms/common/src/multiple-choice-list';
 
-const FinalCheckbox = (props) => (
+const FinalCheckbox = ({ isDisabled, label, ...props }) => (
   <FormControlLabel
     control={ <Checkbox
       { ...props }
-      disabled={ props.isDisabled }
+      disabled={ isDisabled }
     >
-      { props.label }
+      { label }
     </Checkbox> }
-    label={ props.label }
+    label={ label }
   />
 );
 
diff --git a/packages/mui-component-mapper/src/tests/multiple-choice-list.test.js b/packages/mui-component-mapper/src/tests/multiple-choice-list.test.js
new file mode 100644
index 000000000..c92f8ff3a
--- /dev/null
+++ b/packages/mui-component-mapper/src/tests/multiple-choice-list.test.js
@@ -0,0 +1,85 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Grid from '@material-ui/core/Grid';
+import Checkbox from '@material-ui/core/Checkbox';
+import FormControlLabel from '@material-ui/core/FormControlLabel';
+import FormLabel from '@material-ui/core/FormLabel';
+import FormGroup from '@material-ui/core/FormGroup';
+import FormControl from '@material-ui/core/FormControl';
+import FormHelperText from '@material-ui/core/FormHelperText';
+
+import MultipleChoiceList from '../form-fields/multiple-choice-list';
+import MockFieldProvider from '../../../../__mocks__/mock-field-provider';
+
+describe('<MultipleChoiceList />', () => {
+  let initialProps;
+  let changeSpy = jest.fn();
+  beforeEach(() => {
+    initialProps = {
+      FieldProvider: props => <MockFieldProvider { ...props } input={{ onChange: changeSpy, value: props.value || []}} />,
+      options: [{
+        label: 'Foo',
+        value: 0,
+      }, {
+        label: 'Bar',
+        value: 1,
+      }],
+    };
+  });
+
+  afterEach(() => {
+    changeSpy.mockReset();
+  });
+
+  it('should render correctly', () => {
+    const wrapper = mount(<MultipleChoiceList { ...initialProps } />);
+
+    expect(wrapper.find(FormControl)).toHaveLength(1);
+    expect(wrapper.find(FormGroup)).toHaveLength(1);
+    expect(wrapper.find(FormLabel)).toHaveLength(1);
+    expect(wrapper.find(FormControlLabel)).toHaveLength(initialProps.options.length);
+    expect(wrapper.find(Grid)).toHaveLength(1);
+    expect(wrapper.find(Checkbox)).toHaveLength(initialProps.options.length);
+  });
+
+  it('should call FieldProvider on change method', () => {
+    const wrapper = mount(<MultipleChoiceList { ...initialProps } />);
+
+    wrapper.find('input').last().simulate('change', { target: { checked: true }});
+    expect(changeSpy).toHaveBeenCalledWith([ 1 ]);
+  });
+
+  it('should call FieldProvider on change method and remove option value form all values', () => {
+    const wrapper = mount(
+      <MultipleChoiceList
+        { ...initialProps }
+        FieldProvider={ props => <MockFieldProvider { ...props } input={{ onChange: changeSpy, value: props.value || [ 1 ]}} /> }
+      />
+    );
+
+    wrapper.find('input').last().simulate('change', { target: { checked: true }});
+    expect(changeSpy).toHaveBeenCalledWith([]);
+  });
+
+  it('should render in error state', () => {
+    const ERROR_MESSAGE = 'Error message';
+
+    const wrapper = mount(
+      <MultipleChoiceList
+        { ...initialProps }
+        FieldProvider={ props => (
+          <MockFieldProvider
+            { ...props }
+            input={{ onChange: changeSpy, value: []}}
+            meta={{
+              error: ERROR_MESSAGE,
+              touched: true,
+            }}
+          />) }
+      />
+    );
+
+    expect(wrapper.find(FormHelperText).text()).toEqual(ERROR_MESSAGE);
+  });
+});