[chore] Update component React imports following New JSX Transform (#7500)

Author: ggdouglas

packages/core/src/accessibility/useInteractiveAttributes.ts

@@ -2,7 +2,7 @@
  * (c) Copyright 2024 Palantir Technologies Inc. All rights reserved.
  */
 
-import * as React from "react";
+import { useCallback, useRef, useState } from "react";
 
 import { mergeRefs, Utils } from "../common";
 
@@ -35,13 +35,13 @@ export function useInteractiveAttributes<E extends HTMLElement>(
     const { defaultTabIndex, disabledTabIndex } = options;
     const { active, onClick, onFocus, onKeyDown, onKeyUp, onBlur, tabIndex = defaultTabIndex } = props;
     // the current key being pressed
-    const [currentKeyPressed, setCurrentKeyPressed] = React.useState<string | undefined>();
+    const [currentKeyPressed, setCurrentKeyPressed] = useState<string | undefined>();
     // whether the button is in "active" state
-    const [isActive, setIsActive] = React.useState(false);
+    const [isActive, setIsActive] = useState(false);
     // our local ref for the interactive element, merged with the consumer's own ref in this hook's return value
-    const elementRef = React.useRef<E | null>(null);
+    const elementRef = useRef<E | null>(null);
 
-    const handleBlur = React.useCallback(
+    const handleBlur = useCallback(
         (e: React.FocusEvent<E>) => {
             if (isActive) {
                 setIsActive(false);
@@ -52,7 +52,7 @@ export function useInteractiveAttributes<E extends HTMLElement>(
         [isActive, onBlur],
     );
 
-    const handleKeyDown = React.useCallback(
+    const handleKeyDown = useCallback(
         (e: React.KeyboardEvent<E>) => {
             if (Utils.isKeyboardClick(e)) {
                 e.preventDefault();
@@ -67,7 +67,7 @@ export function useInteractiveAttributes<E extends HTMLElement>(
         [currentKeyPressed, onKeyDown],
     );
 
-    const handleKeyUp = React.useCallback(
+    const handleKeyUp = useCallback(
         (e: React.KeyboardEvent<E>) => {
             if (Utils.isKeyboardClick(e)) {
                 setIsActive(false);

packages/core/src/common/abstractComponent.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import * as React from "react";
+import { Component } from "react";
 
 import { isNodeEnv } from "./utils";
 
@@ -23,7 +23,7 @@ import { isNodeEnv } from "./utils";
  * in order to add some common functionality like runtime props validation.
  */
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export abstract class AbstractComponent<P, S = {}, SS = {}> extends React.Component<P, S, SS> {
+export abstract class AbstractComponent<P, S = {}, SS = {}> extends Component<P, S, SS> {
     // unsafe lifecycle methods
     public componentWillUpdate!: never;
 

packages/core/src/common/abstractPureComponent.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import * as React from "react";
+import { PureComponent } from "react";
 
 import { isNodeEnv } from "./utils";
 
@@ -23,7 +23,7 @@ import { isNodeEnv } from "./utils";
  * in order to add some common functionality like runtime props validation.
  */
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
-export abstract class AbstractPureComponent<P, S = {}, SS = {}> extends React.PureComponent<P, S, SS> {
+export abstract class AbstractPureComponent<P, S = {}, SS = {}> extends PureComponent<P, S, SS> {
     // unsafe lifecycle method
     public componentWillUpdate!: never;
 

packages/core/src/common/props.ts

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-import type * as React from "react";
-
 import type { IconName } from "@blueprintjs/icons";
 
 import type { Intent } from "./intent";

packages/core/src/common/refs.ts

@@ -14,8 +14,6 @@
  * limitations under the License.
  */
 
-import type * as React from "react";
-
 export function isRefObject<T>(value: React.Ref<T> | undefined): value is React.RefObject<T> {
     return value != null && typeof value !== "function";
 }

packages/core/src/common/utils/reactUtils.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import * as React from "react";
+import { cloneElement, createElement } from "react";
 
 import { isEmptyString } from "./jsUtils";
 
@@ -69,11 +69,11 @@ export function ensureElement(
         isReactNodeArray(child)
     ) {
         // wrap the child element
-        return React.createElement(tagName, props, child);
+        return createElement(tagName, props, child);
     } else if (isReactElement(child)) {
         if (Object.keys(props).length > 0) {
             // clone the element and merge props
-            return React.cloneElement(child, props);
+            return cloneElement(child, props);
         } else {
             // nothing to do, it's a valid ReactElement
             return child;

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

@@ -15,7 +15,7 @@
  */
 
 import classNames from "classnames";
-import * as React from "react";
+import { useCallback } from "react";
 
 import { Classes, DISPLAYNAME_PREFIX, type Intent, type MaybeElement, type Props } from "../../common";
 import {
@@ -170,20 +170,20 @@ export const Alert: React.FC<AlertProps> = props => {
         }
     }, [canEscapeKeyCancel, canOutsideClickCancel, cancelButtonText, onCancel, onClose]);
 
-    const internalHandleCallbacks = React.useCallback(
+    const internalHandleCallbacks = useCallback(
         (confirmed: boolean, event?: React.SyntheticEvent<HTMLElement>) => {
             (confirmed ? onConfirm : onCancel)?.(event);
             onClose?.(confirmed, event);
         },
         [onCancel, onClose, onConfirm],
     );
 
-    const handleCancel = React.useCallback(
+    const handleCancel = useCallback(
         (event?: React.SyntheticEvent<HTMLElement>) => internalHandleCallbacks(false, event),
         [internalHandleCallbacks],
     );
 
-    const handleConfirm = React.useCallback(
+    const handleConfirm = useCallback(
         (event: React.SyntheticEvent<HTMLElement>) => internalHandleCallbacks(true, event),
         [internalHandleCallbacks],
     );

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

@@ -15,7 +15,6 @@
  */
 
 import classNames from "classnames";
-import * as React from "react";
 
 import { type ActionProps, Classes, type LinkProps } from "../../common";
 import { Icon } from "../icon/icon";

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

@@ -15,7 +15,6 @@
  */
 
 import classNames from "classnames";
-import * as React from "react";
 
 import { AbstractPureComponent, Boundary, Classes, type Props, removeNonHTMLProps } from "../../common";
 import { Menu } from "../menu/menu";

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

@@ -15,7 +15,7 @@
  */
 
 import classNames from "classnames";
-import * as React from "react";
+import { forwardRef } from "react";
 
 import { type Alignment, type ButtonVariant, Classes, type Size } from "../../common";
 import { DISPLAYNAME_PREFIX, type HTMLDivProps, type Props } from "../../common/props";
@@ -92,40 +92,38 @@ export interface ButtonGroupProps extends Props, HTMLDivProps, React.RefAttribut
  *
  * @see https://blueprintjs.com/docs/#core/components/button-group
  */
-export const ButtonGroup: React.FC<ButtonGroupProps> = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
-    (props, ref) => {
-        const {
-            alignText,
-            className,
-            fill,
-            // eslint-disable-next-line @typescript-eslint/no-deprecated
-            minimal,
-            // eslint-disable-next-line @typescript-eslint/no-deprecated
-            outlined,
-            // eslint-disable-next-line @typescript-eslint/no-deprecated
-            large,
-            size = "medium",
-            variant = "solid",
-            vertical,
-            ...htmlProps
-        } = props;
+export const ButtonGroup: React.FC<ButtonGroupProps> = forwardRef<HTMLDivElement, ButtonGroupProps>((props, ref) => {
+    const {
+        alignText,
+        className,
+        fill,
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        minimal,
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        outlined,
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        large,
+        size = "medium",
+        variant = "solid",
+        vertical,
+        ...htmlProps
+    } = props;
 
-        const buttonGroupClasses = classNames(
-            Classes.BUTTON_GROUP,
-            {
-                [Classes.FILL]: fill,
-                [Classes.VERTICAL]: vertical,
-            },
-            Classes.alignmentClass(alignText),
-            Classes.sizeClass(size, { large }),
-            Classes.variantClass(variant, { minimal, outlined }),
-            className,
-        );
-        return (
-            <div {...htmlProps} ref={ref} className={buttonGroupClasses}>
-                {props.children}
-            </div>
-        );
-    },
-);
+    const buttonGroupClasses = classNames(
+        Classes.BUTTON_GROUP,
+        {
+            [Classes.FILL]: fill,
+            [Classes.VERTICAL]: vertical,
+        },
+        Classes.alignmentClass(alignText),
+        Classes.sizeClass(size, { large }),
+        Classes.variantClass(variant, { minimal, outlined }),
+        className,
+    );
+    return (
+        <div {...htmlProps} ref={ref} className={buttonGroupClasses}>
+            {props.children}
+        </div>
+    );
+});
 ButtonGroup.displayName = `${DISPLAYNAME_PREFIX}.ButtonGroup`;