@dhis2-ui/button 8.2.6 → 8.4.0

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

@@ -1,8 +1,10 @@
 "use strict";
 
+var _react = require("@testing-library/react");
+
 var _enzyme = require("enzyme");
 
-var _react = _interopRequireDefault(require("react"));
+var _react2 = _interopRequireDefault(require("react"));
 
 var _button = require("../button.js");
 
@@ -11,7 +13,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 describe('<Button>', () => {
   it('renders a default data-test attribute', () => {
     const dataTest = 'dhis2-uicore-button';
-    const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_button.Button, {
+    const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react2.default.createElement(_button.Button, {
       dataTest: dataTest
     }));
     const actual = wrapper.find({
@@ -21,7 +23,7 @@ describe('<Button>', () => {
   });
   it('renders a custom data-test attribute', () => {
     const dataTest = 'button-data-test';
-    const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_button.Button, {
+    const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react2.default.createElement(_button.Button, {
       dataTest: dataTest
     }));
     const actual = wrapper.find({
@@ -31,16 +33,36 @@ describe('<Button>', () => {
   });
   describe('toggle', () => {
     it('should have class "toggled" if toggled-prop is true', () => {
-      const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_button.Button, {
+      const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react2.default.createElement(_button.Button, {
         toggled: true
       }));
       const actual = wrapper.find('button');
       expect(actual.hasClass('toggled')).toBe(true);
     });
     it('should not have class "toggled" if toggled-prop is not passed', () => {
-      const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_button.Button, null));
+      const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react2.default.createElement(_button.Button, null));
       const actual = wrapper.find('button');
       expect(actual.hasClass('toggled')).toBe(false);
     });
   });
+  it('should call the onKeyDown callback when provided', () => {
+    const onKeyDown = jest.fn();
+    (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_button.Button, {
+      name: "button-name",
+      value: "button-value",
+      onKeyDown: onKeyDown
+    }, "btn"));
+
+    _react.fireEvent.keyDown(_react.screen.getByRole('button'), {
+      key: 'Enter',
+      code: 'Enter',
+      charCode: 13
+    });
+
+    expect(onKeyDown).toHaveBeenCalledWith({
+      name: 'button-name',
+      value: 'button-value'
+    }, expect.objectContaining({}));
+    expect(onKeyDown).toHaveBeenCalledTimes(1);
+  });
 });

package/build/cjs/button/button.js

@@ -46,6 +46,7 @@ const Button = _ref => {
     onBlur,
     onClick,
     onFocus,
+    onKeyDown,
     loading
   } = _ref;
   const ref = (0, _react.useRef)();
@@ -70,6 +71,11 @@ const Button = _ref => {
     name
   }, event);
 
+  const handleKeyDown = event => onKeyDown && onKeyDown({
+    value,
+    name
+  }, event);
+
   const iconOnly = icon && !children;
   const buttonClassName = (0, _classnames.default)(className, {
     primary,
@@ -91,6 +97,7 @@ const Button = _ref => {
     onBlur: handleBlur,
     onClick: handleClick,
     onFocus: handleFocus,
+    onKeyDown: handleKeyDown,
     className: "jsx-".concat(_buttonStyles.default.__hash) + " " + (buttonClassName || "")
   }, loading && /*#__PURE__*/_react.default.createElement("span", {
     className: "jsx-".concat(_buttonStyles.default.__hash) + " " + "loader"
@@ -195,5 +202,8 @@ Button.propTypes = {
   onClick: _propTypes.default.func,
 
   /** Callback to trigger on focus. Called with same args as `onClick` */
-  onFocus: _propTypes.default.func
+  onFocus: _propTypes.default.func,
+
+  /** Callback to trigger on key-down. Called with same args as `onClick` */
+  onKeyDown: _propTypes.default.func
 };

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

@@ -39,7 +39,7 @@ describe('<DropdownButton>', () => {
         // TODO: https://github.com/popperjs/react-popper/issues/350
         const wrapper = (0, _enzyme.mount)(Component);
         await (0, _testUtils.act)(async () => await null);
-        wrapper.find(_layer.Layer).simulate('click');
+        wrapper.find(_layer.Layer).find('.backdrop').simulate('click');
         expect(onClick).toHaveBeenCalledTimes(1);
         const args = onClick.mock.calls[0];
         expect(args).toHaveLength(2);

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

@@ -157,7 +157,7 @@ class DropdownButton extends _react.Component {
     }, children, /*#__PURE__*/_react.default.createElement(ArrowIconComponent, {
       className: "jsx-3163060161" + " " + (arrow.className || "")
     })), open && /*#__PURE__*/_react.default.createElement(_layer.Layer, {
-      onClick: this.onClickHandler,
+      onBackdropClick: this.onClickHandler,
       transparent: true
     }, /*#__PURE__*/_react.default.createElement(_popper.Popper, {
       dataTest: "".concat(dataTest, "-popper"),

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

@@ -121,7 +121,7 @@ class SplitButton extends _react.Component {
       className: (0, _classnames.default)(className, rightButton.className),
       dataTest: "".concat(dataTest, "-toggle")
     }, arrow), open && /*#__PURE__*/_react.default.createElement(_layer.Layer, {
-      onClick: this.onToggle,
+      onBackdropClick: this.onToggle,
       transparent: true
     }, /*#__PURE__*/_react.default.createElement(_popper.Popper, {
       dataTest: "".concat(dataTest, "-menu"),

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

@@ -1,3 +1,4 @@
+import { render, fireEvent, screen } from '@testing-library/react';
 import { mount } from 'enzyme';
 import React from 'react';
 import { Button } from '../button.js';
@@ -36,4 +37,22 @@ describe('<Button>', () => {
       expect(actual.hasClass('toggled')).toBe(false);
     });
   });
+  it('should call the onKeyDown callback when provided', () => {
+    const onKeyDown = jest.fn();
+    render( /*#__PURE__*/React.createElement(Button, {
+      name: "button-name",
+      value: "button-value",
+      onKeyDown: onKeyDown
+    }, "btn"));
+    fireEvent.keyDown(screen.getByRole('button'), {
+      key: 'Enter',
+      code: 'Enter',
+      charCode: 13
+    });
+    expect(onKeyDown).toHaveBeenCalledWith({
+      name: 'button-name',
+      value: 'button-value'
+    }, expect.objectContaining({}));
+    expect(onKeyDown).toHaveBeenCalledTimes(1);
+  });
 });

package/build/es/button/button.js

@@ -26,6 +26,7 @@ export const Button = _ref => {
     onBlur,
     onClick,
     onFocus,
+    onKeyDown,
     loading
   } = _ref;
   const ref = useRef();
@@ -50,6 +51,11 @@ export const Button = _ref => {
     name
   }, event);
 
+  const handleKeyDown = event => onKeyDown && onKeyDown({
+    value,
+    name
+  }, event);
+
   const iconOnly = icon && !children;
   const buttonClassName = cx(className, {
     primary,
@@ -71,6 +77,7 @@ export const Button = _ref => {
     onBlur: handleBlur,
     onClick: handleClick,
     onFocus: handleFocus,
+    onKeyDown: handleKeyDown,
     className: "jsx-".concat(styles.__hash) + " " + (buttonClassName || "")
   }, loading && /*#__PURE__*/React.createElement("span", {
     className: "jsx-".concat(styles.__hash) + " " + "loader"
@@ -173,5 +180,8 @@ Button.propTypes = {
   onClick: PropTypes.func,
 
   /** Callback to trigger on focus. Called with same args as `onClick` */
-  onFocus: PropTypes.func
+  onFocus: PropTypes.func,
+
+  /** Callback to trigger on key-down. Called with same args as `onClick` */
+  onKeyDown: PropTypes.func
 };

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

@@ -26,7 +26,7 @@ describe('<DropdownButton>', () => {
         // TODO: https://github.com/popperjs/react-popper/issues/350
         const wrapper = mount(Component);
         await act(async () => await null);
-        wrapper.find(Layer).simulate('click');
+        wrapper.find(Layer).find('.backdrop').simulate('click');
         expect(onClick).toHaveBeenCalledTimes(1);
         const args = onClick.mock.calls[0];
         expect(args).toHaveLength(2);

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

@@ -138,7 +138,7 @@ class DropdownButton extends Component {
     }, children, /*#__PURE__*/React.createElement(ArrowIconComponent, {
       className: "jsx-3163060161" + " " + (arrow.className || "")
     })), open && /*#__PURE__*/React.createElement(Layer, {
-      onClick: this.onClickHandler,
+      onBackdropClick: this.onClickHandler,
       transparent: true
     }, /*#__PURE__*/React.createElement(Popper, {
       dataTest: "".concat(dataTest, "-popper"),

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

@@ -100,7 +100,7 @@ class SplitButton extends Component {
       className: cx(className, rightButton.className),
       dataTest: "".concat(dataTest, "-toggle")
     }, arrow), open && /*#__PURE__*/React.createElement(Layer, {
-      onClick: this.onToggle,
+      onBackdropClick: this.onToggle,
       transparent: true
     }, /*#__PURE__*/React.createElement(Popper, {
       dataTest: "".concat(dataTest, "-menu"),

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/button",
-    "version": "8.2.6",
+    "version": "8.4.0",
     "description": "UI Button",
     "repository": {
         "type": "git",
@@ -31,12 +31,12 @@
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2/prop-types": "^3.0.0-beta.1",
-        "@dhis2-ui/layer": "8.2.6",
-        "@dhis2-ui/loader": "8.2.6",
-        "@dhis2-ui/popper": "8.2.6",
-        "@dhis2/ui-constants": "8.2.6",
-        "@dhis2/ui-icons": "8.2.6",
+        "@dhis2/prop-types": "^3.1.2",
+        "@dhis2-ui/layer": "8.4.0",
+        "@dhis2-ui/loader": "8.4.0",
+        "@dhis2-ui/popper": "8.4.0",
+        "@dhis2/ui-constants": "8.4.0",
+        "@dhis2/ui-icons": "8.4.0",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },