orcs-design-system 3.1.27 → 3.1.28

package/es/components/ActionsMenu/index.js

@@ -1,18 +1,20 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["as"],
-  _excluded2 = ["theme", "onToggle", "toggleState", "direction", "menuTopPosition", "menuLeftPosition", "menuRightPosition", "menuWidth", "customTriggerComponent", "children", "triggerRef", "ariaLabel"],
-  _excluded3 = ["children", "customTriggerComponent", "direction", "isOpen", "theme", "closeOnClick", "ariaLabel", "triggerRef"];
+  _excluded2 = ["theme", "onToggle", "toggleState", "direction", "menuTopPosition", "menuLeftPosition", "menuRightPosition", "menuWidth", "customTriggerComponent", "children", "ariaLabel", "onTriggerFocus", "closeMenu", "closeOnClick"],
+  _excluded3 = ["children", "customTriggerComponent", "direction", "isOpen", "theme", "closeOnClick", "ariaLabel"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-import React, { useState, useEffect, useImperativeHandle, useCallback } from "react";
+import React, { useState, useEffect, useImperativeHandle, useCallback, createContext, useContext, useMemo, useRef } from "react";
 import styled, { css, keyframes, ThemeProvider } from "styled-components";
 import PropTypes from "prop-types";
 import { space, layout } from "styled-system";
 import { themeGet } from "@styled-system/theme-get";
 import { useKeepInView } from "../../hooks/keepInView";
+import { commonKeys } from "../../hooks/keypress";
+var ActionMenuContext = /*#__PURE__*/createContext({});
 var crossTransform1 = keyframes(["0%{transform:translate(0,-6px);border-radius:2px;}50%{transform:translate(0,0);border-radius:2px;}75%{transform:rotate(-45deg) translate(0,0);border-radius:2px;}100%{transform:rotate(-45deg) translate(0,0) scaleX(4);border-radius:0;}"]);
 var crossTransform2 = keyframes(["0%{transform:translate(0,6px);border-radius:2px;}50%{transform:translate(0,0);border-radius:2px;}75%{transform:rotate(45deg) translate(0,0);border-radius:2px;}100%{transform:rotate(45deg) translate(0,0) scaleX(4);border-radius:0;}"]);
 var Wrapper = styled.div.withConfig({
@@ -65,7 +67,18 @@ var Menu = styled.div.withConfig({
 }, function (props) {
   return props.isOpen ? css(["transform:scale(1);opacity:1;pointer-events:auto;"]) : css([""]);
 });
-export var ActionsMenuHeading = styled.div.withConfig({
+export var ActionsMenuHeading = styled(function (props) {
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    onKeyUp: function onKeyUp(e) {
+      if (e.key === commonKeys.ENTER && props !== null && props !== void 0 && props.canClick) {
+        props === null || props === void 0 || props.onClick();
+      }
+    }
+  }));
+}).attrs({
+  tabIndex: "0",
+  role: "button"
+}).withConfig({
   displayName: "ActionsMenu__ActionsMenuHeading",
   componentId: "sc-yvbni2-4"
 })(["color:", ";padding:8px;width:100%;font-size:", ";font-weight:", ";border-bottom:solid 1px ", ";white-space:nowrap;cursor:", ";"], function (props) {
@@ -80,16 +93,29 @@ export var ActionsMenuHeading = styled.div.withConfig({
   return props.canClick ? "pointer" : "default";
 });
 export var ActionsMenuItem = styled(function (props) {
+  var _useContext = useContext(ActionMenuContext),
+    id = _useContext.id,
+    onItemClick = _useContext.onItemClick;
   var as = props.as,
     others = _objectWithoutProperties(props, _excluded);
   var Component = as ? as : others.href ? "a" : "button";
   var newProps = others;
+  var _newProps = newProps,
+    originalOnClick = _newProps.onClick;
+  var onClick = useMemo(function () {
+    return function (e) {
+      onItemClick(e);
+      originalOnClick === null || originalOnClick === void 0 || originalOnClick(e);
+    };
+  }, [originalOnClick, onItemClick]);
   if (Component === "button") {
-    newProps = _objectSpread(_objectSpread({}, others), {}, {
+    newProps = _objectSpread(_objectSpread({}, others), {}, _defineProperty({
       type: "button"
-    });
+    }, "data-action-menu-id", id));
   }
-  return /*#__PURE__*/React.createElement(Component, newProps);
+  return /*#__PURE__*/React.createElement(Component, _extends({}, newProps, {
+    onClick: onClick
+  }));
 }).attrs({
   role: "listitem"
 }).withConfig({
@@ -135,21 +161,32 @@ export var ActionsMenuBody = function ActionsMenuBody(_ref) {
     menuWidth = _ref.menuWidth,
     customTriggerComponent = _ref.customTriggerComponent,
     children = _ref.children,
-    triggerRef = _ref.triggerRef,
     _ref$ariaLabel = _ref.ariaLabel,
     ariaLabel = _ref$ariaLabel === void 0 ? "Options Menu" : _ref$ariaLabel,
+    onTriggerFocus = _ref.onTriggerFocus,
+    closeMenu = _ref.closeMenu,
+    _ref$closeOnClick = _ref.closeOnClick,
+    closeOnClick = _ref$closeOnClick === void 0 ? false : _ref$closeOnClick,
     props = _objectWithoutProperties(_ref, _excluded2);
-  var _useState = useState({
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isTabbed = _useState2[0],
+    setTabbed = _useState2[1];
+  var _useState3 = useState("action-menu-".concat(Math.random())),
+    _useState4 = _slicedToArray(_useState3, 1),
+    id = _useState4[0];
+  var wrapperRef = useRef();
+  var _useState5 = useState({
       menuLeftPosition: menuLeftPosition,
       menuRightPosition: menuRightPosition,
       menuTopPosition: menuTopPosition
     }),
-    _useState2 = _slicedToArray(_useState, 1),
-    menuPosition = _useState2[0];
-  var _useState3 = useState(direction),
-    _useState4 = _slicedToArray(_useState3, 2),
-    inViewDirection = _useState4[0],
-    setInViewDirection = _useState4[1];
+    _useState6 = _slicedToArray(_useState5, 1),
+    menuPosition = _useState6[0];
+  var _useState7 = useState(direction),
+    _useState8 = _slicedToArray(_useState7, 2),
+    inViewDirection = _useState8[0],
+    setInViewDirection = _useState8[1];
   var setMenuPosition = useCallback(function (newDirection) {
     if (typeof menuLeftPosition !== "undefined" || typeof menuRightPosition !== "undefined") {
       if (menuPosition.menuLeftPosition) {
@@ -169,28 +206,63 @@ export var ActionsMenuBody = function ActionsMenuBody(_ref) {
     _useKeepInView2 = _slicedToArray(_useKeepInView, 2),
     ref = _useKeepInView2[0],
     setIsShown = _useKeepInView2[1];
-  var onToggleInView = function onToggleInView(e) {
-    setIsShown(!toggleState);
-    onToggle(e);
-  };
+  useEffect(function () {
+    setIsShown(toggleState);
+  }, [toggleState, setIsShown]);
   var triggerBtn = null;
+  var value = useMemo(function () {
+    return {
+      id: id,
+      onItemClick: function onItemClick(e) {
+        if (closeOnClick && !isTabbed) {
+          closeMenu(e);
+        }
+      }
+    };
+  }, [closeOnClick, isTabbed, closeMenu, id]);
   if (customTriggerComponent) {
     triggerBtn = /*#__PURE__*/React.cloneElement(customTriggerComponent, {
-      onClick: onToggleInView,
+      onClick: onToggle,
       "aria-label": ariaLabel,
-      "aria-expanded": "".concat(toggleState)
+      "aria-expanded": "".concat(toggleState),
+      onFocus: onTriggerFocus,
+      id: id
     });
   } else {
     triggerBtn = /*#__PURE__*/React.createElement(Control, {
       "aria-label": ariaLabel,
       "aria-expanded": "".concat(toggleState),
-      ref: triggerRef,
-      onClick: onToggleInView
+      onClick: onToggle,
+      onFocus: onTriggerFocus,
+      id: id
     }, /*#__PURE__*/React.createElement(Icon, {
       isOpen: toggleState
     }));
   }
-  var component = /*#__PURE__*/React.createElement(Wrapper, props, triggerBtn, /*#__PURE__*/React.createElement(Menu, {
+  var component = /*#__PURE__*/React.createElement(Wrapper, _extends({}, props, {
+    ref: wrapperRef,
+    onKeyUp: function onKeyUp(e) {
+      if ([commonKeys.ESCAPE, commonKeys.ESC].includes(e.key)) {
+        closeMenu(e);
+        document.getElementById(id).focus();
+      }
+      if (commonKeys.TAB === e.key && !isTabbed) {
+        setTabbed === null || setTabbed === void 0 || setTabbed(true);
+      }
+    },
+    onBlur: function onBlur(e) {
+      setTimeout(function () {
+        var _document$getElementB;
+        var focusedElement = document.activeElement;
+        var isChild = wrapperRef.current.contains(focusedElement);
+        var isModalChild = (_document$getElementB = document.getElementById("modal-overlay")) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.contains(focusedElement);
+        var isModalAndTabbed = isTabbed && isModalChild;
+        if (isChild || isModalAndTabbed) return;
+        setTabbed === null || setTabbed === void 0 || setTabbed(false);
+        closeMenu(e);
+      }, 0);
+    }
+  }), triggerBtn, /*#__PURE__*/React.createElement(Menu, {
     isOpen: toggleState,
     direction: inViewDirection,
     menuTopPosition: menuPosition.menuTopPosition,
@@ -199,14 +271,19 @@ export var ActionsMenuBody = function ActionsMenuBody(_ref) {
     menuWidth: menuWidth,
     ref: ref,
     role: "list"
-  }, children));
+  }, /*#__PURE__*/React.createElement(ActionMenuContext.Provider, {
+    value: value
+  }, children)));
   return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
   }, component) : component;
 };
 ActionsMenuBody.propTypes = {
+  onTriggerFocus: PropTypes.func,
   onToggle: PropTypes.func.isRequired,
+  closeMenu: PropTypes.func.isRequired,
   toggleState: PropTypes.bool.isRequired,
+  closeOnClick: PropTypes.bool,
   direction: PropTypes.string,
   menuTopPosition: PropTypes.string,
   menuLeftPosition: PropTypes.string,
@@ -215,10 +292,7 @@ ActionsMenuBody.propTypes = {
   customTriggerComponent: PropTypes.node,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   theme: PropTypes.object,
-  ariaLabel: PropTypes.string,
-  triggerRef: PropTypes.shape({
-    current: PropTypes.any
-  })
+  ariaLabel: PropTypes.string
 };
 var ActionsMenu = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
   var children = _ref2.children,
@@ -231,12 +305,11 @@ var ActionsMenu = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
     closeOnClick = _ref2$closeOnClick === void 0 ? true : _ref2$closeOnClick,
     _ref2$ariaLabel = _ref2.ariaLabel,
     ariaLabel = _ref2$ariaLabel === void 0 ? "Options Menu" : _ref2$ariaLabel,
-    triggerRef = _ref2.triggerRef,
     props = _objectWithoutProperties(_ref2, _excluded3);
-  var _useState5 = useState(isOpen),
-    _useState6 = _slicedToArray(_useState5, 2),
-    toggleState = _useState6[0],
-    setToggle = _useState6[1];
+  var _useState9 = useState(isOpen),
+    _useState10 = _slicedToArray(_useState9, 2),
+    toggleState = _useState10[0],
+    setToggle = _useState10[1];
   useImperativeHandle(ref, function () {
     return {
       closeMenu: function closeMenu() {
@@ -244,38 +317,23 @@ var ActionsMenu = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
       }
     };
   });
-  useEffect(function () {
-    if (!closeOnClick || !toggleState) {
-      return;
-    }
-    var handleClicked = function handleClicked() {
-      // As the event listener is attached in capture phase, need to do this make sure the sate change are after react event cycle.
-      setTimeout(function () {
-        return setToggle(false);
-      }, 0);
-    };
-
-    // handle click to hide menu
-    // If any of the actions are using stopPropagation(), the event will stop in the react mounting root.
-    // So use capture phase to detect anything clicked.
-    document.addEventListener("click", handleClicked, true);
-    return function () {
-      // If menu closed, unregister event listener to prevent memory leaks
-      document.removeEventListener("click", handleClicked, true);
-    };
-  }, [closeOnClick, toggleState]);
   var onToggle = function onToggle(e) {
     e.stopPropagation();
     setToggle(!toggleState);
   };
+  var closeMenu = function closeMenu(e) {
+    e.stopPropagation();
+    setToggle(false);
+  };
   return /*#__PURE__*/React.createElement(ActionsMenuBody, _extends({
     onToggle: onToggle,
+    closeMenu: closeMenu,
     toggleState: toggleState,
     customTriggerComponent: customTriggerComponent,
     direction: direction,
     theme: theme,
     ariaLabel: ariaLabel,
-    triggerRef: triggerRef
+    closeOnClick: closeOnClick
   }, props), children);
 });
 ActionsMenu.propTypes = {
@@ -287,10 +345,7 @@ ActionsMenu.propTypes = {
   /** Specifies the colour theme */
   theme: PropTypes.object,
   /** Specifies the aria-label for the button */
-  ariaLabel: PropTypes.object,
-  triggerRef: PropTypes.shape({
-    current: PropTypes.any
-  })
+  ariaLabel: PropTypes.object
 };
 ActionsMenu.__docgenInfo = {
   "description": "",
@@ -365,19 +420,6 @@ ActionsMenu.__docgenInfo = {
         "name": "object"
       },
       "required": false
-    },
-    "triggerRef": {
-      "description": "",
-      "type": {
-        "name": "shape",
-        "value": {
-          "current": {
-            "name": "any",
-            "required": false
-          }
-        }
-      },
-      "required": false
     }
   }
 };
@@ -398,6 +440,24 @@ ActionsMenuBody.__docgenInfo = {
       },
       "required": false
     },
+    "closeOnClick": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "onTriggerFocus": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    },
     "onToggle": {
       "description": "",
       "type": {
@@ -405,6 +465,13 @@ ActionsMenuBody.__docgenInfo = {
       },
       "required": true
     },
+    "closeMenu": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": true
+    },
     "toggleState": {
       "description": "",
       "type": {
@@ -475,19 +542,6 @@ ActionsMenuBody.__docgenInfo = {
         "name": "object"
       },
       "required": false
-    },
-    "triggerRef": {
-      "description": "",
-      "type": {
-        "name": "shape",
-        "value": {
-          "current": {
-            "name": "any",
-            "required": false
-          }
-        }
-      },
-      "required": false
     }
   }
 };

package/es/components/Modal/Modal.stories.js

@@ -1,5 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { useRef, useState } from "react";
+import React, { useState } from "react";
 import Button from "../Button";
 import Modal from ".";
 import { H3, P } from "../Typography";
@@ -17,7 +17,6 @@ var Basic = function Basic() {
     _useState2 = _slicedToArray(_useState, 2),
     visible = _useState2[0],
     setVisible = _useState2[1];
-  var button = useRef();
   var handleOnButtonClick = function handleOnButtonClick() {
     setVisible(true);
   };
@@ -30,14 +29,12 @@ var Basic = function Basic() {
     };
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-    ref: button,
     onClick: handleOnButtonClick
   }, "Open basic modal"), /*#__PURE__*/React.createElement(Modal, {
     ariaLabel: "Modal Name",
     visible: visible,
     handleOnConfirm: handleOnConfirm,
-    onClose: onToggleModal(false),
-    triggerRef: button
+    onClose: onToggleModal(false)
   }, /*#__PURE__*/React.createElement(Spacer, {
     mb: "r"
   }, /*#__PURE__*/React.createElement(H3, null, "Modal Title"), /*#__PURE__*/React.createElement(P, null, "Content of the modal. Modal accepts any child components or content."))));
@@ -48,7 +45,7 @@ export var basicModal = function basicModal() {
 basicModal.parameters = {
   docs: {
     source: {
-      code: "\nconst Basic = () => {\n  const [visible, setVisible] = useState(false);\n  const button = useRef();\n\n  const handleOnButtonClick = () => {\n    setVisible(true);\n  };\n\n  const handleOnConfirm = () => {\n    setVisible(false);\n  };\n\n  const onToggleModal = (visible) => () => {\n    setVisible(visible);\n  };\n\n  return (\n    <>\n      <Button ref={button} onClick={handleOnButtonClick}>\n        Open basic modal\n      </Button>\n      <Modal\n        ariaLabel=\"Modal Title\"\n        visible={visible}\n        handleOnConfirm={handleOnConfirm}\n        onClose={onToggleModal(false)}\n        triggerRef={button}\n      >\n        <Spacer mb=\"r\">\n          <H3>Modal Title</H3>\n          <P>\n            Content of the modal. Modal accepts any child components or content.\n          </P>\n        </Spacer>\n      </Modal>\n    </>\n  );\n};"
+      code: "\nconst Basic = () => {\n  const [visible, setVisible] = useState(false);\n\n  const handleOnButtonClick = () => {\n    setVisible(true);\n  };\n\n  const handleOnConfirm = () => {\n    setVisible(false);\n  };\n\n  const onToggleModal = (visible) => () => {\n    setVisible(visible);\n  };\n\n  return (\n    <>\n      <Button onClick={handleOnButtonClick}>\n        Open basic modal\n      </Button>\n      <Modal\n        ariaLabel=\"Modal Title\"\n        visible={visible}\n        handleOnConfirm={handleOnConfirm}\n        onClose={onToggleModal(false)}\n      >\n        <Spacer mb=\"r\">\n          <H3>Modal Title</H3>\n          <P>\n            Content of the modal. Modal accepts any child components or content.\n          </P>\n        </Spacer>\n      </Modal>\n    </>\n  );\n};"
     }
   }
 };
@@ -57,7 +54,6 @@ var Advanced = function Advanced() {
     _useState4 = _slicedToArray(_useState3, 2),
     visible = _useState4[0],
     setVisible = _useState4[1];
-  var button = useRef();
   var handleOnButtonClick = function handleOnButtonClick() {
     setVisible(true);
   };
@@ -74,7 +70,6 @@ var Advanced = function Advanced() {
     onClick: handleOnConfirm
   }, "Go to full article");
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-    ref: button,
     onClick: handleOnButtonClick
   }, "Open advanced modal"), /*#__PURE__*/React.createElement(Modal, {
     maxWidth: "500px",
@@ -85,8 +80,7 @@ var Advanced = function Advanced() {
     handleOnConfirm: handleOnConfirm,
     onClose: onToggleModal(false),
     headerContent: modalHeader,
-    footerContent: modalFooter,
-    triggerRef: button
+    footerContent: modalFooter
   }, /*#__PURE__*/React.createElement(Spacer, {
     my: "r"
   }, /*#__PURE__*/React.createElement(P, null, "Content of the modal. Modal accepts any child components or content. This content will be scrollable if it exeeds the height of the modal."), /*#__PURE__*/React.createElement(P, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."), /*#__PURE__*/React.createElement(P, null, "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"))));
@@ -97,7 +91,7 @@ export var advancedModal = function advancedModal() {
 advancedModal.parameters = {
   docs: {
     source: {
-      code: "\nconst Advanced = () => {\n  const [visible, setVisible] = useState(false);\n  const button = useRef();\n\n  const handleOnButtonClick = () => {\n    setVisible(true);\n  };\n\n  const handleOnConfirm = () => {\n    setVisible(false);\n  };\n\n  const onToggleModal = (visible) => () => {\n    setVisible(visible);\n  };\n\n  const modalHeader = <H3>Modal Title</H3>;\n\n  const modalFooter = (\n    <Button onClick={handleOnConfirm}>Go to full article</Button>\n  );\n\n  return (\n    <>\n      <Button ref={button} onClick={handleOnButtonClick}>\n        Open advanced modal\n      </Button>\n      <Modal\n        maxWidth=\"500px\"\n        maxHeight=\"400px\"\n        height=\"90vh\"\n        width=\"90vw\"\n        visible={visible}\n        handleOnConfirm={handleOnConfirm}\n        onClose={onToggleModal(false)}\n        headerContent={modalHeader}\n        footerContent={modalFooter}\n        triggerRef={button}\n      >\n        <Spacer my=\"r\">\n          <P>\n            Content of the modal. Modal accepts any child components or content.\n            This content will be scrollable if it exeeds the height of the\n            modal.\n          </P>\n          <P>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n            aliquip ex ea commodo consequat. Duis aute irure dolor in\n            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\n            culpa qui officia deserunt mollit anim id est laborum.\n          </P>\n          <P>\n            Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n            quae ab illo inventore veritatis et quasi architecto beatae vitae\n            dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit\n            aspernatur aut odit aut fugit, sed quia consequuntur magni dolores\n            eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n            qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,\n            sed quia non numquam eius modi tempora incidunt ut labore et dolore\n            magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis\n            nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut\n            aliquid ex ea commodi consequatur? Quis autem vel eum iure\n            reprehenderit qui in ea voluptate velit esse quam nihil molestiae\n            consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n            pariatur?\n          </P>\n        </Spacer>\n      </Modal>\n    </>\n  );\n};"
+      code: "\nconst Advanced = () => {\n  const [visible, setVisible] = useState(false);\n\n  const handleOnButtonClick = () => {\n    setVisible(true);\n  };\n\n  const handleOnConfirm = () => {\n    setVisible(false);\n  };\n\n  const onToggleModal = (visible) => () => {\n    setVisible(visible);\n  };\n\n  const modalHeader = <H3>Modal Title</H3>;\n\n  const modalFooter = (\n    <Button onClick={handleOnConfirm}>Go to full article</Button>\n  );\n\n  return (\n    <>\n      <Button onClick={handleOnButtonClick}>\n        Open advanced modal\n      </Button>\n      <Modal\n        maxWidth=\"500px\"\n        maxHeight=\"400px\"\n        height=\"90vh\"\n        width=\"90vw\"\n        visible={visible}\n        handleOnConfirm={handleOnConfirm}\n        onClose={onToggleModal(false)}\n        headerContent={modalHeader}\n        footerContent={modalFooter}\n      >\n        <Spacer my=\"r\">\n          <P>\n            Content of the modal. Modal accepts any child components or content.\n            This content will be scrollable if it exeeds the height of the\n            modal.\n          </P>\n          <P>\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do\n            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim\n            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n            aliquip ex ea commodo consequat. Duis aute irure dolor in\n            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\n            culpa qui officia deserunt mollit anim id est laborum.\n          </P>\n          <P>\n            Sed ut perspiciatis unde omnis iste natus error sit voluptatem\n            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa\n            quae ab illo inventore veritatis et quasi architecto beatae vitae\n            dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit\n            aspernatur aut odit aut fugit, sed quia consequuntur magni dolores\n            eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est,\n            qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,\n            sed quia non numquam eius modi tempora incidunt ut labore et dolore\n            magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis\n            nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut\n            aliquid ex ea commodi consequatur? Quis autem vel eum iure\n            reprehenderit qui in ea voluptate velit esse quam nihil molestiae\n            consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla\n            pariatur?\n          </P>\n        </Spacer>\n      </Modal>\n    </>\n  );\n};"
     }
   }
 };
@@ -106,7 +100,6 @@ var BasicDialogue = function BasicDialogue() {
     _useState6 = _slicedToArray(_useState5, 2),
     visible = _useState6[0],
     setVisible = _useState6[1];
-  var button = useRef();
   var handleOnButtonClick = function handleOnButtonClick() {
     setVisible(true);
   };
@@ -128,7 +121,6 @@ var BasicDialogue = function BasicDialogue() {
     onClick: onToggleModal(false)
   }, "Cancel")));
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-    ref: button,
     onClick: handleOnButtonClick,
     variant: "danger",
     iconLeft: true
@@ -138,8 +130,7 @@ var BasicDialogue = function BasicDialogue() {
     visible: visible,
     handleOnConfirm: handleOnConfirm,
     onClose: onToggleModal(false),
-    footerContent: modalFooter,
-    triggerRef: button
+    footerContent: modalFooter
   }, /*#__PURE__*/React.createElement(Spacer, {
     mb: "r"
   }, /*#__PURE__*/React.createElement(P, {
@@ -153,7 +144,7 @@ export var basicDialogueModal = function basicDialogueModal() {
 basicDialogueModal.parameters = {
   docs: {
     source: {
-      code: "\nconst BasicDialogue = () => {\n  const [visible, setVisible] = useState(false);\n  const button = useRef();\n\n  const handleOnButtonClick = () => {\n    setVisible(true);\n  };\n\n  const handleOnConfirm = () => {\n    setVisible(false);\n  };\n\n  const onToggleModal = (visible) => () => {\n    setVisible(visible);\n  };\n\n  const modalFooter = (\n    <Flex>\n      <Spacer mr=\"s\">\n        <Button onClick={handleOnConfirm} px=\"l\">\n          OK\n        </Button>\n        <Button variant=\"ghost\" onClick={onToggleModal(false)}>\n          Cancel\n        </Button>\n      </Spacer>\n    </Flex>\n  );\n\n  return (\n    <>\n      <Button\n        ref={button}\n        onClick={handleOnButtonClick}\n        variant=\"danger\"\n        iconLeft\n      >\n        <Icon icon={[\"fas\", \"trash\"]} />\n        Delete data\n      </Button>\n      <Modal\n        visible={visible}\n        handleOnConfirm={handleOnConfirm}\n        onClose={onToggleModal(false)}\n        footerContent={modalFooter}\n        triggerRef={button}\n      >\n        <Spacer mb=\"r\">\n          <P weight=\"bold\" marginBottom=\"sm\">\n            This will remove all data from the application.\n          </P>\n          <P>Do you wish to continue?</P>\n        </Spacer>\n      </Modal>\n    </>\n  );\n};"
+      code: "\nconst BasicDialogue = () => {\n  const [visible, setVisible] = useState(false);\n\n  const handleOnButtonClick = () => {\n    setVisible(true);\n  };\n\n  const handleOnConfirm = () => {\n    setVisible(false);\n  };\n\n  const onToggleModal = (visible) => () => {\n    setVisible(visible);\n  };\n\n  const modalFooter = (\n    <Flex>\n      <Spacer mr=\"s\">\n        <Button onClick={handleOnConfirm} px=\"l\">\n          OK\n        </Button>\n        <Button variant=\"ghost\" onClick={onToggleModal(false)}>\n          Cancel\n        </Button>\n      </Spacer>\n    </Flex>\n  );\n\n  return (\n    <>\n      <Button\n        onClick={handleOnButtonClick}\n        variant=\"danger\"\n        iconLeft\n      >\n        <Icon icon={[\"fas\", \"trash\"]} />\n        Delete data\n      </Button>\n      <Modal\n        visible={visible}\n        handleOnConfirm={handleOnConfirm}\n        onClose={onToggleModal(false)}\n        footerContent={modalFooter}\n      >\n        <Spacer mb=\"r\">\n          <P weight=\"bold\" marginBottom=\"sm\">\n            This will remove all data from the application.\n          </P>\n          <P>Do you wish to continue?</P>\n        </Spacer>\n      </Modal>\n    </>\n  );\n};"
     }
   }
 };
@@ -162,7 +153,6 @@ var EditDialogue = function EditDialogue() {
     _useState8 = _slicedToArray(_useState7, 2),
     visible = _useState8[0],
     setVisible = _useState8[1];
-  var button = useRef();
   var handleOnButtonClick = function handleOnButtonClick() {
     setVisible(true);
   };
@@ -191,7 +181,6 @@ var EditDialogue = function EditDialogue() {
     icon: ["fas", "times"]
   }), "Cancel")));
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-    ref: button,
     onClick: handleOnButtonClick,
     iconLeft: true
   }, /*#__PURE__*/React.createElement(Icon, {
@@ -201,8 +190,7 @@ var EditDialogue = function EditDialogue() {
     handleOnConfirm: handleOnConfirm,
     onClose: onToggleModal(false),
     headerContent: modalHeader,
-    footerContent: modalFooter,
-    triggerRef: button
+    footerContent: modalFooter
   }, /*#__PURE__*/React.createElement(Spacer, {
     my: "r"
   }, /*#__PURE__*/React.createElement(TextInput, {
@@ -224,7 +212,7 @@ export var editDialogueModal = function editDialogueModal() {
 editDialogueModal.parameters = {
   docs: {
     source: {
-      code: "\nconst EditDialogue = () => {\n  const [visible, setVisible] = useState(false);\n  const button = useRef();\n\n  const handleOnButtonClick = () => {\n    setVisible(true);\n  };\n\n  const handleOnConfirm = () => {\n    setVisible(false);\n  };\n\n  const onToggleModal = (visible) => () => {\n    setVisible(visible);\n  };\n\n  const modalHeader = <H3>Modify Details</H3>;\n\n  const modalFooter = (\n    <Flex>\n      <Spacer mr=\"s\">\n        <Button onClick={handleOnConfirm} variant=\"success\" iconLeft>\n          <Icon icon={[\"fas\", \"save\"]} />\n          Save\n        </Button>\n        <Button variant=\"ghost\" onClick={onToggleModal(false)} iconLeft>\n          <Icon icon={[\"fas\", \"times\"]} />\n          Cancel\n        </Button>\n      </Spacer>\n    </Flex>\n  );\n  return (\n    <>\n      <Button ref={button} onClick={handleOnButtonClick} iconLeft>\n        <Icon icon={[\"fas\", \"edit\"]} />\n        Modify Details\n      </Button>\n      <Modal\n        visible={visible}\n        handleOnConfirm={handleOnConfirm}\n        onClose={onToggleModal(false)}\n        headerContent={modalHeader}\n        footerContent={modalFooter}\n        triggerRef={button}\n      >\n        <Spacer my=\"r\">\n          <TextInput\n            id=\"textInput1\"\n            key=\"textInput1\"\n            type=\"text\"\n            fullWidth\n            label=\"Name\"\n            placeholder=\"E.g. Awesome Project\"\n          />\n          <TextArea id=\"TextArea01\" label=\"Description\" fullWidth />\n        </Spacer>\n      </Modal>\n    </>\n  );\n};"
+      code: "\nconst EditDialogue = () => {\n  const [visible, setVisible] = useState(false);\n\n  const handleOnButtonClick = () => {\n    setVisible(true);\n  };\n\n  const handleOnConfirm = () => {\n    setVisible(false);\n  };\n\n  const onToggleModal = (visible) => () => {\n    setVisible(visible);\n  };\n\n  const modalHeader = <H3>Modify Details</H3>;\n\n  const modalFooter = (\n    <Flex>\n      <Spacer mr=\"s\">\n        <Button onClick={handleOnConfirm} variant=\"success\" iconLeft>\n          <Icon icon={[\"fas\", \"save\"]} />\n          Save\n        </Button>\n        <Button variant=\"ghost\" onClick={onToggleModal(false)} iconLeft>\n          <Icon icon={[\"fas\", \"times\"]} />\n          Cancel\n        </Button>\n      </Spacer>\n    </Flex>\n  );\n  return (\n    <>\n      <Button onClick={handleOnButtonClick} iconLeft>\n        <Icon icon={[\"fas\", \"edit\"]} />\n        Modify Details\n      </Button>\n      <Modal\n        visible={visible}\n        handleOnConfirm={handleOnConfirm}\n        onClose={onToggleModal(false)}\n        headerContent={modalHeader}\n        footerContent={modalFooter}\n      >\n        <Spacer my=\"r\">\n          <TextInput\n            id=\"textInput1\"\n            key=\"textInput1\"\n            type=\"text\"\n            fullWidth\n            label=\"Name\"\n            placeholder=\"E.g. Awesome Project\"\n          />\n          <TextArea id=\"TextArea01\" label=\"Description\" fullWidth />\n        </Spacer>\n      </Modal>\n    </>\n  );\n};"
     }
   }
 };

package/es/components/Modal/index.js

@@ -1,15 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "width", "height", "maxWidth", "maxHeight", "minWidth", "minHeight", "overflow", "onClose", "triggerRef", "theme", "visible", "overlayID", "modalID", "headerContent", "footerContent"];
-import React, { useEffect, useMemo, useRef, useState } from "react";
+var _excluded = ["children", "width", "height", "maxWidth", "maxHeight", "minWidth", "minHeight", "overflow", "onClose", "theme", "visible", "overlayID", "modalID", "headerContent", "footerContent"];
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import useOnclickOutside from "react-cool-onclickoutside";
 import PropTypes from "prop-types";
 import styled, { keyframes, ThemeProvider } from "styled-components";
 import { css } from "@styled-system/css";
 import { themeGet } from "@styled-system/theme-get";
-import { commonKeys, useKeyPress } from "../../hooks/keypress";
+import { commonKeys } from "../../hooks/keypress";
 import Icon from "../Icon";
 import Button from "../Button";
 import Flex from "../Flex";
@@ -71,6 +71,21 @@ var ScrollableContent = styled.div.withConfig({
 }, function (props) {
   return props.headerContent ? "0" : "20px";
 });
+var isHidden = function isHidden(el) {
+  return window.getComputedStyle(el).display === "none";
+};
+var makeRootNotFocusable = function makeRootNotFocusable() {
+  var root = document.getElementById("root");
+  root === null || root === void 0 || root.setAttribute("aria-hidden", true);
+  root === null || root === void 0 || root.setAttribute("inert", true);
+};
+
+// Make root focusable again
+var makeRootFocusable = function makeRootFocusable() {
+  var root = document.getElementById("root");
+  root === null || root === void 0 || root.removeAttribute("aria-hidden");
+  root === null || root === void 0 || root.removeAttribute("inert");
+};
 var Modal = function Modal(_ref) {
   var children = _ref.children,
     width = _ref.width,
@@ -81,7 +96,6 @@ var Modal = function Modal(_ref) {
     minHeight = _ref.minHeight,
     overflow = _ref.overflow,
     onClose = _ref.onClose,
-    triggerRef = _ref.triggerRef,
     theme = _ref.theme,
     visible = _ref.visible,
     overlayID = _ref.overlayID,
@@ -102,49 +116,66 @@ var Modal = function Modal(_ref) {
       return headerContent;
     }
   }, [restProps.ariaLabel, headerContent]);
-  useKeyPress(commonKeys.ESCAPE, onClose, options);
-  useKeyPress(commonKeys.ESC, onClose, options);
 
   // Initial focus point for keyboard navigation
-  var top = useRef();
+  var modalContainerRef = useRef();
 
   // If bottom becomes focused then re-focus the close button
-  var bottom = useRef();
 
   // Ref to close button
   var button = useRef();
-
-  // Keep trak on whether its been visible
-  var _useState = useState(visible),
+  var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
-    hasOpened = _useState2[0],
-    setHasOpened = _useState2[1];
+    lastActiveElement = _useState2[0],
+    setLastActiveElement = _useState2[1];
+  var setFocus = useCallback(function () {
+    var autoFocusable = modalContainerRef.current.querySelector("*[autofocus='true']");
+    var firstInput = modalContainerRef.current.querySelectorAll("input")[0];
+    if (!autoFocusable) {
+      firstInput.focus();
+    } else {
+      autoFocusable.focus();
+    }
+  }, [modalContainerRef]);
 
   // On becoming visible focus the top
   useEffect(function () {
     if (visible) {
-      top.current.focus();
-      setHasOpened(true);
-    } else if (hasOpened) {
-      triggerRef && triggerRef.current.focus();
+      // Keep track of last clicked element to refocus to after dialog closes
+      setLastActiveElement(document.activeElement);
+
+      // Prevents tabbing of elements underneath modal overlay
+      makeRootNotFocusable();
+
+      // See function
+      setFocus();
+    } else if (!visible) {
+      makeRootFocusable();
     }
-  }, [visible, hasOpened, top, triggerRef]);
+  }, [visible, setFocus]);
   var component = /*#__PURE__*/React.createElement(Overlay, _extends({
     alignItems: "center",
     justifyContent: "center",
+    onKeyUp: function onKeyUp(e) {
+      e.stopPropagation();
+      if ([commonKeys.ESCAPE, commonKeys.ESC].includes(e.key)) {
+        onClose();
+        makeRootFocusable();
+        if (lastActiveElement !== null && lastActiveElement !== void 0 && lastActiveElement.dataset.actionMenuId && isHidden(lastActiveElement === null || lastActiveElement === void 0 ? void 0 : lastActiveElement.parentNode)) {
+          var actionMenu = document.getElementById(lastActiveElement.dataset.actionMenuId);
+          actionMenu.focus();
+        } else {
+          // Else we can focus the actual last focused element
+          lastActiveElement.focus();
+        }
+      }
+    },
     id: overlayID
-  }, restProps), /*#__PURE__*/React.createElement("span", {
-    tabIndex: "0",
-    ref: top,
-    onFocus: function onFocus() {
-      return bottom.current.focus();
-    }
-  }), /*#__PURE__*/React.createElement("div", {
+  }, restProps), /*#__PURE__*/React.createElement("div", {
     ref: modalRef,
     role: "dialog",
     "aria-modal": "true",
-    "aria-label": ariaLabel,
-    tabIndex: "-1"
+    "aria-label": ariaLabel
   }, /*#__PURE__*/React.createElement(Container, {
     width: width,
     height: height,
@@ -156,7 +187,8 @@ var Modal = function Modal(_ref) {
     borderRadius: "2",
     bg: "white",
     p: "r",
-    id: modalID
+    id: modalID,
+    ref: modalContainerRef
   }, headerContent ? /*#__PURE__*/React.createElement(HeaderContent, null, /*#__PURE__*/React.createElement(Box, {
     mr: "xl",
     width: "100%"
@@ -185,15 +217,7 @@ var Modal = function Modal(_ref) {
   })), /*#__PURE__*/React.createElement(ScrollableContent, {
     headerContent: headerContent,
     overflow: overflow
-  }, children), footerContent && /*#__PURE__*/React.createElement(FooterContent, null, footerContent))), /*#__PURE__*/React.createElement("span", {
-    ref: bottom,
-    tabIndex: "-1"
-  }), /*#__PURE__*/React.createElement("span", {
-    tabIndex: "0",
-    onFocus: function onFocus() {
-      return button.current.focus();
-    }
-  }));
+  }, children), footerContent && /*#__PURE__*/React.createElement(FooterContent, null, footerContent))));
   var wrapper = visible && /*#__PURE__*/ReactDOM.createPortal(theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
   }, component) : component, document.body);
@@ -224,10 +248,6 @@ Modal.propTypes = {
   visible: PropTypes.bool,
   /** Specifies the function to run on clicking X icon. Ensure that this function will close Modal through the `visible` prop */
   onClose: PropTypes.func,
-  /** Required to re-focus keyboard navigation after closing a modal, generally a ref to the button */
-  triggerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any
-  })]),
   /** Specifies whether the Modal overflow is visible or not, default is `hidden`. If height is not enough, vertical scrollbar will be displayed (`overflow-y: auto`) */
   overflow: PropTypes.string,
   /** Specifies the id of the overlay element for targeting */
@@ -384,24 +404,6 @@ Modal.__docgenInfo = {
       },
       "required": false
     },
-    "triggerRef": {
-      "description": "Required to re-focus keyboard navigation after closing a modal, generally a ref to the button",
-      "type": {
-        "name": "union",
-        "value": [{
-          "name": "func"
-        }, {
-          "name": "shape",
-          "value": {
-            "current": {
-              "name": "any",
-              "required": false
-            }
-          }
-        }]
-      },
-      "required": false
-    },
     "overflow": {
       "description": "Specifies whether the Modal overflow is visible or not, default is `hidden`. If height is not enough, vertical scrollbar will be displayed (`overflow-y: auto`)",
       "type": {

package/es/hooks/keypress.js

@@ -11,7 +11,8 @@ export var commonKeys = {
   ARROW_RIGHT: "ArrowRight",
   ENTER: "Enter",
   ESC: "Esc",
-  ESCAPE: "Escape"
+  ESCAPE: "Escape",
+  TAB: "Tab"
 };
 export var useKeyPress = function useKeyPress(targetKey, callback) {
   var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.1.27",
+  "version": "3.1.28",
   "engines": {
     "node": "18.17.1"
   },