@dhis2-ui/button 7.8.1 → 7.9.0

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

@@ -0,0 +1,73 @@
+"use strict";
+
+var _layer = require("@dhis2-ui/layer");
+
+var _popper = require("@dhis2-ui/popper");
+
+var _enzyme = require("enzyme");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _testUtils = require("react-dom/test-utils");
+
+var _index = require("../../index.js");
+
+var _dropdownButton = require("../dropdown-button.js");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+describe('<DropdownButton>', () => {
+  describe('controlled mode', () => {
+    describe('open state', () => {
+      const onClick = jest.fn();
+
+      const Component = /*#__PURE__*/_react.default.createElement(_dropdownButton.DropdownButton, {
+        onClick: onClick,
+        open: true,
+        component: /*#__PURE__*/_react.default.createElement("span", null, "test")
+      });
+
+      it('shows the Popper when open is true', async () => {
+        // TODO: https://github.com/popperjs/react-popper/issues/350
+        const wrapper = (0, _enzyme.mount)(Component);
+        await (0, _testUtils.act)(async () => await null);
+        const popper = wrapper.find(_popper.Popper);
+        expect(popper).toHaveLength(1);
+        expect(popper.find('span').text()).toEqual('test');
+      });
+      it('passes an "open" property to the callback payload with the next open state', async () => {
+        // 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');
+        expect(onClick).toHaveBeenCalledTimes(1);
+        const args = onClick.mock.calls[0];
+        expect(args).toHaveLength(2);
+        expect(args[0]).toEqual(expect.objectContaining({
+          open: false
+        }));
+      });
+    });
+    describe('closed state', () => {
+      const onClick = jest.fn();
+      const wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_dropdownButton.DropdownButton, {
+        onClick: onClick,
+        open: false,
+        component: /*#__PURE__*/_react.default.createElement("span", null, "test")
+      }));
+      it('it does not show the Popper when open is false', () => {
+        const popper = wrapper.find(_popper.Popper);
+        expect(popper).toHaveLength(0);
+      });
+      it('passes an "open" property to the callback payload with the next open state (false)', () => {
+        wrapper.find(_index.Button).simulate('click');
+        expect(onClick).toHaveBeenCalledTimes(1);
+        const args = onClick.mock.calls[0];
+        expect(args).toHaveLength(2);
+        expect(args[0]).toEqual(expect.objectContaining({
+          open: true
+        }));
+      });
+    });
+  });
+});

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

@@ -11,9 +11,11 @@ var _layer = require("@dhis2-ui/layer");
 
 var _popper = require("@dhis2-ui/popper");
 
+var _propTypes = require("@dhis2/prop-types");
+
 var _uiConstants = require("@dhis2/ui-constants");
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _propTypes2 = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -43,7 +45,7 @@ function ArrowDown({
 }
 
 ArrowDown.propTypes = {
-  className: _propTypes.default.string
+  className: _propTypes2.default.string
 };
 
 function ArrowUp({
@@ -63,7 +65,7 @@ function ArrowUp({
 }
 
 ArrowUp.propTypes = {
-  className: _propTypes.default.string
+  className: _propTypes2.default.string
 };
 const arrow = {
   styles: /*#__PURE__*/_react.default.createElement(_style.default, {
@@ -82,28 +84,33 @@ class DropdownButton extends _react.Component {
 
     _defineProperty(this, "anchorRef", /*#__PURE__*/_react.default.createRef());
 
-    _defineProperty(this, "onToggle", ({
+    _defineProperty(this, "onClickHandler", ({
       name,
       value
     }, event) => {
-      this.setState({
-        open: !this.state.open
-      }, () => {
+      const handleClick = open => {
         if (this.props.onClick) {
           this.props.onClick({
             name,
             value,
-            open: this.state.open
+            open
           }, event);
         }
-      });
+      };
+
+      if (typeof this.props.open === 'boolean') {
+        handleClick(!this.props.open);
+      } else {
+        this.setState({
+          open: !this.state.open
+        }, () => {
+          handleClick(this.state.open);
+        });
+      }
     });
   }
 
   render() {
-    const {
-      open
-    } = this.state;
     const {
       component,
       children,
@@ -122,6 +129,7 @@ class DropdownButton extends _react.Component {
       initialFocus,
       dataTest
     } = this.props;
+    const open = typeof this.props.open === 'boolean' ? this.props.open : this.state.open;
     const ArrowIconComponent = open ? ArrowUp : ArrowDown;
     return /*#__PURE__*/_react.default.createElement("div", {
       ref: this.anchorRef,
@@ -136,7 +144,7 @@ class DropdownButton extends _react.Component {
       primary: primary,
       secondary: secondary,
       small: small,
-      onClick: this.onToggle,
+      onClick: this.onClickHandler,
       name: name,
       value: value,
       tabIndex: tabIndex,
@@ -145,7 +153,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.onToggle,
+      onClick: this.onClickHandler,
       transparent: true
     }, /*#__PURE__*/_react.default.createElement(_popper.Popper, {
       dataTest: `${dataTest}-popper`,
@@ -164,26 +172,29 @@ DropdownButton.defaultProps = {
 };
 DropdownButton.propTypes = {
   /** Children to render inside the buton */
-  children: _propTypes.default.node,
-  className: _propTypes.default.string,
+  children: _propTypes2.default.node,
+  className: _propTypes2.default.string,
 
   /** Component to show/hide when button is clicked */
-  component: _propTypes.default.element,
-  dataTest: _propTypes.default.string,
+  component: _propTypes2.default.element,
+  dataTest: _propTypes2.default.string,
 
   /** Button variant. Mutually exclusive with `primary` and `secondary` props */
   destructive: _uiConstants.sharedPropTypes.buttonVariantPropType,
 
   /** Make the button non-interactive */
-  disabled: _propTypes.default.bool,
-  icon: _propTypes.default.element,
+  disabled: _propTypes2.default.bool,
+  icon: _propTypes2.default.element,
 
   /** Grants button initial focus on the page */
-  initialFocus: _propTypes.default.bool,
+  initialFocus: _propTypes2.default.bool,
 
   /** Button size. Mutually exclusive with `small` prop */
   large: _uiConstants.sharedPropTypes.sizePropType,
-  name: _propTypes.default.string,
+  name: _propTypes2.default.string,
+
+  /** Controls popper visibility. When implementing this prop the component becomes a controlled component */
+  open: _propTypes2.default.bool,
 
   /** Button variant. Mutually exclusive with `destructive` and `secondary` props */
   primary: _uiConstants.sharedPropTypes.buttonVariantPropType,
@@ -193,15 +204,17 @@ DropdownButton.propTypes = {
 
   /** Button size. Mutually exclusive with `large` prop */
   small: _uiConstants.sharedPropTypes.sizePropType,
-  tabIndex: _propTypes.default.string,
+  tabIndex: _propTypes2.default.string,
 
   /** Type of button. Can take advantage of different default behavior */
-  type: _propTypes.default.oneOf(['submit', 'reset', 'button']),
-  value: _propTypes.default.string,
+  type: _propTypes2.default.oneOf(['submit', 'reset', 'button']),
+  value: _propTypes2.default.string,
 
   /**
    * Callback triggered on click.
    * Called with signature `({ name: string, value: string, open: bool }, event)`
+   * Is required when using the `open` prop to override the internal
+   * state.
    */
-  onClick: _propTypes.default.func
+  onClick: (0, _propTypes.requiredIf)(props => typeof props.open === 'boolean', _propTypes2.default.func)
 };

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

@@ -3,17 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.InitialFocus = exports.WithMenu = exports.Large = exports.Small = exports.Disabled = exports.Destructive = exports.Secondary = exports.Primary = exports.WithClick = exports.Default = exports.default = void 0;
+exports.ManualControl = exports.Open = exports.InitialFocus = exports.WithMenu = exports.Large = exports.Small = exports.Disabled = exports.Destructive = exports.Secondary = exports.Primary = exports.WithClick = exports.Default = exports.default = void 0;
 
 var _menu = require("@dhis2-ui/menu");
 
 var _uiConstants = require("@dhis2/ui-constants");
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _index = require("./index.js");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const description = `
 Presents several actions to a user in a small space. Can replace single, individual buttons. Should only be used for actions that are related to one another. Ensure the button has a useful level that communicates that actions are contained within. Dropdown buttons do not have an explicit action, only expanding the list of contained actions.
@@ -23,13 +27,6 @@ import { DropdownButton } from '@dhis2/ui'
 \`\`\`
 `;
 
-window.onClick = (payload, event) => {
-  console.log('onClick payload', payload);
-  console.log('onClick event', event);
-};
-
-const onClick = (...args) => window.onClick(...args);
-
 const Simple = /*#__PURE__*/_react.default.createElement("span", null, "Simplest thing");
 
 const {
@@ -75,7 +72,9 @@ exports.Default = Default;
 const WithClick = Template.bind({});
 exports.WithClick = WithClick;
 WithClick.args = {
-  onClick: onClick
+  onClick: ({
+    open
+  }) => console.log('onClick: the dropdown is open: ', open)
 };
 const Primary = Template.bind({});
 exports.Primary = Primary;
@@ -140,4 +139,36 @@ InitialFocus.parameters = {
   docs: {
     disable: true
   }
-};
+};
+
+const OpenTemplate = args => {
+  return /*#__PURE__*/_react.default.createElement(_index.DropdownButton, args);
+};
+
+const Open = OpenTemplate.bind({});
+exports.Open = Open;
+Open.args = {
+  open: true,
+  component: Simple,
+  onClick: () => {}
+};
+
+const ManualControlTemplate = args => {
+  const [isOpen, setIsOpen] = (0, _react.useState)(true);
+
+  const handleOpen = () => setIsOpen(false);
+
+  const Menu = /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, "First option does nothing"), /*#__PURE__*/_react.default.createElement("li", {
+    onClick: handleOpen
+  }, "Close the dropdown"));
+
+  return /*#__PURE__*/_react.default.createElement(_index.DropdownButton, _extends({}, args, {
+    onClick: () => setIsOpen(!isOpen),
+    open: isOpen,
+    component: Menu
+  }));
+};
+
+const ManualControl = ManualControlTemplate.bind({});
+exports.ManualControl = ManualControl;
+ManualControl.args = {};

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

@@ -0,0 +1,60 @@
+import { Layer } from '@dhis2-ui/layer';
+import { Popper } from '@dhis2-ui/popper';
+import { mount } from 'enzyme';
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { Button } from '../../index.js';
+import { DropdownButton } from '../dropdown-button.js';
+describe('<DropdownButton>', () => {
+  describe('controlled mode', () => {
+    describe('open state', () => {
+      const onClick = jest.fn();
+      const Component = /*#__PURE__*/React.createElement(DropdownButton, {
+        onClick: onClick,
+        open: true,
+        component: /*#__PURE__*/React.createElement("span", null, "test")
+      });
+      it('shows the Popper when open is true', async () => {
+        // TODO: https://github.com/popperjs/react-popper/issues/350
+        const wrapper = mount(Component);
+        await act(async () => await null);
+        const popper = wrapper.find(Popper);
+        expect(popper).toHaveLength(1);
+        expect(popper.find('span').text()).toEqual('test');
+      });
+      it('passes an "open" property to the callback payload with the next open state', async () => {
+        // TODO: https://github.com/popperjs/react-popper/issues/350
+        const wrapper = mount(Component);
+        await act(async () => await null);
+        wrapper.find(Layer).simulate('click');
+        expect(onClick).toHaveBeenCalledTimes(1);
+        const args = onClick.mock.calls[0];
+        expect(args).toHaveLength(2);
+        expect(args[0]).toEqual(expect.objectContaining({
+          open: false
+        }));
+      });
+    });
+    describe('closed state', () => {
+      const onClick = jest.fn();
+      const wrapper = mount( /*#__PURE__*/React.createElement(DropdownButton, {
+        onClick: onClick,
+        open: false,
+        component: /*#__PURE__*/React.createElement("span", null, "test")
+      }));
+      it('it does not show the Popper when open is false', () => {
+        const popper = wrapper.find(Popper);
+        expect(popper).toHaveLength(0);
+      });
+      it('passes an "open" property to the callback payload with the next open state (false)', () => {
+        wrapper.find(Button).simulate('click');
+        expect(onClick).toHaveBeenCalledTimes(1);
+        const args = onClick.mock.calls[0];
+        expect(args).toHaveLength(2);
+        expect(args[0]).toEqual(expect.objectContaining({
+          open: true
+        }));
+      });
+    });
+  });
+});

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

@@ -4,6 +4,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 import { Layer } from '@dhis2-ui/layer';
 import { Popper } from '@dhis2-ui/popper';
+import { requiredIf } from '@dhis2/prop-types';
 import { spacers, sharedPropTypes } from '@dhis2/ui-constants';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
@@ -64,28 +65,33 @@ class DropdownButton extends Component {
 
     _defineProperty(this, "anchorRef", /*#__PURE__*/React.createRef());
 
-    _defineProperty(this, "onToggle", ({
+    _defineProperty(this, "onClickHandler", ({
       name,
       value
     }, event) => {
-      this.setState({
-        open: !this.state.open
-      }, () => {
+      const handleClick = open => {
         if (this.props.onClick) {
           this.props.onClick({
             name,
             value,
-            open: this.state.open
+            open
           }, event);
         }
-      });
+      };
+
+      if (typeof this.props.open === 'boolean') {
+        handleClick(!this.props.open);
+      } else {
+        this.setState({
+          open: !this.state.open
+        }, () => {
+          handleClick(this.state.open);
+        });
+      }
     });
   }
 
   render() {
-    const {
-      open
-    } = this.state;
     const {
       component,
       children,
@@ -104,6 +110,7 @@ class DropdownButton extends Component {
       initialFocus,
       dataTest
     } = this.props;
+    const open = typeof this.props.open === 'boolean' ? this.props.open : this.state.open;
     const ArrowIconComponent = open ? ArrowUp : ArrowDown;
     return /*#__PURE__*/React.createElement("div", {
       ref: this.anchorRef,
@@ -118,7 +125,7 @@ class DropdownButton extends Component {
       primary: primary,
       secondary: secondary,
       small: small,
-      onClick: this.onToggle,
+      onClick: this.onClickHandler,
       name: name,
       value: value,
       tabIndex: tabIndex,
@@ -127,7 +134,7 @@ class DropdownButton extends Component {
     }, children, /*#__PURE__*/React.createElement(ArrowIconComponent, {
       className: "jsx-3163060161" + " " + (arrow.className || "")
     })), open && /*#__PURE__*/React.createElement(Layer, {
-      onClick: this.onToggle,
+      onClick: this.onClickHandler,
       transparent: true
     }, /*#__PURE__*/React.createElement(Popper, {
       dataTest: `${dataTest}-popper`,
@@ -166,6 +173,9 @@ DropdownButton.propTypes = {
   large: sharedPropTypes.sizePropType,
   name: PropTypes.string,
 
+  /** Controls popper visibility. When implementing this prop the component becomes a controlled component */
+  open: PropTypes.bool,
+
   /** Button variant. Mutually exclusive with `destructive` and `secondary` props */
   primary: sharedPropTypes.buttonVariantPropType,
 
@@ -183,7 +193,9 @@ DropdownButton.propTypes = {
   /**
    * Callback triggered on click.
    * Called with signature `({ name: string, value: string, open: bool }, event)`
+   * Is required when using the `open` prop to override the internal
+   * state.
    */
-  onClick: PropTypes.func
+  onClick: requiredIf(props => typeof props.open === 'boolean', PropTypes.func)
 };
 export { DropdownButton };

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

@@ -1,6 +1,8 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import { FlyoutMenu, MenuItem } from '@dhis2-ui/menu';
 import { sharedPropTypes } from '@dhis2/ui-constants';
-import React from 'react';
+import React, { useState } from 'react';
 import { DropdownButton } from './index.js';
 const description = `
 Presents several actions to a user in a small space. Can replace single, individual buttons. Should only be used for actions that are related to one another. Ensure the button has a useful level that communicates that actions are contained within. Dropdown buttons do not have an explicit action, only expanding the list of contained actions.
@@ -9,14 +11,6 @@ Presents several actions to a user in a small space. Can replace single, individ
 import { DropdownButton } from '@dhis2/ui'
 \`\`\`
 `;
-
-window.onClick = (payload, event) => {
-  console.log('onClick payload', payload);
-  console.log('onClick event', event);
-};
-
-const onClick = (...args) => window.onClick(...args);
-
 const Simple = /*#__PURE__*/React.createElement("span", null, "Simplest thing");
 const {
   sizeArgType,
@@ -58,7 +52,9 @@ const Template = args => /*#__PURE__*/React.createElement(DropdownButton, args);
 export const Default = Template.bind({});
 export const WithClick = Template.bind({});
 WithClick.args = {
-  onClick: onClick
+  onClick: ({
+    open
+  }) => console.log('onClick: the dropdown is open: ', open)
 };
 export const Primary = Template.bind({});
 Primary.args = {
@@ -115,4 +111,33 @@ InitialFocus.parameters = {
   docs: {
     disable: true
   }
-};
+};
+
+const OpenTemplate = args => {
+  return /*#__PURE__*/React.createElement(DropdownButton, args);
+};
+
+export const Open = OpenTemplate.bind({});
+Open.args = {
+  open: true,
+  component: Simple,
+  onClick: () => {}
+};
+
+const ManualControlTemplate = args => {
+  const [isOpen, setIsOpen] = useState(true);
+
+  const handleOpen = () => setIsOpen(false);
+
+  const Menu = /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "First option does nothing"), /*#__PURE__*/React.createElement("li", {
+    onClick: handleOpen
+  }, "Close the dropdown"));
+  return /*#__PURE__*/React.createElement(DropdownButton, _extends({}, args, {
+    onClick: () => setIsOpen(!isOpen),
+    open: isOpen,
+    component: Menu
+  }));
+};
+
+export const ManualControl = ManualControlTemplate.bind({});
+ManualControl.args = {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/button",
-    "version": "7.8.1",
+    "version": "7.9.0",
     "description": "UI Button",
     "repository": {
         "type": "git",
@@ -32,11 +32,11 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.0.0-beta.1",
-        "@dhis2-ui/layer": "7.8.1",
-        "@dhis2-ui/loader": "7.8.1",
-        "@dhis2-ui/popper": "7.8.1",
-        "@dhis2/ui-constants": "7.8.1",
-        "@dhis2/ui-icons": "7.8.1",
+        "@dhis2-ui/layer": "7.9.0",
+        "@dhis2-ui/loader": "7.9.0",
+        "@dhis2-ui/popper": "7.9.0",
+        "@dhis2/ui-constants": "7.9.0",
+        "@dhis2/ui-icons": "7.9.0",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },