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

package/build/cjs/single-select-field/single-select-field.e2e.stories.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithoutOptions = exports.WithValidationText = exports.WithLoading = exports.WithLabelAndRequiredStatus = exports.WithLabel = exports.WithHelpText = exports.WithFilterable = exports.WithClearableAndSelectedOption = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _index = require("../index.js");
+var _index2 = require("./index.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'SingleSelectField'
+};
+const WithLabel = () => /*#__PURE__*/_react.default.createElement(_index2.SingleSelectField, {
+  label: "The label"
+}, /*#__PURE__*/_react.default.createElement(_index.SingleSelectOption, {
+  value: "1",
+  label: "one"
+}), /*#__PURE__*/_react.default.createElement(_index.SingleSelectOption, {
+  value: "2",
+  label: "two"
+}), /*#__PURE__*/_react.default.createElement(_index.SingleSelectOption, {
+  value: "3",
+  label: "three"
+}));
+exports.WithLabel = WithLabel;
+const WithHelpText = () => /*#__PURE__*/_react.default.createElement(_index2.SingleSelectField, {
+  helpText: "The help text"
+}, /*#__PURE__*/_react.default.createElement(_index.SingleSelectOption, {
+  value: "1",
+  label: "one"
+}), /*#__PURE__*/_react.default.createElement(_index.SingleSelectOption, {
+  value: "2",
+  label: "two"
+}), /*#__PURE__*/_react.default.createElement(_index.SingleSelectOption, {
+  value: "3",
+  label: "three"
+}));
+exports.WithHelpText = WithHelpText;
+const WithValidationText = () => /*#__PURE__*/_react.default.createElement(_index2.SingleSelectField, {
+  validationText: "The validation text"
+}, /*#__PURE__*/_react.default.createElement(_index.SingleSelectOption, {
+  value: "1",
+  label: "one"
+}), /*#__PURE__*/_react.default.createElement(_index.SingleSelectOption, {
+  value: "2",
+  label: "two"
+}), /*#__PURE__*/_react.default.createElement(_index.SingleSelectOption, {
+  value: "3",
+  label: "three"
+}));
+exports.WithValidationText = WithValidationText;
+const WithLabelAndRequiredStatus = () => /*#__PURE__*/_react.default.createElement(_index2.SingleSelectField, {
+  label: "The label",
+  required: true
+}, /*#__PURE__*/_react.default.createElement(_index.SingleSelectOption, {
+  value: "1",
+  label: "one"
+}), /*#__PURE__*/_react.default.createElement(_index.SingleSelectOption, {
+  value: "2",
+  label: "two"
+}), /*#__PURE__*/_react.default.createElement(_index.SingleSelectOption, {
+  value: "3",
+  label: "three"
+}));
+exports.WithLabelAndRequiredStatus = WithLabelAndRequiredStatus;
+const WithClearableAndSelectedOption = () => /*#__PURE__*/_react.default.createElement(_index2.SingleSelectField, {
+  selected: "1",
+  clearable: true
+}, /*#__PURE__*/_react.default.createElement(_index.SingleSelectOption, {
+  key: "1",
+  value: "1",
+  label: "One"
+}));
+exports.WithClearableAndSelectedOption = WithClearableAndSelectedOption;
+const WithFilterable = () => /*#__PURE__*/_react.default.createElement(_index2.SingleSelectField, {
+  filterable: true
+}, /*#__PURE__*/_react.default.createElement(_index.SingleSelectOption, {
+  key: "1",
+  value: "1",
+  label: "One"
+}));
+exports.WithFilterable = WithFilterable;
+const WithLoading = () => /*#__PURE__*/_react.default.createElement(_index2.SingleSelectField, {
+  loading: true
+});
+exports.WithLoading = WithLoading;
+const WithoutOptions = () => /*#__PURE__*/_react.default.createElement(_index2.SingleSelectField, null);
+exports.WithoutOptions = WithoutOptions;

package/build/cjs/single-select-field/single-select-field.js

@@ -4,32 +4,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SingleSelectField = void 0;
-
+var _uiConstants = require("@dhis2/ui-constants");
 var _box = require("@dhis2-ui/box");
-
 var _field = require("@dhis2-ui/field");
-
-var _uiConstants = require("@dhis2/ui-constants");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
-var _index = require("../index.js");
-
-var _index2 = _interopRequireDefault(require("../locales/index.js"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+var _index = _interopRequireDefault(require("../locales/index.js"));
+var _index2 = require("../single-select/index.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // TODO: translate
 const translate = (prop, interpolationObject) => {
   if (typeof prop === 'function') {
     return prop(interpolationObject);
   }
-
   return prop;
 };
-
 class SingleSelectField extends _react.default.Component {
   render() {
     const {
@@ -80,7 +69,7 @@ class SingleSelectField extends _react.default.Component {
     }, /*#__PURE__*/_react.default.createElement(_box.Box, {
       width: inputWidth,
       minWidth: "100px"
-    }, /*#__PURE__*/_react.default.createElement(_index.SingleSelect, {
+    }, /*#__PURE__*/_react.default.createElement(_index2.SingleSelect, {
       selected: selected,
       tabIndex: tabIndex,
       maxHeight: maxHeight,
@@ -107,107 +96,77 @@ class SingleSelectField extends _react.default.Component {
       dense: dense
     }, children)));
   }
-
 }
-
 exports.SingleSelectField = SingleSelectField;
 SingleSelectField.defaultProps = {
   dataTest: 'dhis2-uiwidgets-singleselectfield',
   selected: '',
-  clearText: () => _index2.default.t('Clear'),
-  empty: () => _index2.default.t('No data found'),
-  filterPlaceholder: () => _index2.default.t('Type to filter options'),
-  loadingText: () => _index2.default.t('Loading options'),
-  noMatchText: () => _index2.default.t('No options found')
+  clearText: () => _index.default.t('Clear'),
+  empty: () => _index.default.t('No data found'),
+  filterPlaceholder: () => _index.default.t('Type to filter options'),
+  loadingText: () => _index.default.t('Loading options'),
+  noMatchText: () => _index.default.t('No options found')
 };
 SingleSelectField.propTypes = {
   /** Should be `SingleSelectOption` components */
   children: _propTypes.default.node,
   className: _propTypes.default.string,
-
   /** Label for the button that clears selections */
   clearText: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
-
   /** Adds a button to the SingleSelect that clears selections when pressed */
   clearable: _propTypes.default.bool,
   dataTest: _propTypes.default.string,
-
   /** Makes the SingleSelect smaller */
   dense: _propTypes.default.bool,
-
   /** Disables the SingleSelect */
   disabled: _propTypes.default.bool,
-
   /** Text to display when there are no options */
   empty: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-
   /** Adds 'error' appearance for validation feedback. Mutually exclusive with 'valid' and 'warning' props */
   error: _uiConstants.sharedPropTypes.statusPropType,
-
   /** Placeholder text to show in the filter field when it is empty */
   filterPlaceholder: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
-
   /** Adds a field to filter options */
   filterable: _propTypes.default.bool,
-
   /** Useful guiding text to display below the SingleSelect */
   helpText: _propTypes.default.string,
-
   /** Grabs initial focus on the page */
   initialFocus: _propTypes.default.bool,
-
   /** Constrains the height of the input */
   inputMaxHeight: _propTypes.default.string,
-
   /** Sets the width of the input. Can be any valid CSS measurement */
   inputWidth: _propTypes.default.string,
-
   /** Text for the label above the SingleSelect */
   label: _propTypes.default.string,
-
   /** Applies a loading appearance to the dropdown options */
   loading: _propTypes.default.bool,
-
   /** Text to display when `loading` is true */
   loadingText: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
-
   /** Constrains height of the SingleSelect */
   maxHeight: _propTypes.default.string,
-
   /** Text to display when there are no filter results */
   noMatchText: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]),
-
   /** Placeholder text when the SingleSelect is empty */
   placeholder: _propTypes.default.string,
-
   /** Leading text to prefix selections */
   prefix: _propTypes.default.string,
-
   /** Indicates that a selection is required */
   required: _propTypes.default.bool,
-
   /** Selected item in the SingleSelect (the string should refer to the item's `value` attribute) */
   selected: _propTypes.default.string,
   tabIndex: _propTypes.default.string,
-
   /** Adds 'valid' appearance for validation feedback. Mutually exclusive with 'error' and 'warning' props */
   valid: _uiConstants.sharedPropTypes.statusPropType,
-
   /** Text to provide form validation feedback. Receives styles according to validation status */
   validationText: _propTypes.default.string,
-
   /** Adds 'warning' appearance for validation feedback. Mutually exclusive with 'valid' and 'error' props */
   warning: _uiConstants.sharedPropTypes.statusPropType,
-
   /** Called with signature `({ selected: string }, event)` */
   onBlur: _propTypes.default.func,
-
   /** Called with signature `({ selected: string }, event)` */
   onChange: _propTypes.default.func,
-
   /** Called with signature `({ selected: string }, event)` */
   onFocus: _propTypes.default.func,
-
   /** Called with signature `({ selected: string }, event)` */
   onKeyDown: _propTypes.default.func
 };

package/build/cjs/single-select-field/{single-select-field.stories.js → single-select-field.prod.stories.js}

@@ -4,21 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.WithHelpText = exports.StatusWarning = exports.StatusValid = exports.StatusError = exports.Required = exports.InputWidth = exports.DefaultLoadingText = exports.DefaultFilterPlaceholderAndNoMatchText = exports.DefaultEmpty = exports.DefaultClearText = exports.Default = void 0;
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _react = _interopRequireDefault(require("react"));
-
 var _index = require("../index.js");
-
 var _index2 = require("./index.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const description = `
+\`SingleSelectField\` is a wrapper around a \`SingleSelect\` component that adds a label, help text, validation text, and other features.
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+See the SingleSelect for more information, and read more at [Design System: Select](https://github.com/dhis2/design-system/blob/master/molecules/select.md#multiple-selection).
 
-const description = "\n`SingleSelectField` is a wrapper around a `SingleSelect` component that adds a label, help text, validation text, and other features.\n\nSee the SingleSelect for more information, and read more at [Design System: Select](https://github.com/dhis2/design-system/blob/master/molecules/select.md#multiple-selection).\n\n```js\nimport { SingleSelectField, SingleSelectOption } from '@dhis2/ui'\n```\n\n_**Note**: The dropdowns in some of the following stories won't appear correctly on this page. View these demos in the 'Canvas' tab._\n";
-
-const onChange = selected => alert("Selected changed to: ".concat(JSON.stringify(selected, null, 2)));
+\`\`\`js
+import { SingleSelectField, SingleSelectOption } from '@dhis2/ui'
+\`\`\`
 
+_**Note**: The dropdowns in some of the following stories won't appear correctly on this page. View these demos in the 'Canvas' tab._
+`;
+const onChange = selected => alert(`Selected changed to: ${JSON.stringify(selected, null, 2)}`);
 const options = [/*#__PURE__*/_react.default.createElement(_index.SingleSelectOption, {
   key: "1",
   value: "1",
@@ -60,7 +62,7 @@ const options = [/*#__PURE__*/_react.default.createElement(_index.SingleSelectOp
   value: "10",
   label: "ten"
 })];
-var _default = {
+var _default = exports.default = {
   title: 'Single Select Field',
   component: _index2.SingleSelectField,
   subcomponents: {
@@ -74,77 +76,70 @@ var _default = {
     }
   },
   // default args for stories
-  args: { // Fix default prop issues - causes 'i18n is not defined' error
+  args: {
+    // Fix default prop issues - causes 'i18n is not defined' error
     ..._index2.SingleSelectField.defaultProps,
     label: 'Default label',
     children: options,
     onChange: onChange
   },
   argTypes: {
-    valid: { ..._uiConstants.sharedPropTypes.statusArgType
+    valid: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     },
-    warning: { ..._uiConstants.sharedPropTypes.statusArgType
+    warning: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     },
-    error: { ..._uiConstants.sharedPropTypes.statusArgType
+    error: {
+      ..._uiConstants.sharedPropTypes.statusArgType
     }
   }
 };
-exports.default = _default;
-
 const Template = args => /*#__PURE__*/_react.default.createElement(_index2.SingleSelectField, args);
-
-const Default = Template.bind({});
-exports.Default = Default;
-const WithHelpText = Template.bind({});
-exports.WithHelpText = WithHelpText;
+const Default = exports.Default = Template.bind({});
+const WithHelpText = exports.WithHelpText = Template.bind({});
 WithHelpText.args = {
   helpText: 'Helpful text.'
 };
 WithHelpText.parameters = {
   docs: {
     description: {
-      story: "_**Note**: The dropdowns in the following stories won't appear correctly on this page. View these demos in the 'Canvas' tab._"
+      story: `_**Note**: The dropdowns in the following stories won't appear correctly on this page. View these demos in the 'Canvas' tab._`
     }
   }
 };
-const StatusValid = Template.bind({});
-exports.StatusValid = StatusValid;
+const StatusValid = exports.StatusValid = Template.bind({});
 StatusValid.args = {
   valid: true,
   validationText: 'Totally valid!',
   ...WithHelpText.args
 };
 StatusValid.storyName = 'Status: Valid';
-const StatusWarning = Template.bind({});
-exports.StatusWarning = StatusWarning;
+const StatusWarning = exports.StatusWarning = Template.bind({});
 StatusWarning.args = {
   warning: true,
   validationText: 'Hm, not quite, I warn thee!',
   ...WithHelpText.args
 };
 StatusWarning.storyName = 'Status: Warning';
-const StatusError = Template.bind({});
-exports.StatusError = StatusError;
+const StatusError = exports.StatusError = Template.bind({});
 StatusError.args = {
   error: true,
   validationText: 'That value is wrong. Sorry!',
   ...WithHelpText.args
 };
 StatusError.storyName = 'Status: Error';
-const Required = Template.bind({});
-exports.Required = Required;
+const Required = exports.Required = Template.bind({});
 Required.args = {
   required: true
 };
-const InputWidth = Template.bind({});
-exports.InputWidth = InputWidth;
+const InputWidth = exports.InputWidth = Template.bind({});
 InputWidth.args = {
   inputWidth: '200px',
   label: 'A very long label indeed, well at least longer than the input field to show how it looks and works and stuff',
   required: true
 };
-const DefaultClearText = Template.bind({});
-exports.DefaultClearText = DefaultClearText;
+const DefaultClearText = exports.DefaultClearText = Template.bind({});
 DefaultClearText.args = {
   selected: '1',
   clearable: true,
@@ -156,22 +151,19 @@ DefaultClearText.args = {
   })
 };
 DefaultClearText.storyName = 'Default: clearText';
-const DefaultEmpty = Template.bind({});
-exports.DefaultEmpty = DefaultEmpty;
+const DefaultEmpty = exports.DefaultEmpty = Template.bind({});
 DefaultEmpty.args = {
   children: null,
   label: null
 };
 DefaultEmpty.storyName = 'Default: empty';
-const DefaultFilterPlaceholderAndNoMatchText = Template.bind({});
-exports.DefaultFilterPlaceholderAndNoMatchText = DefaultFilterPlaceholderAndNoMatchText;
+const DefaultFilterPlaceholderAndNoMatchText = exports.DefaultFilterPlaceholderAndNoMatchText = Template.bind({});
 DefaultFilterPlaceholderAndNoMatchText.args = {
   filterable: true,
   ...DefaultEmpty.args
 };
 DefaultFilterPlaceholderAndNoMatchText.storyName = 'Default: filterPlaceholder and noMatchText';
-const DefaultLoadingText = Template.bind({});
-exports.DefaultLoadingText = DefaultLoadingText;
+const DefaultLoadingText = exports.DefaultLoadingText = Template.bind({});
 DefaultLoadingText.args = {
   loading: true,
   ...DefaultEmpty.args

package/build/cjs/single-select-option/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "SingleSelectOption", {
     return _singleSelectOption.SingleSelectOption;
   }
 });
-
 var _singleSelectOption = require("./single-select-option.js");

package/build/cjs/single-select-option/single-select-option.js

@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SingleSelectOption = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const SingleSelectOption = _ref => {
   let {
     label,
@@ -39,9 +32,8 @@ const SingleSelectOption = _ref => {
   }, label, /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "3808134379",
     dynamic: [_uiConstants.colors.grey900, _uiConstants.spacers.dp8, _uiConstants.spacers.dp12, _uiConstants.colors.grey200, _uiConstants.colors.teal700, _uiConstants.colors.white, _uiConstants.colors.grey500]
-  }, ["div.__jsx-style-dynamic-selector{cursor:pointer;font-size:14px;-webkit-text-decoration:none;text-decoration:none;color:".concat(_uiConstants.colors.grey900, ";padding-block:").concat(_uiConstants.spacers.dp8, ";padding-inline:").concat(_uiConstants.spacers.dp12, ";}"), "div.__jsx-style-dynamic-selector:hover{background-color:".concat(_uiConstants.colors.grey200, ";}"), "div.__jsx-style-dynamic-selector:active,div.active.__jsx-style-dynamic-selector{background-color:".concat(_uiConstants.colors.teal700, ";color:").concat(_uiConstants.colors.white, ";cursor:auto;}"), "div.disabled.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey500, ";cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}"), "div.disabled.__jsx-style-dynamic-selector:hover{background-color:initial;}"]));
+  }, [`div.__jsx-style-dynamic-selector{cursor:pointer;font-size:14px;-webkit-text-decoration:none;text-decoration:none;color:${_uiConstants.colors.grey900};padding-block:${_uiConstants.spacers.dp8};padding-inline:${_uiConstants.spacers.dp12};}`, `div.__jsx-style-dynamic-selector:hover{background-color:${_uiConstants.colors.grey200};}`, `div.__jsx-style-dynamic-selector:active,div.active.__jsx-style-dynamic-selector{background-color:${_uiConstants.colors.teal700};color:${_uiConstants.colors.white};cursor:auto;}`, `div.disabled.__jsx-style-dynamic-selector{color:${_uiConstants.colors.grey500};cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}`, "div.disabled.__jsx-style-dynamic-selector:hover{background-color:initial;}"]));
 };
-
 exports.SingleSelectOption = SingleSelectOption;
 SingleSelectOption.defaultProps = {
   dataTest: 'dhis2-uicore-singleselectoption'

package/build/es/multi-select/__tests__/selection-list.test.js

@@ -8,15 +8,18 @@ describe('<SelectionList />', () => {
   beforeEach(() => {
     // Ensure process.env is also reset for cached modules
     jest.resetModules();
-    process.env = { ...env
-    }; // Allow spying on console.error and silence rendering errors
+    process.env = {
+      ...env
+    };
 
+    // Allow spying on console.error and silence rendering errors
     jest.spyOn(console, 'error').mockImplementation(() => {});
   });
   afterEach(() => {
     // Restore process.env to original state
-    process.env = env; // Restore all mocks back to original values
+    process.env = env;
 
+    // Restore all mocks back to original values
     jest.restoreAllMocks();
   });
   describe('production', () => {

package/build/es/multi-select/features/accepts_blur_cb/index.js

@@ -1,6 +1,6 @@
 import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a MultiSelect with onBlur handler is rendered', () => {
-  cy.visitStory('MultiSelect', 'With onBlur');
+  cy.visitStory('MultiSelect', 'With on blur');
 });
 Then('the onBlur handler is called', () => {
   cy.window().should(win => {

package/build/es/multi-select/features/accepts_focus_cb/index.js

@@ -1,6 +1,6 @@
 import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a MultiSelect with onFocus handler is rendered', () => {
-  cy.visitStory('MultiSelect', 'With onFocus');
+  cy.visitStory('MultiSelect', 'With on focus');
 });
 Then('the onFocus handler is called', () => {
   cy.window().should(win => {

package/build/es/multi-select/features/accepts_initial_focus/index.js

@@ -1,4 +1,4 @@
 import { Given } from '@badeball/cypress-cucumber-preprocessor';
 Given('a MultiSelect with initial focus is rendered', () => {
-  cy.visitStory('MultiSelect', 'With initialFocus');
+  cy.visitStory('MultiSelect', 'With initial focus');
 });

package/build/es/multi-select/features/accepts_max_height/index.js

@@ -3,7 +3,7 @@ Given('a MultiSelect with more than ten options is rendered', () => {
   cy.visitStory('MultiSelect', 'With more than ten options');
 });
 Given('a MultiSelect with more than three options and a 100px max-height is rendered', () => {
-  cy.visitStory('MultiSelect', 'With more than three options and a 100px max-height');
+  cy.visitStory('MultiSelect', 'With more than three options and a 100 px max-height');
 });
 Then('has the default max-height', () => {
   cy.get('[data-test="dhis2-uicore-select-menu-menuwrapper"]').should('have.css', 'max-height', '280px');

package/build/es/multi-select/features/allows_selecting/index.js

@@ -1,9 +1,9 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a MultiSelect with a disabled option and onChange handler is rendered', () => {
-  cy.visitStory('MultiSelect', 'With disabled option and onChange');
+  cy.visitStory('MultiSelect', 'With disabled option and on change');
 });
 Given('a MultiSelect with custom options and onChange handler is rendered', () => {
-  cy.visitStory('MultiSelect', 'With custom options and onChange');
+  cy.visitStory('MultiSelect', 'With custom options and on change');
 });
 When('an option is clicked', () => {
   cy.contains('option one').click();

package/build/es/multi-select/features/can_be_cleared/index.js

@@ -1,6 +1,6 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a clearable MultiSelect with a selection and onchange handler is rendered', () => {
-  cy.visitStory('MultiSelect', 'With clear button, selection and onChange');
+  cy.visitStory('MultiSelect', 'With clear button, selection and on change');
 });
 When('the clear button is clicked', () => {
   cy.get('[data-test="dhis2-uicore-multiselect-clear"]').click();

package/build/es/multi-select/features/common/index.js

@@ -1,9 +1,9 @@
 import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a MultiSelect with options and onChange handler is rendered', () => {
-  cy.visitStory('MultiSelect', 'With options and onChange');
+  cy.visitStory('MultiSelect', 'With options and on change');
 });
 Given('a MultiSelect with options, a selection and onChange handler is rendered', () => {
-  cy.visitStory('MultiSelect', 'With options, a selection and onChange');
+  cy.visitStory('MultiSelect', 'With options, a selection and on change');
 });
 Given('a MultiSelect is rendered to which options can be added', () => {
   cy.visitStory('MultiSelect', 'With options that can be added to the input');

package/build/es/multi-select/features/menu_width_matches_input/index.js

@@ -6,7 +6,7 @@ Given('a MultiSelect with hidden sibling elements', () => {
   });
 });
 When('the button is clicked', () => {
-  cy.get('button').click();
+  cy.get('[data-test="dhis2-uicore-button"]').click();
 });
 Then('the siblings are displayed', () => {
   cy.get('.toggler').should('exist').and('have.length', 2);

package/build/es/multi-select/features/position/index.js

@@ -50,7 +50,7 @@ Then('the top of the menu is aligned with the bottom of the input', () => {
     const $menu = menus[0];
     const selectRect = $select.getBoundingClientRect();
     const menuRect = $menu.getBoundingClientRect();
-    expect(menuRect.top).to.equal(selectRect.bottom);
+    expect(menuRect.top).to.be.closeTo(selectRect.bottom, 1);
   });
 });
 Then('the bottom of the menu is aligned with the top of the input', () => {
@@ -64,7 +64,7 @@ Then('the bottom of the menu is aligned with the top of the input', () => {
     const $menu = menus[0];
     const selectRect = $select.getBoundingClientRect();
     const menuRect = $menu.getBoundingClientRect();
-    expect(selectRect.top).to.equal(menuRect.bottom);
+    expect(selectRect.top).to.be.closeTo(menuRect.bottom, 1);
   });
 });
 Then('it is rendered on top of the MultiSelect', () => {
@@ -93,7 +93,7 @@ Then('the left of the Menu is aligned with the left of the Input', () => {
     const $menu = menus[0];
     const selectRect = $select.getBoundingClientRect();
     const menuRect = $menu.getBoundingClientRect();
-    expect(selectRect.left).to.equal(menuRect.left);
+    expect(selectRect.left).to.be.closeTo(menuRect.left, 1);
   });
 });
 Then('the Menu and the Input have an equal width', () => {
@@ -107,6 +107,6 @@ Then('the Menu and the Input have an equal width', () => {
     const $menu = menus[0];
     const inputRect = $input.getBoundingClientRect();
     const menuRect = $menu.getBoundingClientRect();
-    expect(inputRect.width).to.equal(menuRect.width);
+    expect(inputRect.width).to.be.closeTo(menuRect.width, 1);
   });
 });

package/build/es/multi-select/features/position.feature

@@ -44,4 +44,3 @@ Feature: Position of MultiSelect menu dropdown
         Then the Input remains the same height
         And the top of the menu is aligned with the bottom of the input
         And the left of the Menu is aligned with the left of the Input
-

package/build/es/multi-select/filterable-menu.js

@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { FilterableMenu as CommonFilterableMenu } from '../select/index.js';
 import { Menu } from './menu.js';
-
 const FilterableMenu = _ref => {
   let {
     dataTest,
@@ -28,7 +27,6 @@ const FilterableMenu = _ref => {
     Menu: Menu
   });
 };
-
 FilterableMenu.propTypes = {
   dataTest: PropTypes.string.isRequired,
   noMatchText: PropTypes.string.isRequired,