Update upstream

README.md

@@ -75,7 +75,7 @@ then [check out the "help wanted" label](https://github.com/palantir/blueprint/l
 [Lerna](https://lernajs.io/) manages inter-package dependencies in this monorepo.
 Builds are orchestrated via `lerna run` and NPM scripts.
 
-__Prerequisites__: Node.js v8+, Yarn v1.0+
+__Prerequisites__: Node.js v8+, Yarn v1.10+
 
 ### One-time setup
 

package.json

@@ -61,6 +61,9 @@
   "engines": {
     "node": ">=6.1"
   },
+  "resolutions": {
+    "node-gyp": "^3.6.3"
+  },
   "repository": {
     "type": "git",
     "url": "git@github.com:palantir/blueprint.git"

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueprintjs/core",
-  "version": "3.7.0",
+  "version": "3.9.0",
   "description": "Core styles & components",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",
@@ -39,7 +39,7 @@
     "verify": "npm-run-all compile -p dist test lint"
   },
   "dependencies": {
-    "@blueprintjs/icons": "^3.2.0",
+    "@blueprintjs/icons": "^3.3.0",
     "@types/dom4": "^2.0.0",
     "classnames": "^2.2",
     "dom4": "^2.0.1",
@@ -55,8 +55,8 @@
     "react-dom": "^15.3.0 || 16"
   },
   "devDependencies": {
-    "@blueprintjs/karma-build-scripts": "^0.8.0",
-    "@blueprintjs/node-build-scripts": "^0.7.0",
+    "@blueprintjs/karma-build-scripts": "*",
+    "@blueprintjs/node-build-scripts": "*",
     "@blueprintjs/test-commons": "^0.8.0",
     "enzyme": "^3.3.0",
     "karma": "^1.7.1",

packages/core/src/_reset.scss

@@ -21,6 +21,7 @@ html {
 body {
   @include base-typography();
   color: $pt-text-color;
+  font-family: $pt-font-family;
 }
 
 p {

packages/core/src/common/_flex.scss

@@ -36,8 +36,8 @@
 
   // CSS API support
   &::before,
-  // space after all children
   > * {
+    // space after all children
     #{$margin-prop}: $margin;
   }
 

packages/core/src/common/_mixins.scss

@@ -37,7 +37,6 @@ $pt-dark-intent-text-colors: (
   text-transform: none;
   line-height: $pt-line-height;
   letter-spacing: 0;
-  font-family: $pt-font-family;
   font-size: $pt-font-size;
   font-weight: 400;
 }

packages/core/src/common/classes.ts

@@ -14,7 +14,6 @@ const NS = process.env.BLUEPRINT_NAMESPACE || "bp3";
 export const ACTIVE = `${NS}-active`;
 export const ALIGN_LEFT = `${NS}-align-left`;
 export const ALIGN_RIGHT = `${NS}-align-right`;
-export const CONDENSED = `${NS}-condensed`;
 export const DARK = `${NS}-dark`;
 export const DISABLED = `${NS}-disabled`;
 export const FILL = `${NS}-fill`;
@@ -116,8 +115,9 @@ export const HTML_SELECT = `${NS}-html-select`;
 export const SELECT = `${NS}-select`;
 
 export const HTML_TABLE = `${NS}-html-table`;
-export const HTML_TABLE_STRIPED = `${HTML_TABLE}-striped`;
 export const HTML_TABLE_BORDERED = `${HTML_TABLE}-bordered`;
+export const HTML_TABLE_CONDENSED = `${HTML_TABLE}-condensed`;
+export const HTML_TABLE_STRIPED = `${HTML_TABLE}-striped`;
 
 export const INPUT = `${NS}-input`;
 export const INPUT_GHOST = `${INPUT}-ghost`;

packages/core/src/common/props.ts

@@ -23,6 +23,13 @@ export type HTMLDivProps = React.HTMLAttributes<HTMLDivElement>;
  */
 export type HTMLInputProps = React.InputHTMLAttributes<HTMLInputElement>;
 
+/**
+ * Alias for a `JSX.Element` or a value that renders nothing.
+ *
+ * In React, `boolean`, `null`, and `undefined` do not produce any output.
+ */
+export type MaybeElement = JSX.Element | false | null | undefined;
+
 /**
  * A shared base interface for all Blueprint component props.
  */
@@ -45,7 +52,7 @@ export interface IActionProps extends IIntentProps, IProps {
     disabled?: boolean;
 
     /** Name of a Blueprint UI icon (or an icon element) to render before the text. */
-    icon?: IconName | JSX.Element;
+    icon?: IconName | MaybeElement;
 
     /** Click event handler. */
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;

packages/core/src/components/alert/alert.tsx

@@ -7,7 +7,7 @@
 import classNames from "classnames";
 import * as React from "react";
 
-import { AbstractPureComponent, Classes, DISPLAYNAME_PREFIX, Intent, IProps } from "../../common";
+import { AbstractPureComponent, Classes, DISPLAYNAME_PREFIX, Intent, IProps, MaybeElement } from "../../common";
 import {
     ALERT_WARN_CANCEL_ESCAPE_KEY,
     ALERT_WARN_CANCEL_OUTSIDE_CLICK,
@@ -48,7 +48,7 @@ export interface IAlertProps extends IOverlayLifecycleProps, IProps {
     confirmButtonText?: string;
 
     /** Name of a Blueprint UI icon (or an icon element) to display on the left side. */
-    icon?: IconName | JSX.Element;
+    icon?: IconName | MaybeElement;
 
     /**
      * The intent to be applied to the confirm (right-most) button.
@@ -75,6 +75,13 @@ export interface IAlertProps extends IOverlayLifecycleProps, IProps {
      */
     transitionDuration?: number;
 
+    /**
+     * The container element into which the overlay renders its contents, when `usePortal` is `true`.
+     * This prop is ignored if `usePortal` is `false`.
+     * @default document.body
+     */
+    portalContainer?: HTMLElement;
+
     /**
      * Handler invoked when the alert is canceled. Alerts can be **canceled** in the following ways:
      * - clicking the cancel button (if `cancelButtonText` is defined)
@@ -130,6 +137,7 @@ export class Alert extends AbstractPureComponent<IAlertProps, {}> {
                 canEscapeKeyClose={canEscapeKeyCancel}
                 canOutsideClickClose={canOutsideClickCancel}
                 onClose={this.handleCancel}
+                portalContainer={this.props.portalContainer}
             >
                 <div className={Classes.ALERT_BODY}>
                     <Icon icon={icon} iconSize={40} intent={intent} />

packages/core/src/components/breadcrumbs/_breadcrumbs.scss

@@ -91,6 +91,7 @@ Styleguide breadcrumbs
   background: $light-gray1;
   cursor: pointer;
   padding: 1px ($pt-grid-size / 2);
+  vertical-align: text-bottom;
 
   &::before {
     display: block;

packages/core/src/components/breadcrumbs/breadcrumb.tsx

@@ -10,16 +10,28 @@ import * as React from "react";
 import * as Classes from "../../common/classes";
 import { IActionProps, ILinkProps } from "../../common/props";
 
-export interface IBreadcrumbProps extends IActionProps, ILinkProps {}
+export interface IBreadcrumbProps extends IActionProps, ILinkProps {
+    /** Whether this breadcrumb is the current breadcrumb. */
+    current?: boolean;
+}
 
 export const Breadcrumb: React.SFC<IBreadcrumbProps> = breadcrumbProps => {
     const classes = classNames(
         Classes.BREADCRUMB,
         {
+            [Classes.BREADCRUMB_CURRENT]: breadcrumbProps.current,
             [Classes.DISABLED]: breadcrumbProps.disabled,
         },
         breadcrumbProps.className,
     );
+    if (breadcrumbProps.href == null && breadcrumbProps.onClick == null) {
+        return (
+            <span className={classes}>
+                {breadcrumbProps.text}
+                {breadcrumbProps.children}
+            </span>
+        );
+    }
     return (
         <a
             className={classes}
@@ -29,6 +41,7 @@ export const Breadcrumb: React.SFC<IBreadcrumbProps> = breadcrumbProps => {
             target={breadcrumbProps.target}
         >
             {breadcrumbProps.text}
+            {breadcrumbProps.children}
         </a>
     );
 };

packages/core/src/components/breadcrumbs/breadcrumbs.md

@@ -1,14 +1,51 @@
 @# Breadcrumbs
 
-Breadcrumbs identify the current resource in an application.
+Breadcrumbs identify the path to the current resource in an application.
 
-@css breadcrumbs
+@reactExample BreadcrumbsExample
 
 @## Props
 
-The component renders an `a.@ns-breadcrumb`. You are responsible for constructing
-the `ul.@ns-breadcrumbs` list. [`CollapsibleList`](#core/components/collapsible-list)
-works nicely with this component because its props are a subset of `IMenuItemProps`.
+@### Breadcrumbs
+
+The `Breadcrumbs` component requires an `items` array of
+[breadcrumb props](#core/components/breadcrumbs.breadcrumb) and renders them in
+an [`OverflowList`](#core/components/overflow-list) to automatically collapse
+breadcrumbs that do not fit in the available space.
+
+```tsx
+const { Breadcrumbs, IBreadcrumbProps, Icon } = "@blueprintjs/core";
+
+const BREADCRUMBS: IBreadcrumbProps[] = [
+    { href: "/users", icon: "folder-close", text: "Users" },
+    { href: "/users/janet", icon: "folder-close", text: "Janet" },
+    { icon: "document", text: "image.jpg" },
+];
+
+export class BreadcrumbsExample extends React.Component {
+    public render() {
+        return (
+            <Breadcrumbs
+                currentBreadcrumbRenderer={this.renderCurrentBreadcrumb}
+                items={BREADCRUMBS}
+             />
+        );
+    }
+    private renderCurrentBreadcrumb = ({ text, ...restProps }: IBreadcrumbProps) => {
+        // customize rendering of last breadcrumb
+        return <Breadcrumb {...restProps}>{text} <Icon icon="star" /></Breadcrumb>;
+    };
+}
+```
+
+@interface IBreadcrumbsProps
+
+@### Breadcrumb
+
+The `Breadcrumb` component renders an `a.@ns-breadcrumb` if given an `href` or
+`onClick` and a `span.@ns-breadcrumb` otherwise. Typically you will supply an
+array of `IBreadcrumbProps` to the `<Breadcrumbs items>` prop and only render
+this component directly when defining a custom `breadcrumbRenderer`.
 
 @interface IBreadcrumbProps
 
@@ -27,3 +64,5 @@ user to that resource.
 containing breadcrumbs that are collapsed due to layout constraints.
 * When adding another element (such as a [tooltip](#core/components/tooltip) or
 [popover](#core/components/popover)) to a breadcrumb, wrap it around the contents of the `li`.
+
+@css breadcrumbs

packages/core/src/components/breadcrumbs/breadcrumbs.tsx

@@ -0,0 +1,130 @@
+/*
+ * Copyright 2018 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the terms of the LICENSE file distributed with this project.
+ */
+
+import classNames from "classnames";
+import * as React from "react";
+
+import { Boundary } from "../../common/boundary";
+import * as Classes from "../../common/classes";
+import { Position } from "../../common/position";
+import { IProps } from "../../common/props";
+import { Menu } from "../menu/menu";
+import { MenuItem } from "../menu/menuItem";
+import { IOverflowListProps, OverflowList } from "../overflow-list/overflowList";
+import { IPopoverProps, Popover } from "../popover/popover";
+import { Breadcrumb, IBreadcrumbProps } from "./breadcrumb";
+
+export interface IBreadcrumbsProps extends IProps {
+    /**
+     * Callback invoked to render visible breadcrumbs. Best practice is to
+     * render a `<Breadcrumb>` element. If `currentBreadcrumbRenderer` is also
+     * supplied, that callback will be used for the current breadcrumb instead.
+     * @default Breadcrumb
+     */
+    breadcrumbRenderer?: (props: IBreadcrumbProps) => JSX.Element;
+
+    /**
+     * Which direction the breadcrumbs should collapse from: start or end.
+     * @default Boundary.START
+     */
+    collapseFrom?: Boundary;
+
+    /**
+     * Callback invoked to render the current breadcrumb, which is the last
+     * element in the `items` array.
+     *
+     * If this prop is omitted, `breadcrumbRenderer` will be invoked for the
+     * current breadcrumb instead.
+     */
+    currentBreadcrumbRenderer?: (props: IBreadcrumbProps) => JSX.Element;
+
+    /**
+     * All breadcrumbs to display. Breadcrumbs that do not fit in the container
+     * will be rendered in an overflow menu instead.
+     */
+    items: IBreadcrumbProps[];
+
+    /**
+     * The minimum number of visible breadcrumbs that should never collapse into
+     * the overflow menu, regardless of DOM dimensions.
+     * @default 0
+     */
+    minVisibleItems?: number;
+
+    /**
+     * Props to spread to `OverflowList`. Note that `items`,
+     * `overflowRenderer`, and `visibleItemRenderer` cannot be changed.
+     */
+    overflowListProps?: Partial<IOverflowListProps<IBreadcrumbProps>>;
+
+    /**
+     * Props to spread to the `Popover` showing the overflow menu.
+     */
+    popoverProps?: IPopoverProps;
+}
+
+export class Breadcrumbs extends React.PureComponent<IBreadcrumbsProps> {
+    public static defaultProps: Partial<IBreadcrumbsProps> = {
+        collapseFrom: Boundary.START,
+    };
+
+    public render() {
+        const { className, collapseFrom, items, minVisibleItems, overflowListProps = {} } = this.props;
+        return (
+            <OverflowList
+                collapseFrom={collapseFrom}
+                minVisibleItems={minVisibleItems}
+                tagName="ul"
+                {...overflowListProps}
+                className={classNames(Classes.BREADCRUMBS, overflowListProps.className, className)}
+                items={items}
+                overflowRenderer={this.renderOverflow}
+                visibleItemRenderer={this.renderBreadcrumbWrapper}
+            />
+        );
+    }
+
+    private renderOverflow = (items: IBreadcrumbProps[]) => {
+        const { collapseFrom } = this.props;
+        const position = collapseFrom === Boundary.END ? Position.BOTTOM_RIGHT : Position.BOTTOM_LEFT;
+        let orderedItems = items;
+        if (collapseFrom === Boundary.START) {
+            // If we're collapsing from the start, the menu should be read from the bottom to the
+            // top, continuing with the breadcrumbs to the right. Since this means the first
+            // breadcrumb in the props must be the last in the menu, we need to reverse the overlow
+            // order.
+            orderedItems = items.slice().reverse();
+        }
+        return (
+            <li>
+                <Popover position={position} {...this.props.popoverProps}>
+                    <span className={Classes.BREADCRUMBS_COLLAPSED} />
+                    <Menu>{orderedItems.map(this.renderOverflowBreadcrumb)}</Menu>
+                </Popover>
+            </li>
+        );
+    };
+
+    private renderOverflowBreadcrumb = (props: IBreadcrumbProps, index: number) => {
+        const isClickable = props.href != null || props.onClick != null;
+        return <MenuItem disabled={!isClickable} {...props} text={props.text} key={index} />;
+    };
+
+    private renderBreadcrumbWrapper = (props: IBreadcrumbProps, index: number) => {
+        const isCurrent = this.props.items[this.props.items.length - 1] === props;
+        return <li key={index}>{this.renderBreadcrumb(props, isCurrent)}</li>;
+    };
+
+    private renderBreadcrumb(props: IBreadcrumbProps, isCurrent: boolean) {
+        if (isCurrent && this.props.currentBreadcrumbRenderer != null) {
+            return this.props.currentBreadcrumbRenderer(props);
+        } else if (this.props.breadcrumbRenderer != null) {
+            return this.props.breadcrumbRenderer(props);
+        } else {
+            return <Breadcrumb {...props} current={isCurrent} />;
+        }
+    }
+}