@dhis2-ui/button 9.5.0 → 9.6.0

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/es/dropdown-button/__tests__/dropdown-button.test.js

@@ -1,8 +1,10 @@
 import { Layer } from '@dhis2-ui/layer';
 import { Popper } from '@dhis2-ui/popper';
+import { render, fireEvent, waitFor } from '@testing-library/react';
 import { mount } from 'enzyme';
 import React from 'react';
 import { act } from 'react-dom/test-utils';
+import { Modal } from '../../../../modal/src/modal/modal.js';
 import { Button } from '../../index.js';
 import { DropdownButton } from '../dropdown-button.js';
 describe('<DropdownButton>', () => {
@@ -34,6 +36,52 @@ describe('<DropdownButton>', () => {
           open: false
         }));
       });
+      it('closes dropdown when escape key is pressed', async () => {
+        const componentText = 'Dropdown Content';
+        const {
+          getByTestId,
+          queryByText
+        } = render( /*#__PURE__*/React.createElement(DropdownButton, {
+          component: componentText
+        }));
+        const toggleButton = getByTestId('dhis2-uicore-dropdownbutton-toggle');
+        fireEvent.click(toggleButton);
+        await waitFor(() => {
+          expect(queryByText(componentText)).toBeInTheDocument();
+        });
+        fireEvent.keyDown(document, {
+          key: 'Escape'
+        });
+        await 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__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", null, headingText), /*#__PURE__*/React.createElement(DropdownButton, {
+          component: dropdownButtonText
+        }));
+        const {
+          getByTestId,
+          queryByText
+        } = render( /*#__PURE__*/React.createElement(Modal, {
+          hide: false,
+          onClose: () => {}
+        }, modalContent));
+        const toggleButton = getByTestId('dhis2-uicore-dropdownbutton-toggle');
+        fireEvent.click(toggleButton);
+        await waitFor(() => {
+          expect(queryByText(dropdownButtonText)).toBeInTheDocument();
+        });
+        fireEvent.keyDown(document, {
+          key: 'Escape'
+        });
+        await waitFor(() => {
+          expect(queryByText(dropdownButtonText)).not.toBeInTheDocument();
+          expect(queryByText(headingText)).toBeInTheDocument();
+        });
+      });
     });
     describe('closed state', () => {
       const onClick = jest.fn();

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

@@ -67,6 +67,17 @@ class DropdownButton extends Component {
 
     _defineProperty(this, "anchorRef", /*#__PURE__*/React.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,
@@ -95,6 +106,14 @@ class DropdownButton extends Component {
     });
   }
 
+  componentDidMount() {
+    document.addEventListener('keydown', this.handleKeyDown);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleKeyDown);
+  }
+
   render() {
     const {
       component,
@@ -134,7 +153,8 @@ class DropdownButton extends Component {
       value: value,
       tabIndex: tabIndex,
       type: type,
-      initialFocus: initialFocus
+      initialFocus: initialFocus,
+      "data-test": "dhis2-uicore-dropdownbutton-toggle"
     }, children, /*#__PURE__*/React.createElement(ArrowIconComponent, {
       className: "jsx-3163060161" + " " + (arrow.className || "")
     })), open && /*#__PURE__*/React.createElement(Layer, {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/button",
-    "version": "9.5.0",
+    "version": "9.6.0",
     "description": "UI Button",
     "repository": {
         "type": "git",
@@ -33,11 +33,11 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/layer": "9.5.0",
-        "@dhis2-ui/loader": "9.5.0",
-        "@dhis2-ui/popper": "9.5.0",
-        "@dhis2/ui-constants": "9.5.0",
-        "@dhis2/ui-icons": "9.5.0",
+        "@dhis2-ui/layer": "9.6.0",
+        "@dhis2-ui/loader": "9.6.0",
+        "@dhis2-ui/popper": "9.6.0",
+        "@dhis2/ui-constants": "9.6.0",
+        "@dhis2/ui-icons": "9.6.0",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },