orcs-design-system 3.1.29 → 3.1.31

package/es/components/Modal/index.js

@@ -2,14 +2,14 @@ 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", "theme", "visible", "overlayID", "modalID", "headerContent", "footerContent"];
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, useMemo, 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 FocusTrap from "focus-trap-react";
 import { css } from "@styled-system/css";
 import { themeGet } from "@styled-system/theme-get";
-import { commonKeys } from "../../hooks/keypress";
 import Icon from "../Icon";
 import Button from "../Button";
 import Flex from "../Flex";
@@ -74,18 +74,6 @@ var ScrollableContent = styled.div.withConfig({
 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,
@@ -103,6 +91,10 @@ var Modal = function Modal(_ref) {
     headerContent = _ref.headerContent,
     footerContent = _ref.footerContent,
     restProps = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    lastActiveElement = _useState2[0],
+    setLastActiveElement = _useState2[1];
   var options = {
     disabled: !visible
   };
@@ -116,62 +108,37 @@ var Modal = function Modal(_ref) {
       return headerContent;
     }
   }, [restProps.ariaLabel, headerContent]);
-
-  // Initial focus point for keyboard navigation
-  var modalContainerRef = useRef();
-
-  // If bottom becomes focused then re-focus the close button
-
-  // Ref to close button
-  var button = useRef();
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    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) {
-      autoFocusable.focus();
+  var focusLastActiveElement = useCallback(function () {
+    if (!lastActiveElement) return;
+    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 {
-      firstInput === null || firstInput === void 0 || firstInput.focus();
+      lastActiveElement.focus();
     }
-  }, [modalContainerRef]);
+  }, [lastActiveElement]);
 
   // On becoming visible focus the top
   useEffect(function () {
-    if (visible) {
+    if (visible && !lastActiveElement) {
       // Keep track of last clicked element to refocus to after dialog closes
       setLastActiveElement(document.activeElement);
+    } else {
+      setLastActiveElement(null);
 
-      // Prevents tabbing of elements underneath modal overlay
-      makeRootNotFocusable();
-
-      // See function
-      setFocus();
-    } else if (!visible) {
-      makeRootFocusable();
+      // Focus the last active element before modal open when modal is closed
+      focusLastActiveElement();
     }
-  }, [visible, setFocus]);
+  }, [visible, focusLastActiveElement, lastActiveElement]);
   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("div", {
+  }, restProps), visible && /*#__PURE__*/React.createElement(FocusTrap, {
+    focusTrapOptions: {
+      onDeactivate: onClose
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     ref: modalRef,
     role: "dialog",
     "aria-modal": "true",
@@ -187,13 +154,11 @@ var Modal = function Modal(_ref) {
     borderRadius: "2",
     bg: "white",
     p: "r",
-    id: modalID,
-    ref: modalContainerRef
+    id: modalID
   }, headerContent ? /*#__PURE__*/React.createElement(HeaderContent, null, /*#__PURE__*/React.createElement(Box, {
     mr: "xl",
     width: "100%"
   }, headerContent), /*#__PURE__*/React.createElement(CloseButton, {
-    ref: button,
     onClick: onClose,
     className: "modal-close",
     small: true,
@@ -204,7 +169,6 @@ var Modal = function Modal(_ref) {
     color: "greyDark",
     size: "lg"
   }))) : /*#__PURE__*/React.createElement(CloseButton, {
-    ref: button,
     onClick: onClose,
     className: "modal-close",
     small: true,
@@ -217,7 +181,7 @@ var Modal = function Modal(_ref) {
   })), /*#__PURE__*/React.createElement(ScrollableContent, {
     headerContent: headerContent,
     overflow: overflow
-  }, children), footerContent && /*#__PURE__*/React.createElement(FooterContent, null, footerContent))));
+  }, 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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.1.29",
+  "version": "3.1.31",
   "engines": {
     "node": "18.17.1"
   },
@@ -47,6 +47,7 @@
     "@styled-system/prop-types": "^5.1.5",
     "@styled-system/should-forward-prop": "^5.1.5",
     "@styled-system/theme-get": "^5.1.2",
+    "focus-trap-react": "^10.2.3",
     "moment": "^2.29.4",
     "polished": "^3.7.1",
     "prop-types": "^15.6.2",