new(Overlay): Add enableMouseInteraction prop

[espressoroaster]

to: @williaster @alecklandgraf

Description

This PR adds the enableMouseInteraction prop to Overlay and Overlay/Portal to enable mouse events and mouse interaction in Overlays. In the Overlay portal stylesheet, we extract the container class' userSelect: 'none' out into a noUserSelect class, and introduce the hasPointerEvents withPointerEvents class to explicitly enable pointer events in Overlay. These two classes are composed in such a way that there are no breaking changes.

Motivation and Context

Overlay's portal implementation is useful for Tooltip and Popover popups, which need to escape their parent divs. The current Popover implementation renders the popup in a div with a set zIndex, which does not let the popup escape a DataTable row, while a plain Tooltip's <Overlay></Overlay> popup is able to escape the DataTable as intended.

To allow Popover to use <Overlay> for its Portal rendering and positioning logic, we added the ability to enable pointer events in Overlay so that Popover's mouse event based timeout logic and copy-paste functionality could work when implemented with Overlay.

Testing

Tested in storybook.

Screenshots

An overlay without enableMouseInteraction prop:

An overlay with enableMouseInteraction prop (mouse can interact with content in the overlay):

Checklist

• My code follows the style guide of this project.
• I have updated or added documentation accordingly.
• I have read the CONTRIBUTING document.

[airbnb-bot]

Size Changes

Package	Diff	ESM	Prev ESM	CJS	Prev CJS
core	+0.1%	566.94 KB	566.56 KB	709.02 KB	708.61 KB

Compared to master. File sizes are unminified and ungzipped.

View raw build stats

Previous (master)

{
  "apollo": {
    "esm": 10832,
    "lib": 14147
  },
  "app-shell": {
    "esm": 12906,
    "lib": 19874
  },
  "composer": {
    "esm": 68247,
    "lib": 101805
  },
  "core": {
    "esm": 580157,
    "lib": 725612
  },
  "forms": {
    "esm": 37350,
    "lib": 49298
  },
  "icons": {
    "esm": 156355,
    "lib": 205626
  },
  "layouts": {
    "esm": 15298,
    "lib": 20770
  },
  "metrics": {
    "esm": 5467,
    "lib": 7729
  },
  "test-utils": {
    "esm": 4279,
    "lib": 5937
  }
}

Current

{
  "apollo": {
    "esm": 10832,
    "lib": 14147
  },
  "app-shell": {
    "esm": 12906,
    "lib": 19874
  },
  "composer": {
    "esm": 68247,
    "lib": 101805
  },
  "core": {
    "esm": 580551,
    "lib": 726036
  },
  "forms": {
    "esm": 37350,
    "lib": 49298
  },
  "icons": {
    "esm": 156355,
    "lib": 205626
  },
  "layouts": {
    "esm": 15298,
    "lib": 20770
  },
  "metrics": {
    "esm": 5467,
    "lib": 7729
  },
  "test-utils": {
    "esm": 4279,
    "lib": 5937
  }
}

[williaster]

Nice! lgtm. trying to re-run CI tests

[williaster]

wdyt about withPointerEvents instead?

[espressoroaster]

sgtm, will make that change and push