new(Overlay): Add enableMouseInteraction prop

packages/core/src/components/Overlay/Portal/index.tsx

@@ -8,6 +8,8 @@ import { styleSheetPortal } from './styles';
 
 export type PortalProps = {
   children?: React.ReactNode;
+  /** Enable userSelect and pointer events. */
+  enableMouseInteraction?: boolean;
   /** True removes the background. */
   noBackground: boolean;
   /** Callback for when the overlay should be closed. */
@@ -86,21 +88,29 @@ export class Portal extends React.Component<PortalProps & WithStylesProps, Porta
   );
 
   render() {
-    const { cx, children, styles, x, y, noBackground } = this.props;
+    const { cx, children, enableMouseInteraction, styles, x, y, noBackground } = this.props;
     const { height } = this.state;
 
     return (
       <BasePortal>
         <FocusTrap>
           <div
             ref={this.ref}
-            className={cx(styles.container, noBackground ? styles.noBg : styles.opaque)}
+            className={cx(
+              styles.container,
+              !enableMouseInteraction && styles.noUserSelect,
+              noBackground ? styles.noBg : styles.opaque,
+            )}
             role="presentation"
             onClick={this.handleClick}
             onScroll={this.handleScrollThrottled}
           >
             <div
-              className={cx(styles.content, { paddingTop: y, marginLeft: x, minHeight: height })}
+              className={cx(
+                styles.content,
+                { paddingTop: y, marginLeft: x, minHeight: height },
+                enableMouseInteraction && styles.withPointerEvents,
+              )}
             >
               {children}
             </div>

packages/core/src/components/Overlay/Portal/styles.ts

@@ -10,14 +10,21 @@ export const styleSheetPortal: StyleSheet = ({ color }) => ({
     right: 0,
     bottom: 0,
     overflow: 'auto',
-    userSelect: 'none',
+  },
+
+  withPointerEvents: {
+    pointerEvents: 'all',
   },
 
   noBg: {
     pointerEvents: 'none',
     overflow: 'hidden',
   },
 
+  noUserSelect: {
+    userSelect: 'none',
+  },
+
   opaque: {
     backgroundColor: color.accent.blackout,
   },

packages/core/src/components/Overlay/index.tsx

@@ -7,6 +7,8 @@ import Portal from './Portal';
 export type OverlayProps = {
   /** Content to display within the overlay. */
   children?: React.ReactNode;
+  /** Enable userSelect and pointer events. */
+  enableMouseInteraction?: boolean;
   /** True to be visible. */
   open?: boolean;
   /** True for non-modal appearance. */
@@ -24,6 +26,7 @@ export type OverlayState = {
 /** An overlay that masks the entire viewport and displays a chunk of content over it. */
 export default class Overlay extends React.PureComponent<OverlayProps, OverlayState> {
   static defaultProps = {
+    enableMouseInteraction: false,
     noBackground: false,
     open: false,
   };
@@ -98,13 +101,15 @@ export default class Overlay extends React.PureComponent<OverlayProps, OverlaySt
   private handleScroll = throttle(() => this.props.onClose(), 100);
 
   render() {
-    const { onClose, open, children, noBackground } = this.props as Required<OverlayProps>;
+    const { onClose, enableMouseInteraction, open, children, noBackground } = this
+      .props as Required<OverlayProps>;
     const { x, y, targetRectReady } = this.state;
 
     return (
       <div ref={this.ref}>
         {open && targetRectReady && (
           <Portal
+            enableMouseInteraction={enableMouseInteraction}
             x={x}
             y={y}
             noBackground={noBackground}