@dhis2-ui/button 10.6.0 → 10.7.1

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

@@ -5,12 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SplitButton = void 0;
 var _style = _interopRequireDefault(require("styled-jsx/style"));
+var _propTypes = require("@dhis2/prop-types");
 var _uiConstants = require("@dhis2/ui-constants");
 var _uiIcons = require("@dhis2/ui-icons");
 var _layer = require("@dhis2-ui/layer");
 var _popper = require("@dhis2-ui/popper");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _propTypes2 = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _index = require("../button/index.js");
 var _index2 = _interopRequireDefault(require("../locales/index.js"));
@@ -33,29 +34,66 @@ class SplitButton extends _react.Component {
       open: false
     });
     _defineProperty(this, "anchorRef", /*#__PURE__*/_react.default.createRef());
+    _defineProperty(this, "isControlled", () => typeof this.props.open === 'boolean');
     _defineProperty(this, "handleKeyDown", event => {
-      if (event.key === 'Escape' && this.state.open) {
+      const open = this.isControlled() ? this.props.open : this.state.open;
+      if (event.key === 'Escape' && open) {
         event.preventDefault();
         event.stopPropagation();
-        this.setState({
-          open: false
-        });
+        if (this.isControlled()) {
+          if (this.props.onToggle) {
+            this.props.onToggle({
+              name: this.props.name,
+              value: this.props.value,
+              open: false
+            }, event);
+          }
+        } else {
+          this.setState({
+            open: false
+          });
+        }
         this.anchorRef.current && this.anchorRef.current.focus();
       }
     });
-    _defineProperty(this, "onClick", (payload, event) => {
+    _defineProperty(this, "handlePrimaryAction", (payload, event) => {
       if (this.props.onClick) {
         this.props.onClick({
           name: payload.name,
           value: payload.value,
-          open: this.state.open
+          open: this.isControlled() ? this.props.open : this.state.open
         }, event);
       }
     });
-    _defineProperty(this, "onToggle", () => {
-      this.setState(prevState => ({
-        open: !prevState.open
-      }));
+    _defineProperty(this, "handleToggle", (payload, event) => {
+      if (this.isControlled()) {
+        if (this.props.onToggle) {
+          this.props.onToggle({
+            name: payload.name,
+            value: payload.value,
+            open: !this.props.open
+          }, event);
+        }
+      } else {
+        this.setState(prevState => ({
+          open: !prevState.open
+        }));
+      }
+    });
+    _defineProperty(this, "handleBackdropClick", event => {
+      if (this.isControlled()) {
+        if (this.props.onToggle) {
+          this.props.onToggle({
+            name: this.props.name,
+            value: this.props.value,
+            open: false
+          }, event);
+        }
+      } else {
+        this.setState({
+          open: false
+        });
+      }
     });
   }
   componentDidMount() {
@@ -65,9 +103,7 @@ class SplitButton extends _react.Component {
     document.removeEventListener('keydown', this.handleKeyDown);
   }
   render() {
-    const {
-      open
-    } = this.state;
+    const open = this.isControlled() ? this.props.open : this.state.open;
     const {
       component,
       children,
@@ -101,7 +137,7 @@ class SplitButton extends _react.Component {
       secondary: secondary,
       destructive: destructive,
       disabled: disabled,
-      onClick: this.onClick,
+      onClick: this.handlePrimaryAction,
       type: type,
       tabIndex: tabIndex,
       className: (0, _classnames.default)(className),
@@ -116,7 +152,7 @@ class SplitButton extends _react.Component {
       secondary: secondary,
       destructive: destructive,
       disabled: disabled,
-      onClick: this.onToggle,
+      onClick: this.handleToggle,
       type: type,
       tabIndex: tabIndex,
       className: (0, _classnames.default)(className, rightButton.className),
@@ -124,7 +160,7 @@ class SplitButton extends _react.Component {
       title: _index2.default.t('Toggle dropdown'),
       "aria-label": _index2.default.t('Toggle dropdown')
     }, arrow), open && /*#__PURE__*/_react.default.createElement(_layer.Layer, {
-      onBackdropClick: this.onToggle,
+      onBackdropClick: this.handleBackdropClick,
       transparent: true
     }, /*#__PURE__*/_react.default.createElement(_popper.Popper, {
       dataTest: `${dataTest}-menu`,
@@ -140,38 +176,52 @@ _defineProperty(SplitButton, "defaultProps", {
   dataTest: 'dhis2-uicore-splitbutton'
 });
 SplitButton.propTypes = {
-  children: _propTypes.default.string,
-  className: _propTypes.default.string,
+  children: _propTypes2.default.string,
+  className: _propTypes2.default.string,
   /** Component to render when the dropdown is opened */
-  component: _propTypes.default.element,
-  dataTest: _propTypes.default.string,
+  component: _propTypes2.default.element,
+  dataTest: _propTypes2.default.string,
   /**
    * Applies 'destructive' button appearance, implying a dangerous action.
    */
-  destructive: _propTypes.default.bool,
+  destructive: _propTypes2.default.bool,
   /** Disables the button and makes it uninteractive */
-  disabled: _propTypes.default.bool,
+  disabled: _propTypes2.default.bool,
   /** An icon to add inside the button */
-  icon: _propTypes.default.element,
+  icon: _propTypes2.default.element,
   /** Grants the button the initial focus */
-  initialFocus: _propTypes.default.bool,
+  initialFocus: _propTypes2.default.bool,
   /** Changes 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,
   /**
    * Applies 'primary' button appearance, implying the most important action.
    */
-  primary: _propTypes.default.bool,
+  primary: _propTypes2.default.bool,
   /**
    * Applies 'secondary' button appearance.
    */
-  secondary: _propTypes.default.bool,
+  secondary: _propTypes2.default.bool,
   /** Changes button size. Mutually exclusive with `large` prop */
   small: _uiConstants.sharedPropTypes.sizePropType,
-  tabIndex: _propTypes.default.string,
+  tabIndex: _propTypes2.default.string,
   /** Type of button. Applied to html `button` element */
-  type: _propTypes.default.oneOf(['submit', 'reset', 'button']),
+  type: _propTypes2.default.oneOf(['submit', 'reset', 'button']),
   /** Value associated with the button. Passed in object to onClick handler */
-  value: _propTypes.default.string,
-  onClick: _propTypes.default.func
+  value: _propTypes2.default.string,
+  /**
+   * Callback triggered when the main button is clicked.
+   * Called with signature `({ name: string, value: string, open: bool }, event)`
+   */
+  onClick: _propTypes2.default.func,
+  /**
+   * Callback triggered when the dropdown is toggled (by clicking the chevron, pressing Escape, or clicking the backdrop).
+   * Called with signature `({ name: string, value: string, open: bool }, event)`.
+   * Required if `open` prop is used (controlled component).
+   */
+  onToggle: (0, _propTypes.requiredIf)(props => typeof props.open === 'boolean', _propTypes2.default.func)
 };

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

@@ -3,11 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.WithIcon = exports.Small = exports.Secondary = exports.RTL = exports.Primary = exports.Large = exports.InitialFocus = exports.Disabled = exports.Destructive = exports.Default = void 0;
+exports.default = exports.WithIcon = exports.Small = exports.Secondary = exports.RTL = exports.Primary = exports.Large = exports.InitialFocus = exports.Disabled = exports.Destructive = exports.Default = exports.ControlledOpen = void 0;
 var _uiConstants = require("@dhis2/ui-constants");
+var _menu = require("@dhis2-ui/menu");
+var _modal = require("@dhis2-ui/modal");
 var _react = _interopRequireDefault(require("react"));
+var _button = require("../button/button.js");
+var _buttonStrip = require("../button-strip/button-strip.js");
 var _splitButton = require("./split-button.js");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const description = `
 Similar to the dropdown button, but can be triggered independently of opening the contained action list. The main action may be 'Save' and the contained actions may be "Save and add another" and "Save and open".
 
@@ -113,4 +118,46 @@ const RTL = args => /*#__PURE__*/_react.default.createElement("div", {
 exports.RTL = RTL;
 RTL.args = {
   children: 'RTL text'
+};
+const ControlledOpen = args => {
+  const [openFlyout, setOpenFlyout] = _react.default.useState(false);
+  const [openModal, setOpenModal] = _react.default.useState(false);
+  const handleClick = () => {
+    console.log('Main button clicked. This will not open the flyout menu.');
+  };
+  const handleToggle = () => {
+    setOpenFlyout(prevState => !prevState);
+  };
+  const component = /*#__PURE__*/_react.default.createElement(_menu.FlyoutMenu, null, /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
+    onClick: () => {
+      console.log('Console log and close flyout');
+      setOpenFlyout(false);
+    },
+    label: "Action 1"
+  }), /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
+    onClick: () => {
+      console.log('Open modal and close flyout');
+      setOpenFlyout(false);
+      setOpenModal(true);
+    },
+    label: "Open modal"
+  }));
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_splitButton.SplitButton, _extends({}, args, {
+    open: openFlyout,
+    onClick: handleClick,
+    onToggle: handleToggle,
+    component: component
+  })), openModal && /*#__PURE__*/_react.default.createElement(_modal.Modal, {
+    onClose: () => setOpenModal(false)
+  }, /*#__PURE__*/_react.default.createElement(_modal.ModalTitle, null, "Modal"), /*#__PURE__*/_react.default.createElement(_modal.ModalContent, null, /*#__PURE__*/_react.default.createElement("p", null, "Modal content")), /*#__PURE__*/_react.default.createElement(_modal.ModalActions, null, /*#__PURE__*/_react.default.createElement(_buttonStrip.ButtonStrip, null, /*#__PURE__*/_react.default.createElement(_button.Button, {
+    onClick: () => setOpenModal(false)
+  }, "Close")))));
+};
+exports.ControlledOpen = ControlledOpen;
+ControlledOpen.parameters = {
+  docs: {
+    description: {
+      story: 'This story demonstrates how the `SplitButton` can be controlled from the outside using the `open` prop and an `onToggle` handler that updates the external state.'
+    }
+  }
 };

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

@@ -2,6 +2,7 @@ import _JSXStyle from "styled-jsx/style";
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { requiredIf } from '@dhis2/prop-types';
 import { spacers, sharedPropTypes } from '@dhis2/ui-constants';
 import { IconChevronUp16, IconChevronDown16 } from '@dhis2/ui-icons';
 import { Layer } from '@dhis2-ui/layer';
@@ -24,29 +25,66 @@ class SplitButton extends Component {
       open: false
     });
     _defineProperty(this, "anchorRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "isControlled", () => typeof this.props.open === 'boolean');
     _defineProperty(this, "handleKeyDown", event => {
-      if (event.key === 'Escape' && this.state.open) {
+      const open = this.isControlled() ? this.props.open : this.state.open;
+      if (event.key === 'Escape' && open) {
         event.preventDefault();
         event.stopPropagation();
-        this.setState({
-          open: false
-        });
+        if (this.isControlled()) {
+          if (this.props.onToggle) {
+            this.props.onToggle({
+              name: this.props.name,
+              value: this.props.value,
+              open: false
+            }, event);
+          }
+        } else {
+          this.setState({
+            open: false
+          });
+        }
         this.anchorRef.current && this.anchorRef.current.focus();
       }
     });
-    _defineProperty(this, "onClick", (payload, event) => {
+    _defineProperty(this, "handlePrimaryAction", (payload, event) => {
       if (this.props.onClick) {
         this.props.onClick({
           name: payload.name,
           value: payload.value,
-          open: this.state.open
+          open: this.isControlled() ? this.props.open : this.state.open
         }, event);
       }
     });
-    _defineProperty(this, "onToggle", () => {
-      this.setState(prevState => ({
-        open: !prevState.open
-      }));
+    _defineProperty(this, "handleToggle", (payload, event) => {
+      if (this.isControlled()) {
+        if (this.props.onToggle) {
+          this.props.onToggle({
+            name: payload.name,
+            value: payload.value,
+            open: !this.props.open
+          }, event);
+        }
+      } else {
+        this.setState(prevState => ({
+          open: !prevState.open
+        }));
+      }
+    });
+    _defineProperty(this, "handleBackdropClick", event => {
+      if (this.isControlled()) {
+        if (this.props.onToggle) {
+          this.props.onToggle({
+            name: this.props.name,
+            value: this.props.value,
+            open: false
+          }, event);
+        }
+      } else {
+        this.setState({
+          open: false
+        });
+      }
     });
   }
   componentDidMount() {
@@ -56,9 +94,7 @@ class SplitButton extends Component {
     document.removeEventListener('keydown', this.handleKeyDown);
   }
   render() {
-    const {
-      open
-    } = this.state;
+    const open = this.isControlled() ? this.props.open : this.state.open;
     const {
       component,
       children,
@@ -92,7 +128,7 @@ class SplitButton extends Component {
       secondary: secondary,
       destructive: destructive,
       disabled: disabled,
-      onClick: this.onClick,
+      onClick: this.handlePrimaryAction,
       type: type,
       tabIndex: tabIndex,
       className: cx(className),
@@ -107,7 +143,7 @@ class SplitButton extends Component {
       secondary: secondary,
       destructive: destructive,
       disabled: disabled,
-      onClick: this.onToggle,
+      onClick: this.handleToggle,
       type: type,
       tabIndex: tabIndex,
       className: cx(className, rightButton.className),
@@ -115,7 +151,7 @@ class SplitButton extends Component {
       title: i18n.t('Toggle dropdown'),
       "aria-label": i18n.t('Toggle dropdown')
     }, arrow), open && /*#__PURE__*/React.createElement(Layer, {
-      onBackdropClick: this.onToggle,
+      onBackdropClick: this.handleBackdropClick,
       transparent: true
     }, /*#__PURE__*/React.createElement(Popper, {
       dataTest: `${dataTest}-menu`,
@@ -148,6 +184,10 @@ SplitButton.propTypes = {
   /** Changes button size. Mutually exclusive with `small` prop */
   large: sharedPropTypes.sizePropType,
   name: PropTypes.string,
+  /**
+   * Controls popper visibility. When implementing this prop the component becomes a controlled component
+   */
+  open: PropTypes.bool,
   /**
    * Applies 'primary' button appearance, implying the most important action.
    */
@@ -163,6 +203,16 @@ SplitButton.propTypes = {
   type: PropTypes.oneOf(['submit', 'reset', 'button']),
   /** Value associated with the button. Passed in object to onClick handler */
   value: PropTypes.string,
-  onClick: PropTypes.func
+  /**
+   * Callback triggered when the main button is clicked.
+   * Called with signature `({ name: string, value: string, open: bool }, event)`
+   */
+  onClick: PropTypes.func,
+  /**
+   * Callback triggered when the dropdown is toggled (by clicking the chevron, pressing Escape, or clicking the backdrop).
+   * Called with signature `({ name: string, value: string, open: bool }, event)`.
+   * Required if `open` prop is used (controlled component).
+   */
+  onToggle: requiredIf(props => typeof props.open === 'boolean', PropTypes.func)
 };
 export { SplitButton };

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

@@ -1,5 +1,10 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 import { sharedPropTypes } from '@dhis2/ui-constants';
+import { FlyoutMenu, MenuItem } from '@dhis2-ui/menu';
+import { Modal, ModalContent, ModalTitle, ModalActions } from '@dhis2-ui/modal';
 import React from 'react';
+import { Button } from '../button/button.js';
+import { ButtonStrip } from '../button-strip/button-strip.js';
 import { SplitButton } from './split-button.js';
 const description = `
 Similar to the dropdown button, but can be triggered independently of opening the contained action list. The main action may be 'Save' and the contained actions may be "Save and add another" and "Save and open".
@@ -105,4 +110,45 @@ export const RTL = args => /*#__PURE__*/React.createElement("div", {
 }, /*#__PURE__*/React.createElement(SplitButton, args));
 RTL.args = {
   children: 'RTL text'
+};
+export const ControlledOpen = args => {
+  const [openFlyout, setOpenFlyout] = React.useState(false);
+  const [openModal, setOpenModal] = React.useState(false);
+  const handleClick = () => {
+    console.log('Main button clicked. This will not open the flyout menu.');
+  };
+  const handleToggle = () => {
+    setOpenFlyout(prevState => !prevState);
+  };
+  const component = /*#__PURE__*/React.createElement(FlyoutMenu, null, /*#__PURE__*/React.createElement(MenuItem, {
+    onClick: () => {
+      console.log('Console log and close flyout');
+      setOpenFlyout(false);
+    },
+    label: "Action 1"
+  }), /*#__PURE__*/React.createElement(MenuItem, {
+    onClick: () => {
+      console.log('Open modal and close flyout');
+      setOpenFlyout(false);
+      setOpenModal(true);
+    },
+    label: "Open modal"
+  }));
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(SplitButton, _extends({}, args, {
+    open: openFlyout,
+    onClick: handleClick,
+    onToggle: handleToggle,
+    component: component
+  })), openModal && /*#__PURE__*/React.createElement(Modal, {
+    onClose: () => setOpenModal(false)
+  }, /*#__PURE__*/React.createElement(ModalTitle, null, "Modal"), /*#__PURE__*/React.createElement(ModalContent, null, /*#__PURE__*/React.createElement("p", null, "Modal content")), /*#__PURE__*/React.createElement(ModalActions, null, /*#__PURE__*/React.createElement(ButtonStrip, null, /*#__PURE__*/React.createElement(Button, {
+    onClick: () => setOpenModal(false)
+  }, "Close")))));
+};
+ControlledOpen.parameters = {
+  docs: {
+    description: {
+      story: 'This story demonstrates how the `SplitButton` can be controlled from the outside using the `open` prop and an `onToggle` handler that updates the external state.'
+    }
+  }
 };

package/package.json

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

package/types/index.d.ts

@@ -212,6 +212,10 @@ export interface SplitButtonProps {
      */
     large?: boolean
     name?: string
+    /**
+     * Controls popper visibility. When implementing this prop the component becomes a controlled component
+     */
+    open?: boolean
     /** Applies 'primary' button appearance, implying the most important action */
     primary?: boolean
     /** Applies 'secondary' button appearance */
@@ -229,7 +233,17 @@ export interface SplitButtonProps {
      * Value associated with the button. Passed in object to onClick handler
      */
     value?: string
-    onClick?: ButtonOpenEventHandler
+    /**
+     * Callback triggered when the main button is clicked.
+     * Called with signature `({ name: string, value: string, open: bool }, event)`
+     */
+    onClick?: ButtonEventHandler<React.MouseEvent<HTMLButtonElement>>
+    /**
+     * Callback triggered when the dropdown is toggled (by clicking the chevron, pressing Escape, or clicking the backdrop).
+     * Called with signature `({ name: string, value: string, open: bool }, event)`.
+     * Required if `open` prop is used (controlled component).
+     */
+    onToggle?: ButtonOpenEventHandler
 }
 
 export class SplitButton extends React.Component<SplitButtonProps, any> {