focus-trap
Advanced tools
focus-trap - npm Package Compare versions
Comparing version 7.4.3 to 7.5.0
| # Changelog | ||
| ## 7.5.0 | ||
| ### Minor Changes | ||
| - 5e2f913: Adds support for nodes with a positive tabindex in single-container traps only ([#375](https://github.com/focus-trap/focus-trap/issues/375)) | ||
| ## 7.4.3 | ||
@@ -4,0 +10,0 @@ |
| /*! | ||
| * focus-trap 7.4.3 | ||
| * focus-trap 7.5.0 | ||
| * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE | ||
| */ | ||
| import { isFocusable, tabbable, focusable, isTabbable } from 'tabbable'; | ||
| import { isFocusable, tabbable, focusable, isTabbable, getTabIndex } from 'tabbable'; | ||
@@ -88,6 +88,6 @@ function ownKeys(object, enumerableOnly) { | ||
| var isEscapeEvent = function isEscapeEvent(e) { | ||
| return e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27; | ||
| return (e === null || e === void 0 ? void 0 : e.key) === 'Escape' || (e === null || e === void 0 ? void 0 : e.key) === 'Esc' || (e === null || e === void 0 ? void 0 : e.keyCode) === 27; | ||
| }; | ||
| var isTabEvent = function isTabEvent(e) { | ||
| return e.key === 'Tab' || e.keyCode === 9; | ||
| return (e === null || e === void 0 ? void 0 : e.key) === 'Tab' || (e === null || e === void 0 ? void 0 : e.keyCode) === 9; | ||
| }; | ||
@@ -176,4 +176,7 @@ | ||
| // focusableNodes: Array<HTMLElement>, // empty if none | ||
| // firstTabbableNode: HTMLElement|null, | ||
| // lastTabbableNode: HTMLElement|null, | ||
| // posTabIndexesFound: boolean, | ||
| // firstTabbableNode: HTMLElement|undefined, | ||
| // lastTabbableNode: HTMLElement|undefined, | ||
| // firstDomTabbableNode: HTMLElement|undefined, | ||
| // lastDomTabbableNode: HTMLElement|undefined, | ||
| // nextTabbableNode: (node: HTMLElement, forward: boolean) => HTMLElement|undefined | ||
@@ -195,3 +198,5 @@ // }>} | ||
| // has been delayed during activation | ||
| delayInitialFocusTimer: undefined | ||
| delayInitialFocusTimer: undefined, | ||
| // the most recent KeyboardEvent for the configured nav key (typically [SHIFT+]TAB), if any | ||
| recentNavEvent: undefined | ||
| }; | ||
@@ -215,3 +220,5 @@ var trap; // eslint-disable-line prefer-const -- some private functions reference it, and its methods reference private functions, so we must declare here and define later | ||
| * @param {HTMLElement} element | ||
| * @param {Event} [event] | ||
| * @param {Event} [event] If available, and `element` isn't directly found in any container, | ||
| * the event's composed path is used to see if includes any known trap containers in the | ||
| * case where the element is inside a Shadow DOM. | ||
| * @returns {number} Index of the container in either `state.containers` or | ||
@@ -311,4 +318,16 @@ * `state.containerGroups` (the order/length of these lists are the same); -1 | ||
| // NOTE: if we have tabbable nodes, we must have focusable nodes; focusable nodes | ||
| // are a superset of tabbable nodes | ||
| // are a superset of tabbable nodes since nodes with negative `tabindex` attributes | ||
| // are focusable but not tabbable | ||
| var focusableNodes = focusable(container, config.tabbableOptions); | ||
| var firstTabbableNode = tabbableNodes.length > 0 ? tabbableNodes[0] : undefined; | ||
| var lastTabbableNode = tabbableNodes.length > 0 ? tabbableNodes[tabbableNodes.length - 1] : undefined; | ||
| var firstDomTabbableNode = focusableNodes.find(function (node) { | ||
| return isTabbable(node); | ||
| }); | ||
| var lastDomTabbableNode = focusableNodes.findLast(function (node) { | ||
| return isTabbable(node); | ||
| }); | ||
| var posTabIndexesFound = !!tabbableNodes.find(function (node) { | ||
| return getTabIndex(node) > 0; | ||
| }); | ||
| return { | ||
@@ -318,4 +337,19 @@ container: container, | ||
| focusableNodes: focusableNodes, | ||
| firstTabbableNode: tabbableNodes.length > 0 ? tabbableNodes[0] : null, | ||
| lastTabbableNode: tabbableNodes.length > 0 ? tabbableNodes[tabbableNodes.length - 1] : null, | ||
| /** True if at least one node with positive `tabindex` was found in this container. */ | ||
| posTabIndexesFound: posTabIndexesFound, | ||
| /** First tabbable node in container, __tabindex__ order; `undefined` if none. */ | ||
| firstTabbableNode: firstTabbableNode, | ||
| /** Last tabbable node in container, __tabindex__ order; `undefined` if none. */ | ||
| lastTabbableNode: lastTabbableNode, | ||
| // NOTE: DOM order is NOT NECESSARILY "document position" order, but figuring that out | ||
| // would require more than just https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition | ||
| // because that API doesn't work with Shadow DOM as well as it should (@see | ||
| // https://github.com/whatwg/dom/issues/320) and since this first/last is only needed, so far, | ||
| // to address an edge case related to positive tabindex support, this seems like a much easier, | ||
| // "close enough most of the time" alternative for positive tabindexes which should generally | ||
| // be avoided anyway... | ||
| /** First tabbable node in container, __DOM__ order; `undefined` if none. */ | ||
| firstDomTabbableNode: firstDomTabbableNode, | ||
| /** Last tabbable node in container, __DOM__ order; `undefined` if none. */ | ||
| lastDomTabbableNode: lastDomTabbableNode, | ||
| /** | ||
@@ -331,26 +365,20 @@ * Finds the __tabbable__ node that follows the given node in the specified direction, | ||
| 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; | ||
| }); | ||
| var nodeIdx = tabbableNodes.indexOf(node); | ||
| if (nodeIdx < 0) { | ||
| return undefined; | ||
| } | ||
| if (forward) { | ||
| return focusableNodes.slice(nodeIdx + 1).find(function (n) { | ||
| return isTabbable(n, config.tabbableOptions); | ||
| // either not tabbable nor focusable, or was focused but not tabbable (negative tabindex): | ||
| // since `node` should at least have been focusable, we assume that's the case and mimic | ||
| // what browsers do, which is set focus to the next node in __document position order__, | ||
| // regardless of positive tabindexes, if any -- and for reasons explained in the NOTE | ||
| // above related to `firstDomTabbable` and `lastDomTabbable` properties, we fall back to | ||
| // basic DOM order | ||
| if (forward) { | ||
| return focusableNodes.slice(focusableNodes.indexOf(node) + 1).find(function (el) { | ||
| return isTabbable(el); | ||
| }); | ||
| } | ||
| return focusableNodes.slice(0, focusableNodes.indexOf(node)).findLast(function (el) { | ||
| return isTabbable(el); | ||
| }); | ||
| } | ||
| return focusableNodes.slice(0, nodeIdx).reverse().find(function (n) { | ||
| return isTabbable(n, config.tabbableOptions); | ||
| }); | ||
| return tabbableNodes[nodeIdx + (forward ? 1 : -1)]; | ||
| } | ||
@@ -368,2 +396,15 @@ }; | ||
| } | ||
| // NOTE: Positive tabindexes are only properly supported in single-container traps because | ||
| // doing it across multiple containers where tabindexes could be all over the place | ||
| // would require Tabbable to support multiple containers, would require additional | ||
| // specialized Shadow DOM support, and would require Tabbable's multi-container support | ||
| // to look at those containers in document position order rather than user-provided | ||
| // order (as they are treated in Focus-trap, for legacy reasons). See discussion on | ||
| // https://github.com/focus-trap/focus-trap/issues/375 for more details. | ||
| if (state.containerGroups.find(function (g) { | ||
| return g.posTabIndexesFound; | ||
| }) && state.containerGroups.length > 1) { | ||
| throw new Error("At least one node with a positive tabindex was found in one of your focus-trap's multiple containers. Positive tabindexes are only supported in single-container focus-traps."); | ||
| } | ||
| }; | ||
@@ -384,2 +425,3 @@ var tryFocus = function tryFocus(node) { | ||
| }); | ||
| // NOTE: focus() API does not trigger focusIn event so set MRU node manually | ||
| state.mostRecentlyFocusedNode = node; | ||
@@ -395,60 +437,19 @@ if (isSelectableInput(node)) { | ||
| // This needs to be done on mousedown and touchstart instead of click | ||
| // so that it precedes the focus event. | ||
| var checkPointerDown = function checkPointerDown(e) { | ||
| var target = getActualTarget(e); | ||
| if (findContainerIndex(target, e) >= 0) { | ||
| // allow the click since it ocurred inside the trap | ||
| return; | ||
| } | ||
| if (valueOrHandler(config.clickOutsideDeactivates, e)) { | ||
| // immediately deactivate the trap | ||
| trap.deactivate({ | ||
| // NOTE: by setting `returnFocus: false`, deactivate() will do nothing, | ||
| // which will result in the outside click setting focus to the node | ||
| // that was clicked (and if not focusable, to "nothing"); by setting | ||
| // `returnFocus: true`, we'll attempt to re-focus the node originally-focused | ||
| // on activation (or the configured `setReturnFocus` node), whether the | ||
| // outside click was on a focusable node or not | ||
| returnFocus: config.returnFocusOnDeactivate | ||
| }); | ||
| return; | ||
| } | ||
| // 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 (valueOrHandler(config.allowOutsideClick, e)) { | ||
| // allow the click outside the trap to take place | ||
| return; | ||
| } | ||
| // otherwise, prevent the click | ||
| e.preventDefault(); | ||
| }; | ||
| // In case focus escapes the trap for some strange reason, pull it back in. | ||
| var checkFocusIn = function checkFocusIn(e) { | ||
| var target = getActualTarget(e); | ||
| var targetContained = findContainerIndex(target, e) >= 0; | ||
| // In Firefox when you Tab out of an iframe the Document is briefly focused. | ||
| if (targetContained || target instanceof Document) { | ||
| if (targetContained) { | ||
| state.mostRecentlyFocusedNode = target; | ||
| } | ||
| } else { | ||
| // escaped! pull it back in to where it just left | ||
| e.stopImmediatePropagation(); | ||
| tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode()); | ||
| } | ||
| }; | ||
| // Hijack key nav 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. | ||
| var checkKeyNav = function checkKeyNav(event) { | ||
| var isBackward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; | ||
| var target = getActualTarget(event); | ||
| /** | ||
| * Finds the next node (in either direction) where focus should move according to a | ||
| * keyboard focus-in event. | ||
| * @param {Object} params | ||
| * @param {Node} [params.target] Known target __from which__ to navigate, if any. | ||
| * @param {KeyboardEvent|FocusEvent} [params.event] Event to use if `target` isn't known (event | ||
| * will be used to determine the `target`). Ignored if `target` is specified. | ||
| * @param {boolean} [params.isBackward] True if focus should move backward. | ||
| * @returns {Node|undefined} The next node, or `undefined` if a next node couldn't be | ||
| * determined given the current state of the trap. | ||
| */ | ||
| var findNextNavNode = function findNextNavNode(_ref2) { | ||
| var target = _ref2.target, | ||
| event = _ref2.event, | ||
| _ref2$isBackward = _ref2.isBackward, | ||
| isBackward = _ref2$isBackward === void 0 ? false : _ref2$isBackward; | ||
| target = target || getActualTarget(event); | ||
| updateTabbableNodes(); | ||
@@ -476,4 +477,4 @@ var destinationNode = null; | ||
| // is the target the first tabbable node in a group? | ||
| var startOfGroupIndex = findIndex(state.tabbableGroups, function (_ref2) { | ||
| var firstTabbableNode = _ref2.firstTabbableNode; | ||
| var startOfGroupIndex = findIndex(state.tabbableGroups, function (_ref3) { | ||
| var firstTabbableNode = _ref3.firstTabbableNode; | ||
| return target === firstTabbableNode; | ||
@@ -496,3 +497,3 @@ }); | ||
| var destinationGroup = state.tabbableGroups[destinationGroupIndex]; | ||
| destinationNode = destinationGroup.lastTabbableNode; | ||
| destinationNode = getTabIndex(target) >= 0 ? destinationGroup.lastTabbableNode : destinationGroup.lastDomTabbableNode; | ||
| } else if (!isTabEvent(event)) { | ||
@@ -507,4 +508,4 @@ // user must have customized the nav keys so we have to move focus manually _within_ | ||
| // is the target the last tabbable node in a group? | ||
| var lastOfGroupIndex = findIndex(state.tabbableGroups, function (_ref3) { | ||
| var lastTabbableNode = _ref3.lastTabbableNode; | ||
| var lastOfGroupIndex = findIndex(state.tabbableGroups, function (_ref4) { | ||
| var lastTabbableNode = _ref4.lastTabbableNode; | ||
| return target === lastTabbableNode; | ||
@@ -527,3 +528,3 @@ }); | ||
| var _destinationGroup = state.tabbableGroups[_destinationGroupIndex]; | ||
| destinationNode = _destinationGroup.firstTabbableNode; | ||
| destinationNode = getTabIndex(target) >= 0 ? _destinationGroup.firstTabbableNode : _destinationGroup.firstDomTabbableNode; | ||
| } else if (!isTabEvent(event)) { | ||
@@ -540,2 +541,141 @@ // user must have customized the nav keys so we have to move focus manually _within_ | ||
| } | ||
| return destinationNode; | ||
| }; | ||
| // This needs to be done on mousedown and touchstart instead of click | ||
| // so that it precedes the focus event. | ||
| var checkPointerDown = function checkPointerDown(e) { | ||
| var target = getActualTarget(e); | ||
| if (findContainerIndex(target, e) >= 0) { | ||
| // allow the click since it ocurred inside the trap | ||
| return; | ||
| } | ||
| if (valueOrHandler(config.clickOutsideDeactivates, e)) { | ||
| // immediately deactivate the trap | ||
| trap.deactivate({ | ||
| // NOTE: by setting `returnFocus: false`, deactivate() will do nothing, | ||
| // which will result in the outside click setting focus to the node | ||
| // that was clicked (and if not focusable, to "nothing"); by setting | ||
| // `returnFocus: true`, we'll attempt to re-focus the node originally-focused | ||
| // on activation (or the configured `setReturnFocus` node), whether the | ||
| // outside click was on a focusable node or not | ||
| returnFocus: config.returnFocusOnDeactivate | ||
| }); | ||
| return; | ||
| } | ||
| // 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 (valueOrHandler(config.allowOutsideClick, e)) { | ||
| // allow the click outside the trap to take place | ||
| return; | ||
| } | ||
| // otherwise, prevent the click | ||
| e.preventDefault(); | ||
| }; | ||
| // In case focus escapes the trap for some strange reason, pull it back in. | ||
| // NOTE: the focusIn event is NOT cancelable, so if focus escapes, it may cause unexpected | ||
| // scrolling if the node that got focused was out of view; there's nothing we can do to | ||
| // prevent that from happening by the time we discover that focus escaped | ||
| var checkFocusIn = function checkFocusIn(event) { | ||
| var target = getActualTarget(event); | ||
| var targetContained = findContainerIndex(target, event) >= 0; | ||
| // In Firefox when you Tab out of an iframe the Document is briefly focused. | ||
| if (targetContained || target instanceof Document) { | ||
| if (targetContained) { | ||
| state.mostRecentlyFocusedNode = target; | ||
| } | ||
| } else { | ||
| // escaped! pull it back in to where it just left | ||
| event.stopImmediatePropagation(); | ||
| // focus will escape if the MRU node had a positive tab index and user tried to nav forward; | ||
| // it will also escape if the MRU node had a 0 tab index and user tried to nav backward | ||
| // toward a node with a positive tab index | ||
| var nextNode; // next node to focus, if we find one | ||
| var navAcrossContainers = true; | ||
| if (getTabIndex(state.mostRecentlyFocusedNode) > 0) { | ||
| // MRU container index must be >=0 otherwise we wouldn't have it as an MRU node... | ||
| var mruContainerIdx = findContainerIndex(state.mostRecentlyFocusedNode); | ||
| // there MAY not be any tabbable nodes in the container if there are at least 2 containers | ||
| // and the MRU node is focusable but not tabbable (focus-trap requires at least 1 container | ||
| // with at least one tabbable node in order to function, so this could be the other container | ||
| // with nothing tabbable in it) | ||
| var tabbableNodes = state.containerGroups[mruContainerIdx].tabbableNodes; | ||
| if (tabbableNodes.length > 0) { | ||
| // MRU tab index MAY not be found if the MRU node is focusable but not tabbable | ||
| var mruTabIdx = tabbableNodes.findIndex(function (node) { | ||
| return node === state.mostRecentlyFocusedNode; | ||
| }); | ||
| if (mruTabIdx >= 0) { | ||
| if (config.isKeyForward(state.recentNavEvent)) { | ||
| if (mruTabIdx + 1 < tabbableNodes.length) { | ||
| nextNode = tabbableNodes[mruTabIdx + 1]; | ||
| navAcrossContainers = false; | ||
| } | ||
| // else, don't wrap within the container as focus should move to next/previous | ||
| // container | ||
| } else { | ||
| if (mruTabIdx - 1 >= 0) { | ||
| nextNode = tabbableNodes[mruTabIdx - 1]; | ||
| navAcrossContainers = false; | ||
| } | ||
| // else, don't wrap within the container as focus should move to next/previous | ||
| // container | ||
| } | ||
| // else, don't find in container order without considering direction too | ||
| } | ||
| } | ||
| // else, no tabbable nodes in that container (which means we must have at least one other | ||
| // container with at least one tabbable node in it, otherwise focus-trap would've thrown | ||
| // an error the last time updateTabbableNodes() was run): find next node among all known | ||
| // containers | ||
| } else { | ||
| // check to see if there's at least one tabbable node with a positive tab index inside | ||
| // the trap because focus seems to escape when navigating backward from a tabbable node | ||
| // with tabindex=0 when this is the case (instead of wrapping to the tabbable node with | ||
| // the greatest positive tab index like it should) | ||
| if (!state.containerGroups.some(function (g) { | ||
| return g.tabbableNodes.some(function (n) { | ||
| return getTabIndex(n) > 0; | ||
| }); | ||
| })) { | ||
| // no containers with tabbable nodes with positive tab indexes which means the focus | ||
| // escaped for some other reason and we should just execute the fallback to the | ||
| // MRU node or initial focus node, if any | ||
| navAcrossContainers = false; | ||
| } | ||
| } | ||
| if (navAcrossContainers) { | ||
| nextNode = findNextNavNode({ | ||
| // move FROM the MRU node, not event-related node (which will be the node that is | ||
| // outside the trap causing the focus escape we're trying to fix) | ||
| target: state.mostRecentlyFocusedNode, | ||
| isBackward: config.isKeyBackward(state.recentNavEvent) | ||
| }); | ||
| } | ||
| if (nextNode) { | ||
| tryFocus(nextNode); | ||
| } else { | ||
| tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode()); | ||
| } | ||
| } | ||
| state.recentNavEvent = undefined; // clear | ||
| }; | ||
| // Hijack key nav 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. | ||
| var checkKeyNav = function checkKeyNav(event) { | ||
| var isBackward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; | ||
| state.recentNavEvent = event; | ||
| var destinationNode = findNextNavNode({ | ||
| event: event, | ||
| isBackward: isBackward | ||
| }); | ||
| if (destinationNode) { | ||
@@ -542,0 +682,0 @@ if (isTabEvent(event)) { |
| /*! | ||
| * focus-trap 7.4.3 | ||
| * focus-trap 7.5.0 | ||
| * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE | ||
| */ | ||
| import{isFocusable as e,tabbable as t,focusable as n,isTabbable as r}from"tabbable";function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function a(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){i(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}function i(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var u=function(e,t){if(e.length>0){var n=e[e.length-1];n!==t&&n.pause()}var r=e.indexOf(t);-1===r||e.splice(r,1),e.push(t)},c=function(e,t){var n=e.indexOf(t);-1!==n&&e.splice(n,1),e.length>0&&e[e.length-1].unpause()},s=function(e){return"Tab"===e.key||9===e.keyCode},l=function(e){return s(e)&&!e.shiftKey},b=function(e){return s(e)&&e.shiftKey},f=function(e){return setTimeout(e,0)},v=function(e,t){var n=-1;return e.every((function(e,r){return!t(e)||(n=r,!1)})),n},d=function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),r=1;r<t;r++)n[r-1]=arguments[r];return"function"==typeof e?e.apply(void 0,n):e},p=function(e){return e.target.shadowRoot&&"function"==typeof e.composedPath?e.composedPath()[0]:e.target},m=[],y=function(o,i){var y,h=(null==i?void 0:i.document)||document,w=(null==i?void 0:i.trapStack)||m,g=a({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0,isKeyForward:l,isKeyBackward:b},i),O={containers:[],containerGroups:[],tabbableGroups:[],nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1,delayInitialFocusTimer:void 0},F=function(e,t,n){return e&&void 0!==e[t]?e[t]:g[n||t]},N=function(e,t){var n="function"==typeof(null==t?void 0:t.composedPath)?t.composedPath():void 0;return O.containerGroups.findIndex((function(t){var r=t.container,o=t.tabbableNodes;return r.contains(e)||(null==n?void 0:n.includes(r))||o.find((function(t){return t===e}))}))},k=function(e){var t=g[e];if("function"==typeof t){for(var n=arguments.length,r=new Array(n>1?n-1:0),o=1;o<n;o++)r[o-1]=arguments[o];t=t.apply(void 0,r)}if(!0===t&&(t=void 0),!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 a=t;if("string"==typeof t&&!(a=h.querySelector(t)))throw new Error("`".concat(e,"` as selector refers to no known node"));return a},E=function(){var t=k("initialFocus");if(!1===t)return!1;if(void 0===t||!e(t,g.tabbableOptions))if(N(h.activeElement)>=0)t=h.activeElement;else{var n=O.tabbableGroups[0];t=n&&n.firstTabbableNode||k("fallbackFocus")}if(!t)throw new Error("Your focus-trap needs to have at least one focusable element");return t},P=function(){if(O.containerGroups=O.containers.map((function(e){var o=t(e,g.tabbableOptions),a=n(e,g.tabbableOptions);return{container:e,tabbableNodes:o,focusableNodes:a,firstTabbableNode:o.length>0?o[0]:null,lastTabbableNode:o.length>0?o[o.length-1]:null,nextTabbableNode:function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],n=a.findIndex((function(t){return t===e}));if(!(n<0))return t?a.slice(n+1).find((function(e){return r(e,g.tabbableOptions)})):a.slice(0,n).reverse().find((function(e){return r(e,g.tabbableOptions)}))}}})),O.tabbableGroups=O.containerGroups.filter((function(e){return e.tabbableNodes.length>0})),O.tabbableGroups.length<=0&&!k("fallbackFocus"))throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times")},T=function e(t){!1!==t&&t!==h.activeElement&&(t&&t.focus?(t.focus({preventScroll:!!g.preventScroll}),O.mostRecentlyFocusedNode=t,function(e){return e.tagName&&"input"===e.tagName.toLowerCase()&&"function"==typeof e.select}(t)&&t.select()):e(E()))},D=function(e){var t=k("setReturnFocus",e);return t||!1!==t&&e},G=function(e){var t=p(e);N(t,e)>=0||(d(g.clickOutsideDeactivates,e)?y.deactivate({returnFocus:g.returnFocusOnDeactivate}):d(g.allowOutsideClick,e)||e.preventDefault())},j=function(e){var t=p(e),n=N(t,e)>=0;n||t instanceof Document?n&&(O.mostRecentlyFocusedNode=t):(e.stopImmediatePropagation(),T(O.mostRecentlyFocusedNode||E()))},L=function(t){if(!(n=t,"Escape"!==n.key&&"Esc"!==n.key&&27!==n.keyCode||!1===d(g.escapeDeactivates,t)))return t.preventDefault(),void y.deactivate();var n;(g.isKeyForward(t)||g.isKeyBackward(t))&&function(t){var n=arguments.length>1&&void 0!==arguments[1]&&arguments[1],o=p(t);P();var a=null;if(O.tabbableGroups.length>0){var i=N(o,t),u=i>=0?O.containerGroups[i]:void 0;if(i<0)a=n?O.tabbableGroups[O.tabbableGroups.length-1].lastTabbableNode:O.tabbableGroups[0].firstTabbableNode;else if(n){var c=v(O.tabbableGroups,(function(e){var t=e.firstTabbableNode;return o===t}));if(c<0&&(u.container===o||e(o,g.tabbableOptions)&&!r(o,g.tabbableOptions)&&!u.nextTabbableNode(o,!1))&&(c=i),c>=0){var l=0===c?O.tabbableGroups.length-1:c-1;a=O.tabbableGroups[l].lastTabbableNode}else s(t)||(a=u.nextTabbableNode(o,!1))}else{var b=v(O.tabbableGroups,(function(e){var t=e.lastTabbableNode;return o===t}));if(b<0&&(u.container===o||e(o,g.tabbableOptions)&&!r(o,g.tabbableOptions)&&!u.nextTabbableNode(o))&&(b=i),b>=0){var f=b===O.tabbableGroups.length-1?0:b+1;a=O.tabbableGroups[f].firstTabbableNode}else s(t)||(a=u.nextTabbableNode(o))}}else a=k("fallbackFocus");a&&(s(t)&&t.preventDefault(),T(a))}(t,g.isKeyBackward(t))},C=function(e){var t=p(e);N(t,e)>=0||d(g.clickOutsideDeactivates,e)||d(g.allowOutsideClick,e)||(e.preventDefault(),e.stopImmediatePropagation())},x=function(){if(O.active)return u(w,y),O.delayInitialFocusTimer=g.delayInitialFocus?f((function(){T(E())})):T(E()),h.addEventListener("focusin",j,!0),h.addEventListener("mousedown",G,{capture:!0,passive:!1}),h.addEventListener("touchstart",G,{capture:!0,passive:!1}),h.addEventListener("click",C,{capture:!0,passive:!1}),h.addEventListener("keydown",L,{capture:!0,passive:!1}),y},I=function(){if(O.active)return h.removeEventListener("focusin",j,!0),h.removeEventListener("mousedown",G,!0),h.removeEventListener("touchstart",G,!0),h.removeEventListener("click",C,!0),h.removeEventListener("keydown",L,!0),y},R="undefined"!=typeof window&&"MutationObserver"in window?new MutationObserver((function(e){e.some((function(e){return Array.from(e.removedNodes).some((function(e){return e===O.mostRecentlyFocusedNode}))}))&&T(E())})):void 0,S=function(){R&&(R.disconnect(),O.active&&!O.paused&&O.containers.map((function(e){R.observe(e,{subtree:!0,childList:!0})})))};return(y={get active(){return O.active},get paused(){return O.paused},activate:function(e){if(O.active)return this;var t=F(e,"onActivate"),n=F(e,"onPostActivate"),r=F(e,"checkCanFocusTrap");r||P(),O.active=!0,O.paused=!1,O.nodeFocusedBeforeActivation=h.activeElement,null==t||t();var o=function(){r&&P(),x(),S(),null==n||n()};return r?(r(O.containers.concat()).then(o,o),this):(o(),this)},deactivate:function(e){if(!O.active)return this;var t=a({onDeactivate:g.onDeactivate,onPostDeactivate:g.onPostDeactivate,checkCanReturnFocus:g.checkCanReturnFocus},e);clearTimeout(O.delayInitialFocusTimer),O.delayInitialFocusTimer=void 0,I(),O.active=!1,O.paused=!1,S(),c(w,y);var n=F(t,"onDeactivate"),r=F(t,"onPostDeactivate"),o=F(t,"checkCanReturnFocus"),i=F(t,"returnFocus","returnFocusOnDeactivate");null==n||n();var u=function(){f((function(){i&&T(D(O.nodeFocusedBeforeActivation)),null==r||r()}))};return i&&o?(o(D(O.nodeFocusedBeforeActivation)).then(u,u),this):(u(),this)},pause:function(e){if(O.paused||!O.active)return this;var t=F(e,"onPause"),n=F(e,"onPostPause");return O.paused=!0,null==t||t(),I(),S(),null==n||n(),this},unpause:function(e){if(!O.paused||!O.active)return this;var t=F(e,"onUnpause"),n=F(e,"onPostUnpause");return O.paused=!1,null==t||t(),P(),x(),S(),null==n||n(),this},updateContainerElements:function(e){var t=[].concat(e).filter(Boolean);return O.containers=t.map((function(e){return"string"==typeof e?h.querySelector(e):e})),O.active&&P(),S(),this}}).updateContainerElements(o),y};export{y as createFocusTrap}; | ||
| import{isFocusable as e,tabbable as t,focusable as n,isTabbable as o,getTabIndex as r}from"tabbable";function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function i(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){u(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function u(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t||"default");if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var c=function(e,t){if(e.length>0){var n=e[e.length-1];n!==t&&n.pause()}var o=e.indexOf(t);-1===o||e.splice(o,1),e.push(t)},s=function(e,t){var n=e.indexOf(t);-1!==n&&e.splice(n,1),e.length>0&&e[e.length-1].unpause()},l=function(e){return"Tab"===(null==e?void 0:e.key)||9===(null==e?void 0:e.keyCode)},d=function(e){return l(e)&&!e.shiftKey},f=function(e){return l(e)&&e.shiftKey},b=function(e){return setTimeout(e,0)},v=function(e,t){var n=-1;return e.every((function(e,o){return!t(e)||(n=o,!1)})),n},p=function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),o=1;o<t;o++)n[o-1]=arguments[o];return"function"==typeof e?e.apply(void 0,n):e},m=function(e){return e.target.shadowRoot&&"function"==typeof e.composedPath?e.composedPath()[0]:e.target},y=[],h=function(a,u){var h,w=(null==u?void 0:u.document)||document,g=(null==u?void 0:u.trapStack)||y,N=i({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0,isKeyForward:d,isKeyBackward:f},u),O={containers:[],containerGroups:[],tabbableGroups:[],nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1,delayInitialFocusTimer:void 0,recentNavEvent:void 0},F=function(e,t,n){return e&&void 0!==e[t]?e[t]:N[n||t]},E=function(e,t){var n="function"==typeof(null==t?void 0:t.composedPath)?t.composedPath():void 0;return O.containerGroups.findIndex((function(t){var o=t.container,r=t.tabbableNodes;return o.contains(e)||(null==n?void 0:n.includes(o))||r.find((function(t){return t===e}))}))},k=function(e){var t=N[e];if("function"==typeof t){for(var n=arguments.length,o=new Array(n>1?n-1:0),r=1;r<n;r++)o[r-1]=arguments[r];t=t.apply(void 0,o)}if(!0===t&&(t=void 0),!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 a=t;if("string"==typeof t&&!(a=w.querySelector(t)))throw new Error("`".concat(e,"` as selector refers to no known node"));return a},T=function(){var t=k("initialFocus");if(!1===t)return!1;if(void 0===t||!e(t,N.tabbableOptions))if(E(w.activeElement)>=0)t=w.activeElement;else{var n=O.tabbableGroups[0];t=n&&n.firstTabbableNode||k("fallbackFocus")}if(!t)throw new Error("Your focus-trap needs to have at least one focusable element");return t},D=function(){if(O.containerGroups=O.containers.map((function(e){var a=t(e,N.tabbableOptions),i=n(e,N.tabbableOptions),u=a.length>0?a[0]:void 0,c=a.length>0?a[a.length-1]:void 0,s=i.find((function(e){return o(e)})),l=i.findLast((function(e){return o(e)})),d=!!a.find((function(e){return r(e)>0}));return{container:e,tabbableNodes:a,focusableNodes:i,posTabIndexesFound:d,firstTabbableNode:u,lastTabbableNode:c,firstDomTabbableNode:s,lastDomTabbableNode:l,nextTabbableNode:function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],n=a.indexOf(e);return n<0?t?i.slice(i.indexOf(e)+1).find((function(e){return o(e)})):i.slice(0,i.indexOf(e)).findLast((function(e){return o(e)})):a[n+(t?1:-1)]}}})),O.tabbableGroups=O.containerGroups.filter((function(e){return e.tabbableNodes.length>0})),O.tabbableGroups.length<=0&&!k("fallbackFocus"))throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times");if(O.containerGroups.find((function(e){return e.posTabIndexesFound}))&&O.containerGroups.length>1)throw new Error("At least one node with a positive tabindex was found in one of your focus-trap's multiple containers. Positive tabindexes are only supported in single-container focus-traps.")},P=function e(t){!1!==t&&t!==w.activeElement&&(t&&t.focus?(t.focus({preventScroll:!!N.preventScroll}),O.mostRecentlyFocusedNode=t,function(e){return e.tagName&&"input"===e.tagName.toLowerCase()&&"function"==typeof e.select}(t)&&t.select()):e(T()))},G=function(e){var t=k("setReturnFocus",e);return t||!1!==t&&e},x=function(t){var n=t.target,a=t.event,i=t.isBackward,u=void 0!==i&&i;n=n||m(a),D();var c=null;if(O.tabbableGroups.length>0){var s=E(n,a),d=s>=0?O.containerGroups[s]:void 0;if(s<0)c=u?O.tabbableGroups[O.tabbableGroups.length-1].lastTabbableNode:O.tabbableGroups[0].firstTabbableNode;else if(u){var f=v(O.tabbableGroups,(function(e){var t=e.firstTabbableNode;return n===t}));if(f<0&&(d.container===n||e(n,N.tabbableOptions)&&!o(n,N.tabbableOptions)&&!d.nextTabbableNode(n,!1))&&(f=s),f>=0){var b=0===f?O.tabbableGroups.length-1:f-1,p=O.tabbableGroups[b];c=r(n)>=0?p.lastTabbableNode:p.lastDomTabbableNode}else l(a)||(c=d.nextTabbableNode(n,!1))}else{var y=v(O.tabbableGroups,(function(e){var t=e.lastTabbableNode;return n===t}));if(y<0&&(d.container===n||e(n,N.tabbableOptions)&&!o(n,N.tabbableOptions)&&!d.nextTabbableNode(n))&&(y=s),y>=0){var h=y===O.tabbableGroups.length-1?0:y+1,w=O.tabbableGroups[h];c=r(n)>=0?w.firstTabbableNode:w.firstDomTabbableNode}else l(a)||(c=d.nextTabbableNode(n))}}else c=k("fallbackFocus");return c},j=function(e){var t=m(e);E(t,e)>=0||(p(N.clickOutsideDeactivates,e)?h.deactivate({returnFocus:N.returnFocusOnDeactivate}):p(N.allowOutsideClick,e)||e.preventDefault())},L=function(e){var t=m(e),n=E(t,e)>=0;if(n||t instanceof Document)n&&(O.mostRecentlyFocusedNode=t);else{var o;e.stopImmediatePropagation();var a=!0;if(r(O.mostRecentlyFocusedNode)>0){var i=E(O.mostRecentlyFocusedNode),u=O.containerGroups[i].tabbableNodes;if(u.length>0){var c=u.findIndex((function(e){return e===O.mostRecentlyFocusedNode}));c>=0&&(N.isKeyForward(O.recentNavEvent)?c+1<u.length&&(o=u[c+1],a=!1):c-1>=0&&(o=u[c-1],a=!1))}}else O.containerGroups.some((function(e){return e.tabbableNodes.some((function(e){return r(e)>0}))}))||(a=!1);a&&(o=x({target:O.mostRecentlyFocusedNode,isBackward:N.isKeyBackward(O.recentNavEvent)})),P(o||(O.mostRecentlyFocusedNode||T()))}O.recentNavEvent=void 0},R=function(e){if(!(t=e,"Escape"!==(null==t?void 0:t.key)&&"Esc"!==(null==t?void 0:t.key)&&27!==(null==t?void 0:t.keyCode)||!1===p(N.escapeDeactivates,e)))return e.preventDefault(),void h.deactivate();var t;(N.isKeyForward(e)||N.isKeyBackward(e))&&function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];O.recentNavEvent=e;var n=x({event:e,isBackward:t});n&&(l(e)&&e.preventDefault(),P(n))}(e,N.isKeyBackward(e))},B=function(e){var t=m(e);E(t,e)>=0||p(N.clickOutsideDeactivates,e)||p(N.allowOutsideClick,e)||(e.preventDefault(),e.stopImmediatePropagation())},I=function(){if(O.active)return c(g,h),O.delayInitialFocusTimer=N.delayInitialFocus?b((function(){P(T())})):P(T()),w.addEventListener("focusin",L,!0),w.addEventListener("mousedown",j,{capture:!0,passive:!1}),w.addEventListener("touchstart",j,{capture:!0,passive:!1}),w.addEventListener("click",B,{capture:!0,passive:!1}),w.addEventListener("keydown",R,{capture:!0,passive:!1}),h},C=function(){if(O.active)return w.removeEventListener("focusin",L,!0),w.removeEventListener("mousedown",j,!0),w.removeEventListener("touchstart",j,!0),w.removeEventListener("click",B,!0),w.removeEventListener("keydown",R,!0),h},A="undefined"!=typeof window&&"MutationObserver"in window?new MutationObserver((function(e){e.some((function(e){return Array.from(e.removedNodes).some((function(e){return e===O.mostRecentlyFocusedNode}))}))&&P(T())})):void 0,S=function(){A&&(A.disconnect(),O.active&&!O.paused&&O.containers.map((function(e){A.observe(e,{subtree:!0,childList:!0})})))};return(h={get active(){return O.active},get paused(){return O.paused},activate:function(e){if(O.active)return this;var t=F(e,"onActivate"),n=F(e,"onPostActivate"),o=F(e,"checkCanFocusTrap");o||D(),O.active=!0,O.paused=!1,O.nodeFocusedBeforeActivation=w.activeElement,null==t||t();var r=function(){o&&D(),I(),S(),null==n||n()};return o?(o(O.containers.concat()).then(r,r),this):(r(),this)},deactivate:function(e){if(!O.active)return this;var t=i({onDeactivate:N.onDeactivate,onPostDeactivate:N.onPostDeactivate,checkCanReturnFocus:N.checkCanReturnFocus},e);clearTimeout(O.delayInitialFocusTimer),O.delayInitialFocusTimer=void 0,C(),O.active=!1,O.paused=!1,S(),s(g,h);var n=F(t,"onDeactivate"),o=F(t,"onPostDeactivate"),r=F(t,"checkCanReturnFocus"),a=F(t,"returnFocus","returnFocusOnDeactivate");null==n||n();var u=function(){b((function(){a&&P(G(O.nodeFocusedBeforeActivation)),null==o||o()}))};return a&&r?(r(G(O.nodeFocusedBeforeActivation)).then(u,u),this):(u(),this)},pause:function(e){if(O.paused||!O.active)return this;var t=F(e,"onPause"),n=F(e,"onPostPause");return O.paused=!0,null==t||t(),C(),S(),null==n||n(),this},unpause:function(e){if(!O.paused||!O.active)return this;var t=F(e,"onUnpause"),n=F(e,"onPostUnpause");return O.paused=!1,null==t||t(),D(),I(),S(),null==n||n(),this},updateContainerElements:function(e){var t=[].concat(e).filter(Boolean);return O.containers=t.map((function(e){return"string"==typeof e?w.querySelector(e):e})),O.active&&D(),S(),this}}).updateContainerElements(a),h};export{h as createFocusTrap}; | ||
| //# sourceMappingURL=focus-trap.esm.min.js.map |
| /*! | ||
| * focus-trap 7.4.3 | ||
| * focus-trap 7.5.0 | ||
| * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE | ||
@@ -92,6 +92,6 @@ */ | ||
| var isEscapeEvent = function isEscapeEvent(e) { | ||
| return e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27; | ||
| return (e === null || e === void 0 ? void 0 : e.key) === 'Escape' || (e === null || e === void 0 ? void 0 : e.key) === 'Esc' || (e === null || e === void 0 ? void 0 : e.keyCode) === 27; | ||
| }; | ||
| var isTabEvent = function isTabEvent(e) { | ||
| return e.key === 'Tab' || e.keyCode === 9; | ||
| return (e === null || e === void 0 ? void 0 : e.key) === 'Tab' || (e === null || e === void 0 ? void 0 : e.keyCode) === 9; | ||
| }; | ||
@@ -180,4 +180,7 @@ | ||
| // focusableNodes: Array<HTMLElement>, // empty if none | ||
| // firstTabbableNode: HTMLElement|null, | ||
| // lastTabbableNode: HTMLElement|null, | ||
| // posTabIndexesFound: boolean, | ||
| // firstTabbableNode: HTMLElement|undefined, | ||
| // lastTabbableNode: HTMLElement|undefined, | ||
| // firstDomTabbableNode: HTMLElement|undefined, | ||
| // lastDomTabbableNode: HTMLElement|undefined, | ||
| // nextTabbableNode: (node: HTMLElement, forward: boolean) => HTMLElement|undefined | ||
@@ -199,3 +202,5 @@ // }>} | ||
| // has been delayed during activation | ||
| delayInitialFocusTimer: undefined | ||
| delayInitialFocusTimer: undefined, | ||
| // the most recent KeyboardEvent for the configured nav key (typically [SHIFT+]TAB), if any | ||
| recentNavEvent: undefined | ||
| }; | ||
@@ -219,3 +224,5 @@ var trap; // eslint-disable-line prefer-const -- some private functions reference it, and its methods reference private functions, so we must declare here and define later | ||
| * @param {HTMLElement} element | ||
| * @param {Event} [event] | ||
| * @param {Event} [event] If available, and `element` isn't directly found in any container, | ||
| * the event's composed path is used to see if includes any known trap containers in the | ||
| * case where the element is inside a Shadow DOM. | ||
| * @returns {number} Index of the container in either `state.containers` or | ||
@@ -315,4 +322,16 @@ * `state.containerGroups` (the order/length of these lists are the same); -1 | ||
| // NOTE: if we have tabbable nodes, we must have focusable nodes; focusable nodes | ||
| // are a superset of tabbable nodes | ||
| // are a superset of tabbable nodes since nodes with negative `tabindex` attributes | ||
| // are focusable but not tabbable | ||
| var focusableNodes = tabbable.focusable(container, config.tabbableOptions); | ||
| var firstTabbableNode = tabbableNodes.length > 0 ? tabbableNodes[0] : undefined; | ||
| var lastTabbableNode = tabbableNodes.length > 0 ? tabbableNodes[tabbableNodes.length - 1] : undefined; | ||
| var firstDomTabbableNode = focusableNodes.find(function (node) { | ||
| return tabbable.isTabbable(node); | ||
| }); | ||
| var lastDomTabbableNode = focusableNodes.findLast(function (node) { | ||
| return tabbable.isTabbable(node); | ||
| }); | ||
| var posTabIndexesFound = !!tabbableNodes.find(function (node) { | ||
| return tabbable.getTabIndex(node) > 0; | ||
| }); | ||
| return { | ||
@@ -322,4 +341,19 @@ container: container, | ||
| focusableNodes: focusableNodes, | ||
| firstTabbableNode: tabbableNodes.length > 0 ? tabbableNodes[0] : null, | ||
| lastTabbableNode: tabbableNodes.length > 0 ? tabbableNodes[tabbableNodes.length - 1] : null, | ||
| /** True if at least one node with positive `tabindex` was found in this container. */ | ||
| posTabIndexesFound: posTabIndexesFound, | ||
| /** First tabbable node in container, __tabindex__ order; `undefined` if none. */ | ||
| firstTabbableNode: firstTabbableNode, | ||
| /** Last tabbable node in container, __tabindex__ order; `undefined` if none. */ | ||
| lastTabbableNode: lastTabbableNode, | ||
| // NOTE: DOM order is NOT NECESSARILY "document position" order, but figuring that out | ||
| // would require more than just https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition | ||
| // because that API doesn't work with Shadow DOM as well as it should (@see | ||
| // https://github.com/whatwg/dom/issues/320) and since this first/last is only needed, so far, | ||
| // to address an edge case related to positive tabindex support, this seems like a much easier, | ||
| // "close enough most of the time" alternative for positive tabindexes which should generally | ||
| // be avoided anyway... | ||
| /** First tabbable node in container, __DOM__ order; `undefined` if none. */ | ||
| firstDomTabbableNode: firstDomTabbableNode, | ||
| /** Last tabbable node in container, __DOM__ order; `undefined` if none. */ | ||
| lastDomTabbableNode: lastDomTabbableNode, | ||
| /** | ||
@@ -335,26 +369,20 @@ * Finds the __tabbable__ node that follows the given node in the specified direction, | ||
| 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; | ||
| }); | ||
| var nodeIdx = tabbableNodes.indexOf(node); | ||
| if (nodeIdx < 0) { | ||
| return undefined; | ||
| } | ||
| if (forward) { | ||
| return focusableNodes.slice(nodeIdx + 1).find(function (n) { | ||
| return tabbable.isTabbable(n, config.tabbableOptions); | ||
| // either not tabbable nor focusable, or was focused but not tabbable (negative tabindex): | ||
| // since `node` should at least have been focusable, we assume that's the case and mimic | ||
| // what browsers do, which is set focus to the next node in __document position order__, | ||
| // regardless of positive tabindexes, if any -- and for reasons explained in the NOTE | ||
| // above related to `firstDomTabbable` and `lastDomTabbable` properties, we fall back to | ||
| // basic DOM order | ||
| if (forward) { | ||
| return focusableNodes.slice(focusableNodes.indexOf(node) + 1).find(function (el) { | ||
| return tabbable.isTabbable(el); | ||
| }); | ||
| } | ||
| return focusableNodes.slice(0, focusableNodes.indexOf(node)).findLast(function (el) { | ||
| return tabbable.isTabbable(el); | ||
| }); | ||
| } | ||
| return focusableNodes.slice(0, nodeIdx).reverse().find(function (n) { | ||
| return tabbable.isTabbable(n, config.tabbableOptions); | ||
| }); | ||
| return tabbableNodes[nodeIdx + (forward ? 1 : -1)]; | ||
| } | ||
@@ -372,2 +400,15 @@ }; | ||
| } | ||
| // NOTE: Positive tabindexes are only properly supported in single-container traps because | ||
| // doing it across multiple containers where tabindexes could be all over the place | ||
| // would require Tabbable to support multiple containers, would require additional | ||
| // specialized Shadow DOM support, and would require Tabbable's multi-container support | ||
| // to look at those containers in document position order rather than user-provided | ||
| // order (as they are treated in Focus-trap, for legacy reasons). See discussion on | ||
| // https://github.com/focus-trap/focus-trap/issues/375 for more details. | ||
| if (state.containerGroups.find(function (g) { | ||
| return g.posTabIndexesFound; | ||
| }) && state.containerGroups.length > 1) { | ||
| throw new Error("At least one node with a positive tabindex was found in one of your focus-trap's multiple containers. Positive tabindexes are only supported in single-container focus-traps."); | ||
| } | ||
| }; | ||
@@ -388,2 +429,3 @@ var tryFocus = function tryFocus(node) { | ||
| }); | ||
| // NOTE: focus() API does not trigger focusIn event so set MRU node manually | ||
| state.mostRecentlyFocusedNode = node; | ||
@@ -399,60 +441,19 @@ if (isSelectableInput(node)) { | ||
| // This needs to be done on mousedown and touchstart instead of click | ||
| // so that it precedes the focus event. | ||
| var checkPointerDown = function checkPointerDown(e) { | ||
| var target = getActualTarget(e); | ||
| if (findContainerIndex(target, e) >= 0) { | ||
| // allow the click since it ocurred inside the trap | ||
| return; | ||
| } | ||
| if (valueOrHandler(config.clickOutsideDeactivates, e)) { | ||
| // immediately deactivate the trap | ||
| trap.deactivate({ | ||
| // NOTE: by setting `returnFocus: false`, deactivate() will do nothing, | ||
| // which will result in the outside click setting focus to the node | ||
| // that was clicked (and if not focusable, to "nothing"); by setting | ||
| // `returnFocus: true`, we'll attempt to re-focus the node originally-focused | ||
| // on activation (or the configured `setReturnFocus` node), whether the | ||
| // outside click was on a focusable node or not | ||
| returnFocus: config.returnFocusOnDeactivate | ||
| }); | ||
| return; | ||
| } | ||
| // 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 (valueOrHandler(config.allowOutsideClick, e)) { | ||
| // allow the click outside the trap to take place | ||
| return; | ||
| } | ||
| // otherwise, prevent the click | ||
| e.preventDefault(); | ||
| }; | ||
| // In case focus escapes the trap for some strange reason, pull it back in. | ||
| var checkFocusIn = function checkFocusIn(e) { | ||
| var target = getActualTarget(e); | ||
| var targetContained = findContainerIndex(target, e) >= 0; | ||
| // In Firefox when you Tab out of an iframe the Document is briefly focused. | ||
| if (targetContained || target instanceof Document) { | ||
| if (targetContained) { | ||
| state.mostRecentlyFocusedNode = target; | ||
| } | ||
| } else { | ||
| // escaped! pull it back in to where it just left | ||
| e.stopImmediatePropagation(); | ||
| tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode()); | ||
| } | ||
| }; | ||
| // Hijack key nav 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. | ||
| var checkKeyNav = function checkKeyNav(event) { | ||
| var isBackward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; | ||
| var target = getActualTarget(event); | ||
| /** | ||
| * Finds the next node (in either direction) where focus should move according to a | ||
| * keyboard focus-in event. | ||
| * @param {Object} params | ||
| * @param {Node} [params.target] Known target __from which__ to navigate, if any. | ||
| * @param {KeyboardEvent|FocusEvent} [params.event] Event to use if `target` isn't known (event | ||
| * will be used to determine the `target`). Ignored if `target` is specified. | ||
| * @param {boolean} [params.isBackward] True if focus should move backward. | ||
| * @returns {Node|undefined} The next node, or `undefined` if a next node couldn't be | ||
| * determined given the current state of the trap. | ||
| */ | ||
| var findNextNavNode = function findNextNavNode(_ref2) { | ||
| var target = _ref2.target, | ||
| event = _ref2.event, | ||
| _ref2$isBackward = _ref2.isBackward, | ||
| isBackward = _ref2$isBackward === void 0 ? false : _ref2$isBackward; | ||
| target = target || getActualTarget(event); | ||
| updateTabbableNodes(); | ||
@@ -480,4 +481,4 @@ var destinationNode = null; | ||
| // is the target the first tabbable node in a group? | ||
| var startOfGroupIndex = findIndex(state.tabbableGroups, function (_ref2) { | ||
| var firstTabbableNode = _ref2.firstTabbableNode; | ||
| var startOfGroupIndex = findIndex(state.tabbableGroups, function (_ref3) { | ||
| var firstTabbableNode = _ref3.firstTabbableNode; | ||
| return target === firstTabbableNode; | ||
@@ -500,3 +501,3 @@ }); | ||
| var destinationGroup = state.tabbableGroups[destinationGroupIndex]; | ||
| destinationNode = destinationGroup.lastTabbableNode; | ||
| destinationNode = tabbable.getTabIndex(target) >= 0 ? destinationGroup.lastTabbableNode : destinationGroup.lastDomTabbableNode; | ||
| } else if (!isTabEvent(event)) { | ||
@@ -511,4 +512,4 @@ // user must have customized the nav keys so we have to move focus manually _within_ | ||
| // is the target the last tabbable node in a group? | ||
| var lastOfGroupIndex = findIndex(state.tabbableGroups, function (_ref3) { | ||
| var lastTabbableNode = _ref3.lastTabbableNode; | ||
| var lastOfGroupIndex = findIndex(state.tabbableGroups, function (_ref4) { | ||
| var lastTabbableNode = _ref4.lastTabbableNode; | ||
| return target === lastTabbableNode; | ||
@@ -531,3 +532,3 @@ }); | ||
| var _destinationGroup = state.tabbableGroups[_destinationGroupIndex]; | ||
| destinationNode = _destinationGroup.firstTabbableNode; | ||
| destinationNode = tabbable.getTabIndex(target) >= 0 ? _destinationGroup.firstTabbableNode : _destinationGroup.firstDomTabbableNode; | ||
| } else if (!isTabEvent(event)) { | ||
@@ -544,2 +545,141 @@ // user must have customized the nav keys so we have to move focus manually _within_ | ||
| } | ||
| return destinationNode; | ||
| }; | ||
| // This needs to be done on mousedown and touchstart instead of click | ||
| // so that it precedes the focus event. | ||
| var checkPointerDown = function checkPointerDown(e) { | ||
| var target = getActualTarget(e); | ||
| if (findContainerIndex(target, e) >= 0) { | ||
| // allow the click since it ocurred inside the trap | ||
| return; | ||
| } | ||
| if (valueOrHandler(config.clickOutsideDeactivates, e)) { | ||
| // immediately deactivate the trap | ||
| trap.deactivate({ | ||
| // NOTE: by setting `returnFocus: false`, deactivate() will do nothing, | ||
| // which will result in the outside click setting focus to the node | ||
| // that was clicked (and if not focusable, to "nothing"); by setting | ||
| // `returnFocus: true`, we'll attempt to re-focus the node originally-focused | ||
| // on activation (or the configured `setReturnFocus` node), whether the | ||
| // outside click was on a focusable node or not | ||
| returnFocus: config.returnFocusOnDeactivate | ||
| }); | ||
| return; | ||
| } | ||
| // 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 (valueOrHandler(config.allowOutsideClick, e)) { | ||
| // allow the click outside the trap to take place | ||
| return; | ||
| } | ||
| // otherwise, prevent the click | ||
| e.preventDefault(); | ||
| }; | ||
| // In case focus escapes the trap for some strange reason, pull it back in. | ||
| // NOTE: the focusIn event is NOT cancelable, so if focus escapes, it may cause unexpected | ||
| // scrolling if the node that got focused was out of view; there's nothing we can do to | ||
| // prevent that from happening by the time we discover that focus escaped | ||
| var checkFocusIn = function checkFocusIn(event) { | ||
| var target = getActualTarget(event); | ||
| var targetContained = findContainerIndex(target, event) >= 0; | ||
| // In Firefox when you Tab out of an iframe the Document is briefly focused. | ||
| if (targetContained || target instanceof Document) { | ||
| if (targetContained) { | ||
| state.mostRecentlyFocusedNode = target; | ||
| } | ||
| } else { | ||
| // escaped! pull it back in to where it just left | ||
| event.stopImmediatePropagation(); | ||
| // focus will escape if the MRU node had a positive tab index and user tried to nav forward; | ||
| // it will also escape if the MRU node had a 0 tab index and user tried to nav backward | ||
| // toward a node with a positive tab index | ||
| var nextNode; // next node to focus, if we find one | ||
| var navAcrossContainers = true; | ||
| if (tabbable.getTabIndex(state.mostRecentlyFocusedNode) > 0) { | ||
| // MRU container index must be >=0 otherwise we wouldn't have it as an MRU node... | ||
| var mruContainerIdx = findContainerIndex(state.mostRecentlyFocusedNode); | ||
| // there MAY not be any tabbable nodes in the container if there are at least 2 containers | ||
| // and the MRU node is focusable but not tabbable (focus-trap requires at least 1 container | ||
| // with at least one tabbable node in order to function, so this could be the other container | ||
| // with nothing tabbable in it) | ||
| var tabbableNodes = state.containerGroups[mruContainerIdx].tabbableNodes; | ||
| if (tabbableNodes.length > 0) { | ||
| // MRU tab index MAY not be found if the MRU node is focusable but not tabbable | ||
| var mruTabIdx = tabbableNodes.findIndex(function (node) { | ||
| return node === state.mostRecentlyFocusedNode; | ||
| }); | ||
| if (mruTabIdx >= 0) { | ||
| if (config.isKeyForward(state.recentNavEvent)) { | ||
| if (mruTabIdx + 1 < tabbableNodes.length) { | ||
| nextNode = tabbableNodes[mruTabIdx + 1]; | ||
| navAcrossContainers = false; | ||
| } | ||
| // else, don't wrap within the container as focus should move to next/previous | ||
| // container | ||
| } else { | ||
| if (mruTabIdx - 1 >= 0) { | ||
| nextNode = tabbableNodes[mruTabIdx - 1]; | ||
| navAcrossContainers = false; | ||
| } | ||
| // else, don't wrap within the container as focus should move to next/previous | ||
| // container | ||
| } | ||
| // else, don't find in container order without considering direction too | ||
| } | ||
| } | ||
| // else, no tabbable nodes in that container (which means we must have at least one other | ||
| // container with at least one tabbable node in it, otherwise focus-trap would've thrown | ||
| // an error the last time updateTabbableNodes() was run): find next node among all known | ||
| // containers | ||
| } else { | ||
| // check to see if there's at least one tabbable node with a positive tab index inside | ||
| // the trap because focus seems to escape when navigating backward from a tabbable node | ||
| // with tabindex=0 when this is the case (instead of wrapping to the tabbable node with | ||
| // the greatest positive tab index like it should) | ||
| if (!state.containerGroups.some(function (g) { | ||
| return g.tabbableNodes.some(function (n) { | ||
| return tabbable.getTabIndex(n) > 0; | ||
| }); | ||
| })) { | ||
| // no containers with tabbable nodes with positive tab indexes which means the focus | ||
| // escaped for some other reason and we should just execute the fallback to the | ||
| // MRU node or initial focus node, if any | ||
| navAcrossContainers = false; | ||
| } | ||
| } | ||
| if (navAcrossContainers) { | ||
| nextNode = findNextNavNode({ | ||
| // move FROM the MRU node, not event-related node (which will be the node that is | ||
| // outside the trap causing the focus escape we're trying to fix) | ||
| target: state.mostRecentlyFocusedNode, | ||
| isBackward: config.isKeyBackward(state.recentNavEvent) | ||
| }); | ||
| } | ||
| if (nextNode) { | ||
| tryFocus(nextNode); | ||
| } else { | ||
| tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode()); | ||
| } | ||
| } | ||
| state.recentNavEvent = undefined; // clear | ||
| }; | ||
| // Hijack key nav 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. | ||
| var checkKeyNav = function checkKeyNav(event) { | ||
| var isBackward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; | ||
| state.recentNavEvent = event; | ||
| var destinationNode = findNextNavNode({ | ||
| event: event, | ||
| isBackward: isBackward | ||
| }); | ||
| if (destinationNode) { | ||
@@ -546,0 +686,0 @@ if (isTabEvent(event)) { |
| /*! | ||
| * focus-trap 7.4.3 | ||
| * focus-trap 7.5.0 | ||
| * @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){for(var n=1;n<arguments.length;n++){var r=null!=arguments[n]?arguments[n]:{};n%2?t(Object(r),!0).forEach((function(t){a(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}function a(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var a=n.call(e,t||"default");if("object"!=typeof a)return a;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var r=function(e,t){if(e.length>0){var n=e[e.length-1];n!==t&&n.pause()}var a=e.indexOf(t);-1===a||e.splice(a,1),e.push(t)},o=function(e,t){var n=e.indexOf(t);-1!==n&&e.splice(n,1),e.length>0&&e[e.length-1].unpause()},i=function(e){return"Tab"===e.key||9===e.keyCode},u=function(e){return i(e)&&!e.shiftKey},c=function(e){return i(e)&&e.shiftKey},s=function(e){return setTimeout(e,0)},l=function(e,t){var n=-1;return e.every((function(e,a){return!t(e)||(n=a,!1)})),n},b=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},v=[];exports.createFocusTrap=function(t,a){var d,p=(null==a?void 0:a.document)||document,y=(null==a?void 0:a.trapStack)||v,m=n({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0,isKeyForward:u,isKeyBackward:c},a),h={containers:[],containerGroups:[],tabbableGroups:[],nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1,delayInitialFocusTimer:void 0},w=function(e,t,n){return e&&void 0!==e[t]?e[t]:m[n||t]},g=function(e,t){var n="function"==typeof(null==t?void 0:t.composedPath)?t.composedPath():void 0;return h.containerGroups.findIndex((function(t){var a=t.container,r=t.tabbableNodes;return a.contains(e)||(null==n?void 0:n.includes(a))||r.find((function(t){return t===e}))}))},O=function(e){var t=m[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(!0===t&&(t=void 0),!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=p.querySelector(t)))throw new Error("`".concat(e,"` as selector refers to no known node"));return o},F=function(){var t=O("initialFocus");if(!1===t)return!1;if(void 0===t||!e.isFocusable(t,m.tabbableOptions))if(g(p.activeElement)>=0)t=p.activeElement;else{var n=h.tabbableGroups[0];t=n&&n.firstTabbableNode||O("fallbackFocus")}if(!t)throw new Error("Your focus-trap needs to have at least one focusable element");return t},T=function(){if(h.containerGroups=h.containers.map((function(t){var n=e.tabbable(t,m.tabbableOptions),a=e.focusable(t,m.tabbableOptions);return{container:t,tabbableNodes:n,focusableNodes:a,firstTabbableNode:n.length>0?n[0]:null,lastTabbableNode:n.length>0?n[n.length-1]:null,nextTabbableNode:function(t){var n=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],r=a.findIndex((function(e){return e===t}));if(!(r<0))return n?a.slice(r+1).find((function(t){return e.isTabbable(t,m.tabbableOptions)})):a.slice(0,r).reverse().find((function(t){return e.isTabbable(t,m.tabbableOptions)}))}}})),h.tabbableGroups=h.containerGroups.filter((function(e){return e.tabbableNodes.length>0})),h.tabbableGroups.length<=0&&!O("fallbackFocus"))throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times")},N=function e(t){!1!==t&&t!==p.activeElement&&(t&&t.focus?(t.focus({preventScroll:!!m.preventScroll}),h.mostRecentlyFocusedNode=t,function(e){return e.tagName&&"input"===e.tagName.toLowerCase()&&"function"==typeof e.select}(t)&&t.select()):e(F()))},k=function(e){var t=O("setReturnFocus",e);return t||!1!==t&&e},P=function(e){var t=f(e);g(t,e)>=0||(b(m.clickOutsideDeactivates,e)?d.deactivate({returnFocus:m.returnFocusOnDeactivate}):b(m.allowOutsideClick,e)||e.preventDefault())},E=function(e){var t=f(e),n=g(t,e)>=0;n||t instanceof Document?n&&(h.mostRecentlyFocusedNode=t):(e.stopImmediatePropagation(),N(h.mostRecentlyFocusedNode||F()))},D=function(t){if(!(n=t,"Escape"!==n.key&&"Esc"!==n.key&&27!==n.keyCode||!1===b(m.escapeDeactivates,t)))return t.preventDefault(),void d.deactivate();var n;(m.isKeyForward(t)||m.isKeyBackward(t))&&function(t){var n=arguments.length>1&&void 0!==arguments[1]&&arguments[1],a=f(t);T();var r=null;if(h.tabbableGroups.length>0){var o=g(a,t),u=o>=0?h.containerGroups[o]:void 0;if(o<0)r=n?h.tabbableGroups[h.tabbableGroups.length-1].lastTabbableNode:h.tabbableGroups[0].firstTabbableNode;else if(n){var c=l(h.tabbableGroups,(function(e){var t=e.firstTabbableNode;return a===t}));if(c<0&&(u.container===a||e.isFocusable(a,m.tabbableOptions)&&!e.isTabbable(a,m.tabbableOptions)&&!u.nextTabbableNode(a,!1))&&(c=o),c>=0){var s=0===c?h.tabbableGroups.length-1:c-1;r=h.tabbableGroups[s].lastTabbableNode}else i(t)||(r=u.nextTabbableNode(a,!1))}else{var b=l(h.tabbableGroups,(function(e){var t=e.lastTabbableNode;return a===t}));if(b<0&&(u.container===a||e.isFocusable(a,m.tabbableOptions)&&!e.isTabbable(a,m.tabbableOptions)&&!u.nextTabbableNode(a))&&(b=o),b>=0){var v=b===h.tabbableGroups.length-1?0:b+1;r=h.tabbableGroups[v].firstTabbableNode}else i(t)||(r=u.nextTabbableNode(a))}}else r=O("fallbackFocus");r&&(i(t)&&t.preventDefault(),N(r))}(t,m.isKeyBackward(t))},G=function(e){var t=f(e);g(t,e)>=0||b(m.clickOutsideDeactivates,e)||b(m.allowOutsideClick,e)||(e.preventDefault(),e.stopImmediatePropagation())},j=function(){if(h.active)return r(y,d),h.delayInitialFocusTimer=m.delayInitialFocus?s((function(){N(F())})):N(F()),p.addEventListener("focusin",E,!0),p.addEventListener("mousedown",P,{capture:!0,passive:!1}),p.addEventListener("touchstart",P,{capture:!0,passive:!1}),p.addEventListener("click",G,{capture:!0,passive:!1}),p.addEventListener("keydown",D,{capture:!0,passive:!1}),d},L=function(){if(h.active)return p.removeEventListener("focusin",E,!0),p.removeEventListener("mousedown",P,!0),p.removeEventListener("touchstart",P,!0),p.removeEventListener("click",G,!0),p.removeEventListener("keydown",D,!0),d},x="undefined"!=typeof window&&"MutationObserver"in window?new MutationObserver((function(e){e.some((function(e){return Array.from(e.removedNodes).some((function(e){return e===h.mostRecentlyFocusedNode}))}))&&N(F())})):void 0,C=function(){x&&(x.disconnect(),h.active&&!h.paused&&h.containers.map((function(e){x.observe(e,{subtree:!0,childList:!0})})))};return(d={get active(){return h.active},get paused(){return h.paused},activate:function(e){if(h.active)return this;var t=w(e,"onActivate"),n=w(e,"onPostActivate"),a=w(e,"checkCanFocusTrap");a||T(),h.active=!0,h.paused=!1,h.nodeFocusedBeforeActivation=p.activeElement,null==t||t();var r=function(){a&&T(),j(),C(),null==n||n()};return a?(a(h.containers.concat()).then(r,r),this):(r(),this)},deactivate:function(e){if(!h.active)return this;var t=n({onDeactivate:m.onDeactivate,onPostDeactivate:m.onPostDeactivate,checkCanReturnFocus:m.checkCanReturnFocus},e);clearTimeout(h.delayInitialFocusTimer),h.delayInitialFocusTimer=void 0,L(),h.active=!1,h.paused=!1,C(),o(y,d);var a=w(t,"onDeactivate"),r=w(t,"onPostDeactivate"),i=w(t,"checkCanReturnFocus"),u=w(t,"returnFocus","returnFocusOnDeactivate");null==a||a();var c=function(){s((function(){u&&N(k(h.nodeFocusedBeforeActivation)),null==r||r()}))};return u&&i?(i(k(h.nodeFocusedBeforeActivation)).then(c,c),this):(c(),this)},pause:function(e){if(h.paused||!h.active)return this;var t=w(e,"onPause"),n=w(e,"onPostPause");return h.paused=!0,null==t||t(),L(),C(),null==n||n(),this},unpause:function(e){if(!h.paused||!h.active)return this;var t=w(e,"onUnpause"),n=w(e,"onPostUnpause");return h.paused=!1,null==t||t(),T(),j(),C(),null==n||n(),this},updateContainerElements:function(e){var t=[].concat(e).filter(Boolean);return h.containers=t.map((function(e){return"string"==typeof e?p.querySelector(e):e})),h.active&&T(),C(),this}}).updateContainerElements(t),d}; | ||
| "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 o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function n(e){for(var n=1;n<arguments.length;n++){var a=null!=arguments[n]?arguments[n]:{};n%2?t(Object(a),!0).forEach((function(t){o(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):t(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function o(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t||"default");if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var a=function(e,t){if(e.length>0){var n=e[e.length-1];n!==t&&n.pause()}var o=e.indexOf(t);-1===o||e.splice(o,1),e.push(t)},r=function(e,t){var n=e.indexOf(t);-1!==n&&e.splice(n,1),e.length>0&&e[e.length-1].unpause()},i=function(e){return"Tab"===(null==e?void 0:e.key)||9===(null==e?void 0:e.keyCode)},u=function(e){return i(e)&&!e.shiftKey},c=function(e){return i(e)&&e.shiftKey},s=function(e){return setTimeout(e,0)},l=function(e,t){var n=-1;return e.every((function(e,o){return!t(e)||(n=o,!1)})),n},b=function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),o=1;o<t;o++)n[o-1]=arguments[o];return"function"==typeof e?e.apply(void 0,n):e},d=function(e){return e.target.shadowRoot&&"function"==typeof e.composedPath?e.composedPath()[0]:e.target},f=[];exports.createFocusTrap=function(t,o){var v,p=(null==o?void 0:o.document)||document,m=(null==o?void 0:o.trapStack)||f,y=n({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0,isKeyForward:u,isKeyBackward:c},o),h={containers:[],containerGroups:[],tabbableGroups:[],nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1,delayInitialFocusTimer:void 0,recentNavEvent:void 0},g=function(e,t,n){return e&&void 0!==e[t]?e[t]:y[n||t]},w=function(e,t){var n="function"==typeof(null==t?void 0:t.composedPath)?t.composedPath():void 0;return h.containerGroups.findIndex((function(t){var o=t.container,a=t.tabbableNodes;return o.contains(e)||(null==n?void 0:n.includes(o))||a.find((function(t){return t===e}))}))},F=function(e){var t=y[e];if("function"==typeof t){for(var n=arguments.length,o=new Array(n>1?n-1:0),a=1;a<n;a++)o[a-1]=arguments[a];t=t.apply(void 0,o)}if(!0===t&&(t=void 0),!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=p.querySelector(t)))throw new Error("`".concat(e,"` as selector refers to no known node"));return r},N=function(){var t=F("initialFocus");if(!1===t)return!1;if(void 0===t||!e.isFocusable(t,y.tabbableOptions))if(w(p.activeElement)>=0)t=p.activeElement;else{var n=h.tabbableGroups[0];t=n&&n.firstTabbableNode||F("fallbackFocus")}if(!t)throw new Error("Your focus-trap needs to have at least one focusable element");return t},T=function(){if(h.containerGroups=h.containers.map((function(t){var n=e.tabbable(t,y.tabbableOptions),o=e.focusable(t,y.tabbableOptions),a=n.length>0?n[0]:void 0,r=n.length>0?n[n.length-1]:void 0,i=o.find((function(t){return e.isTabbable(t)})),u=o.findLast((function(t){return e.isTabbable(t)})),c=!!n.find((function(t){return e.getTabIndex(t)>0}));return{container:t,tabbableNodes:n,focusableNodes:o,posTabIndexesFound:c,firstTabbableNode:a,lastTabbableNode:r,firstDomTabbableNode:i,lastDomTabbableNode:u,nextTabbableNode:function(t){var a=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],r=n.indexOf(t);return r<0?a?o.slice(o.indexOf(t)+1).find((function(t){return e.isTabbable(t)})):o.slice(0,o.indexOf(t)).findLast((function(t){return e.isTabbable(t)})):n[r+(a?1:-1)]}}})),h.tabbableGroups=h.containerGroups.filter((function(e){return e.tabbableNodes.length>0})),h.tabbableGroups.length<=0&&!F("fallbackFocus"))throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times");if(h.containerGroups.find((function(e){return e.posTabIndexesFound}))&&h.containerGroups.length>1)throw new Error("At least one node with a positive tabindex was found in one of your focus-trap's multiple containers. Positive tabindexes are only supported in single-container focus-traps.")},O=function e(t){!1!==t&&t!==p.activeElement&&(t&&t.focus?(t.focus({preventScroll:!!y.preventScroll}),h.mostRecentlyFocusedNode=t,function(e){return e.tagName&&"input"===e.tagName.toLowerCase()&&"function"==typeof e.select}(t)&&t.select()):e(N()))},E=function(e){var t=F("setReturnFocus",e);return t||!1!==t&&e},k=function(t){var n=t.target,o=t.event,a=t.isBackward,r=void 0!==a&&a;n=n||d(o),T();var u=null;if(h.tabbableGroups.length>0){var c=w(n,o),s=c>=0?h.containerGroups[c]:void 0;if(c<0)u=r?h.tabbableGroups[h.tabbableGroups.length-1].lastTabbableNode:h.tabbableGroups[0].firstTabbableNode;else if(r){var b=l(h.tabbableGroups,(function(e){var t=e.firstTabbableNode;return n===t}));if(b<0&&(s.container===n||e.isFocusable(n,y.tabbableOptions)&&!e.isTabbable(n,y.tabbableOptions)&&!s.nextTabbableNode(n,!1))&&(b=c),b>=0){var f=0===b?h.tabbableGroups.length-1:b-1,v=h.tabbableGroups[f];u=e.getTabIndex(n)>=0?v.lastTabbableNode:v.lastDomTabbableNode}else i(o)||(u=s.nextTabbableNode(n,!1))}else{var p=l(h.tabbableGroups,(function(e){var t=e.lastTabbableNode;return n===t}));if(p<0&&(s.container===n||e.isFocusable(n,y.tabbableOptions)&&!e.isTabbable(n,y.tabbableOptions)&&!s.nextTabbableNode(n))&&(p=c),p>=0){var m=p===h.tabbableGroups.length-1?0:p+1,g=h.tabbableGroups[m];u=e.getTabIndex(n)>=0?g.firstTabbableNode:g.firstDomTabbableNode}else i(o)||(u=s.nextTabbableNode(n))}}else u=F("fallbackFocus");return u},P=function(e){var t=d(e);w(t,e)>=0||(b(y.clickOutsideDeactivates,e)?v.deactivate({returnFocus:y.returnFocusOnDeactivate}):b(y.allowOutsideClick,e)||e.preventDefault())},D=function(t){var n=d(t),o=w(n,t)>=0;if(o||n instanceof Document)o&&(h.mostRecentlyFocusedNode=n);else{var a;t.stopImmediatePropagation();var r=!0;if(e.getTabIndex(h.mostRecentlyFocusedNode)>0){var i=w(h.mostRecentlyFocusedNode),u=h.containerGroups[i].tabbableNodes;if(u.length>0){var c=u.findIndex((function(e){return e===h.mostRecentlyFocusedNode}));c>=0&&(y.isKeyForward(h.recentNavEvent)?c+1<u.length&&(a=u[c+1],r=!1):c-1>=0&&(a=u[c-1],r=!1))}}else h.containerGroups.some((function(t){return t.tabbableNodes.some((function(t){return e.getTabIndex(t)>0}))}))||(r=!1);r&&(a=k({target:h.mostRecentlyFocusedNode,isBackward:y.isKeyBackward(h.recentNavEvent)})),O(a||(h.mostRecentlyFocusedNode||N()))}h.recentNavEvent=void 0},x=function(e){if(!(t=e,"Escape"!==(null==t?void 0:t.key)&&"Esc"!==(null==t?void 0:t.key)&&27!==(null==t?void 0:t.keyCode)||!1===b(y.escapeDeactivates,e)))return e.preventDefault(),void v.deactivate();var t;(y.isKeyForward(e)||y.isKeyBackward(e))&&function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];h.recentNavEvent=e;var n=k({event:e,isBackward:t});n&&(i(e)&&e.preventDefault(),O(n))}(e,y.isKeyBackward(e))},G=function(e){var t=d(e);w(t,e)>=0||b(y.clickOutsideDeactivates,e)||b(y.allowOutsideClick,e)||(e.preventDefault(),e.stopImmediatePropagation())},I=function(){if(h.active)return a(m,v),h.delayInitialFocusTimer=y.delayInitialFocus?s((function(){O(N())})):O(N()),p.addEventListener("focusin",D,!0),p.addEventListener("mousedown",P,{capture:!0,passive:!1}),p.addEventListener("touchstart",P,{capture:!0,passive:!1}),p.addEventListener("click",G,{capture:!0,passive:!1}),p.addEventListener("keydown",x,{capture:!0,passive:!1}),v},j=function(){if(h.active)return p.removeEventListener("focusin",D,!0),p.removeEventListener("mousedown",P,!0),p.removeEventListener("touchstart",P,!0),p.removeEventListener("click",G,!0),p.removeEventListener("keydown",x,!0),v},L="undefined"!=typeof window&&"MutationObserver"in window?new MutationObserver((function(e){e.some((function(e){return Array.from(e.removedNodes).some((function(e){return e===h.mostRecentlyFocusedNode}))}))&&O(N())})):void 0,R=function(){L&&(L.disconnect(),h.active&&!h.paused&&h.containers.map((function(e){L.observe(e,{subtree:!0,childList:!0})})))};return(v={get active(){return h.active},get paused(){return h.paused},activate:function(e){if(h.active)return this;var t=g(e,"onActivate"),n=g(e,"onPostActivate"),o=g(e,"checkCanFocusTrap");o||T(),h.active=!0,h.paused=!1,h.nodeFocusedBeforeActivation=p.activeElement,null==t||t();var a=function(){o&&T(),I(),R(),null==n||n()};return o?(o(h.containers.concat()).then(a,a),this):(a(),this)},deactivate:function(e){if(!h.active)return this;var t=n({onDeactivate:y.onDeactivate,onPostDeactivate:y.onPostDeactivate,checkCanReturnFocus:y.checkCanReturnFocus},e);clearTimeout(h.delayInitialFocusTimer),h.delayInitialFocusTimer=void 0,j(),h.active=!1,h.paused=!1,R(),r(m,v);var o=g(t,"onDeactivate"),a=g(t,"onPostDeactivate"),i=g(t,"checkCanReturnFocus"),u=g(t,"returnFocus","returnFocusOnDeactivate");null==o||o();var c=function(){s((function(){u&&O(E(h.nodeFocusedBeforeActivation)),null==a||a()}))};return u&&i?(i(E(h.nodeFocusedBeforeActivation)).then(c,c),this):(c(),this)},pause:function(e){if(h.paused||!h.active)return this;var t=g(e,"onPause"),n=g(e,"onPostPause");return h.paused=!0,null==t||t(),j(),R(),null==n||n(),this},unpause:function(e){if(!h.paused||!h.active)return this;var t=g(e,"onUnpause"),n=g(e,"onPostUnpause");return h.paused=!1,null==t||t(),T(),I(),R(),null==n||n(),this},updateContainerElements:function(e){var t=[].concat(e).filter(Boolean);return h.containers=t.map((function(e){return"string"==typeof e?p.querySelector(e):e})),h.active&&T(),R(),this}}).updateContainerElements(t),v}; | ||
| //# sourceMappingURL=focus-trap.min.js.map |
| /*! | ||
| * focus-trap 7.4.3 | ||
| * focus-trap 7.5.0 | ||
| * @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE | ||
@@ -97,6 +97,6 @@ */ | ||
| var isEscapeEvent = function isEscapeEvent(e) { | ||
| return e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27; | ||
| return (e === null || e === void 0 ? void 0 : e.key) === 'Escape' || (e === null || e === void 0 ? void 0 : e.key) === 'Esc' || (e === null || e === void 0 ? void 0 : e.keyCode) === 27; | ||
| }; | ||
| var isTabEvent = function isTabEvent(e) { | ||
| return e.key === 'Tab' || e.keyCode === 9; | ||
| return (e === null || e === void 0 ? void 0 : e.key) === 'Tab' || (e === null || e === void 0 ? void 0 : e.keyCode) === 9; | ||
| }; | ||
@@ -185,4 +185,7 @@ | ||
| // focusableNodes: Array<HTMLElement>, // empty if none | ||
| // firstTabbableNode: HTMLElement|null, | ||
| // lastTabbableNode: HTMLElement|null, | ||
| // posTabIndexesFound: boolean, | ||
| // firstTabbableNode: HTMLElement|undefined, | ||
| // lastTabbableNode: HTMLElement|undefined, | ||
| // firstDomTabbableNode: HTMLElement|undefined, | ||
| // lastDomTabbableNode: HTMLElement|undefined, | ||
| // nextTabbableNode: (node: HTMLElement, forward: boolean) => HTMLElement|undefined | ||
@@ -204,3 +207,5 @@ // }>} | ||
| // has been delayed during activation | ||
| delayInitialFocusTimer: undefined | ||
| delayInitialFocusTimer: undefined, | ||
| // the most recent KeyboardEvent for the configured nav key (typically [SHIFT+]TAB), if any | ||
| recentNavEvent: undefined | ||
| }; | ||
@@ -224,3 +229,5 @@ var trap; // eslint-disable-line prefer-const -- some private functions reference it, and its methods reference private functions, so we must declare here and define later | ||
| * @param {HTMLElement} element | ||
| * @param {Event} [event] | ||
| * @param {Event} [event] If available, and `element` isn't directly found in any container, | ||
| * the event's composed path is used to see if includes any known trap containers in the | ||
| * case where the element is inside a Shadow DOM. | ||
| * @returns {number} Index of the container in either `state.containers` or | ||
@@ -320,4 +327,16 @@ * `state.containerGroups` (the order/length of these lists are the same); -1 | ||
| // NOTE: if we have tabbable nodes, we must have focusable nodes; focusable nodes | ||
| // are a superset of tabbable nodes | ||
| // are a superset of tabbable nodes since nodes with negative `tabindex` attributes | ||
| // are focusable but not tabbable | ||
| var focusableNodes = tabbable.focusable(container, config.tabbableOptions); | ||
| var firstTabbableNode = tabbableNodes.length > 0 ? tabbableNodes[0] : undefined; | ||
| var lastTabbableNode = tabbableNodes.length > 0 ? tabbableNodes[tabbableNodes.length - 1] : undefined; | ||
| var firstDomTabbableNode = focusableNodes.find(function (node) { | ||
| return tabbable.isTabbable(node); | ||
| }); | ||
| var lastDomTabbableNode = focusableNodes.findLast(function (node) { | ||
| return tabbable.isTabbable(node); | ||
| }); | ||
| var posTabIndexesFound = !!tabbableNodes.find(function (node) { | ||
| return tabbable.getTabIndex(node) > 0; | ||
| }); | ||
| return { | ||
@@ -327,4 +346,19 @@ container: container, | ||
| focusableNodes: focusableNodes, | ||
| firstTabbableNode: tabbableNodes.length > 0 ? tabbableNodes[0] : null, | ||
| lastTabbableNode: tabbableNodes.length > 0 ? tabbableNodes[tabbableNodes.length - 1] : null, | ||
| /** True if at least one node with positive `tabindex` was found in this container. */ | ||
| posTabIndexesFound: posTabIndexesFound, | ||
| /** First tabbable node in container, __tabindex__ order; `undefined` if none. */ | ||
| firstTabbableNode: firstTabbableNode, | ||
| /** Last tabbable node in container, __tabindex__ order; `undefined` if none. */ | ||
| lastTabbableNode: lastTabbableNode, | ||
| // NOTE: DOM order is NOT NECESSARILY "document position" order, but figuring that out | ||
| // would require more than just https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition | ||
| // because that API doesn't work with Shadow DOM as well as it should (@see | ||
| // https://github.com/whatwg/dom/issues/320) and since this first/last is only needed, so far, | ||
| // to address an edge case related to positive tabindex support, this seems like a much easier, | ||
| // "close enough most of the time" alternative for positive tabindexes which should generally | ||
| // be avoided anyway... | ||
| /** First tabbable node in container, __DOM__ order; `undefined` if none. */ | ||
| firstDomTabbableNode: firstDomTabbableNode, | ||
| /** Last tabbable node in container, __DOM__ order; `undefined` if none. */ | ||
| lastDomTabbableNode: lastDomTabbableNode, | ||
| /** | ||
@@ -340,26 +374,20 @@ * Finds the __tabbable__ node that follows the given node in the specified direction, | ||
| 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; | ||
| }); | ||
| var nodeIdx = tabbableNodes.indexOf(node); | ||
| if (nodeIdx < 0) { | ||
| return undefined; | ||
| } | ||
| if (forward) { | ||
| return focusableNodes.slice(nodeIdx + 1).find(function (n) { | ||
| return tabbable.isTabbable(n, config.tabbableOptions); | ||
| // either not tabbable nor focusable, or was focused but not tabbable (negative tabindex): | ||
| // since `node` should at least have been focusable, we assume that's the case and mimic | ||
| // what browsers do, which is set focus to the next node in __document position order__, | ||
| // regardless of positive tabindexes, if any -- and for reasons explained in the NOTE | ||
| // above related to `firstDomTabbable` and `lastDomTabbable` properties, we fall back to | ||
| // basic DOM order | ||
| if (forward) { | ||
| return focusableNodes.slice(focusableNodes.indexOf(node) + 1).find(function (el) { | ||
| return tabbable.isTabbable(el); | ||
| }); | ||
| } | ||
| return focusableNodes.slice(0, focusableNodes.indexOf(node)).findLast(function (el) { | ||
| return tabbable.isTabbable(el); | ||
| }); | ||
| } | ||
| return focusableNodes.slice(0, nodeIdx).reverse().find(function (n) { | ||
| return tabbable.isTabbable(n, config.tabbableOptions); | ||
| }); | ||
| return tabbableNodes[nodeIdx + (forward ? 1 : -1)]; | ||
| } | ||
@@ -377,2 +405,15 @@ }; | ||
| } | ||
| // NOTE: Positive tabindexes are only properly supported in single-container traps because | ||
| // doing it across multiple containers where tabindexes could be all over the place | ||
| // would require Tabbable to support multiple containers, would require additional | ||
| // specialized Shadow DOM support, and would require Tabbable's multi-container support | ||
| // to look at those containers in document position order rather than user-provided | ||
| // order (as they are treated in Focus-trap, for legacy reasons). See discussion on | ||
| // https://github.com/focus-trap/focus-trap/issues/375 for more details. | ||
| if (state.containerGroups.find(function (g) { | ||
| return g.posTabIndexesFound; | ||
| }) && state.containerGroups.length > 1) { | ||
| throw new Error("At least one node with a positive tabindex was found in one of your focus-trap's multiple containers. Positive tabindexes are only supported in single-container focus-traps."); | ||
| } | ||
| }; | ||
@@ -393,2 +434,3 @@ var tryFocus = function tryFocus(node) { | ||
| }); | ||
| // NOTE: focus() API does not trigger focusIn event so set MRU node manually | ||
| state.mostRecentlyFocusedNode = node; | ||
@@ -404,60 +446,19 @@ if (isSelectableInput(node)) { | ||
| // This needs to be done on mousedown and touchstart instead of click | ||
| // so that it precedes the focus event. | ||
| var checkPointerDown = function checkPointerDown(e) { | ||
| var target = getActualTarget(e); | ||
| if (findContainerIndex(target, e) >= 0) { | ||
| // allow the click since it ocurred inside the trap | ||
| return; | ||
| } | ||
| if (valueOrHandler(config.clickOutsideDeactivates, e)) { | ||
| // immediately deactivate the trap | ||
| trap.deactivate({ | ||
| // NOTE: by setting `returnFocus: false`, deactivate() will do nothing, | ||
| // which will result in the outside click setting focus to the node | ||
| // that was clicked (and if not focusable, to "nothing"); by setting | ||
| // `returnFocus: true`, we'll attempt to re-focus the node originally-focused | ||
| // on activation (or the configured `setReturnFocus` node), whether the | ||
| // outside click was on a focusable node or not | ||
| returnFocus: config.returnFocusOnDeactivate | ||
| }); | ||
| return; | ||
| } | ||
| // 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 (valueOrHandler(config.allowOutsideClick, e)) { | ||
| // allow the click outside the trap to take place | ||
| return; | ||
| } | ||
| // otherwise, prevent the click | ||
| e.preventDefault(); | ||
| }; | ||
| // In case focus escapes the trap for some strange reason, pull it back in. | ||
| var checkFocusIn = function checkFocusIn(e) { | ||
| var target = getActualTarget(e); | ||
| var targetContained = findContainerIndex(target, e) >= 0; | ||
| // In Firefox when you Tab out of an iframe the Document is briefly focused. | ||
| if (targetContained || target instanceof Document) { | ||
| if (targetContained) { | ||
| state.mostRecentlyFocusedNode = target; | ||
| } | ||
| } else { | ||
| // escaped! pull it back in to where it just left | ||
| e.stopImmediatePropagation(); | ||
| tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode()); | ||
| } | ||
| }; | ||
| // Hijack key nav 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. | ||
| var checkKeyNav = function checkKeyNav(event) { | ||
| var isBackward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; | ||
| var target = getActualTarget(event); | ||
| /** | ||
| * Finds the next node (in either direction) where focus should move according to a | ||
| * keyboard focus-in event. | ||
| * @param {Object} params | ||
| * @param {Node} [params.target] Known target __from which__ to navigate, if any. | ||
| * @param {KeyboardEvent|FocusEvent} [params.event] Event to use if `target` isn't known (event | ||
| * will be used to determine the `target`). Ignored if `target` is specified. | ||
| * @param {boolean} [params.isBackward] True if focus should move backward. | ||
| * @returns {Node|undefined} The next node, or `undefined` if a next node couldn't be | ||
| * determined given the current state of the trap. | ||
| */ | ||
| var findNextNavNode = function findNextNavNode(_ref2) { | ||
| var target = _ref2.target, | ||
| event = _ref2.event, | ||
| _ref2$isBackward = _ref2.isBackward, | ||
| isBackward = _ref2$isBackward === void 0 ? false : _ref2$isBackward; | ||
| target = target || getActualTarget(event); | ||
| updateTabbableNodes(); | ||
@@ -485,4 +486,4 @@ var destinationNode = null; | ||
| // is the target the first tabbable node in a group? | ||
| var startOfGroupIndex = findIndex(state.tabbableGroups, function (_ref2) { | ||
| var firstTabbableNode = _ref2.firstTabbableNode; | ||
| var startOfGroupIndex = findIndex(state.tabbableGroups, function (_ref3) { | ||
| var firstTabbableNode = _ref3.firstTabbableNode; | ||
| return target === firstTabbableNode; | ||
@@ -505,3 +506,3 @@ }); | ||
| var destinationGroup = state.tabbableGroups[destinationGroupIndex]; | ||
| destinationNode = destinationGroup.lastTabbableNode; | ||
| destinationNode = tabbable.getTabIndex(target) >= 0 ? destinationGroup.lastTabbableNode : destinationGroup.lastDomTabbableNode; | ||
| } else if (!isTabEvent(event)) { | ||
@@ -516,4 +517,4 @@ // user must have customized the nav keys so we have to move focus manually _within_ | ||
| // is the target the last tabbable node in a group? | ||
| var lastOfGroupIndex = findIndex(state.tabbableGroups, function (_ref3) { | ||
| var lastTabbableNode = _ref3.lastTabbableNode; | ||
| var lastOfGroupIndex = findIndex(state.tabbableGroups, function (_ref4) { | ||
| var lastTabbableNode = _ref4.lastTabbableNode; | ||
| return target === lastTabbableNode; | ||
@@ -536,3 +537,3 @@ }); | ||
| var _destinationGroup = state.tabbableGroups[_destinationGroupIndex]; | ||
| destinationNode = _destinationGroup.firstTabbableNode; | ||
| destinationNode = tabbable.getTabIndex(target) >= 0 ? _destinationGroup.firstTabbableNode : _destinationGroup.firstDomTabbableNode; | ||
| } else if (!isTabEvent(event)) { | ||
@@ -549,2 +550,141 @@ // user must have customized the nav keys so we have to move focus manually _within_ | ||
| } | ||
| return destinationNode; | ||
| }; | ||
| // This needs to be done on mousedown and touchstart instead of click | ||
| // so that it precedes the focus event. | ||
| var checkPointerDown = function checkPointerDown(e) { | ||
| var target = getActualTarget(e); | ||
| if (findContainerIndex(target, e) >= 0) { | ||
| // allow the click since it ocurred inside the trap | ||
| return; | ||
| } | ||
| if (valueOrHandler(config.clickOutsideDeactivates, e)) { | ||
| // immediately deactivate the trap | ||
| trap.deactivate({ | ||
| // NOTE: by setting `returnFocus: false`, deactivate() will do nothing, | ||
| // which will result in the outside click setting focus to the node | ||
| // that was clicked (and if not focusable, to "nothing"); by setting | ||
| // `returnFocus: true`, we'll attempt to re-focus the node originally-focused | ||
| // on activation (or the configured `setReturnFocus` node), whether the | ||
| // outside click was on a focusable node or not | ||
| returnFocus: config.returnFocusOnDeactivate | ||
| }); | ||
| return; | ||
| } | ||
| // 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 (valueOrHandler(config.allowOutsideClick, e)) { | ||
| // allow the click outside the trap to take place | ||
| return; | ||
| } | ||
| // otherwise, prevent the click | ||
| e.preventDefault(); | ||
| }; | ||
| // In case focus escapes the trap for some strange reason, pull it back in. | ||
| // NOTE: the focusIn event is NOT cancelable, so if focus escapes, it may cause unexpected | ||
| // scrolling if the node that got focused was out of view; there's nothing we can do to | ||
| // prevent that from happening by the time we discover that focus escaped | ||
| var checkFocusIn = function checkFocusIn(event) { | ||
| var target = getActualTarget(event); | ||
| var targetContained = findContainerIndex(target, event) >= 0; | ||
| // In Firefox when you Tab out of an iframe the Document is briefly focused. | ||
| if (targetContained || target instanceof Document) { | ||
| if (targetContained) { | ||
| state.mostRecentlyFocusedNode = target; | ||
| } | ||
| } else { | ||
| // escaped! pull it back in to where it just left | ||
| event.stopImmediatePropagation(); | ||
| // focus will escape if the MRU node had a positive tab index and user tried to nav forward; | ||
| // it will also escape if the MRU node had a 0 tab index and user tried to nav backward | ||
| // toward a node with a positive tab index | ||
| var nextNode; // next node to focus, if we find one | ||
| var navAcrossContainers = true; | ||
| if (tabbable.getTabIndex(state.mostRecentlyFocusedNode) > 0) { | ||
| // MRU container index must be >=0 otherwise we wouldn't have it as an MRU node... | ||
| var mruContainerIdx = findContainerIndex(state.mostRecentlyFocusedNode); | ||
| // there MAY not be any tabbable nodes in the container if there are at least 2 containers | ||
| // and the MRU node is focusable but not tabbable (focus-trap requires at least 1 container | ||
| // with at least one tabbable node in order to function, so this could be the other container | ||
| // with nothing tabbable in it) | ||
| var tabbableNodes = state.containerGroups[mruContainerIdx].tabbableNodes; | ||
| if (tabbableNodes.length > 0) { | ||
| // MRU tab index MAY not be found if the MRU node is focusable but not tabbable | ||
| var mruTabIdx = tabbableNodes.findIndex(function (node) { | ||
| return node === state.mostRecentlyFocusedNode; | ||
| }); | ||
| if (mruTabIdx >= 0) { | ||
| if (config.isKeyForward(state.recentNavEvent)) { | ||
| if (mruTabIdx + 1 < tabbableNodes.length) { | ||
| nextNode = tabbableNodes[mruTabIdx + 1]; | ||
| navAcrossContainers = false; | ||
| } | ||
| // else, don't wrap within the container as focus should move to next/previous | ||
| // container | ||
| } else { | ||
| if (mruTabIdx - 1 >= 0) { | ||
| nextNode = tabbableNodes[mruTabIdx - 1]; | ||
| navAcrossContainers = false; | ||
| } | ||
| // else, don't wrap within the container as focus should move to next/previous | ||
| // container | ||
| } | ||
| // else, don't find in container order without considering direction too | ||
| } | ||
| } | ||
| // else, no tabbable nodes in that container (which means we must have at least one other | ||
| // container with at least one tabbable node in it, otherwise focus-trap would've thrown | ||
| // an error the last time updateTabbableNodes() was run): find next node among all known | ||
| // containers | ||
| } else { | ||
| // check to see if there's at least one tabbable node with a positive tab index inside | ||
| // the trap because focus seems to escape when navigating backward from a tabbable node | ||
| // with tabindex=0 when this is the case (instead of wrapping to the tabbable node with | ||
| // the greatest positive tab index like it should) | ||
| if (!state.containerGroups.some(function (g) { | ||
| return g.tabbableNodes.some(function (n) { | ||
| return tabbable.getTabIndex(n) > 0; | ||
| }); | ||
| })) { | ||
| // no containers with tabbable nodes with positive tab indexes which means the focus | ||
| // escaped for some other reason and we should just execute the fallback to the | ||
| // MRU node or initial focus node, if any | ||
| navAcrossContainers = false; | ||
| } | ||
| } | ||
| if (navAcrossContainers) { | ||
| nextNode = findNextNavNode({ | ||
| // move FROM the MRU node, not event-related node (which will be the node that is | ||
| // outside the trap causing the focus escape we're trying to fix) | ||
| target: state.mostRecentlyFocusedNode, | ||
| isBackward: config.isKeyBackward(state.recentNavEvent) | ||
| }); | ||
| } | ||
| if (nextNode) { | ||
| tryFocus(nextNode); | ||
| } else { | ||
| tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode()); | ||
| } | ||
| } | ||
| state.recentNavEvent = undefined; // clear | ||
| }; | ||
| // Hijack key nav 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. | ||
| var checkKeyNav = function checkKeyNav(event) { | ||
| var isBackward = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; | ||
| state.recentNavEvent = event; | ||
| var destinationNode = findNextNavNode({ | ||
| event: event, | ||
| isBackward: isBackward | ||
| }); | ||
| if (destinationNode) { | ||
@@ -551,0 +691,0 @@ if (isTabEvent(event)) { |
| /*! | ||
| * focus-trap 7.4.3 | ||
| * focus-trap 7.5.0 | ||
| * @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,o=e.focusTrap={};t(o,e.tabbable),o.noConflict=function(){return e.focusTrap=n,o}}())}(this,(function(e,t){"use strict";function n(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function o(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}function a(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t||"default");if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var r=function(e,t){if(e.length>0){var n=e[e.length-1];n!==t&&n.pause()}var o=e.indexOf(t);-1===o||e.splice(o,1),e.push(t)},i=function(e,t){var n=e.indexOf(t);-1!==n&&e.splice(n,1),e.length>0&&e[e.length-1].unpause()},u=function(e){return"Tab"===e.key||9===e.keyCode},c=function(e){return u(e)&&!e.shiftKey},s=function(e){return u(e)&&e.shiftKey},l=function(e){return setTimeout(e,0)},b=function(e,t){var n=-1;return e.every((function(e,o){return!t(e)||(n=o,!1)})),n},f=function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),o=1;o<t;o++)n[o-1]=arguments[o];return"function"==typeof e?e.apply(void 0,n):e},d=function(e){return e.target.shadowRoot&&"function"==typeof e.composedPath?e.composedPath()[0]:e.target},v=[];e.createFocusTrap=function(e,n){var a,p=(null==n?void 0:n.document)||document,y=(null==n?void 0:n.trapStack)||v,h=o({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0,isKeyForward:c,isKeyBackward:s},n),m={containers:[],containerGroups:[],tabbableGroups:[],nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1,delayInitialFocusTimer:void 0},g=function(e,t,n){return e&&void 0!==e[t]?e[t]:h[n||t]},w=function(e,t){var n="function"==typeof(null==t?void 0:t.composedPath)?t.composedPath():void 0;return m.containerGroups.findIndex((function(t){var o=t.container,a=t.tabbableNodes;return o.contains(e)||(null==n?void 0:n.includes(o))||a.find((function(t){return t===e}))}))},O=function(e){var t=h[e];if("function"==typeof t){for(var n=arguments.length,o=new Array(n>1?n-1:0),a=1;a<n;a++)o[a-1]=arguments[a];t=t.apply(void 0,o)}if(!0===t&&(t=void 0),!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=p.querySelector(t)))throw new Error("`".concat(e,"` as selector refers to no known node"));return r},F=function(){var e=O("initialFocus");if(!1===e)return!1;if(void 0===e||!t.isFocusable(e,h.tabbableOptions))if(w(p.activeElement)>=0)e=p.activeElement;else{var n=m.tabbableGroups[0];e=n&&n.firstTabbableNode||O("fallbackFocus")}if(!e)throw new Error("Your focus-trap needs to have at least one focusable element");return e},T=function(){if(m.containerGroups=m.containers.map((function(e){var n=t.tabbable(e,h.tabbableOptions),o=t.focusable(e,h.tabbableOptions);return{container:e,tabbableNodes:n,focusableNodes:o,firstTabbableNode:n.length>0?n[0]:null,lastTabbableNode:n.length>0?n[n.length-1]:null,nextTabbableNode:function(e){var n=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],a=o.findIndex((function(t){return t===e}));if(!(a<0))return n?o.slice(a+1).find((function(e){return t.isTabbable(e,h.tabbableOptions)})):o.slice(0,a).reverse().find((function(e){return t.isTabbable(e,h.tabbableOptions)}))}}})),m.tabbableGroups=m.containerGroups.filter((function(e){return e.tabbableNodes.length>0})),m.tabbableGroups.length<=0&&!O("fallbackFocus"))throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times")},N=function e(t){!1!==t&&t!==p.activeElement&&(t&&t.focus?(t.focus({preventScroll:!!h.preventScroll}),m.mostRecentlyFocusedNode=t,function(e){return e.tagName&&"input"===e.tagName.toLowerCase()&&"function"==typeof e.select}(t)&&t.select()):e(F()))},k=function(e){var t=O("setReturnFocus",e);return t||!1!==t&&e},P=function(e){var t=d(e);w(t,e)>=0||(f(h.clickOutsideDeactivates,e)?a.deactivate({returnFocus:h.returnFocusOnDeactivate}):f(h.allowOutsideClick,e)||e.preventDefault())},E=function(e){var t=d(e),n=w(t,e)>=0;n||t instanceof Document?n&&(m.mostRecentlyFocusedNode=t):(e.stopImmediatePropagation(),N(m.mostRecentlyFocusedNode||F()))},D=function(e){if(!(n=e,"Escape"!==n.key&&"Esc"!==n.key&&27!==n.keyCode||!1===f(h.escapeDeactivates,e)))return e.preventDefault(),void a.deactivate();var n;(h.isKeyForward(e)||h.isKeyBackward(e))&&function(e){var n=arguments.length>1&&void 0!==arguments[1]&&arguments[1],o=d(e);T();var a=null;if(m.tabbableGroups.length>0){var r=w(o,e),i=r>=0?m.containerGroups[r]:void 0;if(r<0)a=n?m.tabbableGroups[m.tabbableGroups.length-1].lastTabbableNode:m.tabbableGroups[0].firstTabbableNode;else if(n){var c=b(m.tabbableGroups,(function(e){var t=e.firstTabbableNode;return o===t}));if(c<0&&(i.container===o||t.isFocusable(o,h.tabbableOptions)&&!t.isTabbable(o,h.tabbableOptions)&&!i.nextTabbableNode(o,!1))&&(c=r),c>=0){var s=0===c?m.tabbableGroups.length-1:c-1;a=m.tabbableGroups[s].lastTabbableNode}else u(e)||(a=i.nextTabbableNode(o,!1))}else{var l=b(m.tabbableGroups,(function(e){var t=e.lastTabbableNode;return o===t}));if(l<0&&(i.container===o||t.isFocusable(o,h.tabbableOptions)&&!t.isTabbable(o,h.tabbableOptions)&&!i.nextTabbableNode(o))&&(l=r),l>=0){var f=l===m.tabbableGroups.length-1?0:l+1;a=m.tabbableGroups[f].firstTabbableNode}else u(e)||(a=i.nextTabbableNode(o))}}else a=O("fallbackFocus");a&&(u(e)&&e.preventDefault(),N(a))}(e,h.isKeyBackward(e))},G=function(e){var t=d(e);w(t,e)>=0||f(h.clickOutsideDeactivates,e)||f(h.allowOutsideClick,e)||(e.preventDefault(),e.stopImmediatePropagation())},j=function(){if(m.active)return r(y,a),m.delayInitialFocusTimer=h.delayInitialFocus?l((function(){N(F())})):N(F()),p.addEventListener("focusin",E,!0),p.addEventListener("mousedown",P,{capture:!0,passive:!1}),p.addEventListener("touchstart",P,{capture:!0,passive:!1}),p.addEventListener("click",G,{capture:!0,passive:!1}),p.addEventListener("keydown",D,{capture:!0,passive:!1}),a},x=function(){if(m.active)return p.removeEventListener("focusin",E,!0),p.removeEventListener("mousedown",P,!0),p.removeEventListener("touchstart",P,!0),p.removeEventListener("click",G,!0),p.removeEventListener("keydown",D,!0),a},C="undefined"!=typeof window&&"MutationObserver"in window?new MutationObserver((function(e){e.some((function(e){return Array.from(e.removedNodes).some((function(e){return e===m.mostRecentlyFocusedNode}))}))&&N(F())})):void 0,L=function(){C&&(C.disconnect(),m.active&&!m.paused&&m.containers.map((function(e){C.observe(e,{subtree:!0,childList:!0})})))};return(a={get active(){return m.active},get paused(){return m.paused},activate:function(e){if(m.active)return this;var t=g(e,"onActivate"),n=g(e,"onPostActivate"),o=g(e,"checkCanFocusTrap");o||T(),m.active=!0,m.paused=!1,m.nodeFocusedBeforeActivation=p.activeElement,null==t||t();var a=function(){o&&T(),j(),L(),null==n||n()};return o?(o(m.containers.concat()).then(a,a),this):(a(),this)},deactivate:function(e){if(!m.active)return this;var t=o({onDeactivate:h.onDeactivate,onPostDeactivate:h.onPostDeactivate,checkCanReturnFocus:h.checkCanReturnFocus},e);clearTimeout(m.delayInitialFocusTimer),m.delayInitialFocusTimer=void 0,x(),m.active=!1,m.paused=!1,L(),i(y,a);var n=g(t,"onDeactivate"),r=g(t,"onPostDeactivate"),u=g(t,"checkCanReturnFocus"),c=g(t,"returnFocus","returnFocusOnDeactivate");null==n||n();var s=function(){l((function(){c&&N(k(m.nodeFocusedBeforeActivation)),null==r||r()}))};return c&&u?(u(k(m.nodeFocusedBeforeActivation)).then(s,s),this):(s(),this)},pause:function(e){if(m.paused||!m.active)return this;var t=g(e,"onPause"),n=g(e,"onPostPause");return m.paused=!0,null==t||t(),x(),L(),null==n||n(),this},unpause:function(e){if(!m.paused||!m.active)return this;var t=g(e,"onUnpause"),n=g(e,"onPostUnpause");return m.paused=!1,null==t||t(),T(),j(),L(),null==n||n(),this},updateContainerElements:function(e){var t=[].concat(e).filter(Boolean);return m.containers=t.map((function(e){return"string"==typeof e?p.querySelector(e):e})),m.active&&T(),L(),this}}).updateContainerElements(e),a},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,o=e.focusTrap={};t(o,e.tabbable),o.noConflict=function(){return e.focusTrap=n,o}}())}(this,(function(e,t){"use strict";function n(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function o(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}function a(e,t,n){return(t=function(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t||"default");if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var r=function(e,t){if(e.length>0){var n=e[e.length-1];n!==t&&n.pause()}var o=e.indexOf(t);-1===o||e.splice(o,1),e.push(t)},i=function(e,t){var n=e.indexOf(t);-1!==n&&e.splice(n,1),e.length>0&&e[e.length-1].unpause()},u=function(e){return"Tab"===(null==e?void 0:e.key)||9===(null==e?void 0:e.keyCode)},c=function(e){return u(e)&&!e.shiftKey},s=function(e){return u(e)&&e.shiftKey},l=function(e){return setTimeout(e,0)},b=function(e,t){var n=-1;return e.every((function(e,o){return!t(e)||(n=o,!1)})),n},d=function(e){for(var t=arguments.length,n=new Array(t>1?t-1:0),o=1;o<t;o++)n[o-1]=arguments[o];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},v=[];e.createFocusTrap=function(e,n){var a,p=(null==n?void 0:n.document)||document,y=(null==n?void 0:n.trapStack)||v,m=o({returnFocusOnDeactivate:!0,escapeDeactivates:!0,delayInitialFocus:!0,isKeyForward:c,isKeyBackward:s},n),h={containers:[],containerGroups:[],tabbableGroups:[],nodeFocusedBeforeActivation:null,mostRecentlyFocusedNode:null,active:!1,paused:!1,delayInitialFocusTimer:void 0,recentNavEvent:void 0},g=function(e,t,n){return e&&void 0!==e[t]?e[t]:m[n||t]},w=function(e,t){var n="function"==typeof(null==t?void 0:t.composedPath)?t.composedPath():void 0;return h.containerGroups.findIndex((function(t){var o=t.container,a=t.tabbableNodes;return o.contains(e)||(null==n?void 0:n.includes(o))||a.find((function(t){return t===e}))}))},T=function(e){var t=m[e];if("function"==typeof t){for(var n=arguments.length,o=new Array(n>1?n-1:0),a=1;a<n;a++)o[a-1]=arguments[a];t=t.apply(void 0,o)}if(!0===t&&(t=void 0),!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=p.querySelector(t)))throw new Error("`".concat(e,"` as selector refers to no known node"));return r},F=function(){var e=T("initialFocus");if(!1===e)return!1;if(void 0===e||!t.isFocusable(e,m.tabbableOptions))if(w(p.activeElement)>=0)e=p.activeElement;else{var n=h.tabbableGroups[0];e=n&&n.firstTabbableNode||T("fallbackFocus")}if(!e)throw new Error("Your focus-trap needs to have at least one focusable element");return e},N=function(){if(h.containerGroups=h.containers.map((function(e){var n=t.tabbable(e,m.tabbableOptions),o=t.focusable(e,m.tabbableOptions),a=n.length>0?n[0]:void 0,r=n.length>0?n[n.length-1]:void 0,i=o.find((function(e){return t.isTabbable(e)})),u=o.findLast((function(e){return t.isTabbable(e)})),c=!!n.find((function(e){return t.getTabIndex(e)>0}));return{container:e,tabbableNodes:n,focusableNodes:o,posTabIndexesFound:c,firstTabbableNode:a,lastTabbableNode:r,firstDomTabbableNode:i,lastDomTabbableNode:u,nextTabbableNode:function(e){var a=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],r=n.indexOf(e);return r<0?a?o.slice(o.indexOf(e)+1).find((function(e){return t.isTabbable(e)})):o.slice(0,o.indexOf(e)).findLast((function(e){return t.isTabbable(e)})):n[r+(a?1:-1)]}}})),h.tabbableGroups=h.containerGroups.filter((function(e){return e.tabbableNodes.length>0})),h.tabbableGroups.length<=0&&!T("fallbackFocus"))throw new Error("Your focus-trap must have at least one container with at least one tabbable node in it at all times");if(h.containerGroups.find((function(e){return e.posTabIndexesFound}))&&h.containerGroups.length>1)throw new Error("At least one node with a positive tabindex was found in one of your focus-trap's multiple containers. Positive tabindexes are only supported in single-container focus-traps.")},O=function e(t){!1!==t&&t!==p.activeElement&&(t&&t.focus?(t.focus({preventScroll:!!m.preventScroll}),h.mostRecentlyFocusedNode=t,function(e){return e.tagName&&"input"===e.tagName.toLowerCase()&&"function"==typeof e.select}(t)&&t.select()):e(F()))},E=function(e){var t=T("setReturnFocus",e);return t||!1!==t&&e},k=function(e){var n=e.target,o=e.event,a=e.isBackward,r=void 0!==a&&a;n=n||f(o),N();var i=null;if(h.tabbableGroups.length>0){var c=w(n,o),s=c>=0?h.containerGroups[c]:void 0;if(c<0)i=r?h.tabbableGroups[h.tabbableGroups.length-1].lastTabbableNode:h.tabbableGroups[0].firstTabbableNode;else if(r){var l=b(h.tabbableGroups,(function(e){var t=e.firstTabbableNode;return n===t}));if(l<0&&(s.container===n||t.isFocusable(n,m.tabbableOptions)&&!t.isTabbable(n,m.tabbableOptions)&&!s.nextTabbableNode(n,!1))&&(l=c),l>=0){var d=0===l?h.tabbableGroups.length-1:l-1,v=h.tabbableGroups[d];i=t.getTabIndex(n)>=0?v.lastTabbableNode:v.lastDomTabbableNode}else u(o)||(i=s.nextTabbableNode(n,!1))}else{var p=b(h.tabbableGroups,(function(e){var t=e.lastTabbableNode;return n===t}));if(p<0&&(s.container===n||t.isFocusable(n,m.tabbableOptions)&&!t.isTabbable(n,m.tabbableOptions)&&!s.nextTabbableNode(n))&&(p=c),p>=0){var y=p===h.tabbableGroups.length-1?0:p+1,g=h.tabbableGroups[y];i=t.getTabIndex(n)>=0?g.firstTabbableNode:g.firstDomTabbableNode}else u(o)||(i=s.nextTabbableNode(n))}}else i=T("fallbackFocus");return i},P=function(e){var t=f(e);w(t,e)>=0||(d(m.clickOutsideDeactivates,e)?a.deactivate({returnFocus:m.returnFocusOnDeactivate}):d(m.allowOutsideClick,e)||e.preventDefault())},D=function(e){var n=f(e),o=w(n,e)>=0;if(o||n instanceof Document)o&&(h.mostRecentlyFocusedNode=n);else{var a;e.stopImmediatePropagation();var r=!0;if(t.getTabIndex(h.mostRecentlyFocusedNode)>0){var i=w(h.mostRecentlyFocusedNode),u=h.containerGroups[i].tabbableNodes;if(u.length>0){var c=u.findIndex((function(e){return e===h.mostRecentlyFocusedNode}));c>=0&&(m.isKeyForward(h.recentNavEvent)?c+1<u.length&&(a=u[c+1],r=!1):c-1>=0&&(a=u[c-1],r=!1))}}else h.containerGroups.some((function(e){return e.tabbableNodes.some((function(e){return t.getTabIndex(e)>0}))}))||(r=!1);r&&(a=k({target:h.mostRecentlyFocusedNode,isBackward:m.isKeyBackward(h.recentNavEvent)})),O(a||(h.mostRecentlyFocusedNode||F()))}h.recentNavEvent=void 0},x=function(e){if(!(t=e,"Escape"!==(null==t?void 0:t.key)&&"Esc"!==(null==t?void 0:t.key)&&27!==(null==t?void 0:t.keyCode)||!1===d(m.escapeDeactivates,e)))return e.preventDefault(),void a.deactivate();var t;(m.isKeyForward(e)||m.isKeyBackward(e))&&function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];h.recentNavEvent=e;var n=k({event:e,isBackward:t});n&&(u(e)&&e.preventDefault(),O(n))}(e,m.isKeyBackward(e))},G=function(e){var t=f(e);w(t,e)>=0||d(m.clickOutsideDeactivates,e)||d(m.allowOutsideClick,e)||(e.preventDefault(),e.stopImmediatePropagation())},I=function(){if(h.active)return r(y,a),h.delayInitialFocusTimer=m.delayInitialFocus?l((function(){O(F())})):O(F()),p.addEventListener("focusin",D,!0),p.addEventListener("mousedown",P,{capture:!0,passive:!1}),p.addEventListener("touchstart",P,{capture:!0,passive:!1}),p.addEventListener("click",G,{capture:!0,passive:!1}),p.addEventListener("keydown",x,{capture:!0,passive:!1}),a},j=function(){if(h.active)return p.removeEventListener("focusin",D,!0),p.removeEventListener("mousedown",P,!0),p.removeEventListener("touchstart",P,!0),p.removeEventListener("click",G,!0),p.removeEventListener("keydown",x,!0),a},L="undefined"!=typeof window&&"MutationObserver"in window?new MutationObserver((function(e){e.some((function(e){return Array.from(e.removedNodes).some((function(e){return e===h.mostRecentlyFocusedNode}))}))&&O(F())})):void 0,R=function(){L&&(L.disconnect(),h.active&&!h.paused&&h.containers.map((function(e){L.observe(e,{subtree:!0,childList:!0})})))};return(a={get active(){return h.active},get paused(){return h.paused},activate:function(e){if(h.active)return this;var t=g(e,"onActivate"),n=g(e,"onPostActivate"),o=g(e,"checkCanFocusTrap");o||N(),h.active=!0,h.paused=!1,h.nodeFocusedBeforeActivation=p.activeElement,null==t||t();var a=function(){o&&N(),I(),R(),null==n||n()};return o?(o(h.containers.concat()).then(a,a),this):(a(),this)},deactivate:function(e){if(!h.active)return this;var t=o({onDeactivate:m.onDeactivate,onPostDeactivate:m.onPostDeactivate,checkCanReturnFocus:m.checkCanReturnFocus},e);clearTimeout(h.delayInitialFocusTimer),h.delayInitialFocusTimer=void 0,j(),h.active=!1,h.paused=!1,R(),i(y,a);var n=g(t,"onDeactivate"),r=g(t,"onPostDeactivate"),u=g(t,"checkCanReturnFocus"),c=g(t,"returnFocus","returnFocusOnDeactivate");null==n||n();var s=function(){l((function(){c&&O(E(h.nodeFocusedBeforeActivation)),null==r||r()}))};return c&&u?(u(E(h.nodeFocusedBeforeActivation)).then(s,s),this):(s(),this)},pause:function(e){if(h.paused||!h.active)return this;var t=g(e,"onPause"),n=g(e,"onPostPause");return h.paused=!0,null==t||t(),j(),R(),null==n||n(),this},unpause:function(e){if(!h.paused||!h.active)return this;var t=g(e,"onUnpause"),n=g(e,"onPostUnpause");return h.paused=!1,null==t||t(),N(),I(),R(),null==n||n(),this},updateContainerElements:function(e){var t=[].concat(e).filter(Boolean);return h.containers=t.map((function(e){return"string"==typeof e?p.querySelector(e):e})),h.active&&N(),R(),this}}).updateContainerElements(e),a},Object.defineProperty(e,"__esModule",{value:!0})})); | ||
| //# sourceMappingURL=focus-trap.umd.min.js.map |
351
index.js
@@ -1,2 +0,8 @@ | ||
| import { tabbable, focusable, isFocusable, isTabbable } from 'tabbable'; | ||
| import { | ||
| tabbable, | ||
| focusable, | ||
| isFocusable, | ||
| isTabbable, | ||
| getTabIndex, | ||
| } from 'tabbable'; | ||
@@ -43,7 +49,7 @@ const activeFocusTraps = { | ||
| const isEscapeEvent = function (e) { | ||
| return e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27; | ||
| return e?.key === 'Escape' || e?.key === 'Esc' || e?.keyCode === 27; | ||
| }; | ||
| const isTabEvent = function (e) { | ||
| return e.key === 'Tab' || e.keyCode === 9; | ||
| return e?.key === 'Tab' || e?.keyCode === 9; | ||
| }; | ||
@@ -140,4 +146,7 @@ | ||
| // focusableNodes: Array<HTMLElement>, // empty if none | ||
| // firstTabbableNode: HTMLElement|null, | ||
| // lastTabbableNode: HTMLElement|null, | ||
| // posTabIndexesFound: boolean, | ||
| // firstTabbableNode: HTMLElement|undefined, | ||
| // lastTabbableNode: HTMLElement|undefined, | ||
| // firstDomTabbableNode: HTMLElement|undefined, | ||
| // lastDomTabbableNode: HTMLElement|undefined, | ||
| // nextTabbableNode: (node: HTMLElement, forward: boolean) => HTMLElement|undefined | ||
@@ -161,2 +170,5 @@ // }>} | ||
| delayInitialFocusTimer: undefined, | ||
| // the most recent KeyboardEvent for the configured nav key (typically [SHIFT+]TAB), if any | ||
| recentNavEvent: undefined, | ||
| }; | ||
@@ -184,3 +196,5 @@ | ||
| * @param {HTMLElement} element | ||
| * @param {Event} [event] | ||
| * @param {Event} [event] If available, and `element` isn't directly found in any container, | ||
| * the event's composed path is used to see if includes any known trap containers in the | ||
| * case where the element is inside a Shadow DOM. | ||
| * @returns {number} Index of the container in either `state.containers` or | ||
@@ -295,5 +309,24 @@ * `state.containerGroups` (the order/length of these lists are the same); -1 | ||
| // NOTE: if we have tabbable nodes, we must have focusable nodes; focusable nodes | ||
| // are a superset of tabbable nodes | ||
| // are a superset of tabbable nodes since nodes with negative `tabindex` attributes | ||
| // are focusable but not tabbable | ||
| const focusableNodes = focusable(container, config.tabbableOptions); | ||
| const firstTabbableNode = | ||
| tabbableNodes.length > 0 ? tabbableNodes[0] : undefined; | ||
| const lastTabbableNode = | ||
| tabbableNodes.length > 0 | ||
| ? tabbableNodes[tabbableNodes.length - 1] | ||
| : undefined; | ||
| const firstDomTabbableNode = focusableNodes.find((node) => | ||
| isTabbable(node) | ||
| ); | ||
| const lastDomTabbableNode = focusableNodes.findLast((node) => | ||
| isTabbable(node) | ||
| ); | ||
| const posTabIndexesFound = !!tabbableNodes.find( | ||
| (node) => getTabIndex(node) > 0 | ||
| ); | ||
| return { | ||
@@ -303,8 +336,23 @@ container, | ||
| focusableNodes, | ||
| firstTabbableNode: tabbableNodes.length > 0 ? tabbableNodes[0] : null, | ||
| lastTabbableNode: | ||
| tabbableNodes.length > 0 | ||
| ? tabbableNodes[tabbableNodes.length - 1] | ||
| : null, | ||
| /** True if at least one node with positive `tabindex` was found in this container. */ | ||
| posTabIndexesFound, | ||
| /** First tabbable node in container, __tabindex__ order; `undefined` if none. */ | ||
| firstTabbableNode, | ||
| /** Last tabbable node in container, __tabindex__ order; `undefined` if none. */ | ||
| lastTabbableNode, | ||
| // NOTE: DOM order is NOT NECESSARILY "document position" order, but figuring that out | ||
| // would require more than just https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition | ||
| // because that API doesn't work with Shadow DOM as well as it should (@see | ||
| // https://github.com/whatwg/dom/issues/320) and since this first/last is only needed, so far, | ||
| // to address an edge case related to positive tabindex support, this seems like a much easier, | ||
| // "close enough most of the time" alternative for positive tabindexes which should generally | ||
| // be avoided anyway... | ||
| /** First tabbable node in container, __DOM__ order; `undefined` if none. */ | ||
| firstDomTabbableNode, | ||
| /** Last tabbable node in container, __DOM__ order; `undefined` if none. */ | ||
| lastDomTabbableNode, | ||
| /** | ||
@@ -319,27 +367,22 @@ * Finds the __tabbable__ node that follows the given node in the specified direction, | ||
| 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); | ||
| const nodeIdx = tabbableNodes.indexOf(node); | ||
| if (nodeIdx < 0) { | ||
| return undefined; | ||
| } | ||
| // either not tabbable nor focusable, or was focused but not tabbable (negative tabindex): | ||
| // since `node` should at least have been focusable, we assume that's the case and mimic | ||
| // what browsers do, which is set focus to the next node in __document position order__, | ||
| // regardless of positive tabindexes, if any -- and for reasons explained in the NOTE | ||
| // above related to `firstDomTabbable` and `lastDomTabbable` properties, we fall back to | ||
| // basic DOM order | ||
| if (forward) { | ||
| return focusableNodes | ||
| .slice(focusableNodes.indexOf(node) + 1) | ||
| .find((el) => isTabbable(el)); | ||
| } | ||
| if (forward) { | ||
| return focusableNodes | ||
| .slice(nodeIdx + 1) | ||
| .find((n) => isTabbable(n, config.tabbableOptions)); | ||
| .slice(0, focusableNodes.indexOf(node)) | ||
| .findLast((el) => isTabbable(el)); | ||
| } | ||
| return focusableNodes | ||
| .slice(0, nodeIdx) | ||
| .reverse() | ||
| .find((n) => isTabbable(n, config.tabbableOptions)); | ||
| return tabbableNodes[nodeIdx + (forward ? 1 : -1)]; | ||
| }, | ||
@@ -362,2 +405,18 @@ }; | ||
| } | ||
| // NOTE: Positive tabindexes are only properly supported in single-container traps because | ||
| // doing it across multiple containers where tabindexes could be all over the place | ||
| // would require Tabbable to support multiple containers, would require additional | ||
| // specialized Shadow DOM support, and would require Tabbable's multi-container support | ||
| // to look at those containers in document position order rather than user-provided | ||
| // order (as they are treated in Focus-trap, for legacy reasons). See discussion on | ||
| // https://github.com/focus-trap/focus-trap/issues/375 for more details. | ||
| if ( | ||
| state.containerGroups.find((g) => g.posTabIndexesFound) && | ||
| state.containerGroups.length > 1 | ||
| ) { | ||
| throw new Error( | ||
| "At least one node with a positive tabindex was found in one of your focus-trap's multiple containers. Positive tabindexes are only supported in single-container focus-traps." | ||
| ); | ||
| } | ||
| }; | ||
@@ -380,2 +439,3 @@ | ||
| node.focus({ preventScroll: !!config.preventScroll }); | ||
| // NOTE: focus() API does not trigger focusIn event so set MRU node manually | ||
| state.mostRecentlyFocusedNode = node; | ||
@@ -393,61 +453,15 @@ | ||
| // This needs to be done on mousedown and touchstart instead of click | ||
| // so that it precedes the focus event. | ||
| const checkPointerDown = function (e) { | ||
| const target = getActualTarget(e); | ||
| if (findContainerIndex(target, e) >= 0) { | ||
| // allow the click since it ocurred inside the trap | ||
| return; | ||
| } | ||
| if (valueOrHandler(config.clickOutsideDeactivates, e)) { | ||
| // immediately deactivate the trap | ||
| trap.deactivate({ | ||
| // NOTE: by setting `returnFocus: false`, deactivate() will do nothing, | ||
| // which will result in the outside click setting focus to the node | ||
| // that was clicked (and if not focusable, to "nothing"); by setting | ||
| // `returnFocus: true`, we'll attempt to re-focus the node originally-focused | ||
| // on activation (or the configured `setReturnFocus` node), whether the | ||
| // outside click was on a focusable node or not | ||
| returnFocus: config.returnFocusOnDeactivate, | ||
| }); | ||
| return; | ||
| } | ||
| // 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 (valueOrHandler(config.allowOutsideClick, e)) { | ||
| // allow the click outside the trap to take place | ||
| return; | ||
| } | ||
| // otherwise, prevent the click | ||
| e.preventDefault(); | ||
| }; | ||
| // In case focus escapes the trap for some strange reason, pull it back in. | ||
| const checkFocusIn = function (e) { | ||
| const target = getActualTarget(e); | ||
| const targetContained = findContainerIndex(target, e) >= 0; | ||
| // In Firefox when you Tab out of an iframe the Document is briefly focused. | ||
| if (targetContained || target instanceof Document) { | ||
| if (targetContained) { | ||
| state.mostRecentlyFocusedNode = target; | ||
| } | ||
| } else { | ||
| // escaped! pull it back in to where it just left | ||
| e.stopImmediatePropagation(); | ||
| tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode()); | ||
| } | ||
| }; | ||
| // Hijack key nav 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. | ||
| const checkKeyNav = function (event, isBackward = false) { | ||
| const target = getActualTarget(event); | ||
| /** | ||
| * Finds the next node (in either direction) where focus should move according to a | ||
| * keyboard focus-in event. | ||
| * @param {Object} params | ||
| * @param {Node} [params.target] Known target __from which__ to navigate, if any. | ||
| * @param {KeyboardEvent|FocusEvent} [params.event] Event to use if `target` isn't known (event | ||
| * will be used to determine the `target`). Ignored if `target` is specified. | ||
| * @param {boolean} [params.isBackward] True if focus should move backward. | ||
| * @returns {Node|undefined} The next node, or `undefined` if a next node couldn't be | ||
| * determined given the current state of the trap. | ||
| */ | ||
| const findNextNavNode = function ({ target, event, isBackward = false }) { | ||
| target = target || getActualTarget(event); | ||
| updateTabbableNodes(); | ||
@@ -512,3 +526,7 @@ | ||
| const destinationGroup = state.tabbableGroups[destinationGroupIndex]; | ||
| destinationNode = destinationGroup.lastTabbableNode; | ||
| destinationNode = | ||
| getTabIndex(target) >= 0 | ||
| ? destinationGroup.lastTabbableNode | ||
| : destinationGroup.lastDomTabbableNode; | ||
| } else if (!isTabEvent(event)) { | ||
@@ -554,3 +572,7 @@ // user must have customized the nav keys so we have to move focus manually _within_ | ||
| const destinationGroup = state.tabbableGroups[destinationGroupIndex]; | ||
| destinationNode = destinationGroup.firstTabbableNode; | ||
| destinationNode = | ||
| getTabIndex(target) >= 0 | ||
| ? destinationGroup.firstTabbableNode | ||
| : destinationGroup.firstDomTabbableNode; | ||
| } else if (!isTabEvent(event)) { | ||
@@ -568,2 +590,145 @@ // user must have customized the nav keys so we have to move focus manually _within_ | ||
| return destinationNode; | ||
| }; | ||
| // This needs to be done on mousedown and touchstart instead of click | ||
| // so that it precedes the focus event. | ||
| const checkPointerDown = function (e) { | ||
| const target = getActualTarget(e); | ||
| if (findContainerIndex(target, e) >= 0) { | ||
| // allow the click since it ocurred inside the trap | ||
| return; | ||
| } | ||
| if (valueOrHandler(config.clickOutsideDeactivates, e)) { | ||
| // immediately deactivate the trap | ||
| trap.deactivate({ | ||
| // NOTE: by setting `returnFocus: false`, deactivate() will do nothing, | ||
| // which will result in the outside click setting focus to the node | ||
| // that was clicked (and if not focusable, to "nothing"); by setting | ||
| // `returnFocus: true`, we'll attempt to re-focus the node originally-focused | ||
| // on activation (or the configured `setReturnFocus` node), whether the | ||
| // outside click was on a focusable node or not | ||
| returnFocus: config.returnFocusOnDeactivate, | ||
| }); | ||
| return; | ||
| } | ||
| // 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 (valueOrHandler(config.allowOutsideClick, e)) { | ||
| // allow the click outside the trap to take place | ||
| return; | ||
| } | ||
| // otherwise, prevent the click | ||
| e.preventDefault(); | ||
| }; | ||
| // In case focus escapes the trap for some strange reason, pull it back in. | ||
| // NOTE: the focusIn event is NOT cancelable, so if focus escapes, it may cause unexpected | ||
| // scrolling if the node that got focused was out of view; there's nothing we can do to | ||
| // prevent that from happening by the time we discover that focus escaped | ||
| const checkFocusIn = function (event) { | ||
| const target = getActualTarget(event); | ||
| const targetContained = findContainerIndex(target, event) >= 0; | ||
| // In Firefox when you Tab out of an iframe the Document is briefly focused. | ||
| if (targetContained || target instanceof Document) { | ||
| if (targetContained) { | ||
| state.mostRecentlyFocusedNode = target; | ||
| } | ||
| } else { | ||
| // escaped! pull it back in to where it just left | ||
| event.stopImmediatePropagation(); | ||
| // focus will escape if the MRU node had a positive tab index and user tried to nav forward; | ||
| // it will also escape if the MRU node had a 0 tab index and user tried to nav backward | ||
| // toward a node with a positive tab index | ||
| let nextNode; // next node to focus, if we find one | ||
| let navAcrossContainers = true; | ||
| if (getTabIndex(state.mostRecentlyFocusedNode) > 0) { | ||
| // MRU container index must be >=0 otherwise we wouldn't have it as an MRU node... | ||
| const mruContainerIdx = findContainerIndex( | ||
| state.mostRecentlyFocusedNode | ||
| ); | ||
| // there MAY not be any tabbable nodes in the container if there are at least 2 containers | ||
| // and the MRU node is focusable but not tabbable (focus-trap requires at least 1 container | ||
| // with at least one tabbable node in order to function, so this could be the other container | ||
| // with nothing tabbable in it) | ||
| const { tabbableNodes } = state.containerGroups[mruContainerIdx]; | ||
| if (tabbableNodes.length > 0) { | ||
| // MRU tab index MAY not be found if the MRU node is focusable but not tabbable | ||
| const mruTabIdx = tabbableNodes.findIndex( | ||
| (node) => node === state.mostRecentlyFocusedNode | ||
| ); | ||
| if (mruTabIdx >= 0) { | ||
| if (config.isKeyForward(state.recentNavEvent)) { | ||
| if (mruTabIdx + 1 < tabbableNodes.length) { | ||
| nextNode = tabbableNodes[mruTabIdx + 1]; | ||
| navAcrossContainers = false; | ||
| } | ||
| // else, don't wrap within the container as focus should move to next/previous | ||
| // container | ||
| } else { | ||
| if (mruTabIdx - 1 >= 0) { | ||
| nextNode = tabbableNodes[mruTabIdx - 1]; | ||
| navAcrossContainers = false; | ||
| } | ||
| // else, don't wrap within the container as focus should move to next/previous | ||
| // container | ||
| } | ||
| // else, don't find in container order without considering direction too | ||
| } | ||
| } | ||
| // else, no tabbable nodes in that container (which means we must have at least one other | ||
| // container with at least one tabbable node in it, otherwise focus-trap would've thrown | ||
| // an error the last time updateTabbableNodes() was run): find next node among all known | ||
| // containers | ||
| } else { | ||
| // check to see if there's at least one tabbable node with a positive tab index inside | ||
| // the trap because focus seems to escape when navigating backward from a tabbable node | ||
| // with tabindex=0 when this is the case (instead of wrapping to the tabbable node with | ||
| // the greatest positive tab index like it should) | ||
| if ( | ||
| !state.containerGroups.some((g) => | ||
| g.tabbableNodes.some((n) => getTabIndex(n) > 0) | ||
| ) | ||
| ) { | ||
| // no containers with tabbable nodes with positive tab indexes which means the focus | ||
| // escaped for some other reason and we should just execute the fallback to the | ||
| // MRU node or initial focus node, if any | ||
| navAcrossContainers = false; | ||
| } | ||
| } | ||
| if (navAcrossContainers) { | ||
| nextNode = findNextNavNode({ | ||
| // move FROM the MRU node, not event-related node (which will be the node that is | ||
| // outside the trap causing the focus escape we're trying to fix) | ||
| target: state.mostRecentlyFocusedNode, | ||
| isBackward: config.isKeyBackward(state.recentNavEvent), | ||
| }); | ||
| } | ||
| if (nextNode) { | ||
| tryFocus(nextNode); | ||
| } else { | ||
| tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode()); | ||
| } | ||
| } | ||
| state.recentNavEvent = undefined; // clear | ||
| }; | ||
| // Hijack key nav 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. | ||
| const checkKeyNav = function (event, isBackward = false) { | ||
| state.recentNavEvent = event; | ||
| const destinationNode = findNextNavNode({ event, isBackward }); | ||
| if (destinationNode) { | ||
@@ -570,0 +735,0 @@ if (isTabEvent(event)) { |
| { | ||
| "name": "focus-trap", | ||
| "version": "7.4.3", | ||
| "version": "7.5.0", | ||
| "description": "Trap focus within a DOM node.", | ||
@@ -66,24 +66,25 @@ "main": "dist/focus-trap.js", | ||
| "dependencies": { | ||
| "tabbable": "^6.1.2" | ||
| "tabbable": "^6.2.0" | ||
| }, | ||
| "devDependencies": { | ||
| "@babel/cli": "^7.21.5", | ||
| "@babel/core": "^7.21.8", | ||
| "@babel/eslint-parser": "^7.21.8", | ||
| "@babel/preset-env": "^7.21.5", | ||
| "@changesets/cli": "^2.26.1", | ||
| "@babel/cli": "^7.22.5", | ||
| "@babel/core": "^7.22.5", | ||
| "@babel/eslint-parser": "^7.22.5", | ||
| "@babel/preset-env": "^7.22.5", | ||
| "@changesets/cli": "^2.26.2", | ||
| "@rollup/plugin-babel": "^6.0.3", | ||
| "@rollup/plugin-commonjs": "^25.0.0", | ||
| "@rollup/plugin-node-resolve": "^15.0.2", | ||
| "@rollup/plugin-commonjs": "^25.0.2", | ||
| "@rollup/plugin-node-resolve": "^15.1.0", | ||
| "@rollup/plugin-terser": "^0.4.3", | ||
| "@testing-library/cypress": "^9.0.0", | ||
| "@types/jquery": "^3.5.16", | ||
| "all-contributors-cli": "^6.25.1", | ||
| "all-contributors-cli": "^6.26.0", | ||
| "babel-loader": "^9.1.2", | ||
| "cross-env": "^7.0.3", | ||
| "cypress": "^12.12.0", | ||
| "cypress": "^12.16.0", | ||
| "cypress-plugin-tab": "^1.0.5", | ||
| "eslint": "^8.40.0", | ||
| "eslint": "^8.43.0", | ||
| "eslint-config-prettier": "^8.8.0", | ||
| "eslint-plugin-cypress": "^2.13.3", | ||
| "eslint-plugin-jest": "^27.2.1", | ||
| "eslint-plugin-jest": "^27.2.2", | ||
| "onchange": "^7.1.0", | ||
@@ -96,6 +97,5 @@ "prettier": "^2.8.8", | ||
| "rollup-plugin-sourcemaps": "^0.6.3", | ||
| "rollup-plugin-terser": "^7.0.1", | ||
| "start-server-and-test": "^2.0.0", | ||
| "typescript": "^5.0.4" | ||
| "typescript": "^5.1.5" | ||
| } | ||
| } |
@@ -147,2 +147,14 @@ # focus-trap [](https://github.com/focus-trap/focus-trap/actions?query=workflow:CI+branch:master) [](./LICENSE) | ||
| #### Positive Tabindexes | ||
| ⚠️ Using positive tab indexes (i.e. `<button tabindex="1">Label</button>`) [is not recommended](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex#accessibility_concerns), primarily for accessibility reasons. Supporting them properly also means a lot of hoops to jump through when Shadow DOM is used as some key DOM APIs like [Node.compareDocumentPosition()](https://developer.mozilla.org/en-US/docs/Web/API/Node/compareDocumentPosition) [do not](https://github.com/whatwg/dom/issues/320) properly support Shadow DOM. | ||
| As such, focus-trap considers using positive tabindexes an edge case and only supports them in __single-container__ traps with some caveats for related edge case behavior (see the [demo](https://focus-trap.github.io/focus-trap/#demo-positive-tabindex) for more details). | ||
| If you try to create a multi-container trap where at least one container has one node with a positive tabindex, an exception will be thrown: | ||
| ``` | ||
| At least one node with a positive tabindex was found in one of your focus-trap's multiple containers. Positive tabindexes are only supported in single-container focus-traps. | ||
| ``` | ||
| ### trap.active | ||
@@ -357,3 +369,3 @@ | ||
| <td align="center" valign="top" width="14.28%"><a href="https://github.com/Dan503"><img src="https://avatars.githubusercontent.com/u/10610368?v=4?s=100" width="100px;" alt="Daniel Tonon"/><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" valign="top" width="14.28%"><a href="https://github.com/DaviDevMod"><img src="https://avatars.githubusercontent.com/u/98312056?v=4?s=100" width="100px;" alt="DaviDevMod"/><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" valign="top" width="14.28%"><a href="https://github.com/DaviDevMod"><img src="https://avatars.githubusercontent.com/u/98312056?v=4?s=100" width="100px;" alt="DaviDevMod"/><br /><sub><b>DaviDevMod</b></sub></a><br /><a href="https://github.com/focus-trap/focus-trap/commits?author=DaviDevMod" title="Documentation">📖</a> <a href="https://github.com/focus-trap/focus-trap/commits?author=DaviDevMod" title="Code">💻</a> <a href="https://github.com/focus-trap/focus-trap/issues?q=author%3ADaviDevMod" title="Bug reports">🐛</a></td> | ||
| <td align="center" valign="top" width="14.28%"><a href="http://davidtheclark.com/"><img src="https://avatars2.githubusercontent.com/u/628431?v=4?s=100" width="100px;" alt="David Clark"/><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> | ||
@@ -360,0 +372,0 @@ <td align="center" valign="top" width="14.28%"><a href="https://github.com/features/security"><img src="https://avatars1.githubusercontent.com/u/27347476?v=4?s=100" width="100px;" alt="Dependabot"/><br /><sub><b>Dependabot</b></sub></a><br /><a href="#maintenance-dependabot" title="Maintenance">🚧</a></td> |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by20.17%
620577
- Lines of code
- increased by17.54%
3854
- Number of lines in readme file
- increased by3.05%
406
Dependency changes
Updatedtabbable@^6.2.0