Update types and props for compatibility with React 18 (#7150)

packages/core/src/components/context-menu/contextMenu.tsx

@@ -241,7 +241,7 @@ export const ContextMenu: React.FC<ContextMenuProps> = React.forwardRef<any, Con
     ) : (
         <>
             {maybePopover}
-            {React.createElement<React.HTMLAttributes<any>>(
+            {React.createElement<React.HTMLAttributes<any> & React.ClassAttributes<any>>(
                 tagName,
                 {
                     className: containerClassName,

packages/core/src/components/entity-title/entityTitle.tsx

@@ -22,7 +22,7 @@ import { type IconName, IconNames } from "@blueprintjs/icons";
 import { Classes, DISPLAYNAME_PREFIX, type MaybeElement, type Props } from "../../common";
 import { H1, H2, H3, H4, H5, H6 } from "../html/html";
 import { Icon } from "../icon/icon";
-import { Text } from "../text/text";
+import { Text, type TextProps } from "../text/text";
 
 export interface EntityTitleProps extends Props {
     /**
@@ -177,7 +177,7 @@ EntityTitle.displayName = `${DISPLAYNAME_PREFIX}.EntityTitle`;
 /**
  * Construct header class name from H{*}. Returns `undefined` if `heading` is not a Blueprint heading.
  */
-function getClassNameFromHeading(heading: React.FC<unknown>) {
+function getClassNameFromHeading(heading: React.FC<TextProps>) {
     const headerIndex = [H1, H2, H3, H4, H5, H6].findIndex(header => header === heading);
     if (headerIndex < 0) {
         return undefined;

packages/core/src/components/hotkeys/hotkeys.tsx

@@ -34,6 +34,11 @@ export interface HotkeysProps extends Props {
      * the `tabIndex` from the component decorated by `HotkeysTarget`.
      */
     tabIndex?: number;
+
+    /**
+     * An array of `Hotkey` components that define the hotkeys to be used.
+     */
+    children?: React.ReactNode;
 }
 
 /**

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

@@ -69,6 +69,9 @@ export interface HTMLSelectProps
 
     /** Controlled value of this component. */
     value?: string | number;
+
+    /** Placeholder text to display when no option is selected. */
+    placeholder?: string;
 }
 
 // this component is simple enough that tests would be purely tautological.

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

@@ -205,7 +205,7 @@ export class Overlay extends AbstractPureComponent<OverlayProps, OverlayState> {
         });
     }
 
-    private maybeRenderChild = (child?: React.ReactNode) => {
+    private maybeRenderChild = (child?: React.ReactNode | (() => React.ReactNode)) => {
         if (isFunction(child)) {
             child = child();
         }

packages/datetime2/src/components/react-day-picker/datePicker3Caption.tsx

@@ -35,7 +35,7 @@ import { DatePicker3Context } from "../date-picker3/datePicker3Context";
  *
  * @see https://daypicker.dev/guides/custom-components
  */
-export const DatePicker3Caption: React.FC<CaptionProps> = props => {
+export const DatePicker3Caption = (props: CaptionProps) => {
     const { classNames: rdpClassNames, formatters, fromDate, toDate, labels } = useDayPicker();
     const { locale, reverseMonthAndYearMenus } = React.useContext(DatePicker3Context);
 

packages/docs-app/src/examples/core-examples/segmentedControlExample.tsx

@@ -23,7 +23,10 @@ import { type Size, SizeSelect } from "./common/sizeSelect";
 
 export const SegmentedControlExample: React.FC<ExampleProps> = props => {
     const [intent, setIntent] = React.useState<SegmentedControlIntent>("none");
-    const handleIntentChange = React.useCallback(newIntent => setIntent(newIntent as SegmentedControlIntent), []);
+    const handleIntentChange = React.useCallback(
+        (newIntent: string) => setIntent(newIntent as SegmentedControlIntent),
+        [],
+    );
 
     const [fill, setFill] = React.useState<boolean>(false);
     const [inline, setInline] = React.useState<boolean>(false);

packages/table/src/headers/columnHeader.tsx

@@ -36,7 +36,7 @@ export interface ColumnWidths {
     defaultColumnWidth: number;
 }
 
-export interface ColumnHeaderProps extends HeaderProps, ColumnWidths, ColumnIndices {
+export interface ColumnHeaderProps extends React.PropsWithChildren<HeaderProps>, ColumnWidths, ColumnIndices {
     /**
      * A ColumnHeaderRenderer that, for each `<Column>`, will delegate to:
      * 1. The `columnHeaderCellRenderer` method from the `<Column>`

packages/table/src/headers/header.tsx

@@ -95,6 +95,11 @@ export interface HeaderProps extends LockableLayout, ReorderableProps, Selectabl
      * or cancellation of a resize interaction.
      */
     onResizeGuide: (guides: number[] | null) => void;
+
+    /**
+     * The content to be rendered inside the header.
+     */
+    children?: React.ReactNode;
 }
 
 /**

packages/table/src/headers/headerCell.tsx

@@ -20,7 +20,6 @@ import * as React from "react";
 import { ContextMenu, Classes as CoreClasses, Utils as CoreUtils, type Props } from "@blueprintjs/core";
 
 import * as Classes from "../common/classes";
-import type { ResizeHandle } from "../interactions/resizeHandle";
 
 export interface HeaderCellProps extends Props {
     children?: React.ReactNode;
@@ -66,7 +65,7 @@ export interface HeaderCellProps extends Props {
     /**
      * A `ResizeHandle` React component that allows users to drag-resize the header.
      */
-    resizeHandle?: ResizeHandle;
+    resizeHandle?: React.JSX.Element;
 
     /**
      * CSS styles for the top level element.