feat: Allow a custom flip boundary container for Popover

babel-build.config.js

@@ -0,0 +1,16 @@
+const rootBabel = require('./babel.config');
+
+// TODO: Remove this once https://github.com/storybookjs/storybook/issues/11246 is fixed
+const popper2AliasRemovalPlugin = [
+    'babel-plugin-module-resolver',
+    {
+        alias: {
+            'react-popper-2': 'react-popper'
+        }
+    }
+];
+
+module.exports = {
+    ...rootBabel,
+    plugins: [...rootBabel.plugins, popper2AliasRemovalPlugin]
+};

package.json

@@ -16,7 +16,7 @@
   "scripts": {
     "build:index": "babel-node devtools/buildIndexFiles.js",
     "build:storybook": "babel-node devtools/buildVisualStories.js && babel-node scripts/copy-assets.js",
-    "build:cjs": "cross-env NODE_ENV=production BABEL_ENV=cjs babel src --ignore \"src/**/*.test.js\",\"src/**/*.stories.js\",\"src/Docs/*.stories.mdx\" --out-dir lib",
+    "build:cjs": "cross-env NODE_ENV=production BABEL_ENV=cjs babel src --config-file ./babel-build.config.js --ignore \"src/**/*.test.js\",\"src/**/*.stories.js\",\"src/Docs/*.stories.mdx\" --out-dir lib",
     "build": "npm run build:index && rm -rf lib && npm run build:cjs",
     "deploy": "gh-pages -d storybook-static",
     "dry-run": "npm run build && npm publish --dry-run",
@@ -59,7 +59,6 @@
     "react-focus-lock": "^2.3.1",
     "react-overlays": "^3.2.0",
     "react-popper": "^2.2.3",
-    "react-popper-2": "npm:react-popper@^2.2.3",
     "shortid": "^2.2.14",
     "tabbable": "^4.0.0"
   },
@@ -92,6 +91,7 @@
     "babel-jest": "^24.8.0",
     "babel-loader": "8.1.0",
     "babel-plugin-client-only-require": "^1.0.1",
+    "babel-plugin-module-resolver": "^4.0.0",
     "babel-plugin-named-asset-import": "^0.3.2",
     "babel-plugin-require-context-hook": "^1.0.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.23",
@@ -123,6 +123,7 @@
     "puppeteer": "^3.3.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0",
+    "react-popper-2": "npm:react-popper@^2.2.3",
     "react-router-dom": "^5.2.0",
     "react-syntax-highlighter": "^12.2.1",
     "react-test-renderer": "^16.8.0",

src/DatePicker/__stories__/DatePicker.stories.js

@@ -3,7 +3,6 @@ import DatePicker from '../DatePicker';
 import FormLabel from '../../Forms/FormLabel';
 import LayoutGrid from '../../LayoutGrid/LayoutGrid';
 import moment from 'moment';
-import React from 'react';
 import {
     boolean,
     date,
@@ -13,6 +12,7 @@ import {
     text,
     withKnobs
 } from '@storybook/addon-knobs';
+import React, { useEffect, useRef, useState } from 'react';
 
 export default {
     title: 'Component API/DatePicker',
@@ -72,6 +72,31 @@ export const compact = () => (
 
 compact.storyName = 'Compact';
 
+export const withCustomFlipContainer = () => {
+    const containerRef = useRef();
+    const [flipContainer, setFlipContainer] = useState();
+
+    useEffect(() => {
+        setFlipContainer(containerRef.current);
+    });
+
+    return (
+        <div style={{ alignItems: 'center', display: 'flex' }}>
+            <div ref={containerRef} style={{
+                border: '1px solid black',
+                padding: '420px 40px 450px 240px'
+            }}>
+                <DatePicker popoverProps={{ flipContainer }} />
+            </div>
+            <div style={{
+                backgroundColor: '#444',
+                width: '180px',
+                height: '120px'
+            }} />
+        </div>
+    );
+};
+
 export const disabled = () => (
     <DatePicker disabled />
 );

src/DatePicker/__stories__/__snapshots__/DatePicker.stories.storyshot

@@ -1426,3 +1426,83 @@ exports[`Storyshots Component API/DatePicker Weekday Start (Monday Start) 1`] =
   </div>
 </div>
 `;
+
+exports[`Storyshots Component API/DatePicker With Custom Flip Container 1`] = `
+<div
+  dir="ltr"
+>
+  <div
+    style={
+      Object {
+        "alignItems": "center",
+        "display": "flex",
+      }
+    }
+  >
+    <div
+      style={
+        Object {
+          "border": "1px solid black",
+          "padding": "420px 40px 450px 240px",
+        }
+      }
+    >
+      <div
+        defaultValue=""
+        onChange={[Function]}
+        onFocus={[Function]}
+      >
+        <div
+          className="fd-popover"
+        >
+          <div
+            onFocus={[Function]}
+            onMouseDown={[Function]}
+            onTouchStart={[Function]}
+          >
+            <div
+              className="fd-popover__control"
+            >
+              <div
+                aria-expanded={false}
+                aria-haspopup="true"
+                className="fd-input-group--control fd-input-group"
+              >
+                <input
+                  className="fd-input fd-input-group__input"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  onKeyPress={[Function]}
+                  placeholder="MM/DD/YYYY"
+                  type="text"
+                  value=""
+                />
+                <span
+                  className="fd-input-group__addon fd-input-group__addon--button"
+                >
+                  <button
+                    aria-label="Choose date"
+                    className="fd-button fd-button--transparent sap-icon--calendar fd-input-group__button"
+                    onClick={[Function]}
+                    type="button"
+                  />
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      style={
+        Object {
+          "backgroundColor": "#444",
+          "height": "120px",
+          "width": "180px",
+        }
+      }
+    />
+  </div>
+</div>
+`;

src/Popover/Popover.js

@@ -97,6 +97,8 @@ class Popover extends Component {
             disableEdgeDetection,
             disableKeyPressHandler,
             disableTriggerOnClick,
+            fallbackPlacements,
+            flipContainer,
             firstFocusIndex,
             onClickOutside,
             onEscapeKey,
@@ -167,6 +169,8 @@ class Popover extends Component {
                 <Popper
                     cssBlock='fd-popover'
                     disableEdgeDetection={disableEdgeDetection}
+                    fallbackPlacements={fallbackPlacements}
+                    flipContainer={flipContainer}
                     innerRef={innerRef}
                     noArrow={noArrow}
                     onClickOutside={chain(this.handleOutsideClick, onClickOutside)}
@@ -205,8 +209,15 @@ Popover.propTypes = {
     /** Set to **true** to remove default triggerBody handler used in onClick.
      * Useful for when a custom method is desired to open the Popover */
     disableTriggerOnClick: PropTypes.bool,
+    /** Where else to position the popover when the original placement is out of bounds */
+    fallbackPlacements: PropTypes.arrayOf(PropTypes.oneOf(POPPER_PLACEMENTS)),
     /** Index of the focusable item to focus first within the Popover */
     firstFocusIndex: PropTypes.number,
+    /** The bounding container to use when determining if the popover is out of bounds */
+    flipContainer: PropTypes.oneOfType([
+        PropTypes.arrayOf(PropTypes.element),
+        PropTypes.element
+    ]),
     /** Set to **true** to render a popover without an arrow */
     noArrow: PropTypes.bool,
     /** 'bottom-start',

src/Popover/__stories__/Popover.stories.js

@@ -9,7 +9,7 @@ import {
     boolean,
     select
 } from '@storybook/addon-knobs';
-import React, { useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 export default {
     title: 'Component API/Popover',
@@ -205,6 +205,36 @@ export const disableEdgeDetection = () => (
     </>
 );
 
+export const withCustomFlipContainer = () => {
+    const containerRef = useRef();
+    const [container, setContainer] = useState();
+
+    useEffect(() => {
+        setContainer(containerRef.current);
+    });
+
+    return (
+        <div style={{ alignItems: 'center', display: 'flex' }}>
+            <div style={{
+                backgroundColor: '#444',
+                width: '180px',
+                height: '120px'
+            }} />
+            <div ref={containerRef} style={{
+                border: '1px solid black',
+                padding: '120px 140px 250px 40px'
+            }}>
+                <Popover
+                    body={bodyContent}
+                    control={<Button glyph='navigation-up-arrow' option='transparent' />}
+                    fallbackPlacements={['left', 'right', 'top']}
+                    flipContainer={container}
+                    placement='bottom' />
+            </div>
+        </div>
+    );
+};
+
 export const noArrow = () => (
     <>
         <Popover