   @defaultProps =
     onClose             : kd.noop
     closeOnEsc          : yes
-    closeOnOutsideClick : yes
     hasOverlay          : yes
     isOpen              : no
     closeIcon           : yes
+
+  constructor: (options = {}, data) ->
+
+    super options, data
+
+    @handleMouseClickOutside = @handleMouseClickOutside.bind this
+
 
   getPortalProps: ->
     isOpened            : @props.isOpen
     onClose             : @props.onClose
     closeOnEsc          : @props.closeOnEsc
-    closeOnOutsideClick : @props.closeOnOutsideClick
+
+
+  componentDidMount: ->
+
+    document.addEventListener('mousedown', @handleMouseClickOutside);
+
+
+  componentWillUnmount: ->
+
+    document.removeEventListener('mousedown', @handleMouseClickOutside);
+
+
+  handleMouseClickOutside: (event) ->
+
+    return if isNodeInRoot event.target, React.findDOMNode @refs.ModalWrapper
+
+    return @props.handleMouseClickOutside(event)  if @props.handleMouseClickOutside
+
+    event.stopPropagation()
+    @props.onClose()
 
 
   renderModalCloseIcon: ->

    return null  unless @props.isOpen

    <Portal {...@getPortalProps()} ref="modal">
      <div className={kd.utils.curry 'Reactivity Modal', @props.className}>
        {@renderModalCloseIcon()}
        {@props.children}
      </div>

kd     = require 'kd'
React  = require 'kd-react'
Portal = require 'react-portal'
isNodeInRoot = require 'app/util/isnodeinroot'


class ModalOverlay extends React.Component
