focus-trap 6.3.0 → 6.4.0

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

@@ -1 +1 @@
-{"version":3,"file":"focus-trap.umd.min.js","sources":["../index.js"],"sourcesContent":["import { tabbable, isFocusable } from 'tabbable';\n\nlet activeFocusDelay;\n\nconst activeFocusTraps = (function () {\n  const trapQueue = [];\n  return {\n    activateTrap(trap) {\n      if (trapQueue.length > 0) {\n        const activeTrap = trapQueue[trapQueue.length - 1];\n        if (activeTrap !== trap) {\n          activeTrap.pause();\n        }\n      }\n\n      const trapIndex = trapQueue.indexOf(trap);\n      if (trapIndex === -1) {\n        trapQueue.push(trap);\n      } else {\n        // move this existing trap to the front of the queue\n        trapQueue.splice(trapIndex, 1);\n        trapQueue.push(trap);\n      }\n    },\n\n    deactivateTrap(trap) {\n      const trapIndex = trapQueue.indexOf(trap);\n      if (trapIndex !== -1) {\n        trapQueue.splice(trapIndex, 1);\n      }\n\n      if (trapQueue.length > 0) {\n        trapQueue[trapQueue.length - 1].unpause();\n      }\n    },\n  };\n})();\n\nconst isSelectableInput = function (node) {\n  return (\n    node.tagName &&\n    node.tagName.toLowerCase() === 'input' &&\n    typeof node.select === 'function'\n  );\n};\n\nconst isEscapeEvent = function (e) {\n  return e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27;\n};\n\nconst isTabEvent = function (e) {\n  return e.key === 'Tab' || e.keyCode === 9;\n};\n\nconst delay = function (fn) {\n  return setTimeout(fn, 0);\n};\n\n// Array.find/findIndex() are not supported on IE; this replicates enough\n//  of Array.findIndex() for our needs\nconst findIndex = function (arr, fn) {\n  let idx = -1;\n\n  arr.every(function (value, i) {\n    if (fn(value)) {\n      idx = i;\n      return false; // break\n    }\n\n    return true; // next\n  });\n\n  return idx;\n};\n\n/**\n * Get an option's value when it could be a plain value, or a handler that provides\n *  the value.\n * @param {*} value Option's value to check.\n * @param {...*} [params] Any parameters to pass to the handler, if `value` is a function.\n * @returns {*} The `value`, or the handler's returned value.\n */\nconst valueOrHandler = function (value, ...params) {\n  return typeof value === 'function' ? value(...params) : value;\n};\n\nconst createFocusTrap = function (elements, userOptions) {\n  const doc = document;\n\n  const config = {\n    returnFocusOnDeactivate: true,\n    escapeDeactivates: true,\n    delayInitialFocus: true,\n    ...userOptions,\n  };\n\n  const state = {\n    // @type {Array<HTMLElement>}\n    containers: [],\n\n    // list of objects identifying the first and last tabbable nodes in all containers/groups in\n    //  the trap\n    // NOTE: it's possible that a group has no tabbable nodes if nodes get removed while the trap\n    //  is active, but the trap should never get to a state where there isn't at least one group\n    //  with at least one tabbable node in it (that would lead to an error condition that would\n    //  result in an error being thrown)\n    // @type {Array<{ container: HTMLElement, firstTabbableNode: HTMLElement|null, lastTabbableNode: HTMLElement|null }>}\n    tabbableGroups: [],\n\n    nodeFocusedBeforeActivation: null,\n    mostRecentlyFocusedNode: null,\n    active: false,\n    paused: false,\n  };\n\n  let 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\n\n  const containersContain = function (element) {\n    return state.containers.some((container) => container.contains(element));\n  };\n\n  const getNodeForOption = function (optionName) {\n    const optionValue = config[optionName];\n    if (!optionValue) {\n      return null;\n    }\n\n    let node = optionValue;\n\n    if (typeof optionValue === 'string') {\n      node = doc.querySelector(optionValue);\n      if (!node) {\n        throw new Error(`\\`${optionName}\\` refers to no known node`);\n      }\n    }\n\n    if (typeof optionValue === 'function') {\n      node = optionValue();\n      if (!node) {\n        throw new Error(`\\`${optionName}\\` did not return a node`);\n      }\n    }\n\n    return node;\n  };\n\n  const getInitialFocusNode = function () {\n    let node;\n\n    if (getNodeForOption('initialFocus') !== null) {\n      node = getNodeForOption('initialFocus');\n    } else if (containersContain(doc.activeElement)) {\n      node = doc.activeElement;\n    } else {\n      const firstTabbableGroup = state.tabbableGroups[0];\n      const firstTabbableNode =\n        firstTabbableGroup && firstTabbableGroup.firstTabbableNode;\n      node = firstTabbableNode || getNodeForOption('fallbackFocus');\n    }\n\n    if (!node) {\n      throw new Error(\n        'Your focus-trap needs to have at least one focusable element'\n      );\n    }\n\n    return node;\n  };\n\n  const updateTabbableNodes = function () {\n    state.tabbableGroups = state.containers\n      .map((container) => {\n        const tabbableNodes = tabbable(container);\n\n        if (tabbableNodes.length > 0) {\n          return {\n            container,\n            firstTabbableNode: tabbableNodes[0],\n            lastTabbableNode: tabbableNodes[tabbableNodes.length - 1],\n          };\n        }\n\n        return undefined;\n      })\n      .filter((group) => !!group); // remove groups with no tabbable nodes\n\n    // throw if no groups have tabbable nodes and we don't have a fallback focus node either\n    if (\n      state.tabbableGroups.length <= 0 &&\n      !getNodeForOption('fallbackFocus')\n    ) {\n      throw new Error(\n        'Your focus-trap must have at least one container with at least one tabbable node in it at all times'\n      );\n    }\n  };\n\n  const tryFocus = function (node) {\n    if (node === doc.activeElement) {\n      return;\n    }\n    if (!node || !node.focus) {\n      tryFocus(getInitialFocusNode());\n      return;\n    }\n\n    node.focus({ preventScroll: !!config.preventScroll });\n    state.mostRecentlyFocusedNode = node;\n\n    if (isSelectableInput(node)) {\n      node.select();\n    }\n  };\n\n  const getReturnFocusNode = function (previousActiveElement) {\n    const node = getNodeForOption('setReturnFocus');\n\n    return node ? node : previousActiveElement;\n  };\n\n  // This needs to be done on mousedown and touchstart instead of click\n  // so that it precedes the focus event.\n  const checkPointerDown = function (e) {\n    if (containersContain(e.target)) {\n      // allow the click since it ocurred inside the trap\n      return;\n    }\n\n    if (valueOrHandler(config.clickOutsideDeactivates, e)) {\n      // immediately deactivate the trap\n      trap.deactivate({\n        // if, on deactivation, we should return focus to the node originally-focused\n        //  when the trap was activated (or the configured `setReturnFocus` node),\n        //  then assume it's also OK to return focus to the outside node that was\n        //  just clicked, causing deactivation, as long as that node is focusable;\n        //  if it isn't focusable, then return focus to the original node focused\n        //  on activation (or the configured `setReturnFocus` node)\n        // NOTE: by setting `returnFocus: false`, deactivate() will do nothing,\n        //  which will result in the outside click setting focus to the node\n        //  that was clicked, whether it's focusable or not; by setting\n        //  `returnFocus: true`, we'll attempt to re-focus the node originally-focused\n        //  on activation (or the configured `setReturnFocus` node)\n        returnFocus: config.returnFocusOnDeactivate && !isFocusable(e.target),\n      });\n      return;\n    }\n\n    // This is needed for mobile devices.\n    // (If we'll only let `click` events through,\n    // then on mobile they will be blocked anyways if `touchstart` is blocked.)\n    if (valueOrHandler(config.allowOutsideClick, e)) {\n      // allow the click outside the trap to take place\n      return;\n    }\n\n    // otherwise, prevent the click\n    e.preventDefault();\n  };\n\n  // In case focus escapes the trap for some strange reason, pull it back in.\n  const checkFocusIn = function (e) {\n    const targetContained = containersContain(e.target);\n    // In Firefox when you Tab out of an iframe the Document is briefly focused.\n    if (targetContained || e.target instanceof Document) {\n      if (targetContained) {\n        state.mostRecentlyFocusedNode = e.target;\n      }\n    } else {\n      // escaped! pull it back in to where it just left\n      e.stopImmediatePropagation();\n      tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode());\n    }\n  };\n\n  // Hijack Tab events on the first and last focusable nodes of the trap,\n  // in order to prevent focus from escaping. If it escapes for even a\n  // moment it can end up scrolling the page and causing confusion so we\n  // kind of need to capture the action at the keydown phase.\n  const checkTab = function (e) {\n    updateTabbableNodes();\n\n    let destinationNode = null;\n\n    if (state.tabbableGroups.length > 0) {\n      // make sure the target is actually contained in a group\n      const containerIndex = findIndex(state.tabbableGroups, ({ container }) =>\n        container.contains(e.target)\n      );\n\n      if (containerIndex < 0) {\n        // target not found in any group: quite possible focus has escaped the trap,\n        //  so bring it back in to...\n        if (e.shiftKey) {\n          // ...the last node in the last group\n          destinationNode =\n            state.tabbableGroups[state.tabbableGroups.length - 1]\n              .lastTabbableNode;\n        } else {\n          // ...the first node in the first group\n          destinationNode = state.tabbableGroups[0].firstTabbableNode;\n        }\n      } else if (e.shiftKey) {\n        // REVERSE\n        const startOfGroupIndex = findIndex(\n          state.tabbableGroups,\n          ({ firstTabbableNode }) => e.target === firstTabbableNode\n        );\n\n        if (startOfGroupIndex >= 0) {\n          const destinationGroupIndex =\n            startOfGroupIndex === 0\n              ? state.tabbableGroups.length - 1\n              : startOfGroupIndex - 1;\n\n          const destinationGroup = state.tabbableGroups[destinationGroupIndex];\n          destinationNode = destinationGroup.lastTabbableNode;\n        }\n      } else {\n        // FORWARD\n        const lastOfGroupIndex = findIndex(\n          state.tabbableGroups,\n          ({ lastTabbableNode }) => e.target === lastTabbableNode\n        );\n\n        if (lastOfGroupIndex >= 0) {\n          const destinationGroupIndex =\n            lastOfGroupIndex === state.tabbableGroups.length - 1\n              ? 0\n              : lastOfGroupIndex + 1;\n\n          const destinationGroup = state.tabbableGroups[destinationGroupIndex];\n          destinationNode = destinationGroup.firstTabbableNode;\n        }\n      }\n    } else {\n      destinationNode = getNodeForOption('fallbackFocus');\n    }\n\n    if (destinationNode) {\n      e.preventDefault();\n      tryFocus(destinationNode);\n    }\n  };\n\n  const checkKey = function (e) {\n    if (config.escapeDeactivates !== false && isEscapeEvent(e)) {\n      e.preventDefault();\n      trap.deactivate();\n      return;\n    }\n\n    if (isTabEvent(e)) {\n      checkTab(e);\n      return;\n    }\n  };\n\n  const checkClick = function (e) {\n    if (valueOrHandler(config.clickOutsideDeactivates, e)) {\n      return;\n    }\n\n    if (containersContain(e.target)) {\n      return;\n    }\n\n    if (valueOrHandler(config.allowOutsideClick, e)) {\n      return;\n    }\n\n    e.preventDefault();\n    e.stopImmediatePropagation();\n  };\n\n  //\n  // EVENT LISTENERS\n  //\n\n  const addListeners = function () {\n    if (!state.active) {\n      return;\n    }\n\n    // There can be only one listening focus trap at a time\n    activeFocusTraps.activateTrap(trap);\n\n    // Delay ensures that the focused element doesn't capture the event\n    // that caused the focus trap activation.\n    activeFocusDelay = config.delayInitialFocus\n      ? delay(function () {\n          tryFocus(getInitialFocusNode());\n        })\n      : tryFocus(getInitialFocusNode());\n\n    doc.addEventListener('focusin', checkFocusIn, true);\n    doc.addEventListener('mousedown', checkPointerDown, {\n      capture: true,\n      passive: false,\n    });\n    doc.addEventListener('touchstart', checkPointerDown, {\n      capture: true,\n      passive: false,\n    });\n    doc.addEventListener('click', checkClick, {\n      capture: true,\n      passive: false,\n    });\n    doc.addEventListener('keydown', checkKey, {\n      capture: true,\n      passive: false,\n    });\n\n    return trap;\n  };\n\n  const removeListeners = function () {\n    if (!state.active) {\n      return;\n    }\n\n    doc.removeEventListener('focusin', checkFocusIn, true);\n    doc.removeEventListener('mousedown', checkPointerDown, true);\n    doc.removeEventListener('touchstart', checkPointerDown, true);\n    doc.removeEventListener('click', checkClick, true);\n    doc.removeEventListener('keydown', checkKey, true);\n\n    return trap;\n  };\n\n  //\n  // TRAP DEFINITION\n  //\n\n  trap = {\n    activate(activateOptions) {\n      if (state.active) {\n        return this;\n      }\n\n      updateTabbableNodes();\n\n      state.active = true;\n      state.paused = false;\n      state.nodeFocusedBeforeActivation = doc.activeElement;\n\n      const onActivate =\n        activateOptions && activateOptions.onActivate\n          ? activateOptions.onActivate\n          : config.onActivate;\n      if (onActivate) {\n        onActivate();\n      }\n\n      addListeners();\n      return this;\n    },\n\n    deactivate(deactivateOptions) {\n      if (!state.active) {\n        return this;\n      }\n\n      clearTimeout(activeFocusDelay);\n\n      removeListeners();\n      state.active = false;\n      state.paused = false;\n\n      activeFocusTraps.deactivateTrap(trap);\n\n      const onDeactivate =\n        deactivateOptions && deactivateOptions.onDeactivate !== undefined\n          ? deactivateOptions.onDeactivate\n          : config.onDeactivate;\n      if (onDeactivate) {\n        onDeactivate();\n      }\n\n      const returnFocus =\n        deactivateOptions && deactivateOptions.returnFocus !== undefined\n          ? deactivateOptions.returnFocus\n          : config.returnFocusOnDeactivate;\n\n      if (returnFocus) {\n        delay(function () {\n          tryFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation));\n        });\n      }\n\n      return this;\n    },\n\n    pause() {\n      if (state.paused || !state.active) {\n        return this;\n      }\n\n      state.paused = true;\n      removeListeners();\n\n      return this;\n    },\n\n    unpause() {\n      if (!state.paused || !state.active) {\n        return this;\n      }\n\n      state.paused = false;\n      updateTabbableNodes();\n      addListeners();\n\n      return this;\n    },\n\n    updateContainerElements(containerElements) {\n      const elementsAsArray = [].concat(containerElements).filter(Boolean);\n\n      state.containers = elementsAsArray.map((element) =>\n        typeof element === 'string' ? doc.querySelector(element) : element\n      );\n\n      if (state.active) {\n        updateTabbableNodes();\n      }\n\n      return this;\n    },\n  };\n\n  // initialize container elements\n  trap.updateContainerElements(elements);\n\n  return trap;\n};\n\nexport { createFocusTrap };\n"],"names":["activeFocusDelay","trapQueue","activeFocusTraps","activateTrap","trap","length","activeTrap","pause","trapIndex","indexOf","splice","push","deactivateTrap","unpause","delay","fn","setTimeout","findIndex","arr","idx","every","value","i","valueOrHandler","params","elements","userOptions","doc","document","config","returnFocusOnDeactivate","escapeDeactivates","delayInitialFocus","state","containers","tabbableGroups","nodeFocusedBeforeActivation","mostRecentlyFocusedNode","active","paused","containersContain","element","some","container","contains","getNodeForOption","optionName","optionValue","node","querySelector","Error","getInitialFocusNode","activeElement","firstTabbableGroup","firstTabbableNode","updateTabbableNodes","map","tabbableNodes","tabbable","lastTabbableNode","filter","group","tryFocus","focus","preventScroll","tagName","toLowerCase","select","isSelectableInput","checkPointerDown","e","target","clickOutsideDeactivates","deactivate","returnFocus","isFocusable","allowOutsideClick","preventDefault","checkFocusIn","targetContained","Document","stopImmediatePropagation","checkKey","key","keyCode","isEscapeEvent","isTabEvent","destinationNode","shiftKey","startOfGroupIndex","destinationGroupIndex","lastOfGroupIndex","checkTab","checkClick","addListeners","addEventListener","capture","passive","removeListeners","removeEventListener","activate","activateOptions","this","onActivate","deactivateOptions","clearTimeout","onDeactivate","undefined","previousActiveElement","updateContainerElements","containerElements","elementsAsArray","concat","Boolean"],"mappings":";;;;ysBAEA,IAAIA,EAGIC,EADFC,GACED,EAAY,GACX,CACLE,sBAAaC,MACPH,EAAUI,OAAS,EAAG,KAClBC,EAAaL,EAAUA,EAAUI,OAAS,GAC5CC,IAAeF,GACjBE,EAAWC,YAITC,EAAYP,EAAUQ,QAAQL,IACjB,IAAfI,GAIFP,EAAUS,OAAOF,EAAW,GAH5BP,EAAUU,KAAKP,IAQnBQ,wBAAeR,OACPI,EAAYP,EAAUQ,QAAQL,IACjB,IAAfI,GACFP,EAAUS,OAAOF,EAAW,GAG1BP,EAAUI,OAAS,GACrBJ,EAAUA,EAAUI,OAAS,GAAGQ,aAsBlCC,EAAQ,SAAUC,UACfC,WAAWD,EAAI,IAKlBE,EAAY,SAAUC,EAAKH,OAC3BI,GAAO,SAEXD,EAAIE,OAAM,SAAUC,EAAOC,UACrBP,EAAGM,KACLF,EAAMG,GACC,MAMJH,GAUHI,EAAiB,SAAUF,8BAAUG,mCAAAA,0BACjB,mBAAVH,EAAuBA,eAASG,GAAUH,qBAGlC,SAAUI,EAAUC,OA6BtCtB,EA5BEuB,EAAMC,SAENC,mWACJC,yBAAyB,EACzBC,mBAAmB,EACnBC,mBAAmB,GAChBN,GAGCO,EAAQ,CAEZC,WAAY,GASZC,eAAgB,GAEhBC,4BAA6B,KAC7BC,wBAAyB,KACzBC,QAAQ,EACRC,QAAQ,GAKJC,EAAoB,SAAUC,UAC3BR,EAAMC,WAAWQ,MAAK,SAACC,UAAcA,EAAUC,SAASH,OAG3DI,EAAmB,SAAUC,OAC3BC,EAAclB,EAAOiB,OACtBC,SACI,SAGLC,EAAOD,KAEgB,iBAAhBA,KACTC,EAAOrB,EAAIsB,cAAcF,UAEjB,IAAIG,iBAAWJ,mCAIE,mBAAhBC,KACTC,EAAOD,WAEC,IAAIG,iBAAWJ,qCAIlBE,GAGHG,EAAsB,eACtBH,KAEqC,OAArCH,EAAiB,gBACnBG,EAAOH,EAAiB,qBACnB,GAAIL,EAAkBb,EAAIyB,eAC/BJ,EAAOrB,EAAIyB,kBACN,KACCC,EAAqBpB,EAAME,eAAe,GAGhDa,EADEK,GAAsBA,EAAmBC,mBACfT,EAAiB,qBAG1CG,QACG,IAAIE,MACR,uEAIGF,GAGHO,EAAsB,cAC1BtB,EAAME,eAAiBF,EAAMC,WAC1BsB,KAAI,SAACb,OACEc,EAAgBC,WAASf,MAE3Bc,EAAcpD,OAAS,QAClB,CACLsC,UAAAA,EACAW,kBAAmBG,EAAc,GACjCE,iBAAkBF,EAAcA,EAAcpD,OAAS,OAM5DuD,QAAO,SAACC,WAAYA,KAIrB5B,EAAME,eAAe9B,QAAU,IAC9BwC,EAAiB,uBAEZ,IAAIK,MACR,wGAKAY,EAAW,SAAXA,EAAqBd,GACrBA,IAASrB,EAAIyB,gBAGZJ,GAASA,EAAKe,OAKnBf,EAAKe,MAAM,CAAEC,gBAAiBnC,EAAOmC,gBACrC/B,EAAMI,wBAA0BW,EAzKV,SAAUA,UAEhCA,EAAKiB,SAC0B,UAA/BjB,EAAKiB,QAAQC,eACU,mBAAhBlB,EAAKmB,OAuKRC,CAAkBpB,IACpBA,EAAKmB,UARLL,EAASX,OAoBPkB,EAAmB,SAAUC,GAC7B9B,EAAkB8B,EAAEC,UAKpBhD,EAAeM,EAAO2C,wBAAyBF,GAEjDlE,EAAKqE,WAAW,CAYdC,YAAa7C,EAAOC,0BAA4B6C,cAAYL,EAAEC,UAQ9DhD,EAAeM,EAAO+C,kBAAmBN,IAM7CA,EAAEO,mBAIEC,EAAe,SAAUR,OACvBS,EAAkBvC,EAAkB8B,EAAEC,QAExCQ,GAAmBT,EAAEC,kBAAkBS,SACrCD,IACF9C,EAAMI,wBAA0BiC,EAAEC,SAIpCD,EAAEW,2BACFnB,EAAS7B,EAAMI,yBAA2Bc,OA0ExC+B,EAAW,SAAUZ,OACQ,IAA7BzC,EAAOE,mBA3SO,SAAUuC,SACb,WAAVA,EAAEa,KAA8B,QAAVb,EAAEa,KAA+B,KAAdb,EAAEc,QA0SNC,CAAcf,UACtDA,EAAEO,sBACFzE,EAAKqE,cAzSQ,SAAUH,SACV,QAAVA,EAAEa,KAA+B,IAAdb,EAAEc,SA4StBE,CAAWhB,IAzEA,SAAUA,GACzBf,QAEIgC,EAAkB,QAElBtD,EAAME,eAAe9B,OAAS,KAETY,EAAUgB,EAAME,gBAAgB,qBAAGQ,UAC9CC,SAAS0B,EAAEC,WAGF,EAKjBgB,EAFEjB,EAAEkB,SAGFvD,EAAME,eAAeF,EAAME,eAAe9B,OAAS,GAChDsD,iBAGa1B,EAAME,eAAe,GAAGmB,uBAEvC,GAAIgB,EAAEkB,SAAU,KAEfC,EAAoBxE,EACxBgB,EAAME,gBACN,gBAAGmB,IAAAA,yBAAwBgB,EAAEC,SAAWjB,QAGtCmC,GAAqB,EAAG,KACpBC,EACkB,IAAtBD,EACIxD,EAAME,eAAe9B,OAAS,EAC9BoF,EAAoB,EAG1BF,EADyBtD,EAAME,eAAeuD,GACX/B,sBAEhC,KAECgC,EAAmB1E,EACvBgB,EAAME,gBACN,gBAAGwB,IAAAA,wBAAuBW,EAAEC,SAAWZ,QAGrCgC,GAAoB,EAAG,KACnBD,EACJC,IAAqB1D,EAAME,eAAe9B,OAAS,EAC/C,EACAsF,EAAmB,EAGzBJ,EADyBtD,EAAME,eAAeuD,GACXpC,wBAIvCiC,EAAkB1C,EAAiB,iBAGjC0C,IACFjB,EAAEO,iBACFf,EAASyB,IAYTK,CAAStB,IAKPuB,EAAa,SAAUvB,GACvB/C,EAAeM,EAAO2C,wBAAyBF,IAI/C9B,EAAkB8B,EAAEC,SAIpBhD,EAAeM,EAAO+C,kBAAmBN,KAI7CA,EAAEO,iBACFP,EAAEW,6BAOEa,EAAe,cACd7D,EAAMK,cAKXpC,EAAiBC,aAAaC,GAI9BJ,EAAmB6B,EAAOG,kBACtBlB,GAAM,WACJgD,EAASX,QAEXW,EAASX,KAEbxB,EAAIoE,iBAAiB,UAAWjB,GAAc,GAC9CnD,EAAIoE,iBAAiB,YAAa1B,EAAkB,CAClD2B,SAAS,EACTC,SAAS,IAEXtE,EAAIoE,iBAAiB,aAAc1B,EAAkB,CACnD2B,SAAS,EACTC,SAAS,IAEXtE,EAAIoE,iBAAiB,QAASF,EAAY,CACxCG,SAAS,EACTC,SAAS,IAEXtE,EAAIoE,iBAAiB,UAAWb,EAAU,CACxCc,SAAS,EACTC,SAAS,IAGJ7F,GAGH8F,EAAkB,cACjBjE,EAAMK,cAIXX,EAAIwE,oBAAoB,UAAWrB,GAAc,GACjDnD,EAAIwE,oBAAoB,YAAa9B,GAAkB,GACvD1C,EAAIwE,oBAAoB,aAAc9B,GAAkB,GACxD1C,EAAIwE,oBAAoB,QAASN,GAAY,GAC7ClE,EAAIwE,oBAAoB,UAAWjB,GAAU,GAEtC9E,UAOTA,EAAO,CACLgG,kBAASC,MACHpE,EAAMK,cACDgE,KAGT/C,IAEAtB,EAAMK,QAAS,EACfL,EAAMM,QAAS,EACfN,EAAMG,4BAA8BT,EAAIyB,kBAElCmD,EACJF,GAAmBA,EAAgBE,WAC/BF,EAAgBE,WAChB1E,EAAO0E,kBACTA,GACFA,IAGFT,IACOQ,MAGT7B,oBAAW+B,OACJvE,EAAMK,cACFgE,KAGTG,aAAazG,GAEbkG,IACAjE,EAAMK,QAAS,EACfL,EAAMM,QAAS,EAEfrC,EAAiBU,eAAeR,OAE1BsG,EACJF,QAAwDG,IAAnCH,EAAkBE,aACnCF,EAAkBE,aAClB7E,EAAO6E,oBACTA,GACFA,KAIAF,QAAuDG,IAAlCH,EAAkB9B,YACnC8B,EAAkB9B,YAClB7C,EAAOC,0BAGXhB,GAAM,WA9Qe,IAAU8F,EA+Q7B9C,GA/Q6B8C,EA+QD3E,EAAMG,4BA9Q3BS,EAAiB,mBAET+D,OAgRZN,MAGT/F,wBACM0B,EAAMM,SAAWN,EAAMK,SAI3BL,EAAMM,QAAS,EACf2D,KAJSI,MASXzF,0BACOoB,EAAMM,QAAWN,EAAMK,QAI5BL,EAAMM,QAAS,EACfgB,IACAuC,IAEOQ,MAPEA,MAUXO,iCAAwBC,OAChBC,EAAkB,GAAGC,OAAOF,GAAmBlD,OAAOqD,gBAE5DhF,EAAMC,WAAa6E,EAAgBvD,KAAI,SAACf,SACnB,iBAAZA,EAAuBd,EAAIsB,cAAcR,GAAWA,KAGzDR,EAAMK,QACRiB,IAGK+C,QAKNO,wBAAwBpF,GAEtBrB"}
+{"version":3,"file":"focus-trap.umd.min.js","sources":["../index.js"],"sourcesContent":["import { tabbable, isFocusable } from 'tabbable';\n\nlet activeFocusDelay;\n\nconst activeFocusTraps = (function () {\n  const trapQueue = [];\n  return {\n    activateTrap(trap) {\n      if (trapQueue.length > 0) {\n        const activeTrap = trapQueue[trapQueue.length - 1];\n        if (activeTrap !== trap) {\n          activeTrap.pause();\n        }\n      }\n\n      const trapIndex = trapQueue.indexOf(trap);\n      if (trapIndex === -1) {\n        trapQueue.push(trap);\n      } else {\n        // move this existing trap to the front of the queue\n        trapQueue.splice(trapIndex, 1);\n        trapQueue.push(trap);\n      }\n    },\n\n    deactivateTrap(trap) {\n      const trapIndex = trapQueue.indexOf(trap);\n      if (trapIndex !== -1) {\n        trapQueue.splice(trapIndex, 1);\n      }\n\n      if (trapQueue.length > 0) {\n        trapQueue[trapQueue.length - 1].unpause();\n      }\n    },\n  };\n})();\n\nconst isSelectableInput = function (node) {\n  return (\n    node.tagName &&\n    node.tagName.toLowerCase() === 'input' &&\n    typeof node.select === 'function'\n  );\n};\n\nconst isEscapeEvent = function (e) {\n  return e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27;\n};\n\nconst isTabEvent = function (e) {\n  return e.key === 'Tab' || e.keyCode === 9;\n};\n\nconst delay = function (fn) {\n  return setTimeout(fn, 0);\n};\n\n// Array.find/findIndex() are not supported on IE; this replicates enough\n//  of Array.findIndex() for our needs\nconst findIndex = function (arr, fn) {\n  let idx = -1;\n\n  arr.every(function (value, i) {\n    if (fn(value)) {\n      idx = i;\n      return false; // break\n    }\n\n    return true; // next\n  });\n\n  return idx;\n};\n\n/**\n * Get an option's value when it could be a plain value, or a handler that provides\n *  the value.\n * @param {*} value Option's value to check.\n * @param {...*} [params] Any parameters to pass to the handler, if `value` is a function.\n * @returns {*} The `value`, or the handler's returned value.\n */\nconst valueOrHandler = function (value, ...params) {\n  return typeof value === 'function' ? value(...params) : value;\n};\n\nconst createFocusTrap = function (elements, userOptions) {\n  const doc = document;\n\n  const config = {\n    returnFocusOnDeactivate: true,\n    escapeDeactivates: true,\n    delayInitialFocus: true,\n    ...userOptions,\n  };\n\n  const state = {\n    // @type {Array<HTMLElement>}\n    containers: [],\n\n    // list of objects identifying the first and last tabbable nodes in all containers/groups in\n    //  the trap\n    // NOTE: it's possible that a group has no tabbable nodes if nodes get removed while the trap\n    //  is active, but the trap should never get to a state where there isn't at least one group\n    //  with at least one tabbable node in it (that would lead to an error condition that would\n    //  result in an error being thrown)\n    // @type {Array<{ container: HTMLElement, firstTabbableNode: HTMLElement|null, lastTabbableNode: HTMLElement|null }>}\n    tabbableGroups: [],\n\n    nodeFocusedBeforeActivation: null,\n    mostRecentlyFocusedNode: null,\n    active: false,\n    paused: false,\n  };\n\n  let 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\n\n  const containersContain = function (element) {\n    return state.containers.some((container) => container.contains(element));\n  };\n\n  const getNodeForOption = function (optionName) {\n    const optionValue = config[optionName];\n    if (!optionValue) {\n      return null;\n    }\n\n    let node = optionValue;\n\n    if (typeof optionValue === 'string') {\n      node = doc.querySelector(optionValue);\n      if (!node) {\n        throw new Error(`\\`${optionName}\\` refers to no known node`);\n      }\n    }\n\n    if (typeof optionValue === 'function') {\n      node = optionValue();\n      if (!node) {\n        throw new Error(`\\`${optionName}\\` did not return a node`);\n      }\n    }\n\n    return node;\n  };\n\n  const getInitialFocusNode = function () {\n    let node;\n\n    if (getNodeForOption('initialFocus') !== null) {\n      node = getNodeForOption('initialFocus');\n    } else if (containersContain(doc.activeElement)) {\n      node = doc.activeElement;\n    } else {\n      const firstTabbableGroup = state.tabbableGroups[0];\n      const firstTabbableNode =\n        firstTabbableGroup && firstTabbableGroup.firstTabbableNode;\n      node = firstTabbableNode || getNodeForOption('fallbackFocus');\n    }\n\n    if (!node) {\n      throw new Error(\n        'Your focus-trap needs to have at least one focusable element'\n      );\n    }\n\n    return node;\n  };\n\n  const updateTabbableNodes = function () {\n    state.tabbableGroups = state.containers\n      .map((container) => {\n        const tabbableNodes = tabbable(container);\n\n        if (tabbableNodes.length > 0) {\n          return {\n            container,\n            firstTabbableNode: tabbableNodes[0],\n            lastTabbableNode: tabbableNodes[tabbableNodes.length - 1],\n          };\n        }\n\n        return undefined;\n      })\n      .filter((group) => !!group); // remove groups with no tabbable nodes\n\n    // throw if no groups have tabbable nodes and we don't have a fallback focus node either\n    if (\n      state.tabbableGroups.length <= 0 &&\n      !getNodeForOption('fallbackFocus')\n    ) {\n      throw new Error(\n        'Your focus-trap must have at least one container with at least one tabbable node in it at all times'\n      );\n    }\n  };\n\n  const tryFocus = function (node) {\n    if (node === doc.activeElement) {\n      return;\n    }\n    if (!node || !node.focus) {\n      tryFocus(getInitialFocusNode());\n      return;\n    }\n\n    node.focus({ preventScroll: !!config.preventScroll });\n    state.mostRecentlyFocusedNode = node;\n\n    if (isSelectableInput(node)) {\n      node.select();\n    }\n  };\n\n  const getReturnFocusNode = function (previousActiveElement) {\n    const node = getNodeForOption('setReturnFocus');\n\n    return node ? node : previousActiveElement;\n  };\n\n  // This needs to be done on mousedown and touchstart instead of click\n  // so that it precedes the focus event.\n  const checkPointerDown = function (e) {\n    if (containersContain(e.target)) {\n      // allow the click since it ocurred inside the trap\n      return;\n    }\n\n    if (valueOrHandler(config.clickOutsideDeactivates, e)) {\n      // immediately deactivate the trap\n      trap.deactivate({\n        // if, on deactivation, we should return focus to the node originally-focused\n        //  when the trap was activated (or the configured `setReturnFocus` node),\n        //  then assume it's also OK to return focus to the outside node that was\n        //  just clicked, causing deactivation, as long as that node is focusable;\n        //  if it isn't focusable, then return focus to the original node focused\n        //  on activation (or the configured `setReturnFocus` node)\n        // NOTE: by setting `returnFocus: false`, deactivate() will do nothing,\n        //  which will result in the outside click setting focus to the node\n        //  that was clicked, whether it's focusable or not; by setting\n        //  `returnFocus: true`, we'll attempt to re-focus the node originally-focused\n        //  on activation (or the configured `setReturnFocus` node)\n        returnFocus: config.returnFocusOnDeactivate && !isFocusable(e.target),\n      });\n      return;\n    }\n\n    // This is needed for mobile devices.\n    // (If we'll only let `click` events through,\n    // then on mobile they will be blocked anyways if `touchstart` is blocked.)\n    if (valueOrHandler(config.allowOutsideClick, e)) {\n      // allow the click outside the trap to take place\n      return;\n    }\n\n    // otherwise, prevent the click\n    e.preventDefault();\n  };\n\n  // In case focus escapes the trap for some strange reason, pull it back in.\n  const checkFocusIn = function (e) {\n    const targetContained = containersContain(e.target);\n    // In Firefox when you Tab out of an iframe the Document is briefly focused.\n    if (targetContained || e.target instanceof Document) {\n      if (targetContained) {\n        state.mostRecentlyFocusedNode = e.target;\n      }\n    } else {\n      // escaped! pull it back in to where it just left\n      e.stopImmediatePropagation();\n      tryFocus(state.mostRecentlyFocusedNode || getInitialFocusNode());\n    }\n  };\n\n  // Hijack Tab events on the first and last focusable nodes of the trap,\n  // in order to prevent focus from escaping. If it escapes for even a\n  // moment it can end up scrolling the page and causing confusion so we\n  // kind of need to capture the action at the keydown phase.\n  const checkTab = function (e) {\n    updateTabbableNodes();\n\n    let destinationNode = null;\n\n    if (state.tabbableGroups.length > 0) {\n      // make sure the target is actually contained in a group\n      // NOTE: the target may also be the container itself if it's tabbable\n      //  with tabIndex='-1' and was given initial focus\n      const containerIndex = findIndex(state.tabbableGroups, ({ container }) =>\n        container.contains(e.target)\n      );\n\n      if (containerIndex < 0) {\n        // target not found in any group: quite possible focus has escaped the trap,\n        //  so bring it back in to...\n        if (e.shiftKey) {\n          // ...the last node in the last group\n          destinationNode =\n            state.tabbableGroups[state.tabbableGroups.length - 1]\n              .lastTabbableNode;\n        } else {\n          // ...the first node in the first group\n          destinationNode = state.tabbableGroups[0].firstTabbableNode;\n        }\n      } else if (e.shiftKey) {\n        // REVERSE\n\n        // is the target the first tabbable node in a group?\n        let startOfGroupIndex = findIndex(\n          state.tabbableGroups,\n          ({ firstTabbableNode }) => e.target === firstTabbableNode\n        );\n\n        if (\n          startOfGroupIndex < 0 &&\n          state.tabbableGroups[containerIndex].container === e.target\n        ) {\n          // an exception case where the target is the container itself, in which\n          //  case, we should handle shift+tab as if focus were on the container's\n          //  first tabbable node, and go to the last tabbable node of the LAST group\n          startOfGroupIndex = containerIndex;\n        }\n\n        if (startOfGroupIndex >= 0) {\n          // YES: then shift+tab should go to the last tabbable node in the\n          //  previous group (and wrap around to the last tabbable node of\n          //  the LAST group if it's the first tabbable node of the FIRST group)\n          const destinationGroupIndex =\n            startOfGroupIndex === 0\n              ? state.tabbableGroups.length - 1\n              : startOfGroupIndex - 1;\n\n          const destinationGroup = state.tabbableGroups[destinationGroupIndex];\n          destinationNode = destinationGroup.lastTabbableNode;\n        }\n      } else {\n        // FORWARD\n\n        // is the target the last tabbable node in a group?\n        let lastOfGroupIndex = findIndex(\n          state.tabbableGroups,\n          ({ lastTabbableNode }) => e.target === lastTabbableNode\n        );\n\n        if (\n          lastOfGroupIndex < 0 &&\n          state.tabbableGroups[containerIndex].container === e.target\n        ) {\n          // an exception case where the target is the container itself, in which\n          //  case, we should handle tab as if focus were on the container's\n          //  last tabbable node, and go to the first tabbable node of the FIRST group\n          lastOfGroupIndex = containerIndex;\n        }\n\n        if (lastOfGroupIndex >= 0) {\n          // YES: then tab should go to the first tabbable node in the next\n          //  group (and wrap around to the first tabbable node of the FIRST\n          //  group if it's the last tabbable node of the LAST group)\n          const destinationGroupIndex =\n            lastOfGroupIndex === state.tabbableGroups.length - 1\n              ? 0\n              : lastOfGroupIndex + 1;\n\n          const destinationGroup = state.tabbableGroups[destinationGroupIndex];\n          destinationNode = destinationGroup.firstTabbableNode;\n        }\n      }\n    } else {\n      destinationNode = getNodeForOption('fallbackFocus');\n    }\n\n    if (destinationNode) {\n      e.preventDefault();\n      tryFocus(destinationNode);\n    }\n    // else, let the browser take care of [shift+]tab and move the focus\n  };\n\n  const checkKey = function (e) {\n    if (config.escapeDeactivates !== false && isEscapeEvent(e)) {\n      e.preventDefault();\n      trap.deactivate();\n      return;\n    }\n\n    if (isTabEvent(e)) {\n      checkTab(e);\n      return;\n    }\n  };\n\n  const checkClick = function (e) {\n    if (valueOrHandler(config.clickOutsideDeactivates, e)) {\n      return;\n    }\n\n    if (containersContain(e.target)) {\n      return;\n    }\n\n    if (valueOrHandler(config.allowOutsideClick, e)) {\n      return;\n    }\n\n    e.preventDefault();\n    e.stopImmediatePropagation();\n  };\n\n  //\n  // EVENT LISTENERS\n  //\n\n  const addListeners = function () {\n    if (!state.active) {\n      return;\n    }\n\n    // There can be only one listening focus trap at a time\n    activeFocusTraps.activateTrap(trap);\n\n    // Delay ensures that the focused element doesn't capture the event\n    // that caused the focus trap activation.\n    activeFocusDelay = config.delayInitialFocus\n      ? delay(function () {\n          tryFocus(getInitialFocusNode());\n        })\n      : tryFocus(getInitialFocusNode());\n\n    doc.addEventListener('focusin', checkFocusIn, true);\n    doc.addEventListener('mousedown', checkPointerDown, {\n      capture: true,\n      passive: false,\n    });\n    doc.addEventListener('touchstart', checkPointerDown, {\n      capture: true,\n      passive: false,\n    });\n    doc.addEventListener('click', checkClick, {\n      capture: true,\n      passive: false,\n    });\n    doc.addEventListener('keydown', checkKey, {\n      capture: true,\n      passive: false,\n    });\n\n    return trap;\n  };\n\n  const removeListeners = function () {\n    if (!state.active) {\n      return;\n    }\n\n    doc.removeEventListener('focusin', checkFocusIn, true);\n    doc.removeEventListener('mousedown', checkPointerDown, true);\n    doc.removeEventListener('touchstart', checkPointerDown, true);\n    doc.removeEventListener('click', checkClick, true);\n    doc.removeEventListener('keydown', checkKey, true);\n\n    return trap;\n  };\n\n  //\n  // TRAP DEFINITION\n  //\n\n  trap = {\n    activate(activateOptions) {\n      if (state.active) {\n        return this;\n      }\n\n      updateTabbableNodes();\n\n      state.active = true;\n      state.paused = false;\n      state.nodeFocusedBeforeActivation = doc.activeElement;\n\n      const onActivate =\n        activateOptions && activateOptions.onActivate\n          ? activateOptions.onActivate\n          : config.onActivate;\n      if (onActivate) {\n        onActivate();\n      }\n\n      addListeners();\n      return this;\n    },\n\n    deactivate(deactivateOptions) {\n      if (!state.active) {\n        return this;\n      }\n\n      clearTimeout(activeFocusDelay);\n\n      removeListeners();\n      state.active = false;\n      state.paused = false;\n\n      activeFocusTraps.deactivateTrap(trap);\n\n      const onDeactivate =\n        deactivateOptions && deactivateOptions.onDeactivate !== undefined\n          ? deactivateOptions.onDeactivate\n          : config.onDeactivate;\n      if (onDeactivate) {\n        onDeactivate();\n      }\n\n      const returnFocus =\n        deactivateOptions && deactivateOptions.returnFocus !== undefined\n          ? deactivateOptions.returnFocus\n          : config.returnFocusOnDeactivate;\n\n      if (returnFocus) {\n        delay(function () {\n          tryFocus(getReturnFocusNode(state.nodeFocusedBeforeActivation));\n        });\n      }\n\n      return this;\n    },\n\n    pause() {\n      if (state.paused || !state.active) {\n        return this;\n      }\n\n      state.paused = true;\n      removeListeners();\n\n      return this;\n    },\n\n    unpause() {\n      if (!state.paused || !state.active) {\n        return this;\n      }\n\n      state.paused = false;\n      updateTabbableNodes();\n      addListeners();\n\n      return this;\n    },\n\n    updateContainerElements(containerElements) {\n      const elementsAsArray = [].concat(containerElements).filter(Boolean);\n\n      state.containers = elementsAsArray.map((element) =>\n        typeof element === 'string' ? doc.querySelector(element) : element\n      );\n\n      if (state.active) {\n        updateTabbableNodes();\n      }\n\n      return this;\n    },\n  };\n\n  // initialize container elements\n  trap.updateContainerElements(elements);\n\n  return trap;\n};\n\nexport { createFocusTrap };\n"],"names":["activeFocusDelay","trapQueue","activeFocusTraps","activateTrap","trap","length","activeTrap","pause","trapIndex","indexOf","splice","push","deactivateTrap","unpause","delay","fn","setTimeout","findIndex","arr","idx","every","value","i","valueOrHandler","params","elements","userOptions","doc","document","config","returnFocusOnDeactivate","escapeDeactivates","delayInitialFocus","state","containers","tabbableGroups","nodeFocusedBeforeActivation","mostRecentlyFocusedNode","active","paused","containersContain","element","some","container","contains","getNodeForOption","optionName","optionValue","node","querySelector","Error","getInitialFocusNode","activeElement","firstTabbableGroup","firstTabbableNode","updateTabbableNodes","map","tabbableNodes","tabbable","lastTabbableNode","filter","group","tryFocus","focus","preventScroll","tagName","toLowerCase","select","isSelectableInput","checkPointerDown","e","target","clickOutsideDeactivates","deactivate","returnFocus","isFocusable","allowOutsideClick","preventDefault","checkFocusIn","targetContained","Document","stopImmediatePropagation","checkKey","key","keyCode","isEscapeEvent","isTabEvent","destinationNode","containerIndex","shiftKey","startOfGroupIndex","destinationGroupIndex","lastOfGroupIndex","checkTab","checkClick","addListeners","addEventListener","capture","passive","removeListeners","removeEventListener","activate","activateOptions","this","onActivate","deactivateOptions","clearTimeout","onDeactivate","undefined","previousActiveElement","updateContainerElements","containerElements","elementsAsArray","concat","Boolean"],"mappings":"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"}

package/index.js

@@ -283,6 +283,8 @@ const createFocusTrap = function (elements, userOptions) {
 
     if (state.tabbableGroups.length > 0) {
       // make sure the target is actually contained in a group
+      // NOTE: the target may also be the container itself if it's tabbable
+      //  with tabIndex='-1' and was given initial focus
       const containerIndex = findIndex(state.tabbableGroups, ({ container }) =>
         container.contains(e.target)
       );
@@ -301,12 +303,27 @@ const createFocusTrap = function (elements, userOptions) {
         }
       } else if (e.shiftKey) {
         // REVERSE
-        const startOfGroupIndex = findIndex(
+
+        // is the target the first tabbable node in a group?
+        let startOfGroupIndex = findIndex(
           state.tabbableGroups,
           ({ firstTabbableNode }) => e.target === firstTabbableNode
         );
 
+        if (
+          startOfGroupIndex < 0 &&
+          state.tabbableGroups[containerIndex].container === e.target
+        ) {
+          // an exception case where the target is the container itself, in which
+          //  case, we should handle shift+tab as if focus were on the container's
+          //  first tabbable node, and go to the last tabbable node of the LAST group
+          startOfGroupIndex = containerIndex;
+        }
+
         if (startOfGroupIndex >= 0) {
+          // YES: then shift+tab should go to the last tabbable node in the
+          //  previous group (and wrap around to the last tabbable node of
+          //  the LAST group if it's the first tabbable node of the FIRST group)
           const destinationGroupIndex =
             startOfGroupIndex === 0
               ? state.tabbableGroups.length - 1
@@ -317,12 +334,27 @@ const createFocusTrap = function (elements, userOptions) {
         }
       } else {
         // FORWARD
-        const lastOfGroupIndex = findIndex(
+
+        // is the target the last tabbable node in a group?
+        let lastOfGroupIndex = findIndex(
           state.tabbableGroups,
           ({ lastTabbableNode }) => e.target === lastTabbableNode
         );
 
+        if (
+          lastOfGroupIndex < 0 &&
+          state.tabbableGroups[containerIndex].container === e.target
+        ) {
+          // an exception case where the target is the container itself, in which
+          //  case, we should handle tab as if focus were on the container's
+          //  last tabbable node, and go to the first tabbable node of the FIRST group
+          lastOfGroupIndex = containerIndex;
+        }
+
         if (lastOfGroupIndex >= 0) {
+          // YES: then tab should go to the first tabbable node in the next
+          //  group (and wrap around to the first tabbable node of the FIRST
+          //  group if it's the last tabbable node of the LAST group)
           const destinationGroupIndex =
             lastOfGroupIndex === state.tabbableGroups.length - 1
               ? 0
@@ -340,6 +372,7 @@ const createFocusTrap = function (elements, userOptions) {
       e.preventDefault();
       tryFocus(destinationNode);
     }
+    // else, let the browser take care of [shift+]tab and move the focus
   };
 
   const checkKey = function (e) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "focus-trap",
-  "version": "6.3.0",
+  "version": "6.4.0",
   "description": "Trap focus within a DOM node.",
   "main": "dist/focus-trap.js",
   "module": "dist/focus-trap.esm.js",
@@ -32,8 +32,9 @@
     "test:types": "tsc index.d.ts",
     "test:unit": "echo \"No unit tests to run!\"",
     "test:cypress": "start-server-and-test start 9966 'cypress open'",
-    "test:cypress-ci": "start-server-and-test start 9966 'cypress run --browser $CYPRESS_BROWSER --headless'",
-    "test": "yarn format:check && yarn lint && yarn test:unit && yarn test:types && CYPRESS_BROWSER=chrome yarn test:cypress-ci",
+    "test:cypress:ci": "start-server-and-test start 9966 'cypress run --browser $CYPRESS_BROWSER --headless'",
+    "test:chrome": "CYPRESS_BROWSER=chrome yarn test:cypress:ci",
+    "test": "yarn format:check && yarn lint && yarn test:unit && yarn test:types && CYPRESS_BROWSER=chrome yarn test:cypress:ci",
     "prepare": "yarn build",
     "release": "yarn build && changeset publish"
   },
@@ -59,35 +60,35 @@
   },
   "homepage": "https://github.com/focus-trap/focus-trap#readme",
   "dependencies": {
-    "tabbable": "^5.1.5"
+    "tabbable": "^5.2.0"
   },
   "devDependencies": {
-    "@babel/cli": "^7.12.10",
-    "@babel/core": "^7.12.10",
-    "@babel/preset-env": "^7.12.11",
-    "@changesets/cli": "^2.12.0",
-    "@rollup/plugin-babel": "^5.2.2",
-    "@rollup/plugin-commonjs": "^17.0.0",
-    "@rollup/plugin-node-resolve": "^11.0.1",
-    "@testing-library/cypress": "^7.0.3",
+    "@babel/cli": "^7.13.14",
+    "@babel/core": "^7.13.15",
+    "@babel/preset-env": "^7.13.15",
+    "@changesets/cli": "^2.16.0",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^18.0.0",
+    "@rollup/plugin-node-resolve": "^11.2.1",
+    "@testing-library/cypress": "^7.0.5",
     "@types/jquery": "^3.5.5",
-    "all-contributors-cli": "^6.19.0",
+    "all-contributors-cli": "^6.20.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "babelify": "^10.0.0",
     "browserify": "^17.0.0",
     "budo": "^11.6.4",
-    "cypress": "^6.2.1",
+    "cypress": "^7.1.0",
     "cypress-plugin-tab": "^1.0.5",
-    "eslint": "^7.17.0",
-    "eslint-config-prettier": "^7.1.0",
+    "eslint": "^7.24.0",
+    "eslint-config-prettier": "^8.2.0",
     "eslint-plugin-cypress": "^2.11.2",
     "onchange": "^7.1.0",
     "prettier": "^2.2.1",
-    "rollup": "^2.36.1",
+    "rollup": "^2.45.2",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-terser": "^7.0.1",
-    "start-server-and-test": "^1.11.7",
-    "typescript": "^4.1.3"
+    "start-server-and-test": "^1.12.1",
+    "typescript": "^4.2.4"
   }
 }