Add type aliases for interfaces renamed in v4.0 (#4644)

.eslintrc.js

@@ -29,6 +29,9 @@ module.exports = {
                 "@typescript-eslint/no-unused-expressions": "off",
                 // HACKHACK: test dependencies are only declared at root but used in all packages.
                 "import/no-extraneous-dependencies": "off",
+                // HACKHACK: added to reduce diff in https://github.com/palantir/blueprint/pull/4644,
+                // can be removed in v4.0
+                "deprecation/deprecation": "off",
             },
         },
         {

packages/core/src/common/props.ts

@@ -44,22 +44,31 @@ export type MaybeElement = JSX.Element | false | null | undefined;
 
 /**
  * A shared base interface for all Blueprint component props.
+ *
+ * @deprecated use Props
  */
 export interface IProps {
     /** A space-delimited list of class names to pass along to a child element. */
     className?: string;
 }
+// eslint-disable-next-line deprecation/deprecation
+export type Props = IProps;
 
+/** @deprecated use IntentProps */
 export interface IIntentProps {
     /** Visual intent color to apply to element. */
     intent?: Intent;
 }
+// eslint-disable-next-line deprecation/deprecation
+export type IntentProps = IIntentProps;
 
 /**
  * Interface for a clickable action, such as a button or menu item.
  * These props can be spready directly to a `<Button>` or `<MenuItem>` element.
+ *
+ * @deprecated use ActionProps
  */
-export interface IActionProps extends IIntentProps, IProps {
+export interface IActionProps extends IntentProps, Props {
     /** Whether this action is non-interactive. */
     disabled?: boolean;
 
@@ -72,15 +81,23 @@ export interface IActionProps extends IIntentProps, IProps {
     /** Action text. Can be any single React renderable. */
     text?: React.ReactNode;
 }
+// eslint-disable-next-line deprecation/deprecation
+export type ActionProps = IActionProps;
 
-/** Interface for a link, with support for customizing target window. */
+/**
+ * Interface for a link, with support for customizing target window.
+ *
+ * @deprecated use LinkProps
+ */
 export interface ILinkProps {
     /** Link URL. */
     href?: string;
 
     /** Link target attribute. Use `"_blank"` to open in a new window. */
     target?: string;
 }
+// eslint-disable-next-line deprecation/deprecation
+export type LinkProps = ILinkProps;
 
 /**
  * Interface for a controlled input.
@@ -105,6 +122,7 @@ export interface IControlledProps2 {
     /** Form value of the input, for controlled usage. */
     value?: string;
 }
+export type ControlledProps2 = IControlledProps2;
 
 /**
  * @deprecated will be removed in Blueprint v4.0, where components will use `ref` prop instead
@@ -117,8 +135,10 @@ export interface IElementRefProps<E extends HTMLElement> {
 /**
  * An interface for an option in a list, such as in a `<select>` or `RadioGroup`.
  * These props can be spread directly to an `<option>` or `<Radio>` element.
+ *
+ * @deprecated use OptionProps
  */
-export interface IOptionProps extends IProps {
+export interface IOptionProps extends Props {
     /** Whether this option is non-interactive. */
     disabled?: boolean;
 
@@ -128,6 +148,8 @@ export interface IOptionProps extends IProps {
     /** Value of this option. */
     value: string | number;
 }
+// eslint-disable-next-line deprecation/deprecation
+export type OptionProps = IOptionProps;
 
 /** A collection of curated prop keys used across our Components which are not valid HTMLElement props. */
 const INVALID_PROPS = [

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

@@ -14,21 +14,29 @@
  * limitations under the License.
  */
 
+// we use the empty object {} a lot in this public API
+/* eslint-disable @typescript-eslint/ban-types */
+
+/* eslint-disable deprecation/deprecation */
+
 /** @deprecated use IKeyAllowlist */
 export type IKeyWhitelist<T> = IKeyAllowlist<T>;
 /** @deprecated use IKeyDenylist */
 export type IKeyBlacklist<T> = IKeyDenylist<T>;
 
-// we use the empty object {} a lot in this public API
-/* eslint-disable @typescript-eslint/ban-types */
-
+/** @deprecated use KeyAllowlist */
 export interface IKeyAllowlist<T> {
     include: Array<keyof T>;
 }
+export type KeyAllowlist<T> = IKeyAllowlist<T>;
 
+/** @deprecated use KeyDenylist */
 export interface IKeyDenylist<T> {
     exclude: Array<keyof T>;
 }
+export type KeyDenylist<T> = IKeyDenylist<T>;
+
+/* eslint-enable deprecation/deprecation */
 
 /**
  * Returns true if the arrays are equal. Elements will be shallowly compared by
@@ -52,7 +60,7 @@ export function arraysEqual(arrA: any[], arrB: any[], compare = (a: any, b: any)
  *
  * @returns true if items are equal.
  */
-export function shallowCompareKeys<T extends {}>(objA: T, objB: T, keys?: IKeyDenylist<T> | IKeyAllowlist<T>) {
+export function shallowCompareKeys<T extends {}>(objA: T, objB: T, keys?: KeyDenylist<T> | KeyAllowlist<T>) {
     // treat `null` and `undefined` as the same
     if (objA == null && objB == null) {
         return true;
@@ -129,7 +137,7 @@ export function getDeepUnequalKeyValues<T extends {}>(
 /**
  * Partial shallow comparison between objects using the given list of keys.
  */
-function shallowCompareKeysImpl<T extends object>(objA: T, objB: T, keys: IKeyDenylist<T> | IKeyAllowlist<T>) {
+function shallowCompareKeysImpl<T extends object>(objA: T, objB: T, keys: KeyDenylist<T> | KeyAllowlist<T>) {
     return filterKeys(objA, objB, keys).every(key => {
         return objA.hasOwnProperty(key) === objB.hasOwnProperty(key) && objA[key] === objB[key];
     });
@@ -148,7 +156,7 @@ function isSimplePrimitiveType(value: any) {
     return typeof value === "number" || typeof value === "string" || typeof value === "boolean";
 }
 
-function filterKeys<T>(objA: T, objB: T, keys: IKeyDenylist<T> | IKeyAllowlist<T>) {
+function filterKeys<T>(objA: T, objB: T, keys: KeyDenylist<T> | KeyAllowlist<T>) {
     if (isAllowlist(keys)) {
         return keys.include;
     } else if (isDenylist(keys)) {
@@ -168,12 +176,12 @@ function filterKeys<T>(objA: T, objB: T, keys: IKeyDenylist<T> | IKeyAllowlist<T
     return [];
 }
 
-function isAllowlist<T>(keys: any): keys is IKeyAllowlist<T> {
-    return keys != null && (keys as IKeyAllowlist<T>).include != null;
+function isAllowlist<T>(keys: any): keys is KeyAllowlist<T> {
+    return keys != null && (keys as KeyAllowlist<T>).include != null;
 }
 
-function isDenylist<T>(keys: any): keys is IKeyDenylist<T> {
-    return keys != null && (keys as IKeyDenylist<T>).exclude != null;
+function isDenylist<T>(keys: any): keys is KeyDenylist<T> {
+    return keys != null && (keys as KeyDenylist<T>).exclude != null;
 }
 
 function arrayToObject(arr: any[]) {

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

@@ -18,7 +18,7 @@ import classNames from "classnames";
 import * as React from "react";
 import { polyfill } from "react-lifecycles-compat";
 
-import { AbstractPureComponent2, Classes, DISPLAYNAME_PREFIX, Intent, IProps, MaybeElement } from "../../common";
+import { AbstractPureComponent2, Classes, DISPLAYNAME_PREFIX, Intent, Props, MaybeElement } from "../../common";
 import {
     ALERT_WARN_CANCEL_ESCAPE_KEY,
     ALERT_WARN_CANCEL_OUTSIDE_CLICK,
@@ -29,7 +29,10 @@ import { Dialog } from "../dialog/dialog";
 import { Icon, IconName } from "../icon/icon";
 import { IOverlayLifecycleProps } from "../overlay/overlay";
 
-export interface IAlertProps extends IOverlayLifecycleProps, IProps {
+// eslint-disable-next-line deprecation/deprecation
+export type AlertProps = IAlertProps;
+/** @deprecated use AlertProps */
+export interface IAlertProps extends IOverlayLifecycleProps, Props {
     /**
      * Whether pressing <kbd>escape</kbd> when focused on the Alert should cancel the alert.
      * If this prop is enabled, then either `onCancel` or `onClose` must also be defined.
@@ -131,8 +134,8 @@ export interface IAlertProps extends IOverlayLifecycleProps, IProps {
 }
 
 @polyfill
-export class Alert extends AbstractPureComponent2<IAlertProps> {
-    public static defaultProps: IAlertProps = {
+export class Alert extends AbstractPureComponent2<AlertProps> {
+    public static defaultProps: AlertProps = {
         canEscapeKeyCancel: false,
         canOutsideClickCancel: false,
         confirmButtonText: "OK",
@@ -179,7 +182,7 @@ export class Alert extends AbstractPureComponent2<IAlertProps> {
         );
     }
 
-    protected validateProps(props: IAlertProps) {
+    protected validateProps(props: AlertProps) {
         if (props.onClose == null && (props.cancelButtonText == null) !== (props.onCancel == null)) {
             console.warn(ALERT_WARN_CANCEL_PROPS);
         }

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

@@ -18,15 +18,18 @@ import classNames from "classnames";
 import * as React from "react";
 
 import * as Classes from "../../common/classes";
-import { IActionProps, ILinkProps } from "../../common/props";
+import { ActionProps, LinkProps } from "../../common/props";
 import { Icon } from "../icon/icon";
 
-export interface IBreadcrumbProps extends IActionProps, ILinkProps {
+// eslint-disable-next-line deprecation/deprecation
+export type BreadcrumbProps = IBreadcrumbProps;
+/** @deprecated use BreadcrumbProps */
+export interface IBreadcrumbProps extends ActionProps, LinkProps {
     /** Whether this breadcrumb is the current breadcrumb. */
     current?: boolean;
 }
 
-export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps> = breadcrumbProps => {
+export const Breadcrumb: React.FunctionComponent<BreadcrumbProps> = breadcrumbProps => {
     const classes = classNames(
         Classes.BREADCRUMB,
         {

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

@@ -18,22 +18,25 @@ import classNames from "classnames";
 import * as React from "react";
 import { polyfill } from "react-lifecycles-compat";
 
-import { AbstractPureComponent2, Boundary, Classes, IProps, Position, removeNonHTMLProps } from "../../common";
+import { AbstractPureComponent2, Boundary, Classes, Props, Position, removeNonHTMLProps } from "../../common";
 import { Menu } from "../menu/menu";
 import { MenuItem } from "../menu/menuItem";
-import { IOverflowListProps, OverflowList } from "../overflow-list/overflowList";
+import { OverflowListProps, OverflowList } from "../overflow-list/overflowList";
 import { IPopoverProps, Popover } from "../popover/popover";
-import { Breadcrumb, IBreadcrumbProps } from "./breadcrumb";
+import { Breadcrumb, BreadcrumbProps } from "./breadcrumb";
 
-export interface IBreadcrumbsProps extends IProps {
+// eslint-disable-next-line deprecation/deprecation
+export type BreadcrumbsProps = IBreadcrumbsProps;
+/** @deprecated use BreadcrumbsProps */
+export interface IBreadcrumbsProps extends Props {
     /**
      * Callback invoked to render visible breadcrumbs. Best practice is to
      * render a `<Breadcrumb>` element. If `currentBreadcrumbRenderer` is also
      * supplied, that callback will be used for the current breadcrumb instead.
      *
      * @default Breadcrumb
      */
-    breadcrumbRenderer?: (props: IBreadcrumbProps) => JSX.Element;
+    breadcrumbRenderer?: (props: BreadcrumbProps) => JSX.Element;
 
     /**
      * Which direction the breadcrumbs should collapse from: start or end.
@@ -49,13 +52,13 @@ export interface IBreadcrumbsProps extends IProps {
      * If this prop is omitted, `breadcrumbRenderer` will be invoked for the
      * current breadcrumb instead.
      */
-    currentBreadcrumbRenderer?: (props: IBreadcrumbProps) => JSX.Element;
+    currentBreadcrumbRenderer?: (props: BreadcrumbProps) => JSX.Element;
 
     /**
      * All breadcrumbs to display. Breadcrumbs that do not fit in the container
      * will be rendered in an overflow menu instead.
      */
-    items: IBreadcrumbProps[];
+    items: BreadcrumbProps[];
 
     /**
      * The minimum number of visible breadcrumbs that should never collapse into
@@ -69,7 +72,7 @@ export interface IBreadcrumbsProps extends IProps {
      * Props to spread to `OverflowList`. Note that `items`,
      * `overflowRenderer`, and `visibleItemRenderer` cannot be changed.
      */
-    overflowListProps?: Partial<IOverflowListProps<IBreadcrumbProps>>;
+    overflowListProps?: Partial<OverflowListProps<BreadcrumbProps>>;
 
     /**
      * Props to spread to the `Popover` showing the overflow menu.
@@ -78,8 +81,8 @@ export interface IBreadcrumbsProps extends IProps {
 }
 
 @polyfill
-export class Breadcrumbs extends AbstractPureComponent2<IBreadcrumbsProps> {
-    public static defaultProps: Partial<IBreadcrumbsProps> = {
+export class Breadcrumbs extends AbstractPureComponent2<BreadcrumbsProps> {
+    public static defaultProps: Partial<BreadcrumbsProps> = {
         collapseFrom: Boundary.START,
     };
 
@@ -99,7 +102,7 @@ export class Breadcrumbs extends AbstractPureComponent2<IBreadcrumbsProps> {
         );
     }
 
-    private renderOverflow = (items: IBreadcrumbProps[]) => {
+    private renderOverflow = (items: BreadcrumbProps[]) => {
         const { collapseFrom } = this.props;
         const position = collapseFrom === Boundary.END ? Position.BOTTOM_RIGHT : Position.BOTTOM_LEFT;
         let orderedItems = items;
@@ -123,18 +126,18 @@ export class Breadcrumbs extends AbstractPureComponent2<IBreadcrumbsProps> {
         /* eslint-enable deprecation/deprecation */
     };
 
-    private renderOverflowBreadcrumb = (props: IBreadcrumbProps, index: number) => {
+    private renderOverflowBreadcrumb = (props: BreadcrumbProps, index: number) => {
         const isClickable = props.href != null || props.onClick != null;
         const htmlProps = removeNonHTMLProps(props);
         return <MenuItem disabled={!isClickable} {...htmlProps} text={props.text} key={index} />;
     };
 
-    private renderBreadcrumbWrapper = (props: IBreadcrumbProps, index: number) => {
+    private renderBreadcrumbWrapper = (props: BreadcrumbProps, index: number) => {
         const isCurrent = this.props.items[this.props.items.length - 1] === props;
         return <li key={index}>{this.renderBreadcrumb(props, isCurrent)}</li>;
     };
 
-    private renderBreadcrumb(props: IBreadcrumbProps, isCurrent: boolean) {
+    private renderBreadcrumb(props: BreadcrumbProps, isCurrent: boolean) {
         if (isCurrent && this.props.currentBreadcrumbRenderer != null) {
             return this.props.currentBreadcrumbRenderer(props);
         } else if (this.props.breadcrumbRenderer != null) {

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

@@ -21,7 +21,7 @@ import {
     AbstractPureComponent2,
     Alignment,
     Classes,
-    IActionProps,
+    ActionProps,
     IElementRefProps,
     Keys,
     MaybeElement,
@@ -30,8 +30,11 @@ import {
 import { Icon, IconName } from "../icon/icon";
 import { Spinner } from "../spinner/spinner";
 
+// eslint-disable-next-line deprecation/deprecation
+export type ButtonProps<E extends HTMLButtonElement | HTMLAnchorElement = HTMLButtonElement> = IButtonProps<E>;
+/** @deprecated use ButtonProps */
 export interface IButtonProps<E extends HTMLButtonElement | HTMLAnchorElement = HTMLButtonElement>
-    extends IActionProps,
+    extends ActionProps,
         // eslint-disable-next-line deprecation/deprecation
         IElementRefProps<E> {
     /**
@@ -87,14 +90,17 @@ export interface IButtonProps<E extends HTMLButtonElement | HTMLAnchorElement =
     type?: "submit" | "reset" | "button";
 }
 
-export type IAnchorButtonProps = IButtonProps<HTMLAnchorElement>;
+/** @deprecated use AnchorButtonProps */
+export type IAnchorButtonProps = ButtonProps<HTMLAnchorElement>;
+// eslint-disable-next-line deprecation/deprecation
+export type AnchorButtonProps = IAnchorButtonProps;
 
 export interface IButtonState {
     isActive: boolean;
 }
 
 export abstract class AbstractButton<E extends HTMLButtonElement | HTMLAnchorElement> extends AbstractPureComponent2<
-    IButtonProps<E> &
+    ButtonProps<E> &
         (E extends HTMLButtonElement
             ? React.ButtonHTMLAttributes<HTMLButtonElement>
             : React.AnchorHTMLAttributes<HTMLAnchorElement>),