fix: declare children prop explicitly for class components

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

@@ -54,6 +54,9 @@ export interface IAlertProps extends IOverlayLifecycleProps, Props {
      */
     cancelButtonText?: string;
 
+    /** Dialog contents. */
+    children?: React.ReactNode;
+
     /**
      * The text for the confirm (right-most) button.
      * This button will always appear, and uses the value of the `intent` prop below.

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

@@ -55,6 +55,9 @@ export interface IButtonProps<E extends HTMLButtonElement | HTMLAnchorElement =
      */
     alignText?: Alignment;
 
+    /** Button contents. */
+    children?: React.ReactNode;
+
     /** Whether this button should expand to fill its container. */
     fill?: boolean;
 

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

@@ -32,6 +32,9 @@ export interface IButtonGroupProps extends Props, HTMLDivProps {
      */
     alignText?: Alignment;
 
+    /** Buttons in this group. */
+    children: React.ReactNode;
+
     /**
      * Whether the button group should take up the full width of its container.
      *

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

@@ -34,6 +34,9 @@ import { Icon, IconName, IconSize } from "../icon/icon";
 export type CalloutProps = ICalloutProps;
 /** @deprecated use CalloutProps */
 export interface ICalloutProps extends IntentProps, Props, HTMLDivProps {
+    /** Callout contents. */
+    children?: React.ReactNode;
+
     /**
      * Name of a Blueprint UI icon (or an icon element) to render on the left side.
      *

packages/core/src/components/collapse/collapse.tsx

@@ -24,6 +24,9 @@ import { DISPLAYNAME_PREFIX, Props } from "../../common/props";
 export type CollapseProps = ICollapseProps;
 /** @deprecated use CollapseProps */
 export interface ICollapseProps extends Props {
+    /** Contents to collapse. */
+    children: React.ReactNode;
+
     /**
      * Component to render as the root element.
      * Useful when rendering a `Collapse` inside a `<table>`, for instance.
@@ -119,7 +122,7 @@ export enum AnimationStates {
 export class Collapse extends AbstractPureComponent2<CollapseProps, ICollapseState> {
     public static displayName = `${DISPLAYNAME_PREFIX}.Collapse`;
 
-    public static defaultProps: CollapseProps = {
+    public static defaultProps: Partial<CollapseProps> = {
         component: "div",
         isOpen: false,
         keepChildrenMounted: false,

packages/core/src/components/collapsible-list/collapsibleList.tsx

@@ -33,6 +33,9 @@ type CollapsibleItem = React.ReactElement<MenuItemProps>;
 export type CollapsibleListProps = ICollapsibleListProps;
 /** @deprecated use CollapsibleListProps */
 export interface ICollapsibleListProps extends Props {
+    /** Contents to collapse. */
+    children: React.ReactNode;
+
     /**
      * Element to render as dropdown target with `CLICK` interaction to show collapsed menu.
      */

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

@@ -36,6 +36,9 @@ export interface IMultistepDialogProps extends DialogProps {
      */
     backButtonProps?: DialogStepButtonProps;
 
+    /** Dialog steps. */
+    children: React.ReactNode;
+
     /**
      * Props for the close button that appears in the footer when there is no
      * title.

packages/core/src/components/drawer/drawer.tsx

@@ -36,6 +36,9 @@ export enum DrawerSize {
 export type DrawerProps = IDrawerProps;
 /** @deprecated use DrawerProps */
 export interface IDrawerProps extends OverlayableProps, IBackdropProps, Props {
+    /** Drawer contents. */
+    children?: React.ReactNode;
+
     /**
      * Name of a Blueprint UI icon (or an icon element) to render in the
      * drawer's header. Note that the header will only be rendered if `title` is

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

@@ -24,6 +24,9 @@ import { DISPLAYNAME_PREFIX, HTMLDivProps, Props } from "../../common/props";
 export type ControlGroupProps = IControlGroupProps;
 /** @deprecated use ControlGroupProps */
 export interface IControlGroupProps extends Props, HTMLDivProps {
+    /** Group contents. */
+    children?: React.ReactNode;
+
     /**
      * Whether the control group should take up the full width of its container.
      *

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

@@ -24,6 +24,9 @@ import { DISPLAYNAME_PREFIX, IntentProps, Props } from "../../common/props";
 export type FormGroupProps = IFormGroupProps;
 /** @deprecated use FormGroupProps */
 export interface IFormGroupProps extends IntentProps, Props {
+    /** Group contents. */
+    children?: React.ReactNode;
+
     /**
      * A space-delimited list of class names to pass along to the
      * `Classes.FORM_CONTENT` element that contains `children`.

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

@@ -26,6 +26,11 @@ import { RadioProps, Radio } from "./controls";
 export type RadioGroupProps = IRadioGroupProps;
 /** @deprecated use RadioGroupProps */
 export interface IRadioGroupProps extends Props {
+    /**
+     * Radio elements. This prop is mutually exclusive with `options`.
+     */
+    children?: React.ReactNode;
+
     /**
      * Whether the group and _all_ its radios are disabled.
      * Individual radios can be disabled using their `disabled` prop.

packages/core/src/components/hotkeys/hotkeysTypes.ts

@@ -17,6 +17,9 @@
 import { Props } from "../../common";
 
 export interface IHotkeysProps extends Props {
+    /** Hotkey elements. */
+    children?: React.ReactNode;
+
     /**
      * In order to make local hotkeys work on elements that are not normally
      * focusable, such as `<div>`s or `<span>`s, we add a `tabIndex` attribute

packages/core/src/components/html-select/htmlSelect.tsx

@@ -29,6 +29,8 @@ export interface IHTMLSelectProps
     // eslint-disable-next-line deprecation/deprecation
     extends IElementRefProps<HTMLSelectElement>,
         React.SelectHTMLAttributes<HTMLSelectElement> {
+    children?: React.ReactNode;
+
     /** Whether this element is non-interactive. */
     disabled?: boolean;
 

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

@@ -24,6 +24,9 @@ import { DISPLAYNAME_PREFIX, Props } from "../../common/props";
 export type MenuProps = IMenuProps;
 /** @deprecated use MenuProps */
 export interface IMenuProps extends Props, React.HTMLAttributes<HTMLUListElement> {
+    /** Menu items. */
+    children?: React.ReactNode;
+
     /** Whether the menu items in this menu should use a large appearance. */
     large?: boolean;
 

packages/core/src/components/navbar/navbar.tsx

@@ -30,6 +30,8 @@ export { INavbarDividerProps, NavbarDividerProps } from "./navbarDivider";
 export type NavbarProps = INavbarProps;
 /** @deprecated use NavbarProps */
 export interface INavbarProps extends Props, HTMLDivProps {
+    children?: React.ReactNode;
+
     /**
      * Whether this navbar should be fixed to the top of the viewport (using CSS `position: fixed`).
      */

packages/core/src/components/navbar/navbarGroup.tsx

@@ -31,6 +31,8 @@ export interface INavbarGroupProps extends Props, HTMLDivProps {
      * @default Alignment.LEFT
      */
     align?: Alignment;
+
+    children?: React.ReactNode;
 }
 
 // this component is simple enough that tests would be purely tautological.

packages/core/src/components/navbar/navbarHeading.tsx

@@ -24,7 +24,7 @@ import { DISPLAYNAME_PREFIX, HTMLDivProps, Props } from "../../common/props";
 export type NavbarHeadingProps = INavbarHeadingProps;
 /** @deprecated use NavbarHeadingProps */
 export interface INavbarHeadingProps extends Props, HTMLDivProps {
-    // allow the empty interface so we can label it clearly in the docs
+    children?: React.ReactNode;
 }
 
 // this component is simple enough that tests would be purely tautological.

packages/core/src/components/overlay/overlay.tsx

@@ -177,6 +177,9 @@ export interface IBackdropProps {
 export type OverlayProps = IOverlayProps;
 /** @deprecated use OverlayProps */
 export interface IOverlayProps extends OverlayableProps, IBackdropProps, Props {
+    /** Element to overlay. */
+    children?: React.ReactNode;
+
     /**
      * Toggles the visibility of the overlay and its children.
      * This prop is required because the component is controlled.

packages/core/src/components/popover/popoverSharedProps.ts

@@ -15,6 +15,7 @@
  */
 
 import { Boundary as PopperBoundary, Modifiers as PopperModifiers, Placement } from "popper.js";
+import * as React from "react";
 
 import { Position } from "../../common/position";
 import { Props } from "../../common/props";
@@ -35,6 +36,8 @@ export type PopoverPosition = typeof PopoverPosition[keyof typeof PopoverPositio
 
 /** Props shared between `Popover` and `Tooltip`. */
 export interface IPopoverSharedProps extends OverlayableProps, Props {
+    children?: React.ReactNode;
+
     /**
      * Determines the boundary element used by Popper for its `flip` and
      * `preventOverflow` modifiers. Three shorthand keywords are supported;

packages/core/src/components/portal/portal.tsx

@@ -26,8 +26,13 @@ import { isFunction } from "../../common/utils";
 /** Detect if `React.createPortal()` API method does not exist. */
 const cannotCreatePortal = !isFunction(ReactDOM.createPortal);
 
+// eslint-disable-next-line deprecation/deprecation
 export type PortalProps = IPortalProps;
+/** @deprecated use PortalProps */
 export interface IPortalProps extends Props {
+    /** Contents to send through the portal. */
+    children: React.ReactNode;
+
     /**
      * Callback invoked when the children of this `Portal` have been added to the DOM.
      */
@@ -64,12 +69,12 @@ const REACT_CONTEXT_TYPES: ValidationMap<IPortalContext> = {
  * Use it when you need to circumvent DOM z-stacking (for dialogs, popovers, etc.).
  * Any class names passed to this element will be propagated to the new container element on document.body.
  */
-export class Portal extends React.Component<IPortalProps, IPortalState> {
+export class Portal extends React.Component<PortalProps, IPortalState> {
     public static displayName = `${DISPLAYNAME_PREFIX}.Portal`;
 
     public static contextTypes = REACT_CONTEXT_TYPES;
 
-    public static defaultProps: IPortalProps = {
+    public static defaultProps: Partial<PortalProps> = {
         container: typeof document !== "undefined" ? document.body : undefined,
     };
 
@@ -108,7 +113,7 @@ export class Portal extends React.Component<IPortalProps, IPortalState> {
         }
     }
 
-    public componentDidUpdate(prevProps: IPortalProps) {
+    public componentDidUpdate(prevProps: PortalProps) {
         // update className prop on portal DOM element
         if (this.portalElement != null && prevProps.className !== this.props.className) {
             maybeRemoveClass(this.portalElement.classList, prevProps.className);

packages/core/src/components/resize-sensor/resizeSensor.tsx

@@ -25,6 +25,9 @@ import { DISPLAYNAME_PREFIX } from "../../common/props";
 export type ResizeSensorProps = IResizeSensorProps;
 /** @deprecated use ResizeSensorProps */
 export interface IResizeSensorProps {
+    /** Contents to observe for size changes. */
+    children: React.ReactNode;
+
     /**
      * Callback invoked when the wrapped element resizes.
      *

packages/core/src/components/slider/multiSlider.tsx

@@ -33,6 +33,8 @@ const MultiSliderHandle: React.FC<HandleProps> = () => null;
 MultiSliderHandle.displayName = `${DISPLAYNAME_PREFIX}.MultiSliderHandle`;
 
 export interface ISliderBaseProps extends Props, IntentProps {
+    children?: React.ReactNode;
+
     /**
      * Whether the slider is non-interactive.
      *
@@ -487,10 +489,7 @@ function getSortedInteractiveHandleProps(props: React.PropsWithChildren<MultiSli
     return getSortedHandleProps(props, childProps => childProps.interactionKind !== HandleInteractionKind.NONE);
 }
 
-function getSortedHandleProps(
-    { children }: React.PropsWithChildren<MultiSliderProps>,
-    predicate: (props: HandleProps) => boolean = () => true,
-) {
+function getSortedHandleProps({ children }: MultiSliderProps, predicate: (props: HandleProps) => boolean = () => true) {
     const maybeHandles = React.Children.map(children, child =>
         Utils.isElementOfType(child, MultiSlider.Handle) && predicate(child.props) ? child.props : null,
     );

packages/core/src/components/tabs/tabTitle.tsx

@@ -25,6 +25,9 @@ import { TabProps, TabId } from "./tab";
 export type TabTitleProps = ITabTitleProps;
 /** @deprecated use TabTitleProps */
 export interface ITabTitleProps extends TabProps {
+    /** Optional contents. */
+    children?: React.ReactNode;
+
     /** Handler invoked when this tab is clicked. */
     onClick: (id: TabId, event: React.MouseEvent<HTMLElement>) => void;
 

packages/core/src/components/tabs/tabs.tsx

@@ -40,6 +40,9 @@ export interface ITabsProps extends Props {
      */
     animate?: boolean;
 
+    /** Tab elements. */
+    children: React.ReactNode;
+
     /**
      * Initial selected tab `id`, for uncontrolled usage.
      * Note that this prop refers only to `<Tab>` children; other types of elements are ignored.

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

@@ -57,6 +57,8 @@ export interface ITagInputProps extends IntentProps, Props {
      */
     addOnPaste?: boolean;
 
+    children?: React.ReactNode;
+
     /**
      * Whether the component is non-interactive.
      * Note that you'll also need to disable the component's `rightElement`,

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

@@ -47,6 +47,8 @@ export interface ITagProps
      */
     active?: boolean;
 
+    children?: React.ReactNode;
+
     /**
      * Whether the tag should take up the full width of its container.
      *

packages/core/src/components/text/text.tsx

@@ -24,6 +24,8 @@ import { DISPLAYNAME_PREFIX, Props } from "../../common/props";
 export type TextProps = ITextProps;
 /** @deprecated use TextProps */
 export interface ITextProps extends Props {
+    children?: React.ReactNode;
+
     /**
      * Indicates that this component should be truncated with an ellipsis if it overflows its container.
      * The `title` attribute will also be added when content overflows to show the full text of the children on hover.

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

@@ -75,6 +75,9 @@ export interface IToasterProps extends Props {
      */
     canEscapeKeyClear?: boolean;
 
+    /** Optional toast elements. */
+    children?: React.ReactNode;
+
     /**
      * Whether the toaster should be rendered into a new element attached to `document.body`.
      * If `false`, then positioning will be relative to the parent element.

packages/core/test/context-menu/contextMenuTests.tsx

@@ -125,7 +125,7 @@ function assertContextMenuWasRendered(expectedLength = MENU_ITEMS.length) {
 
 // eslint-disable-next-line deprecation/deprecation
 @ContextMenuTarget
-class RightClickMe extends React.Component<{ items?: JSX.Element[] }> {
+class RightClickMe extends React.Component<{ children?: React.ReactNode; items?: JSX.Element[] }> {
     public static defaultProps = {
         items: MENU_ITEMS,
     };

packages/core/test/resize-sensor/resizeSensorTests.tsx

@@ -98,7 +98,7 @@ interface SizeProps {
     height?: number;
 }
 
-type ResizeTesterProps = ResizeSensorProps & SizeProps;
+type ResizeTesterProps = Omit<ResizeSensorProps, "children"> & SizeProps;
 const ResizeTester: React.FC<ResizeTesterProps> = ({ id, width, height, ...resizeProps }) => (
     <ResizeSensor {...resizeProps}>
         <div key={id} style={{ width, height }} />

packages/demo-app/src/examples/ExampleCard.tsx

@@ -18,6 +18,7 @@ import * as React from "react";
 import { Card, Classes, H4, H5 } from "@blueprintjs/core";
 
 export interface ExampleCardProps {
+    children: React.ReactNode;
     label: string;
     subLabel?: string;
     width?: number;

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

@@ -21,6 +21,8 @@ import { HTMLDivProps, Props, Keys, removeNonHTMLProps } from "@blueprintjs/core
 import { createKeyEventHandler } from "@blueprintjs/docs-theme";
 
 export interface IClickToCopyProps extends Props, HTMLDivProps {
+    children?: React.ReactNode;
+
     /**
      * Additional class names to apply after value has been copied
      *

packages/docs-theme/src/components/banner.tsx

@@ -20,6 +20,8 @@ import * as React from "react";
 import { Classes, Intent, Props } from "@blueprintjs/core";
 
 export interface IBannerProps extends Props {
+    children?: React.ReactNode;
+
     /** Link URL. */
     href: string;
 

packages/docs-theme/src/components/example.tsx

@@ -46,6 +46,8 @@ export interface IExampleProps<T = {}> extends Props {
  * Additional props will be spread to the root `<div>` element.
  */
 export interface IDocsExampleProps extends IExampleProps {
+    children?: React.ReactNode;
+
     /**
      * Options for the example, which will typically appear in a narrow column
      * to the right of the example.

packages/docs-theme/src/components/typescript/apiHeader.tsx

@@ -19,7 +19,11 @@ import * as React from "react";
 
 import { DocumentationContextTypes, IDocumentationContext } from "../../common/context";
 
-export class ApiHeader extends React.PureComponent<ITsDocBase> {
+interface ApiHeaderProps extends ITsDocBase {
+    children?: React.ReactNode;
+}
+
+export class ApiHeader extends React.PureComponent<ApiHeaderProps> {
     public static contextTypes = DocumentationContextTypes;
 
     public static displayName = "Docs2.ApiHeader";