focus-trap 6.1.1 → 6.2.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## 6.2.0
+
+### Minor Changes
+
+- 2267d17: Adding support for multiple elements to be passed in #217
+
+## 6.1.4
+
+### Patch Changes
+
+- 38b6b98: Update tabbable to [5.1.3](https://github.com/focus-trap/tabbable/blob/master/CHANGELOG.md#513) to get bug fixes related to detail and summary elements.
+
+## 6.1.3
+
+### Patch Changes
+
+- 6a39217: Close the gap with #172 and bump `tabbable` to 5.1.2 which has a similar fix.
+- 756c79d: Fix #172 (again): Transpile ESM bundle down to the same browser target used for the CJS and UMD bundles. ESM is just the module system, not the browser target.
+
+## 6.1.2
+
+### Patch Changes
+
+- 00674dd: Fix #172: Transpile non-minified bundles so they are compatible with IE11.
+- 679009b: Update tabbable dependency to 5.1.1 to get transpiled non-minified bundles.
+
 ## 6.1.1
 
 ### Patch Changes

package/README.md

@@ -1,7 +1,7 @@
 # focus-trap [![CI](https://github.com/focus-trap/focus-trap/workflows/CI/badge.svg?branch=master&event=push)](https://github.com/focus-trap/focus-trap/actions?query=workflow:CI+branch:master) [![license](https://badgen.now.sh/badge/license/MIT)](./LICENSE)
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-7-orange.svg?style=flat-square)](#contributors)
+[![All Contributors](https://img.shields.io/badge/all_contributors-11-orange.svg?style=flat-square)](#contributors)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 Trap focus within a DOM node.
@@ -28,7 +28,7 @@ When the focus trap is deactivated, this is what should happen:
 - Focus is passed to *whichever element had focus when the trap was activated* (e.g. the button that opened the modal or menu).
 - Tabbing and clicking behave normally everywhere.
 
-[Check out the demos.](http://davidtheclark.github.io/focus-trap/demo/)
+[Check out the demos.](http://focus-trap.github.io/focus-trap/demo/)
 
 For more advanced usage (e.g. focus traps within focus traps), you can also pause a focus trap's behavior without deactivating it entirely, then unpause at will.
 
@@ -63,7 +63,8 @@ Returns a new focus trap on `element`.
 
 `element` can be
 - a DOM node (the focus trap itself) or
-- a selector string (which will be pass to `document.querySelector()` to find the DOM node).
+- a selector string (which will be passed to `document.querySelector()` to find the DOM node) or
+- an array of DOM nodes or selector strings (where the order determines where the focus will go after the last tabbable element of a DOM node/selector is reached).
 
 `createOptions`:
 
@@ -134,6 +135,16 @@ If the focus trap has not been activated or has not been paused, nothing happens
 
 Returns the `focusTrap`.
 
+### focusTrap.updateContainerElements()
+
+Update the element(s) that are used as containers for the focus trap.
+
+When you call the function `createFocusTrap`, you pass in an element (or selector), or an array of elements (or selectors) to keep the focus within.  This method simply allows you to update which elements to keep the focus within.
+
+A use case for this is found in focus-trap-react, where React `ref`'s may not be initialized yet, but when they are you want to have them be a container element.
+
+Returns the `focusTrap`.
+
 ## Examples
 
 Read code in `demo/` and [see how it works](http://davidtheclark.github.io/focus-trap/demo/).
@@ -206,17 +217,22 @@ In alphabetical order:
 <!-- markdownlint-disable -->
 <table>
   <tr>
-    <td align="center"><a href="http://davidtheclark.com/"><img src="https://avatars2.githubusercontent.com/u/628431?v=4?s=100" width="100px;" alt=""/><br /><sub><b>David Clark</b></sub></a><br /><a href="https://github.com/stefcameron/focus-trap/commits?author=davidtheclark" title="Code">💻</a> <a href="https://github.com/stefcameron/focus-trap/issues?q=author%3Adavidtheclark" title="Bug reports">🐛</a> <a href="#infra-davidtheclark" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/stefcameron/focus-trap/commits?author=davidtheclark" title="Tests">⚠️</a> <a href="https://github.com/stefcameron/focus-trap/commits?author=davidtheclark" title="Documentation">📖</a> <a href="#maintenance-davidtheclark" title="Maintenance">🚧</a></td>
-    <td align="center"><a href="https://github.com/features/security"><img src="https://avatars1.githubusercontent.com/u/27347476?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Dependabot</b></sub></a><br /><a href="#maintenance-dependabot" title="Maintenance">🚧</a></td>
-    <td align="center"><a href="https://github.com/michael-ar"><img src="https://avatars3.githubusercontent.com/u/18557997?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Michael Reynolds</b></sub></a><br /><a href="https://github.com/stefcameron/focus-trap/issues?q=author%3Amichael-ar" title="Bug reports">🐛</a></td>
-    <td align="center"><a href="https://github.com/liunate"><img src="https://avatars2.githubusercontent.com/u/38996291?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Nate Liu</b></sub></a><br /><a href="https://github.com/stefcameron/focus-trap/commits?author=liunate" title="Tests">⚠️</a></td>
-    <td align="center"><a href="https://github.com/sadick254"><img src="https://avatars2.githubusercontent.com/u/5238135?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Sadick</b></sub></a><br /><a href="https://github.com/stefcameron/focus-trap/commits?author=sadick254" title="Code">💻</a> <a href="https://github.com/stefcameron/focus-trap/commits?author=sadick254" title="Tests">⚠️</a> <a href="https://github.com/stefcameron/focus-trap/commits?author=sadick254" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://seanmcp.com/"><img src="https://avatars1.githubusercontent.com/u/6360367?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Sean McPherson</b></sub></a><br /><a href="https://github.com/stefcameron/focus-trap/commits?author=SeanMcP" title="Code">💻</a> <a href="https://github.com/stefcameron/focus-trap/commits?author=SeanMcP" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://stefancameron.com/"><img src="https://avatars3.githubusercontent.com/u/2855350?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Stefan Cameron</b></sub></a><br /><a href="https://github.com/stefcameron/focus-trap/commits?author=stefcameron" title="Code">💻</a> <a href="https://github.com/stefcameron/focus-trap/issues?q=author%3Astefcameron" title="Bug reports">🐛</a> <a href="#infra-stefcameron" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/stefcameron/focus-trap/commits?author=stefcameron" title="Tests">⚠️</a> <a href="https://github.com/stefcameron/focus-trap/commits?author=stefcameron" title="Documentation">📖</a> <a href="#maintenance-stefcameron" title="Maintenance">🚧</a></td>
+    <td align="center"><a href="http://davidtheclark.com/"><img src="https://avatars2.githubusercontent.com/u/628431?v=4" width="100px;" alt=""/><br /><sub><b>David Clark</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/commits?author=davidtheclark" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap/issues?q=author%3Adavidtheclark" title="Bug reports">🐛</a> <a href="#infra-davidtheclark" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/focus-trap/focus-trap/commits?author=davidtheclark" title="Tests">⚠️</a> <a href="https://github.com/focus-trap/focus-trap/commits?author=davidtheclark" title="Documentation">📖</a> <a href="#maintenance-davidtheclark" title="Maintenance">🚧</a></td>
+    <td align="center"><a href="https://stefancameron.com/"><img src="https://avatars3.githubusercontent.com/u/2855350?v=4" width="100px;" alt=""/><br /><sub><b>Stefan Cameron</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/commits?author=stefcameron" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap/issues?q=author%3Astefcameron" title="Bug reports">🐛</a> <a href="#infra-stefcameron" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://github.com/focus-trap/focus-trap/commits?author=stefcameron" title="Tests">⚠️</a> <a href="https://github.com/focus-trap/focus-trap/commits?author=stefcameron" title="Documentation">📖</a> <a href="#maintenance-stefcameron" title="Maintenance">🚧</a></td>
+    <td align="center"><a href="https://github.com/liunate"><img src="https://avatars2.githubusercontent.com/u/38996291?v=4" width="100px;" alt=""/><br /><sub><b>Nate Liu</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/commits?author=liunate" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://github.com/sadick254"><img src="https://avatars2.githubusercontent.com/u/5238135?v=4" width="100px;" alt=""/><br /><sub><b>Sadick</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/commits?author=sadick254" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap/commits?author=sadick254" title="Tests">⚠️</a> <a href="https://github.com/focus-trap/focus-trap/commits?author=sadick254" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/michael-ar"><img src="https://avatars3.githubusercontent.com/u/18557997?v=4" width="100px;" alt=""/><br /><sub><b>Michael Reynolds</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/issues?q=author%3Amichael-ar" title="Bug reports">🐛</a></td>
+    <td align="center"><a href="https://seanmcp.com/"><img src="https://avatars1.githubusercontent.com/u/6360367?v=4" width="100px;" alt=""/><br /><sub><b>Sean McPherson</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/commits?author=SeanMcP" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap/commits?author=SeanMcP" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://github.com/features/security"><img src="https://avatars1.githubusercontent.com/u/27347476?v=4" width="100px;" alt=""/><br /><sub><b>Dependabot</b></sub></a><br /><a href="#maintenance-dependabot" title="Maintenance">🚧</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://recollectr.io"><img src="https://avatars2.githubusercontent.com/u/6835891?v=4" width="100px;" alt=""/><br /><sub><b>Slapbox</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/issues?q=author%3ASlapbox" title="Bug reports">🐛</a></td>
+    <td align="center"><a href="https://github.com/bparish628"><img src="https://avatars1.githubusercontent.com/u/8492971?v=4" width="100px;" alt=""/><br /><sub><b>Benjamin Parish</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/issues?q=author%3Abparish628" title="Bug reports">🐛</a></td>
+    <td align="center"><a href="https://scottblinch.me/"><img src="https://avatars2.githubusercontent.com/u/4682114?v=4" width="100px;" alt=""/><br /><sub><b>Scott Blinch</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/commits?author=scottblinch" title="Documentation">📖</a></td>
+    <td align="center"><a href="https://clintgoodman.com"><img src="https://avatars3.githubusercontent.com/u/5473697?v=4" width="100px;" alt=""/><br /><sub><b>Clint Goodman</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/commits?author=cgood92" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap/commits?author=cgood92" title="Documentation">📖</a> <a href="#example-cgood92" title="Examples">💡</a> <a href="https://github.com/focus-trap/focus-trap/commits?author=cgood92" title="Tests">⚠️</a></td>
   </tr>
 </table>
 
-<!-- markdownlint-restore -->
+<!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
-
 <!-- ALL-CONTRIBUTORS-LIST:END -->

package/dist/focus-trap.esm.js

@@ -1,23 +1,74 @@
 /*!
-* focus-trap 6.1.1
+* focus-trap 6.2.0
 * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
 */
 import { isFocusable, tabbable } from 'tabbable';
 
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    if (enumerableOnly) symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    });
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+
 var activeFocusDelay;
 
-var activeFocusTraps = (function () {
+var activeFocusTraps = function () {
   var trapQueue = [];
   return {
-    activateTrap: function (trap) {
+    activateTrap: function activateTrap(trap) {
       if (trapQueue.length > 0) {
         var activeTrap = trapQueue[trapQueue.length - 1];
+
         if (activeTrap !== trap) {
           activeTrap.pause();
         }
       }
 
       var trapIndex = trapQueue.indexOf(trap);
+
       if (trapIndex === -1) {
         trapQueue.push(trap);
       } else {
@@ -26,9 +77,9 @@ var activeFocusTraps = (function () {
         trapQueue.push(trap);
       }
     },
-
-    deactivateTrap: function (trap) {
+    deactivateTrap: function deactivateTrap(trap) {
       var trapIndex = trapQueue.indexOf(trap);
+
       if (trapIndex !== -1) {
         trapQueue.splice(trapIndex, 1);
       }
@@ -36,53 +87,60 @@ var activeFocusTraps = (function () {
       if (trapQueue.length > 0) {
         trapQueue[trapQueue.length - 1].unpause();
       }
-    },
+    }
   };
-})();
+}();
 
-function createFocusTrap(element, userOptions) {
+function createFocusTrap(elements, userOptions) {
   var doc = document;
-  var container =
-    typeof element === 'string' ? doc.querySelector(element) : element;
 
-  var config = {
+  var config = _objectSpread2({
     returnFocusOnDeactivate: true,
     escapeDeactivates: true,
-    delayInitialFocus: true,
-    ...userOptions,
-  };
+    delayInitialFocus: true
+  }, userOptions);
 
   var state = {
-    firstTabbableNode: null,
-    lastTabbableNode: null,
+    // @type {Array<HTMLElement>}
+    containers: [],
+    // @type {{ firstTabbableNode: HTMLElement, lastTabbableNode: HTMLElement }}
+    tabbableGroups: [],
     nodeFocusedBeforeActivation: null,
     mostRecentlyFocusedNode: null,
     active: false,
-    paused: false,
+    paused: false
   };
-
   var trap = {
     activate: activate,
     deactivate: deactivate,
     pause: pause,
     unpause: unpause,
+    updateContainerElements: updateContainerElements
   };
-
+  updateContainerElements(elements);
   return trap;
 
+  function updateContainerElements(containerElements) {
+    var elementsAsArray = [].concat(containerElements).filter(Boolean);
+    state.containers = elementsAsArray.map(function (element) {
+      return typeof element === 'string' ? doc.querySelector(element) : element;
+    });
+
+    if (state.active) {
+      updateTabbableNodes();
+    }
+
+    return trap;
+  }
+
   function activate(activateOptions) {
     if (state.active) return;
-
     updateTabbableNodes();
-
     state.active = true;
     state.paused = false;
     state.nodeFocusedBeforeActivation = doc.activeElement;
+    var onActivate = activateOptions && activateOptions.onActivate ? activateOptions.onActivate : config.onActivate;
 
-    var onActivate =
-      activateOptions && activateOptions.onActivate
-        ? activateOptions.onActivate
-        : config.onActivate;
     if (onActivate) {
       onActivate();
     }
@@ -93,27 +151,19 @@ function createFocusTrap(element, userOptions) {
 
   function deactivate(deactivateOptions) {
     if (!state.active) return;
-
     clearTimeout(activeFocusDelay);
-
     removeListeners();
     state.active = false;
     state.paused = false;
-
     activeFocusTraps.deactivateTrap(trap);
+    var onDeactivate = deactivateOptions && deactivateOptions.onDeactivate !== undefined ? deactivateOptions.onDeactivate : config.onDeactivate;
 
-    var onDeactivate =
-      deactivateOptions && deactivateOptions.onDeactivate !== undefined
-        ? deactivateOptions.onDeactivate
-        : config.onDeactivate;
     if (onDeactivate) {
       onDeactivate();
     }
 
-    var returnFocus =
-      deactivateOptions && deactivateOptions.returnFocus !== undefined
-        ? deactivateOptions.returnFocus
-        : config.returnFocusOnDeactivate;
+    var returnFocus = deactivateOptions && deactivateOptions.returnFocus !== undefined ? deactivateOptions.returnFocus : config.returnFocusOnDeactivate;
+
     if (returnFocus) {
       delay(function () {
         tryFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation));
@@ -124,100 +174,101 @@ function createFocusTrap(element, userOptions) {
   }
 
   function pause() {
-    if (state.paused || !state.active) return;
+    if (state.paused || !state.active) return trap;
     state.paused = true;
     removeListeners();
+    return trap;
   }
 
   function unpause() {
-    if (!state.paused || !state.active) return;
+    if (!state.paused || !state.active) return trap;
     state.paused = false;
     updateTabbableNodes();
     addListeners();
+    return trap;
   }
 
   function addListeners() {
-    if (!state.active) return;
-
-    // There can be only one listening focus trap at a time
-    activeFocusTraps.activateTrap(trap);
+    if (!state.active) return; // There can be only one listening focus trap at a time
 
-    // Delay ensures that the focused element doesn't capture the event
+    activeFocusTraps.activateTrap(trap); // Delay ensures that the focused element doesn't capture the event
     // that caused the focus trap activation.
-    activeFocusDelay = config.delayInitialFocus
-      ? delay(function () {
-          tryFocus(getInitialFocusNode());
-        })
-      : tryFocus(getInitialFocusNode());
 
+    activeFocusDelay = config.delayInitialFocus ? delay(function () {
+      tryFocus(getInitialFocusNode());
+    }) : tryFocus(getInitialFocusNode());
     doc.addEventListener('focusin', checkFocusIn, true);
     doc.addEventListener('mousedown', checkPointerDown, {
       capture: true,
-      passive: false,
+      passive: false
     });
     doc.addEventListener('touchstart', checkPointerDown, {
       capture: true,
-      passive: false,
+      passive: false
     });
     doc.addEventListener('click', checkClick, {
       capture: true,
-      passive: false,
+      passive: false
     });
     doc.addEventListener('keydown', checkKey, {
       capture: true,
-      passive: false,
+      passive: false
     });
-
     return trap;
   }
 
   function removeListeners() {
     if (!state.active) return;
-
     doc.removeEventListener('focusin', checkFocusIn, true);
     doc.removeEventListener('mousedown', checkPointerDown, true);
     doc.removeEventListener('touchstart', checkPointerDown, true);
     doc.removeEventListener('click', checkClick, true);
     doc.removeEventListener('keydown', checkKey, true);
-
     return trap;
   }
 
   function getNodeForOption(optionName) {
     var optionValue = config[optionName];
     var node = optionValue;
+
     if (!optionValue) {
       return null;
     }
+
     if (typeof optionValue === 'string') {
       node = doc.querySelector(optionValue);
+
       if (!node) {
         throw new Error('`' + optionName + '` refers to no known node');
       }
     }
+
     if (typeof optionValue === 'function') {
       node = optionValue();
+
       if (!node) {
         throw new Error('`' + optionName + '` did not return a node');
       }
     }
+
     return node;
   }
 
   function getInitialFocusNode() {
     var node;
+
     if (getNodeForOption('initialFocus') !== null) {
       node = getNodeForOption('initialFocus');
-    } else if (container.contains(doc.activeElement)) {
+    } else if (containersContain(doc.activeElement)) {
       node = doc.activeElement;
     } else {
-      node = state.firstTabbableNode || getNodeForOption('fallbackFocus');
+      var firstTabbableGroup = state.tabbableGroups[0];
+      var firstTabbableNode = firstTabbableGroup && firstTabbableGroup.firstTabbableNode;
+      node = firstTabbableNode || getNodeForOption('fallbackFocus');
     }
 
     if (!node) {
-      throw new Error(
-        'Your focus-trap needs to have at least one focusable element'
-      );
+      throw new Error('Your focus-trap needs to have at least one focusable element');
     }
 
     return node;
@@ -226,12 +277,12 @@ function createFocusTrap(element, userOptions) {
   function getReturnFocusNode(previousActiveElement) {
     var node = getNodeForOption('setReturnFocus');
     return node ? node : previousActiveElement;
-  }
-
-  // This needs to be done on mousedown and touchstart instead of click
+  } // This needs to be done on mousedown and touchstart instead of click
   // so that it precedes the focus event.
+
+
   function checkPointerDown(e) {
-    if (container.contains(e.target)) {
+    if (containersContain(e.target)) {
       // allow the click since it ocurred inside the trap
       return;
     }
@@ -250,34 +301,30 @@ function createFocusTrap(element, userOptions) {
         //  that was clicked, whether it's focusable or not; by setting
         //  `returnFocus: true`, we'll attempt to re-focus the node originally-focused
         //  on activation (or the configured `setReturnFocus` node)
-        returnFocus: config.returnFocusOnDeactivate && !isFocusable(e.target),
+        returnFocus: config.returnFocusOnDeactivate && !isFocusable(e.target)
       });
       return;
-    }
-
-    // This is needed for mobile devices.
+    } // This is needed for mobile devices.
     // (If we'll only let `click` events through,
     // then on mobile they will be blocked anyways if `touchstart` is blocked.)
-    if (
-      config.allowOutsideClick &&
-      (typeof config.allowOutsideClick === 'boolean'
-        ? config.allowOutsideClick
-        : config.allowOutsideClick(e))
-    ) {
+
+
+    if (config.allowOutsideClick && (typeof config.allowOutsideClick === 'boolean' ? config.allowOutsideClick : config.allowOutsideClick(e))) {
       // allow the click outside the trap to take place
       return;
-    }
+    } // otherwise, prevent the click
+
 
-    // otherwise, prevent the click
     e.preventDefault();
-  }
+  } // In case focus escapes the trap for some strange reason, pull it back in.
+
 
-  // In case focus escapes the trap for some strange reason, pull it back in.
   function checkFocusIn(e) {
     // In Firefox when you Tab out of an iframe the Document is briefly focused.
-    if (container.contains(e.target) || e.target instanceof Document) {
+    if (containersContain(e.target) || e.target instanceof Document) {
       return;
     }
+
     e.stopImmediatePropagation();
     tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode());
   }
@@ -288,72 +335,101 @@ function createFocusTrap(element, userOptions) {
       deactivate();
       return;
     }
+
     if (isTabEvent(e)) {
       checkTab(e);
       return;
     }
-  }
-
-  // Hijack Tab events on the first and last focusable nodes of the trap,
+  } // Hijack Tab events on the first and last focusable nodes of the trap,
   // in order to prevent focus from escaping. If it escapes for even a
   // moment it can end up scrolling the page and causing confusion so we
   // kind of need to capture the action at the keydown phase.
+
+
   function checkTab(e) {
     updateTabbableNodes();
-    if (e.shiftKey && e.target === state.firstTabbableNode) {
-      e.preventDefault();
-      tryFocus(state.lastTabbableNode);
-      return;
+    var destinationNode = null;
+
+    if (e.shiftKey) {
+      var startOfGroupIndex = state.tabbableGroups.findIndex(function (_ref) {
+        var firstTabbableNode = _ref.firstTabbableNode;
+        return e.target === firstTabbableNode;
+      });
+
+      if (startOfGroupIndex >= 0) {
+        var destinationGroupIndex = startOfGroupIndex === 0 ? state.tabbableGroups.length - 1 : startOfGroupIndex - 1;
+        var destinationGroup = state.tabbableGroups[destinationGroupIndex];
+        destinationNode = destinationGroup.lastTabbableNode;
+      }
+    } else {
+      var lastOfGroupIndex = state.tabbableGroups.findIndex(function (_ref2) {
+        var lastTabbableNode = _ref2.lastTabbableNode;
+        return e.target === lastTabbableNode;
+      });
+
+      if (lastOfGroupIndex >= 0) {
+        var _destinationGroupIndex = lastOfGroupIndex === state.tabbableGroups.length - 1 ? 0 : lastOfGroupIndex + 1;
+
+        var _destinationGroup = state.tabbableGroups[_destinationGroupIndex];
+        destinationNode = _destinationGroup.firstTabbableNode;
+      }
     }
-    if (!e.shiftKey && e.target === state.lastTabbableNode) {
+
+    if (destinationNode) {
       e.preventDefault();
-      tryFocus(state.firstTabbableNode);
-      return;
+      tryFocus(destinationNode);
     }
   }
 
   function checkClick(e) {
     if (config.clickOutsideDeactivates) return;
-    if (container.contains(e.target)) return;
-    if (
-      config.allowOutsideClick &&
-      (typeof config.allowOutsideClick === 'boolean'
-        ? config.allowOutsideClick
-        : config.allowOutsideClick(e))
-    ) {
+    if (containersContain(e.target)) return;
+
+    if (config.allowOutsideClick && (typeof config.allowOutsideClick === 'boolean' ? config.allowOutsideClick : config.allowOutsideClick(e))) {
       return;
     }
+
     e.preventDefault();
     e.stopImmediatePropagation();
   }
 
   function updateTabbableNodes() {
-    var tabbableNodes = tabbable(container);
-    state.firstTabbableNode = tabbableNodes[0] || getInitialFocusNode();
-    state.lastTabbableNode =
-      tabbableNodes[tabbableNodes.length - 1] || getInitialFocusNode();
+    state.tabbableGroups = state.containers.map(function (container) {
+      var tabbableNodes = tabbable(container);
+      return {
+        firstTabbableNode: tabbableNodes[0],
+        lastTabbableNode: tabbableNodes[tabbableNodes.length - 1]
+      };
+    });
   }
 
   function tryFocus(node) {
     if (node === doc.activeElement) return;
+
     if (!node || !node.focus) {
       tryFocus(getInitialFocusNode());
       return;
     }
-    node.focus({ preventScroll: !!config.preventScroll });
+
+    node.focus({
+      preventScroll: !!config.preventScroll
+    });
     state.mostRecentlyFocusedNode = node;
+
     if (isSelectableInput(node)) {
       node.select();
     }
   }
+
+  function containersContain(element) {
+    return state.containers.some(function (container) {
+      return container.contains(element);
+    });
+  }
 }
 
 function isSelectableInput(node) {
-  return (
-    node.tagName &&
-    node.tagName.toLowerCase() === 'input' &&
-    typeof node.select === 'function'
-  );
+  return node.tagName && node.tagName.toLowerCase() === 'input' && typeof node.select === 'function';
 }
 
 function isEscapeEvent(e) {