@dhis2-ui/button 9.5.0 → 9.7.0

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

@@ -11,6 +11,37 @@ 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,6 +58,14 @@ 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/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/locales/en/translations.json

@@ -0,0 +1,3 @@
+{
+    "Toggle dropdown": "Toggle dropdown"
+}

package/build/cjs/locales/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+
+var _translations = _interopRequireDefault(require("./en/translations.json"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+//------------------------------------------------------------------------------
+// <auto-generated>
+// This code was generated by d2-i18n-generate.
+//
+// Changes to this file may cause incorrect behavior and will be lost if
+// the code is regenerated.
+// </auto-generated>
+//------------------------------------------------------------------------------
+const namespace = 'default';
+
+_d2I18n.default.addResources('en', namespace, _translations.default);
+
+var _default = _d2I18n.default;
+exports.default = _default;

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

@@ -23,6 +23,8 @@ 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; }
@@ -48,6 +50,18 @@ 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({
@@ -58,9 +72,19 @@ class SplitButton extends _react.Component {
       }
     });
 
-    _defineProperty(this, "onToggle", () => this.setState({
-      open: !this.state.open
-    }));
+    _defineProperty(this, "onToggle", () => {
+      this.setState(prevState => ({
+        open: !prevState.open
+      }));
+    });
+  }
+
+  componentDidMount() {
+    document.addEventListener('keydown', this.handleKeyDown);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleKeyDown);
   }
 
   render() {
@@ -119,7 +143,9 @@ class SplitButton extends _react.Component {
       type: type,
       tabIndex: tabIndex,
       className: (0, _classnames.default)(className, rightButton.className),
-      dataTest: "".concat(dataTest, "-toggle")
+      dataTest: "".concat(dataTest, "-toggle"),
+      title: _index2.default.t('Toggle dropdown'),
+      "aria-label": _index2.default.t('Toggle dropdown')
     }, arrow), open && /*#__PURE__*/_react.default.createElement(_layer.Layer, {
       onBackdropClick: this.onToggle,
       transparent: true

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

@@ -0,0 +1,99 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _splitButton = require("./split-button.js");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('SplitButton', () => {
+  afterEach(_react.cleanup);
+  it('renders button with children', () => {
+    const {
+      getByText
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, null, "Click me"));
+    expect(getByText('Click me')).toBeInTheDocument();
+  });
+  it('toggles dropdown when left button is clicked', () => {
+    const {
+      getByTestId,
+      queryByTestId
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, null));
+    const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
+
+    _react.fireEvent.click(toggleButton);
+
+    expect(queryByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
+
+    _react.fireEvent.click(toggleButton);
+
+    expect(queryByTestId('dhis2-uicore-splitbutton-menu')).not.toBeInTheDocument();
+  });
+  it('renders dropdown content when open is true', () => {
+    const {
+      getByTestId
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, {
+      component: /*#__PURE__*/_react2.default.createElement("div", null, "Dropdown Content")
+    }));
+    const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
+
+    _react.fireEvent.click(toggleButton);
+
+    expect(getByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
+  });
+  it("does not close dropdown 'Enter' key is pressed", async () => {
+    const {
+      getByTestId
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, {
+      component: /*#__PURE__*/_react2.default.createElement("div", null, "Dropdown Content")
+    }));
+    const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
+
+    _react.fireEvent.click(toggleButton);
+
+    expect(getByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
+
+    _react.fireEvent.keyDown(document, {
+      key: 'Enter'
+    }); // Use waitFor to wait for the DOM to update
+
+
+    await (0, _react.waitFor)(() => {
+      expect(getByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
+    });
+  });
+  it('closes dropdown when escape key is pressed', async () => {
+    const {
+      getByTestId,
+      queryByTestId
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, {
+      component: /*#__PURE__*/_react2.default.createElement("div", null, "Dropdown Content")
+    }));
+    const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
+
+    _react.fireEvent.click(toggleButton);
+
+    expect(getByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
+
+    _react.fireEvent.keyDown(document, {
+      key: 'Escape'
+    }); // Use waitFor to wait for the DOM to update
+
+
+    await (0, _react.waitFor)(() => {
+      expect(queryByTestId('dhis2-uicore-splitbutton-menu')).not.toBeInTheDocument();
+    });
+  });
+  it('adds title and aria-label attributes to the right button', () => {
+    const {
+      getByTestId
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_splitButton.SplitButton, null));
+    const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
+    expect(toggleButton).toHaveAttribute('title', 'Toggle dropdown');
+    expect(toggleButton).toHaveAttribute('aria-label', 'Toggle dropdown');
+  });
+});

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

@@ -3,6 +3,37 @@ import { mount } from 'enzyme';
 import React from 'react';
 import { Button } from '../button.js';
 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', () => {
+      render( /*#__PURE__*/React.createElement(Button, null, "Children content"));
+      expect(consoleSpy).not.toHaveBeenCalled();
+    });
+    it('does not warn if aria-label and title is present', () => {
+      render( /*#__PURE__*/React.createElement(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', () => {
+      render( /*#__PURE__*/React.createElement(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', () => {
+      render( /*#__PURE__*/React.createElement(Button, {
+        "aria-label": "Test",
+        title: "Test"
+      }));
+      expect(consoleSpy).not.toHaveBeenCalled();
+    });
+  });
   it('renders a default data-test attribute', () => {
     const dataTest = 'dhis2-uicore-button';
     const wrapper = mount( /*#__PURE__*/React.createElement(Button, {

package/build/es/button/button.js

@@ -39,6 +39,14 @@ export 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/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/build/es/locales/en/translations.json

@@ -0,0 +1,3 @@
+{
+    "Toggle dropdown": "Toggle dropdown"
+}

package/build/es/locales/index.js

@@ -0,0 +1,13 @@
+//------------------------------------------------------------------------------
+// <auto-generated>
+// This code was generated by d2-i18n-generate.
+//
+// Changes to this file may cause incorrect behavior and will be lost if
+// the code is regenerated.
+// </auto-generated>
+//------------------------------------------------------------------------------
+import i18n from '@dhis2/d2-i18n';
+import enTranslations from './en/translations.json';
+const namespace = 'default';
+i18n.addResources('en', namespace, enTranslations);
+export default i18n;

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

@@ -10,6 +10,7 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { Button } from '../index.js';
+import i18n from '../locales/index.js';
 const rightButton = {
   styles: /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2502148942"
@@ -27,6 +28,18 @@ class SplitButton 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
+        });
+        this.anchorRef.current && this.anchorRef.current.focus();
+      }
+    });
+
     _defineProperty(this, "onClick", (payload, event) => {
       if (this.props.onClick) {
         this.props.onClick({
@@ -37,9 +50,19 @@ class SplitButton extends Component {
       }
     });
 
-    _defineProperty(this, "onToggle", () => this.setState({
-      open: !this.state.open
-    }));
+    _defineProperty(this, "onToggle", () => {
+      this.setState(prevState => ({
+        open: !prevState.open
+      }));
+    });
+  }
+
+  componentDidMount() {
+    document.addEventListener('keydown', this.handleKeyDown);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleKeyDown);
   }
 
   render() {
@@ -98,7 +121,9 @@ class SplitButton extends Component {
       type: type,
       tabIndex: tabIndex,
       className: cx(className, rightButton.className),
-      dataTest: "".concat(dataTest, "-toggle")
+      dataTest: "".concat(dataTest, "-toggle"),
+      title: i18n.t('Toggle dropdown'),
+      "aria-label": i18n.t('Toggle dropdown')
     }, arrow), open && /*#__PURE__*/React.createElement(Layer, {
       onBackdropClick: this.onToggle,
       transparent: true

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

@@ -0,0 +1,77 @@
+import { render, fireEvent, cleanup, waitFor } from '@testing-library/react';
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { SplitButton } from './split-button.js';
+describe('SplitButton', () => {
+  afterEach(cleanup);
+  it('renders button with children', () => {
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(SplitButton, null, "Click me"));
+    expect(getByText('Click me')).toBeInTheDocument();
+  });
+  it('toggles dropdown when left button is clicked', () => {
+    const {
+      getByTestId,
+      queryByTestId
+    } = render( /*#__PURE__*/React.createElement(SplitButton, null));
+    const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
+    fireEvent.click(toggleButton);
+    expect(queryByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
+    fireEvent.click(toggleButton);
+    expect(queryByTestId('dhis2-uicore-splitbutton-menu')).not.toBeInTheDocument();
+  });
+  it('renders dropdown content when open is true', () => {
+    const {
+      getByTestId
+    } = render( /*#__PURE__*/React.createElement(SplitButton, {
+      component: /*#__PURE__*/React.createElement("div", null, "Dropdown Content")
+    }));
+    const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
+    fireEvent.click(toggleButton);
+    expect(getByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
+  });
+  it("does not close dropdown 'Enter' key is pressed", async () => {
+    const {
+      getByTestId
+    } = render( /*#__PURE__*/React.createElement(SplitButton, {
+      component: /*#__PURE__*/React.createElement("div", null, "Dropdown Content")
+    }));
+    const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
+    fireEvent.click(toggleButton);
+    expect(getByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
+    fireEvent.keyDown(document, {
+      key: 'Enter'
+    }); // Use waitFor to wait for the DOM to update
+
+    await waitFor(() => {
+      expect(getByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
+    });
+  });
+  it('closes dropdown when escape key is pressed', async () => {
+    const {
+      getByTestId,
+      queryByTestId
+    } = render( /*#__PURE__*/React.createElement(SplitButton, {
+      component: /*#__PURE__*/React.createElement("div", null, "Dropdown Content")
+    }));
+    const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
+    fireEvent.click(toggleButton);
+    expect(getByTestId('dhis2-uicore-splitbutton-menu')).toBeInTheDocument();
+    fireEvent.keyDown(document, {
+      key: 'Escape'
+    }); // Use waitFor to wait for the DOM to update
+
+    await waitFor(() => {
+      expect(queryByTestId('dhis2-uicore-splitbutton-menu')).not.toBeInTheDocument();
+    });
+  });
+  it('adds title and aria-label attributes to the right button', () => {
+    const {
+      getByTestId
+    } = render( /*#__PURE__*/React.createElement(SplitButton, null));
+    const toggleButton = getByTestId('dhis2-uicore-splitbutton-toggle');
+    expect(toggleButton).toHaveAttribute('title', 'Toggle dropdown');
+    expect(toggleButton).toHaveAttribute('aria-label', 'Toggle dropdown');
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/button",
-    "version": "9.5.0",
+    "version": "9.7.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.7.0",
+        "@dhis2-ui/loader": "9.7.0",
+        "@dhis2-ui/popper": "9.7.0",
+        "@dhis2/ui-constants": "9.7.0",
+        "@dhis2/ui-icons": "9.7.0",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },