focus-trap 2.4.2 → 2.4.6

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## 2.4.6
+
+- Add slight delay before moving focus to the first element in the trap.
+  This should prevent an occasional bug caused when the first element in the trap will close the trap if it picks up on the event that triggered the trap's opening.
+
+## 2.4.5
+
+- Fix `"main"` field in `package.json`.
+
+## 2.4.4
+
+- Publish UMD build so people can download it from `unpkg.com`.
+
+## 2.4.3
+
+- Fixed: TypeScript signature for `activate` function.
+
 ## 2.4.2
 
 - Added: TypeScript declaration file.

package/README.md

@@ -34,6 +34,8 @@ For more advanced usage (e.g. focus traps within focus traps), you can also paus
 npm install focus-trap
 ```
 
+You can also use a UMD version published to `unpkg.com` as `dist/focus-trap.js` and `dist/focus-trap.min.js`.
+
 ## Browser Support
 
 IE9+
@@ -62,7 +64,7 @@ Returns a new focus trap on `element`.
 - **clickOutsideDeactivates** {boolean}: Default: `false`. If `true`, a click outside the focus trap will deactivate the focus trap and allow the click event to do its thing.
 - **returnFocusOnDeactivate** {boolean}: Default: `true`. If `false`, when the trap is deactivated, focus will *not* return to the element that had focus before activation.
 
-### focusTrap.activate()
+### focusTrap.activate([activateOptions])
 
 Activates the focus trap, adding various event listeners to the document.
 
@@ -76,6 +78,12 @@ If none of the above exist, an error will be thrown. You cannot have a focus tra
 
 Returns the `focusTrap`.
 
+`activateOptions`:
+
+These options are used to override the focus trap's default behavior for this particular activation.
+
+- **onActivate** {function | null | false}: Default: whatever you chose for `createOptions.onActivate`. `null` or `false` are the equivalent of a `noop`.
+
 ### focusTrap.deactivate([deactivateOptions])
 
 Deactivates the focus trap.

package/dist/focus-trap.js

@@ -0,0 +1,363 @@
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.focusTrap = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
+var tabbable = require('tabbable');
+
+var listeningFocusTrap = null;
+
+function focusTrap(element, userOptions) {
+  var tabbableNodes = [];
+  var firstTabbableNode = null;
+  var lastTabbableNode = null;
+  var nodeFocusedBeforeActivation = null;
+  var active = false;
+  var paused = false;
+  var tabEvent = null;
+
+  var container = (typeof element === 'string')
+    ? document.querySelector(element)
+    : element;
+
+  var config = userOptions || {};
+  config.returnFocusOnDeactivate = (userOptions && userOptions.returnFocusOnDeactivate !== undefined)
+    ? userOptions.returnFocusOnDeactivate
+    : true;
+  config.escapeDeactivates = (userOptions && userOptions.escapeDeactivates !== undefined)
+    ? userOptions.escapeDeactivates
+    : true;
+
+  var trap = {
+    activate: activate,
+    deactivate: deactivate,
+    pause: pause,
+    unpause: unpause,
+  };
+
+  return trap;
+
+  function activate(activateOptions) {
+    if (active) return;
+
+    var defaultedActivateOptions = {
+      onActivate: (activateOptions && activateOptions.onActivate !== undefined)
+        ? activateOptions.onActivate
+        : config.onActivate,
+    };
+
+    active = true;
+    paused = false;
+    nodeFocusedBeforeActivation = document.activeElement;
+
+    if (defaultedActivateOptions.onActivate) {
+      defaultedActivateOptions.onActivate();
+    }
+
+    addListeners();
+    return trap;
+  }
+
+  function deactivate(deactivateOptions) {
+    if (!active) return;
+
+    var defaultedDeactivateOptions = {
+      returnFocus: (deactivateOptions && deactivateOptions.returnFocus !== undefined)
+        ? deactivateOptions.returnFocus
+        : config.returnFocusOnDeactivate,
+      onDeactivate: (deactivateOptions && deactivateOptions.onDeactivate !== undefined)
+        ? deactivateOptions.onDeactivate
+        : config.onDeactivate,
+    };
+
+    removeListeners();
+
+    if (defaultedDeactivateOptions.onDeactivate) {
+      defaultedDeactivateOptions.onDeactivate();
+    }
+
+    if (defaultedDeactivateOptions.returnFocus) {
+      setTimeout(function () {
+        tryFocus(nodeFocusedBeforeActivation);
+      }, 0);
+    }
+
+    active = false;
+    paused = false;
+    return this;
+  }
+
+  function pause() {
+    if (paused || !active) return;
+    paused = true;
+    removeListeners();
+  }
+
+  function unpause() {
+    if (!paused || !active) return;
+    paused = false;
+    addListeners();
+  }
+
+  function addListeners() {
+    if (!active) return;
+
+    // There can be only one listening focus trap at a time
+    if (listeningFocusTrap) {
+      listeningFocusTrap.pause();
+    }
+    listeningFocusTrap = trap;
+
+    updateTabbableNodes();
+    // Ensure that the focused element doesn't capture the event that caused the focus trap activation
+    setTimeout(function () {
+      tryFocus(firstFocusNode());
+    }, 0);
+    document.addEventListener('focus', checkFocus, true);
+    document.addEventListener('click', checkClick, true);
+    document.addEventListener('mousedown', checkPointerDown, true);
+    document.addEventListener('touchstart', checkPointerDown, true);
+    document.addEventListener('keydown', checkKey, true);
+
+    return trap;
+  }
+
+  function removeListeners() {
+    if (!active || listeningFocusTrap !== trap) return;
+
+    document.removeEventListener('focus', checkFocus, true);
+    document.removeEventListener('click', checkClick, true);
+    document.removeEventListener('mousedown', checkPointerDown, true);
+    document.removeEventListener('touchstart', checkPointerDown, true);
+    document.removeEventListener('keydown', checkKey, true);
+
+    listeningFocusTrap = null;
+
+    return trap;
+  }
+
+  function getNodeForOption(optionName) {
+    var optionValue = config[optionName];
+    var node = optionValue;
+    if (!optionValue) {
+      return null;
+    }
+    if (typeof optionValue === 'string') {
+      node = document.querySelector(optionValue);
+      if (!node) {
+        throw new Error('`' + optionName + '` refers to no known node');
+      }
+    }
+    if (typeof optionValue === 'function') {
+      node = optionValue();
+      if (!node) {
+        throw new Error('`' + optionName + '` did not return a node');
+      }
+    }
+    return node;
+  }
+
+  function firstFocusNode() {
+    var node;
+    if (getNodeForOption('initialFocus') !== null) {
+      node = getNodeForOption('initialFocus');
+    } else if (container.contains(document.activeElement)) {
+      node = document.activeElement;
+    } else {
+      node = tabbableNodes[0] || getNodeForOption('fallbackFocus');
+    }
+
+    if (!node) {
+      throw new Error('You can\'t have a focus-trap without at least one focusable element');
+    }
+
+    return node;
+  }
+
+  // This needs to be done on mousedown and touchstart instead of click
+  // so that it precedes the focus event
+  function checkPointerDown(e) {
+    if (config.clickOutsideDeactivates && !container.contains(e.target)) {
+      deactivate({ returnFocus: false });
+    }
+  }
+
+  function checkClick(e) {
+    if (config.clickOutsideDeactivates) return;
+    if (container.contains(e.target)) return;
+    e.preventDefault();
+    e.stopImmediatePropagation();
+  }
+
+  function checkFocus(e) {
+    if (container.contains(e.target)) return;
+    e.preventDefault();
+    e.stopImmediatePropagation();
+    // Checking for a blur method here resolves a Firefox issue (#15)
+    if (typeof e.target.blur === 'function') e.target.blur();
+
+    if (tabEvent) {
+      readjustFocus(tabEvent);
+    }
+  }
+
+  function checkKey(e) {
+    if (e.key === 'Tab' || e.keyCode === 9) {
+      handleTab(e);
+    }
+
+    if (config.escapeDeactivates !== false && isEscapeEvent(e)) {
+      deactivate();
+    }
+  }
+
+  function handleTab(e) {
+    updateTabbableNodes();
+
+    if (e.target.hasAttribute('tabindex') && Number(e.target.getAttribute('tabindex')) < 0) {
+      return tabEvent = e;
+    }
+
+    e.preventDefault();
+    var currentFocusIndex = tabbableNodes.indexOf(e.target);
+
+    if (e.shiftKey) {
+      if (e.target === firstTabbableNode || tabbableNodes.indexOf(e.target) === -1) {
+        return tryFocus(lastTabbableNode);
+      }
+      return tryFocus(tabbableNodes[currentFocusIndex - 1]);
+    }
+
+    if (e.target === lastTabbableNode) return tryFocus(firstTabbableNode);
+
+    tryFocus(tabbableNodes[currentFocusIndex + 1]);
+  }
+
+  function updateTabbableNodes() {
+    tabbableNodes = tabbable(container);
+    firstTabbableNode = tabbableNodes[0];
+    lastTabbableNode = tabbableNodes[tabbableNodes.length - 1];
+  }
+
+  function readjustFocus(e) {
+    if (e.shiftKey) return tryFocus(lastTabbableNode);
+
+    tryFocus(firstTabbableNode);
+  }
+}
+
+function isEscapeEvent(e) {
+  return e.key === 'Escape' || e.key === 'Esc' || e.keyCode === 27;
+}
+
+function tryFocus(node) {
+  if (!node || !node.focus) return;
+  if (node === document.activeElement)  return;
+
+  node.focus();
+  if (node.tagName.toLowerCase() === 'input') {
+    node.select();
+  }
+}
+
+module.exports = focusTrap;
+
+},{"tabbable":2}],2:[function(require,module,exports){
+module.exports = function(el) {
+  var basicTabbables = [];
+  var orderedTabbables = [];
+
+  // A node is "available" if
+  // - it's computed style
+  var isUnavailable = createIsUnavailable();
+
+  var candidateSelectors = [
+    'input',
+    'select',
+    'a[href]',
+    'textarea',
+    'button',
+    '[tabindex]',
+  ];
+
+  var candidates = el.querySelectorAll(candidateSelectors);
+
+  var candidate, candidateIndex;
+  for (var i = 0, l = candidates.length; i < l; i++) {
+    candidate = candidates[i];
+    candidateIndex = candidate.tabIndex;
+
+    if (
+      candidateIndex < 0
+      || (candidate.tagName === 'INPUT' && candidate.type === 'hidden')
+      || candidate.disabled
+      || isUnavailable(candidate)
+    ) {
+      continue;
+    }
+
+    if (candidateIndex === 0) {
+      basicTabbables.push(candidate);
+    } else {
+      orderedTabbables.push({
+        tabIndex: candidateIndex,
+        node: candidate,
+      });
+    }
+  }
+
+  var tabbableNodes = orderedTabbables
+    .sort(function(a, b) {
+      return a.tabIndex - b.tabIndex;
+    })
+    .map(function(a) {
+      return a.node
+    });
+
+  Array.prototype.push.apply(tabbableNodes, basicTabbables);
+
+  return tabbableNodes;
+}
+
+function createIsUnavailable() {
+  // Node cache must be refreshed on every check, in case
+  // the content of the element has changed
+  var isOffCache = [];
+
+  // "off" means `display: none;`, as opposed to "hidden",
+  // which means `visibility: hidden;`. getComputedStyle
+  // accurately reflects visiblity in context but not
+  // "off" state, so we need to recursively check parents.
+
+  function isOff(node, nodeComputedStyle) {
+    if (node === document.documentElement) return false;
+
+    // Find the cached node (Array.prototype.find not available in IE9)
+    for (var i = 0, length = isOffCache.length; i < length; i++) {
+      if (isOffCache[i][0] === node) return isOffCache[i][1];
+    }
+
+    nodeComputedStyle = nodeComputedStyle || window.getComputedStyle(node);
+
+    var result = false;
+
+    if (nodeComputedStyle.display === 'none') {
+      result = true;
+    } else if (node.parentNode) {
+      result = isOff(node.parentNode);
+    }
+
+    isOffCache.push([node, result]);
+
+    return result;
+  }
+
+  return function isUnavailable(node) {
+    if (node === document.documentElement) return false;
+
+    var computedStyle = window.getComputedStyle(node);
+
+    if (isOff(node, computedStyle)) return true;
+
+    return computedStyle.visibility === 'hidden';
+  }
+}
+
+},{}]},{},[1])(1)
+});

package/dist/focus-trap.min.js

@@ -0,0 +1 @@
+(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.focusTrap=f()}})(function(){var define,module,exports;return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s}({1:[function(require,module,exports){var tabbable=require("tabbable");var listeningFocusTrap=null;function focusTrap(element,userOptions){var tabbableNodes=[];var firstTabbableNode=null;var lastTabbableNode=null;var nodeFocusedBeforeActivation=null;var active=false;var paused=false;var tabEvent=null;var container=typeof element==="string"?document.querySelector(element):element;var config=userOptions||{};config.returnFocusOnDeactivate=userOptions&&userOptions.returnFocusOnDeactivate!==undefined?userOptions.returnFocusOnDeactivate:true;config.escapeDeactivates=userOptions&&userOptions.escapeDeactivates!==undefined?userOptions.escapeDeactivates:true;var trap={activate:activate,deactivate:deactivate,pause:pause,unpause:unpause};return trap;function activate(activateOptions){if(active)return;var defaultedActivateOptions={onActivate:activateOptions&&activateOptions.onActivate!==undefined?activateOptions.onActivate:config.onActivate};active=true;paused=false;nodeFocusedBeforeActivation=document.activeElement;if(defaultedActivateOptions.onActivate){defaultedActivateOptions.onActivate()}addListeners();return trap}function deactivate(deactivateOptions){if(!active)return;var defaultedDeactivateOptions={returnFocus:deactivateOptions&&deactivateOptions.returnFocus!==undefined?deactivateOptions.returnFocus:config.returnFocusOnDeactivate,onDeactivate:deactivateOptions&&deactivateOptions.onDeactivate!==undefined?deactivateOptions.onDeactivate:config.onDeactivate};removeListeners();if(defaultedDeactivateOptions.onDeactivate){defaultedDeactivateOptions.onDeactivate()}if(defaultedDeactivateOptions.returnFocus){setTimeout(function(){tryFocus(nodeFocusedBeforeActivation)},0)}active=false;paused=false;return this}function pause(){if(paused||!active)return;paused=true;removeListeners()}function unpause(){if(!paused||!active)return;paused=false;addListeners()}function addListeners(){if(!active)return;if(listeningFocusTrap){listeningFocusTrap.pause()}listeningFocusTrap=trap;updateTabbableNodes();setTimeout(function(){tryFocus(firstFocusNode())},0);document.addEventListener("focus",checkFocus,true);document.addEventListener("click",checkClick,true);document.addEventListener("mousedown",checkPointerDown,true);document.addEventListener("touchstart",checkPointerDown,true);document.addEventListener("keydown",checkKey,true);return trap}function removeListeners(){if(!active||listeningFocusTrap!==trap)return;document.removeEventListener("focus",checkFocus,true);document.removeEventListener("click",checkClick,true);document.removeEventListener("mousedown",checkPointerDown,true);document.removeEventListener("touchstart",checkPointerDown,true);document.removeEventListener("keydown",checkKey,true);listeningFocusTrap=null;return trap}function getNodeForOption(optionName){var optionValue=config[optionName];var node=optionValue;if(!optionValue){return null}if(typeof optionValue==="string"){node=document.querySelector(optionValue);if(!node){throw new Error("`"+optionName+"` refers to no known node")}}if(typeof optionValue==="function"){node=optionValue();if(!node){throw new Error("`"+optionName+"` did not return a node")}}return node}function firstFocusNode(){var node;if(getNodeForOption("initialFocus")!==null){node=getNodeForOption("initialFocus")}else if(container.contains(document.activeElement)){node=document.activeElement}else{node=tabbableNodes[0]||getNodeForOption("fallbackFocus")}if(!node){throw new Error("You can't have a focus-trap without at least one focusable element")}return node}function checkPointerDown(e){if(config.clickOutsideDeactivates&&!container.contains(e.target)){deactivate({returnFocus:false})}}function checkClick(e){if(config.clickOutsideDeactivates)return;if(container.contains(e.target))return;e.preventDefault();e.stopImmediatePropagation()}function checkFocus(e){if(container.contains(e.target))return;e.preventDefault();e.stopImmediatePropagation();if(typeof e.target.blur==="function")e.target.blur();if(tabEvent){readjustFocus(tabEvent)}}function checkKey(e){if(e.key==="Tab"||e.keyCode===9){handleTab(e)}if(config.escapeDeactivates!==false&&isEscapeEvent(e)){deactivate()}}function handleTab(e){updateTabbableNodes();if(e.target.hasAttribute("tabindex")&&Number(e.target.getAttribute("tabindex"))<0){return tabEvent=e}e.preventDefault();var currentFocusIndex=tabbableNodes.indexOf(e.target);if(e.shiftKey){if(e.target===firstTabbableNode||tabbableNodes.indexOf(e.target)===-1){return tryFocus(lastTabbableNode)}return tryFocus(tabbableNodes[currentFocusIndex-1])}if(e.target===lastTabbableNode)return tryFocus(firstTabbableNode);tryFocus(tabbableNodes[currentFocusIndex+1])}function updateTabbableNodes(){tabbableNodes=tabbable(container);firstTabbableNode=tabbableNodes[0];lastTabbableNode=tabbableNodes[tabbableNodes.length-1]}function readjustFocus(e){if(e.shiftKey)return tryFocus(lastTabbableNode);tryFocus(firstTabbableNode)}}function isEscapeEvent(e){return e.key==="Escape"||e.key==="Esc"||e.keyCode===27}function tryFocus(node){if(!node||!node.focus)return;if(node===document.activeElement)return;node.focus();if(node.tagName.toLowerCase()==="input"){node.select()}}module.exports=focusTrap},{tabbable:2}],2:[function(require,module,exports){module.exports=function(el){var basicTabbables=[];var orderedTabbables=[];var isUnavailable=createIsUnavailable();var candidateSelectors=["input","select","a[href]","textarea","button","[tabindex]"];var candidates=el.querySelectorAll(candidateSelectors);var candidate,candidateIndex;for(var i=0,l=candidates.length;i<l;i++){candidate=candidates[i];candidateIndex=candidate.tabIndex;if(candidateIndex<0||candidate.tagName==="INPUT"&&candidate.type==="hidden"||candidate.disabled||isUnavailable(candidate)){continue}if(candidateIndex===0){basicTabbables.push(candidate)}else{orderedTabbables.push({tabIndex:candidateIndex,node:candidate})}}var tabbableNodes=orderedTabbables.sort(function(a,b){return a.tabIndex-b.tabIndex}).map(function(a){return a.node});Array.prototype.push.apply(tabbableNodes,basicTabbables);return tabbableNodes};function createIsUnavailable(){var isOffCache=[];function isOff(node,nodeComputedStyle){if(node===document.documentElement)return false;for(var i=0,length=isOffCache.length;i<length;i++){if(isOffCache[i][0]===node)return isOffCache[i][1]}nodeComputedStyle=nodeComputedStyle||window.getComputedStyle(node);var result=false;if(nodeComputedStyle.display==="none"){result=true}else if(node.parentNode){result=isOff(node.parentNode)}isOffCache.push([node,result]);return result}return function isUnavailable(node){if(node===document.documentElement)return false;var computedStyle=window.getComputedStyle(node);if(isOff(node,computedStyle))return true;return computedStyle.visibility==="hidden"}}},{}]},{},[1])(1)});

package/index.d.ts

@@ -63,8 +63,8 @@ declare module "focus-trap" {
   }
 
   export interface FocusTrap {
-    activate(activateOptions: ActivateOptions): void;
-    deactivate(deactivateOptions: DeactivateOptions): void;
+    activate(activateOptions?: ActivateOptions): void;
+    deactivate(deactivateOptions?: DeactivateOptions): void;
     pause(): void;
     unpause(): void;
   }

package/index.js

@@ -104,7 +104,10 @@ function focusTrap(element, userOptions) {
     listeningFocusTrap = trap;
 
     updateTabbableNodes();
-    tryFocus(firstFocusNode());
+    // Ensure that the focused element doesn't capture the event that caused the focus trap activation
+    setTimeout(function () {
+      tryFocus(firstFocusNode());
+    }, 0);
     document.addEventListener('focus', checkFocus, true);
     document.addEventListener('click', checkClick, true);
     document.addEventListener('mousedown', checkPointerDown, true);

package/package.json

@@ -1,14 +1,19 @@
 {
   "name": "focus-trap",
-  "version": "2.4.2",
+  "version": "2.4.6",
   "description": "Trap focus within a DOM node.",
   "main": "index.js",
   "types": "index.d.ts",
   "scripts": {
     "lint": "eslint .",
     "demo-bundle": "browserify demo/js/index.js -o demo/demo-bundle.js",
+    "clean": "del-cli dist && make-dir dist",
+    "build-dev": "npm run clean && browserify index.js -s focusTrap > dist/focus-trap.js",
+    "minify": "uglifyjs dist/focus-trap.js > dist/focus-trap.min.js",
+    "build": "npm run build-dev && npm run minify",
     "start": "budo demo/js/index.js:demo-bundle.js --dir demo --live",
-    "test": "npm run lint"
+    "test": "npm run lint",
+    "prepublishOnly": "npm run build"
   },
   "repository": {
     "type": "git",
@@ -34,9 +39,13 @@
   "devDependencies": {
     "browserify": "^13.3.0",
     "budo": "^9.4.1",
-    "eslint": "^3.13.1"
+    "del-cli": "^1.1.0",
+    "eslint": "^3.13.1",
+    "make-dir-cli": "^1.0.0",
+    "uglify-js": "^3.3.22"
   },
   "files": [
+    "dist",
     "index.js",
     "index.d.ts"
   ]