carbon-react 100.0.0 → 100.1.0

package/lib/__internal__/focus-trap/focus-trap.component.js

@@ -31,8 +31,10 @@ const FocusTrap = ({
   const [focusableElements, setFocusableElements] = (0, _react.useState)();
   const [firstElement, setFirstElement] = (0, _react.useState)();
   const [lastElement, setLastElement] = (0, _react.useState)();
+  const [currentFocusedElement, setCurrentFocusedElement] = (0, _react.useState)();
   const {
-    isAnimationComplete
+    isAnimationComplete,
+    triggerRefocusFlag
   } = (0, _react.useContext)(_modal.ModalContext);
   const hasNewInputs = (0, _react.useCallback)(candidate => {
     if (!focusableElements || candidate.length !== focusableElements.length) {
@@ -114,6 +116,33 @@ const FocusTrap = ({
       document.removeEventListener("keydown", trapFn);
     };
   }, [firstElement, lastElement, focusableElements, bespokeTrap]);
+  const updateCurrentFocusedElement = (0, _react.useCallback)(() => {
+    const element = focusableElements === null || focusableElements === void 0 ? void 0 : focusableElements.find(el => el === document.activeElement);
+
+    if (element) {
+      setCurrentFocusedElement(element);
+    }
+  }, [focusableElements]);
+  (0, _react.useEffect)(() => {
+    document.addEventListener("focusin", updateCurrentFocusedElement);
+    return () => {
+      document.removeEventListener("focusin", updateCurrentFocusedElement);
+    };
+  }, [updateCurrentFocusedElement]);
+  const refocusTrap = (0, _react.useCallback)(() => {
+    /* istanbul ignore else */
+    if (currentFocusedElement && !currentFocusedElement.hasAttribute("disabled")) {
+      // the trap breaks if it tries to refocus a disabled element
+      (0, _focusTrapUtils.setElementFocus)(currentFocusedElement);
+    } else if (firstElement) {
+      (0, _focusTrapUtils.setElementFocus)(firstElement);
+    }
+  }, [currentFocusedElement, firstElement]);
+  (0, _react.useEffect)(() => {
+    if (triggerRefocusFlag) {
+      refocusTrap();
+    }
+  }, [triggerRefocusFlag, refocusTrap]);
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: trapRef
   }, children);

package/lib/components/modal/__internal__/modal-manager.js

@@ -17,6 +17,8 @@ function _classPrivateFieldSet(receiver, privateMap, value) { var descriptor = _
 
 function _classApplyDescriptorSet(receiver, descriptor, value) { if (descriptor.set) { descriptor.set.call(receiver, value); } else { if (!descriptor.writable) { throw new TypeError("attempted to set read only private field"); } descriptor.value = value; } }
 
+function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
+
 function _classPrivateFieldGet(receiver, privateMap) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "get"); return _classApplyDescriptorGet(receiver, descriptor); }
 
 function _classExtractFieldDescriptor(receiver, privateMap, action) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to " + action + " private field on non-instance"); } return privateMap.get(receiver); }
@@ -25,39 +27,73 @@ function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) {
 
 var _modalList = /*#__PURE__*/new WeakMap();
 
+var _getTopModal = /*#__PURE__*/new WeakSet();
+
 let ModalManagerInstance = /*#__PURE__*/function () {
   function ModalManagerInstance() {
     _classCallCheck(this, ModalManagerInstance);
 
+    _getTopModal.add(this);
+
     _modalList.set(this, {
       writable: true,
       value: []
     });
 
-    _defineProperty(this, "addModal", modal => {
-      _classPrivateFieldGet(this, _modalList).push(modal);
+    _defineProperty(this, "addModal", (modal, setTriggerRefocusFlag) => {
+      const {
+        modal: topModal,
+        setTriggerRefocusFlag: setTrapFlag
+      } = _classPrivateMethodGet(this, _getTopModal, _getTopModal2).call(this);
+
+      if (topModal && setTrapFlag) {
+        setTrapFlag(false);
+      }
+
+      _classPrivateFieldGet(this, _modalList).push({
+        modal,
+        setTriggerRefocusFlag
+      });
     });
   }
 
   _createClass(ModalManagerInstance, [{
     key: "isTopmost",
     value: function isTopmost(modal) {
-      if (!modal || !_classPrivateFieldGet(this, _modalList).length) {
+      const {
+        modal: topModal
+      } = _classPrivateMethodGet(this, _getTopModal, _getTopModal2).call(this);
+
+      if (!modal || !topModal) {
         return false;
       }
 
-      return _classPrivateFieldGet(this, _modalList).indexOf(modal) === _classPrivateFieldGet(this, _modalList).length - 1;
+      return modal === topModal;
     }
   }, {
     key: "removeModal",
     value: function removeModal(modal) {
-      const modalIndex = _classPrivateFieldGet(this, _modalList).indexOf(modal);
+      const modalIndex = _classPrivateFieldGet(this, _modalList).findIndex(({
+        modal: m
+      }) => m === modal);
 
       if (modalIndex === -1) {
         return;
       }
 
       _classPrivateFieldGet(this, _modalList).splice(modalIndex, 1);
+
+      if (!_classPrivateFieldGet(this, _modalList).length) {
+        return;
+      }
+
+      const {
+        setTriggerRefocusFlag
+      } = _classPrivateMethodGet(this, _getTopModal, _getTopModal2).call(this);
+
+      if (setTriggerRefocusFlag) {
+        setTriggerRefocusFlag(true);
+      }
     }
   }, {
     key: "clearList",
@@ -69,6 +105,14 @@ let ModalManagerInstance = /*#__PURE__*/function () {
   return ModalManagerInstance;
 }();
 
+function _getTopModal2() {
+  if (!_classPrivateFieldGet(this, _modalList).length) {
+    return {};
+  }
+
+  return _classPrivateFieldGet(this, _modalList)[_classPrivateFieldGet(this, _modalList).length - 1];
+}
+
 const ModalManager = new ModalManagerInstance();
 var _default = ModalManager;
 exports.default = _default;

package/lib/components/modal/modal.component.js

@@ -46,6 +46,7 @@ const Modal = ({
   const modalRegistered = (0, _react.useRef)(false);
   const originalOverflow = (0, _react.useRef)(undefined);
   const [isAnimationComplete, setAnimationComplete] = (0, _react.useState)(false);
+  const [triggerRefocusFlag, setTriggerRefocusFlag] = (0, _react.useState)(false);
   const setOverflow = (0, _react.useCallback)(() => {
     if (typeof originalOverflow.current === "undefined" && !enableBackgroundUI) {
       originalOverflow.current = document.documentElement.style.overflow;
@@ -110,7 +111,7 @@ const Modal = ({
   const registerModal = (0, _react.useCallback)(() => {
     /* istanbul ignore else */
     if (!modalRegistered.current) {
-      _modalManager.default.addModal(ref.current);
+      _modalManager.default.addModal(ref.current, setTriggerRefocusFlag);
 
       modalRegistered.current = true;
     }
@@ -164,7 +165,8 @@ const Modal = ({
     timeout: timeout
   }, /*#__PURE__*/_react.default.createElement(ModalContext.Provider, {
     value: {
-      isAnimationComplete
+      isAnimationComplete,
+      triggerRefocusFlag
     }
   }, content)))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "100.0.0",
+  "version": "100.1.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {