refactor(popper): Update to use react portal as default

modules/common/react/README.md

@@ -74,7 +74,9 @@ includes custom `data-*` attributes such as `data-test-id` to help facilitate au
 
 #### `containerElement: Element`
 
-> The element that contains the portal children when `portal` is true.
+> The containing element for Popper elements. The Popper uses
+> [Portals](https://reactjs.org/docs/portals.html) to place the DOM elements of the Popper as the
+> last child of the specified container element.
 
 Default: `document.body`
 
@@ -112,10 +114,3 @@ Default: `bottom`
 > Addtional options passed to the `popper.js` instance.
 
 ---
-
-#### `portal: boolean`
-
-> Flag to determine whether to use a portal for the popper. When false, the popper stays within the
-> DOM hierarchy of it's parent. When true, the popper is attached to the `containerElement`.
-
-Default: `true`

modules/common/react/lib/Popper.tsx

@@ -15,7 +15,10 @@ export interface PopperProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   children: React.ReactNode;
   /**
-   * The element that contains the portal children when `portal` is true.
+   * The containing element for Popper elements. The Popper uses
+   * {@link https://reactjs.org/docs/portals.html Portals} to place the DOM elements of the Popper as the
+   * last child of the specified container element.
+   * @default document.body
    */
   containerElement?: Element;
   /**
@@ -32,11 +35,6 @@ export interface PopperProps extends React.HTMLAttributes<HTMLDivElement> {
    * The additional options passed to the Popper's `popper.js` instance.
    */
   popperOptions?: PopperOptions;
-  /**
-   * If true, attach the Popper to the `containerElement`. If false, render the Popper within the DOM hierarchy of its parent.
-   * @default true
-   */
-  portal: boolean;
 }
 
 export class Popper extends React.PureComponent<PopperProps> {
@@ -45,7 +43,7 @@ export class Popper extends React.PureComponent<PopperProps> {
   static defaultProps = {
     open: true,
     placement: 'bottom',
-    portal: true,
+    containerElement: document.body,
   };
 
   public componentWillUnmount() {
@@ -56,36 +54,21 @@ export class Popper extends React.PureComponent<PopperProps> {
   }
 
   public render() {
+    const {anchorElement, children, open, placement, popperOptions, ...elemProps} = this.props;
+
     if (!this.props.open) {
       return null;
     }
 
-    if (!this.props.portal) {
-      return this.renderPopper();
-    }
-
-    // do not use defaultProps for containerElement because document may not be statically available
-    // at require time in some testing environments; instead we safely default at runtime
-    return ReactDOM.createPortal(this.renderPopper(), this.props.containerElement || document.body);
-  }
-
-  public renderPopper() {
-    const {
-      anchorElement,
-      children,
-      containerElement,
-      open,
-      placement,
-      popperOptions,
-      portal,
-      ...elemProps
-    } = this.props;
-
-    return (
+    const popperElement = (
       <div {...elemProps} ref={this.openPopper}>
         {this.props.children}
       </div>
     );
+
+    // do not use defaultProps for containerElement because document may not be statically available
+    // at require time in some testing environments; instead we safely default at runtime
+    return ReactDOM.createPortal(popperElement, this.props.containerElement || document.body);
   }
 
   private openPopper = (popperNode: HTMLDivElement) => {

modules/common/react/spec/Popper.spec.tsx

@@ -37,15 +37,6 @@ describe('Popper', () => {
     component.unmount();
   });
 
-  test('should render with Popper.js inline when portal is false', () => {
-    const component = renderPopper({portal: false});
-
-    expect(PopperJS).toHaveBeenCalled();
-    expect(ReactDOM.createPortal).not.toHaveBeenCalled();
-    expect(component.find('#content').length).toBe(1);
-    component.unmount();
-  });
-
   test('should render nothing when open is false', () => {
     const component = renderPopper({open: false});
 

modules/popup/react/README.md

@@ -24,8 +24,7 @@ import * as React from 'react';
 import {Popper} from '@workday/canvas-kit-react-common';
 import {Popup} from '@workday/canvas-kit-react-popup';
 
-// We use Popper from Material UI for our positioning
-<Popper placement={'bottom'} open={this.state.open} anchorElement={anchorEl}>
+<Popper placement={'bottom'} open={this.state.open} anchorEl={anchorEl}>
   <Popup
     width={300}
     heading={'Popup Title'}

modules/toast/react/README.md

@@ -26,8 +26,7 @@ import * as React from 'react';
 import {Popper} from '@workday/canvas-kit-react-common';
 import {Toast} from '@workday/canvas-kit-react-toast';
 
-// We use Popper from Material UI for our positioning
-<Popper placement={'top'} open={this.state.open} anchorElement={anchorEl}>
+<Popper placement={'top'} open={this.state.open} anchorEl={anchorEl}>
   <Toast onClose={this.handleClose}>{this.props.children}</Toast>
 </Popper>;
 ```