relaxed typings for optional JSX.Elements

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.

packages/core/src/components/button/abstractButton.tsx

@@ -10,7 +10,7 @@ import * as React from "react";
 import { Alignment } from "../../common/alignment";
 import * as Classes from "../../common/classes";
 import * as Keys from "../../common/keys";
-import { IActionProps } from "../../common/props";
+import { IActionProps, MaybeElement } from "../../common/props";
 import { isReactNodeEmpty, safeInvoke } from "../../common/utils";
 import { Icon, IconName } from "../icon/icon";
 import { Spinner } from "../spinner/spinner";
@@ -52,7 +52,7 @@ export interface IButtonProps extends IActionProps {
     minimal?: boolean;
 
     /** Name of a Blueprint UI icon (or an icon element) to render after the text. */
-    rightIcon?: IconName | JSX.Element;
+    rightIcon?: IconName | MaybeElement;
 
     /** Whether this button should use small styles. */
     small?: boolean;

packages/core/src/components/callout/callout.tsx

@@ -7,7 +7,7 @@
 import classNames from "classnames";
 import * as React from "react";
 
-import { Classes, DISPLAYNAME_PREFIX, HTMLDivProps, IIntentProps, Intent, IProps } from "../../common";
+import { Classes, DISPLAYNAME_PREFIX, HTMLDivProps, IIntentProps, Intent, IProps, MaybeElement } from "../../common";
 import { Icon } from "../../index";
 import { H4 } from "../html/html";
 import { IconName } from "../icon/icon";
@@ -20,7 +20,7 @@ export interface ICalloutProps extends IIntentProps, IProps, HTMLDivProps {
      * If this prop is omitted or `undefined`, the `intent` prop will determine a default icon.
      * If this prop is explicitly `null`, no icon will be displayed (regardless of `intent`).
      */
-    icon?: IconName | JSX.Element | null;
+    icon?: IconName | MaybeElement;
 
     /**
      * Visual intent color to apply to background, title, and icon.
@@ -62,7 +62,7 @@ export class Callout extends React.PureComponent<ICalloutProps, {}> {
         );
     }
 
-    private getIconName(icon?: ICalloutProps["icon"], intent?: Intent): JSX.Element | IconName | undefined {
+    private getIconName(icon?: ICalloutProps["icon"], intent?: Intent): IconName | MaybeElement {
         // 1. no icon
         if (icon === null) {
             return undefined;

packages/core/src/components/dialog/dialog.tsx

@@ -10,7 +10,7 @@ import * as React from "react";
 import { AbstractPureComponent } from "../../common/abstractPureComponent";
 import * as Classes from "../../common/classes";
 import * as Errors from "../../common/errors";
-import { DISPLAYNAME_PREFIX, IProps } from "../../common/props";
+import { DISPLAYNAME_PREFIX, IProps, MaybeElement } from "../../common/props";
 import { Button } from "../button/buttons";
 import { H4 } from "../html/html";
 import { Icon, IconName } from "../icon/icon";
@@ -34,7 +34,7 @@ export interface IDialogProps extends IOverlayableProps, IBackdropProps, IProps
      * dialog's header. Note that the header will only be rendered if `title` is
      * provided.
      */
-    icon?: IconName | JSX.Element;
+    icon?: IconName | MaybeElement;
 
     /**
      * Whether to show the close button in the dialog's header.

packages/core/src/components/forms/inputGroup.tsx

@@ -14,6 +14,7 @@ import {
     IControlledProps,
     IIntentProps,
     IProps,
+    MaybeElement,
     removeNonHTMLProps,
 } from "../../common/props";
 import { Icon, IconName } from "../icon/icon";
@@ -37,7 +38,7 @@ export interface IInputGroupProps extends IControlledProps, IIntentProps, IProps
      * Name of a Blueprint UI icon (or an icon element) to render on the left side of the input group,
      * before the user's cursor.
      */
-    leftIcon?: IconName | JSX.Element;
+    leftIcon?: IconName | MaybeElement;
 
     /** Whether this input should use large styles. */
     large?: boolean;

packages/core/src/components/forms/numericInput.tsx

@@ -16,6 +16,7 @@ import {
     IIntentProps,
     IProps,
     Keys,
+    MaybeElement,
     Position,
     removeNonHTMLProps,
     Utils,
@@ -73,7 +74,7 @@ export interface INumericInputProps extends IIntentProps, IProps {
     /**
      * Name of a Blueprint UI icon (or an icon element) to render on the left side of input.
      */
-    leftIcon?: IconName | JSX.Element;
+    leftIcon?: IconName | MaybeElement;
 
     /** The placeholder text in the absence of any value. */
     placeholder?: string;

packages/core/src/components/icon/icon.tsx

@@ -8,7 +8,7 @@ import classNames from "classnames";
 import * as React from "react";
 
 import { IconName, IconSvgPaths16, IconSvgPaths20 } from "@blueprintjs/icons";
-import { Classes, DISPLAYNAME_PREFIX, IIntentProps, IProps } from "../../common";
+import { Classes, DISPLAYNAME_PREFIX, IIntentProps, IProps, MaybeElement } from "../../common";
 
 export { IconName };
 
@@ -40,7 +40,7 @@ export interface IIconProps extends IIntentProps, IProps {
      *   should avoid using `<Icon icon={<Element />}` directly; simply render
      *   `<Element />` instead.
      */
-    icon: IconName | JSX.Element | false | null | undefined;
+    icon: IconName | MaybeElement;
 
     /**
      * Size of the icon, in pixels. Blueprint contains 16px and 20px SVG icon
@@ -100,7 +100,7 @@ export class Icon extends React.PureComponent<IIconProps & React.DOMAttributes<H
         const viewBox = `0 0 ${pixelGridSize} ${pixelGridSize}`;
 
         return (
-            <TagName className={classes} {...htmlprops}>
+            <TagName {...htmlprops} className={classes}>
                 <svg fill={color} data-icon={icon} width={iconSize} height={iconSize} viewBox={viewBox}>
                     {title && <desc>{title}</desc>}
                     {paths}

packages/core/src/components/non-ideal-state/nonIdealState.tsx

@@ -8,7 +8,7 @@ import classNames from "classnames";
 import * as React from "react";
 
 import * as Classes from "../../common/classes";
-import { DISPLAYNAME_PREFIX, IProps } from "../../common/props";
+import { DISPLAYNAME_PREFIX, IProps, MaybeElement } from "../../common/props";
 import { ensureElement } from "../../common/utils";
 import { H4 } from "../html/html";
 import { Icon, IconName } from "../icon/icon";
@@ -30,7 +30,7 @@ export interface INonIdealStateProps extends IProps {
     description?: React.ReactChild;
 
     /** The name of a Blueprint icon or a JSX Element (such as `<Spinner/>`) to render above the title. */
-    icon?: IconName | JSX.Element;
+    icon?: IconName | MaybeElement;
 
     /** The title of the non-ideal state. */
     title?: React.ReactNode;

packages/core/src/components/tag-input/tagInput.tsx

@@ -10,7 +10,7 @@ import * as React from "react";
 import { AbstractPureComponent } from "../../common/abstractPureComponent";
 import * as Classes from "../../common/classes";
 import * as Keys from "../../common/keys";
-import { DISPLAYNAME_PREFIX, HTMLInputProps, IProps } from "../../common/props";
+import { DISPLAYNAME_PREFIX, HTMLInputProps, IProps, MaybeElement } from "../../common/props";
 import * as Utils from "../../common/utils";
 import { Icon, IconName } from "../icon/icon";
 import { ITagProps, Tag } from "../tag/tag";
@@ -63,7 +63,7 @@ export interface ITagInputProps extends IProps {
     large?: boolean;
 
     /** Name of a Blueprint UI icon (or an icon element) to render on the left side of the input. */
-    leftIcon?: IconName | JSX.Element;
+    leftIcon?: IconName | MaybeElement;
 
     /**
      * Callback invoked when new tags are added by the user pressing `enter` on the input.

packages/core/src/components/tag/tag.tsx

@@ -7,7 +7,7 @@
 import classNames from "classnames";
 import * as React from "react";
 
-import { Classes, DISPLAYNAME_PREFIX, IIntentProps, IProps, Utils } from "../../common";
+import { Classes, DISPLAYNAME_PREFIX, IIntentProps, IProps, MaybeElement, Utils } from "../../common";
 import { isReactNodeEmpty } from "../../common/utils";
 import { Icon, IconName } from "../icon/icon";
 import { Text } from "../text/text";
@@ -20,7 +20,7 @@ export interface ITagProps extends IProps, IIntentProps, React.HTMLAttributes<HT
     active?: boolean;
 
     /** Name of a Blueprint UI icon (or an icon element) to render before the children. */
-    icon?: IconName | JSX.Element;
+    icon?: IconName | MaybeElement;
 
     /**
      * Whether the tag should visually respond to user interactions. If set
@@ -66,7 +66,7 @@ export interface ITagProps extends IProps, IIntentProps, React.HTMLAttributes<HT
     onRemove?: (e: React.MouseEvent<HTMLButtonElement>, tagProps: ITagProps) => void;
 
     /** Name of a Blueprint UI icon (or an icon element) to render after the children. */
-    rightIcon?: IconName | JSX.Element;
+    rightIcon?: IconName | MaybeElement;
 
     /**
      * Whether this tag should have rounded ends.

packages/core/src/components/toast/toast.tsx

@@ -9,7 +9,7 @@ import * as React from "react";
 
 import { AbstractPureComponent } from "../../common/abstractPureComponent";
 import * as Classes from "../../common/classes";
-import { DISPLAYNAME_PREFIX, IActionProps, IIntentProps, ILinkProps, IProps } from "../../common/props";
+import { DISPLAYNAME_PREFIX, IActionProps, IIntentProps, ILinkProps, IProps, MaybeElement } from "../../common/props";
 import { safeInvoke } from "../../common/utils";
 import { ButtonGroup } from "../button/buttonGroup";
 import { AnchorButton, Button } from "../button/buttons";
@@ -25,10 +25,10 @@ export interface IToastProps extends IProps, IIntentProps {
     action?: IActionProps & ILinkProps;
 
     /** Name of a Blueprint UI icon (or an icon element) to render before the message. */
-    icon?: IconName | JSX.Element;
+    icon?: IconName | MaybeElement;
 
     /** Message to display in the body of the toast. */
-    message: string | JSX.Element;
+    message: React.ReactNode;
 
     /**
      * Callback invoked when the toast is dismissed, either by the user or by the timeout.

packages/core/src/components/tree/treeNode.tsx

@@ -8,7 +8,7 @@ import classNames from "classnames";
 import * as React from "react";
 
 import * as Classes from "../../common/classes";
-import { DISPLAYNAME_PREFIX, IProps } from "../../common/props";
+import { DISPLAYNAME_PREFIX, IProps, MaybeElement } from "../../common/props";
 import { safeInvoke } from "../../common/utils";
 import { Collapse } from "../collapse/collapse";
 import { Icon, IconName } from "../icon/icon";
@@ -28,7 +28,7 @@ export interface ITreeNode<T = {}> extends IProps {
     /**
      * The name of a Blueprint icon (or an icon element) to render next to the node's label.
      */
-    icon?: IconName | JSX.Element;
+    icon?: IconName | MaybeElement;
 
     /**
      * A unique identifier for the node.
@@ -53,7 +53,7 @@ export interface ITreeNode<T = {}> extends IProps {
     /**
      * A secondary label/component that is displayed at the right side of the node.
      */
-    secondaryLabel?: string | JSX.Element;
+    secondaryLabel?: string | MaybeElement;
 
     /**
      * An optional custom user object to associate with the node.

packages/docs-app/src/components/icons.tsx

@@ -4,12 +4,9 @@
  * Licensed under the terms of the LICENSE file distributed with this project.
  */
 
-import * as React from "react";
-
 import { Classes, H3, InputGroup, NonIdealState } from "@blueprintjs/core";
 import { smartSearch } from "@blueprintjs/docs-theme";
-
-import classNames from "classnames";
+import * as React from "react";
 import { DocsIcon, IDocsIconProps as IIcon } from "./docsIcon";
 
 const ICONS_PER_ROW = 5;
@@ -46,7 +43,9 @@ export class Icons extends React.PureComponent<IIconsProps, IIconsState> {
         return (
             <div className="docs-icons">
                 <InputGroup
-                    className={classNames(Classes.LARGE, Classes.FILL)}
+                    autoFocus={true}
+                    className={Classes.FILL}
+                    large={true}
                     leftIcon="search"
                     placeholder="Search for icons..."
                     onChange={this.handleFilterChange}