[v5] fix: various compatibility fixes (#6136)

palantir · May 8, 2023 · 6d02b26 · 6d02b26 · adidahiya · May 8, 2023
1 parent 60fd430
commit 6d02b26
Show file tree

Hide file tree

Showing 36 changed files with 254 additions and 244 deletions.
diff --git a/packages/core/src/common/classes.ts b/packages/core/src/common/classes.ts
@@ -260,6 +260,8 @@ export const POPOVER_POPPER_ESCAPED = `${POPOVER}-popper-escaped`;
 export const POPOVER_REFERENCE_HIDDEN = `${POPOVER}-reference-hidden`;
 export const POPOVER_TARGET = `${POPOVER}-target`;
 export const POPOVER_TRANSITION_CONTAINER = `${POPOVER}-transition-container`;
+/** @deprecated, no longer used in Blueprint v5.x */
+export const POPOVER_WRAPPER = `${POPOVER}-wrapper`;
 
 export const PROGRESS_BAR = `${NS}-progress-bar`;
 export const PROGRESS_METER = `${NS}-progress-meter`;

diff --git a/packages/core/src/common/props.ts b/packages/core/src/common/props.ts
@@ -115,6 +115,7 @@ const INVALID_PROPS = [
     "asyncControl", // InputGroupProps
     "containerRef",
     "current",
+    "elementRef", // not used anymore in Blueprint v5.x, but kept for backcompat if consumers use this naming pattern
     "fill",
     "icon",
     "inputClassName",

diff --git a/packages/core/src/components/button/buttonProps.ts b/packages/core/src/components/button/buttonProps.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React from "react";
+import * as React from "react";
 
 import type { ActionProps, Alignment, MaybeElement } from "../../common";
 import type { IconName } from "../icon/icon";

diff --git a/packages/core/src/components/button/buttons.tsx b/packages/core/src/components/button/buttons.tsx
@@ -15,7 +15,7 @@
  */
 
 import classNames from "classnames";
-import React, { forwardRef, useCallback, useRef, useState } from "react";
+import * as React from "react";
 
 import { IconSize } from "@blueprintjs/icons";
 
@@ -31,7 +31,7 @@ import { AnchorButtonProps, ButtonProps } from "./buttonProps";
  *
  * @see https://blueprintjs.com/docs/#core/components/button
  */
-export const Button: React.FC<ButtonProps> = forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+export const Button: React.FC<ButtonProps> = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
     const commonAttributes = useSharedButtonAttributes(props, ref);
 
     return (
@@ -47,7 +47,7 @@ Button.displayName = `${DISPLAYNAME_PREFIX}.Button`;
  *
  * @see https://blueprintjs.com/docs/#core/components/button
  */
-export const AnchorButton: React.FC<AnchorButtonProps> = forwardRef<HTMLAnchorElement, AnchorButtonProps>(
+export const AnchorButton: React.FC<AnchorButtonProps> = React.forwardRef<HTMLAnchorElement, AnchorButtonProps>(
     (props, ref) => {
         const { href, tabIndex = 0 } = props;
         const commonProps = useSharedButtonAttributes(props, ref);
@@ -78,13 +78,13 @@ function useSharedButtonAttributes<E extends HTMLAnchorElement | HTMLButtonEleme
     const disabled = props.disabled || loading;
 
     // the current key being pressed
-    const [currentKeyPressed, setCurrentKeyPressed] = useState<string | undefined>();
+    const [currentKeyPressed, setCurrentKeyPressed] = React.useState<string | undefined>();
     // whether the button is in "active" state
-    const [isActive, setIsActive] = useState(false);
+    const [isActive, setIsActive] = React.useState(false);
     // our local ref for the button element, merged with the consumer's own ref (if supplied) in this hook's return value
-    const buttonRef = useRef<E | null>(null);
+    const buttonRef = React.useRef<E | null>(null);
 
-    const handleBlur = useCallback(
+    const handleBlur = React.useCallback(
         (e: React.FocusEvent<any>) => {
             if (isActive) {
                 setIsActive(false);
@@ -93,7 +93,7 @@ function useSharedButtonAttributes<E extends HTMLAnchorElement | HTMLButtonEleme
         },
         [isActive, props.onBlur],
     );
-    const handleKeyDown = useCallback(
+    const handleKeyDown = React.useCallback(
         (e: React.KeyboardEvent<any>) => {
             if (Utils.isKeyboardClick(e)) {
                 e.preventDefault();
@@ -106,7 +106,7 @@ function useSharedButtonAttributes<E extends HTMLAnchorElement | HTMLButtonEleme
         },
         [currentKeyPressed, props.onKeyDown],
     );
-    const handleKeyUp = useCallback(
+    const handleKeyUp = React.useCallback(
         (e: React.KeyboardEvent<any>) => {
             if (Utils.isKeyboardClick(e)) {
                 setIsActive(false);

diff --git a/packages/core/src/components/forms/controls.tsx b/packages/core/src/components/forms/controls.tsx
@@ -15,7 +15,7 @@
  */
 
 import classNames from "classnames";
-import React, { forwardRef, useCallback, useEffect, useRef, useState } from "react";
+import * as React from "react";
 
 import { Alignment, Classes, mergeRefs } from "../../common";
 import { DISPLAYNAME_PREFIX, HTMLInputProps, Props } from "../../common/props";
@@ -155,30 +155,32 @@ export interface SwitchProps extends ControlProps {
  *
  * @see https://blueprintjs.com/docs/#core/components/switch
  */
-export const Switch: React.FC<SwitchProps> = forwardRef(({ innerLabelChecked, innerLabel, ...controlProps }, ref) => {
-    const switchLabels =
-        innerLabel || innerLabelChecked
-            ? [
-                  <div key="checked" className={Classes.CONTROL_INDICATOR_CHILD}>
-                      <div className={Classes.SWITCH_INNER_TEXT}>
-                          {innerLabelChecked ? innerLabelChecked : innerLabel}
-                      </div>
-                  </div>,
-                  <div key="unchecked" className={Classes.CONTROL_INDICATOR_CHILD}>
-                      <div className={Classes.SWITCH_INNER_TEXT}>{innerLabel}</div>
-                  </div>,
-              ]
-            : null;
-    return renderControl(
-        {
-            ...controlProps,
-            indicatorChildren: switchLabels,
-            type: "checkbox",
-            typeClassName: Classes.SWITCH,
-        },
-        ref,
-    );
-});
+export const Switch: React.FC<SwitchProps> = React.forwardRef(
+    ({ innerLabelChecked, innerLabel, ...controlProps }, ref) => {
+        const switchLabels =
+            innerLabel || innerLabelChecked
+                ? [
+                      <div key="checked" className={Classes.CONTROL_INDICATOR_CHILD}>
+                          <div className={Classes.SWITCH_INNER_TEXT}>
+                              {innerLabelChecked ? innerLabelChecked : innerLabel}
+                          </div>
+                      </div>,
+                      <div key="unchecked" className={Classes.CONTROL_INDICATOR_CHILD}>
+                          <div className={Classes.SWITCH_INNER_TEXT}>{innerLabel}</div>
+                      </div>,
+                  ]
+                : null;
+        return renderControl(
+            {
+                ...controlProps,
+                indicatorChildren: switchLabels,
+                type: "checkbox",
+                typeClassName: Classes.SWITCH,
+            },
+            ref,
+        );
+    },
+);
 Switch.displayName = `${DISPLAYNAME_PREFIX}.Switch`;
 
 //
@@ -192,7 +194,7 @@ export type RadioProps = ControlProps;
  *
  * @see https://blueprintjs.com/docs/#core/components/radio
  */
-export const Radio: React.FC<RadioProps> = forwardRef((props, ref) =>
+export const Radio: React.FC<RadioProps> = React.forwardRef((props, ref) =>
     renderControl(
         {
             ...props,
@@ -228,11 +230,13 @@ export interface CheckboxProps extends ControlProps {
  *
  * @see https://blueprintjs.com/docs/#core/components/checkbox
  */
-export const Checkbox: React.FC<CheckboxProps> = forwardRef((props, ref) => {
+export const Checkbox: React.FC<CheckboxProps> = React.forwardRef((props, ref) => {
     const { defaultIndeterminate, indeterminate, onChange, ...controlProps } = props;
-    const [isIndeterminate, setIsIndeterminate] = useState<boolean>(indeterminate || defaultIndeterminate || false);
-    const localRef = useRef<HTMLInputElement>(null);
-    const handleChange = useCallback(
+    const [isIndeterminate, setIsIndeterminate] = React.useState<boolean>(
+        indeterminate || defaultIndeterminate || false,
+    );
+    const localRef = React.useRef<HTMLInputElement>(null);
+    const handleChange = React.useCallback(
         (evt: React.ChangeEvent<HTMLInputElement>) => {
             // update state immediately only if uncontrolled
             if (indeterminate === undefined) {
@@ -244,13 +248,13 @@ export const Checkbox: React.FC<CheckboxProps> = forwardRef((props, ref) => {
         [onChange],
     );
 
-    useEffect(() => {
+    React.useEffect(() => {
         if (indeterminate !== undefined) {
             setIsIndeterminate(indeterminate);
         }
     }, [indeterminate]);
 
-    useEffect(() => {
+    React.useEffect(() => {
         if (localRef.current != null) {
             localRef.current.indeterminate = isIndeterminate;
         }

diff --git a/packages/core/src/components/hotkeys/hotkeysTarget2.tsx b/packages/core/src/components/hotkeys/hotkeysTarget2.tsx
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { useEffect } from "react";
+import * as React from "react";
 
 import * as Errors from "../../common/errors";
 import { isNodeEnv } from "../../common/utils";
@@ -48,7 +48,7 @@ export const HotkeysTarget2 = ({ children, hotkeys, options }: HotkeysTarget2Pro
     const { handleKeyDown, handleKeyUp } = useHotkeys(hotkeys, options);
 
     // run props validation
-    useEffect(() => {
+    React.useEffect(() => {
         if (!isNodeEnv("production")) {
             if (typeof children !== "function" && hotkeys.some(h => !h.global)) {
                 console.error(Errors.HOTKEYS_TARGET_CHILDREN_LOCAL_HOTKEYS);

diff --git a/packages/core/src/components/html-select/htmlSelect.tsx b/packages/core/src/components/html-select/htmlSelect.tsx
@@ -15,7 +15,7 @@
  */
 
 import classNames from "classnames";
-import React, { forwardRef } from "react";
+import * as React from "react";
 
 import { DoubleCaretVertical, SVGIconProps } from "@blueprintjs/icons";
 
@@ -66,7 +66,7 @@ export interface HTMLSelectProps
  *
  * @see https://blueprintjs.com/docs/#core/components/html-select
  */
-export const HTMLSelect: React.FC<HTMLSelectProps> = forwardRef((props, ref) => {
+export const HTMLSelect: React.FC<HTMLSelectProps> = React.forwardRef((props, ref) => {
     const { className, children, disabled, fill, iconProps, large, minimal, options = [], value, ...htmlProps } = props;
     const classes = classNames(
         HTML_SELECT,

diff --git a/packages/core/src/components/html-table/htmlTable.tsx b/packages/core/src/components/html-table/htmlTable.tsx
@@ -15,7 +15,7 @@
  */
 
 import classNames from "classnames";
-import React, { forwardRef } from "react";
+import * as React from "react";
 
 import { Classes, DISPLAYNAME_PREFIX } from "../../common";
 
@@ -42,7 +42,7 @@ export interface HTMLTableProps
  *
  * @see https://blueprintjs.com/docs/#core/components/html-table
  */
-export const HTMLTable: React.FC<HTMLTableProps> = forwardRef((props, ref) => {
+export const HTMLTable: React.FC<HTMLTableProps> = React.forwardRef((props, ref) => {
     const { bordered, className, compact, interactive, striped, ...htmlProps } = props;
     const classes = classNames(
         Classes.HTML_TABLE,

diff --git a/packages/core/src/components/html/html.tsx b/packages/core/src/components/html/html.tsx
@@ -15,7 +15,7 @@
  */
 
 import classNames from "classnames";
-import React, { forwardRef } from "react";
+import * as React from "react";
 
 import { BLOCKQUOTE, CODE, CODE_BLOCK, HEADING, LABEL, LIST } from "../../common/classes";
 
@@ -24,7 +24,7 @@ function htmlElement<E extends HTMLElement>(
     tagClassName: string,
 ): React.FC<React.HTMLAttributes<E> & React.RefAttributes<E>> {
     /* eslint-disable-next-line react/display-name */
-    return forwardRef<E, React.HTMLAttributes<E>>((props, ref) => {
+    return React.forwardRef<E, React.HTMLAttributes<E>>((props, ref) => {
         const { className, children, ...htmlProps } = props;
         return React.createElement(
             tagName,