Updating OutsideClickHandler to accept "flex" as a display prop

There are tons of different ways to handle the ternary for the style property on the main `div`, so feel free to chime in with something else if you think it would be more efficient.

Performing requested updates to patch-1

Updating the README.md to match the addition of flex

README formatting issue

Adding a missing quite to README

Reverting formatting changes

Reverting formatting changes brought on by text editor using prettier.

Bold to italics

Reverting bold to italics in the README

README.md

@@ -44,6 +44,6 @@ See https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Ev
 
 If `useCapture` is true, the event will be registered in the capturing phase and thus, propagated top-down instead of bottom-up as is the default.
 
-### display: `PropTypes.oneOf(['block', 'inline-block'])`
+### display: `PropTypes.oneOf(['block', 'flex', 'inline-block'])`
 
-By default, the `OutsideClickHandler` renders a `display: block` `<div />` to wrap the subtree defined by `children`. If desired, the `display` can be set to `inline-block` instead. There is no way not to render a wrapping `<div />`.
+By default, the `OutsideClickHandler` renders a `display: block` `<div />` to wrap the subtree defined by `children`. If desired, the `display` can be set to `inline-block` or `flex` instead. There is no way not to render a wrapping `<div />`.

package.json

@@ -65,6 +65,7 @@
   "dependencies": {
     "airbnb-prop-types": "^2.10.0",
     "consolidated-events": "^1.1.1",
+    "object.values": "^1.0.4",
     "prop-types": "^15.6.1"
   },
   "peerDependencies": {

src/OutsideClickHandler.jsx

@@ -3,9 +3,11 @@ import PropTypes from 'prop-types';
 
 import { forbidExtraProps } from 'airbnb-prop-types';
 import { addEventListener } from 'consolidated-events';
+import objectValues from 'object.values';
 
 const DISPLAY = {
   BLOCK: 'block',
+  FLEX: 'flex',
   INLINE_BLOCK: 'inline-block',
 };
 
@@ -112,7 +114,11 @@ export default class OutsideClickHandler extends React.Component {
     return (
       <div
         ref={this.setChildNodeRef}
-        style={display === DISPLAY.INLINE_BLOCK ? { display } : undefined}
+        style={
+          display !== DISPLAY.BLOCK && objectValues(DISPLAY).includes(display)
+            ? { display }
+            : undefined
+        }
       >
         {children}
       </div>