feat(floating-menu): more robust floating menu offset

Author: alfrdmalr

packages/react/src/components/OverflowMenu/OverflowMenu-story.js

@@ -140,4 +140,40 @@ storiesOf('OverflowMenu', module)
           `,
       },
     }
+  )
+  .add(
+    'custom viewport',
+    withReadme(OverflowREADME, () => (
+      <div
+        id="overflow-menu-custom-viewport-container"
+        style={{
+          border: '1px solid black',
+          width: 400,
+          height: 400,
+          overflow: 'scroll',
+          position: 'absolute',
+          top: 200,
+          left: 200,
+        }}>
+        <div data-floating-menu-container>
+          <OverflowMenuExample
+            overflowMenuProps={{
+              ...props.menu(),
+              getViewport: () =>
+                document.getElementById(
+                  'overflow-menu-custom-viewport-container'
+                ),
+            }}
+            overflowMenuItemProps={props.menuItem()}
+          />
+        </div>
+      </div>
+    )),
+    {
+      info: {
+        text: `
+         A custom viewport can be specified to make sure that the menu is offset correctly when the floating menu container is within some absolutely positioned element with it's own scrolling behavior.
+          `,
+      },
+    }
   );

packages/react/src/components/OverflowMenu/OverflowMenu.js

@@ -203,6 +203,11 @@ class OverflowMenu extends Component {
      * Function called when menu is closed
      */
     onOpen: PropTypes.func,
+
+    /**
+     * Optional callback used to obtain a custom 'viewport' that differs from the window.
+     */
+    getViewport: PropTypes.func,
   };
 
   static defaultProps = {
@@ -453,6 +458,7 @@ class OverflowMenu extends Component {
       renderIcon: IconElement,
       innerRef: ref,
       menuOptionsClass,
+      getViewport,
       ...other
     } = this.props;
 
@@ -507,6 +513,7 @@ class OverflowMenu extends Component {
         menuPosition={this.state.menuPosition}
         menuDirection={direction}
         menuOffset={flipped ? menuOffsetFlip : menuOffset}
+        getViewport={getViewport}
         menuRef={this._bindMenuBody}
         menuEl={this.menuEl}
         flipped={this.props.flipped}

packages/react/src/components/Tooltip/Tooltip-story.js

@@ -202,4 +202,51 @@ storiesOf('Tooltip', module)
       },
     }
   )
-  .add('uncontrolled tooltip', () => <UncontrolledTooltipExample />);
+  .add('uncontrolled tooltip', () => <UncontrolledTooltipExample />)
+  .add(
+    'custom viewport',
+    () => (
+      <div
+        id="overflow-menu-custom-viewport-container"
+        style={{
+          border: '1px solid black',
+          width: 400,
+          height: 400,
+          overflow: 'scroll',
+          position: 'absolute',
+          top: 200,
+          left: 200,
+        }}>
+        <div data-floating-menu-container>
+          <div style={{ marginTop: '2rem' }}>
+            <Tooltip
+              {...props.withIcon()}
+              getViewport={() =>
+                document.getElementById(
+                  'overflow-menu-custom-viewport-container'
+                )
+              }>
+              <p>
+                This is some tooltip text. This box shows the maximum amount of
+                text that should appear inside. If more room is needed please
+                use a modal instead.
+              </p>
+              <div className={`${prefix}--tooltip__footer`}>
+                <a href="/" className={`${prefix}--link`}>
+                  Learn More
+                </a>
+                <Button size="small">Create</Button>
+              </div>
+            </Tooltip>
+          </div>
+        </div>
+      </div>
+    ),
+    {
+      info: {
+        text: `
+            A custom viewport can be specified to make sure that the menu is offset correctly when the floating menu container is within some absolutely positioned element with it's own scrolling behavior.
+          `,
+      },
+    }
+  );

packages/react/src/components/Tooltip/Tooltip.js

@@ -188,6 +188,11 @@ class Tooltip extends Component {
     onChange: !useControlledStateWithValue
       ? PropTypes.func
       : requiredIfValueExists(PropTypes.func),
+
+    /**
+     * Optional callback used to obtain a custom 'viewport' that differs from the window.
+     */
+    getViewport: PropTypes.func,
   };
 
   static defaultProps = {
@@ -379,6 +384,7 @@ class Tooltip extends Component {
       menuOffset,
       tabIndex = 0,
       innerRef: ref,
+      getViewport,
       ...other
     } = this.props;
 
@@ -451,6 +457,7 @@ class Tooltip extends Component {
             menuPosition={this.state.triggerPosition}
             menuDirection={direction}
             menuOffset={menuOffset}
+            getViewport={getViewport}
             menuRef={node => {
               this._tooltipEl = node;
             }}>

packages/react/src/internal/FloatingMenu.js

@@ -65,6 +65,7 @@ const hasChangeInOffset = (oldMenuOffset = {}, menuOffset = {}) => {
  * @param {FloatingMenu~size} params.menuSize The size of the menu.
  * @param {FloatingMenu~position} params.refPosition The position of the triggering element.
  * @param {FloatingMenu~offset} [params.offset={ left: 0, top: 0 }] The position offset of the menu.
+ * @param {FloatingMenu~offset} [params.viewportOffset={left: 0, top: 0}] The position offset of the custom viewport
  * @param {string} [params.direction=bottom] The menu direction.
  * @param {number} [params.scrollX=0] The scroll position of the viewport.
  * @param {number} [params.scrollY=0] The scroll position of the viewport.
@@ -75,6 +76,7 @@ const getFloatingPosition = ({
   menuSize,
   refPosition,
   offset = {},
+  viewportOffset = {},
   direction = DIRECTION_BOTTOM,
   scrollX = 0,
   scrollY = 0,
@@ -88,25 +90,26 @@ const getFloatingPosition = ({
 
   const { width, height } = menuSize;
   const { top = 0, left = 0 } = offset;
+  const { left: viewportLeft = 0, top: viewportTop = 0 } = viewportOffset;
   const refCenterHorizontal = (refLeft + refRight) / 2;
   const refCenterVertical = (refTop + refBottom) / 2;
 
   return {
     [DIRECTION_LEFT]: () => ({
-      left: refLeft - width + scrollX - left,
-      top: refCenterVertical - height / 2 + scrollY + top,
+      left: refLeft - width + scrollX - left - viewportLeft,
+      top: refCenterVertical - height / 2 + scrollY + top - viewportTop,
     }),
     [DIRECTION_TOP]: () => ({
-      left: refCenterHorizontal - width / 2 + scrollX + left,
-      top: refTop - height + scrollY - top,
+      left: refCenterHorizontal - width / 2 + scrollX + left - viewportLeft,
+      top: refTop - height + scrollY - top - viewportTop,
     }),
     [DIRECTION_RIGHT]: () => ({
-      left: refRight + scrollX + left,
-      top: refCenterVertical - height / 2 + scrollY + top,
+      left: refRight + scrollX + left - viewportLeft,
+      top: refCenterVertical - height / 2 + scrollY + top - viewportTop,
     }),
     [DIRECTION_BOTTOM]: () => ({
-      left: refCenterHorizontal - width / 2 + scrollX + left,
-      top: refBottom + scrollY + top,
+      left: refCenterHorizontal - width / 2 + scrollX + left - viewportLeft,
+      top: refBottom + scrollY + top - viewportTop,
     }),
   }[direction]();
 };
@@ -172,6 +175,11 @@ class FloatingMenu extends React.Component {
      * The callback called when the menu body has been mounted and positioned.
      */
     onPlace: PropTypes.func,
+
+    /**
+     * Optional callback used to obtain a custom 'viewport' that differs from the window.
+     */
+    getViewport: PropTypes.func,
   };
 
   static defaultProps = {
@@ -233,11 +241,13 @@ class FloatingMenu extends React.Component {
       menuPosition: oldRefPosition = {},
       menuOffset: oldMenuOffset = {},
       menuDirection: oldMenuDirection,
+      getViewport: oldGetViewport,
     } = prevProps;
     const {
       menuPosition: refPosition = {},
       menuOffset = {},
       menuDirection,
+      getViewport,
     } = this.props;
 
     if (
@@ -246,26 +256,37 @@ class FloatingMenu extends React.Component {
       oldRefPosition.bottom !== refPosition.bottom ||
       oldRefPosition.left !== refPosition.left ||
       hasChangeInOffset(oldMenuOffset, menuOffset) ||
-      oldMenuDirection !== menuDirection
+      oldMenuDirection !== menuDirection ||
+      (oldGetViewport && oldGetViewport()) !== (getViewport && getViewport())
     ) {
       const menuSize = menuBody.getBoundingClientRect();
       const { menuEl, flipped } = this.props;
       const offset =
         typeof menuOffset !== 'function'
           ? menuOffset
           : menuOffset(menuBody, menuDirection, menuEl, flipped);
+
+      const viewport = getViewport && getViewport();
+      const viewportSize = viewport && viewport.getBoundingClientRect();
       // Skips if either in the following condition:
       // a) Menu body has `display:none`
       // b) `menuOffset` as a callback returns `undefined` (The callback saw that it couldn't calculate the value)
+
       if ((menuSize.width > 0 && menuSize.height > 0) || !offset) {
         this.setState({
           floatingPosition: getFloatingPosition({
             menuSize,
             refPosition,
             direction: menuDirection,
             offset,
-            scrollX: window.pageXOffset,
-            scrollY: window.pageYOffset,
+            viewportOffset: {
+              ...(viewportSize && {
+                left: viewportSize.left,
+                top: viewportSize.top,
+              }),
+            },
+            scrollX: viewport ? viewport.scrollLeft : window.pageXOffset,
+            scrollY: viewport ? viewport.scrollTop : window.pageYOffset,
           }),
         });
       }