@dhis2/ui-forms 8.2.0 → 8.2.1

package/build/cjs/CheckboxFieldFF/CheckboxFieldFF.js

@@ -19,27 +19,30 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const CheckboxFieldFF = ({
-  error,
-  input,
-  meta,
-  showValidStatus,
-  valid,
-  validationText,
-  onBlur,
-  onFocus,
-  ...rest
-}) => /*#__PURE__*/_react.default.createElement(_checkbox.CheckboxField, _extends({}, rest, {
-  name: input.name,
-  checked: input.checked,
-  value: input.value,
-  error: (0, _helpers.hasError)(meta, error),
-  valid: (0, _helpers.isValid)(meta, valid, showValidStatus),
-  validationText: (0, _helpers.getValidationText)(meta, validationText, error),
-  onFocus: (0, _helpers.createFocusHandler)(input, onFocus),
-  onChange: (0, _helpers.createToggleChangeHandler)(input),
-  onBlur: (0, _helpers.createBlurHandler)(input, onBlur)
-}));
+const CheckboxFieldFF = _ref => {
+  let {
+    error,
+    input,
+    meta,
+    showValidStatus,
+    valid,
+    validationText,
+    onBlur,
+    onFocus,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_checkbox.CheckboxField, _extends({}, rest, {
+    name: input.name,
+    checked: input.checked,
+    value: input.value,
+    error: (0, _helpers.hasError)(meta, error),
+    valid: (0, _helpers.isValid)(meta, valid, showValidStatus),
+    validationText: (0, _helpers.getValidationText)(meta, validationText, error),
+    onFocus: (0, _helpers.createFocusHandler)(input, onFocus),
+    onChange: (0, _helpers.createToggleChangeHandler)(input),
+    onBlur: (0, _helpers.createBlurHandler)(input, onBlur)
+  }));
+};
 
 exports.CheckboxFieldFF = CheckboxFieldFF;
 CheckboxFieldFF.propTypes = {

package/build/cjs/CheckboxFieldFF/CheckboxFieldFF.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ValueWhenChecked = exports.Statuses = exports.HelpText = exports.Disabled = exports.RequiredWithValidate = exports.Default = exports.default = void 0;
+exports.default = exports.ValueWhenChecked = exports.Statuses = exports.RequiredWithValidate = exports.HelpText = exports.Disabled = exports.Default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -19,33 +19,9 @@ var _CheckboxFieldFF = require("./CheckboxFieldFF.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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";
 var _default = {
-  title: 'Forms/Checkbox/Checkbox Field (Final Form)',
+  title: 'Checkbox Field (Final Form)',
   component: _CheckboxFieldFF.CheckboxFieldFF,
   decorators: [_formDecorator.formDecorator],
   parameters: {

package/build/cjs/FieldGroupFF/FieldGroupFF.js

@@ -15,12 +15,13 @@ var _reactFinalForm = require("react-final-form");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const FieldGroupFF = ({
-  name,
-  label,
-  children,
-  required
-}) => {
+const FieldGroupFF = _ref => {
+  let {
+    name,
+    label,
+    children,
+    required
+  } = _ref;
   const {
     meta: {
       error,

package/build/cjs/FieldGroupFF/FieldGroupFF.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Default = exports.default = void 0;
+exports.default = exports.Default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -19,19 +19,9 @@ var _FieldGroupFF = require("./FieldGroupFF.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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";
 var _default = {
-  title: 'Forms/Field Group/Field Group (Final Form)',
+  title: 'Field Group (Final Form)',
   component: _FieldGroupFF.FieldGroupFF,
   decorators: [_formDecorator.formDecorator],
   parameters: {

package/build/cjs/FileInputFieldFF/FileInputFieldFF.js

@@ -39,9 +39,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
@@ -56,18 +57,19 @@ const createRemoveHandler = (input, fileToDelete) => () => {
   input.onChange(value);
 };
 
-const FileInputFieldFF = ({
-  buttonLabel,
-  disabled,
-  error,
-  input,
-  meta,
-  multifile,
-  showValidStatus,
-  valid,
-  validationText,
-  ...rest
-}) => {
+const FileInputFieldFF = _ref2 => {
+  let {
+    buttonLabel,
+    disabled,
+    error,
+    input,
+    meta,
+    multifile,
+    showValidStatus,
+    valid,
+    validationText,
+    ...rest
+  } = _ref2;
   const files = input.value || [];
   return /*#__PURE__*/_react.default.createElement(_fileInput.FileInputField, _extends({}, rest, {
     onChange: createChangeHandler(input, multifile),
@@ -87,9 +89,6 @@ const FileInputFieldFF = ({
 };
 
 exports.FileInputFieldFF = FileInputFieldFF;
-FileInputFieldFF.defaultProps = {
-  placeholder: _index.default.t('No file(s) selected yet')
-};
 FileInputFieldFF.propTypes = {
   /** `input` props provided by Final Form `Field` */
   input: _propTypes2.inputPropType.isRequired,

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

@@ -30,9 +30,10 @@ var _FileInputFieldFF = require("./FileInputFieldFF.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const StandardForm = ({
-  values
-}) => {
+const StandardForm = _ref => {
+  let {
+    values
+  } = _ref;
   return /*#__PURE__*/_react2.default.createElement("div", {
     style: {
       maxWidth: 830
@@ -214,7 +215,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.FileInputFieldFF
@@ -234,7 +235,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);
     },
@@ -254,6 +255,9 @@ const StandardForm = ({
   options: {
     showPanel: false
   }
-}).add('Standard form', (_, {
-  formRenderProps
-}) => /*#__PURE__*/_react2.default.createElement(StandardForm, formRenderProps));
+}).add('Standard form', (_, _ref2) => {
+  let {
+    formRenderProps
+  } = _ref2;
+  return /*#__PURE__*/_react2.default.createElement(StandardForm, formRenderProps);
+});

package/build/cjs/FileInputFieldFF/FileInputFieldFF.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PreventPlaceholder = exports.WithValues = exports.Multifile = exports.Required = exports.Default = exports.default = void 0;
+exports.default = exports.WithValues = exports.Required = exports.PreventPlaceholder = exports.Multifile = exports.Default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -19,34 +19,10 @@ var _FileInputFieldFF = require("./FileInputFieldFF.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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')];
 var _default = {
-  title: 'Forms/File Input/File Input Field (Final Form)',
+  title: 'File Input Field (Final Form)',
   component: _FileInputFieldFF.FileInputFieldFF,
   decorators: [_formDecorator.formDecorator],
   parameters: {

package/build/cjs/InputFieldFF/InputFieldFF.js

@@ -19,30 +19,33 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const InputFieldFF = ({
-  input,
-  meta,
-  error,
-  showValidStatus,
-  valid,
-  validationText,
-  onBlur,
-  onFocus,
-  loading,
-  showLoadingStatus,
-  ...rest
-}) => /*#__PURE__*/_react.default.createElement(_input.InputField, _extends({}, rest, {
-  name: input.name,
-  type: input.type,
-  error: (0, _helpers.hasError)(meta, error),
-  valid: (0, _helpers.isValid)(meta, valid, showValidStatus),
-  loading: (0, _helpers.isLoading)(meta, loading, showLoadingStatus),
-  validationText: (0, _helpers.getValidationText)(meta, validationText, error),
-  onFocus: (0, _helpers.createFocusHandler)(input, onFocus),
-  onChange: (0, _helpers.createChangeHandler)(input),
-  onBlur: (0, _helpers.createBlurHandler)(input, onBlur),
-  value: input.value
-}));
+const InputFieldFF = _ref => {
+  let {
+    input,
+    meta,
+    error,
+    showValidStatus,
+    valid,
+    validationText,
+    onBlur,
+    onFocus,
+    loading,
+    showLoadingStatus,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_input.InputField, _extends({}, rest, {
+    name: input.name,
+    type: input.type,
+    error: (0, _helpers.hasError)(meta, error),
+    valid: (0, _helpers.isValid)(meta, valid, showValidStatus),
+    loading: (0, _helpers.isLoading)(meta, loading, showLoadingStatus),
+    validationText: (0, _helpers.getValidationText)(meta, validationText, error),
+    onFocus: (0, _helpers.createFocusHandler)(input, onFocus),
+    onChange: (0, _helpers.createChangeHandler)(input),
+    onBlur: (0, _helpers.createBlurHandler)(input, onBlur),
+    value: input.value
+  }));
+};
 
 exports.InputFieldFF = InputFieldFF;
 InputFieldFF.propTypes = {

package/build/cjs/InputFieldFF/InputFieldFF.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Statuses = exports.HelpText = exports.Disabled = exports.Required = exports.Default = exports.default = void 0;
+exports.default = exports.Statuses = exports.Required = exports.HelpText = exports.Disabled = exports.Default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -19,33 +19,9 @@ var _InputFieldFF = require("./InputFieldFF.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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";
 var _default = {
-  title: 'Forms/Input/Input Field (Final Form)',
+  title: 'Input Field (Final Form)',
   component: _InputFieldFF.InputFieldFF,
   decorators: [_formDecorator.formDecorator],
   parameters: {

package/build/cjs/MultiSelectFieldFF/MultiSelectFieldFF.js

@@ -19,20 +19,21 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const MultiSelectFieldFF = ({
-  error,
-  input,
-  loading,
-  meta,
-  onBlur,
-  onFocus,
-  options = [],
-  showLoadingStatus,
-  showValidStatus,
-  valid,
-  validationText,
-  ...rest
-}) => {
+const MultiSelectFieldFF = _ref => {
+  let {
+    error,
+    input,
+    loading,
+    meta,
+    onBlur,
+    onFocus,
+    options = [],
+    showLoadingStatus,
+    showValidStatus,
+    valid,
+    validationText,
+    ...rest
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement(_select.MultiSelectField, _extends({}, rest, {
     name: input.name,
     error: (0, _helpers.hasError)(meta, error),

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

@@ -25,13 +25,16 @@ const defaultOptions = [{
   options: {
     showPanel: false
   }
-}).add('Required', (_, {
-  cypressProps
-}) => /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
-  required: true,
-  name: "multiSelect",
-  label: "Multi select",
-  component: _MultiSelectFieldFF.MultiSelectFieldFF,
-  validate: _index.hasValue,
-  options: cypressProps.options || defaultOptions
-}));
+}).add('Required', (_, _ref) => {
+  let {
+    cypressProps
+  } = _ref;
+  return /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
+    required: true,
+    name: "multiSelect",
+    label: "Multi select",
+    component: _MultiSelectFieldFF.MultiSelectFieldFF,
+    validate: _index.hasValue,
+    options: cypressProps.options || defaultOptions
+  });
+});

package/build/cjs/MultiSelectFieldFF/MultiSelectFieldFF.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.InitialValue = exports.Default = exports.default = void 0;
+exports.default = exports.InitialValue = exports.Default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -17,33 +17,7 @@ var _MultiSelectFieldFF = require("./MultiSelectFieldFF.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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'
@@ -77,7 +51,7 @@ const options = [{
 }];
 const initialValue = ['3', '4', '9', '10'];
 var _default = {
-  title: 'Forms/Multi Select/Multi Select Field (Final Form)',
+  title: 'Multi Select Field (Final Form)',
   component: _MultiSelectFieldFF.MultiSelectFieldFF,
   decorators: [_formDecorator.formDecorator],
   parameters: {

package/build/cjs/RadioFieldFF/RadioFieldFF.js

@@ -19,27 +19,30 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-const RadioFieldFF = ({
-  error,
-  input,
-  meta,
-  showValidStatus,
-  valid,
-  validationText,
-  onBlur,
-  onFocus,
-  ...rest
-}) => /*#__PURE__*/_react.default.createElement(_radio.Radio, _extends({}, rest, {
-  name: input.name,
-  checked: input.checked,
-  value: input.value,
-  error: (0, _helpers.hasError)(meta, error),
-  valid: (0, _helpers.isValid)(meta, valid, showValidStatus),
-  validationText: (0, _helpers.getValidationText)(meta, validationText, error),
-  onFocus: (0, _helpers.createFocusHandler)(input, onFocus),
-  onChange: (0, _helpers.createToggleChangeHandler)(input),
-  onBlur: (0, _helpers.createBlurHandler)(input, onBlur)
-}));
+const RadioFieldFF = _ref => {
+  let {
+    error,
+    input,
+    meta,
+    showValidStatus,
+    valid,
+    validationText,
+    onBlur,
+    onFocus,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_radio.Radio, _extends({}, rest, {
+    name: input.name,
+    checked: input.checked,
+    value: input.value,
+    error: (0, _helpers.hasError)(meta, error),
+    valid: (0, _helpers.isValid)(meta, valid, showValidStatus),
+    validationText: (0, _helpers.getValidationText)(meta, validationText, error),
+    onFocus: (0, _helpers.createFocusHandler)(input, onFocus),
+    onChange: (0, _helpers.createToggleChangeHandler)(input),
+    onBlur: (0, _helpers.createBlurHandler)(input, onBlur)
+  }));
+};
 
 exports.RadioFieldFF = RadioFieldFF;
 RadioFieldFF.propTypes = {

package/build/cjs/RadioFieldFF/RadioFieldFF.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Statuses = exports.Default = exports.default = void 0;
+exports.default = exports.Statuses = exports.Default = void 0;
 
 var _field = require("@dhis2-ui/field");
 
@@ -19,33 +19,9 @@ var _RadioFieldFF = require("./RadioFieldFF.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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";
 var _default = {
-  title: 'Forms/Radio/Radio Field (Final Form)',
+  title: 'Radio Field (Final Form)',
   component: _RadioFieldFF.RadioFieldFF,
   decorators: [_formDecorator.formDecorator],
   parameters: {