fix(dropdown): removes actionmenu and dropdown overlay components

BREAKING CHANGE: removal of actionmenu overlay component
pluralsight · Apr 15, 2020 · bdb77b0 · bdb77b0
1 parent 0f47d94
commit bdb77b0
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 115 deletions.
diff --git a/packages/actionmenu/src/css/index.js b/packages/actionmenu/src/css/index.js
@@ -165,13 +165,5 @@ export default {
   },
   '.psds-actionmenu__item__arrow__svg': {
     fill: 'currentColor'
-  },
-
-  '.psds-actionmenu__overlay': {
-    position: 'fixed',
-    height: '100vh',
-    width: '100vw',
-    top: 0,
-    left: 0
   }
 }
diff --git a/packages/actionmenu/src/react/__specs__/__snapshots__/storyshots.spec.js.snap b/packages/actionmenu/src/react/__specs__/__snapshots__/storyshots.spec.js.snap
@@ -2324,11 +2324,6 @@ exports[`Storyshots onClose toggle show/hide 1`] = `
           }
         }
       >
-        <div
-          data-css-1crjksd=""
-          id="psds-actionmenu__overlay"
-          onClick={[Function]}
-        />
         <div
           data-css-1x8y3e3=""
           onKeyDown={[Function]}

diff --git a/packages/actionmenu/src/react/index.js b/packages/actionmenu/src/react/index.js
@@ -5,13 +5,11 @@ import PropTypes from 'prop-types'
 import ActionMenu from './menu.js'
 import Divider from './divider.js'
 import Item from './item.js'
-import Overlay from './overlay.js'
 
 import * as vars from '../vars/index.js'
 
 ActionMenu.Item = Item
 ActionMenu.Divider = Divider
-ActionMenu.Overlay = Overlay
 ActionMenu.origins = vars.origins
 
 ActionMenu.displayName = 'ActionMenu'

diff --git a/packages/actionmenu/src/react/menu.js b/packages/actionmenu/src/react/menu.js
@@ -6,7 +6,6 @@ import filterReactProps from '@pluralsight/ps-design-system-filter-react-props'
 import React from 'react'
 
 import { calcNextIndex } from '../js/index.js'
-import Overlay from './overlay.js'
 import stylesheet from '../css/index.js'
 
 const slide = css.keyframes(
@@ -125,36 +124,30 @@ const ActionMenu = React.forwardRef((props, forwardedRef) => {
   }
 
   return (
-    <>
-      {!props._isNested && typeof props.onClose === 'function' && (
-        <Overlay onClose={navigateOut} />
+    <div
+      {...styles.menu(props)}
+      {...filterReactProps(props)}
+      ref={ref}
+      onKeyDown={handleKeyDown}
+      role="menu"
+    >
+      {React.Children.map(props.children, (child, i) =>
+        child
+          ? React.cloneElement(child, {
+              isActive: i === activeIndex,
+              shouldFocusOnMount: props.shouldFocusOnMount,
+
+              _i: i,
+              _isKeyboarding: isKeyboarding,
+              _onDividerFocus: handleDividerFocus,
+              _onItemFocus: focusItemAtIndex,
+              _onMouseOver: focusItemAtIndexWithMouse,
+              _onChange: handleChange,
+              _origin: props.origin
+            })
+          : null
       )}
-
-      <div
-        {...styles.menu(props)}
-        {...filterReactProps(props)}
-        ref={ref}
-        onKeyDown={handleKeyDown}
-        role="menu"
-      >
-        {React.Children.map(props.children, (child, i) =>
-          child
-            ? React.cloneElement(child, {
-                isActive: i === activeIndex,
-                shouldFocusOnMount: props.shouldFocusOnMount,
-
-                _i: i,
-                _isKeyboarding: isKeyboarding,
-                _onDividerFocus: handleDividerFocus,
-                _onItemFocus: focusItemAtIndex,
-                _onMouseOver: focusItemAtIndexWithMouse,
-                _onChange: handleChange,
-                _origin: props.origin
-              })
-            : null
-        )}
-      </div>
-    </>
+    </div>
   )
 })
 

diff --git a/packages/actionmenu/src/react/overlay.js b/packages/actionmenu/src/react/overlay.js
diff --git a/packages/dropdown/src/css/index.js b/packages/dropdown/src/css/index.js
@@ -163,15 +163,6 @@ export default {
     marginTop: layout.spacingXXSmall
   },
 
-  // __page-overlay
-  '.psds-dropdown__page-overlay': {
-    position: 'fixed',
-    zIndex: 970,
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0
-  },
   '.psds-dropdown__field-halo': {
     maxWidth: '100%',
     display: 'block'

diff --git a/packages/dropdown/src/react/index.js b/packages/dropdown/src/react/index.js
@@ -1,6 +1,6 @@
 import { compose, css } from 'glamor'
 import PropTypes from 'prop-types'
-import React from 'react'
+import React, { useRef, useEffect } from 'react'
 
 import filterReactProps from '@pluralsight/ps-design-system-filter-react-props'
 import Halo from '@pluralsight/ps-design-system-halo'
@@ -80,7 +80,6 @@ const styles = {
       css(stylesheet[`.${label}.psds-theme--${themeName}`])
     )
   },
-  pageOverlay: _ => css(stylesheet['.psds-dropdown__page-overlay']),
   halo: _ => css(stylesheet['.psds-dropdown__field-halo'])
 }
 
@@ -151,10 +150,17 @@ const Dropdown = React.forwardRef((props, forwardedRef) => {
       allProps.onChange(evt, value, label)
   }
 
-  function handleOverlayClick() {
-    setOpen(false)
-    setKeyboarding(false)
+  const menu = useRef(null)
+  const handleClickOutsideMenu = e => {
+    if (menu.current && !menu.current.contains(e.target)) {
+      setOpen(false)
+      setKeyboarding(false)
+    }
   }
+  useEffect(() => {
+    isOpen && document.addEventListener('click', handleClickOutsideMenu)
+    return () => document.removeEventListener('click', handleClickOutsideMenu)
+  }, [isOpen])
 
   function getLongestMenuLabelState() {
     const getMenuItems = menu =>
@@ -208,9 +214,6 @@ const Dropdown = React.forwardRef((props, forwardedRef) => {
   }, [combinedRef, forwardedRef])
   return (
     <>
-      {isOpen && (
-        <div {...styles.pageOverlay(allProps)} onClick={handleOverlayClick} />
-      )}
       <label
         {...styles.dropdown(allProps)}
         {...(style ? { style: style } : null)}
@@ -260,6 +263,7 @@ const Dropdown = React.forwardRef((props, forwardedRef) => {
               isKeyboarding: isKeyboarding,
               onChange: handleMenuChange,
               onClick: handleMenuClick,
+              ref: menu,
               onClose: _ => {
                 setOpen(false)
                 if (typeof allProps.menu.props.onClose === 'function')