6
6
else if ( typeof exports === 'object' )
7
7
exports [ "ReactModal" ] = factory ( require ( "react" ) , require ( "react-dom" ) ) ;
8
8
else
9
- root [ "ReactModal" ] = factory ( root [ "react " ] , root [ "react-dom " ] ) ;
9
+ root [ "ReactModal" ] = factory ( root [ "React " ] , root [ "ReactDOM " ] ) ;
10
10
} ) ( this , function ( __WEBPACK_EXTERNAL_MODULE_2__ , __WEBPACK_EXTERNAL_MODULE_3__ ) {
11
11
return /******/ ( function ( modules ) { // webpackBootstrap
12
12
/******/ // The module cache
@@ -94,17 +94,20 @@ return /******/ (function(modules) { // webpackBootstrap
94
94
content : React . PropTypes . object ,
95
95
overlay : React . PropTypes . object
96
96
} ) ,
97
+ portalClassName : React . PropTypes . string ,
97
98
appElement : React . PropTypes . instanceOf ( SafeHTMLElement ) ,
98
99
onAfterOpen : React . PropTypes . func ,
99
100
onRequestClose : React . PropTypes . func ,
100
101
closeTimeoutMS : React . PropTypes . number ,
101
102
ariaHideApp : React . PropTypes . bool ,
102
- shouldCloseOnOverlayClick : React . PropTypes . bool
103
+ shouldCloseOnOverlayClick : React . PropTypes . bool ,
104
+ role : React . PropTypes . string
103
105
} ,
104
106
105
107
getDefaultProps : function getDefaultProps ( ) {
106
108
return {
107
109
isOpen : false ,
110
+ portalClassName : 'ReactModalPortal' ,
108
111
ariaHideApp : true ,
109
112
closeTimeoutMS : 0 ,
110
113
shouldCloseOnOverlayClick : true
@@ -113,7 +116,7 @@ return /******/ (function(modules) { // webpackBootstrap
113
116
114
117
componentDidMount : function componentDidMount ( ) {
115
118
this . node = document . createElement ( 'div' ) ;
116
- this . node . className = 'ReactModalPortal' ;
119
+ this . node . className = this . props . portalClassName ;
117
120
document . body . appendChild ( this . node ) ;
118
121
this . renderPortal ( this . props ) ;
119
122
} ,
@@ -260,6 +263,7 @@ return /******/ (function(modules) { // webpackBootstrap
260
263
var ModalPortal = module . exports = React . createClass ( {
261
264
262
265
displayName : 'ModalPortal' ,
266
+ shouldClose : null ,
263
267
264
268
getDefaultProps : function getDefaultProps ( ) {
265
269
return {
@@ -333,7 +337,10 @@ return /******/ (function(modules) { // webpackBootstrap
333
337
} ,
334
338
335
339
focusContent : function focusContent ( ) {
336
- this . refs . content . focus ( ) ;
340
+ // Don't steal focus from inner elements
341
+ if ( ! this . contentHasFocus ( ) ) {
342
+ this . refs . content . focus ( ) ;
343
+ }
337
344
} ,
338
345
339
346
closeWithTimeout : function closeWithTimeout ( ) {
@@ -363,17 +370,25 @@ return /******/ (function(modules) { // webpackBootstrap
363
370
}
364
371
} ,
365
372
366
- handleOverlayClick : function handleOverlayClick ( event ) {
367
- var node = event . target ;
368
-
369
- while ( node ) {
370
- if ( node === this . refs . content ) return ;
371
- node = node . parentNode ;
373
+ handleOverlayMouseDown : function handleOverlayMouseDown ( event ) {
374
+ if ( this . shouldClose === null ) {
375
+ this . shouldClose = true ;
372
376
}
377
+ } ,
373
378
374
- if ( this . props . shouldCloseOnOverlayClick ) {
379
+ handleOverlayMouseUp : function handleOverlayMouseUp ( event ) {
380
+ if ( this . shouldClose && this . props . shouldCloseOnOverlayClick ) {
375
381
if ( this . ownerHandlesClose ( ) ) this . requestClose ( event ) ; else this . focusContent ( ) ;
376
382
}
383
+ this . shouldClose = null ;
384
+ } ,
385
+
386
+ handleContentMouseDown : function handleContentMouseDown ( event ) {
387
+ this . shouldClose = false ;
388
+ } ,
389
+
390
+ handleContentMouseUp : function handleContentMouseUp ( event ) {
391
+ this . shouldClose = false ;
377
392
} ,
378
393
379
394
requestClose : function requestClose ( event ) {
@@ -388,6 +403,10 @@ return /******/ (function(modules) { // webpackBootstrap
388
403
return ! this . props . isOpen && ! this . state . beforeClose ;
389
404
} ,
390
405
406
+ contentHasFocus : function contentHasFocus ( ) {
407
+ return document . activeElement === this . refs . content || this . refs . content . contains ( document . activeElement ) ;
408
+ } ,
409
+
391
410
buildClassName : function buildClassName ( which , additional ) {
392
411
var className = CLASS_NAMES [ which ] . base ;
393
412
if ( this . state . afterOpen ) className += ' ' + CLASS_NAMES [ which ] . afterOpen ;
@@ -403,13 +422,17 @@ return /******/ (function(modules) { // webpackBootstrap
403
422
ref : "overlay" ,
404
423
className : this . buildClassName ( 'overlay' , this . props . overlayClassName ) ,
405
424
style : Assign ( { } , overlayStyles , this . props . style . overlay || { } ) ,
406
- onClick : this . handleOverlayClick
425
+ onMouseDown : this . handleOverlayMouseDown ,
426
+ onMouseUp : this . handleOverlayMouseUp
407
427
} , div ( {
408
428
ref : "content" ,
409
429
style : Assign ( { } , contentStyles , this . props . style . content || { } ) ,
410
430
className : this . buildClassName ( 'content' , this . props . className ) ,
411
431
tabIndex : "-1" ,
412
- onKeyDown : this . handleKeyDown
432
+ onKeyDown : this . handleKeyDown ,
433
+ onMouseDown : this . handleContentMouseDown ,
434
+ onMouseUp : this . handleContentMouseUp ,
435
+ role : "dialog"
413
436
} , this . props . children ) ) ;
414
437
}
415
438
} ) ;
@@ -437,8 +460,8 @@ return /******/ (function(modules) { // webpackBootstrap
437
460
}
438
461
// need to see how jQuery shims document.on('focusin') so we don't need the
439
462
// setTimeout, firefox doesn't support focusin, if it did, we could focus
440
- // the element outside of a setTimeout. Side-effect of this implementation
441
- // is that the document.body gets focus, and then we focus our element right
463
+ // the element outside of a setTimeout. Side-effect of this implementation
464
+ // is that the document.body gets focus, and then we focus our element right
442
465
// after, seems fine.
443
466
setTimeout ( function ( ) {
444
467
if ( modalElement . contains ( document . activeElement ) ) return ;
@@ -1107,12 +1130,12 @@ return /******/ (function(modules) { // webpackBootstrap
1107
1130
/***/ function ( module , exports ) {
1108
1131
1109
1132
/**
1110
- * lodash 3.0.8 (Custom Build) <https://lodash.com/>
1133
+ * lodash (Custom Build) <https://lodash.com/>
1111
1134
* Build: `lodash modularize exports="npm" -o ./`
1112
- * Copyright 2012-2016 The Dojo Foundation <http://dojofoundation.org/>
1135
+ * Copyright jQuery Foundation and other contributors <https://jquery.org/>
1136
+ * Released under MIT license <https://lodash.com/license>
1113
1137
* Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
1114
- * Copyright 2009-2016 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
1115
- * Available under MIT license <https://lodash.com/license>
1138
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
1116
1139
*/
1117
1140
1118
1141
/** Used as references for various `Number` constants. */
@@ -1130,47 +1153,25 @@ return /******/ (function(modules) { // webpackBootstrap
1130
1153
var hasOwnProperty = objectProto . hasOwnProperty ;
1131
1154
1132
1155
/**
1133
- * Used to resolve the [`toStringTag`](http://ecma-international.org/ecma-262/6.0/#sec-object.prototype.tostring)
1156
+ * Used to resolve the
1157
+ * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
1134
1158
* of values.
1135
1159
*/
1136
1160
var objectToString = objectProto . toString ;
1137
1161
1138
1162
/** Built-in value references. */
1139
1163
var propertyIsEnumerable = objectProto . propertyIsEnumerable ;
1140
1164
1141
- /**
1142
- * The base implementation of `_.property` without support for deep paths.
1143
- *
1144
- * @private
1145
- * @param {string } key The key of the property to get.
1146
- * @returns {Function } Returns the new function.
1147
- */
1148
- function baseProperty ( key ) {
1149
- return function ( object ) {
1150
- return object == null ? undefined : object [ key ] ;
1151
- } ;
1152
- }
1153
-
1154
- /**
1155
- * Gets the "length" property value of `object`.
1156
- *
1157
- * **Note:** This function is used to avoid a [JIT bug](https://bugs.webkit.org/show_bug.cgi?id=142792)
1158
- * that affects Safari on at least iOS 8.1-8.3 ARM64.
1159
- *
1160
- * @private
1161
- * @param {Object } object The object to query.
1162
- * @returns {* } Returns the "length" value.
1163
- */
1164
- var getLength = baseProperty ( 'length' ) ;
1165
-
1166
1165
/**
1167
1166
* Checks if `value` is likely an `arguments` object.
1168
1167
*
1169
1168
* @static
1170
1169
* @memberOf _
1170
+ * @since 0.1.0
1171
1171
* @category Lang
1172
1172
* @param {* } value The value to check.
1173
- * @returns {boolean } Returns `true` if `value` is correctly classified, else `false`.
1173
+ * @returns {boolean } Returns `true` if `value` is an `arguments` object,
1174
+ * else `false`.
1174
1175
* @example
1175
1176
*
1176
1177
* _.isArguments(function() { return arguments; }());
@@ -1180,7 +1181,7 @@ return /******/ (function(modules) { // webpackBootstrap
1180
1181
* // => false
1181
1182
*/
1182
1183
function isArguments ( value ) {
1183
- // Safari 8.1 incorrectly makes `arguments.callee` enumerable in strict mode.
1184
+ // Safari 8.1 makes `arguments.callee` enumerable in strict mode.
1184
1185
return isArrayLikeObject ( value ) && hasOwnProperty . call ( value , 'callee' ) &&
1185
1186
( ! propertyIsEnumerable . call ( value , 'callee' ) || objectToString . call ( value ) == argsTag ) ;
1186
1187
}
@@ -1192,6 +1193,7 @@ return /******/ (function(modules) { // webpackBootstrap
1192
1193
*
1193
1194
* @static
1194
1195
* @memberOf _
1196
+ * @since 4.0.0
1195
1197
* @category Lang
1196
1198
* @param {* } value The value to check.
1197
1199
* @returns {boolean } Returns `true` if `value` is array-like, else `false`.
@@ -1210,7 +1212,7 @@ return /******/ (function(modules) { // webpackBootstrap
1210
1212
* // => false
1211
1213
*/
1212
1214
function isArrayLike ( value ) {
1213
- return value != null && isLength ( getLength ( value ) ) && ! isFunction ( value ) ;
1215
+ return value != null && isLength ( value . length ) && ! isFunction ( value ) ;
1214
1216
}
1215
1217
1216
1218
/**
@@ -1219,9 +1221,11 @@ return /******/ (function(modules) { // webpackBootstrap
1219
1221
*
1220
1222
* @static
1221
1223
* @memberOf _
1224
+ * @since 4.0.0
1222
1225
* @category Lang
1223
1226
* @param {* } value The value to check.
1224
- * @returns {boolean } Returns `true` if `value` is an array-like object, else `false`.
1227
+ * @returns {boolean } Returns `true` if `value` is an array-like object,
1228
+ * else `false`.
1225
1229
* @example
1226
1230
*
1227
1231
* _.isArrayLikeObject([1, 2, 3]);
@@ -1245,9 +1249,10 @@ return /******/ (function(modules) { // webpackBootstrap
1245
1249
*
1246
1250
* @static
1247
1251
* @memberOf _
1252
+ * @since 0.1.0
1248
1253
* @category Lang
1249
1254
* @param {* } value The value to check.
1250
- * @returns {boolean } Returns `true` if `value` is correctly classified , else `false`.
1255
+ * @returns {boolean } Returns `true` if `value` is a function , else `false`.
1251
1256
* @example
1252
1257
*
1253
1258
* _.isFunction(_);
@@ -1258,19 +1263,20 @@ return /******/ (function(modules) { // webpackBootstrap
1258
1263
*/
1259
1264
function isFunction ( value ) {
1260
1265
// The use of `Object#toString` avoids issues with the `typeof` operator
1261
- // in Safari 8 which returns 'object' for typed array and weak map constructors,
1262
- // and PhantomJS 1.9 which returns 'function' for `NodeList` instances.
1266
+ // in Safari 8-9 which returns 'object' for typed array and other constructors.
1263
1267
var tag = isObject ( value ) ? objectToString . call ( value ) : '' ;
1264
1268
return tag == funcTag || tag == genTag ;
1265
1269
}
1266
1270
1267
1271
/**
1268
1272
* Checks if `value` is a valid array-like length.
1269
1273
*
1270
- * **Note:** This function is loosely based on [`ToLength`](http://ecma-international.org/ecma-262/6.0/#sec-tolength).
1274
+ * **Note:** This method is loosely based on
1275
+ * [`ToLength`](http://ecma-international.org/ecma-262/7.0/#sec-tolength).
1271
1276
*
1272
1277
* @static
1273
1278
* @memberOf _
1279
+ * @since 4.0.0
1274
1280
* @category Lang
1275
1281
* @param {* } value The value to check.
1276
1282
* @returns {boolean } Returns `true` if `value` is a valid length, else `false`.
@@ -1294,11 +1300,13 @@ return /******/ (function(modules) { // webpackBootstrap
1294
1300
}
1295
1301
1296
1302
/**
1297
- * Checks if `value` is the [language type](https://es5.github.io/#x8) of `Object`.
1298
- * (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
1303
+ * Checks if `value` is the
1304
+ * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
1305
+ * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
1299
1306
*
1300
1307
* @static
1301
1308
* @memberOf _
1309
+ * @since 0.1.0
1302
1310
* @category Lang
1303
1311
* @param {* } value The value to check.
1304
1312
* @returns {boolean } Returns `true` if `value` is an object, else `false`.
@@ -1327,6 +1335,7 @@ return /******/ (function(modules) { // webpackBootstrap
1327
1335
*
1328
1336
* @static
1329
1337
* @memberOf _
1338
+ * @since 4.0.0
1330
1339
* @category Lang
1331
1340
* @param {* } value The value to check.
1332
1341
* @returns {boolean } Returns `true` if `value` is object-like, else `false`.
0 commit comments