@dhis2-ui/select 9.5.0-alpha.1 → 9.6.0

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

@@ -1,5 +1,4 @@
-import '../common/index.js';
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a MultiSelect with options and a loading flag is rendered', () => {
   cy.visitStory('MultiSelect', 'With options and loading');
 });

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

@@ -1,14 +1,10 @@
-import '../common/index.js';
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 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');
 });
-Given('the MultiSelect is open', () => {
-  cy.get('[data-test="dhis2-uicore-select"]').click();
-});
 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/accepts_placeholder/index.js

@@ -1,5 +1,4 @@
-import '../common/index.js';
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a MultiSelect with a placeholder and no selection is rendered', () => {
   cy.visitStory('MultiSelect', 'With placeholder');
 });

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

@@ -1,5 +1,4 @@
-import '../common/index.js';
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a MultiSelect with a prefix and no selection is rendered', () => {
   cy.visitStory('MultiSelect', 'With prefix');
 });

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

@@ -1,5 +1,4 @@
-import '../common/index.js';
-import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a MultiSelect with invalid options is rendered', () => {
   cy.visitStory('MultiSelect', 'With invalid options');
 });

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

@@ -1,5 +1,4 @@
-import '../common/index.js';
-import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
+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');
 });
@@ -10,7 +9,7 @@ When('an option is clicked', () => {
   cy.contains('option one').click();
 });
 When('the selected option is clicked', () => {
-  cy.get('[data-test="dhis2-uicore-layer"]').contains('option one').click();
+  cy.get('[data-test="dhis2-uicore-multiselectoption"]:contains("option one")').click();
 });
 When('another option is clicked', () => {
   cy.contains('option two').click();
@@ -22,7 +21,7 @@ When('the disabled option is clicked', () => {
   cy.contains('disabled option').click();
 });
 When('the selected option is clicked again', () => {
-  cy.get('[data-test="dhis2-uicore-multiselectoption"] label').contains('option one').click();
+  cy.get('[data-test="dhis2-uicore-multiselectoption"]:contains("option one")').click();
 });
 Then('the clicked option is selected', () => {
   cy.window().should(win => {

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

@@ -1,5 +1,4 @@
-import '../common/index.js';
-import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
+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');
 });

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

@@ -1,5 +1,4 @@
-import '../common/index.js';
-import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a disabled MultiSelect with options is rendered', () => {
   cy.visitStory('MultiSelect', 'With options and disabled');
 });
@@ -15,9 +14,6 @@ Given('the MultiSelect is focused', () => {
   cy.get('[data-test="dhis2-uicore-select-input"]').focus();
   cy.focused().should('have.attr', 'data-test', 'dhis2-uicore-select-input');
 });
-When('the MultiSelect input is clicked', () => {
-  cy.get('[data-test="dhis2-uicore-select-input"]').click();
-});
 When('the down arrowkey is pressed on the focused element', () => {
   cy.focused().type('{downarrow}');
 });

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

@@ -1,5 +1,4 @@
-import '../common/index.js';
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('an empty MultiSelect is rendered', () => {
   cy.visitStory('MultiSelect', 'Empty');
 });

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

@@ -1,5 +1,4 @@
-import '../common/index.js';
-import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a filterable MultiSelect with options is rendered', () => {
   cy.visitStory('MultiSelect', 'With filter field');
 });

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

@@ -1,5 +1,4 @@
-import '../common/index.js';
-import { Given, When } from 'cypress-cucumber-preprocessor/steps';
+import { Given, When } from '@badeball/cypress-cucumber-preprocessor';
 Given('a MultiSelect with options is rendered', () => {
   cy.visitStory('MultiSelect', 'With options');
 });

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

@@ -1,4 +1,4 @@
-import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
+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');
 });

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

@@ -1,5 +1,4 @@
-import '../common/index.js';
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a MultiSelect with options with a duplicate value and this value is selected', () => {
   cy.visitStory('MultiSelect', 'With duplicate selected option values');
 });

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

@@ -1,5 +1,4 @@
-import '../common/index.js';
-import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a MultiSelect with hidden sibling elements', () => {
   cy.visitStory('MultiSelect', 'Menu width changing');
   cy.get('[data-test="dhis2-uicore-multiselect"]').then($el => {

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

@@ -1,5 +1,4 @@
-import '../common/index.js';
-import { Given, Then, When } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor';
 Given('there is enough space below the anchor to fit the MultiSelect menu', () => {
   cy.visitStory('MultiSelect', 'Default position');
 });

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

@@ -1,5 +1,4 @@
-import '../common/index.js';
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a MultiSelect with options and a selection is rendered', () => {
   cy.visitStory('MultiSelect', 'With options and a selection');
 });

package/build/es/multi-select/input.js

@@ -23,7 +23,7 @@ const Input = _ref => {
   } = _ref;
   const hasSelection = selected.length > 0;
 
-  const onClear = (_, e) => {
+  const onClear = e => {
     const data = {
       selected: []
     };
@@ -32,7 +32,7 @@ const Input = _ref => {
   };
 
   return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1209882888", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + (cx('root', className) || "")
+    className: _JSXStyle.dynamic([["64009541", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + (cx('root', className) || "")
   }, /*#__PURE__*/React.createElement(InputPrefix, {
     prefix: prefix,
     dataTest: "".concat(dataTest, "-prefix")
@@ -40,22 +40,22 @@ const Input = _ref => {
     placeholder: placeholder,
     dataTest: "".concat(dataTest, "-placeholder")
   }), hasSelection && /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1209882888", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
+    className: _JSXStyle.dynamic([["64009541", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
   }, /*#__PURE__*/React.createElement(SelectionList, {
     selected: selected,
     onChange: onChange,
     options: options,
     disabled: disabled
   })), hasSelection && clearable && !disabled && /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["1209882888", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-right"
+    className: _JSXStyle.dynamic([["64009541", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-right"
   }, /*#__PURE__*/React.createElement(InputClearButton, {
     onClear: onClear,
     clearText: clearText,
     dataTest: "".concat(dataTest, "-clear")
   })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1209882888",
+    id: "64009541",
     dynamic: [colors.grey900]
-  }, [".root.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:".concat(colors.grey900, ";font-size:14px;line-height:16px;}"), ".root-input.__jsx-style-dynamic-selector{overflow-y:auto;-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:wrap;-ms-flex-flow:wrap;flex-flow:wrap;gap:4px;}", ".root-right.__jsx-style-dynamic-selector{margin-inline-start:auto;margin-inline-end:10px;}"]), /*#__PURE__*/React.createElement(_JSXStyle, {
+  }, [".root.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:".concat(colors.grey900, ";font-size:14px;line-height:16px;}"), ".root-input.__jsx-style-dynamic-selector{overflow-y:auto;-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:wrap;-ms-flex-flow:wrap;flex-flow:wrap;gap:4px;}", ".root-right.__jsx-style-dynamic-selector{margin-inline-start:auto;}"]), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1331770409",
     dynamic: [inputMaxHeight]
   }, [".root-input.__jsx-style-dynamic-selector{max-height:".concat(inputMaxHeight, ";}")]));

package/build/es/multi-select-field/features/accepts_help_text/index.js

@@ -1,4 +1,4 @@
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a MultiSelectField with help text is rendered', () => {
   cy.visitStory('MultiSelectField', 'With help text');
 });

package/build/es/multi-select-field/features/accepts_label/index.js

@@ -1,4 +1,4 @@
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a MultiSelectField with a label is rendered', () => {
   cy.visitStory('MultiSelectField', 'With label');
 });

package/build/es/multi-select-field/features/accepts_validation_text/index.js

@@ -1,4 +1,4 @@
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a MultiSelectField with validation text is rendered', () => {
   cy.visitStory('MultiSelectField', 'With validation text');
 });

package/build/es/multi-select-field/features/can_be_required/index.js

@@ -1,4 +1,4 @@
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a MultiSelectField with label and a required flag is rendered', () => {
   cy.visitStory('MultiSelectField', 'With label and required status');
 });

package/build/es/multi-select-field/features/has_default_clear_text/index.js

@@ -1,7 +1,10 @@
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a clearable MultiSelectField with selected option is rendered', () => {
   cy.visitStory('MultiSelectField', 'With clearable and selected option');
 });
+When('the clear button is hovered', () => {
+  cy.get('[data-test="dhis2-uicore-multiselect-clear"]').trigger('mouseover', 'top');
+});
 Then('the clear text is visible', () => {
   cy.contains('Clear').should('be.visible');
 });

package/build/es/multi-select-field/features/has_default_clear_text.feature

@@ -2,4 +2,5 @@ Feature: Clear text for the MultiSelectField
 
     Scenario: Rendering a clearable MultiSelectField
         Given a clearable MultiSelectField with selected option is rendered
+        When the clear button is hovered
         Then the clear text is visible

package/build/es/multi-select-field/features/has_default_empty_text/index.js

@@ -1,4 +1,4 @@
-import { Given, Then, When } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor';
 Given('an empty MultiSelectField is rendered', () => {
   cy.visitStory('MultiSelectField', 'Without options');
 });

package/build/es/multi-select-field/features/has_default_filter_nomatch_text/index.js

@@ -1,4 +1,4 @@
-import { Given, Then, When } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor';
 Given('a filterable MultiSelectField is rendered', () => {
   cy.visitStory('MultiSelectField', 'With filterable');
 });

package/build/es/multi-select-field/features/has_default_filter_placeholder/index.js

@@ -1,4 +1,4 @@
-import { Given, Then, When } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor';
 Given('a filterable MultiSelectField is rendered', () => {
   cy.visitStory('MultiSelectField', 'With filterable');
 });

package/build/es/multi-select-field/features/has_default_loading_text/index.js

@@ -1,4 +1,4 @@
-import { Given, Then, When } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor';
 Given('a loading MultiSelectField is rendered', () => {
   cy.visitStory('MultiSelectField', 'With loading');
 });

package/build/es/select/input-clear-button.js

@@ -1,4 +1,6 @@
-import { Button } from '@dhis2-ui/button';
+import _JSXStyle from "styled-jsx/style";
+import { Tooltip } from '@dhis2-ui/tooltip';
+import { colors, theme } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React from 'react';
 
@@ -9,14 +11,29 @@ const InputClearButton = _ref => {
     className,
     dataTest
   } = _ref;
-  return /*#__PURE__*/React.createElement(Button, {
-    small: true,
-    secondary: true,
-    dataTest: dataTest,
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    openDelay: 500,
+    content: clearText
+  }, /*#__PURE__*/React.createElement("button", {
+    "data-test": dataTest,
     onClick: onClear,
     type: "button",
-    className: className
-  }, clearText);
+    className: _JSXStyle.dynamic([["2606883952", [colors.grey500, colors.grey800, colors.grey200, theme.focus]]]) + " " + (className || "")
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: _JSXStyle.dynamic([["2606883952", [colors.grey500, colors.grey800, colors.grey200, theme.focus]]])
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Zm3.536-5.879a1 1 0 1 1-1.415 1.414l-2.12-2.12-2.122 2.121a1 1 0 1 1-1.415-1.414L6.586 8 4.464 5.878A1 1 0 1 1 5.88 4.464L8 6.586l2.121-2.121a1 1 0 1 1 1.415 1.414L9.415 8l2.12 2.121Z",
+    fill: "none",
+    className: _JSXStyle.dynamic([["2606883952", [colors.grey500, colors.grey800, colors.grey200, theme.focus]]])
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2606883952",
+    dynamic: [colors.grey500, colors.grey800, colors.grey200, theme.focus]
+  }, ["button.__jsx-style-dynamic-selector{background:none;border:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;height:24px;width:24px;border-radius:3px;}", "button.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector path.__jsx-style-dynamic-selector{fill:".concat(colors.grey500, ";}"), "button.__jsx-style-dynamic-selector:hover svg.__jsx-style-dynamic-selector path.__jsx-style-dynamic-selector{fill:".concat(colors.grey800, ";}"), "button.__jsx-style-dynamic-selector:hover{background:".concat(colors.grey200, ";}"), "button.__jsx-style-dynamic-selector:focus{outline:2px solid ".concat(theme.focus, ";}")])));
 };
 
 InputClearButton.propTypes = {

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

@@ -1,5 +1,4 @@
-import '../common/index.js';
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a SingleSelect with onBlur handler is rendered', () => {
   cy.visitStory('SingleSelect', 'With onBlur');
 });

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

@@ -1,5 +1,4 @@
-import '../common/index.js';
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a SingleSelect with onFocus handler is rendered', () => {
   cy.visitStory('SingleSelect', 'With onFocus');
 });

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

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

package/build/es/single-select/features/accepts_loading/index.js

@@ -1,5 +1,4 @@
-import '../common/index.js';
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a SingleSelect with options and a loading flag is rendered', () => {
   cy.visitStory('SingleSelect', 'With options and loading');
 });

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

@@ -1,14 +1,10 @@
-import '../common/index.js';
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a SingleSelect with more than ten options is rendered', () => {
   cy.visitStory('SingleSelect', 'With more than ten options');
 });
 Given('a SingleSelect with more than three options and a 100px max-height is rendered', () => {
   cy.visitStory('SingleSelect', 'With more than three options and a 100px max-height');
 });
-Given('the SingleSelect is open', () => {
-  cy.get('[data-test="dhis2-uicore-select"]').click();
-});
 Then('has the default max-height', () => {
   cy.get('[data-test="dhis2-uicore-select-menu-menuwrapper"]').should('have.css', 'max-height', '280px');
 });

package/build/es/single-select/features/accepts_placeholder/index.js

@@ -1,5 +1,4 @@
-import '../common/index.js';
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a SingleSelect with a placeholder and no selection is rendered', () => {
   cy.visitStory('SingleSelect', 'With placeholder');
 });

package/build/es/single-select/features/accepts_prefix/index.js

@@ -1,5 +1,4 @@
-import '../common/index.js';
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a SingleSelect with a prefix and no selection is rendered', () => {
   cy.visitStory('SingleSelect', 'With prefix');
 });

package/build/es/single-select/features/allows_invalid_options/index.js

@@ -1,5 +1,4 @@
-import '../common/index.js';
-import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a SingleSelect with invalid options is rendered', () => {
   cy.visitStory('SingleSelect', 'With invalid options');
 });

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

@@ -1,5 +1,4 @@
-import '../common/index.js';
-import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a SingleSelect with a disabled option and onChange handler is rendered', () => {
   cy.visitStory('SingleSelect', 'With disabled option and onChange');
 });

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

@@ -1,5 +1,4 @@
-import '../common/index.js';
-import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a clearable SingleSelect with a selection and onchange handler is rendered', () => {
   cy.visitStory('SingleSelect', 'With clear button, selection and onChange');
 });

package/build/es/single-select/features/can_be_disabled/index.js

@@ -1,5 +1,4 @@
-import '../common/index.js';
-import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a disabled SingleSelect with options is rendered', () => {
   cy.visitStory('SingleSelect', 'With options and disabled');
 });

package/build/es/single-select/features/can_be_empty/index.js

@@ -1,5 +1,4 @@
-import '../common/index.js';
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('an empty SingleSelect is rendered', () => {
   cy.visitStory('SingleSelect', 'Empty');
 });

package/build/es/single-select/features/can_be_filtered/index.js

@@ -1,5 +1,4 @@
-import '../common/index.js';
-import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a filterable SingleSelect with options is rendered', () => {
   cy.visitStory('SingleSelect', 'With filter field');
 });

package/build/es/single-select/features/can_be_opened_and_closed/index.js

@@ -1,5 +1,4 @@
-import '../common/index.js';
-import { Given, When } from 'cypress-cucumber-preprocessor/steps';
+import { Given, When } from '@badeball/cypress-cucumber-preprocessor';
 Given('a SingleSelect with options is rendered', () => {
   cy.visitStory('SingleSelect', 'With options');
 });

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

@@ -1,4 +1,4 @@
-import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a SingleSelect with options and onChange handler is rendered', () => {
   cy.visitStory('SingleSelect', 'With options and onChange');
 });

package/build/es/single-select/features/duplicate_option_values/index.js

@@ -1,5 +1,4 @@
-import '../common/index.js';
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a SingleSelect with options with a duplicate value and this value is selected', () => {
   cy.visitStory('SingleSelect', 'With duplicate selected option values');
 });
@@ -7,6 +6,6 @@ Then('the first option with the selected value is displayed in the input', () =>
   cy.get('[data-test="dhis2-uicore-select-input"]').should('contain', 'option one');
 });
 Then('both options are highlighted in the dropdown', () => {
-  cy.get('[data-test="dhis2-uicore-singleselectoption"]').contains('option one').should('have.class', 'active');
-  cy.get('[data-test="dhis2-uicore-singleselectoption"]').contains('option one a').should('have.class', 'active');
+  cy.get('[data-test="dhis2-uicore-singleselectoption"]:contains("option one")').should('have.class', 'active');
+  cy.get('[data-test="dhis2-uicore-singleselectoption"]:contains("option one a")').should('have.class', 'active');
 });

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

@@ -1,5 +1,4 @@
-import '../common/index.js';
-import { Given, When, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a SingleSelect with hidden sibling elements', () => {
   cy.visitStory('SingleSelect', 'Menu width changing');
   cy.get('[data-test="dhis2-uicore-singleselect"]').then($el => {

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

@@ -1,4 +1,4 @@
-import { Given, Then, When } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then, When } from '@badeball/cypress-cucumber-preprocessor';
 Given('there is enough space below the anchor to fit the SingleSelect menu', () => {
   cy.visitStory('SingleSelect', 'Default position');
 });

package/build/es/single-select/features/shows_selections/index.js

@@ -1,5 +1,4 @@
-import '../common/index.js';
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a SingleSelect with options and a selection is rendered', () => {
   cy.visitStory('SingleSelect', 'With options and a selection');
 });

package/build/es/single-select/input.js

@@ -23,7 +23,7 @@ const Input = _ref => {
   } = _ref;
   const hasSelection = selected && typeof selected === 'string';
 
-  const onClear = (_, e) => {
+  const onClear = e => {
     const data = {
       selected: ''
     };
@@ -32,7 +32,7 @@ const Input = _ref => {
   };
 
   return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3987817844", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + (cx('root', className) || "")
+    className: _JSXStyle.dynamic([["2186325794", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + (cx('root', className) || "")
   }, /*#__PURE__*/React.createElement(InputPrefix, {
     prefix: prefix,
     dataTest: "".concat(dataTest, "-prefix")
@@ -40,20 +40,20 @@ const Input = _ref => {
     placeholder: placeholder,
     dataTest: "".concat(dataTest, "-placeholder")
   }), hasSelection && /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3987817844", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
+    className: _JSXStyle.dynamic([["2186325794", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-input"
   }, /*#__PURE__*/React.createElement(Selection, {
     selected: selected,
     options: options
   })), hasSelection && clearable && !disabled && /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["3987817844", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-right"
+    className: _JSXStyle.dynamic([["2186325794", [colors.grey900]], ["1331770409", [inputMaxHeight]]]) + " " + "root-right"
   }, /*#__PURE__*/React.createElement(InputClearButton, {
     onClear: onClear,
     clearText: clearText,
     dataTest: "".concat(dataTest, "-clear")
   })), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3987817844",
+    id: "2186325794",
     dynamic: [colors.grey900]
-  }, [".root.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:".concat(colors.grey900, ";font-size:14px;line-height:16px;}"), ".root-input.__jsx-style-dynamic-selector{overflow-y:auto;-webkit-flex:1;-ms-flex:1;flex:1;}", ".root-right.__jsx-style-dynamic-selector{margin-inline-start:auto;margin-inline-end:10px;}"]), /*#__PURE__*/React.createElement(_JSXStyle, {
+  }, [".root.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:".concat(colors.grey900, ";font-size:14px;line-height:16px;}"), ".root-input.__jsx-style-dynamic-selector{overflow-y:auto;-webkit-flex:1;-ms-flex:1;flex:1;}", ".root-right.__jsx-style-dynamic-selector{margin-inline-start:auto;}"]), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "1331770409",
     dynamic: [inputMaxHeight]
   }, [".root-input.__jsx-style-dynamic-selector{max-height:".concat(inputMaxHeight, ";}")]));

package/build/es/single-select-field/features/accepts_help_text/index.js

@@ -1,4 +1,4 @@
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a SingleSelectField with help text is rendered', () => {
   cy.visitStory('SingleSelectField', 'With help text');
 });

package/build/es/single-select-field/features/accepts_label/index.js

@@ -1,4 +1,4 @@
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a SingleSelectField with a label is rendered', () => {
   cy.visitStory('SingleSelectField', 'With label');
 });

package/build/es/single-select-field/features/accepts_validation_text/index.js

@@ -1,4 +1,4 @@
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a SingleSelectField with validation text is rendered', () => {
   cy.visitStory('SingleSelectField', 'With validation text');
 });

package/build/es/single-select-field/features/can_be_required/index.js

@@ -1,4 +1,4 @@
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a SingleSelectField with label and a required flag is rendered', () => {
   cy.visitStory('SingleSelectField', 'With label and required status');
 });

package/build/es/single-select-field/features/has_default_clear_text/index.js

@@ -1,7 +1,10 @@
-import { Given, Then } from 'cypress-cucumber-preprocessor/steps';
+import { Given, When, Then } from '@badeball/cypress-cucumber-preprocessor';
 Given('a clearable SingleSelectField with selected option is rendered', () => {
   cy.visitStory('SingleSelectField', 'With clearable and selected option');
 });
+When('the clear button is hovered', () => {
+  cy.get('[data-test="dhis2-uicore-singleselect-clear"]').trigger('mouseover', 'top');
+});
 Then('the clear text is visible', () => {
   cy.contains('Clear').should('be.visible');
 });

package/build/es/single-select-field/features/has_default_clear_text.feature

@@ -2,4 +2,5 @@ Feature: Clear text for the SingleSelectField
 
     Scenario: Rendering a clearable SingleSelectField
         Given a clearable SingleSelectField with selected option is rendered
+        When the clear button is hovered
         Then the clear text is visible