@dhis2/ui-forms 8.2.0 → 8.2.3

package/build/cjs/locales/uz_Latn/translations.json

@@ -2,7 +2,6 @@
     "Upload file": "Faylni yuklash",
     "Upload files": "",
     "Remove": "Олиб ташлаш",
-    "No file(s) selected yet": "",
     "Please provide an alpha-numeric value": "",
     "Please provide a boolean value": "",
     "Please enter between {{lowerBound}} and {{upperBound}} characters": "",

package/build/cjs/locales/vi/translations.json

@@ -2,7 +2,6 @@
     "Upload file": "Tải một tập tin",
     "Upload files": "",
     "Remove": "Tháo ra",
-    "No file(s) selected yet": "",
     "Please provide an alpha-numeric value": "",
     "Please provide a boolean value": "",
     "Please enter between {{lowerBound}} and {{upperBound}} characters": "",

package/build/cjs/locales/zh/translations.json

@@ -2,7 +2,6 @@
     "Upload file": "上传文件",
     "Upload files": "上传文件",
     "Remove": "移除",
-    "No file(s) selected yet": "尚未选择任何文件",
     "Please provide an alpha-numeric value": "请提供字母数字值",
     "Please provide a boolean value": "请提供一个布尔值",
     "Please enter between {{lowerBound}} and {{upperBound}} characters": "请在 {{lowerBound}} 和 {{upperBound}} 个字符之间输入",

package/build/cjs/locales/zh_CN/translations.json

@@ -2,7 +2,6 @@
     "Upload file": "",
     "Upload files": "",
     "Remove": "移除",
-    "No file(s) selected yet": "",
     "Please provide an alpha-numeric value": "",
     "Please provide a boolean value": "",
     "Please enter between {{lowerBound}} and {{upperBound}} characters": "",

package/build/cjs/shared/helpers/createChangeHandler.js

@@ -6,22 +6,25 @@ Object.defineProperty(exports, "__esModule", {
 exports.createChangeHandler = void 0;
 const PRIMITIVE_TYPES = new Set(['string', 'number', 'boolean']);
 
-const createChangeHandler = ({
-  onChange
-}) => payload => {
-  if (payload && 'value' in payload) {
-    // ui event signature
-    onChange(payload.value);
-  } else if (payload && payload.target && 'value' in payload.target) {
-    // synthetic event
-    onChange(payload.target.value);
-  } else if (PRIMITIVE_TYPES.has(typeof payload)) {
-    // directly usable value
-    onChange(payload);
-  } else {
-    // ¯\_(ツ)_/¯
-    throw new Error('Could not process event payload');
-  }
+const createChangeHandler = _ref => {
+  let {
+    onChange
+  } = _ref;
+  return payload => {
+    if (payload && 'value' in payload) {
+      // ui event signature
+      onChange(payload.value);
+    } else if (payload && payload.target && 'value' in payload.target) {
+      // synthetic event
+      onChange(payload.target.value);
+    } else if (PRIMITIVE_TYPES.has(typeof payload)) {
+      // directly usable value
+      onChange(payload);
+    } else {
+      // ¯\_(ツ)_/¯
+      throw new Error('Could not process event payload');
+    }
+  };
 };
 
 exports.createChangeHandler = createChangeHandler;

package/build/cjs/shared/helpers/createSelectChangeHandler.js

@@ -5,12 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.createSelectChangeHandler = void 0;
 
-const createSelectChangeHandler = ({
-  onChange
-}) => ({
-  selected
-}) => {
-  onChange(selected);
+const createSelectChangeHandler = _ref => {
+  let {
+    onChange
+  } = _ref;
+  return _ref2 => {
+    let {
+      selected
+    } = _ref2;
+    onChange(selected);
+  };
 };
 
 exports.createSelectChangeHandler = createSelectChangeHandler;

package/build/cjs/shared/propTypes.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.metaArgType = exports.metaPropType = exports.inputArgType = exports.inputPropType = exports.toggleGroupOptionsProp = void 0;
+exports.toggleGroupOptionsProp = exports.metaPropType = exports.metaArgType = exports.inputPropType = exports.inputArgType = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 

package/build/cjs/transformers/arrayWithIdObjects.js

@@ -5,9 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.arrayWithIdObjects = void 0;
 
-const format = value => !value ? [] : value.map(({
-  id
-}) => id);
+const format = value => !value ? [] : value.map(_ref => {
+  let {
+    id
+  } = _ref;
+  return id;
+});
 
 const parse = value => !value || Array.isArray(value) && value.length === 0 ? undefined : value.map(id => ({
   id

package/build/cjs/validators/__tests__/createPattern.test.js

@@ -24,7 +24,7 @@ describe('validator: createPattern', () => {
   });
   it('should return an error string when input does not match the pattern', () => {
     const escapedRegexString = '/^test$/';
-    const invalidMsg = `Please make sure the value of this input matches the pattern ${escapedRegexString}.`;
+    const invalidMsg = "Please make sure the value of this input matches the pattern ".concat(escapedRegexString, ".");
     expect(equalToTestPattern('bad input')).toEqual(invalidMsg);
   });
   it('should return an custon error string when one was provided and input does not match the pattern', () => {

package/build/cjs/validators/composeValidators.js

@@ -5,8 +5,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.composeValidators = void 0;
 
-const composeValidators = (...validators) => {
-  return (...args) => {
+const composeValidators = function () {
+  for (var _len = arguments.length, validators = new Array(_len), _key = 0; _key < _len; _key++) {
+    validators[_key] = arguments[_key];
+  }
+
+  return function () {
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+
     return validators.reduce((error, validator) => error || validator(...args), undefined);
   };
 };

package/build/cjs/validators/helpers/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.requireArgument = exports.requiredArgumentErrorMessage = exports.toNumber = exports.isInRange = exports.isNumeric = exports.isNumber = exports.isInteger = exports.isString = exports.isEmpty = void 0;
+exports.toNumber = exports.requiredArgumentErrorMessage = exports.requireArgument = exports.isString = exports.isNumeric = exports.isNumber = exports.isInteger = exports.isInRange = exports.isEmpty = void 0;
 
 const isEmpty = value => typeof value === 'undefined' || value === null || value === '';
 

package/build/cjs/validators/number.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.invalidNumberMessage = exports.number = void 0;
+exports.number = exports.invalidNumberMessage = void 0;
 
 var _index = _interopRequireDefault(require("../locales/index.js"));
 

package/build/cjs/validators/string.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.invalidStringMessage = exports.string = void 0;
+exports.string = exports.invalidStringMessage = void 0;
 
 var _index = _interopRequireDefault(require("../locales/index.js"));
 

package/build/cjs/validators/test-helpers/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.allowsEmptyValues = exports.testValidatorValues = void 0;
+exports.testValidatorValues = exports.allowsEmptyValues = void 0;
 
 const testValidatorValues = (validator, returnValue, values) => {
   const returnValueStr = returnValue === undefined ? 'undefined' : 'an error string';
@@ -11,7 +11,7 @@ const testValidatorValues = (validator, returnValue, values) => {
   for (const value of values) {
     const type = typeof value;
     const valueStr = type === 'object' ? JSON.stringify(value) : value;
-    it(`should return ${returnValueStr} for value \`${valueStr}\` of type ${type}`, () => {
+    it("should return ".concat(returnValueStr, " for value `").concat(valueStr, "` of type ").concat(type), () => {
       expect(validator(value)).toBe(returnValue);
     });
   }

package/build/cjs/validators/url.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.invalidUrlMessage = exports.url = void 0;
+exports.url = exports.invalidUrlMessage = void 0;
 
 var _index = _interopRequireDefault(require("../locales/index.js"));
 

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),