@dhis2/ui-forms 9.11.0 → 9.11.1-beta.2

package/build/cjs/FileInputFieldFF/FileInputFieldFF.js

@@ -4,41 +4,28 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.FileInputFieldFF = void 0;
-
 var _fileInput = require("@dhis2-ui/file-input");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _index = _interopRequireDefault(require("../locales/index.js"));
-
 var _helpers = require("../shared/helpers.js");
-
 var _propTypes2 = require("../shared/propTypes.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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); }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const btnLabel = _index.default.t('Upload file');
-
 const btnLabelMulti = _index.default.t('Upload files');
-
 const dedupeAndConcat = (currentFiles, newFileList) => {
   return [...currentFiles, ...newFileList].reduceRight((acc, file) => {
     if (!acc.unique.has(file.name)) {
       acc.unique.add(file.name);
       acc.files.unshift(file);
     }
-
     return acc;
   }, {
     files: [],
     unique: new Set()
   }).files;
 };
-
 const createChangeHandler = (input, multifile) => _ref => {
   let {
     files
@@ -50,13 +37,11 @@ const createChangeHandler = (input, multifile) => _ref => {
   const value = multifile ? dedupeAndConcat(currentFiles, files) : [...files];
   input.onChange(value);
 };
-
 const createRemoveHandler = (input, fileToDelete) => () => {
   const files = input.value.filter(file => file !== fileToDelete);
   const value = files.length > 0 ? files : '';
   input.onChange(value);
 };
-
 const FileInputFieldFF = _ref2 => {
   let {
     buttonLabel,
@@ -87,12 +72,10 @@ const FileInputFieldFF = _ref2 => {
     removeText: _index.default.t('Remove')
   })));
 };
-
 exports.FileInputFieldFF = FileInputFieldFF;
 FileInputFieldFF.propTypes = {
   /** `input` props provided by Final Form `Field` */
   input: _propTypes2.inputPropType.isRequired,
-
   /** `meta` props provided by Final Form `Field` */
   meta: _propTypes2.metaPropType.isRequired,
   buttonLabel: _propTypes.default.string,

package/build/cjs/FileInputFieldFF/{FileInputFieldFF.stories.js → FileInputFieldFF.prod.stories.js}

@@ -4,24 +4,40 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.WithValues = exports.Required = exports.PreventPlaceholder = exports.Multifile = exports.Default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _reactFinalForm = require("react-final-form");
-
 var _formDecorator = require("../formDecorator.js");
-
 var _propTypes = require("../shared/propTypes.js");
-
 var _index = require("../validators/index.js");
-
 var _FileInputFieldFF = require("./FileInputFieldFF.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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}\`.
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+Therefore, to add any props to the \`FileInputFieldFF\` or \`FileInputField\`, add those props to the parent Final Form \`Field\` component.
 
-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";
+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 files = [new File([], 'file1.txt'), new File([], 'file2.txt')];
-var _default = {
+var _default = exports.default = {
   title: 'File Input Field (Final Form)',
   component: _FileInputFieldFF.FileInputFieldFF,
   decorators: [_formDecorator.formDecorator],
@@ -33,22 +49,20 @@ var _default = {
     }
   },
   argTypes: {
-    input: { ..._propTypes.inputArgType
+    input: {
+      ..._propTypes.inputArgType
     },
-    meta: { ..._propTypes.metaArgType
+    meta: {
+      ..._propTypes.metaArgType
     }
   }
 };
-exports.default = _default;
-
 const Default = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
   component: _FileInputFieldFF.FileInputFieldFF,
   name: "upload",
   label: "This is a file upload"
 });
-
 exports.Default = Default;
-
 const Required = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
   component: _FileInputFieldFF.FileInputFieldFF,
   name: "upload",
@@ -56,18 +70,14 @@ const Required = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm
   required: true,
   validate: _index.hasValue
 });
-
 exports.Required = Required;
-
 const Multifile = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
   component: _FileInputFieldFF.FileInputFieldFF,
   name: "upload",
   label: "This is a file upload",
   multifile: true
 });
-
 exports.Multifile = Multifile;
-
 const WithValues = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
   component: _FileInputFieldFF.FileInputFieldFF,
   name: "upload",
@@ -77,16 +87,13 @@ const WithValues = () => /*#__PURE__*/_react.default.createElement(_reactFinalFo
   initialValue: files,
   validate: _index.hasValue
 });
-
 exports.WithValues = WithValues;
 WithValues.storyName = 'With values';
-
 const PreventPlaceholder = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
   component: _FileInputFieldFF.FileInputFieldFF,
   name: "upload",
   label: "This is a file upload",
   placeholder: ""
 });
-
 exports.PreventPlaceholder = PreventPlaceholder;
 PreventPlaceholder.storyName = 'Prevent placeholder';

package/build/cjs/FileInputFieldFF/features/accepts_file/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a multi-file IputField is rendered', () => {
   cy.visitStory('Testing:FileInput', 'Standard form');
 });

package/build/cjs/FileInputFieldFF/features/common/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a single-file FileInput is rendered', () => {
   cy.visitStory('Testing:FileInput', 'Standard form');
 });

package/build/cjs/FileInputFieldFF/features/displays_error/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.When)('a file with the wrong file type is provided', () => {
   cy.get('[name="fileTxt"]').uploadSingleFile('md', 'FileInput/file.md');
 });

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

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Required = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactFinalForm = require("react-final-form");
+var _formDecorator = require("../formDecorator.js");
+var _index = require("../validators/index.js");
+var _InputFieldFF = require("./InputFieldFF.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'Testing:InputFieldFF',
+  decorators: [_formDecorator.formDecorator]
+};
+const Default = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
+  component: _InputFieldFF.InputFieldFF,
+  name: "agree",
+  label: "Do you agree?"
+});
+exports.Default = Default;
+const Required = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
+  name: "agree",
+  component: _InputFieldFF.InputFieldFF,
+  required: true,
+  validate: _index.hasValue,
+  label: "Do you agree?"
+});
+exports.Required = Required;

package/build/cjs/InputFieldFF/InputFieldFF.js

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.InputFieldFF = void 0;
-
 var _input = require("@dhis2-ui/input");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _helpers = require("../shared/helpers.js");
-
 var _propTypes2 = require("../shared/propTypes.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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); }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const InputFieldFF = _ref => {
   let {
     input,
@@ -46,12 +38,10 @@ const InputFieldFF = _ref => {
     value: input.value
   }));
 };
-
 exports.InputFieldFF = InputFieldFF;
 InputFieldFF.propTypes = {
   /** `input` props received from Final Form `Field` */
   input: _propTypes2.inputPropType.isRequired,
-
   /** `meta` props received from Final Form `Field` */
   meta: _propTypes2.metaPropType.isRequired,
   error: _propTypes.default.bool,

package/build/cjs/InputFieldFF/{InputFieldFF.stories.js → InputFieldFF.prod.stories.js}

@@ -4,23 +4,39 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Statuses = exports.Required = exports.HelpText = exports.Disabled = exports.Default = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _reactFinalForm = require("react-final-form");
-
 var _formDecorator = require("../formDecorator.js");
-
 var _propTypes = require("../shared/propTypes.js");
-
 var _index = require("../validators/index.js");
-
 var _InputFieldFF = require("./InputFieldFF.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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}\`.
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+Therefore, to add any props to the \`InputFieldFF\` or \`InputField\`, add those props to the parent Final Form \`Field\` component.
 
-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 = {
+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.
+`;
+var _default = exports.default = {
   title: 'Input Field (Final Form)',
   component: _InputFieldFF.InputFieldFF,
   decorators: [_formDecorator.formDecorator],
@@ -32,22 +48,20 @@ var _default = {
     }
   },
   argTypes: {
-    input: { ..._propTypes.inputArgType
+    input: {
+      ..._propTypes.inputArgType
     },
-    meta: { ..._propTypes.metaArgType
+    meta: {
+      ..._propTypes.metaArgType
     }
   }
 };
-exports.default = _default;
-
 const Default = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
   component: _InputFieldFF.InputFieldFF,
   name: "agree",
   label: "Do you agree?"
 });
-
 exports.Default = Default;
-
 const Required = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
   name: "agree",
   component: _InputFieldFF.InputFieldFF,
@@ -55,28 +69,22 @@ const Required = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm
   validate: _index.hasValue,
   label: "Do you agree?"
 });
-
 exports.Required = Required;
-
 const Disabled = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
   name: "agree",
   component: _InputFieldFF.InputFieldFF,
   disabled: true,
   label: "Do you agree?"
 });
-
 exports.Disabled = Disabled;
-
 const HelpText = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
   name: "agree",
   component: _InputFieldFF.InputFieldFF,
   label: "Do you agree?",
   helpText: "Click to agree"
 });
-
 exports.HelpText = HelpText;
 HelpText.storyName = 'Help text';
-
 const Statuses = () => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
   name: "valid",
   component: _InputFieldFF.InputFieldFF,
@@ -96,5 +104,4 @@ const Statuses = () => /*#__PURE__*/_react.default.createElement(_react.default.
   error: true,
   validationText: "Validation text"
 }));
-
 exports.Statuses = Statuses;

package/build/cjs/InputFieldFF/features/can_set_a_value/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a Input with no text is rendered', () => {
   cy.visitStory('Testing:InputFieldFF', 'Default');
   cy.verifyFormValue('agree', undefined);

package/build/cjs/InputFieldFF/features/displays_error/index.js

@@ -1,9 +1,7 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 var _hasValue = require("../../../validators/hasValue.js");
-
 (0, _cypressCucumberPreprocessor.Given)('an empty, required Input is rendered', () => {
   cy.visitStory('Testing:InputFieldFF', 'Required');
   cy.verifyFormValue('agree', undefined);

package/build/cjs/MultiSelectFieldFF/{MultiSelectFieldFF.stories.e2e.js → MultiSelectFieldFF.e2e.stories.js}

@@ -1,19 +1,15 @@
 "use strict";
 
-var _react = require("@storybook/react");
-
-var _react2 = _interopRequireDefault(require("react"));
-
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Required = void 0;
+var _react = _interopRequireDefault(require("react"));
 var _reactFinalForm = require("react-final-form");
-
 var _formDecorator = require("../formDecorator.js");
-
 var _index = require("../validators/index.js");
-
 var _MultiSelectFieldFF = require("./MultiSelectFieldFF.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const defaultOptions = [{
   value: 'first',
   label: 'First'
@@ -21,15 +17,16 @@ const defaultOptions = [{
   value: 'second',
   label: 'Second'
 }];
-(0, _react.storiesOf)('Testing:MultiSelectFieldFF', module).addDecorator(_formDecorator.formDecorator).addParameters({
-  options: {
-    showPanel: false
-  }
-}).add('Required', (_, _ref) => {
+var _default = exports.default = {
+  title: 'MultiSelectFieldFF',
+  component: _MultiSelectFieldFF.MultiSelectFieldFF,
+  decorators: [_formDecorator.formDecorator]
+};
+const Required = (_, _ref) => {
   let {
     cypressProps
   } = _ref;
-  return /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
+  return /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
     required: true,
     name: "multiSelect",
     label: "Multi select",
@@ -37,4 +34,5 @@ const defaultOptions = [{
     validate: _index.hasValue,
     options: cypressProps.options || defaultOptions
   });
-});
+};
+exports.Required = Required;

package/build/cjs/MultiSelectFieldFF/MultiSelectFieldFF.js

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MultiSelectFieldFF = void 0;
-
 var _select = require("@dhis2-ui/select");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _helpers = require("../shared/helpers.js");
-
 var _propTypes2 = require("../shared/propTypes.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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); }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const MultiSelectFieldFF = _ref => {
   let {
     error,
@@ -43,19 +35,15 @@ const MultiSelectFieldFF = _ref => {
     onFocus: (0, _helpers.createFocusHandler)(input, onFocus),
     onChange: (0, _helpers.createSelectChangeHandler)(input),
     onBlur: (0, _helpers.createBlurHandler)(input, onBlur),
-    selected: input.value || []
-    /* input.value is an empty string initially, so we're providing an empty array if falsey */
-
+    selected: input.value || [] /* input.value is an empty string initially, so we're providing an empty array if falsey */
   }), options.map(option => /*#__PURE__*/_react.default.createElement(_select.MultiSelectOption, _extends({
     key: option.value
   }, option))));
 };
-
 exports.MultiSelectFieldFF = MultiSelectFieldFF;
 MultiSelectFieldFF.propTypes = {
   /** `input` props provided by Final Form `Field` */
   input: _propTypes2.inputPropType.isRequired,
-
   /** `meta` props provided by Final Form `Field` */
   meta: _propTypes2.metaPropType.isRequired,
   error: _propTypes.default.bool,

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

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.InitialValue = exports.Default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactFinalForm = require("react-final-form");
+var _formDecorator = require("../formDecorator.js");
+var _propTypes = require("../shared/propTypes.js");
+var _MultiSelectFieldFF = require("./MultiSelectFieldFF.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 options = [{
+  value: '1',
+  label: 'one'
+}, {
+  value: '2',
+  label: 'two'
+}, {
+  value: '3',
+  label: 'three'
+}, {
+  value: '4',
+  label: 'four'
+}, {
+  value: '5',
+  label: 'five'
+}, {
+  value: '6',
+  label: 'six'
+}, {
+  value: '7',
+  label: 'seven'
+}, {
+  value: '8',
+  label: 'eight'
+}, {
+  value: '9',
+  label: 'nine'
+}, {
+  value: '10',
+  label: 'ten'
+}];
+const initialValue = ['3', '4', '9', '10'];
+var _default = exports.default = {
+  title: 'Multi Select Field (Final Form)',
+  component: _MultiSelectFieldFF.MultiSelectFieldFF,
+  decorators: [_formDecorator.formDecorator],
+  parameters: {
+    docs: {
+      description: {
+        component: description
+      }
+    }
+  },
+  argTypes: {
+    input: {
+      ..._propTypes.inputArgType
+    },
+    meta: {
+      ..._propTypes.metaArgType
+    }
+  }
+};
+const Default = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
+  component: _MultiSelectFieldFF.MultiSelectFieldFF,
+  name: "agree",
+  label: "Do you agree?",
+  options: options
+});
+exports.Default = Default;
+const InitialValue = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
+  component: _MultiSelectFieldFF.MultiSelectFieldFF,
+  name: "agree",
+  label: "Do you agree?",
+  options: options,
+  initialValue: initialValue
+});
+exports.InitialValue = InitialValue;
+InitialValue.storyName = 'InitialValue';

package/build/cjs/MultiSelectFieldFF/features/can_set_a_value/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('the MultiSelect has two options', () => {
   const options = [{
     value: 'value1',

package/build/cjs/MultiSelectFieldFF/features/common/index.js

@@ -1,9 +1,8 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a required MultiSelect with no selected value', () => {
-  cy.visitStory('Testing:MultiSelectFieldFF', 'Required');
+  cy.visitStory('MultiSelectFieldFF', 'Required');
   cy.getFormValue('multiSelect');
   cy.verifyFormValue('multiSelect', undefined);
 });

package/build/cjs/MultiSelectFieldFF/features/displays_error/index.js

@@ -1,9 +1,7 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 var _hasValue = require("../../../validators/hasValue.js");
-
 (0, _cypressCucumberPreprocessor.When)('the user submits the form', () => {
   cy.get('button[type="submit"]').click();
 });