react-modal - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

CHANGELOG.md

@@ -0,1 +1,7 @@
+v0.2.0 - Sat, 09 May 2015 05:16:40 GMT
+--------------------------------------
+
+- [f5fe537](../../commit/f5fe537) [added] Ability to specify style for the modal contents
+
+
 v0.1.1 - Tue, 31 Mar 2015 15:56:47 GMT
@@ -2,0 +8,0 @@ --------------------------------------

dist/react-modal.js

 !function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.ReactModal=e()}}(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);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.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(_dereq_,module,exports){
 var React = (typeof window !== "undefined" ? window.React : typeof global !== "undefined" ? global.React : null);
+var ExecutionEnvironment = _dereq_('react/lib/ExecutionEnvironment');
 var ModalPortal = React.createFactory(_dereq_('./ModalPortal'));
@@ -7,2 +8,4 @@ var ariaAppHider = _dereq_('../helpers/ariaAppHider');
 
+var SafeHTMLElement = ExecutionEnvironment.canUseDOM ? window.HTMLElement : {};
+
 var Modal = module.exports = React.createClass({
@@ -20,3 +23,3 @@
     onRequestClose: React.PropTypes.func,
-    appElement: React.PropTypes.instanceOf(HTMLElement),
+    appElement: React.PropTypes.instanceOf(SafeHTMLElement),
     closeTimeoutMS: React.PropTypes.number,
@@ -70,3 +73,3 @@ ariaHideApp: React.PropTypes.bool
 
-},{"../helpers/ariaAppHider":3,"../helpers/injectCSS":5,"./ModalPortal":2}],2:[function(_dereq_,module,exports){
+},{"../helpers/ariaAppHider":3,"../helpers/injectCSS":5,"./ModalPortal":2,"react/lib/ExecutionEnvironment":10}],2:[function(_dereq_,module,exports){
 var React = (typeof window !== "undefined" ? window.React : typeof global !== "undefined" ? global.React : null);
@@ -76,3 +79,3 @@ var div = React.DOM.div;
 var scopeTab = _dereq_('../helpers/scopeTab');
-var cx = _dereq_('react/lib/cx');
+var cx = _dereq_('classnames');
 
@@ -222,2 +225,3 @@ // so that our CSS is statically analyzable
           ref: "content",
+          style: this.props.style,
           className: cx(this.buildClassName('content'), this.props.className),
@@ -235,3 +239,3 @@ tabIndex: "-1",
 
-},{"../helpers/focusManager":4,"../helpers/scopeTab":6,"react/lib/cx":9}],3:[function(_dereq_,module,exports){
+},{"../helpers/focusManager":4,"../helpers/scopeTab":6,"classnames":9}],3:[function(_dereq_,module,exports){
 var _element = null;
@@ -289,2 +293,5 @@
     needToFocus = false;
+    if (!modalElement) {
+      return;
+    }
     // need to see how jQuery shims document.on('focusin') so we don't need the
@@ -462,58 +469,49 @@ // setTimeout, firefox doesn't support focusin, if it did, we could focus
 },{"./components/Modal":1}],9:[function(_dereq_,module,exports){
-/**
- * Copyright 2013-2015, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @providesModule cx
- */
+/*!
+  Copyright (c) 2015 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
 
-/**
- * This function is used to mark string literals representing CSS class names
- * so that they can be transformed statically. This allows for modularization
- * and minification of CSS class names.
- *
- * In static_upstream, this function is actually implemented, but it should
- * eventually be replaced with something more descriptive, and the transform
- * that is used in the main stack should be ported for use elsewhere.
- *
- * @param string|object className to modularize, or an object of key/values.
- *                      In the object case, the values are conditions that
- *                      determine if the className keys should be included.
- * @param [string ...]  Variable list of classNames in the string case.
- * @return string       Renderable space-separated CSS className.
- */
+function classNames() {
+	var classes = '';
+	var arg;
 
-'use strict';
-var warning = _dereq_("./warning");
+	for (var i = 0; i < arguments.length; i++) {
+		arg = arguments[i];
+		if (!arg) {
+			continue;
+		}
 
-var warned = false;
+		if ('string' === typeof arg || 'number' === typeof arg) {
+			classes += ' ' + arg;
+		} else if (Object.prototype.toString.call(arg) === '[object Array]') {
+			classes += ' ' + classNames.apply(null, arg);
+		} else if ('object' === typeof arg) {
+			for (var key in arg) {
+				if (!arg.hasOwnProperty(key) || !arg[key]) {
+					continue;
+				}
+				classes += ' ' + key;
+			}
+		}
+	}
+	return classes.substr(1);
+}
 
-function cx(classNames) {
-  if ("production" !== "production") {
-    ("production" !== "production" ? warning(
-      warned,
-      'React.addons.classSet will be deprecated in a future version. See ' +
-      'http://fb.me/react-addons-classset'
-    ) : null);
-    warned = true;
-  }
+// safely export classNames for node / browserify
+if (typeof module !== 'undefined' && module.exports) {
+	module.exports = classNames;
+}
 
-  if (typeof classNames == 'object') {
-    return Object.keys(classNames).filter(function(className) {
-      return classNames[className];
-    }).join(' ');
-  } else {
-    return Array.prototype.join.call(arguments, ' ');
-  }
+// safely export classNames for RequireJS
+if (typeof define !== 'undefined' && define.amd) {
+	define('classnames', [], function() {
+		return classNames;
+	});
 }
 
-module.exports = cx;
-
-},{"./warning":11}],10:[function(_dereq_,module,exports){
+},{}],10:[function(_dereq_,module,exports){
 /**
- * Copyright 2013-2015, Facebook, Inc.
+ * Copyright 2013-2014, Facebook, Inc.
  * All rights reserved.
@@ -525,90 +523,40 @@ *
  *
- * @providesModule emptyFunction
+ * @providesModule ExecutionEnvironment
  */
 
-function makeEmptyFunction(arg) {
-  return function() {
-    return arg;
-  };
-}
+/*jslint evil: true */
 
-/**
- * This function accepts and discards inputs; it has no side effects. This is
- * primarily useful idiomatically for overridable function endpoints which
- * always need to be callable, since JS lacks a null-call idiom ala Cocoa.
- */
-function emptyFunction() {}
+"use strict";
 
-emptyFunction.thatReturns = makeEmptyFunction;
-emptyFunction.thatReturnsFalse = makeEmptyFunction(false);
-emptyFunction.thatReturnsTrue = makeEmptyFunction(true);
-emptyFunction.thatReturnsNull = makeEmptyFunction(null);
-emptyFunction.thatReturnsThis = function() { return this; };
-emptyFunction.thatReturnsArgument = function(arg) { return arg; };
+var canUseDOM = !!(
+  typeof window !== 'undefined' &&
+  window.document &&
+  window.document.createElement
+);
 
-module.exports = emptyFunction;
-
-},{}],11:[function(_dereq_,module,exports){
 /**
- * Copyright 2014-2015, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @providesModule warning
+ * Simple, lightweight module assisting with the detection and context of
+ * Worker. Helps avoid circular dependencies and allows code to reason about
+ * whether or not they are in a Worker, even if they never include the main
+ * `ReactWorker` dependency.
  */
+var ExecutionEnvironment = {
 
-"use strict";
+  canUseDOM: canUseDOM,
 
-var emptyFunction = _dereq_("./emptyFunction");
+  canUseWorkers: typeof Worker !== 'undefined',
 
-/**
- * Similar to invariant but only logs a warning if the condition is not met.
- * This can be used to log issues in development environments in critical
- * paths. Removing the logging code for production environments will keep the
- * same logic and follow the same code paths.
- */
+  canUseEventListeners:
+    canUseDOM && !!(window.addEventListener || window.attachEvent),
 
-var warning = emptyFunction;
+  canUseViewport: canUseDOM && !!window.screen,
 
-if ("production" !== "production") {
-  warning = function(condition, format ) {for (var args=[],$__0=2,$__1=arguments.length;$__0<$__1;$__0++) args.push(arguments[$__0]);
-    if (format === undefined) {
-      throw new Error(
-        '`warning(condition, format, ...args)` requires a warning ' +
-        'message argument'
-      );
-    }
+  isInWorker: !canUseDOM // For now, this is true - might change in the future.
 
-    if (format.length < 10 || /^[s\W]*$/.test(format)) {
-      throw new Error(
-        'The warning format should be able to uniquely identify this ' +
-        'warning. Please, use a more descriptive format than: ' + format
-      );
-    }
+};
 
-    if (format.indexOf('Failed Composite propType: ') === 0) {
-      return; // Ignore CompositeComponent proptype check.
-    }
+module.exports = ExecutionEnvironment;
 
-    if (!condition) {
-      var argIndex = 0;
-      var message = 'Warning: ' + format.replace(/%s/g, function()  {return args[argIndex++];});
-      console.warn(message);
-      try {
-        // --- Welcome to debugging React ---
-        // This error was thrown as a convenience so that you can use this stack
-        // to find the callsite that caused this warning to fire.
-        throw new Error(message);
-      } catch(x) {}
-    }
-  };
-}
-
-module.exports = warning;
-
-},{"./emptyFunction":10}]},{},[8])
+},{}]},{},[8])
 (8)
 });

dist/react-modal.min.js

@@ -1,1 +0,1 @@
-!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.ReactModal=e()}}(function(){return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a="function"==typeof require&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}for(var i="function"==typeof require&&require,o=0;o<r.length;o++)s(r[o]);return s}({1:[function(_dereq_,module){function sanitizeProps(props){delete props.ref}{var React="undefined"!=typeof window?window.React:"undefined"!=typeof global?global.React:null,ModalPortal=React.createFactory(_dereq_("./ModalPortal")),ariaAppHider=_dereq_("../helpers/ariaAppHider"),injectCSS=_dereq_("../helpers/injectCSS");module.exports=React.createClass({displayName:"Modal",statics:{setAppElement:ariaAppHider.setElement,injectCSS:injectCSS},propTypes:{isOpen:React.PropTypes.bool.isRequired,onRequestClose:React.PropTypes.func,appElement:React.PropTypes.instanceOf(HTMLElement),closeTimeoutMS:React.PropTypes.number,ariaHideApp:React.PropTypes.bool},getDefaultProps:function(){return{isOpen:!1,ariaHideApp:!0,closeTimeoutMS:0}},componentDidMount:function(){this.node=document.createElement("div"),this.node.className="ReactModalPortal",document.body.appendChild(this.node),this.renderPortal(this.props)},componentWillReceiveProps:function(newProps){this.renderPortal(newProps)},componentWillUnmount:function(){React.unmountComponentAtNode(this.node),document.body.removeChild(this.node)},renderPortal:function(props){props.ariaHideApp&&ariaAppHider.toggle(props.isOpen,props.appElement),sanitizeProps(props),this.portal?this.portal.setProps(props):this.portal=React.render(ModalPortal(props),this.node)},render:function(){return null}})}},{"../helpers/ariaAppHider":3,"../helpers/injectCSS":5,"./ModalPortal":2}],2:[function(_dereq_,module){function stopPropagation(event){event.stopPropagation()}{var React="undefined"!=typeof window?window.React:"undefined"!=typeof global?global.React:null,div=React.DOM.div,focusManager=_dereq_("../helpers/focusManager"),scopeTab=_dereq_("../helpers/scopeTab"),cx=_dereq_("react/lib/cx"),CLASS_NAMES={overlay:{base:"ReactModal__Overlay",afterOpen:"ReactModal__Overlay--after-open",beforeClose:"ReactModal__Overlay--before-close"},content:{base:"ReactModal__Content",afterOpen:"ReactModal__Content--after-open",beforeClose:"ReactModal__Content--before-close"}},OVERLAY_STYLES={position:"fixed",left:0,right:0,top:0,bottom:0};module.exports=React.createClass({displayName:"ModalPortal",getInitialState:function(){return{afterOpen:!1,beforeClose:!1}},componentDidMount:function(){this.props.isOpen&&(this.setFocusAfterRender(!0),this.open())},componentWillReceiveProps:function(newProps){!this.props.isOpen&&newProps.isOpen?(this.setFocusAfterRender(!0),this.open()):this.props.isOpen&&!newProps.isOpen&&this.close()},componentDidUpdate:function(){this.focusAfterRender&&(this.focusContent(),this.setFocusAfterRender(!1))},setFocusAfterRender:function(focus){this.focusAfterRender=focus},open:function(){focusManager.setupScopedFocus(this.getDOMNode()),focusManager.markForFocusLater(),this.setState({isOpen:!0},function(){this.setState({afterOpen:!0})}.bind(this))},close:function(){this.ownerHandlesClose()&&(this.props.closeTimeoutMS>0?this.closeWithTimeout():this.closeWithoutTimeout())},focusContent:function(){this.refs.content.getDOMNode().focus()},closeWithTimeout:function(){this.setState({beforeClose:!0},function(){setTimeout(this.closeWithoutTimeout,this.props.closeTimeoutMS)}.bind(this))},closeWithoutTimeout:function(){this.setState({afterOpen:!1,beforeClose:!1},this.afterClose)},afterClose:function(){focusManager.returnFocus(),focusManager.teardownScopedFocus()},handleKeyDown:function(event){9==event.keyCode&&scopeTab(this.refs.content.getDOMNode(),event),27==event.keyCode&&this.requestClose()},handleOverlayClick:function(){this.ownerHandlesClose()?this.requestClose():this.focusContent()},requestClose:function(){this.ownerHandlesClose()&&this.props.onRequestClose()},ownerHandlesClose:function(){return this.props.onRequestClose},shouldBeClosed:function(){return!this.props.isOpen&&!this.state.beforeClose},buildClassName:function(which){var className=CLASS_NAMES[which].base;return this.state.afterOpen&&(className+=" "+CLASS_NAMES[which].afterOpen),this.state.beforeClose&&(className+=" "+CLASS_NAMES[which].beforeClose),className},render:function(){return this.shouldBeClosed()?div():div({ref:"overlay",className:cx(this.buildClassName("overlay"),this.props.overlayClassName),style:OVERLAY_STYLES,onClick:this.handleOverlayClick},div({ref:"content",className:cx(this.buildClassName("content"),this.props.className),tabIndex:"-1",onClick:stopPropagation,onKeyDown:this.handleKeyDown},this.props.children))}})}},{"../helpers/focusManager":4,"../helpers/scopeTab":6,"react/lib/cx":9}],3:[function(_dereq_,module,exports){function setElement(element){_element=element}function hide(appElement){validateElement(appElement),(appElement||_element).setAttribute("aria-hidden","true")}function show(appElement){validateElement(appElement),(appElement||_element).removeAttribute("aria-hidden")}function toggle(shouldHide,appElement){shouldHide?hide(appElement):show(appElement)}function validateElement(appElement){if(!appElement&&!_element)throw new Error("react-modal: You must set an element with `Modal.setAppElement(el)` to make this accessible")}function resetForTesting(){_element=null}var _element=null;exports.toggle=toggle,exports.setElement=setElement,exports.show=show,exports.hide=hide,exports.resetForTesting=resetForTesting},{}],4:[function(_dereq_,module,exports){function handleBlur(){needToFocus=!0}function handleFocus(){needToFocus&&(needToFocus=!1,setTimeout(function(){if(!modalElement.contains(document.activeElement)){var el=findTabbable(modalElement)[0]||modalElement;el.focus()}},0))}var findTabbable=_dereq_("../helpers/tabbable"),modalElement=null,focusLaterElement=null,needToFocus=!1;exports.markForFocusLater=function(){focusLaterElement=document.activeElement},exports.returnFocus=function(){try{focusLaterElement.focus()}catch(e){console.warn("You tried to return focus to "+focusLaterElement+" but it is not in the DOM anymore")}focusLaterElement=null},exports.setupScopedFocus=function(element){modalElement=element,window.addEventListener?(window.addEventListener("blur",handleBlur,!1),document.addEventListener("focus",handleFocus,!0)):(window.attachEvent("onBlur",handleBlur),document.attachEvent("onFocus",handleFocus))},exports.teardownScopedFocus=function(){modalElement=null,window.addEventListener?(window.removeEventListener("blur",handleBlur),document.removeEventListener("focus",handleFocus)):(window.detachEvent("onBlur",handleBlur),document.detachEvent("onFocus",handleFocus))}},{"../helpers/tabbable":7}],5:[function(_dereq_,module){function injectStyle(css){var style=document.getElementById("rackt-style");if(!style){style=document.createElement("style"),style.setAttribute("id","rackt-style");var head=document.getElementsByTagName("head")[0];head.insertBefore(style,head.firstChild)}style.innerHTML=style.innerHTML+"\n"+css}module.exports=function(){injectStyle([".ReactModal__Overlay {","  background-color: rgba(255, 255, 255, 0.75);","}",".ReactModal__Content {","  position: absolute;","  top: 40px;","  left: 40px;","  right: 40px;","  bottom: 40px;","  border: 1px solid #ccc;","  background: #fff;","  overflow: auto;","  -webkit-overflow-scrolling: touch;","  border-radius: 4px;","  outline: none;","  padding: 20px;","}","@media (max-width: 768px) {","  .ReactModal__Content {","    top: 10px;","    left: 10px;","    right: 10px;","    bottom: 10px;","    padding: 10px;","  }","}"].join("\n"))}},{}],6:[function(_dereq_,module){var findTabbable=_dereq_("../helpers/tabbable");module.exports=function(node,event){var tabbable=findTabbable(node),finalTabbable=tabbable[event.shiftKey?0:tabbable.length-1],leavingFinalTabbable=finalTabbable===document.activeElement||node===document.activeElement;if(leavingFinalTabbable){event.preventDefault();var target=tabbable[event.shiftKey?tabbable.length-1:0];target.focus()}}},{"../helpers/tabbable":7}],7:[function(_dereq_,module){function focusable(element,isTabIndexNotNaN){var nodeName=element.nodeName.toLowerCase();return(/input|select|textarea|button|object/.test(nodeName)?!element.disabled:"a"===nodeName?element.href||isTabIndexNotNaN:isTabIndexNotNaN)&&visible(element)}function hidden(el){return el.offsetWidth<=0&&el.offsetHeight<=0||"none"===el.style.display}function visible(element){for(;element&&element!==document.body;){if(hidden(element))return!1;element=element.parentNode}return!0}function tabbable(element){var tabIndex=element.getAttribute("tabindex");null===tabIndex&&(tabIndex=void 0);var isTabIndexNaN=isNaN(tabIndex);return(isTabIndexNaN||tabIndex>=0)&&focusable(element,!isTabIndexNaN)}function findTabbableDescendants(element){return[].slice.call(element.querySelectorAll("*"),0).filter(function(el){return tabbable(el)})}module.exports=findTabbableDescendants},{}],8:[function(_dereq_,module){module.exports=_dereq_("./components/Modal")},{"./components/Modal":1}],9:[function(_dereq_,module){"use strict";function cx(classNames){return"object"==typeof classNames?Object.keys(classNames).filter(function(className){return classNames[className]}).join(" "):Array.prototype.join.call(arguments," ")}_dereq_("./warning");module.exports=cx},{"./warning":11}],10:[function(_dereq_,module){function makeEmptyFunction(arg){return function(){return arg}}function emptyFunction(){}emptyFunction.thatReturns=makeEmptyFunction,emptyFunction.thatReturnsFalse=makeEmptyFunction(!1),emptyFunction.thatReturnsTrue=makeEmptyFunction(!0),emptyFunction.thatReturnsNull=makeEmptyFunction(null),emptyFunction.thatReturnsThis=function(){return this},emptyFunction.thatReturnsArgument=function(arg){return arg},module.exports=emptyFunction},{}],11:[function(_dereq_,module){"use strict";var emptyFunction=_dereq_("./emptyFunction"),warning=emptyFunction;module.exports=warning},{"./emptyFunction":10}]},{},[8])(8)});
+!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var f;"undefined"!=typeof window?f=window:"undefined"!=typeof global?f=global:"undefined"!=typeof self&&(f=self),f.ReactModal=e()}}(function(){var define;return function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a="function"==typeof require&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}for(var i="function"==typeof require&&require,o=0;o<r.length;o++)s(r[o]);return s}({1:[function(_dereq_,module){function sanitizeProps(props){delete props.ref}{var React="undefined"!=typeof window?window.React:"undefined"!=typeof global?global.React:null,ExecutionEnvironment=_dereq_("react/lib/ExecutionEnvironment"),ModalPortal=React.createFactory(_dereq_("./ModalPortal")),ariaAppHider=_dereq_("../helpers/ariaAppHider"),injectCSS=_dereq_("../helpers/injectCSS"),SafeHTMLElement=ExecutionEnvironment.canUseDOM?window.HTMLElement:{};module.exports=React.createClass({displayName:"Modal",statics:{setAppElement:ariaAppHider.setElement,injectCSS:injectCSS},propTypes:{isOpen:React.PropTypes.bool.isRequired,onRequestClose:React.PropTypes.func,appElement:React.PropTypes.instanceOf(SafeHTMLElement),closeTimeoutMS:React.PropTypes.number,ariaHideApp:React.PropTypes.bool},getDefaultProps:function(){return{isOpen:!1,ariaHideApp:!0,closeTimeoutMS:0}},componentDidMount:function(){this.node=document.createElement("div"),this.node.className="ReactModalPortal",document.body.appendChild(this.node),this.renderPortal(this.props)},componentWillReceiveProps:function(newProps){this.renderPortal(newProps)},componentWillUnmount:function(){React.unmountComponentAtNode(this.node),document.body.removeChild(this.node)},renderPortal:function(props){props.ariaHideApp&&ariaAppHider.toggle(props.isOpen,props.appElement),sanitizeProps(props),this.portal?this.portal.setProps(props):this.portal=React.render(ModalPortal(props),this.node)},render:function(){return null}})}},{"../helpers/ariaAppHider":3,"../helpers/injectCSS":5,"./ModalPortal":2,"react/lib/ExecutionEnvironment":10}],2:[function(_dereq_,module){function stopPropagation(event){event.stopPropagation()}{var React="undefined"!=typeof window?window.React:"undefined"!=typeof global?global.React:null,div=React.DOM.div,focusManager=_dereq_("../helpers/focusManager"),scopeTab=_dereq_("../helpers/scopeTab"),cx=_dereq_("classnames"),CLASS_NAMES={overlay:{base:"ReactModal__Overlay",afterOpen:"ReactModal__Overlay--after-open",beforeClose:"ReactModal__Overlay--before-close"},content:{base:"ReactModal__Content",afterOpen:"ReactModal__Content--after-open",beforeClose:"ReactModal__Content--before-close"}},OVERLAY_STYLES={position:"fixed",left:0,right:0,top:0,bottom:0};module.exports=React.createClass({displayName:"ModalPortal",getInitialState:function(){return{afterOpen:!1,beforeClose:!1}},componentDidMount:function(){this.props.isOpen&&(this.setFocusAfterRender(!0),this.open())},componentWillReceiveProps:function(newProps){!this.props.isOpen&&newProps.isOpen?(this.setFocusAfterRender(!0),this.open()):this.props.isOpen&&!newProps.isOpen&&this.close()},componentDidUpdate:function(){this.focusAfterRender&&(this.focusContent(),this.setFocusAfterRender(!1))},setFocusAfterRender:function(focus){this.focusAfterRender=focus},open:function(){focusManager.setupScopedFocus(this.getDOMNode()),focusManager.markForFocusLater(),this.setState({isOpen:!0},function(){this.setState({afterOpen:!0})}.bind(this))},close:function(){this.ownerHandlesClose()&&(this.props.closeTimeoutMS>0?this.closeWithTimeout():this.closeWithoutTimeout())},focusContent:function(){this.refs.content.getDOMNode().focus()},closeWithTimeout:function(){this.setState({beforeClose:!0},function(){setTimeout(this.closeWithoutTimeout,this.props.closeTimeoutMS)}.bind(this))},closeWithoutTimeout:function(){this.setState({afterOpen:!1,beforeClose:!1},this.afterClose)},afterClose:function(){focusManager.returnFocus(),focusManager.teardownScopedFocus()},handleKeyDown:function(event){9==event.keyCode&&scopeTab(this.refs.content.getDOMNode(),event),27==event.keyCode&&this.requestClose()},handleOverlayClick:function(){this.ownerHandlesClose()?this.requestClose():this.focusContent()},requestClose:function(){this.ownerHandlesClose()&&this.props.onRequestClose()},ownerHandlesClose:function(){return this.props.onRequestClose},shouldBeClosed:function(){return!this.props.isOpen&&!this.state.beforeClose},buildClassName:function(which){var className=CLASS_NAMES[which].base;return this.state.afterOpen&&(className+=" "+CLASS_NAMES[which].afterOpen),this.state.beforeClose&&(className+=" "+CLASS_NAMES[which].beforeClose),className},render:function(){return this.shouldBeClosed()?div():div({ref:"overlay",className:cx(this.buildClassName("overlay"),this.props.overlayClassName),style:OVERLAY_STYLES,onClick:this.handleOverlayClick},div({ref:"content",style:this.props.style,className:cx(this.buildClassName("content"),this.props.className),tabIndex:"-1",onClick:stopPropagation,onKeyDown:this.handleKeyDown},this.props.children))}})}},{"../helpers/focusManager":4,"../helpers/scopeTab":6,classnames:9}],3:[function(_dereq_,module,exports){function setElement(element){_element=element}function hide(appElement){validateElement(appElement),(appElement||_element).setAttribute("aria-hidden","true")}function show(appElement){validateElement(appElement),(appElement||_element).removeAttribute("aria-hidden")}function toggle(shouldHide,appElement){shouldHide?hide(appElement):show(appElement)}function validateElement(appElement){if(!appElement&&!_element)throw new Error("react-modal: You must set an element with `Modal.setAppElement(el)` to make this accessible")}function resetForTesting(){_element=null}var _element=null;exports.toggle=toggle,exports.setElement=setElement,exports.show=show,exports.hide=hide,exports.resetForTesting=resetForTesting},{}],4:[function(_dereq_,module,exports){function handleBlur(){needToFocus=!0}function handleFocus(){if(needToFocus){if(needToFocus=!1,!modalElement)return;setTimeout(function(){if(!modalElement.contains(document.activeElement)){var el=findTabbable(modalElement)[0]||modalElement;el.focus()}},0)}}var findTabbable=_dereq_("../helpers/tabbable"),modalElement=null,focusLaterElement=null,needToFocus=!1;exports.markForFocusLater=function(){focusLaterElement=document.activeElement},exports.returnFocus=function(){try{focusLaterElement.focus()}catch(e){console.warn("You tried to return focus to "+focusLaterElement+" but it is not in the DOM anymore")}focusLaterElement=null},exports.setupScopedFocus=function(element){modalElement=element,window.addEventListener?(window.addEventListener("blur",handleBlur,!1),document.addEventListener("focus",handleFocus,!0)):(window.attachEvent("onBlur",handleBlur),document.attachEvent("onFocus",handleFocus))},exports.teardownScopedFocus=function(){modalElement=null,window.addEventListener?(window.removeEventListener("blur",handleBlur),document.removeEventListener("focus",handleFocus)):(window.detachEvent("onBlur",handleBlur),document.detachEvent("onFocus",handleFocus))}},{"../helpers/tabbable":7}],5:[function(_dereq_,module){function injectStyle(css){var style=document.getElementById("rackt-style");if(!style){style=document.createElement("style"),style.setAttribute("id","rackt-style");var head=document.getElementsByTagName("head")[0];head.insertBefore(style,head.firstChild)}style.innerHTML=style.innerHTML+"\n"+css}module.exports=function(){injectStyle([".ReactModal__Overlay {","  background-color: rgba(255, 255, 255, 0.75);","}",".ReactModal__Content {","  position: absolute;","  top: 40px;","  left: 40px;","  right: 40px;","  bottom: 40px;","  border: 1px solid #ccc;","  background: #fff;","  overflow: auto;","  -webkit-overflow-scrolling: touch;","  border-radius: 4px;","  outline: none;","  padding: 20px;","}","@media (max-width: 768px) {","  .ReactModal__Content {","    top: 10px;","    left: 10px;","    right: 10px;","    bottom: 10px;","    padding: 10px;","  }","}"].join("\n"))}},{}],6:[function(_dereq_,module){var findTabbable=_dereq_("../helpers/tabbable");module.exports=function(node,event){var tabbable=findTabbable(node),finalTabbable=tabbable[event.shiftKey?0:tabbable.length-1],leavingFinalTabbable=finalTabbable===document.activeElement||node===document.activeElement;if(leavingFinalTabbable){event.preventDefault();var target=tabbable[event.shiftKey?tabbable.length-1:0];target.focus()}}},{"../helpers/tabbable":7}],7:[function(_dereq_,module){function focusable(element,isTabIndexNotNaN){var nodeName=element.nodeName.toLowerCase();return(/input|select|textarea|button|object/.test(nodeName)?!element.disabled:"a"===nodeName?element.href||isTabIndexNotNaN:isTabIndexNotNaN)&&visible(element)}function hidden(el){return el.offsetWidth<=0&&el.offsetHeight<=0||"none"===el.style.display}function visible(element){for(;element&&element!==document.body;){if(hidden(element))return!1;element=element.parentNode}return!0}function tabbable(element){var tabIndex=element.getAttribute("tabindex");null===tabIndex&&(tabIndex=void 0);var isTabIndexNaN=isNaN(tabIndex);return(isTabIndexNaN||tabIndex>=0)&&focusable(element,!isTabIndexNaN)}function findTabbableDescendants(element){return[].slice.call(element.querySelectorAll("*"),0).filter(function(el){return tabbable(el)})}module.exports=findTabbableDescendants},{}],8:[function(_dereq_,module){module.exports=_dereq_("./components/Modal")},{"./components/Modal":1}],9:[function(_dereq_,module){function classNames(){for(var arg,classes="",i=0;i<arguments.length;i++)if(arg=arguments[i])if("string"==typeof arg||"number"==typeof arg)classes+=" "+arg;else if("[object Array]"===Object.prototype.toString.call(arg))classes+=" "+classNames.apply(null,arg);else if("object"==typeof arg)for(var key in arg)arg.hasOwnProperty(key)&&arg[key]&&(classes+=" "+key);return classes.substr(1)}"undefined"!=typeof module&&module.exports&&(module.exports=classNames),"undefined"!=typeof define&&define.amd&&define("classnames",[],function(){return classNames})},{}],10:[function(_dereq_,module){"use strict";var canUseDOM=!("undefined"==typeof window||!window.document||!window.document.createElement),ExecutionEnvironment={canUseDOM:canUseDOM,canUseWorkers:"undefined"!=typeof Worker,canUseEventListeners:canUseDOM&&!(!window.addEventListener&&!window.attachEvent),canUseViewport:canUseDOM&&!!window.screen,isInWorker:!canUseDOM};module.exports=ExecutionEnvironment},{}]},{},[8])(8)});

lib/components/Modal.js

 var React = require('react');
+var ExecutionEnvironment = require('react/lib/ExecutionEnvironment');
 var ModalPortal = React.createFactory(require('./ModalPortal'));
@@ -6,2 +7,4 @@ var ariaAppHider = require('../helpers/ariaAppHider');
 
+var SafeHTMLElement = ExecutionEnvironment.canUseDOM ? window.HTMLElement : {};
+
 var Modal = module.exports = React.createClass({
@@ -19,3 +22,3 @@
     onRequestClose: React.PropTypes.func,
-    appElement: React.PropTypes.instanceOf(HTMLElement),
+    appElement: React.PropTypes.instanceOf(SafeHTMLElement),
     closeTimeoutMS: React.PropTypes.number,
@@ -22,0 +25,0 @@ ariaHideApp: React.PropTypes.bool

lib/components/ModalPortal.js

@@ -5,3 +5,3 @@ var React = require('react');
 var scopeTab = require('../helpers/scopeTab');
-var cx = require('react/lib/cx');
+var cx = require('classnames');
 
@@ -151,2 +151,3 @@ // so that our CSS is statically analyzable
           ref: "content",
+          style: this.props.style,
           className: cx(this.buildClassName('content'), this.props.className),
@@ -153,0 +154,0 @@ tabIndex: "-1",

lib/helpers/focusManager.js

@@ -13,2 +13,5 @@ var findTabbable = require('../helpers/tabbable');
     needToFocus = false;
+    if (!modalElement) {
+      return;
+    }
     // need to see how jQuery shims document.on('focusin') so we don't need the
@@ -15,0 +18,0 @@ // setTimeout, firefox doesn't support focusin, if it did, we could focus

package.json

 {
   "name": "react-modal",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Accessible modal dialog component for React.JS",
@@ -43,5 +43,5 @@ "main": "./lib/index",
   "peerDependencies": {
-    "react": ">=0.12.0"
+    "react": ">=0.12.0",
+    "classnames": "^1.2.0"
   },
-  "dependencies": {},
   "tags": [
@@ -48,0 +48,0 @@ "react",

New alerts

License Policy Violation

License

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

44865

decreased by-3.59%

Dependency count

2

increased by100%

Lines of code

896

decreased by-4.58%

No dependency changes