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

package/build/cjs/button/__tests__/Button.test.js

@@ -11,37 +11,6 @@ var _button = require("../button.js");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 describe('<Button>', () => {
-  let consoleSpy;
-  beforeEach(() => {
-    consoleSpy = jest.spyOn(console, 'debug').mockImplementation();
-  });
-  afterEach(() => {
-    consoleSpy.mockRestore();
-  });
-  describe('warning for missing aria-label and title', () => {
-    it('No warning  if children exist but aria-label and title is missing', () => {
-      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_button.Button, null, "Children content"));
-      expect(consoleSpy).not.toHaveBeenCalled();
-    });
-    it('does not warn if aria-label and title is present', () => {
-      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_button.Button, {
-        "aria-label": "Test",
-        title: "Test"
-      }, "Children content"));
-      expect(consoleSpy).not.toHaveBeenCalled();
-    });
-    it('warns if no children are present with no arial-label and title', () => {
-      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_button.Button, null));
-      expect(consoleSpy).toHaveBeenCalledWith('Button component has no children but is missing title and ariaLabel attribute.');
-    });
-    it('No warning if there are no children but arial label and title', () => {
-      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_button.Button, {
-        "aria-label": "Test",
-        title: "Test"
-      }));
-      expect(consoleSpy).not.toHaveBeenCalled();
-    });
-  });
   it('renders a default data-test attribute', () => {
     const dataTest = 'dhis2-uicore-button';
     const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react2.default.createElement(_button.Button, {

package/build/cjs/button/button.js

@@ -58,14 +58,6 @@ const Button = _ref => {
       ref.current.focus();
     }
   }, [initialFocus, ref.current]);
-  const {
-    'aria-label': ariaLabel,
-    title
-  } = otherProps;
-
-  if (!children && !title && !ariaLabel) {
-    console.debug('Button component has no children but is missing title and ariaLabel attribute.');
-  }
 
   const handleClick = event => onClick && onClick({
     value,

package/build/cjs/button/features/can_be_blurred/index.js

@@ -1,15 +1,15 @@
 "use strict";
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-(0, _steps.Given)('an Button with initialFocus and onBlur handler is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('an Button with initialFocus and onBlur handler is rendered', () => {
   cy.visitStory('Button', 'With initialFocus and onBlur');
   cy.focused().should('exist');
 });
-(0, _steps.When)('the Button is blurred', () => {
+(0, _cypressCucumberPreprocessor.When)('the Button is blurred', () => {
   cy.get('[data-test="dhis2-uicore-button"]').blur();
 });
-(0, _steps.Then)('the onBlur handler is called', () => {
+(0, _cypressCucumberPreprocessor.Then)('the onBlur handler is called', () => {
   cy.window().should(win => {
     expect(win.onBlur).to.be.calledWith({
       value: 'default',

package/build/cjs/button/features/can_be_clicked/index.js

@@ -1,14 +1,14 @@
 "use strict";
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-(0, _steps.Given)('a Button with onClick handler is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a Button with onClick handler is rendered', () => {
   cy.visitStory('Button', 'With onClick');
 });
-(0, _steps.When)('the Button is clicked', () => {
+(0, _cypressCucumberPreprocessor.When)('the Button is clicked', () => {
   cy.get('[data-test="dhis2-uicore-button"]').click();
 });
-(0, _steps.Then)('the onClick handler is called', () => {
+(0, _cypressCucumberPreprocessor.Then)('the onClick handler is called', () => {
   cy.window().should(win => {
     expect(win.onClick).to.be.calledWith({
       name: 'Button',

package/build/cjs/button/features/can_be_focused/index.js

@@ -1,14 +1,14 @@
 "use strict";
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-(0, _steps.Given)('a Button with onFocus handler is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a Button with onFocus handler is rendered', () => {
   cy.visitStory('Button', 'With onFocus');
 });
-(0, _steps.When)('the Button is focused', () => {
+(0, _cypressCucumberPreprocessor.When)('the Button is focused', () => {
   cy.get('[data-test="dhis2-uicore-button"]').focus();
 });
-(0, _steps.Then)('the onFocus handler is called', () => {
+(0, _cypressCucumberPreprocessor.Then)('the onFocus handler is called', () => {
   cy.window().should(win => {
     expect(win.onFocus).to.be.calledWith({
       value: 'default',

package/build/cjs/button-strip/features/accepts_children/index.js

@@ -1,11 +1,11 @@
 "use strict";
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-(0, _steps.Given)('a ButtonStrip with children is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a ButtonStrip with children is rendered', () => {
   cy.visitStory('ButtonStrip', 'With children');
   cy.get('[data-test="dhis2-uicore-buttonstrip"]').should('be.visible');
 });
-(0, _steps.Then)('the children are visible', () => {
+(0, _cypressCucumberPreprocessor.Then)('the children are visible', () => {
   cy.contains('I am a child').should('be.visible');
 });

package/build/cjs/dropdown-button/__tests__/dropdown-button.test.js

@@ -4,12 +4,16 @@ var _layer = require("@dhis2-ui/layer");
 
 var _popper = require("@dhis2-ui/popper");
 
+var _react = require("@testing-library/react");
+
 var _enzyme = require("enzyme");
 
-var _react = _interopRequireDefault(require("react"));
+var _react2 = _interopRequireDefault(require("react"));
 
 var _testUtils = require("react-dom/test-utils");
 
+var _modal = require("../../../../modal/src/modal/modal.js");
+
 var _index = require("../../index.js");
 
 var _dropdownButton = require("../dropdown-button.js");
@@ -21,10 +25,10 @@ describe('<DropdownButton>', () => {
     describe('open state', () => {
       const onClick = jest.fn();
 
-      const Component = /*#__PURE__*/_react.default.createElement(_dropdownButton.DropdownButton, {
+      const Component = /*#__PURE__*/_react2.default.createElement(_dropdownButton.DropdownButton, {
         onClick: onClick,
         open: true,
-        component: /*#__PURE__*/_react.default.createElement("span", null, "test")
+        component: /*#__PURE__*/_react2.default.createElement("span", null, "test")
       });
 
       it('shows the Popper when open is true', async () => {
@@ -47,13 +51,69 @@ describe('<DropdownButton>', () => {
           open: false
         }));
       });
+      it('closes dropdown when escape key is pressed', async () => {
+        const componentText = 'Dropdown Content';
+        const {
+          getByTestId,
+          queryByText
+        } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_dropdownButton.DropdownButton, {
+          component: componentText
+        }));
+        const toggleButton = getByTestId('dhis2-uicore-dropdownbutton-toggle');
+
+        _react.fireEvent.click(toggleButton);
+
+        await (0, _react.waitFor)(() => {
+          expect(queryByText(componentText)).toBeInTheDocument();
+        });
+
+        _react.fireEvent.keyDown(document, {
+          key: 'Escape'
+        });
+
+        await (0, _react.waitFor)(() => {
+          expect(queryByText(componentText)).not.toBeInTheDocument();
+        });
+      });
+      test('modal remains open when dropdown button is closed on escape click', async () => {
+        const dropdownButtonText = 'Dropdown Content';
+        const headingText = 'Heading Text';
+
+        const modalContent = /*#__PURE__*/_react2.default.createElement("div", null, /*#__PURE__*/_react2.default.createElement("h1", null, headingText), /*#__PURE__*/_react2.default.createElement(_dropdownButton.DropdownButton, {
+          component: dropdownButtonText
+        }));
+
+        const {
+          getByTestId,
+          queryByText
+        } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_modal.Modal, {
+          hide: false,
+          onClose: () => {}
+        }, modalContent));
+        const toggleButton = getByTestId('dhis2-uicore-dropdownbutton-toggle');
+
+        _react.fireEvent.click(toggleButton);
+
+        await (0, _react.waitFor)(() => {
+          expect(queryByText(dropdownButtonText)).toBeInTheDocument();
+        });
+
+        _react.fireEvent.keyDown(document, {
+          key: 'Escape'
+        });
+
+        await (0, _react.waitFor)(() => {
+          expect(queryByText(dropdownButtonText)).not.toBeInTheDocument();
+          expect(queryByText(headingText)).toBeInTheDocument();
+        });
+      });
     });
     describe('closed state', () => {
       const onClick = jest.fn();
-      const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_dropdownButton.DropdownButton, {
+      const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react2.default.createElement(_dropdownButton.DropdownButton, {
         onClick: onClick,
         open: false,
-        component: /*#__PURE__*/_react.default.createElement("span", null, "test")
+        component: /*#__PURE__*/_react2.default.createElement("span", null, "test")
       }));
       it('it does not show the Popper when open is false', () => {
         const popper = wrapper.find(_popper.Popper);

package/build/cjs/dropdown-button/dropdown-button.js

@@ -86,6 +86,17 @@ class DropdownButton extends _react.Component {
 
     _defineProperty(this, "anchorRef", /*#__PURE__*/_react.default.createRef());
 
+    _defineProperty(this, "handleKeyDown", event => {
+      event.preventDefault();
+
+      if (event.key === 'Escape' && this.state.open) {
+        event.stopPropagation();
+        this.setState({
+          open: false
+        });
+      }
+    });
+
     _defineProperty(this, "onClickHandler", (_ref3, event) => {
       let {
         name,
@@ -114,6 +125,14 @@ class DropdownButton extends _react.Component {
     });
   }
 
+  componentDidMount() {
+    document.addEventListener('keydown', this.handleKeyDown);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleKeyDown);
+  }
+
   render() {
     const {
       component,
@@ -153,7 +172,8 @@ class DropdownButton extends _react.Component {
       value: value,
       tabIndex: tabIndex,
       type: type,
-      initialFocus: initialFocus
+      initialFocus: initialFocus,
+      "data-test": "dhis2-uicore-dropdownbutton-toggle"
     }, children, /*#__PURE__*/_react.default.createElement(ArrowIconComponent, {
       className: "jsx-3163060161" + " " + (arrow.className || "")
     })), open && /*#__PURE__*/_react.default.createElement(_layer.Layer, {

package/build/cjs/dropdown-button/features/accepts_children/index.js

@@ -1,11 +1,11 @@
 "use strict";
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-(0, _steps.Given)('a DropdownButton with children is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a DropdownButton with children is rendered', () => {
   cy.visitStory('DropdownButton', 'With children');
   cy.get('[data-test="dhis2-uicore-dropdownbutton"]').should('be.visible');
 });
-(0, _steps.Then)('the children are visible', () => {
+(0, _cypressCucumberPreprocessor.Then)('the children are visible', () => {
   cy.contains('I am a child').should('be.visible');
 });

package/build/cjs/dropdown-button/features/accepts_component/index.js

@@ -1,13 +1,13 @@
 "use strict";
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-(0, _steps.Given)('a DropdownButton with a component prop and opened dropdown is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a DropdownButton with a component prop and opened dropdown is rendered', () => {
   cy.visitStory('DropdownButton', 'With component');
   cy.get('[data-test="dhis2-uicore-dropdownbutton"]').should('be.visible');
   cy.get('[data-test="dhis2-uicore-dropdownbutton"]').click();
   cy.get('[data-test="dhis2-uicore-dropdownbutton-popper"]').should('exist');
 });
-(0, _steps.Then)('the component is visible', () => {
+(0, _cypressCucumberPreprocessor.Then)('the component is visible', () => {
   cy.contains('I am a component').should('be.visible');
 });

package/build/cjs/dropdown-button/features/accepts_icon/index.js

@@ -1,11 +1,11 @@
 "use strict";
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-(0, _steps.Given)('a DropdownButton with an icon prop is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a DropdownButton with an icon prop is rendered', () => {
   cy.visitStory('DropdownButton', 'With icon');
   cy.get('[data-test="dhis2-uicore-dropdownbutton"]').should('be.visible');
 });
-(0, _steps.Then)('the icon is visible', () => {
+(0, _cypressCucumberPreprocessor.Then)('the icon is visible', () => {
   cy.contains('Icon').should('be.visible');
 });

package/build/cjs/dropdown-button/features/accepts_initial_focus/index.js

@@ -1,10 +1,10 @@
 "use strict";
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-(0, _steps.Given)('a DropdownButton with initialFocus is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a DropdownButton with initialFocus is rendered', () => {
   cy.visitStory('DropdownButton', 'With initialFocus');
 });
-(0, _steps.Then)('the DropdownButton is focused', () => {
+(0, _cypressCucumberPreprocessor.Then)('the DropdownButton is focused', () => {
   cy.focused().parent('[data-test="dhis2-uicore-dropdownbutton"]').should('exist');
 });

package/build/cjs/dropdown-button/features/button_is_clickable/index.js

@@ -1,13 +1,11 @@
 "use strict";
 
-require("../common/index.js");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
-
-(0, _steps.Given)('a DropdownButton with onClick handler is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a DropdownButton with onClick handler is rendered', () => {
   cy.visitStory('DropdownButton', 'With onClick');
 });
-(0, _steps.Then)('the onClick handler is called', () => {
+(0, _cypressCucumberPreprocessor.Then)('the onClick handler is called', () => {
   cy.window().should(win => {
     expect(win.onClick).to.be.calledWith({
       name: 'Button',

package/build/cjs/dropdown-button/features/can_be_disabled/index.js

@@ -1,16 +1,11 @@
 "use strict";
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-(0, _steps.Given)('a disabled DropdownButton with onClick handler is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a disabled DropdownButton with onClick handler is rendered', () => {
   cy.visitStory('DropdownButton', 'Disabled with onClick');
 });
-(0, _steps.When)('the DropdownButton is clicked', () => {
-  cy.get('[data-test="dhis2-uicore-dropdownbutton"] button').click({
-    force: true
-  });
-});
-(0, _steps.Then)('the onClick handler is not called', () => {
+(0, _cypressCucumberPreprocessor.Then)('the onClick handler is not called', () => {
   cy.window().should(win => {
     expect(win.onClick).not.to.be.called;
   });

package/build/cjs/dropdown-button/features/common/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-(0, _steps.When)('the DropdownButton is clicked', () => {
+(0, _cypressCucumberPreprocessor.When)('the DropdownButton is clicked', () => {
   cy.get('[data-test="dhis2-uicore-dropdownbutton"]').click();
 });

package/build/cjs/dropdown-button/features/opens_a_dropdown/index.js

@@ -1,23 +1,21 @@
 "use strict";
 
-require("../common/index.js");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
-
-(0, _steps.Given)('a default DropdownButton is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a default DropdownButton is rendered', () => {
   cy.visitStory('DropdownButton', 'Default');
 });
-(0, _steps.Given)('a DropdownButton with opened dropdown is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a DropdownButton with opened dropdown is rendered', () => {
   cy.visitStory('DropdownButton', 'Default');
   cy.get('[data-test="dhis2-uicore-dropdownbutton"]').click();
   cy.get('[data-test="dhis2-uicore-dropdownbutton-popper"]').should('exist');
 });
-(0, _steps.When)('the user clicks the backdrop Layer', () => {
+(0, _cypressCucumberPreprocessor.When)('the user clicks the backdrop Layer', () => {
   cy.get('[data-test="dhis2-uicore-layer"]').click();
 });
-(0, _steps.Then)('the dropdown is not rendered', () => {
+(0, _cypressCucumberPreprocessor.Then)('the dropdown is not rendered', () => {
   cy.get('[data-test="dhis2-uicore-dropdownbutton-popper"]').should('not.exist');
 });
-(0, _steps.Then)('the dropdown is rendered', () => {
+(0, _cypressCucumberPreprocessor.Then)('the dropdown is rendered', () => {
   cy.get('[data-test="dhis2-uicore-dropdownbutton-popper"]').should('exist');
 });

package/build/cjs/split-button/features/accepts_children/index.js

@@ -1,11 +1,11 @@
 "use strict";
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-(0, _steps.Given)('a SplitButton with children is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a SplitButton with children is rendered', () => {
   cy.visitStory('SplitButton', 'With children');
   cy.get('[data-test="dhis2-uicore-splitbutton"]').should('be.visible');
 });
-(0, _steps.Then)('the children are visible', () => {
+(0, _cypressCucumberPreprocessor.Then)('the children are visible', () => {
   cy.get('[data-test="dhis2-uicore-splitbutton-button"]').contains('I am a child').should('be.visible');
 });

package/build/cjs/split-button/features/accepts_icon/index.js

@@ -1,12 +1,12 @@
 "use strict";
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-(0, _steps.Given)('a SplitButton with an icon is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a SplitButton with an icon is rendered', () => {
   cy.visitStory('SplitButton', 'With icon');
   cy.get('[data-test="dhis2-uicore-splitbutton"]').should('be.visible');
 });
-(0, _steps.Then)('the icon is visible on the left button only', () => {
-  cy.get('[data-test="dhis2-uicore-splitbutton-button"]').contains('Icon').should('be.visible');
-  cy.get('[data-test="dhis2-uicore-splitbutton-toggle"]').contains('Icon').should('not.exist');
+(0, _cypressCucumberPreprocessor.Then)('the icon is visible on the left button only', () => {
+  cy.get('[data-test="dhis2-uicore-splitbutton-button"] :contains("Icon")').should('be.visible');
+  cy.get('[data-test="dhis2-uicore-splitbutton-toggle"] :contains("Icon")').should('not.exist');
 });

package/build/cjs/split-button/features/accepts_initial_focus/index.js

@@ -1,10 +1,10 @@
 "use strict";
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-(0, _steps.Given)('a SplitButton with initialFocus is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a SplitButton with initialFocus is rendered', () => {
   cy.visitStory('SplitButton', 'With initialFocus');
 });
-(0, _steps.Then)('the SplitButton button is focused', () => {
+(0, _cypressCucumberPreprocessor.Then)('the SplitButton button is focused', () => {
   cy.focused().should('have.attr', 'data-test', 'dhis2-uicore-splitbutton-button');
 });

package/build/cjs/split-button/features/arrow_opens_menu/index.js

@@ -1,31 +1,29 @@
 "use strict";
 
-require("../common/index.js");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
-
-(0, _steps.Given)('a SplitButton is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a SplitButton is rendered', () => {
   cy.visitStory('SplitButton', 'Default');
 });
-(0, _steps.Given)('the SplitButton menu is open', () => {
+(0, _cypressCucumberPreprocessor.Given)('the SplitButton menu is open', () => {
   cy.get('[data-test="dhis2-uicore-splitbutton-toggle"]').click();
   cy.get('[data-test="dhis2-uicore-splitbutton-menu"]').should('be.visible');
 });
-(0, _steps.Given)('the SplitButton menu is closed', () => {
+(0, _cypressCucumberPreprocessor.Given)('the SplitButton menu is closed', () => {
   cy.get('[data-test="dhis2-uicore-splitbutton-menu"]').should('not.exist');
 });
-(0, _steps.When)('the user clicks the backdrop Layer', () => {
+(0, _cypressCucumberPreprocessor.When)('the user clicks the backdrop Layer', () => {
   cy.get('[data-test="dhis2-uicore-layer"]').click();
 });
-(0, _steps.Then)('the menu is not visible', () => {
+(0, _cypressCucumberPreprocessor.Then)('the menu is not visible', () => {
   cy.get('[data-test="dhis2-uicore-splitbutton-menu"]').should('not.exist');
 });
-(0, _steps.Then)('the component is not visible', () => {
+(0, _cypressCucumberPreprocessor.Then)('the component is not visible', () => {
   cy.contains('Component').should('not.exist');
 });
-(0, _steps.Then)('the menu is visible', () => {
+(0, _cypressCucumberPreprocessor.Then)('the menu is visible', () => {
   cy.get('[data-test="dhis2-uicore-splitbutton-menu"]').should('be.visible');
 });
-(0, _steps.Then)('the component is visible', () => {
+(0, _cypressCucumberPreprocessor.Then)('the component is visible', () => {
   cy.contains('Component').should('be.visible');
 });

package/build/cjs/split-button/features/button_is_clickable/index.js

@@ -1,13 +1,11 @@
 "use strict";
 
-require("../common/index.js");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
-
-(0, _steps.Given)('a SplitButton with onClick hander is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a SplitButton with onClick hander is rendered', () => {
   cy.visitStory('SplitButton', 'With onClick');
 });
-(0, _steps.Then)('the onClick handler is called', () => {
+(0, _cypressCucumberPreprocessor.Then)('the onClick handler is called', () => {
   cy.window().its('onClick').should('be.calledWith', {
     name: 'Button',
     value: 'default',

package/build/cjs/split-button/features/can_be_disabled/index.js

@@ -1,23 +1,23 @@
 "use strict";
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-(0, _steps.Given)('a disabled SplitButton is rendered', () => {
+(0, _cypressCucumberPreprocessor.Given)('a disabled SplitButton is rendered', () => {
   cy.visitStory('SplitButton', 'With disabled');
 });
-(0, _steps.When)('the user clicks the SplitButton Button', () => {
+(0, _cypressCucumberPreprocessor.When)('the user clicks the SplitButton Button', () => {
   cy.get('[data-test="dhis2-uicore-splitbutton-button"]').click({
     force: true
   });
 });
-(0, _steps.Then)('the SplitButton Button is not focused', () => {
+(0, _cypressCucumberPreprocessor.Then)('the SplitButton Button is not focused', () => {
   cy.focused().should('not.exist');
 });
-(0, _steps.When)('the user clicks the SplitButton Toggle', () => {
+(0, _cypressCucumberPreprocessor.When)('the user clicks the SplitButton Toggle', () => {
   cy.get('[data-test="dhis2-uicore-splitbutton-toggle"]').click({
     force: true
   });
 });
-(0, _steps.Then)('the SplitButton Toggle is not focused', () => {
+(0, _cypressCucumberPreprocessor.Then)('the SplitButton Toggle is not focused', () => {
   cy.focused().should('not.exist');
 });

package/build/cjs/split-button/features/common/index.js

@@ -1,10 +1,10 @@
 "use strict";
 
-var _steps = require("cypress-cucumber-preprocessor/steps");
+var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
 
-(0, _steps.When)('the SplitButton is clicked', () => {
+(0, _cypressCucumberPreprocessor.When)('the SplitButton is clicked', () => {
   cy.get('[data-test="dhis2-uicore-splitbutton-button"]').click();
 });
-(0, _steps.When)('the SplitButton toggle is clicked', () => {
+(0, _cypressCucumberPreprocessor.When)('the SplitButton toggle is clicked', () => {
   cy.get('[data-test="dhis2-uicore-splitbutton-toggle"]').click();
 });

package/build/cjs/split-button/split-button.js

@@ -23,8 +23,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _index = require("../index.js");
 
-var _index2 = _interopRequireDefault(require("../locales/index.js"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -50,18 +48,6 @@ class SplitButton extends _react.Component {
 
     _defineProperty(this, "anchorRef", /*#__PURE__*/_react.default.createRef());
 
-    _defineProperty(this, "handleKeyDown", event => {
-      event.preventDefault();
-
-      if (event.key === 'Escape' && this.state.open) {
-        event.stopPropagation();
-        this.setState({
-          open: false
-        });
-        this.anchorRef.current && this.anchorRef.current.focus();
-      }
-    });
-
     _defineProperty(this, "onClick", (payload, event) => {
       if (this.props.onClick) {
         this.props.onClick({
@@ -72,19 +58,9 @@ class SplitButton extends _react.Component {
       }
     });
 
-    _defineProperty(this, "onToggle", () => {
-      this.setState(prevState => ({
-        open: !prevState.open
-      }));
-    });
-  }
-
-  componentDidMount() {
-    document.addEventListener('keydown', this.handleKeyDown);
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('keydown', this.handleKeyDown);
+    _defineProperty(this, "onToggle", () => this.setState({
+      open: !this.state.open
+    }));
   }
 
   render() {
@@ -143,9 +119,7 @@ class SplitButton extends _react.Component {
       type: type,
       tabIndex: tabIndex,
       className: (0, _classnames.default)(className, rightButton.className),
-      dataTest: "".concat(dataTest, "-toggle"),
-      title: _index2.default.t('Toggle dropdown'),
-      "aria-label": _index2.default.t('Toggle dropdown')
+      dataTest: "".concat(dataTest, "-toggle")
     }, arrow), open && /*#__PURE__*/_react.default.createElement(_layer.Layer, {
       onBackdropClick: this.onToggle,
       transparent: true