react-overlays - npm Package Compare versions

Comparing version 0.4.2 to 0.4.3

CHANGELOG.md

@@ -0,1 +1,8 @@
+v0.4.3 - Sun, 23 Aug 2015 22:54:52 GMT
+--------------------------------------
+
+- [4f7823e](../../commit/4f7823e) [changed] focus target of the modal to its content
+
+
+
 v0.4.2 - Mon, 10 Aug 2015 19:04:31 GMT
@@ -2,0 +9,0 @@ --------------------------------------

lib/Modal.js

@@ -16,2 +16,6 @@ /*eslint-disable react/prop-types */
 
+var _warning = require('warning');
+
+var _warning2 = _interopRequireDefault(_warning);
+
 var _reactPropTypesLibElementType = require('react-prop-types/lib/elementType');
@@ -200,4 +204,11 @@
 
-    if (dialog.props.role === undefined) {
-      dialog = _react.cloneElement(dialog, { role: 'document' });
+    var _dialog$props = dialog.props;
+    var role = _dialog$props.role;
+    var tabIndex = _dialog$props.tabIndex;
+
+    if (role === undefined || tabIndex === undefined) {
+      dialog = _react.cloneElement(dialog, {
+        role: role === undefined ? 'document' : role,
+        tabIndex: tabIndex == null ? '-1' : tabIndex
+      });
     }
@@ -230,3 +241,2 @@
         {
-          tabIndex: '-1',
           ref: 'modal',
@@ -373,3 +383,3 @@ role: props.role || 'dialog',
     var autoFocus = this.props.autoFocus;
-    var modalContent = _react2['default'].findDOMNode(this.refs.modal);
+    var modalContent = this.getDialogElement();
     var current = _domHelpersActiveElement2['default'](_utilsOwnerDocument2['default'](this));
@@ -380,2 +390,8 @@ var focusInModal = current && _domHelpersQueryContains2['default'](modalContent, current);
       this.lastFocus = current;
+
+      if (!modalContent.hasAttribute('tabIndex')) {
+        modalContent.setAttribute('tabIndex', -1);
+        _warning2['default'](false, 'The modal content node does not accept focus. ' + 'For the benefit of assistive technologies, the tabIndex of the node is being set to "-1".');
+      }
+
       modalContent.focus();
@@ -401,3 +417,3 @@ }
     var active = _domHelpersActiveElement2['default'](_utilsOwnerDocument2['default'](this));
-    var modal = _react2['default'].findDOMNode(this.refs.modal);
+    var modal = this.getDialogElement();
 
@@ -404,0 +420,0 @@ if (modal && modal !== active && !_domHelpersQueryContains2['default'](modal, active)) {

lib/RootCloseWrapper.js

@@ -15,6 +15,2 @@ 'use strict';
 
-var _utilsOwnerDocument = require('./utils/ownerDocument');
-
-var _utilsOwnerDocument2 = _interopRequireDefault(_utilsOwnerDocument);
-
 var _utilsAddEventListener = require('./utils/addEventListener');
@@ -24,4 +20,10 @@
 
-// TODO: Merge this logic with dropdown logic once #526 is done.
+var _utilsCreateChainedFunction = require('./utils/createChainedFunction');
 
+var _utilsCreateChainedFunction2 = _interopRequireDefault(_utilsCreateChainedFunction);
+
+var _utilsOwnerDocument = require('./utils/ownerDocument');
+
+var _utilsOwnerDocument2 = _interopRequireDefault(_utilsOwnerDocument);
+
 // TODO: Consider using an ES6 symbol here, once we use babel-runtime.
@@ -87,2 +89,14 @@ var CLICK_WAS_INSIDE = '__click_was_inside';
   RootCloseWrapper.prototype.render = function render() {
+    var _props = this.props;
+    var noWrap = _props.noWrap;
+    var children = _props.children;
+
+    var child = _react2['default'].Children.only(children);
+
+    if (noWrap) {
+      return _react2['default'].cloneElement(child, {
+        onClick: _utilsCreateChainedFunction2['default'](suppressRootClose, child.props.onClick)
+      });
+    }
+
     // Wrap the child in a new element, so the child won't have to handle
@@ -93,3 +107,3 @@ // potentially combining multiple onClick listeners.
       { onClick: suppressRootClose },
-      _react2['default'].Children.only(this.props.children)
+      child
     );
@@ -103,3 +117,4 @@ };
     // node for doing size calculations in OverlayMixin.
-    return _react2['default'].findDOMNode(this).firstChild;
+    var node = _react2['default'].findDOMNode(this);
+    return this.props.noWrap ? node : node.firstChild;
   };
@@ -119,4 +134,11 @@
 RootCloseWrapper.propTypes = {
-  onRootClose: _react2['default'].PropTypes.func.isRequired
+  onRootClose: _react2['default'].PropTypes.func.isRequired,
+
+  /**
+   * Passes the suppress click handler directly to the child component instead
+   * of placing it on a wrapping div. Only use when you can be sure the child
+   * properly handle the click event.
+   */
+  noWrap: _react2['default'].PropTypes.bool
 };
 module.exports = exports['default'];

package.json

 {
   "name": "react-overlays",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "Utilities for creating robust overlay components",
@@ -95,4 +95,5 @@ "author": "Jason Quense <[e-mail]>",
     "dom-helpers": "^2.2.4",
-    "react-prop-types": "^0.2.1"
+    "react-prop-types": "^0.2.1",
+    "warning": "^2.0.0"
   }
 }

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

Improved metrics

Total package byte prevSize

66515

increased by2.19%

Lines of code

1447

increased by1.97%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Addedwarning@^2.0.0