From fbdad8dad990a004dc0197593c2fdd3d08ceb0e2 Mon Sep 17 00:00:00 2001
From: Gilad Gray <ggray@palantir.com>
Date: Mon, 19 Mar 2018 11:03:42 -0700
Subject: [PATCH 1/5] use HTMLAttributes instead of HTMLProps, ensure HTMLAttrs
 appears last in extends list

---
 packages/core/src/components/button/abstractButton.tsx | 2 +-
 packages/core/src/components/button/buttonGroup.tsx    | 2 +-
 packages/core/src/components/callout/callout.tsx       | 4 ++--
 packages/core/src/components/forms/controlGroup.tsx    | 2 +-
 packages/core/src/components/forms/fileInput.tsx       | 4 ++--
 packages/core/src/components/forms/inputGroup.tsx      | 2 +-
 packages/core/src/components/forms/label.tsx           | 2 +-
 packages/core/src/components/forms/textArea.tsx        | 2 +-
 packages/core/src/components/navbar/navbar.tsx         | 3 +--
 packages/core/src/components/navbar/navbarDivider.tsx  | 3 +--
 packages/core/src/components/navbar/navbarGroup.tsx    | 2 +-
 packages/core/src/components/navbar/navbarHeading.tsx  | 5 ++---
 packages/core/src/components/portal/portal.tsx         | 2 +-
 packages/docs-app/src/components/clickToCopy.tsx       | 2 +-
 14 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/packages/core/src/components/button/abstractButton.tsx b/packages/core/src/components/button/abstractButton.tsx
index 269bf7cf71..13e60997fe 100644
--- a/packages/core/src/components/button/abstractButton.tsx
+++ b/packages/core/src/components/button/abstractButton.tsx
@@ -56,7 +56,7 @@ export interface IButtonState {
     isActive: boolean;
 }
 
-export abstract class AbstractButton<T> extends React.Component<React.HTMLProps<T> & IButtonProps, IButtonState> {
+export abstract class AbstractButton<T> extends React.Component<IButtonProps & React.HTMLAttributes<T>, IButtonState> {
     public state = {
         isActive: false,
     };
diff --git a/packages/core/src/components/button/buttonGroup.tsx b/packages/core/src/components/button/buttonGroup.tsx
index 26f3604dcd..2913eece2a 100644
--- a/packages/core/src/components/button/buttonGroup.tsx
+++ b/packages/core/src/components/button/buttonGroup.tsx
@@ -10,7 +10,7 @@ import { Alignment } from "../../common/alignment";
 import * as Classes from "../../common/classes";
 import { IProps } from "../../common/props";
 
-export interface IButtonGroupProps extends IProps, React.HTMLProps<HTMLDivElement> {
+export interface IButtonGroupProps extends IProps, React.HTMLAttributes<HTMLDivElement> {
     /**
      * Text alignment of button contents.
      * This prop only has an effect if buttons are wider than their default widths.
diff --git a/packages/core/src/components/callout/callout.tsx b/packages/core/src/components/callout/callout.tsx
index 2c6552e9e9..9da2662246 100644
--- a/packages/core/src/components/callout/callout.tsx
+++ b/packages/core/src/components/callout/callout.tsx
@@ -12,7 +12,7 @@ import { Icon } from "../../index";
 import { IconName } from "../icon/icon";
 
 /** This component also supports the full range of HTML `<div>` props. */
-export interface ICalloutProps extends IIntentProps, IProps {
+export interface ICalloutProps extends IIntentProps, IProps, React.HTMLAttributes<HTMLDivElement> {
     /**
      * Name of a Blueprint UI icon (or an icon element) to render on the left side.
      *
@@ -30,7 +30,7 @@ export interface ICalloutProps extends IIntentProps, IProps {
     title?: string;
 }
 
-export class Callout extends React.PureComponent<ICalloutProps & React.HTMLAttributes<HTMLDivElement>, {}> {
+export class Callout extends React.PureComponent<ICalloutProps, {}> {
     public render() {
         const { className, children, icon: _nospread, intent, title, ...htmlProps } = this.props;
         const iconName = this.getIconName();
diff --git a/packages/core/src/components/forms/controlGroup.tsx b/packages/core/src/components/forms/controlGroup.tsx
index fa884f267e..c9fd05f6a8 100644
--- a/packages/core/src/components/forms/controlGroup.tsx
+++ b/packages/core/src/components/forms/controlGroup.tsx
@@ -9,7 +9,7 @@ import * as React from "react";
 import * as Classes from "../../common/classes";
 import { IProps } from "../../common/props";
 
-export interface IControlGroupProps extends React.AllHTMLAttributes<HTMLDivElement>, IProps {
+export interface IControlGroupProps extends React.HTMLAttributes<HTMLDivElement>, IProps {
     /**
      * Whether the control group should take up the full width of its container.
      */
diff --git a/packages/core/src/components/forms/fileInput.tsx b/packages/core/src/components/forms/fileInput.tsx
index 837757d22c..75dee52e4c 100644
--- a/packages/core/src/components/forms/fileInput.tsx
+++ b/packages/core/src/components/forms/fileInput.tsx
@@ -10,7 +10,7 @@ import { Utils } from "../../common";
 import * as Classes from "../../common/classes";
 import { IProps } from "../../common/props";
 
-export interface IFileInputProps extends React.AllHTMLAttributes<HTMLLabelElement>, IProps {
+export interface IFileInputProps extends React.LabelHTMLAttributes<HTMLLabelElement>, IProps {
     /**
      * Whether the file input is non-interactive.
      * Setting this to `true` will automatically disable the child input too.
@@ -56,7 +56,7 @@ export interface IFileInputProps extends React.AllHTMLAttributes<HTMLLabelElemen
 
 // TODO: write tests (ignoring for now to get a build passing quickly)
 /* istanbul ignore next */
-export class FileInput extends React.Component<IFileInputProps, {}> {
+export class FileInput extends React.PureComponent<IFileInputProps, {}> {
     public static displayName = "Blueprint2.FileInput";
 
     public static defaultProps: IFileInputProps = {
diff --git a/packages/core/src/components/forms/inputGroup.tsx b/packages/core/src/components/forms/inputGroup.tsx
index 38a124ae62..9eca34ef03 100644
--- a/packages/core/src/components/forms/inputGroup.tsx
+++ b/packages/core/src/components/forms/inputGroup.tsx
@@ -48,7 +48,7 @@ export interface IInputGroupState {
     rightElementWidth?: number;
 }
 
-export class InputGroup extends React.PureComponent<HTMLInputProps & IInputGroupProps, IInputGroupState> {
+export class InputGroup extends React.PureComponent<IInputGroupProps & HTMLInputProps, IInputGroupState> {
     public static displayName = "Blueprint2.InputGroup";
 
     public state: IInputGroupState = {
diff --git a/packages/core/src/components/forms/label.tsx b/packages/core/src/components/forms/label.tsx
index 3e862bbd0e..fadac921ad 100644
--- a/packages/core/src/components/forms/label.tsx
+++ b/packages/core/src/components/forms/label.tsx
@@ -9,7 +9,7 @@ import * as React from "react";
 import * as Classes from "../../common/classes";
 import { IProps } from "../../common/props";
 
-export interface ILabelProps extends React.AllHTMLAttributes<HTMLLabelElement>, IProps {
+export interface ILabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>, IProps {
     /**
      * Whether the label is non-interactive.
      * Be sure to explicitly disable any child controls as well.
diff --git a/packages/core/src/components/forms/textArea.tsx b/packages/core/src/components/forms/textArea.tsx
index 91968f826e..a62f095392 100644
--- a/packages/core/src/components/forms/textArea.tsx
+++ b/packages/core/src/components/forms/textArea.tsx
@@ -9,7 +9,7 @@ import * as React from "react";
 import * as Classes from "../../common/classes";
 import { IIntentProps, IProps } from "../../common/props";
 
-export interface ITextAreaProps extends React.AllHTMLAttributes<HTMLTextAreaElement>, IIntentProps, IProps {
+export interface ITextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement>, IIntentProps, IProps {
     /**
      * Whether the text area should take up the full width of its container.
      */
diff --git a/packages/core/src/components/navbar/navbar.tsx b/packages/core/src/components/navbar/navbar.tsx
index 70093237f7..c81999beb0 100644
--- a/packages/core/src/components/navbar/navbar.tsx
+++ b/packages/core/src/components/navbar/navbar.tsx
@@ -15,8 +15,7 @@ import { NavbarHeading } from "./navbarHeading";
 export { INavbarDividerProps } from "./navbarDivider";
 
 // allow the empty interface so we can label it clearly in the docs
-// tslint:disable-next-line:no-empty-interface
-export interface INavbarProps extends React.HTMLProps<HTMLDivElement>, IProps {
+export interface INavbarProps extends IProps, React.HTMLAttributes<HTMLDivElement> {
     // Empty
 }
 
diff --git a/packages/core/src/components/navbar/navbarDivider.tsx b/packages/core/src/components/navbar/navbarDivider.tsx
index d9872b4fa1..5bed26a57d 100644
--- a/packages/core/src/components/navbar/navbarDivider.tsx
+++ b/packages/core/src/components/navbar/navbarDivider.tsx
@@ -10,8 +10,7 @@ import * as Classes from "../../common/classes";
 import { IProps } from "../../common/props";
 
 // allow the empty interface so we can label it clearly in the docs
-// tslint:disable-next-line:no-empty-interface
-export interface INavbarDividerProps extends React.HTMLProps<HTMLDivElement>, IProps {
+export interface INavbarDividerProps extends IProps, React.HTMLAttributes<HTMLDivElement> {
     // Empty
 }
 
diff --git a/packages/core/src/components/navbar/navbarGroup.tsx b/packages/core/src/components/navbar/navbarGroup.tsx
index 46f1035ad3..d384aeeaa7 100644
--- a/packages/core/src/components/navbar/navbarGroup.tsx
+++ b/packages/core/src/components/navbar/navbarGroup.tsx
@@ -10,7 +10,7 @@ import { Alignment } from "../../common/alignment";
 import * as Classes from "../../common/classes";
 import { IProps } from "../../common/props";
 
-export interface INavbarGroupProps extends React.HTMLProps<HTMLDivElement>, IProps {
+export interface INavbarGroupProps extends IProps, React.HTMLAttributes<HTMLDivElement> {
     /**
      * The side of the navbar on which the group should appear.
      * The `Alignment` enum provides constants for these values.
diff --git a/packages/core/src/components/navbar/navbarHeading.tsx b/packages/core/src/components/navbar/navbarHeading.tsx
index 6f4dbb4315..c5d13fe6b7 100644
--- a/packages/core/src/components/navbar/navbarHeading.tsx
+++ b/packages/core/src/components/navbar/navbarHeading.tsx
@@ -10,14 +10,13 @@ import * as Classes from "../../common/classes";
 import { IProps } from "../../common/props";
 
 // allow the empty interface so we can label it clearly in the docs
-// tslint:disable-next-line:no-empty-interface
-export interface INavbarHeadingProps extends React.HTMLProps<HTMLDivElement>, IProps {
+export interface INavbarHeadingProps extends IProps, React.HTMLAttributes<HTMLDivElement> {
     // Empty
 }
 
 // this component is simple enough that tests would be purely tautological.
 /* istanbul ignore next */
-export class NavbarHeading extends React.PureComponent<React.HTMLProps<HTMLDivElement>, {}> {
+export class NavbarHeading extends React.PureComponent<INavbarHeadingProps, {}> {
     public static displayName = "Blueprint2.NavbarHeading";
 
     public render() {
diff --git a/packages/core/src/components/portal/portal.tsx b/packages/core/src/components/portal/portal.tsx
index c8b876da34..04e266ebfb 100644
--- a/packages/core/src/components/portal/portal.tsx
+++ b/packages/core/src/components/portal/portal.tsx
@@ -12,7 +12,7 @@ import * as Errors from "../../common/errors";
 import { IProps } from "../../common/props";
 import { safeInvoke } from "../../common/utils";
 
-export interface IPortalProps extends IProps, React.HTMLProps<HTMLDivElement> {
+export interface IPortalProps extends IProps, React.HTMLAttributes<HTMLDivElement> {
     /**
      * Callback invoked when the children of this `Portal` have been added to the DOM.
      */
diff --git a/packages/docs-app/src/components/clickToCopy.tsx b/packages/docs-app/src/components/clickToCopy.tsx
index d0a6635a13..10afbdaa82 100644
--- a/packages/docs-app/src/components/clickToCopy.tsx
+++ b/packages/docs-app/src/components/clickToCopy.tsx
@@ -10,7 +10,7 @@ import * as React from "react";
 import { IProps, Keys, removeNonHTMLProps, Utils } from "@blueprintjs/core";
 import { createKeyEventHandler } from "@blueprintjs/docs-theme";
 
-export interface IClickToCopyProps extends IProps, React.HTMLProps<HTMLDivElement> {
+export interface IClickToCopyProps extends IProps, React.HTMLAttributes<HTMLDivElement> {
     /**
      * Additional class names to apply after value has been copied
      * @default "docs-clipboard-copied"

From 3b3137676a6b3af0c9e24dfae189c25ab849d03d Mon Sep 17 00:00:00 2001
From: Gilad Gray <ggray@palantir.com>
Date: Mon, 19 Mar 2018 11:15:20 -0700
Subject: [PATCH 2/5] fix buttons HTMLAttributes

---
 packages/core/src/components/button/abstractButton.tsx | 5 ++++-
 packages/core/src/components/button/buttons.tsx        | 4 ++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/components/button/abstractButton.tsx b/packages/core/src/components/button/abstractButton.tsx
index 13e60997fe..080c712693 100644
--- a/packages/core/src/components/button/abstractButton.tsx
+++ b/packages/core/src/components/button/abstractButton.tsx
@@ -56,7 +56,10 @@ export interface IButtonState {
     isActive: boolean;
 }
 
-export abstract class AbstractButton<T> extends React.Component<IButtonProps & React.HTMLAttributes<T>, IButtonState> {
+export abstract class AbstractButton<H extends React.HTMLAttributes<any>> extends React.PureComponent<
+    IButtonProps & H,
+    IButtonState
+> {
     public state = {
         isActive: false,
     };
diff --git a/packages/core/src/components/button/buttons.tsx b/packages/core/src/components/button/buttons.tsx
index 0924c4551b..9584d1a71c 100644
--- a/packages/core/src/components/button/buttons.tsx
+++ b/packages/core/src/components/button/buttons.tsx
@@ -14,7 +14,7 @@ import { AbstractButton, IButtonProps } from "./abstractButton";
 
 export { IButtonProps };
 
-export class Button extends AbstractButton<HTMLButtonElement> {
+export class Button extends AbstractButton<React.ButtonHTMLAttributes<HTMLButtonElement>> {
     public static displayName = "Blueprint2.Button";
 
     public render() {
@@ -26,7 +26,7 @@ export class Button extends AbstractButton<HTMLButtonElement> {
     }
 }
 
-export class AnchorButton extends AbstractButton<HTMLAnchorElement> {
+export class AnchorButton extends AbstractButton<React.AnchorHTMLAttributes<HTMLAnchorElement>> {
     public static displayName = "Blueprint2.AnchorButton";
 
     public render() {

From f5b0992f7ccf44385a714cef1773a3ab79fa2750 Mon Sep 17 00:00:00 2001
From: Gilad Gray <ggray@palantir.com>
Date: Mon, 19 Mar 2018 12:08:24 -0700
Subject: [PATCH 3/5] Card supports HTML props

---
 packages/core/src/components/card/card.tsx | 15 ++++-----------
 packages/core/test/card/cardTests.tsx      |  7 +++++++
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/core/src/components/card/card.tsx b/packages/core/src/components/card/card.tsx
index 36f6fa1c21..488551d4c6 100644
--- a/packages/core/src/components/card/card.tsx
+++ b/packages/core/src/components/card/card.tsx
@@ -9,7 +9,7 @@ import * as React from "react";
 import * as Classes from "../../common/classes";
 import { IProps } from "../../common/props";
 
-export interface ICardProps extends IProps {
+export interface ICardProps extends IProps, React.HTMLAttributes<HTMLDivElement> {
     /**
      * Controls the intensity of the drop shadow beneath the card: the higher
      * the elevation, the higher the drop shadow. At elevation `0`, no drop
@@ -61,20 +61,13 @@ export class Card extends React.PureComponent<ICardProps, {}> {
     };
 
     public render() {
-        return (
-            <div className={this.getClassName()} onClick={this.props.onClick}>
-                {this.props.children}
-            </div>
-        );
-    }
-
-    private getClassName() {
-        const { elevation, interactive, className } = this.props;
-        return classNames(
+        const { className, elevation, interactive, ...htmlProps } = this.props;
+        const classes = classNames(
             Classes.CARD,
             { [Classes.INTERACTIVE]: interactive },
             ELEVATION_CLASSES[elevation],
             className,
         );
+        return <div className={classes} {...htmlProps} />;
     }
 }
diff --git a/packages/core/test/card/cardTests.tsx b/packages/core/test/card/cardTests.tsx
index 54f713102a..1e6586182f 100644
--- a/packages/core/test/card/cardTests.tsx
+++ b/packages/core/test/card/cardTests.tsx
@@ -37,4 +37,11 @@ describe("<Card>", () => {
         shallow(<Card onClick={onClick} />).simulate("click");
         assert.isTrue(onClick.calledOnce);
     });
+
+    it("supports HTML props", () => {
+        const onChange = sinon.spy();
+        const card = shallow(<Card onChange={onChange} title="foo" tabIndex={4000} />).find("div");
+        assert.strictEqual(card.prop("onChange"), onChange);
+        assert.strictEqual(card.prop("title"), "foo");
+    });
 });

From 2671faa608aa1197970eb2aee776068853f697fe Mon Sep 17 00:00:00 2001
From: Gilad Gray <ggray@palantir.com>
Date: Mon, 19 Mar 2018 14:06:56 -0700
Subject: [PATCH 4/5] HTMLDivProps type alias

---
 packages/core/src/common/props.ts                     | 6 ++++++
 packages/core/src/components/button/buttonGroup.tsx   | 4 ++--
 packages/core/src/components/callout/callout.tsx      | 4 ++--
 packages/core/src/components/card/card.tsx            | 4 ++--
 packages/core/src/components/forms/controlGroup.tsx   | 4 ++--
 packages/core/src/components/navbar/navbar.tsx        | 4 ++--
 packages/core/src/components/navbar/navbarDivider.tsx | 4 ++--
 packages/core/src/components/navbar/navbarGroup.tsx   | 4 ++--
 packages/core/src/components/navbar/navbarHeading.tsx | 4 ++--
 packages/core/src/components/popover/popover.tsx      | 4 ++--
 packages/core/src/components/portal/portal.tsx        | 4 ++--
 packages/datetime/test/dateRangeInputTests.tsx        | 5 +++--
 packages/docs-app/src/components/clickToCopy.tsx      | 4 ++--
 13 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/packages/core/src/common/props.ts b/packages/core/src/common/props.ts
index 1a4e6300f2..44267aab71 100644
--- a/packages/core/src/common/props.ts
+++ b/packages/core/src/common/props.ts
@@ -9,6 +9,12 @@ import * as React from "react";
 import { IconName } from "@blueprintjs/icons";
 import { Intent } from "./intent";
 
+/**
+ * Alias for all valid HTML props for `<div>` element.
+ * Does not include React's `ref` or `key`.
+ */
+export type HTMLDivProps = React.HTMLAttributes<HTMLDivElement>;
+
 /**
  * Alias for all valid HTML props for `<input>` element.
  * Does not include React's `ref` or `key`.
diff --git a/packages/core/src/components/button/buttonGroup.tsx b/packages/core/src/components/button/buttonGroup.tsx
index 2913eece2a..e0017731fe 100644
--- a/packages/core/src/components/button/buttonGroup.tsx
+++ b/packages/core/src/components/button/buttonGroup.tsx
@@ -8,9 +8,9 @@ import classNames from "classnames";
 import * as React from "react";
 import { Alignment } from "../../common/alignment";
 import * as Classes from "../../common/classes";
-import { IProps } from "../../common/props";
+import { HTMLDivProps, IProps } from "../../common/props";
 
-export interface IButtonGroupProps extends IProps, React.HTMLAttributes<HTMLDivElement> {
+export interface IButtonGroupProps extends IProps, HTMLDivProps {
     /**
      * Text alignment of button contents.
      * This prop only has an effect if buttons are wider than their default widths.
diff --git a/packages/core/src/components/callout/callout.tsx b/packages/core/src/components/callout/callout.tsx
index 9da2662246..582fde3dd3 100644
--- a/packages/core/src/components/callout/callout.tsx
+++ b/packages/core/src/components/callout/callout.tsx
@@ -7,12 +7,12 @@
 import classNames from "classnames";
 import * as React from "react";
 
-import { Classes, IIntentProps, Intent, IProps } from "../../common";
+import { Classes, HTMLDivProps, IIntentProps, Intent, IProps } from "../../common";
 import { Icon } from "../../index";
 import { IconName } from "../icon/icon";
 
 /** This component also supports the full range of HTML `<div>` props. */
-export interface ICalloutProps extends IIntentProps, IProps, React.HTMLAttributes<HTMLDivElement> {
+export interface ICalloutProps extends IIntentProps, IProps, HTMLDivProps {
     /**
      * Name of a Blueprint UI icon (or an icon element) to render on the left side.
      *
diff --git a/packages/core/src/components/card/card.tsx b/packages/core/src/components/card/card.tsx
index 488551d4c6..3ee88922d4 100644
--- a/packages/core/src/components/card/card.tsx
+++ b/packages/core/src/components/card/card.tsx
@@ -7,9 +7,9 @@
 import classNames from "classnames";
 import * as React from "react";
 import * as Classes from "../../common/classes";
-import { IProps } from "../../common/props";
+import { HTMLDivProps, IProps } from "../../common/props";
 
-export interface ICardProps extends IProps, React.HTMLAttributes<HTMLDivElement> {
+export interface ICardProps extends IProps, HTMLDivProps {
     /**
      * Controls the intensity of the drop shadow beneath the card: the higher
      * the elevation, the higher the drop shadow. At elevation `0`, no drop
diff --git a/packages/core/src/components/forms/controlGroup.tsx b/packages/core/src/components/forms/controlGroup.tsx
index c9fd05f6a8..a929c6d09b 100644
--- a/packages/core/src/components/forms/controlGroup.tsx
+++ b/packages/core/src/components/forms/controlGroup.tsx
@@ -7,9 +7,9 @@
 import classNames from "classnames";
 import * as React from "react";
 import * as Classes from "../../common/classes";
-import { IProps } from "../../common/props";
+import { HTMLDivProps, IProps } from "../../common/props";
 
-export interface IControlGroupProps extends React.HTMLAttributes<HTMLDivElement>, IProps {
+export interface IControlGroupProps extends IProps, HTMLDivProps {
     /**
      * Whether the control group should take up the full width of its container.
      */
diff --git a/packages/core/src/components/navbar/navbar.tsx b/packages/core/src/components/navbar/navbar.tsx
index c81999beb0..307e653663 100644
--- a/packages/core/src/components/navbar/navbar.tsx
+++ b/packages/core/src/components/navbar/navbar.tsx
@@ -7,7 +7,7 @@
 import classNames from "classnames";
 import * as React from "react";
 import * as Classes from "../../common/classes";
-import { IProps } from "../../common/props";
+import { HTMLDivProps, IProps } from "../../common/props";
 import { NavbarDivider } from "./navbarDivider";
 import { NavbarGroup } from "./navbarGroup";
 import { NavbarHeading } from "./navbarHeading";
@@ -15,7 +15,7 @@ import { NavbarHeading } from "./navbarHeading";
 export { INavbarDividerProps } from "./navbarDivider";
 
 // allow the empty interface so we can label it clearly in the docs
-export interface INavbarProps extends IProps, React.HTMLAttributes<HTMLDivElement> {
+export interface INavbarProps extends IProps, HTMLDivProps {
     // Empty
 }
 
diff --git a/packages/core/src/components/navbar/navbarDivider.tsx b/packages/core/src/components/navbar/navbarDivider.tsx
index 5bed26a57d..14a45917fa 100644
--- a/packages/core/src/components/navbar/navbarDivider.tsx
+++ b/packages/core/src/components/navbar/navbarDivider.tsx
@@ -7,10 +7,10 @@
 import classNames from "classnames";
 import * as React from "react";
 import * as Classes from "../../common/classes";
-import { IProps } from "../../common/props";
+import { HTMLDivProps, IProps } from "../../common/props";
 
 // allow the empty interface so we can label it clearly in the docs
-export interface INavbarDividerProps extends IProps, React.HTMLAttributes<HTMLDivElement> {
+export interface INavbarDividerProps extends IProps, HTMLDivProps {
     // Empty
 }
 
diff --git a/packages/core/src/components/navbar/navbarGroup.tsx b/packages/core/src/components/navbar/navbarGroup.tsx
index d384aeeaa7..1954e7b291 100644
--- a/packages/core/src/components/navbar/navbarGroup.tsx
+++ b/packages/core/src/components/navbar/navbarGroup.tsx
@@ -8,9 +8,9 @@ import classNames from "classnames";
 import * as React from "react";
 import { Alignment } from "../../common/alignment";
 import * as Classes from "../../common/classes";
-import { IProps } from "../../common/props";
+import { HTMLDivProps, IProps } from "../../common/props";
 
-export interface INavbarGroupProps extends IProps, React.HTMLAttributes<HTMLDivElement> {
+export interface INavbarGroupProps extends IProps, HTMLDivProps {
     /**
      * The side of the navbar on which the group should appear.
      * The `Alignment` enum provides constants for these values.
diff --git a/packages/core/src/components/navbar/navbarHeading.tsx b/packages/core/src/components/navbar/navbarHeading.tsx
index c5d13fe6b7..a19d651324 100644
--- a/packages/core/src/components/navbar/navbarHeading.tsx
+++ b/packages/core/src/components/navbar/navbarHeading.tsx
@@ -7,10 +7,10 @@
 import classNames from "classnames";
 import * as React from "react";
 import * as Classes from "../../common/classes";
-import { IProps } from "../../common/props";
+import { HTMLDivProps, IProps } from "../../common/props";
 
 // allow the empty interface so we can label it clearly in the docs
-export interface INavbarHeadingProps extends IProps, React.HTMLAttributes<HTMLDivElement> {
+export interface INavbarHeadingProps extends IProps, HTMLDivProps {
     // Empty
 }
 
diff --git a/packages/core/src/components/popover/popover.tsx b/packages/core/src/components/popover/popover.tsx
index 188fdb3101..2e77d161a9 100644
--- a/packages/core/src/components/popover/popover.tsx
+++ b/packages/core/src/components/popover/popover.tsx
@@ -13,7 +13,7 @@ import { AbstractPureComponent } from "../../common/abstractPureComponent";
 import * as Classes from "../../common/classes";
 import * as Errors from "../../common/errors";
 import { Position } from "../../common/position";
-import { IProps } from "../../common/props";
+import { HTMLDivProps, IProps } from "../../common/props";
 import * as Utils from "../../common/utils";
 import { IOverlayableProps, Overlay } from "../overlay/overlay";
 import { Tooltip } from "../tooltip/tooltip";
@@ -406,7 +406,7 @@ export class Popover extends AbstractPureComponent<IPopoverProps, IPopoverState>
     private renderPopper(content: JSX.Element) {
         const { usePortal, interactionKind, modifiers } = this.props;
 
-        const popoverHandlers: React.HTMLAttributes<HTMLDivElement> = {
+        const popoverHandlers: HTMLDivProps = {
             // always check popover clicks for dismiss class
             onClick: this.handlePopoverClick,
         };
diff --git a/packages/core/src/components/portal/portal.tsx b/packages/core/src/components/portal/portal.tsx
index 04e266ebfb..4349d4ea35 100644
--- a/packages/core/src/components/portal/portal.tsx
+++ b/packages/core/src/components/portal/portal.tsx
@@ -9,10 +9,10 @@ import * as ReactDOM from "react-dom";
 
 import * as Classes from "../../common/classes";
 import * as Errors from "../../common/errors";
-import { IProps } from "../../common/props";
+import { HTMLDivProps, IProps } from "../../common/props";
 import { safeInvoke } from "../../common/utils";
 
-export interface IPortalProps extends IProps, React.HTMLAttributes<HTMLDivElement> {
+export interface IPortalProps extends IProps, HTMLDivProps {
     /**
      * Callback invoked when the children of this `Portal` have been added to the DOM.
      */
diff --git a/packages/datetime/test/dateRangeInputTests.tsx b/packages/datetime/test/dateRangeInputTests.tsx
index 4171df7652..bee410dbb1 100644
--- a/packages/datetime/test/dateRangeInputTests.tsx
+++ b/packages/datetime/test/dateRangeInputTests.tsx
@@ -11,6 +11,7 @@ import * as sinon from "sinon";
 
 import {
     Classes as CoreClasses,
+    HTMLDivProps,
     HTMLInputProps,
     IInputGroupProps,
     InputGroup,
@@ -26,8 +27,8 @@ import { DATE_FORMAT } from "./common/dateFormat";
 import * as DateTestUtils from "./common/dateTestUtils";
 
 type WrappedComponentRoot = ReactWrapper<any, {}>;
-type WrappedComponentInput = ReactWrapper<React.InputHTMLAttributes<HTMLInputElement>, any>;
-type WrappedComponentDayElement = ReactWrapper<React.HTMLAttributes<HTMLDivElement>, any>;
+type WrappedComponentInput = ReactWrapper<HTMLInputProps, any>;
+type WrappedComponentDayElement = ReactWrapper<HTMLDivProps, any>;
 
 type OutOfRangeTestFunction = (
     inputGetterFn: (root: WrappedComponentRoot) => WrappedComponentInput,
diff --git a/packages/docs-app/src/components/clickToCopy.tsx b/packages/docs-app/src/components/clickToCopy.tsx
index 10afbdaa82..a8a590456a 100644
--- a/packages/docs-app/src/components/clickToCopy.tsx
+++ b/packages/docs-app/src/components/clickToCopy.tsx
@@ -7,10 +7,10 @@
 import classNames from "classnames";
 import * as React from "react";
 
-import { IProps, Keys, removeNonHTMLProps, Utils } from "@blueprintjs/core";
+import { HTMLDivProps, IProps, Keys, removeNonHTMLProps, Utils } from "@blueprintjs/core";
 import { createKeyEventHandler } from "@blueprintjs/docs-theme";
 
-export interface IClickToCopyProps extends IProps, React.HTMLAttributes<HTMLDivElement> {
+export interface IClickToCopyProps extends IProps, HTMLDivProps {
     /**
      * Additional class names to apply after value has been copied
      * @default "docs-clipboard-copied"

From 043a338ada3695250594bc4aaeb5e3d12e402a00 Mon Sep 17 00:00:00 2001
From: Gilad Gray <ggray@palantir.com>
Date: Mon, 19 Mar 2018 16:02:57 -0700
Subject: [PATCH 5/5] comment about input group props

---
 packages/core/src/components/forms/inputGroup.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/core/src/components/forms/inputGroup.tsx b/packages/core/src/components/forms/inputGroup.tsx
index 9eca34ef03..ad17a74163 100644
--- a/packages/core/src/components/forms/inputGroup.tsx
+++ b/packages/core/src/components/forms/inputGroup.tsx
@@ -11,6 +11,8 @@ import * as Classes from "../../common/classes";
 import { HTMLInputProps, IControlledProps, IIntentProps, IProps, removeNonHTMLProps } from "../../common/props";
 import { Icon, IconName } from "../icon/icon";
 
+// NOTE: This interface does not extend HTMLInputProps due to incompatiblity with `IControlledProps`.
+// Instead, we union the props in the component definition, which does work and properly disallows `string[]` values.
 export interface IInputGroupProps extends IControlledProps, IIntentProps, IProps {
     /**
      * Whether the input is non-interactive.