[components] Pass down scroll container as context (#349)

* [components] Adding context scroll container

* [components] Removing use of scrollContainer, and use context

* [form-builder] Support for ScrollContainer in form-builder full screen

* [components] ScrollContainer fallback and cleanup

* [components] Scrollcontinaer scroll method Overlay

* [components] Remove closing logick from sticky

* [components] Use escapeable on dropdownbutton

* [components] Adding removeEventListener on scrollContainer

* [components] Cleanup sticky

* [components] Fix dropdownbutton position bug

* [components] Kebab-case scroll-container part

* [components] More robust detection of getScrollContainer context

* [components] ScrollContainer use this.handleScroll for scroll event

packages/@sanity/components/sanity.json

@@ -828,6 +828,14 @@
       "implements": "part:@sanity/components/portal/sticky",
       "path": "portal/Sticky.js"
     },
+    {
+      "name": "part:@sanity/components/utilities/scroll-container",
+      "description": "Portal that sticks to scrollContainer"
+    },
+    {
+      "implements": "part:@sanity/components/utilities/scroll-container",
+      "path": "utilities/ScrollContainer.js"
+    },
     {
       "implements": "part:@sanity/base/component",
       "path": "buttons/story.js"

packages/@sanity/components/src/buttons/DropDownButton.js

@@ -6,7 +6,6 @@ import ArrowIcon from 'part:@sanity/base/angle-down-icon'
 import Menu from 'part:@sanity/components/menus/default'
 import {omit} from 'lodash'
 import StickyPortal from 'part:@sanity/components/portal/sticky'
-import tryFindScrollContainer from '../utilities/tryFindScrollContainer'
 import Stacked from '../utilities/Stacked'
 import Escapable from '../utilities/Escapable'
 
@@ -19,7 +18,6 @@ class DropDownButton extends React.PureComponent {
         icon: PropTypes.func
       })
     ),
-    scrollContainer: PropTypes.element,
     onAction: PropTypes.func.isRequired,
     children: PropTypes.node.isRequired,
     inverted: PropTypes.bool,
@@ -43,28 +41,6 @@ class DropDownButton extends React.PureComponent {
 
   width = 100
 
-  componentDidMount() {
-    const {
-      scrollContainer
-    } = this.props
-
-    if (!this._rootElement) {
-      // console.error('no root element')
-    }
-
-    if (scrollContainer) {
-      this.setScrollContainerElement(scrollContainer)
-    } else {
-      this.setScrollContainerElement(tryFindScrollContainer(this._rootElement))
-    }
-  }
-
-  setScrollContainerElement = element => {
-    this.setState({
-      scrollContainer: element
-    })
-  }
-
   handleClickOutside = event => {
     this.setState({menuOpened: false})
   }
@@ -84,12 +60,6 @@ class DropDownButton extends React.PureComponent {
     this._menuElement = element
   }
 
-  handleCloseMenu = () => {
-    this.setState({
-      menuOpened: !this.state.menuOpened
-    })
-  }
-
   handleOnClick = event => {
     this.setState({
       menuOpened: !this.state.menuOpened,
@@ -103,7 +73,8 @@ class DropDownButton extends React.PureComponent {
   }
 
   handleResize = dimensions => {
-    if (this._menuElement.offsetHeight < (window.innerHeight - dimensions.rootTop)) {
+    const buttonHeight = this._rootElement.offsetHeight
+    if (this._menuElement.offsetHeight + buttonHeight < (window.innerHeight - dimensions.rootTop)) {
       this.setState({
         stickToBottom: true
       })
@@ -116,7 +87,7 @@ class DropDownButton extends React.PureComponent {
 
   render() {
     const {items, children, kind, className, origin, ...rest} = omit(this.props, 'onAction')
-    const {menuOpened, scrollContainer, width, stickToBottom} = this.state
+    const {menuOpened, width, stickToBottom} = this.state
 
 
     let menuClassName = styles.menu
@@ -164,7 +135,6 @@ class DropDownButton extends React.PureComponent {
                   {isActive => (
                     <StickyPortal
                       isOpen
-                      scrollContainer={scrollContainer}
                       onResize={this.handleResize}
                       onlyBottomSpace={false}
                       useOverlay={false}
@@ -175,14 +145,13 @@ class DropDownButton extends React.PureComponent {
                         ref={this.setMenuElement}
                         style={{minWidth: `${width}px`}}
                       >
-                        <Escapable onEscape={event => ((isActive || event.shiftKey) && this.handleCloseMenu())} />
+                        <Escapable onEscape={event => (isActive && this.handleClose())} />
                         <Menu
                           items={items}
                           isOpen
                           className={menuClassName}
                           onAction={this.handleAction}
-                          onClickOutside={this.handleCloseMenu}
-                          onClose={this.handleCloseMenu}
+                          onClickOutside={event => (isActive && this.handleClose())}
                         />
                       </div>
                     </StickyPortal>

packages/@sanity/components/src/dialogs/PopOver.js

@@ -3,58 +3,32 @@ import React from 'react'
 import styles from './styles/PopOver.css'
 import CloseIcon from 'part:@sanity/base/close-icon'
 import StickyPortal from 'part:@sanity/components/portal/sticky'
-import tryFindScrollContainer from '../utilities/tryFindScrollContainer'
-const PADDING = 5
 import Stacked from '../utilities/Stacked'
 import CaptureOutsideClicks from '../utilities/CaptureOutsideClicks'
 import Escapable from '../utilities/Escapable'
 
+const PADDING = 20
+
 export default class PopOver extends React.Component {
 
   static propTypes = {
     children: PropTypes.node.isRequired,
     onClose: PropTypes.func,
     isOpen: PropTypes.bool,
     color: PropTypes.oneOf(['default', 'danger', 'success', 'warning', 'info']),
-    scrollContainer: PropTypes.object,
     useOverlay: PropTypes.bool
   }
 
   static defaultProps = {
     color: 'default',
-    scrollContainer: undefined,
     onClose() {}, // eslint-disable-line
     isOpen: true,
     useOverlay: true
   }
 
   state = {
     arrowLeft: 0,
-    popoverLeft: 0,
-    scrollContainer: undefined,
-    isResizing: false
-  }
-
-  componentDidMount() {
-    const {
-      scrollContainer
-    } = this.props
-
-    if (!this._rootElement) {
-      // console.error('no root element')
-    }
-
-    if (scrollContainer) {
-      this.setScrollContainerElement(scrollContainer)
-    } else {
-      this.setScrollContainerElement(tryFindScrollContainer(this._rootElement))
-    }
-  }
-
-  setScrollContainerElement = element => {
-    this.setState({
-      scrollContainer: element
-    })
+    popoverLeft: 0
   }
 
   handleClose = () => {
@@ -117,14 +91,12 @@ export default class PopOver extends React.Component {
       popoverLeft,
       arrowLeft,
       availableHeight,
-      scrollContainer,
     } = this.state
 
     return (
       <div style={{display: 'span'}} ref={this.setRootElement}>
         <StickyPortal
           isOpen={isOpen}
-          scrollContainer={scrollContainer}
           onResize={this.handlePortalResize}
           useOverlay={useOverlay}
         >
@@ -163,7 +135,7 @@ export default class PopOver extends React.Component {
                       ref={this.setContentElement}
                       className={styles.content}
                       style={{
-                        maxHeight: `${availableHeight - 16}px`
+                        maxHeight: `${availableHeight - PADDING}px`
                       }}
                     >
                       {children}

packages/@sanity/components/src/edititem/EditItemFoldOut.js

@@ -3,7 +3,6 @@ import React from 'react'
 import styles from 'part:@sanity/components/edititem/fold-style'
 import CloseIcon from 'part:@sanity/base/close-icon'
 import StickyPortal from 'part:@sanity/components/portal/sticky'
-import tryFindScrollContainer from '../utilities/tryFindScrollContainer'
 import Stacked from '../utilities/Stacked'
 import Escapable from '../utilities/Escapable'
 import CaptureOutsideClicks from '../utilities/CaptureOutsideClicks'
@@ -14,38 +13,25 @@ export default class EditItemFoldOut extends React.PureComponent {
     title: PropTypes.string,
     children: PropTypes.node.isRequired,
     onClose: PropTypes.func,
-    scrollContainer: PropTypes.node
   }
 
   static defaultProps = {
     title: '',
-    scrollContainer: undefined,
     onClose() {}, // eslint-disable-line
   }
 
-  state = {
-    scrollContainer: undefined
-  }
-
   componentDidMount() {
-    const {scrollContainer} = this.props
-
-    if (scrollContainer) {
-      this.setScrollContainerElement(scrollContainer)
-    } else {
-      this.setScrollContainerElement(tryFindScrollContainer(this._rootElement))
-    }
     window.addEventListener('keydown', this.handleKeyDown)
   }
 
   componentWillUnmount() {
     window.removeEventListener('keydown', this.handleKeyDown)
   }
 
-  setScrollContainerElement = element => {
-    this.setState({
-      scrollContainer: element
-    })
+  state = {
+    left: 0,
+    width: 500,
+    height: 500
   }
 
   setRootElement = element => {
@@ -66,7 +52,7 @@ export default class EditItemFoldOut extends React.PureComponent {
 
   render() {
     const {title, onClose, children} = this.props
-    const {scrollContainer, width, left, height} = this.state
+    const {width, left, height} = this.state
     return (
       <div
         ref={this.setRootElement}
@@ -77,7 +63,6 @@ export default class EditItemFoldOut extends React.PureComponent {
           isOpen
           onlyBottomSpace
           useOverlay
-          scrollContainer={scrollContainer}
           addPadding={false}
           scrollIntoView={false}
           onResize={this.handleResize}