Socket
Socket
Sign inDemoInstall

focus-trap

Package Overview
Dependencies
Maintainers
3
Versions
81
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

focus-trap - npm Package Compare versions

Comparing version 6.8.0-beta.1 to 6.8.0-beta.2

9

CHANGELOG.md
# Changelog
## 6.8.0-beta.2
- When updating tabbable nodes, make sure that `getShadowRoot` tabbable option is also passed to `focusable()`.
- Fix bug where having a tabbable node inside a web component in the middle of a tab sequence would cause the tab key to seemingly stop working just before focus should move to it ((#643)[https://github.com/focus-trap/focus-trap/issues/643]).
- Bumps tabbable to `v5.3.0-beta.1`
## 6.8.0-beta.1
- Rebased onto `v6.7.3`.
- Previous beta didn't include new source. This one does.

@@ -10,2 +16,3 @@ ## 6.8.0-beta.0

- Adds new `tabbableOptions` configuration option, which allows specifically for the new `getShadowRoot` Tabbable configuration option: `focusTrap.createFocusTrap(rootElement, { tabbableOptions: { getShadowRoot: (node) => closedShadowRoot } })`, for example (where your code has the reference to `closedShadowRoot` previously created on `node` which Tabbable cannot find on its own).
- Bumps tabbable to `v5.3.0-beta.0`

@@ -12,0 +19,0 @@ ## 6.7.3

149

dist/focus-trap.esm.js
/*!
* focus-trap 6.8.0-beta.1
* focus-trap 6.8.0-beta.2
* @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE

@@ -154,6 +154,6 @@ */

var state = {
// containers given to createFocusTrap()
// @type {Array<HTMLElement>}
containers: [],
// list of objects identifying the first and last tabbable nodes in all containers/groups in
// the trap
// list of objects identifying tabbable nodes in `containers` in the trap
// NOTE: it's possible that a group has no tabbable nodes if nodes get removed while the trap

@@ -165,2 +165,4 @@ // is active, but the trap should never get to a state where there isn't at least one group

// container: HTMLElement,
// tabbableNodes: Array<HTMLElement>, // empty if none
// focusableNodes: Array<HTMLElement>, // empty if none
// firstTabbableNode: HTMLElement|null,

@@ -170,2 +172,8 @@ // lastTabbableNode: HTMLElement|null,

// }>}
containerGroups: [],
// same order/length as `containers` list
// references to objects in `containerGroups`, but only those that actually have
// tabbable nodes in them
// NOTE: same order as `containers` and `containerGroups`, but __not necessarily__
// the same length
tabbableGroups: [],

@@ -194,7 +202,26 @@ nodeFocusedBeforeActivation: null,

};
/**
* Finds the index of the container that contains the element.
* @param {HTMLElement} element
* @returns {number} Index of the container in either `state.containers` or
* `state.containerGroups` (the order/length of these lists are the same); -1
* if the element isn't found.
*/
var containersContain = function containersContain(element) {
return !!(element && state.containers.some(function (container) {
return container.contains(element);
}));
var findContainerIndex = function findContainerIndex(element) {
// NOTE: search `containerGroups` because it's possible a group contains no tabbable
// nodes, but still contains focusable nodes (e.g. if they all have `tabindex=-1`)
// and we still need to find the element in there
return state.containerGroups.findIndex(function (_ref) {
var container = _ref.container,
tabbableNodes = _ref.tabbableNodes;
return container.contains(element) || // fall back to explicit tabbable search which will take into consideration any
// web components if the `tabbableOptions.getShadowRoot` option was used for
// the trap, enabling shadow DOM support in tabbable (`Node.contains()` doesn't
// look inside web components even if open)
tabbableNodes.find(function (node) {
return node === element;
});
});
};

@@ -258,3 +285,3 @@ /**

// option not specified: use fallback options
if (containersContain(doc.activeElement)) {
if (findContainerIndex(doc.activeElement) >= 0) {
node = doc.activeElement;

@@ -277,4 +304,4 @@ } else {

var updateTabbableNodes = function updateTabbableNodes() {
state.tabbableGroups = state.containers.map(function (container) {
var _config$tabbableOptio;
state.containerGroups = state.containers.map(function (container) {
var _config$tabbableOptio, _config$tabbableOptio2;

@@ -286,52 +313,55 @@ var tabbableNodes = tabbable(container, {

var focusableNodes = focusable(container);
var focusableNodes = focusable(container, {
getShadowRoot: (_config$tabbableOptio2 = config.tabbableOptions) === null || _config$tabbableOptio2 === void 0 ? void 0 : _config$tabbableOptio2.getShadowRoot
});
return {
container: container,
tabbableNodes: tabbableNodes,
focusableNodes: focusableNodes,
firstTabbableNode: tabbableNodes.length > 0 ? tabbableNodes[0] : null,
lastTabbableNode: tabbableNodes.length > 0 ? tabbableNodes[tabbableNodes.length - 1] : null,
if (tabbableNodes.length > 0) {
return {
container: container,
firstTabbableNode: tabbableNodes[0],
lastTabbableNode: tabbableNodes[tabbableNodes.length - 1],
/**
* Finds the __tabbable__ node that follows the given node in the specified direction,
* in this container, if any.
* @param {HTMLElement} node
* @param {boolean} [forward] True if going in forward tab order; false if going
* in reverse.
* @returns {HTMLElement|undefined} The next tabbable node, if any.
*/
nextTabbableNode: function nextTabbableNode(node) {
var forward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
// NOTE: If tabindex is positive (in order to manipulate the tab order separate
// from the DOM order), this __will not work__ because the list of focusableNodes,
// while it contains tabbable nodes, does not sort its nodes in any order other
// than DOM order, because it can't: Where would you place focusable (but not
// tabbable) nodes in that order? They have no order, because they aren't tabbale...
// Support for positive tabindex is already broken and hard to manage (possibly
// not supportable, TBD), so this isn't going to make things worse than they
// already are, and at least makes things better for the majority of cases where
// tabindex is either 0/unset or negative.
// FYI, positive tabindex issue: https://github.com/focus-trap/focus-trap/issues/375
var nodeIdx = focusableNodes.findIndex(function (n) {
return n === node;
});
/**
* Finds the __tabbable__ node that follows the given node in the specified direction,
* in this container, if any.
* @param {HTMLElement} node
* @param {boolean} [forward] True if going in forward tab order; false if going
* in reverse.
* @returns {HTMLElement|undefined} The next tabbable node, if any.
*/
nextTabbableNode: function nextTabbableNode(node) {
var forward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
// NOTE: If tabindex is positive (in order to manipulate the tab order separate
// from the DOM order), this __will not work__ because the list of focusableNodes,
// while it contains tabbable nodes, does not sort its nodes in any order other
// than DOM order, because it can't: Where would you place focusable (but not
// tabbable) nodes in that order? They have no order, because they aren't tabbale...
// Support for positive tabindex is already broken and hard to manage (possibly
// not supportable, TBD), so this isn't going to make things worse than they
// already are, and at least makes things better for the majority of cases where
// tabindex is either 0/unset or negative.
// FYI, positive tabindex issue: https://github.com/focus-trap/focus-trap/issues/375
var nodeIdx = focusableNodes.findIndex(function (n) {
return n === node;
});
if (nodeIdx < 0) {
return undefined;
}
if (forward) {
return focusableNodes.slice(nodeIdx + 1).find(function (n) {
return isTabbable(n);
});
}
return focusableNodes.slice(0, nodeIdx).reverse().find(function (n) {
if (forward) {
return focusableNodes.slice(nodeIdx + 1).find(function (n) {
return isTabbable(n);
});
}
};
}
return undefined;
}).filter(function (group) {
return !!group;
}); // remove groups with no tabbable nodes
// throw if no groups have tabbable nodes and we don't have a fallback focus node either
return focusableNodes.slice(0, nodeIdx).reverse().find(function (n) {
return isTabbable(n);
});
}
};
});
state.tabbableGroups = state.containerGroups.filter(function (group) {
return group.tabbableNodes.length > 0;
}); // throw if no groups have tabbable nodes and we don't have a fallback focus node either

@@ -378,3 +408,3 @@ if (state.tabbableGroups.length <= 0 && !getNodeForOption('fallbackFocus') // returning false not supported for this option

if (containersContain(target)) {
if (findContainerIndex(target) >= 0) {
// allow the click since it ocurred inside the trap

@@ -418,3 +448,3 @@ return;

var target = getActualTarget(e);
var targetContained = containersContain(target); // In Firefox when you Tab out of an iframe the Document is briefly focused.
var targetContained = findContainerIndex(target) >= 0; // In Firefox when you Tab out of an iframe the Document is briefly focused.

@@ -445,7 +475,4 @@ if (targetContained || target instanceof Document) {

// with tabIndex='-1' and was given initial focus
var containerIndex = findIndex(state.tabbableGroups, function (_ref) {
var container = _ref.container;
return container.contains(target);
});
var containerGroup = containerIndex >= 0 ? state.tabbableGroups[containerIndex] : undefined;
var containerIndex = findContainerIndex(target);
var containerGroup = containerIndex >= 0 ? state.containerGroups[containerIndex] : undefined;

@@ -548,3 +575,3 @@ if (containerIndex < 0) {

if (containersContain(target)) {
if (findContainerIndex(target) >= 0) {
return;

@@ -551,0 +578,0 @@ }

4

dist/focus-trap.esm.min.js
/*!
* focus-trap 6.8.0-beta.1
* focus-trap 6.8.0-beta.2
* @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
*/
import{tabbable as e,focusable as t,isTabbable as n,isFocusable as a}from"tabbable";function r(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function o(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var i,c=(i=[],{activateTrap:function(e){if(i.length>0){var t=i[i.length-1];t!==e&&t.pause()}var n=i.indexOf(e);-1===n||i.splice(n,1),i.push(e)},deactivateTrap:function(e){var t=i.indexOf(e);-1!==t&&i.splice(t,1),i.length>0&&i[i.length-1].unpause()}}),u=function(e){return setTimeout(e,0)},s=function(e,t){var n=-1;return e.every((function(e,a){return!t(e)||(n=a,!1)})),n},l=function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),a=1;a<t;a++)n[a-1]=arguments[a];return"function"==typeof e?e.apply(void 0,n):e},f=function(e){return e.target.shadowRoot&&"function"==typeof e.composedPath?e.composedPath()[0]:e.target},b=function(i,b){var v,d=(null==b?void 0:b.document)||document,p=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?r(Object(n),!0).forEach((function(t){o(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):r(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0},b),h={containers:[],tabbableGroups:[],nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1,delayInitialFocusTimer:void 0},m=function(e,t,n){return e&&void 0!==e[t]?e[t]:p[n||t]},y=function(e){return!(!e||!h.containers.some((function(t){return t.contains(e)})))},g=function(e){var t=p[e];if("function"==typeof t){for(var n=arguments.length,a=new Array(n>1?n-1:0),r=1;r<n;r++)a[r-1]=arguments[r];t=t.apply(void 0,a)}if(!t){if(void 0===t||!1===t)return t;throw new Error("`".concat(e,"` was specified but was not a node, or did not return a node"))}var o=t;if("string"==typeof t&&!(o=d.querySelector(t)))throw new Error("`".concat(e,"` as selector refers to no known node"));return o},w=function(){var e=g("initialFocus");if(!1===e)return!1;if(void 0===e)if(y(d.activeElement))e=d.activeElement;else{var t=h.tabbableGroups[0];e=t&&t.firstTabbableNode||g("fallbackFocus")}if(!e)throw new Error("Your focus-trap needs to have at least one focusable element");return e},O=function(){if(h.tabbableGroups=h.containers.map((function(a){var r,o=e(a,{getShadowRoot:null===(r=p.tabbableOptions)||void 0===r?void 0:r.getShadowRoot}),i=t(a);if(o.length>0)return{container:a,firstTabbableNode:o[0],lastTabbableNode:o[o.length-1],nextTabbableNode:function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],a=i.findIndex((function(t){return t===e}));return t?i.slice(a+1).find((function(e){return n(e)})):i.slice(0,a).reverse().find((function(e){return n(e)}))}}})).filter((function(e){return!!e})),h.tabbableGroups.length<=0&&!g("fallbackFocus"))throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times")},F=function e(t){!1!==t&&t!==d.activeElement&&(t&&t.focus?(t.focus({preventScroll:!!p.preventScroll}),h.mostRecentlyFocusedNode=t,function(e){return e.tagName&&"input"===e.tagName.toLowerCase()&&"function"==typeof e.select}(t)&&t.select()):e(w()))},E=function(e){var t=g("setReturnFocus",e);return t||!1!==t&&e},T=function(e){var t=f(e);y(t)||(l(p.clickOutsideDeactivates,e)?v.deactivate({returnFocus:p.returnFocusOnDeactivate&&!a(t)}):l(p.allowOutsideClick,e)||e.preventDefault())},k=function(e){var t=f(e),n=y(t);n||t instanceof Document?n&&(h.mostRecentlyFocusedNode=t):(e.stopImmediatePropagation(),F(h.mostRecentlyFocusedNode||w()))},D=function(e){if(function(e){return"Escape"===e.key||"Esc"===e.key||27===e.keyCode}(e)&&!1!==l(p.escapeDeactivates,e))return e.preventDefault(),void v.deactivate();(function(e){return"Tab"===e.key||9===e.keyCode})(e)&&function(e){var t=f(e);O();var r=null;if(h.tabbableGroups.length>0){var o=s(h.tabbableGroups,(function(e){return e.container.contains(t)})),i=o>=0?h.tabbableGroups[o]:void 0;if(o<0)r=e.shiftKey?h.tabbableGroups[h.tabbableGroups.length-1].lastTabbableNode:h.tabbableGroups[0].firstTabbableNode;else if(e.shiftKey){var c=s(h.tabbableGroups,(function(e){var n=e.firstTabbableNode;return t===n}));if(c<0&&(i.container===t||a(t)&&!n(t)&&!i.nextTabbableNode(t,!1))&&(c=o),c>=0){var u=0===c?h.tabbableGroups.length-1:c-1;r=h.tabbableGroups[u].lastTabbableNode}}else{var l=s(h.tabbableGroups,(function(e){var n=e.lastTabbableNode;return t===n}));if(l<0&&(i.container===t||a(t)&&!n(t)&&!i.nextTabbableNode(t))&&(l=o),l>=0){var b=l===h.tabbableGroups.length-1?0:l+1;r=h.tabbableGroups[b].firstTabbableNode}}}else r=g("fallbackFocus");r&&(e.preventDefault(),F(r))}(e)},N=function(e){if(!l(p.clickOutsideDeactivates,e)){var t=f(e);y(t)||l(p.allowOutsideClick,e)||(e.preventDefault(),e.stopImmediatePropagation())}},G=function(){if(h.active)return c.activateTrap(v),h.delayInitialFocusTimer=p.delayInitialFocus?u((function(){F(w())})):F(w()),d.addEventListener("focusin",k,!0),d.addEventListener("mousedown",T,{capture:!0,passive:!1}),d.addEventListener("touchstart",T,{capture:!0,passive:!1}),d.addEventListener("click",N,{capture:!0,passive:!1}),d.addEventListener("keydown",D,{capture:!0,passive:!1}),v},P=function(){if(h.active)return d.removeEventListener("focusin",k,!0),d.removeEventListener("mousedown",T,!0),d.removeEventListener("touchstart",T,!0),d.removeEventListener("click",N,!0),d.removeEventListener("keydown",D,!0),v};return(v={activate:function(e){if(h.active)return this;var t=m(e,"onActivate"),n=m(e,"onPostActivate"),a=m(e,"checkCanFocusTrap");a||O(),h.active=!0,h.paused=!1,h.nodeFocusedBeforeActivation=d.activeElement,t&&t();var r=function(){a&&O(),G(),n&&n()};return a?(a(h.containers.concat()).then(r,r),this):(r(),this)},deactivate:function(e){if(!h.active)return this;clearTimeout(h.delayInitialFocusTimer),h.delayInitialFocusTimer=void 0,P(),h.active=!1,h.paused=!1,c.deactivateTrap(v);var t=m(e,"onDeactivate"),n=m(e,"onPostDeactivate"),a=m(e,"checkCanReturnFocus");t&&t();var r=m(e,"returnFocus","returnFocusOnDeactivate"),o=function(){u((function(){r&&F(E(h.nodeFocusedBeforeActivation)),n&&n()}))};return r&&a?(a(E(h.nodeFocusedBeforeActivation)).then(o,o),this):(o(),this)},pause:function(){return h.paused||!h.active||(h.paused=!0,P()),this},unpause:function(){return h.paused&&h.active?(h.paused=!1,O(),G(),this):this},updateContainerElements:function(e){var t=[].concat(e).filter(Boolean);return h.containers=t.map((function(e){return"string"==typeof e?d.querySelector(e):e})),h.active&&O(),this}}).updateContainerElements(i),v};export{b as createFocusTrap};
import{tabbable as e,focusable as t,isTabbable as n,isFocusable as a}from"tabbable";function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var i,c=(i=[],{activateTrap:function(e){if(i.length>0){var t=i[i.length-1];t!==e&&t.pause()}var n=i.indexOf(e);-1===n||i.splice(n,1),i.push(e)},deactivateTrap:function(e){var t=i.indexOf(e);-1!==t&&i.splice(t,1),i.length>0&&i[i.length-1].unpause()}}),u=function(e){return setTimeout(e,0)},s=function(e,t){var n=-1;return e.every((function(e,a){return!t(e)||(n=a,!1)})),n},l=function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),a=1;a<t;a++)n[a-1]=arguments[a];return"function"==typeof e?e.apply(void 0,n):e},f=function(e){return e.target.shadowRoot&&"function"==typeof e.composedPath?e.composedPath()[0]:e.target},b=function(i,b){var v,d=(null==b?void 0:b.document)||document,p=function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0},b),h={containers:[],containerGroups:[],tabbableGroups:[],nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1,delayInitialFocusTimer:void 0},m=function(e,t,n){return e&&void 0!==e[t]?e[t]:p[n||t]},y=function(e){return h.containerGroups.findIndex((function(t){var n=t.container,a=t.tabbableNodes;return n.contains(e)||a.find((function(t){return t===e}))}))},g=function(e){var t=p[e];if("function"==typeof t){for(var n=arguments.length,a=new Array(n>1?n-1:0),o=1;o<n;o++)a[o-1]=arguments[o];t=t.apply(void 0,a)}if(!t){if(void 0===t||!1===t)return t;throw new Error("`".concat(e,"` was specified but was not a node, or did not return a node"))}var r=t;if("string"==typeof t&&!(r=d.querySelector(t)))throw new Error("`".concat(e,"` as selector refers to no known node"));return r},w=function(){var e=g("initialFocus");if(!1===e)return!1;if(void 0===e)if(y(d.activeElement)>=0)e=d.activeElement;else{var t=h.tabbableGroups[0];e=t&&t.firstTabbableNode||g("fallbackFocus")}if(!e)throw new Error("Your focus-trap needs to have at least one focusable element");return e},O=function(){if(h.containerGroups=h.containers.map((function(a){var o,r,i=e(a,{getShadowRoot:null===(o=p.tabbableOptions)||void 0===o?void 0:o.getShadowRoot}),c=t(a,{getShadowRoot:null===(r=p.tabbableOptions)||void 0===r?void 0:r.getShadowRoot});return{container:a,tabbableNodes:i,focusableNodes:c,firstTabbableNode:i.length>0?i[0]:null,lastTabbableNode:i.length>0?i[i.length-1]:null,nextTabbableNode:function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],a=c.findIndex((function(t){return t===e}));if(!(a<0))return t?c.slice(a+1).find((function(e){return n(e)})):c.slice(0,a).reverse().find((function(e){return n(e)}))}}})),h.tabbableGroups=h.containerGroups.filter((function(e){return e.tabbableNodes.length>0})),h.tabbableGroups.length<=0&&!g("fallbackFocus"))throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times")},F=function e(t){!1!==t&&t!==d.activeElement&&(t&&t.focus?(t.focus({preventScroll:!!p.preventScroll}),h.mostRecentlyFocusedNode=t,function(e){return e.tagName&&"input"===e.tagName.toLowerCase()&&"function"==typeof e.select}(t)&&t.select()):e(w()))},E=function(e){var t=g("setReturnFocus",e);return t||!1!==t&&e},T=function(e){var t=f(e);y(t)>=0||(l(p.clickOutsideDeactivates,e)?v.deactivate({returnFocus:p.returnFocusOnDeactivate&&!a(t)}):l(p.allowOutsideClick,e)||e.preventDefault())},N=function(e){var t=f(e),n=y(t)>=0;n||t instanceof Document?n&&(h.mostRecentlyFocusedNode=t):(e.stopImmediatePropagation(),F(h.mostRecentlyFocusedNode||w()))},k=function(e){if(function(e){return"Escape"===e.key||"Esc"===e.key||27===e.keyCode}(e)&&!1!==l(p.escapeDeactivates,e))return e.preventDefault(),void v.deactivate();(function(e){return"Tab"===e.key||9===e.keyCode})(e)&&function(e){var t=f(e);O();var o=null;if(h.tabbableGroups.length>0){var r=y(t),i=r>=0?h.containerGroups[r]:void 0;if(r<0)o=e.shiftKey?h.tabbableGroups[h.tabbableGroups.length-1].lastTabbableNode:h.tabbableGroups[0].firstTabbableNode;else if(e.shiftKey){var c=s(h.tabbableGroups,(function(e){var n=e.firstTabbableNode;return t===n}));if(c<0&&(i.container===t||a(t)&&!n(t)&&!i.nextTabbableNode(t,!1))&&(c=r),c>=0){var u=0===c?h.tabbableGroups.length-1:c-1;o=h.tabbableGroups[u].lastTabbableNode}}else{var l=s(h.tabbableGroups,(function(e){var n=e.lastTabbableNode;return t===n}));if(l<0&&(i.container===t||a(t)&&!n(t)&&!i.nextTabbableNode(t))&&(l=r),l>=0){var b=l===h.tabbableGroups.length-1?0:l+1;o=h.tabbableGroups[b].firstTabbableNode}}}else o=g("fallbackFocus");o&&(e.preventDefault(),F(o))}(e)},G=function(e){if(!l(p.clickOutsideDeactivates,e)){var t=f(e);y(t)>=0||l(p.allowOutsideClick,e)||(e.preventDefault(),e.stopImmediatePropagation())}},D=function(){if(h.active)return c.activateTrap(v),h.delayInitialFocusTimer=p.delayInitialFocus?u((function(){F(w())})):F(w()),d.addEventListener("focusin",N,!0),d.addEventListener("mousedown",T,{capture:!0,passive:!1}),d.addEventListener("touchstart",T,{capture:!0,passive:!1}),d.addEventListener("click",G,{capture:!0,passive:!1}),d.addEventListener("keydown",k,{capture:!0,passive:!1}),v},P=function(){if(h.active)return d.removeEventListener("focusin",N,!0),d.removeEventListener("mousedown",T,!0),d.removeEventListener("touchstart",T,!0),d.removeEventListener("click",G,!0),d.removeEventListener("keydown",k,!0),v};return(v={activate:function(e){if(h.active)return this;var t=m(e,"onActivate"),n=m(e,"onPostActivate"),a=m(e,"checkCanFocusTrap");a||O(),h.active=!0,h.paused=!1,h.nodeFocusedBeforeActivation=d.activeElement,t&&t();var o=function(){a&&O(),D(),n&&n()};return a?(a(h.containers.concat()).then(o,o),this):(o(),this)},deactivate:function(e){if(!h.active)return this;clearTimeout(h.delayInitialFocusTimer),h.delayInitialFocusTimer=void 0,P(),h.active=!1,h.paused=!1,c.deactivateTrap(v);var t=m(e,"onDeactivate"),n=m(e,"onPostDeactivate"),a=m(e,"checkCanReturnFocus");t&&t();var o=m(e,"returnFocus","returnFocusOnDeactivate"),r=function(){u((function(){o&&F(E(h.nodeFocusedBeforeActivation)),n&&n()}))};return o&&a?(a(E(h.nodeFocusedBeforeActivation)).then(r,r),this):(r(),this)},pause:function(){return h.paused||!h.active||(h.paused=!0,P()),this},unpause:function(){return h.paused&&h.active?(h.paused=!1,O(),D(),this):this},updateContainerElements:function(e){var t=[].concat(e).filter(Boolean);return h.containers=t.map((function(e){return"string"==typeof e?d.querySelector(e):e})),h.active&&O(),this}}).updateContainerElements(i),v};export{b as createFocusTrap};
//# sourceMappingURL=focus-trap.esm.min.js.map

149

dist/focus-trap.js
/*!
* focus-trap 6.8.0-beta.1
* focus-trap 6.8.0-beta.2
* @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE

@@ -158,6 +158,6 @@ */

var state = {
// containers given to createFocusTrap()
// @type {Array<HTMLElement>}
containers: [],
// list of objects identifying the first and last tabbable nodes in all containers/groups in
// the trap
// list of objects identifying tabbable nodes in `containers` in the trap
// NOTE: it's possible that a group has no tabbable nodes if nodes get removed while the trap

@@ -169,2 +169,4 @@ // is active, but the trap should never get to a state where there isn't at least one group

// container: HTMLElement,
// tabbableNodes: Array<HTMLElement>, // empty if none
// focusableNodes: Array<HTMLElement>, // empty if none
// firstTabbableNode: HTMLElement|null,

@@ -174,2 +176,8 @@ // lastTabbableNode: HTMLElement|null,

// }>}
containerGroups: [],
// same order/length as `containers` list
// references to objects in `containerGroups`, but only those that actually have
// tabbable nodes in them
// NOTE: same order as `containers` and `containerGroups`, but __not necessarily__
// the same length
tabbableGroups: [],

@@ -198,7 +206,26 @@ nodeFocusedBeforeActivation: null,

};
/**
* Finds the index of the container that contains the element.
* @param {HTMLElement} element
* @returns {number} Index of the container in either `state.containers` or
* `state.containerGroups` (the order/length of these lists are the same); -1
* if the element isn't found.
*/
var containersContain = function containersContain(element) {
return !!(element && state.containers.some(function (container) {
return container.contains(element);
}));
var findContainerIndex = function findContainerIndex(element) {
// NOTE: search `containerGroups` because it's possible a group contains no tabbable
// nodes, but still contains focusable nodes (e.g. if they all have `tabindex=-1`)
// and we still need to find the element in there
return state.containerGroups.findIndex(function (_ref) {
var container = _ref.container,
tabbableNodes = _ref.tabbableNodes;
return container.contains(element) || // fall back to explicit tabbable search which will take into consideration any
// web components if the `tabbableOptions.getShadowRoot` option was used for
// the trap, enabling shadow DOM support in tabbable (`Node.contains()` doesn't
// look inside web components even if open)
tabbableNodes.find(function (node) {
return node === element;
});
});
};

@@ -262,3 +289,3 @@ /**

// option not specified: use fallback options
if (containersContain(doc.activeElement)) {
if (findContainerIndex(doc.activeElement) >= 0) {
node = doc.activeElement;

@@ -281,4 +308,4 @@ } else {

var updateTabbableNodes = function updateTabbableNodes() {
state.tabbableGroups = state.containers.map(function (container) {
var _config$tabbableOptio;
state.containerGroups = state.containers.map(function (container) {
var _config$tabbableOptio, _config$tabbableOptio2;

@@ -290,52 +317,55 @@ var tabbableNodes = tabbable.tabbable(container, {

var focusableNodes = tabbable.focusable(container);
var focusableNodes = tabbable.focusable(container, {
getShadowRoot: (_config$tabbableOptio2 = config.tabbableOptions) === null || _config$tabbableOptio2 === void 0 ? void 0 : _config$tabbableOptio2.getShadowRoot
});
return {
container: container,
tabbableNodes: tabbableNodes,
focusableNodes: focusableNodes,
firstTabbableNode: tabbableNodes.length > 0 ? tabbableNodes[0] : null,
lastTabbableNode: tabbableNodes.length > 0 ? tabbableNodes[tabbableNodes.length - 1] : null,
if (tabbableNodes.length > 0) {
return {
container: container,
firstTabbableNode: tabbableNodes[0],
lastTabbableNode: tabbableNodes[tabbableNodes.length - 1],
/**
* Finds the __tabbable__ node that follows the given node in the specified direction,
* in this container, if any.
* @param {HTMLElement} node
* @param {boolean} [forward] True if going in forward tab order; false if going
* in reverse.
* @returns {HTMLElement|undefined} The next tabbable node, if any.
*/
nextTabbableNode: function nextTabbableNode(node) {
var forward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
// NOTE: If tabindex is positive (in order to manipulate the tab order separate
// from the DOM order), this __will not work__ because the list of focusableNodes,
// while it contains tabbable nodes, does not sort its nodes in any order other
// than DOM order, because it can't: Where would you place focusable (but not
// tabbable) nodes in that order? They have no order, because they aren't tabbale...
// Support for positive tabindex is already broken and hard to manage (possibly
// not supportable, TBD), so this isn't going to make things worse than they
// already are, and at least makes things better for the majority of cases where
// tabindex is either 0/unset or negative.
// FYI, positive tabindex issue: https://github.com/focus-trap/focus-trap/issues/375
var nodeIdx = focusableNodes.findIndex(function (n) {
return n === node;
});
/**
* Finds the __tabbable__ node that follows the given node in the specified direction,
* in this container, if any.
* @param {HTMLElement} node
* @param {boolean} [forward] True if going in forward tab order; false if going
* in reverse.
* @returns {HTMLElement|undefined} The next tabbable node, if any.
*/
nextTabbableNode: function nextTabbableNode(node) {
var forward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
// NOTE: If tabindex is positive (in order to manipulate the tab order separate
// from the DOM order), this __will not work__ because the list of focusableNodes,
// while it contains tabbable nodes, does not sort its nodes in any order other
// than DOM order, because it can't: Where would you place focusable (but not
// tabbable) nodes in that order? They have no order, because they aren't tabbale...
// Support for positive tabindex is already broken and hard to manage (possibly
// not supportable, TBD), so this isn't going to make things worse than they
// already are, and at least makes things better for the majority of cases where
// tabindex is either 0/unset or negative.
// FYI, positive tabindex issue: https://github.com/focus-trap/focus-trap/issues/375
var nodeIdx = focusableNodes.findIndex(function (n) {
return n === node;
});
if (nodeIdx < 0) {
return undefined;
}
if (forward) {
return focusableNodes.slice(nodeIdx + 1).find(function (n) {
return tabbable.isTabbable(n);
});
}
return focusableNodes.slice(0, nodeIdx).reverse().find(function (n) {
if (forward) {
return focusableNodes.slice(nodeIdx + 1).find(function (n) {
return tabbable.isTabbable(n);
});
}
};
}
return undefined;
}).filter(function (group) {
return !!group;
}); // remove groups with no tabbable nodes
// throw if no groups have tabbable nodes and we don't have a fallback focus node either
return focusableNodes.slice(0, nodeIdx).reverse().find(function (n) {
return tabbable.isTabbable(n);
});
}
};
});
state.tabbableGroups = state.containerGroups.filter(function (group) {
return group.tabbableNodes.length > 0;
}); // throw if no groups have tabbable nodes and we don't have a fallback focus node either

@@ -382,3 +412,3 @@ if (state.tabbableGroups.length <= 0 && !getNodeForOption('fallbackFocus') // returning false not supported for this option

if (containersContain(target)) {
if (findContainerIndex(target) >= 0) {
// allow the click since it ocurred inside the trap

@@ -422,3 +452,3 @@ return;

var target = getActualTarget(e);
var targetContained = containersContain(target); // In Firefox when you Tab out of an iframe the Document is briefly focused.
var targetContained = findContainerIndex(target) >= 0; // In Firefox when you Tab out of an iframe the Document is briefly focused.

@@ -449,7 +479,4 @@ if (targetContained || target instanceof Document) {

// with tabIndex='-1' and was given initial focus
var containerIndex = findIndex(state.tabbableGroups, function (_ref) {
var container = _ref.container;
return container.contains(target);
});
var containerGroup = containerIndex >= 0 ? state.tabbableGroups[containerIndex] : undefined;
var containerIndex = findContainerIndex(target);
var containerGroup = containerIndex >= 0 ? state.containerGroups[containerIndex] : undefined;

@@ -552,3 +579,3 @@ if (containerIndex < 0) {

if (containersContain(target)) {
if (findContainerIndex(target) >= 0) {
return;

@@ -555,0 +582,0 @@ }

4

dist/focus-trap.min.js
/*!
* focus-trap 6.8.0-beta.1
* focus-trap 6.8.0-beta.2
* @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
*/
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tabbable");function t(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function n(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var a,r=(a=[],{activateTrap:function(e){if(a.length>0){var t=a[a.length-1];t!==e&&t.pause()}var n=a.indexOf(e);-1===n||a.splice(n,1),a.push(e)},deactivateTrap:function(e){var t=a.indexOf(e);-1!==t&&a.splice(t,1),a.length>0&&a[a.length-1].unpause()}}),o=function(e){return setTimeout(e,0)},i=function(e,t){var n=-1;return e.every((function(e,a){return!t(e)||(n=a,!1)})),n},c=function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),a=1;a<t;a++)n[a-1]=arguments[a];return"function"==typeof e?e.apply(void 0,n):e},u=function(e){return e.target.shadowRoot&&"function"==typeof e.composedPath?e.composedPath()[0]:e.target};exports.createFocusTrap=function(a,s){var l,b=(null==s?void 0:s.document)||document,f=function(e){for(var a=1;a<arguments.length;a++){var r=null!=arguments[a]?arguments[a]:{};a%2?t(Object(r),!0).forEach((function(t){n(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):t(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0},s),v={containers:[],tabbableGroups:[],nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1,delayInitialFocusTimer:void 0},d=function(e,t,n){return e&&void 0!==e[t]?e[t]:f[n||t]},p=function(e){return!(!e||!v.containers.some((function(t){return t.contains(e)})))},h=function(e){var t=f[e];if("function"==typeof t){for(var n=arguments.length,a=new Array(n>1?n-1:0),r=1;r<n;r++)a[r-1]=arguments[r];t=t.apply(void 0,a)}if(!t){if(void 0===t||!1===t)return t;throw new Error("`".concat(e,"` was specified but was not a node, or did not return a node"))}var o=t;if("string"==typeof t&&!(o=b.querySelector(t)))throw new Error("`".concat(e,"` as selector refers to no known node"));return o},y=function(){var e=h("initialFocus");if(!1===e)return!1;if(void 0===e)if(p(b.activeElement))e=b.activeElement;else{var t=v.tabbableGroups[0];e=t&&t.firstTabbableNode||h("fallbackFocus")}if(!e)throw new Error("Your focus-trap needs to have at least one focusable element");return e},m=function(){if(v.tabbableGroups=v.containers.map((function(t){var n,a=e.tabbable(t,{getShadowRoot:null===(n=f.tabbableOptions)||void 0===n?void 0:n.getShadowRoot}),r=e.focusable(t);if(a.length>0)return{container:t,firstTabbableNode:a[0],lastTabbableNode:a[a.length-1],nextTabbableNode:function(t){var n=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],a=r.findIndex((function(e){return e===t}));return n?r.slice(a+1).find((function(t){return e.isTabbable(t)})):r.slice(0,a).reverse().find((function(t){return e.isTabbable(t)}))}}})).filter((function(e){return!!e})),v.tabbableGroups.length<=0&&!h("fallbackFocus"))throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times")},g=function e(t){!1!==t&&t!==b.activeElement&&(t&&t.focus?(t.focus({preventScroll:!!f.preventScroll}),v.mostRecentlyFocusedNode=t,function(e){return e.tagName&&"input"===e.tagName.toLowerCase()&&"function"==typeof e.select}(t)&&t.select()):e(y()))},w=function(e){var t=h("setReturnFocus",e);return t||!1!==t&&e},F=function(t){var n=u(t);p(n)||(c(f.clickOutsideDeactivates,t)?l.deactivate({returnFocus:f.returnFocusOnDeactivate&&!e.isFocusable(n)}):c(f.allowOutsideClick,t)||t.preventDefault())},O=function(e){var t=u(e),n=p(t);n||t instanceof Document?n&&(v.mostRecentlyFocusedNode=t):(e.stopImmediatePropagation(),g(v.mostRecentlyFocusedNode||y()))},T=function(t){if(function(e){return"Escape"===e.key||"Esc"===e.key||27===e.keyCode}(t)&&!1!==c(f.escapeDeactivates,t))return t.preventDefault(),void l.deactivate();(function(e){return"Tab"===e.key||9===e.keyCode})(t)&&function(t){var n=u(t);m();var a=null;if(v.tabbableGroups.length>0){var r=i(v.tabbableGroups,(function(e){return e.container.contains(n)})),o=r>=0?v.tabbableGroups[r]:void 0;if(r<0)a=t.shiftKey?v.tabbableGroups[v.tabbableGroups.length-1].lastTabbableNode:v.tabbableGroups[0].firstTabbableNode;else if(t.shiftKey){var c=i(v.tabbableGroups,(function(e){var t=e.firstTabbableNode;return n===t}));if(c<0&&(o.container===n||e.isFocusable(n)&&!e.isTabbable(n)&&!o.nextTabbableNode(n,!1))&&(c=r),c>=0){var s=0===c?v.tabbableGroups.length-1:c-1;a=v.tabbableGroups[s].lastTabbableNode}}else{var l=i(v.tabbableGroups,(function(e){var t=e.lastTabbableNode;return n===t}));if(l<0&&(o.container===n||e.isFocusable(n)&&!e.isTabbable(n)&&!o.nextTabbableNode(n))&&(l=r),l>=0){var b=l===v.tabbableGroups.length-1?0:l+1;a=v.tabbableGroups[b].firstTabbableNode}}}else a=h("fallbackFocus");a&&(t.preventDefault(),g(a))}(t)},E=function(e){if(!c(f.clickOutsideDeactivates,e)){var t=u(e);p(t)||c(f.allowOutsideClick,e)||(e.preventDefault(),e.stopImmediatePropagation())}},k=function(){if(v.active)return r.activateTrap(l),v.delayInitialFocusTimer=f.delayInitialFocus?o((function(){g(y())})):g(y()),b.addEventListener("focusin",O,!0),b.addEventListener("mousedown",F,{capture:!0,passive:!1}),b.addEventListener("touchstart",F,{capture:!0,passive:!1}),b.addEventListener("click",E,{capture:!0,passive:!1}),b.addEventListener("keydown",T,{capture:!0,passive:!1}),l},D=function(){if(v.active)return b.removeEventListener("focusin",O,!0),b.removeEventListener("mousedown",F,!0),b.removeEventListener("touchstart",F,!0),b.removeEventListener("click",E,!0),b.removeEventListener("keydown",T,!0),l};return(l={activate:function(e){if(v.active)return this;var t=d(e,"onActivate"),n=d(e,"onPostActivate"),a=d(e,"checkCanFocusTrap");a||m(),v.active=!0,v.paused=!1,v.nodeFocusedBeforeActivation=b.activeElement,t&&t();var r=function(){a&&m(),k(),n&&n()};return a?(a(v.containers.concat()).then(r,r),this):(r(),this)},deactivate:function(e){if(!v.active)return this;clearTimeout(v.delayInitialFocusTimer),v.delayInitialFocusTimer=void 0,D(),v.active=!1,v.paused=!1,r.deactivateTrap(l);var t=d(e,"onDeactivate"),n=d(e,"onPostDeactivate"),a=d(e,"checkCanReturnFocus");t&&t();var i=d(e,"returnFocus","returnFocusOnDeactivate"),c=function(){o((function(){i&&g(w(v.nodeFocusedBeforeActivation)),n&&n()}))};return i&&a?(a(w(v.nodeFocusedBeforeActivation)).then(c,c),this):(c(),this)},pause:function(){return v.paused||!v.active||(v.paused=!0,D()),this},unpause:function(){return v.paused&&v.active?(v.paused=!1,m(),k(),this):this},updateContainerElements:function(e){var t=[].concat(e).filter(Boolean);return v.containers=t.map((function(e){return"string"==typeof e?b.querySelector(e):e})),v.active&&m(),this}}).updateContainerElements(a),l};
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("tabbable");function t(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function n(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var a,r=(a=[],{activateTrap:function(e){if(a.length>0){var t=a[a.length-1];t!==e&&t.pause()}var n=a.indexOf(e);-1===n||a.splice(n,1),a.push(e)},deactivateTrap:function(e){var t=a.indexOf(e);-1!==t&&a.splice(t,1),a.length>0&&a[a.length-1].unpause()}}),o=function(e){return setTimeout(e,0)},i=function(e,t){var n=-1;return e.every((function(e,a){return!t(e)||(n=a,!1)})),n},c=function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),a=1;a<t;a++)n[a-1]=arguments[a];return"function"==typeof e?e.apply(void 0,n):e},u=function(e){return e.target.shadowRoot&&"function"==typeof e.composedPath?e.composedPath()[0]:e.target};exports.createFocusTrap=function(a,s){var l,b=(null==s?void 0:s.document)||document,f=function(e){for(var a=1;a<arguments.length;a++){var r=null!=arguments[a]?arguments[a]:{};a%2?t(Object(r),!0).forEach((function(t){n(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):t(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0},s),v={containers:[],containerGroups:[],tabbableGroups:[],nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1,delayInitialFocusTimer:void 0},d=function(e,t,n){return e&&void 0!==e[t]?e[t]:f[n||t]},p=function(e){return v.containerGroups.findIndex((function(t){var n=t.container,a=t.tabbableNodes;return n.contains(e)||a.find((function(t){return t===e}))}))},h=function(e){var t=f[e];if("function"==typeof t){for(var n=arguments.length,a=new Array(n>1?n-1:0),r=1;r<n;r++)a[r-1]=arguments[r];t=t.apply(void 0,a)}if(!t){if(void 0===t||!1===t)return t;throw new Error("`".concat(e,"` was specified but was not a node, or did not return a node"))}var o=t;if("string"==typeof t&&!(o=b.querySelector(t)))throw new Error("`".concat(e,"` as selector refers to no known node"));return o},y=function(){var e=h("initialFocus");if(!1===e)return!1;if(void 0===e)if(p(b.activeElement)>=0)e=b.activeElement;else{var t=v.tabbableGroups[0];e=t&&t.firstTabbableNode||h("fallbackFocus")}if(!e)throw new Error("Your focus-trap needs to have at least one focusable element");return e},m=function(){if(v.containerGroups=v.containers.map((function(t){var n,a,r=e.tabbable(t,{getShadowRoot:null===(n=f.tabbableOptions)||void 0===n?void 0:n.getShadowRoot}),o=e.focusable(t,{getShadowRoot:null===(a=f.tabbableOptions)||void 0===a?void 0:a.getShadowRoot});return{container:t,tabbableNodes:r,focusableNodes:o,firstTabbableNode:r.length>0?r[0]:null,lastTabbableNode:r.length>0?r[r.length-1]:null,nextTabbableNode:function(t){var n=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],a=o.findIndex((function(e){return e===t}));if(!(a<0))return n?o.slice(a+1).find((function(t){return e.isTabbable(t)})):o.slice(0,a).reverse().find((function(t){return e.isTabbable(t)}))}}})),v.tabbableGroups=v.containerGroups.filter((function(e){return e.tabbableNodes.length>0})),v.tabbableGroups.length<=0&&!h("fallbackFocus"))throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times")},g=function e(t){!1!==t&&t!==b.activeElement&&(t&&t.focus?(t.focus({preventScroll:!!f.preventScroll}),v.mostRecentlyFocusedNode=t,function(e){return e.tagName&&"input"===e.tagName.toLowerCase()&&"function"==typeof e.select}(t)&&t.select()):e(y()))},w=function(e){var t=h("setReturnFocus",e);return t||!1!==t&&e},F=function(t){var n=u(t);p(n)>=0||(c(f.clickOutsideDeactivates,t)?l.deactivate({returnFocus:f.returnFocusOnDeactivate&&!e.isFocusable(n)}):c(f.allowOutsideClick,t)||t.preventDefault())},O=function(e){var t=u(e),n=p(t)>=0;n||t instanceof Document?n&&(v.mostRecentlyFocusedNode=t):(e.stopImmediatePropagation(),g(v.mostRecentlyFocusedNode||y()))},T=function(t){if(function(e){return"Escape"===e.key||"Esc"===e.key||27===e.keyCode}(t)&&!1!==c(f.escapeDeactivates,t))return t.preventDefault(),void l.deactivate();(function(e){return"Tab"===e.key||9===e.keyCode})(t)&&function(t){var n=u(t);m();var a=null;if(v.tabbableGroups.length>0){var r=p(n),o=r>=0?v.containerGroups[r]:void 0;if(r<0)a=t.shiftKey?v.tabbableGroups[v.tabbableGroups.length-1].lastTabbableNode:v.tabbableGroups[0].firstTabbableNode;else if(t.shiftKey){var c=i(v.tabbableGroups,(function(e){var t=e.firstTabbableNode;return n===t}));if(c<0&&(o.container===n||e.isFocusable(n)&&!e.isTabbable(n)&&!o.nextTabbableNode(n,!1))&&(c=r),c>=0){var s=0===c?v.tabbableGroups.length-1:c-1;a=v.tabbableGroups[s].lastTabbableNode}}else{var l=i(v.tabbableGroups,(function(e){var t=e.lastTabbableNode;return n===t}));if(l<0&&(o.container===n||e.isFocusable(n)&&!e.isTabbable(n)&&!o.nextTabbableNode(n))&&(l=r),l>=0){var b=l===v.tabbableGroups.length-1?0:l+1;a=v.tabbableGroups[b].firstTabbableNode}}}else a=h("fallbackFocus");a&&(t.preventDefault(),g(a))}(t)},E=function(e){if(!c(f.clickOutsideDeactivates,e)){var t=u(e);p(t)>=0||c(f.allowOutsideClick,e)||(e.preventDefault(),e.stopImmediatePropagation())}},N=function(){if(v.active)return r.activateTrap(l),v.delayInitialFocusTimer=f.delayInitialFocus?o((function(){g(y())})):g(y()),b.addEventListener("focusin",O,!0),b.addEventListener("mousedown",F,{capture:!0,passive:!1}),b.addEventListener("touchstart",F,{capture:!0,passive:!1}),b.addEventListener("click",E,{capture:!0,passive:!1}),b.addEventListener("keydown",T,{capture:!0,passive:!1}),l},k=function(){if(v.active)return b.removeEventListener("focusin",O,!0),b.removeEventListener("mousedown",F,!0),b.removeEventListener("touchstart",F,!0),b.removeEventListener("click",E,!0),b.removeEventListener("keydown",T,!0),l};return(l={activate:function(e){if(v.active)return this;var t=d(e,"onActivate"),n=d(e,"onPostActivate"),a=d(e,"checkCanFocusTrap");a||m(),v.active=!0,v.paused=!1,v.nodeFocusedBeforeActivation=b.activeElement,t&&t();var r=function(){a&&m(),N(),n&&n()};return a?(a(v.containers.concat()).then(r,r),this):(r(),this)},deactivate:function(e){if(!v.active)return this;clearTimeout(v.delayInitialFocusTimer),v.delayInitialFocusTimer=void 0,k(),v.active=!1,v.paused=!1,r.deactivateTrap(l);var t=d(e,"onDeactivate"),n=d(e,"onPostDeactivate"),a=d(e,"checkCanReturnFocus");t&&t();var i=d(e,"returnFocus","returnFocusOnDeactivate"),c=function(){o((function(){i&&g(w(v.nodeFocusedBeforeActivation)),n&&n()}))};return i&&a?(a(w(v.nodeFocusedBeforeActivation)).then(c,c),this):(c(),this)},pause:function(){return v.paused||!v.active||(v.paused=!0,k()),this},unpause:function(){return v.paused&&v.active?(v.paused=!1,m(),N(),this):this},updateContainerElements:function(e){var t=[].concat(e).filter(Boolean);return v.containers=t.map((function(e){return"string"==typeof e?b.querySelector(e):e})),v.active&&m(),this}}).updateContainerElements(a),l};
//# sourceMappingURL=focus-trap.min.js.map

149

dist/focus-trap.umd.js
/*!
* focus-trap 6.8.0-beta.1
* focus-trap 6.8.0-beta.2
* @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE

@@ -163,6 +163,6 @@ */

var state = {
// containers given to createFocusTrap()
// @type {Array<HTMLElement>}
containers: [],
// list of objects identifying the first and last tabbable nodes in all containers/groups in
// the trap
// list of objects identifying tabbable nodes in `containers` in the trap
// NOTE: it's possible that a group has no tabbable nodes if nodes get removed while the trap

@@ -174,2 +174,4 @@ // is active, but the trap should never get to a state where there isn't at least one group

// container: HTMLElement,
// tabbableNodes: Array<HTMLElement>, // empty if none
// focusableNodes: Array<HTMLElement>, // empty if none
// firstTabbableNode: HTMLElement|null,

@@ -179,2 +181,8 @@ // lastTabbableNode: HTMLElement|null,

// }>}
containerGroups: [],
// same order/length as `containers` list
// references to objects in `containerGroups`, but only those that actually have
// tabbable nodes in them
// NOTE: same order as `containers` and `containerGroups`, but __not necessarily__
// the same length
tabbableGroups: [],

@@ -203,7 +211,26 @@ nodeFocusedBeforeActivation: null,

};
/**
* Finds the index of the container that contains the element.
* @param {HTMLElement} element
* @returns {number} Index of the container in either `state.containers` or
* `state.containerGroups` (the order/length of these lists are the same); -1
* if the element isn't found.
*/
var containersContain = function containersContain(element) {
return !!(element && state.containers.some(function (container) {
return container.contains(element);
}));
var findContainerIndex = function findContainerIndex(element) {
// NOTE: search `containerGroups` because it's possible a group contains no tabbable
// nodes, but still contains focusable nodes (e.g. if they all have `tabindex=-1`)
// and we still need to find the element in there
return state.containerGroups.findIndex(function (_ref) {
var container = _ref.container,
tabbableNodes = _ref.tabbableNodes;
return container.contains(element) || // fall back to explicit tabbable search which will take into consideration any
// web components if the `tabbableOptions.getShadowRoot` option was used for
// the trap, enabling shadow DOM support in tabbable (`Node.contains()` doesn't
// look inside web components even if open)
tabbableNodes.find(function (node) {
return node === element;
});
});
};

@@ -267,3 +294,3 @@ /**

// option not specified: use fallback options
if (containersContain(doc.activeElement)) {
if (findContainerIndex(doc.activeElement) >= 0) {
node = doc.activeElement;

@@ -286,4 +313,4 @@ } else {

var updateTabbableNodes = function updateTabbableNodes() {
state.tabbableGroups = state.containers.map(function (container) {
var _config$tabbableOptio;
state.containerGroups = state.containers.map(function (container) {
var _config$tabbableOptio, _config$tabbableOptio2;

@@ -295,52 +322,55 @@ var tabbableNodes = tabbable.tabbable(container, {

var focusableNodes = tabbable.focusable(container);
var focusableNodes = tabbable.focusable(container, {
getShadowRoot: (_config$tabbableOptio2 = config.tabbableOptions) === null || _config$tabbableOptio2 === void 0 ? void 0 : _config$tabbableOptio2.getShadowRoot
});
return {
container: container,
tabbableNodes: tabbableNodes,
focusableNodes: focusableNodes,
firstTabbableNode: tabbableNodes.length > 0 ? tabbableNodes[0] : null,
lastTabbableNode: tabbableNodes.length > 0 ? tabbableNodes[tabbableNodes.length - 1] : null,
if (tabbableNodes.length > 0) {
return {
container: container,
firstTabbableNode: tabbableNodes[0],
lastTabbableNode: tabbableNodes[tabbableNodes.length - 1],
/**
* Finds the __tabbable__ node that follows the given node in the specified direction,
* in this container, if any.
* @param {HTMLElement} node
* @param {boolean} [forward] True if going in forward tab order; false if going
* in reverse.
* @returns {HTMLElement|undefined} The next tabbable node, if any.
*/
nextTabbableNode: function nextTabbableNode(node) {
var forward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
// NOTE: If tabindex is positive (in order to manipulate the tab order separate
// from the DOM order), this __will not work__ because the list of focusableNodes,
// while it contains tabbable nodes, does not sort its nodes in any order other
// than DOM order, because it can't: Where would you place focusable (but not
// tabbable) nodes in that order? They have no order, because they aren't tabbale...
// Support for positive tabindex is already broken and hard to manage (possibly
// not supportable, TBD), so this isn't going to make things worse than they
// already are, and at least makes things better for the majority of cases where
// tabindex is either 0/unset or negative.
// FYI, positive tabindex issue: https://github.com/focus-trap/focus-trap/issues/375
var nodeIdx = focusableNodes.findIndex(function (n) {
return n === node;
});
/**
* Finds the __tabbable__ node that follows the given node in the specified direction,
* in this container, if any.
* @param {HTMLElement} node
* @param {boolean} [forward] True if going in forward tab order; false if going
* in reverse.
* @returns {HTMLElement|undefined} The next tabbable node, if any.
*/
nextTabbableNode: function nextTabbableNode(node) {
var forward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
// NOTE: If tabindex is positive (in order to manipulate the tab order separate
// from the DOM order), this __will not work__ because the list of focusableNodes,
// while it contains tabbable nodes, does not sort its nodes in any order other
// than DOM order, because it can't: Where would you place focusable (but not
// tabbable) nodes in that order? They have no order, because they aren't tabbale...
// Support for positive tabindex is already broken and hard to manage (possibly
// not supportable, TBD), so this isn't going to make things worse than they
// already are, and at least makes things better for the majority of cases where
// tabindex is either 0/unset or negative.
// FYI, positive tabindex issue: https://github.com/focus-trap/focus-trap/issues/375
var nodeIdx = focusableNodes.findIndex(function (n) {
return n === node;
});
if (nodeIdx < 0) {
return undefined;
}
if (forward) {
return focusableNodes.slice(nodeIdx + 1).find(function (n) {
return tabbable.isTabbable(n);
});
}
return focusableNodes.slice(0, nodeIdx).reverse().find(function (n) {
if (forward) {
return focusableNodes.slice(nodeIdx + 1).find(function (n) {
return tabbable.isTabbable(n);
});
}
};
}
return undefined;
}).filter(function (group) {
return !!group;
}); // remove groups with no tabbable nodes
// throw if no groups have tabbable nodes and we don't have a fallback focus node either
return focusableNodes.slice(0, nodeIdx).reverse().find(function (n) {
return tabbable.isTabbable(n);
});
}
};
});
state.tabbableGroups = state.containerGroups.filter(function (group) {
return group.tabbableNodes.length > 0;
}); // throw if no groups have tabbable nodes and we don't have a fallback focus node either

@@ -387,3 +417,3 @@ if (state.tabbableGroups.length <= 0 && !getNodeForOption('fallbackFocus') // returning false not supported for this option

if (containersContain(target)) {
if (findContainerIndex(target) >= 0) {
// allow the click since it ocurred inside the trap

@@ -427,3 +457,3 @@ return;

var target = getActualTarget(e);
var targetContained = containersContain(target); // In Firefox when you Tab out of an iframe the Document is briefly focused.
var targetContained = findContainerIndex(target) >= 0; // In Firefox when you Tab out of an iframe the Document is briefly focused.

@@ -454,7 +484,4 @@ if (targetContained || target instanceof Document) {

// with tabIndex='-1' and was given initial focus
var containerIndex = findIndex(state.tabbableGroups, function (_ref) {
var container = _ref.container;
return container.contains(target);
});
var containerGroup = containerIndex >= 0 ? state.tabbableGroups[containerIndex] : undefined;
var containerIndex = findContainerIndex(target);
var containerGroup = containerIndex >= 0 ? state.containerGroups[containerIndex] : undefined;

@@ -557,3 +584,3 @@ if (containerIndex < 0) {

if (containersContain(target)) {
if (findContainerIndex(target) >= 0) {
return;

@@ -560,0 +587,0 @@ }

4

dist/focus-trap.umd.min.js
/*!
* focus-trap 6.8.0-beta.1
* focus-trap 6.8.0-beta.2
* @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
*/
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("tabbable")):"function"==typeof define&&define.amd?define(["exports","tabbable"],t):(e="undefined"!=typeof globalThis?globalThis:e||self,function(){var n=e.focusTrap,a=e.focusTrap={};t(a,e.tabbable),a.noConflict=function(){return e.focusTrap=n,a}}())}(this,(function(e,t){"use strict";function n(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var o,r=(o=[],{activateTrap:function(e){if(o.length>0){var t=o[o.length-1];t!==e&&t.pause()}var n=o.indexOf(e);-1===n||o.splice(n,1),o.push(e)},deactivateTrap:function(e){var t=o.indexOf(e);-1!==t&&o.splice(t,1),o.length>0&&o[o.length-1].unpause()}}),i=function(e){return setTimeout(e,0)},c=function(e,t){var n=-1;return e.every((function(e,a){return!t(e)||(n=a,!1)})),n},u=function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),a=1;a<t;a++)n[a-1]=arguments[a];return"function"==typeof e?e.apply(void 0,n):e},s=function(e){return e.target.shadowRoot&&"function"==typeof e.composedPath?e.composedPath()[0]:e.target};e.createFocusTrap=function(e,o){var l,f=(null==o?void 0:o.document)||document,b=function(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{};t%2?n(Object(o),!0).forEach((function(t){a(e,t,o[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):n(Object(o)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(o,t))}))}return e}({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0},o),d={containers:[],tabbableGroups:[],nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1,delayInitialFocusTimer:void 0},v=function(e,t,n){return e&&void 0!==e[t]?e[t]:b[n||t]},p=function(e){return!(!e||!d.containers.some((function(t){return t.contains(e)})))},h=function(e){var t=b[e];if("function"==typeof t){for(var n=arguments.length,a=new Array(n>1?n-1:0),o=1;o<n;o++)a[o-1]=arguments[o];t=t.apply(void 0,a)}if(!t){if(void 0===t||!1===t)return t;throw new Error("`".concat(e,"` was specified but was not a node, or did not return a node"))}var r=t;if("string"==typeof t&&!(r=f.querySelector(t)))throw new Error("`".concat(e,"` as selector refers to no known node"));return r},y=function(){var e=h("initialFocus");if(!1===e)return!1;if(void 0===e)if(p(f.activeElement))e=f.activeElement;else{var t=d.tabbableGroups[0];e=t&&t.firstTabbableNode||h("fallbackFocus")}if(!e)throw new Error("Your focus-trap needs to have at least one focusable element");return e},m=function(){if(d.tabbableGroups=d.containers.map((function(e){var n,a=t.tabbable(e,{getShadowRoot:null===(n=b.tabbableOptions)||void 0===n?void 0:n.getShadowRoot}),o=t.focusable(e);if(a.length>0)return{container:e,firstTabbableNode:a[0],lastTabbableNode:a[a.length-1],nextTabbableNode:function(e){var n=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],a=o.findIndex((function(t){return t===e}));return n?o.slice(a+1).find((function(e){return t.isTabbable(e)})):o.slice(0,a).reverse().find((function(e){return t.isTabbable(e)}))}}})).filter((function(e){return!!e})),d.tabbableGroups.length<=0&&!h("fallbackFocus"))throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times")},g=function e(t){!1!==t&&t!==f.activeElement&&(t&&t.focus?(t.focus({preventScroll:!!b.preventScroll}),d.mostRecentlyFocusedNode=t,function(e){return e.tagName&&"input"===e.tagName.toLowerCase()&&"function"==typeof e.select}(t)&&t.select()):e(y()))},T=function(e){var t=h("setReturnFocus",e);return t||!1!==t&&e},w=function(e){var n=s(e);p(n)||(u(b.clickOutsideDeactivates,e)?l.deactivate({returnFocus:b.returnFocusOnDeactivate&&!t.isFocusable(n)}):u(b.allowOutsideClick,e)||e.preventDefault())},F=function(e){var t=s(e),n=p(t);n||t instanceof Document?n&&(d.mostRecentlyFocusedNode=t):(e.stopImmediatePropagation(),g(d.mostRecentlyFocusedNode||y()))},O=function(e){if(function(e){return"Escape"===e.key||"Esc"===e.key||27===e.keyCode}(e)&&!1!==u(b.escapeDeactivates,e))return e.preventDefault(),void l.deactivate();(function(e){return"Tab"===e.key||9===e.keyCode})(e)&&function(e){var n=s(e);m();var a=null;if(d.tabbableGroups.length>0){var o=c(d.tabbableGroups,(function(e){return e.container.contains(n)})),r=o>=0?d.tabbableGroups[o]:void 0;if(o<0)a=e.shiftKey?d.tabbableGroups[d.tabbableGroups.length-1].lastTabbableNode:d.tabbableGroups[0].firstTabbableNode;else if(e.shiftKey){var i=c(d.tabbableGroups,(function(e){var t=e.firstTabbableNode;return n===t}));if(i<0&&(r.container===n||t.isFocusable(n)&&!t.isTabbable(n)&&!r.nextTabbableNode(n,!1))&&(i=o),i>=0){var u=0===i?d.tabbableGroups.length-1:i-1;a=d.tabbableGroups[u].lastTabbableNode}}else{var l=c(d.tabbableGroups,(function(e){var t=e.lastTabbableNode;return n===t}));if(l<0&&(r.container===n||t.isFocusable(n)&&!t.isTabbable(n)&&!r.nextTabbableNode(n))&&(l=o),l>=0){var f=l===d.tabbableGroups.length-1?0:l+1;a=d.tabbableGroups[f].firstTabbableNode}}}else a=h("fallbackFocus");a&&(e.preventDefault(),g(a))}(e)},E=function(e){if(!u(b.clickOutsideDeactivates,e)){var t=s(e);p(t)||u(b.allowOutsideClick,e)||(e.preventDefault(),e.stopImmediatePropagation())}},k=function(){if(d.active)return r.activateTrap(l),d.delayInitialFocusTimer=b.delayInitialFocus?i((function(){g(y())})):g(y()),f.addEventListener("focusin",F,!0),f.addEventListener("mousedown",w,{capture:!0,passive:!1}),f.addEventListener("touchstart",w,{capture:!0,passive:!1}),f.addEventListener("click",E,{capture:!0,passive:!1}),f.addEventListener("keydown",O,{capture:!0,passive:!1}),l},D=function(){if(d.active)return f.removeEventListener("focusin",F,!0),f.removeEventListener("mousedown",w,!0),f.removeEventListener("touchstart",w,!0),f.removeEventListener("click",E,!0),f.removeEventListener("keydown",O,!0),l};return(l={activate:function(e){if(d.active)return this;var t=v(e,"onActivate"),n=v(e,"onPostActivate"),a=v(e,"checkCanFocusTrap");a||m(),d.active=!0,d.paused=!1,d.nodeFocusedBeforeActivation=f.activeElement,t&&t();var o=function(){a&&m(),k(),n&&n()};return a?(a(d.containers.concat()).then(o,o),this):(o(),this)},deactivate:function(e){if(!d.active)return this;clearTimeout(d.delayInitialFocusTimer),d.delayInitialFocusTimer=void 0,D(),d.active=!1,d.paused=!1,r.deactivateTrap(l);var t=v(e,"onDeactivate"),n=v(e,"onPostDeactivate"),a=v(e,"checkCanReturnFocus");t&&t();var o=v(e,"returnFocus","returnFocusOnDeactivate"),c=function(){i((function(){o&&g(T(d.nodeFocusedBeforeActivation)),n&&n()}))};return o&&a?(a(T(d.nodeFocusedBeforeActivation)).then(c,c),this):(c(),this)},pause:function(){return d.paused||!d.active||(d.paused=!0,D()),this},unpause:function(){return d.paused&&d.active?(d.paused=!1,m(),k(),this):this},updateContainerElements:function(e){var t=[].concat(e).filter(Boolean);return d.containers=t.map((function(e){return"string"==typeof e?f.querySelector(e):e})),d.active&&m(),this}}).updateContainerElements(e),l},Object.defineProperty(e,"__esModule",{value:!0})}));
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("tabbable")):"function"==typeof define&&define.amd?define(["exports","tabbable"],t):(e="undefined"!=typeof globalThis?globalThis:e||self,function(){var n=e.focusTrap,a=e.focusTrap={};t(a,e.tabbable),a.noConflict=function(){return e.focusTrap=n,a}}())}(this,(function(e,t){"use strict";function n(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,a)}return n}function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var o,r=(o=[],{activateTrap:function(e){if(o.length>0){var t=o[o.length-1];t!==e&&t.pause()}var n=o.indexOf(e);-1===n||o.splice(n,1),o.push(e)},deactivateTrap:function(e){var t=o.indexOf(e);-1!==t&&o.splice(t,1),o.length>0&&o[o.length-1].unpause()}}),i=function(e){return setTimeout(e,0)},c=function(e,t){var n=-1;return e.every((function(e,a){return!t(e)||(n=a,!1)})),n},u=function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),a=1;a<t;a++)n[a-1]=arguments[a];return"function"==typeof e?e.apply(void 0,n):e},s=function(e){return e.target.shadowRoot&&"function"==typeof e.composedPath?e.composedPath()[0]:e.target};e.createFocusTrap=function(e,o){var l,b=(null==o?void 0:o.document)||document,f=function(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{};t%2?n(Object(o),!0).forEach((function(t){a(e,t,o[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):n(Object(o)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(o,t))}))}return e}({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0},o),d={containers:[],containerGroups:[],tabbableGroups:[],nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1,delayInitialFocusTimer:void 0},v=function(e,t,n){return e&&void 0!==e[t]?e[t]:f[n||t]},p=function(e){return d.containerGroups.findIndex((function(t){var n=t.container,a=t.tabbableNodes;return n.contains(e)||a.find((function(t){return t===e}))}))},h=function(e){var t=f[e];if("function"==typeof t){for(var n=arguments.length,a=new Array(n>1?n-1:0),o=1;o<n;o++)a[o-1]=arguments[o];t=t.apply(void 0,a)}if(!t){if(void 0===t||!1===t)return t;throw new Error("`".concat(e,"` was specified but was not a node, or did not return a node"))}var r=t;if("string"==typeof t&&!(r=b.querySelector(t)))throw new Error("`".concat(e,"` as selector refers to no known node"));return r},y=function(){var e=h("initialFocus");if(!1===e)return!1;if(void 0===e)if(p(b.activeElement)>=0)e=b.activeElement;else{var t=d.tabbableGroups[0];e=t&&t.firstTabbableNode||h("fallbackFocus")}if(!e)throw new Error("Your focus-trap needs to have at least one focusable element");return e},m=function(){if(d.containerGroups=d.containers.map((function(e){var n,a,o=t.tabbable(e,{getShadowRoot:null===(n=f.tabbableOptions)||void 0===n?void 0:n.getShadowRoot}),r=t.focusable(e,{getShadowRoot:null===(a=f.tabbableOptions)||void 0===a?void 0:a.getShadowRoot});return{container:e,tabbableNodes:o,focusableNodes:r,firstTabbableNode:o.length>0?o[0]:null,lastTabbableNode:o.length>0?o[o.length-1]:null,nextTabbableNode:function(e){var n=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],a=r.findIndex((function(t){return t===e}));if(!(a<0))return n?r.slice(a+1).find((function(e){return t.isTabbable(e)})):r.slice(0,a).reverse().find((function(e){return t.isTabbable(e)}))}}})),d.tabbableGroups=d.containerGroups.filter((function(e){return e.tabbableNodes.length>0})),d.tabbableGroups.length<=0&&!h("fallbackFocus"))throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times")},g=function e(t){!1!==t&&t!==b.activeElement&&(t&&t.focus?(t.focus({preventScroll:!!f.preventScroll}),d.mostRecentlyFocusedNode=t,function(e){return e.tagName&&"input"===e.tagName.toLowerCase()&&"function"==typeof e.select}(t)&&t.select()):e(y()))},T=function(e){var t=h("setReturnFocus",e);return t||!1!==t&&e},w=function(e){var n=s(e);p(n)>=0||(u(f.clickOutsideDeactivates,e)?l.deactivate({returnFocus:f.returnFocusOnDeactivate&&!t.isFocusable(n)}):u(f.allowOutsideClick,e)||e.preventDefault())},F=function(e){var t=s(e),n=p(t)>=0;n||t instanceof Document?n&&(d.mostRecentlyFocusedNode=t):(e.stopImmediatePropagation(),g(d.mostRecentlyFocusedNode||y()))},O=function(e){if(function(e){return"Escape"===e.key||"Esc"===e.key||27===e.keyCode}(e)&&!1!==u(f.escapeDeactivates,e))return e.preventDefault(),void l.deactivate();(function(e){return"Tab"===e.key||9===e.keyCode})(e)&&function(e){var n=s(e);m();var a=null;if(d.tabbableGroups.length>0){var o=p(n),r=o>=0?d.containerGroups[o]:void 0;if(o<0)a=e.shiftKey?d.tabbableGroups[d.tabbableGroups.length-1].lastTabbableNode:d.tabbableGroups[0].firstTabbableNode;else if(e.shiftKey){var i=c(d.tabbableGroups,(function(e){var t=e.firstTabbableNode;return n===t}));if(i<0&&(r.container===n||t.isFocusable(n)&&!t.isTabbable(n)&&!r.nextTabbableNode(n,!1))&&(i=o),i>=0){var u=0===i?d.tabbableGroups.length-1:i-1;a=d.tabbableGroups[u].lastTabbableNode}}else{var l=c(d.tabbableGroups,(function(e){var t=e.lastTabbableNode;return n===t}));if(l<0&&(r.container===n||t.isFocusable(n)&&!t.isTabbable(n)&&!r.nextTabbableNode(n))&&(l=o),l>=0){var b=l===d.tabbableGroups.length-1?0:l+1;a=d.tabbableGroups[b].firstTabbableNode}}}else a=h("fallbackFocus");a&&(e.preventDefault(),g(a))}(e)},E=function(e){if(!u(f.clickOutsideDeactivates,e)){var t=s(e);p(t)>=0||u(f.allowOutsideClick,e)||(e.preventDefault(),e.stopImmediatePropagation())}},N=function(){if(d.active)return r.activateTrap(l),d.delayInitialFocusTimer=f.delayInitialFocus?i((function(){g(y())})):g(y()),b.addEventListener("focusin",F,!0),b.addEventListener("mousedown",w,{capture:!0,passive:!1}),b.addEventListener("touchstart",w,{capture:!0,passive:!1}),b.addEventListener("click",E,{capture:!0,passive:!1}),b.addEventListener("keydown",O,{capture:!0,passive:!1}),l},k=function(){if(d.active)return b.removeEventListener("focusin",F,!0),b.removeEventListener("mousedown",w,!0),b.removeEventListener("touchstart",w,!0),b.removeEventListener("click",E,!0),b.removeEventListener("keydown",O,!0),l};return(l={activate:function(e){if(d.active)return this;var t=v(e,"onActivate"),n=v(e,"onPostActivate"),a=v(e,"checkCanFocusTrap");a||m(),d.active=!0,d.paused=!1,d.nodeFocusedBeforeActivation=b.activeElement,t&&t();var o=function(){a&&m(),N(),n&&n()};return a?(a(d.containers.concat()).then(o,o),this):(o(),this)},deactivate:function(e){if(!d.active)return this;clearTimeout(d.delayInitialFocusTimer),d.delayInitialFocusTimer=void 0,k(),d.active=!1,d.paused=!1,r.deactivateTrap(l);var t=v(e,"onDeactivate"),n=v(e,"onPostDeactivate"),a=v(e,"checkCanReturnFocus");t&&t();var o=v(e,"returnFocus","returnFocusOnDeactivate"),c=function(){i((function(){o&&g(T(d.nodeFocusedBeforeActivation)),n&&n()}))};return o&&a?(a(T(d.nodeFocusedBeforeActivation)).then(c,c),this):(c(),this)},pause:function(){return d.paused||!d.active||(d.paused=!0,k()),this},unpause:function(){return d.paused&&d.active?(d.paused=!1,m(),N(),this):this},updateContainerElements:function(e){var t=[].concat(e).filter(Boolean);return d.containers=t.map((function(e){return"string"==typeof e?b.querySelector(e):e})),d.active&&m(),this}}).updateContainerElements(e),l},Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=focus-trap.umd.min.js.map

153

index.js

@@ -111,7 +111,7 @@ import { tabbable, focusable, isFocusable, isTabbable } from 'tabbable';

const state = {
// containers given to createFocusTrap()
// @type {Array<HTMLElement>}
containers: [],
// list of objects identifying the first and last tabbable nodes in all containers/groups in
// the trap
// list of objects identifying tabbable nodes in `containers` in the trap
// NOTE: it's possible that a group has no tabbable nodes if nodes get removed while the trap

@@ -123,2 +123,4 @@ // is active, but the trap should never get to a state where there isn't at least one group

// container: HTMLElement,
// tabbableNodes: Array<HTMLElement>, // empty if none
// focusableNodes: Array<HTMLElement>, // empty if none
// firstTabbableNode: HTMLElement|null,

@@ -128,2 +130,8 @@ // lastTabbableNode: HTMLElement|null,

// }>}
containerGroups: [], // same order/length as `containers` list
// references to objects in `containerGroups`, but only those that actually have
// tabbable nodes in them
// NOTE: same order as `containers` and `containerGroups`, but __not necessarily__
// the same length
tabbableGroups: [],

@@ -158,6 +166,21 @@

const containersContain = function (element) {
return !!(
element &&
state.containers.some((container) => container.contains(element))
/**
* Finds the index of the container that contains the element.
* @param {HTMLElement} element
* @returns {number} Index of the container in either `state.containers` or
* `state.containerGroups` (the order/length of these lists are the same); -1
* if the element isn't found.
*/
const findContainerIndex = function (element) {
// NOTE: search `containerGroups` because it's possible a group contains no tabbable
// nodes, but still contains focusable nodes (e.g. if they all have `tabindex=-1`)
// and we still need to find the element in there
return state.containerGroups.findIndex(
({ container, tabbableNodes }) =>
container.contains(element) ||
// fall back to explicit tabbable search which will take into consideration any
// web components if the `tabbableOptions.getShadowRoot` option was used for
// the trap, enabling shadow DOM support in tabbable (`Node.contains()` doesn't
// look inside web components even if open)
tabbableNodes.find((node) => node === element)
);

@@ -221,3 +244,3 @@ };

// option not specified: use fallback options
if (containersContain(doc.activeElement)) {
if (findContainerIndex(doc.activeElement) >= 0) {
node = doc.activeElement;

@@ -244,55 +267,63 @@ } else {

const updateTabbableNodes = function () {
state.tabbableGroups = state.containers
.map((container) => {
const tabbableNodes = tabbable(container, {
getShadowRoot: config.tabbableOptions?.getShadowRoot,
});
state.containerGroups = state.containers.map((container) => {
const tabbableNodes = tabbable(container, {
getShadowRoot: config.tabbableOptions?.getShadowRoot,
});
// NOTE: if we have tabbable nodes, we must have focusable nodes; focusable nodes
// are a superset of tabbable nodes
const focusableNodes = focusable(container);
// NOTE: if we have tabbable nodes, we must have focusable nodes; focusable nodes
// are a superset of tabbable nodes
const focusableNodes = focusable(container, {
getShadowRoot: config.tabbableOptions?.getShadowRoot,
});
if (tabbableNodes.length > 0) {
return {
container,
firstTabbableNode: tabbableNodes[0],
lastTabbableNode: tabbableNodes[tabbableNodes.length - 1],
return {
container,
tabbableNodes,
focusableNodes,
firstTabbableNode: tabbableNodes.length > 0 ? tabbableNodes[0] : null,
lastTabbableNode:
tabbableNodes.length > 0
? tabbableNodes[tabbableNodes.length - 1]
: null,
/**
* Finds the __tabbable__ node that follows the given node in the specified direction,
* in this container, if any.
* @param {HTMLElement} node
* @param {boolean} [forward] True if going in forward tab order; false if going
* in reverse.
* @returns {HTMLElement|undefined} The next tabbable node, if any.
*/
nextTabbableNode(node, forward = true) {
// NOTE: If tabindex is positive (in order to manipulate the tab order separate
// from the DOM order), this __will not work__ because the list of focusableNodes,
// while it contains tabbable nodes, does not sort its nodes in any order other
// than DOM order, because it can't: Where would you place focusable (but not
// tabbable) nodes in that order? They have no order, because they aren't tabbale...
// Support for positive tabindex is already broken and hard to manage (possibly
// not supportable, TBD), so this isn't going to make things worse than they
// already are, and at least makes things better for the majority of cases where
// tabindex is either 0/unset or negative.
// FYI, positive tabindex issue: https://github.com/focus-trap/focus-trap/issues/375
const nodeIdx = focusableNodes.findIndex((n) => n === node);
if (forward) {
return focusableNodes
.slice(nodeIdx + 1)
.find((n) => isTabbable(n));
}
return focusableNodes
.slice(0, nodeIdx)
.reverse()
.find((n) => isTabbable(n));
},
};
}
/**
* Finds the __tabbable__ node that follows the given node in the specified direction,
* in this container, if any.
* @param {HTMLElement} node
* @param {boolean} [forward] True if going in forward tab order; false if going
* in reverse.
* @returns {HTMLElement|undefined} The next tabbable node, if any.
*/
nextTabbableNode(node, forward = true) {
// NOTE: If tabindex is positive (in order to manipulate the tab order separate
// from the DOM order), this __will not work__ because the list of focusableNodes,
// while it contains tabbable nodes, does not sort its nodes in any order other
// than DOM order, because it can't: Where would you place focusable (but not
// tabbable) nodes in that order? They have no order, because they aren't tabbale...
// Support for positive tabindex is already broken and hard to manage (possibly
// not supportable, TBD), so this isn't going to make things worse than they
// already are, and at least makes things better for the majority of cases where
// tabindex is either 0/unset or negative.
// FYI, positive tabindex issue: https://github.com/focus-trap/focus-trap/issues/375
const nodeIdx = focusableNodes.findIndex((n) => n === node);
if (nodeIdx < 0) {
return undefined;
}
return undefined;
})
.filter((group) => !!group); // remove groups with no tabbable nodes
if (forward) {
return focusableNodes.slice(nodeIdx + 1).find((n) => isTabbable(n));
}
return focusableNodes
.slice(0, nodeIdx)
.reverse()
.find((n) => isTabbable(n));
},
};
});
state.tabbableGroups = state.containerGroups.filter(
(group) => group.tabbableNodes.length > 0
);
// throw if no groups have tabbable nodes and we don't have a fallback focus node either

@@ -341,3 +372,3 @@ if (

if (containersContain(target)) {
if (findContainerIndex(target) >= 0) {
// allow the click since it ocurred inside the trap

@@ -381,3 +412,3 @@ return;

const target = getActualTarget(e);
const targetContained = containersContain(target);
const targetContained = findContainerIndex(target) >= 0;

@@ -410,7 +441,5 @@ // In Firefox when you Tab out of an iframe the Document is briefly focused.

// with tabIndex='-1' and was given initial focus
const containerIndex = findIndex(state.tabbableGroups, ({ container }) =>
container.contains(target)
);
const containerIndex = findContainerIndex(target);
const containerGroup =
containerIndex >= 0 ? state.tabbableGroups[containerIndex] : undefined;
containerIndex >= 0 ? state.containerGroups[containerIndex] : undefined;

@@ -539,3 +568,3 @@ if (containerIndex < 0) {

if (containersContain(target)) {
if (findContainerIndex(target) >= 0) {
return;

@@ -542,0 +571,0 @@ }

27

package.json
{
"name": "focus-trap",
"version": "6.8.0-beta.1",
"version": "6.8.0-beta.2",
"description": "Trap focus within a DOM node.",

@@ -41,2 +41,3 @@ "main": "dist/focus-trap.js",

"prepare": "yarn build",
"prepublishOnly": "yarn test && yarn build",
"release": "yarn build && changeset publish"

@@ -66,26 +67,26 @@ },

"dependencies": {
"tabbable": "5.3.0-beta.0"
"tabbable": "5.3.0-beta.1"
},
"devDependencies": {
"@babel/cli": "^7.17.0",
"@babel/core": "^7.17.2",
"@babel/cli": "^7.17.6",
"@babel/core": "^7.17.5",
"@babel/eslint-parser": "^7.17.0",
"@babel/preset-env": "^7.16.11",
"@changesets/cli": "^2.20.0",
"@rollup/plugin-babel": "^5.3.0",
"@rollup/plugin-commonjs": "^21.0.1",
"@changesets/cli": "^2.21.1",
"@rollup/plugin-babel": "^5.3.1",
"@rollup/plugin-commonjs": "^21.0.2",
"@rollup/plugin-node-resolve": "^13.1.3",
"@testing-library/cypress": "^8.0.2",
"@types/jquery": "^3.5.13",
"@types/jquery": "^3.5.14",
"all-contributors-cli": "^6.20.0",
"babel-loader": "^8.2.3",
"cross-env": "^7.0.3",
"cypress": "^9.4.1",
"cypress": "^9.5.1",
"cypress-plugin-tab": "^1.0.5",
"eslint": "^8.8.0",
"eslint-config-prettier": "^8.3.0",
"eslint": "^8.10.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-cypress": "^2.12.1",
"onchange": "^7.1.0",
"prettier": "^2.5.1",
"rollup": "^2.67.1",
"rollup": "^2.70.0",
"rollup-plugin-inject-process-env": "^1.3.1",

@@ -97,4 +98,4 @@ "rollup-plugin-livereload": "^2.0.5",

"start-server-and-test": "^1.14.0",
"typescript": "^4.5.5"
"typescript": "^4.6.2"
}
}

9

README.md
# 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-21-orange.svg?style=flat-square)](#contributors)
[![All Contributors](https://img.shields.io/badge/all_contributors-22-orange.svg?style=flat-square)](#contributors)
<!-- ALL-CONTRIBUTORS-BADGE:END -->

@@ -261,7 +261,8 @@

<td align="center"><a href="https://github.com/Dan503"><img src="https://avatars.githubusercontent.com/u/10610368?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Daniel Tonon</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/commits?author=Dan503" title="Documentation">📖</a> <a href="#tool-Dan503" title="Tools">🔧</a> <a href="#a11y-Dan503" title="Accessibility">️️️️♿️</a> <a href="https://github.com/focus-trap/focus-trap/commits?author=Dan503" title="Code">💻</a></td>
<td align="center"><a href="https://github.com/DaviDevMod"><img src="https://avatars.githubusercontent.com/u/98312056?v=4?s=100" width="100px;" alt=""/><br /><sub><b>DaviDevMod</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/commits?author=DaviDevMod" title="Documentation">📖</a></td>
<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/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://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/focus-trap/focus-trap/issues?q=author%3Amichael-ar" title="Bug reports">🐛</a></td>
</tr>
<tr>
<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/focus-trap/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/focus-trap/focus-trap/commits?author=liunate" title="Tests">⚠️</a></td>

@@ -273,5 +274,5 @@ <td align="center"><a href="https://github.com/far-fetched"><img src="https://avatars.githubusercontent.com/u/11621383?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Piotr Panek</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/issues?q=author%3Afar-fetched" title="Bug reports">🐛</a> <a href="https://github.com/focus-trap/focus-trap/commits?author=far-fetched" title="Documentation">📖</a> <a href="https://github.com/focus-trap/focus-trap/commits?author=far-fetched" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap/commits?author=far-fetched" title="Tests">⚠️</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/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/skriems"><img src="https://avatars.githubusercontent.com/u/15573317?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Sebastian Kriems</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/issues?q=author%3Askriems" title="Bug reports">🐛</a></td>
</tr>
<tr>
<td align="center"><a href="https://github.com/skriems"><img src="https://avatars.githubusercontent.com/u/15573317?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Sebastian Kriems</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/issues?q=author%3Askriems" title="Bug reports">🐛</a></td>
<td align="center"><a href="https://recollectr.io"><img src="https://avatars2.githubusercontent.com/u/6835891?v=4?s=100" 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>

@@ -283,2 +284,4 @@ <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/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/zioth"><img src="https://avatars3.githubusercontent.com/u/945603?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Zioth</b></sub></a><br /><a href="#ideas-zioth" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/focus-trap/focus-trap/issues?q=author%3Azioth" title="Bug reports">🐛</a></td>
</tr>
<tr>
<td align="center"><a href="https://github.com/jpveooys"><img src="https://avatars.githubusercontent.com/u/66470099?v=4?s=100" width="100px;" alt=""/><br /><sub><b>jpveooys</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/issues?q=author%3Ajpveooys" title="Bug reports">🐛</a></td>

@@ -285,0 +288,0 @@ </tr>

dist/focus-trap.esm.js.map

Sorry, the diff of this file is not supported yet

dist/focus-trap.esm.min.js.map

Sorry, the diff of this file is not supported yet

dist/focus-trap.js.map

Sorry, the diff of this file is not supported yet

dist/focus-trap.min.js.map

Sorry, the diff of this file is not supported yet

dist/focus-trap.umd.js.map

Sorry, the diff of this file is not supported yet

dist/focus-trap.umd.min.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc