focus/dialog components

Overlay.js

/** 
If we made one component that supported all of the dialog properties/behaviors it'd look like this:
**/
export default class Overlay extends Component {
  static propTypes = {
    // see Portal.PropTypes:
    children: PropTypes.node,
    open: PropTypes.bool,
    onClose: PropTypes.func,
    onOpen: PropTypes.func,
    mountNode: PropTypes.oneOfType([
      PropTypes.element,
      PropTypes.func
    ]),
    
    label: PropTypes.string.isRequired, // for aria-label on the container
    defaultFocusElement: PropTypes.oneOfType([ // element to focus onOpen
      PropTypes.element,
      PropTypes.func
    ]),
    contentRef: PropTypes.func, // reference to the container element that is rendered in the Portal
    containsFocus: PropTypes.bool, // scopTab/trap focus when true
    shouldCloseOnDocumentClick: PropTypes.bool, // should this.props.onRequestClose fire when clicks occur outside the content
    withMask: PropTypes.bool, // when true, the background color is applied to overlay the content of the container element.
    
    // see @dismissable
    dismissable: PropTypes.bool, // when the close button is clicked it fires this.props.onRequestClose
    /* Note: if we could figure out a better way to handle the close button here that'd be great ( this feels gross ) */
    closeButtonLabel: PropTypes.string, // required if dismissable=true
    closeButtonRef: PropTypes.func,
    closeButtonVariant: PropTypes.string,
    closeButtonPlacement: PropTypes.oneOf(['before', 'after']), // top/left or top/right
    
    // see Transition.PropTypes
    transition: Transition.propTypes.type,
    onEnter: PropTypes.func,
    onEntering: PropTypes.func,
    onEntered: PropTypes.func,
    onExit: PropTypes.func,
    onExiting: PropTypes.func,
    onExited: PropTypes.func
  }
  static defaultProps = {
    open: false,
    shouldCloseOnDocumentClick: false,
    containsFocus: false,
    withMask: false,
    dismissable: true
  }

  /**
  Additional requirements/behavior:
    - renders children in a Portal
    - container element has aria-label and role="region"
    - returns focus onClose
    - calls onRequestClose on ESC and TAB key press
    - allows adding additional classes to the className on the container 
      (this should fix the Modal bug where shouldCloseOnClick wasn't working)
      
   Modal Example:
   `<Overlay withMask containsFocus transition="fade">...</Overlay>`
   
   Tray Example:
   `<Overlay shoulCloseOnDocumentClick>...</Overlay>`
   
   PopoverDialog Example:
   The issue here is that PopoverDialog should render using Popover, which uses Position, which renders in a Portal
   So do we change Position to use Overlay? That doesn't seem right. Not sure if the below will work because it's rendering
   2 Portals.
   ```
   <Popover>
     <PopoverTrigger>...</PopoverTrigger>
     <PopoverContent>
       <Overlay>...</Overlay>
     </PopoverContent>
   </Popover>
   ```
  **/
}