Submenu flipping with Popper.js!

packages/core/src/common/abstractPureComponent.ts

@@ -11,7 +11,7 @@ import { isNodeEnv } from "./utils";
  * An abstract component that Blueprint components can extend
  * in order to add some common functionality like runtime props validation.
  */
-export abstract class AbstractPureComponent<P, S> extends React.PureComponent<P, S> {
+export abstract class AbstractPureComponent<P, S = {}> extends React.PureComponent<P, S> {
     /** Component displayName should be `public static`. This property exists to prevent incorrect usage. */
     protected displayName: never;
 

packages/core/src/components/menu/context.ts

@@ -0,0 +1,24 @@
+/*
+ * Copyright 2018 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the terms of the LICENSE file distributed with this project.
+ */
+
+import { isFunction } from "../../common/utils";
+
+export interface IMenuItemContext {
+    getSubmenuPopperModifiers?(): Popper.Modifiers;
+}
+
+export const MenuItemContextTypes: React.ValidationMap<IMenuItemContext> = {
+    getSubmenuPopperModifiers: assertFunctionProp,
+};
+
+// simple alternative to prop-types dependency
+function assertFunctionProp<T>(obj: T, key: keyof T) {
+    // context method is optional, so allow nulls
+    if (obj[key] == null || isFunction(obj[key])) {
+        return undefined;
+    }
+    return new Error(`[Blueprint] context ${key} must be function. received ${typeof obj[key]}.`);
+}

packages/core/src/components/menu/menu.md

@@ -83,25 +83,34 @@ To add a submenu to a `Menu`, simply nest `MenuItem`s within another `MenuItem`.
 The submenu opens to the right of its parent by default, but will adjust and flip to the left if
 there is not enough room to the right.
 
+`Menu` provides two `submenu` props to adjust this flipping behavior: you can customize the boundary element
+and the padding within that boundary element. Note that a `MenuItem` _must be inside_ a `Menu` element
+for these props to affect the submenus. On standalone `MenuItem`s (without a parent `Menu`, an anti-pattern) you can
+use `popoverProps.modifiers` directly to achieve the same result.
+
 ```jsx
-<MenuItem text="Submenu">
-    <MenuItem text="Child one" />
-    <MenuItem text="Child two" />
-    <MenuItem text="Child three" />
-</MenuItem>
+<Menu>
+    <MenuItem text="Submenu">
+        <MenuItem text="Child one" />
+        <MenuItem text="Child two" />
+        <MenuItem text="Child three" />
+    </MenuItem>
+</Menu>
 ```
 
 Alternatively, you can pass an array of `IMenuItemProps` to the `submenu` prop:
 
 ```jsx
-React.createElement(MenuItem, {
-    submenu: [
-        { text: "Child one" },
-        { text: "Child two" },
-        { text: "Child three" },
-    ],
-    text: "parent",
-});
+React.createElement(Menu, {},
+    React.createElement(MenuItem, {
+        submenu: [
+            { text: "Child one" },
+            { text: "Child two" },
+            { text: "Child three" },
+        ],
+        text: "parent",
+    }),
+);
 ```
 
 <div class="pt-callout pt-intent-warning pt-icon-warning-sign">

packages/core/src/components/menu/menu.tsx

@@ -9,14 +9,38 @@ import * as React from "react";
 
 import * as Classes from "../../common/classes";
 import { IProps } from "../../common/props";
+import { IMenuItemContext, MenuItemContextTypes } from "./context";
 
 export interface IMenuProps extends IProps {
     /** Ref handler that receives the HTML `<ul>` element backing this component. */
     ulRef?: (ref: HTMLUListElement) => any;
+
+    /**
+     * Boundary element for position of submenu. If submenu reaches the edge of the boundary,
+     * it will flip to the other side.
+     * This prop will apply to all `MenuItem`s inside this `Menu`, via React context.
+     * @see https://popper.js.org/popper-documentation.html#modifiers..flip.boundariesElement
+     * @default "viewport"
+     */
+    submenuBoundaryElement?: "scrollParent" | "viewport" | "window" | Element;
+
+    /**
+     * Pixel width of minimum distance between boundary element and submenu content.
+     * Submenus will flip to the other side if they come within this distance of the boundary.
+     * This prop will apply to all `MenuItem`s inside this `Menu`, via React context.
+     * @see https://popper.js.org/popper-documentation.html#modifiers..preventOverflow.padding
+     * @default 5
+     */
+    submenuBoundaryPadding?: number;
 }
 
 export class Menu extends React.Component<IMenuProps, {}> {
+    public static childContextTypes = MenuItemContextTypes;
     public static displayName = "Blueprint2.Menu";
+    public static defaultProps: IMenuProps = {
+        submenuBoundaryElement: "viewport",
+        submenuBoundaryPadding: 5,
+    };
 
     public render() {
         return (
@@ -25,4 +49,16 @@ export class Menu extends React.Component<IMenuProps, {}> {
             </ul>
         );
     }
+
+    public getChildContext(): IMenuItemContext {
+        return {
+            getSubmenuPopperModifiers: () => {
+                const { submenuBoundaryElement: boundariesElement, submenuBoundaryPadding: padding } = this.props;
+                return {
+                    flip: { boundariesElement, padding },
+                    preventOverflow: { boundariesElement, padding },
+                };
+            },
+        };
+    }
 }