@dhis2/ui-forms 8.2.0 → 8.2.1

package/build/es/CheckboxFieldFF/CheckboxFieldFF.js

@@ -5,27 +5,30 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { createToggleChangeHandler, createFocusHandler, createBlurHandler, hasError, isValid, getValidationText } from '../shared/helpers.js';
 import { metaPropType, inputPropType } from '../shared/propTypes.js';
-export const CheckboxFieldFF = ({
-  error,
-  input,
-  meta,
-  showValidStatus,
-  valid,
-  validationText,
-  onBlur,
-  onFocus,
-  ...rest
-}) => /*#__PURE__*/React.createElement(CheckboxField, _extends({}, rest, {
-  name: input.name,
-  checked: input.checked,
-  value: input.value,
-  error: hasError(meta, error),
-  valid: isValid(meta, valid, showValidStatus),
-  validationText: getValidationText(meta, validationText, error),
-  onFocus: createFocusHandler(input, onFocus),
-  onChange: createToggleChangeHandler(input),
-  onBlur: createBlurHandler(input, onBlur)
-}));
+export const CheckboxFieldFF = _ref => {
+  let {
+    error,
+    input,
+    meta,
+    showValidStatus,
+    valid,
+    validationText,
+    onBlur,
+    onFocus,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/React.createElement(CheckboxField, _extends({}, rest, {
+    name: input.name,
+    checked: input.checked,
+    value: input.value,
+    error: hasError(meta, error),
+    valid: isValid(meta, valid, showValidStatus),
+    validationText: getValidationText(meta, validationText, error),
+    onFocus: createFocusHandler(input, onFocus),
+    onChange: createToggleChangeHandler(input),
+    onBlur: createBlurHandler(input, onBlur)
+  }));
+};
 CheckboxFieldFF.propTypes = {
   /** Provided by Final Form `Field` */
   input: inputPropType.isRequired,

package/build/es/CheckboxFieldFF/CheckboxFieldFF.stories.js

@@ -4,33 +4,9 @@ import { formDecorator } from '../formDecorator.js';
 import { inputArgType, metaArgType } from '../shared/propTypes.js';
 import { hasValue } from '../validators/index.js';
 import { CheckboxFieldFF } from './CheckboxFieldFF.js';
-const description = `
-The \`CheckboxFieldFF\` is a wrapper around a \`CheckboxField\` that enables it to work with Final Form, the preferred library for form validation and utilities in DHIS 2 apps.
-
-#### Final Form
-
-See how to use Final Form at [Final Form - Getting Started](https://final-form.org/docs/react-final-form/getting-started).
-
-Inside a Final Form \`<Form>\` component, these 'FF' UI components are intended to be used in the \`component\` prop of the [Final Form \`<Field>\` components](https://final-form.org/docs/react-final-form/api/Field) where they will receive some props from the Field, e.g. \`<Field component={CheckboxFieldFF} />\`.  See the code samples below for examples.
-
-#### Props
-
-The props shown in the table below are generally provided to the \`CheckboxFieldFF\` wrapper by the Final Form \`Field\`.
-
-Note that any props beyond the API of the \`Field\` component will be spread to the \`CheckboxFieldFF\`, which passes any extra props to the underlying \`CheckboxField\` using \`{...rest}\`.
-
-Therefore, to add any props to the \`CheckboxFieldFF\` or \`CheckboxField\`, add those props to the parent Final Form \`Field\` component.
-
-Also see \`Checkbox\` and \`CheckboxField\` for notes about props and implementation.
-
-\`\`\`js
-import { CheckboxFieldFF } from '@dhis2/ui'
-\`\`\`
-
-Press **Submit** to see the form values logged to the console.
-`;
+const description = "\nThe `CheckboxFieldFF` is a wrapper around a `CheckboxField` that enables it to work with Final Form, the preferred library for form validation and utilities in DHIS 2 apps.\n\n#### Final Form\n\nSee how to use Final Form at [Final Form - Getting Started](https://final-form.org/docs/react-final-form/getting-started).\n\nInside a Final Form `<Form>` component, these 'FF' UI components are intended to be used in the `component` prop of the [Final Form `<Field>` components](https://final-form.org/docs/react-final-form/api/Field) where they will receive some props from the Field, e.g. `<Field component={CheckboxFieldFF} />`.  See the code samples below for examples.\n\n#### Props\n\nThe props shown in the table below are generally provided to the `CheckboxFieldFF` wrapper by the Final Form `Field`.\n\nNote that any props beyond the API of the `Field` component will be spread to the `CheckboxFieldFF`, which passes any extra props to the underlying `CheckboxField` using `{...rest}`.\n\nTherefore, to add any props to the `CheckboxFieldFF` or `CheckboxField`, add those props to the parent Final Form `Field` component.\n\nAlso see `Checkbox` and `CheckboxField` for notes about props and implementation.\n\n```js\nimport { CheckboxFieldFF } from '@dhis2/ui'\n```\n\nPress **Submit** to see the form values logged to the console.\n";
 export default {
-  title: 'Forms/Checkbox/Checkbox Field (Final Form)',
+  title: 'Checkbox Field (Final Form)',
   component: CheckboxFieldFF,
   decorators: [formDecorator],
   parameters: {

package/build/es/FieldGroupFF/FieldGroupFF.js

@@ -2,12 +2,13 @@ import { FieldGroup } from '@dhis2-ui/field';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { useField } from 'react-final-form';
-export const FieldGroupFF = ({
-  name,
-  label,
-  children,
-  required
-}) => {
+export const FieldGroupFF = _ref => {
+  let {
+    name,
+    label,
+    children,
+    required
+  } = _ref;
   const {
     meta: {
       error,

package/build/es/FieldGroupFF/FieldGroupFF.stories.js

@@ -4,19 +4,9 @@ import { CheckboxFieldFF } from '../CheckboxFieldFF/CheckboxFieldFF.js';
 import { formDecorator } from '../formDecorator.js';
 import { hasValue } from '../validators/index.js';
 import { FieldGroupFF } from './FieldGroupFF.js';
-const description = `
-This component is intended for use with [Final Form](https://final-form.org/docs/react-final-form/getting-started), the preferred library for form validation and utilities in DHIS 2 apps.
-
-\`FieldGroupFF\` groups related fields (using the Final Form \`<Field>\`), like checkboxes, and adds a label and name.
-
-\`\`\`js
-import { FieldGroupFF } from '@dhis2/ui'
-\`\`\`
-
-Press **Submit** to see the form values logged to the console.
-`;
+const description = "\nThis component is intended for use with [Final Form](https://final-form.org/docs/react-final-form/getting-started), the preferred library for form validation and utilities in DHIS 2 apps.\n\n`FieldGroupFF` groups related fields (using the Final Form `<Field>`), like checkboxes, and adds a label and name.\n\n```js\nimport { FieldGroupFF } from '@dhis2/ui'\n```\n\nPress **Submit** to see the form values logged to the console.\n";
 export default {
-  title: 'Forms/Field Group/Field Group (Final Form)',
+  title: 'Field Group (Final Form)',
   component: FieldGroupFF,
   decorators: [formDecorator],
   parameters: {

package/build/es/FileInputFieldFF/FileInputFieldFF.js

@@ -23,9 +23,10 @@ const dedupeAndConcat = (currentFiles, newFileList) => {
   }).files;
 };
 
-const createChangeHandler = (input, multifile) => ({
-  files
-}) => {
+const createChangeHandler = (input, multifile) => _ref => {
+  let {
+    files
+  } = _ref;
   // A JavaScript FileList instance is read-only, so we cannot add files to it
   // FileList also doesn't have a .map method so by destructuring the FileList
   // instance into an array we can add, remove and map
@@ -40,18 +41,19 @@ const createRemoveHandler = (input, fileToDelete) => () => {
   input.onChange(value);
 };
 
-export const FileInputFieldFF = ({
-  buttonLabel,
-  disabled,
-  error,
-  input,
-  meta,
-  multifile,
-  showValidStatus,
-  valid,
-  validationText,
-  ...rest
-}) => {
+export const FileInputFieldFF = _ref2 => {
+  let {
+    buttonLabel,
+    disabled,
+    error,
+    input,
+    meta,
+    multifile,
+    showValidStatus,
+    valid,
+    validationText,
+    ...rest
+  } = _ref2;
   const files = input.value || [];
   return /*#__PURE__*/React.createElement(FileInputField, _extends({}, rest, {
     onChange: createChangeHandler(input, multifile),
@@ -69,9 +71,6 @@ export const FileInputFieldFF = ({
     removeText: i18n.t('Remove')
   })));
 };
-FileInputFieldFF.defaultProps = {
-  placeholder: i18n.t('No file(s) selected yet')
-};
 FileInputFieldFF.propTypes = {
   /** `input` props provided by Final Form `Field` */
   input: inputPropType.isRequired,

package/build/es/FileInputFieldFF/FileInputFieldFF.stories.e2e.js

@@ -13,9 +13,10 @@ import { TextAreaFieldFF } from '../TextAreaFieldFF/TextAreaFieldFF.js';
 import { composeValidators, email, hasValue } from '../validators/index.js';
 import { FileInputFieldFF } from './FileInputFieldFF.js';
 
-const StandardForm = ({
-  values
-}) => {
+const StandardForm = _ref => {
+  let {
+    values
+  } = _ref;
   return /*#__PURE__*/React.createElement("div", {
     style: {
       maxWidth: 830
@@ -197,7 +198,7 @@ const StandardForm = ({
       const [file] = files;
 
       if (file.type !== 'text/plain') {
-        return `The file you provided is not a txt file, received "${file.type}"`;
+        return "The file you provided is not a txt file, received \"".concat(file.type, "\"");
       }
     },
     component: FileInputFieldFF
@@ -217,7 +218,7 @@ const StandardForm = ({
         }
 
         if (file.type !== 'application/jpg') {
-          return `One of the files is not a jpg, received "${file.type}"`;
+          return "One of the files is not a jpg, received \"".concat(file.type, "\"");
         }
       }, undefined);
     },
@@ -237,6 +238,9 @@ storiesOf('Testing:FileInput', module).addDecorator(formDecorator).addParameters
   options: {
     showPanel: false
   }
-}).add('Standard form', (_, {
-  formRenderProps
-}) => /*#__PURE__*/React.createElement(StandardForm, formRenderProps));
+}).add('Standard form', (_, _ref2) => {
+  let {
+    formRenderProps
+  } = _ref2;
+  return /*#__PURE__*/React.createElement(StandardForm, formRenderProps);
+});

package/build/es/FileInputFieldFF/FileInputFieldFF.stories.js

@@ -4,34 +4,10 @@ import { formDecorator } from '../formDecorator.js';
 import { inputArgType, metaArgType } from '../shared/propTypes.js';
 import { hasValue } from '../validators/index.js';
 import { FileInputFieldFF } from './FileInputFieldFF.js';
-const description = `
-The \`FileInputFieldFF\` is a wrapper around a \`FileInputField\` that enables it to work with Final Form, the preferred library in DHIS 2 apps for form validation and utilities.
-
-#### Final Form
-
-See how to use Final Form at [Final Form - Getting Started](https://final-form.org/docs/react-final-form/getting-started).
-
-Inside a Final Form \`<Form>\` component, these 'FF' UI components are intended to be used in the \`component\` prop of the [Final Form \`<Field>\` components](https://final-form.org/docs/react-final-form/api/Field) where they will receive some props from the Field, e.g. \`<Field component={FileInputFieldFF} />\`.  See the code samples below for examples.
-
-#### Props
-
-The props shown in the table below are generally provided to the \`FileInputFieldFF\` wrapper by the Final Form \`Field\`.
-
-Note that any props beyond the API of the \`Field\` component will be spread to the \`FileInputFieldFF\`, which passes any extra props to the underlying \`FileInputField\` using \`{...rest}\`.
-
-Therefore, to add any props to the \`FileInputFieldFF\` or \`FileInputField\`, add those props to the parent Final Form \`Field\` component.
-
-Also see \`FileInput\` and \`FileInputField\` for notes about props and implementation.
-
-\`\`\`js
-import { FileInputFieldFF } from '@dhis2/ui'
-\`\`\`
-
-Press **Submit** to see the form values logged to the console.
-`;
+const description = "\nThe `FileInputFieldFF` is a wrapper around a `FileInputField` that enables it to work with Final Form, the preferred library in DHIS 2 apps for form validation and utilities.\n\n#### Final Form\n\nSee how to use Final Form at [Final Form - Getting Started](https://final-form.org/docs/react-final-form/getting-started).\n\nInside a Final Form `<Form>` component, these 'FF' UI components are intended to be used in the `component` prop of the [Final Form `<Field>` components](https://final-form.org/docs/react-final-form/api/Field) where they will receive some props from the Field, e.g. `<Field component={FileInputFieldFF} />`.  See the code samples below for examples.\n\n#### Props\n\nThe props shown in the table below are generally provided to the `FileInputFieldFF` wrapper by the Final Form `Field`.\n\nNote that any props beyond the API of the `Field` component will be spread to the `FileInputFieldFF`, which passes any extra props to the underlying `FileInputField` using `{...rest}`.\n\nTherefore, to add any props to the `FileInputFieldFF` or `FileInputField`, add those props to the parent Final Form `Field` component.\n\nAlso see `FileInput` and `FileInputField` for notes about props and implementation.\n\n```js\nimport { FileInputFieldFF } from '@dhis2/ui'\n```\n\nPress **Submit** to see the form values logged to the console.\n";
 const files = [new File([], 'file1.txt'), new File([], 'file2.txt')];
 export default {
-  title: 'Forms/File Input/File Input Field (Final Form)',
+  title: 'File Input Field (Final Form)',
   component: FileInputFieldFF,
   decorators: [formDecorator],
   parameters: {

package/build/es/InputFieldFF/InputFieldFF.js

@@ -5,30 +5,33 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { createChangeHandler, createFocusHandler, createBlurHandler, hasError, isLoading, isValid, getValidationText } from '../shared/helpers.js';
 import { metaPropType, inputPropType } from '../shared/propTypes.js';
-export const InputFieldFF = ({
-  input,
-  meta,
-  error,
-  showValidStatus,
-  valid,
-  validationText,
-  onBlur,
-  onFocus,
-  loading,
-  showLoadingStatus,
-  ...rest
-}) => /*#__PURE__*/React.createElement(InputField, _extends({}, rest, {
-  name: input.name,
-  type: input.type,
-  error: hasError(meta, error),
-  valid: isValid(meta, valid, showValidStatus),
-  loading: isLoading(meta, loading, showLoadingStatus),
-  validationText: getValidationText(meta, validationText, error),
-  onFocus: createFocusHandler(input, onFocus),
-  onChange: createChangeHandler(input),
-  onBlur: createBlurHandler(input, onBlur),
-  value: input.value
-}));
+export const InputFieldFF = _ref => {
+  let {
+    input,
+    meta,
+    error,
+    showValidStatus,
+    valid,
+    validationText,
+    onBlur,
+    onFocus,
+    loading,
+    showLoadingStatus,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/React.createElement(InputField, _extends({}, rest, {
+    name: input.name,
+    type: input.type,
+    error: hasError(meta, error),
+    valid: isValid(meta, valid, showValidStatus),
+    loading: isLoading(meta, loading, showLoadingStatus),
+    validationText: getValidationText(meta, validationText, error),
+    onFocus: createFocusHandler(input, onFocus),
+    onChange: createChangeHandler(input),
+    onBlur: createBlurHandler(input, onBlur),
+    value: input.value
+  }));
+};
 InputFieldFF.propTypes = {
   /** `input` props received from Final Form `Field` */
   input: inputPropType.isRequired,

package/build/es/InputFieldFF/InputFieldFF.stories.js

@@ -4,33 +4,9 @@ import { formDecorator } from '../formDecorator.js';
 import { inputArgType, metaArgType } from '../shared/propTypes.js';
 import { hasValue } from '../validators/index.js';
 import { InputFieldFF } from './InputFieldFF.js';
-const description = `
-The \`InputFieldFF\` is a wrapper around a \`InputField\` that enables it to work with Final Form, the preferred library for form validation and utilities in DHIS 2 apps.
-
-#### Final Form
-
-See how to use Final Form at [Final Form - Getting Started](https://final-form.org/docs/react-final-form/getting-started).
-
-Inside a Final Form \`<Form>\` component, these 'FF' UI components are intended to be used in the \`component\` prop of the [Final Form \`<Field>\` components](https://final-form.org/docs/react-final-form/api/Field) where they will receive some props from the Field, e.g. \`<Field component={InputFieldFF} />\`.  See the code samples below for examples.
-
-#### Props
-
-The props shown in the table below are generally provided to the \`InputFieldFF\` wrapper by the Final Form \`Field\`.
-
-Note that any props beyond the API of the \`Field\` component will be spread to the \`InputFieldFF\`, which passes any extra props to the underlying \`InputField\` using \`{...rest}\`.
-
-Therefore, to add any props to the \`InputFieldFF\` or \`InputField\`, add those props to the parent Final Form \`Field\` component.
-
-Also see \`InputField\` for notes about props and implementation.
-
-\`\`\`js
-import { InputFieldFF } from '@dhis2/ui'
-\`\`\`
-
-Press **Submit** to see the form values logged to the console.
-`;
+const description = "\nThe `InputFieldFF` is a wrapper around a `InputField` that enables it to work with Final Form, the preferred library for form validation and utilities in DHIS 2 apps.\n\n#### Final Form\n\nSee how to use Final Form at [Final Form - Getting Started](https://final-form.org/docs/react-final-form/getting-started).\n\nInside a Final Form `<Form>` component, these 'FF' UI components are intended to be used in the `component` prop of the [Final Form `<Field>` components](https://final-form.org/docs/react-final-form/api/Field) where they will receive some props from the Field, e.g. `<Field component={InputFieldFF} />`.  See the code samples below for examples.\n\n#### Props\n\nThe props shown in the table below are generally provided to the `InputFieldFF` wrapper by the Final Form `Field`.\n\nNote that any props beyond the API of the `Field` component will be spread to the `InputFieldFF`, which passes any extra props to the underlying `InputField` using `{...rest}`.\n\nTherefore, to add any props to the `InputFieldFF` or `InputField`, add those props to the parent Final Form `Field` component.\n\nAlso see `InputField` for notes about props and implementation.\n\n```js\nimport { InputFieldFF } from '@dhis2/ui'\n```\n\nPress **Submit** to see the form values logged to the console.\n";
 export default {
-  title: 'Forms/Input/Input Field (Final Form)',
+  title: 'Input Field (Final Form)',
   component: InputFieldFF,
   decorators: [formDecorator],
   parameters: {

package/build/es/MultiSelectFieldFF/MultiSelectFieldFF.js

@@ -5,20 +5,21 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { createSelectChangeHandler, createFocusHandler, createBlurHandler, hasError, isLoading, isValid, getValidationText } from '../shared/helpers.js';
 import { inputPropType, metaPropType } from '../shared/propTypes.js';
-export const MultiSelectFieldFF = ({
-  error,
-  input,
-  loading,
-  meta,
-  onBlur,
-  onFocus,
-  options = [],
-  showLoadingStatus,
-  showValidStatus,
-  valid,
-  validationText,
-  ...rest
-}) => {
+export const MultiSelectFieldFF = _ref => {
+  let {
+    error,
+    input,
+    loading,
+    meta,
+    onBlur,
+    onFocus,
+    options = [],
+    showLoadingStatus,
+    showValidStatus,
+    valid,
+    validationText,
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React.createElement(MultiSelectField, _extends({}, rest, {
     name: input.name,
     error: hasError(meta, error),

package/build/es/MultiSelectFieldFF/MultiSelectFieldFF.stories.e2e.js

@@ -15,13 +15,16 @@ storiesOf('Testing:MultiSelectFieldFF', module).addDecorator(formDecorator).addP
   options: {
     showPanel: false
   }
-}).add('Required', (_, {
-  cypressProps
-}) => /*#__PURE__*/React.createElement(Field, {
-  required: true,
-  name: "multiSelect",
-  label: "Multi select",
-  component: MultiSelectFieldFF,
-  validate: hasValue,
-  options: cypressProps.options || defaultOptions
-}));
+}).add('Required', (_, _ref) => {
+  let {
+    cypressProps
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Field, {
+    required: true,
+    name: "multiSelect",
+    label: "Multi select",
+    component: MultiSelectFieldFF,
+    validate: hasValue,
+    options: cypressProps.options || defaultOptions
+  });
+});

package/build/es/MultiSelectFieldFF/MultiSelectFieldFF.stories.js

@@ -3,33 +3,7 @@ import { Field } from 'react-final-form';
 import { formDecorator } from '../formDecorator.js';
 import { inputArgType, metaArgType } from '../shared/propTypes.js';
 import { MultiSelectFieldFF } from './MultiSelectFieldFF.js';
-const description = `
-The \`MultiSelectFieldFF\` is a wrapper around a \`MultiSelectField\` that enables it to work with Final Form, the preferred library for form validation and utilities in DHIS 2 apps.
-
-#### Final Form
-
-See how to use Final Form at [Final Form - Getting Started](https://final-form.org/docs/react-final-form/getting-started).
-
-Inside a Final Form \`<Form>\` component, these 'FF' UI components are intended to be used in the \`component\` prop of the [Final Form \`<Field>\` components](https://final-form.org/docs/react-final-form/api/Field) where they will receive some props from the Field, e.g. \`<Field component={MultiSelectFieldFF} />\`.  See the code samples below for examples.
-
-#### Props
-
-The props shown in the table below are generally provided to the \`MultiSelectFieldFF\` wrapper by the Final Form \`Field\`.
-
-Note that any props beyond the API of the \`Field\` component will be spread to the \`MultiSelectFieldFF\`, which passes any extra props to the underlying \`MultiSelectField\` using \`{...rest}\`.
-
-Therefore, to add any props to the \`MultiSelectFieldFF\` or \`MultiSelectField\`, add those props to the parent Final Form \`Field\` component.
-
-Also see \`MultiSelect\` and \`MultiSelectField\` for notes about props and implementation.
-
-\`\`\`js
-import { MultiSelectFieldFF } from '@dhis2/ui'
-\`\`\`
-
-Press **Submit** to see the form values logged to the console.
-
-_**Note:** Dropdowns may not appear correctly on this page. See the affected demos in the 'Canvas' tab for propper dropdown placement._
-`;
+const description = "\nThe `MultiSelectFieldFF` is a wrapper around a `MultiSelectField` that enables it to work with Final Form, the preferred library for form validation and utilities in DHIS 2 apps.\n\n#### Final Form\n\nSee how to use Final Form at [Final Form - Getting Started](https://final-form.org/docs/react-final-form/getting-started).\n\nInside a Final Form `<Form>` component, these 'FF' UI components are intended to be used in the `component` prop of the [Final Form `<Field>` components](https://final-form.org/docs/react-final-form/api/Field) where they will receive some props from the Field, e.g. `<Field component={MultiSelectFieldFF} />`.  See the code samples below for examples.\n\n#### Props\n\nThe props shown in the table below are generally provided to the `MultiSelectFieldFF` wrapper by the Final Form `Field`.\n\nNote that any props beyond the API of the `Field` component will be spread to the `MultiSelectFieldFF`, which passes any extra props to the underlying `MultiSelectField` using `{...rest}`.\n\nTherefore, to add any props to the `MultiSelectFieldFF` or `MultiSelectField`, add those props to the parent Final Form `Field` component.\n\nAlso see `MultiSelect` and `MultiSelectField` for notes about props and implementation.\n\n```js\nimport { MultiSelectFieldFF } from '@dhis2/ui'\n```\n\nPress **Submit** to see the form values logged to the console.\n\n_**Note:** Dropdowns may not appear correctly on this page. See the affected demos in the 'Canvas' tab for propper dropdown placement._\n";
 const options = [{
   value: '1',
   label: 'one'
@@ -63,7 +37,7 @@ const options = [{
 }];
 const initialValue = ['3', '4', '9', '10'];
 export default {
-  title: 'Forms/Multi Select/Multi Select Field (Final Form)',
+  title: 'Multi Select Field (Final Form)',
   component: MultiSelectFieldFF,
   decorators: [formDecorator],
   parameters: {

package/build/es/RadioFieldFF/RadioFieldFF.js

@@ -5,27 +5,30 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { createToggleChangeHandler, createFocusHandler, createBlurHandler, hasError, isValid, getValidationText } from '../shared/helpers.js';
 import { metaPropType, inputPropType } from '../shared/propTypes.js';
-export const RadioFieldFF = ({
-  error,
-  input,
-  meta,
-  showValidStatus,
-  valid,
-  validationText,
-  onBlur,
-  onFocus,
-  ...rest
-}) => /*#__PURE__*/React.createElement(Radio, _extends({}, rest, {
-  name: input.name,
-  checked: input.checked,
-  value: input.value,
-  error: hasError(meta, error),
-  valid: isValid(meta, valid, showValidStatus),
-  validationText: getValidationText(meta, validationText, error),
-  onFocus: createFocusHandler(input, onFocus),
-  onChange: createToggleChangeHandler(input),
-  onBlur: createBlurHandler(input, onBlur)
-}));
+export const RadioFieldFF = _ref => {
+  let {
+    error,
+    input,
+    meta,
+    showValidStatus,
+    valid,
+    validationText,
+    onBlur,
+    onFocus,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Radio, _extends({}, rest, {
+    name: input.name,
+    checked: input.checked,
+    value: input.value,
+    error: hasError(meta, error),
+    valid: isValid(meta, valid, showValidStatus),
+    validationText: getValidationText(meta, validationText, error),
+    onFocus: createFocusHandler(input, onFocus),
+    onChange: createToggleChangeHandler(input),
+    onBlur: createBlurHandler(input, onBlur)
+  }));
+};
 RadioFieldFF.propTypes = {
   /** `input` props received from Final Form `Field` */
   input: inputPropType.isRequired,

package/build/es/RadioFieldFF/RadioFieldFF.stories.js

@@ -4,33 +4,9 @@ import { Field } from 'react-final-form';
 import { formDecorator } from '../formDecorator.js';
 import { inputArgType, metaArgType } from '../shared/propTypes.js';
 import { RadioFieldFF } from './RadioFieldFF.js';
-const description = `
-The \`RadioFieldFF\` is a wrapper around a \`Radio\` that enables it to work with Final Form, the preferred library for form validation and utilities in DHIS 2 apps.
-
-#### Final Form
-
-See how to use Final Form at [Final Form - Getting Started](https://final-form.org/docs/react-final-form/getting-started).
-
-Inside a Final Form \`<Form>\` component, these 'FF' UI components are intended to be used in the \`component\` prop of the [Final Form \`<Field>\` components](https://final-form.org/docs/react-final-form/api/Field) where they will receive some props from the Field, e.g. \`<Field component={RadioFieldFF} />\`.  See the code samples below for examples.
-
-#### Props
-
-The props shown in the table below are generally provided to the \`RadioFieldFF\` wrapper by the Final Form \`Field\`.
-
-Note that any props beyond the API of the \`Field\` component will be spread to the \`RadioFieldFF\`, which passes any extra props to the underlying \`Radio\` using \`{...rest}\`.
-
-Therefore, to add any props to the \`RadioFieldFF\` or \`Radio\`, add those props to the parent Final Form \`Field\` component.
-
-Also see \`Radio\` for notes about props and implementation.
-
-\`\`\`js
-import { RadioFieldFF } from '@dhis2/ui'
-\`\`\`
-
-Press **Submit** to see the form values logged to the console.
-`;
+const description = "\nThe `RadioFieldFF` is a wrapper around a `Radio` that enables it to work with Final Form, the preferred library for form validation and utilities in DHIS 2 apps.\n\n#### Final Form\n\nSee how to use Final Form at [Final Form - Getting Started](https://final-form.org/docs/react-final-form/getting-started).\n\nInside a Final Form `<Form>` component, these 'FF' UI components are intended to be used in the `component` prop of the [Final Form `<Field>` components](https://final-form.org/docs/react-final-form/api/Field) where they will receive some props from the Field, e.g. `<Field component={RadioFieldFF} />`.  See the code samples below for examples.\n\n#### Props\n\nThe props shown in the table below are generally provided to the `RadioFieldFF` wrapper by the Final Form `Field`.\n\nNote that any props beyond the API of the `Field` component will be spread to the `RadioFieldFF`, which passes any extra props to the underlying `Radio` using `{...rest}`.\n\nTherefore, to add any props to the `RadioFieldFF` or `Radio`, add those props to the parent Final Form `Field` component.\n\nAlso see `Radio` for notes about props and implementation.\n\n```js\nimport { RadioFieldFF } from '@dhis2/ui'\n```\n\nPress **Submit** to see the form values logged to the console.\n";
 export default {
-  title: 'Forms/Radio/Radio Field (Final Form)',
+  title: 'Radio Field (Final Form)',
   component: RadioFieldFF,
   decorators: [formDecorator],
   parameters: {

package/build/es/SingleSelectFieldFF/SingleSelectFieldFF.js

@@ -5,20 +5,21 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { createSelectChangeHandler, createFocusHandler, createBlurHandler, hasError, isLoading, isValid, getValidationText } from '../shared/helpers.js';
 import { inputPropType, metaPropType } from '../shared/propTypes.js';
-export const SingleSelectFieldFF = ({
-  error,
-  input,
-  loading,
-  meta,
-  onBlur,
-  onFocus,
-  options,
-  showLoadingStatus,
-  showValidStatus,
-  valid,
-  validationText,
-  ...rest
-}) => {
+export const SingleSelectFieldFF = _ref => {
+  let {
+    error,
+    input,
+    loading,
+    meta,
+    onBlur,
+    onFocus,
+    options,
+    showLoadingStatus,
+    showValidStatus,
+    valid,
+    validationText,
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React.createElement(SingleSelectField, _extends({}, rest, {
     name: input.name,
     error: hasError(meta, error),

package/build/es/SingleSelectFieldFF/SingleSelectFieldFF.stories.e2e.js

@@ -12,13 +12,16 @@ storiesOf('Testing:SingleSelectFieldFF', module).addDecorator(formDecorator).add
   options: {
     showPanel: false
   }
-}).add('Required', (_, {
-  cypressProps
-}) => /*#__PURE__*/React.createElement(Field, {
-  required: true,
-  name: "singleSelect",
-  label: "Single select",
-  component: SingleSelectFieldFF,
-  validate: hasValue,
-  options: cypressProps.options || defaultOptions
-}));
+}).add('Required', (_, _ref) => {
+  let {
+    cypressProps
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Field, {
+    required: true,
+    name: "singleSelect",
+    label: "Single select",
+    component: SingleSelectFieldFF,
+    validate: hasValue,
+    options: cypressProps.options || defaultOptions
+  });
+});