chore: upgrade typescript, replace resize-observer-polyfill

package.json

@@ -63,7 +63,7 @@
         "sinon": "^9.2.1",
         "stylelint-config-palantir": "^5.0.0",
         "stylelint-scss": "^3.18.0",
-        "typescript": "~4.1.2",
+        "typescript": "~4.6.2",
         "yarn-deduplicate": "^3.1.0"
     },
     "resolutions": {

packages/colors/package.json

@@ -19,7 +19,7 @@
     "devDependencies": {
         "@blueprintjs/node-build-scripts": "^1.6.1",
         "mocha": "^9.2.2",
-        "typescript": "^4.1.2"
+        "typescript": "~4.6.2"
     },
     "repository": {
         "type": "git",

packages/core/package.json

@@ -48,6 +48,7 @@
     "dependencies": {
         "@blueprintjs/colors": "^4.0.0-alpha.2",
         "@blueprintjs/icons": "^3.32.0",
+        "@juggle/resize-observer": "^3.3.1",
         "@types/dom4": "^2.0.1",
         "classnames": "^2.2",
         "dom4": "^2.1.5",
@@ -56,8 +57,7 @@
         "react-lifecycles-compat": "^3.0.4",
         "react-popper": "^1.3.7",
         "react-transition-group": "^2.9.0",
-        "resize-observer-polyfill": "^1.5.1",
-        "tslib": "~1.13.0"
+        "tslib": "~2.3.1"
     },
     "peerDependencies": {
         "react": "^15.3.0 || 16 || 17",
@@ -76,7 +76,7 @@
         "react-dom": "^16.14.0",
         "react-test-renderer": "^16.14.0",
         "sass-inline-svg": "^1.2.3",
-        "typescript": "~4.1.2",
+        "typescript": "~4.6.2",
         "webpack-cli": "^3.3.12"
     },
     "repository": {

packages/core/src/common/abstractComponent.ts

@@ -26,7 +26,7 @@ import { isNodeEnv } from "./utils";
  */
 export abstract class AbstractComponent<P, S> extends React.Component<P, S> {
     /** Component displayName should be `public static`. This property exists to prevent incorrect usage. */
-    protected displayName: never;
+    protected displayName!: never;
 
     // Not bothering to remove entries when their timeouts finish because clearing invalid ID is a no-op
     private timeoutIds: number[] = [];

packages/core/src/common/abstractComponent2.ts

@@ -25,17 +25,17 @@ import { isNodeEnv } from "./utils";
 // eslint-disable-next-line @typescript-eslint/ban-types
 export abstract class AbstractComponent2<P, S = {}, SS = {}> extends React.Component<P, S, SS> {
     // unsafe lifecycle methods
-    public componentWillUpdate: never;
+    public componentWillUpdate!: never;
 
-    public componentWillReceiveProps: never;
+    public componentWillReceiveProps!: never;
 
-    public componentWillMount: never;
+    public componentWillMount!: never;
 
     // this should be static, not an instance method
-    public getDerivedStateFromProps: never;
+    public getDerivedStateFromProps!: never;
 
     /** Component displayName should be `public static`. This property exists to prevent incorrect usage. */
-    protected displayName: never;
+    protected displayName!: never;
 
     // Not bothering to remove entries when their timeouts finish because clearing invalid ID is a no-op
     private timeoutIds: number[] = [];

packages/core/src/common/abstractPureComponent.ts

@@ -27,7 +27,7 @@ import { isNodeEnv } from "./utils";
 // eslint-disable-next-line @typescript-eslint/ban-types
 export abstract class AbstractPureComponent<P, S = {}> extends React.PureComponent<P, S> {
     /** Component displayName should be `public static`. This property exists to prevent incorrect usage. */
-    protected displayName: never;
+    protected displayName!: never;
 
     // Not bothering to remove entries when their timeouts finish because clearing invalid ID is a no-op
     private timeoutIds: number[] = [];

packages/core/src/common/abstractPureComponent2.ts

@@ -25,17 +25,17 @@ import { isNodeEnv } from "./utils";
 // eslint-disable-next-line @typescript-eslint/ban-types
 export abstract class AbstractPureComponent2<P, S = {}, SS = {}> extends React.PureComponent<P, S, SS> {
     // unsafe lifecycle method
-    public componentWillUpdate: never;
+    public componentWillUpdate!: never;
 
-    public componentWillReceiveProps: never;
+    public componentWillReceiveProps!: never;
 
-    public componentWillMount: never;
+    public componentWillMount!: never;
 
     // this should be static, not an instance method
-    public getDerivedStateFromProps: never;
+    public getDerivedStateFromProps!: never;
 
     /** Component displayName should be `public static`. This property exists to prevent incorrect usage. */
-    protected displayName: never;
+    protected displayName!: never;
 
     // Not bothering to remove entries when their timeouts finish because clearing invalid ID is a no-op
     private timeoutIds: number[] = [];

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

@@ -298,7 +298,8 @@ export const normalizeKeyCombo = (combo: string, platformOverride?: string): str
 };
 
 function isMac(platformOverride?: string) {
-    const platform =
-        platformOverride != null ? platformOverride : typeof navigator !== "undefined" ? navigator.platform : undefined;
-    return platform == null ? false : /Mac|iPod|iPhone|iPad/.test(platform);
+    // HACKHACK: see https://github.com/palantir/blueprint/issues/5174
+    // eslint-disable-next-line deprecation/deprecation
+    const platform = platformOverride ?? (typeof navigator !== "undefined" ? navigator.platform : undefined);
+    return platform === undefined ? false : /Mac|iPod|iPhone|iPad/.test(platform);
 }

packages/core/src/components/overflow-list/overflowList.tsx

@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 
+import type { ResizeObserverEntry } from "@juggle/resize-observer";
 import classNames from "classnames";
 import * as React from "react";
 
@@ -22,7 +23,6 @@ import * as Classes from "../../common/classes";
 import { OVERFLOW_LIST_OBSERVE_PARENTS_CHANGED } from "../../common/errors";
 import { DISPLAYNAME_PREFIX, Props } from "../../common/props";
 import { shallowCompareKeys } from "../../common/utils";
-import { ResizeEntry } from "../resize-sensor/resizeObserverTypes";
 import { ResizeSensor } from "../resize-sensor/resizeSensor";
 
 /** @internal - do not expose this type */
@@ -232,7 +232,7 @@ export class OverflowList<T> extends React.Component<OverflowListProps<T>, IOver
         return this.props.overflowRenderer(overflow.slice());
     }
 
-    private resize = (entries: readonly ResizeEntry[]) => {
+    private resize = (entries: readonly ResizeObserverEntry[]) => {
         // if any parent is growing, assume we have more room than before
         const growing = entries.some(entry => {
             const previousWidth = this.previousWidths.get(entry.target) || 0;

packages/core/src/components/resize-sensor/resizeObserverTypes.ts

@@ -1,4 +1,4 @@
-/* !
+/*
  * Copyright 2020 Palantir Technologies, Inc. All rights reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -14,34 +14,22 @@
  * limitations under the License.
  */
 
-/** This file contains types duplicated from resize-observer-polyfill which are not exported in a consumer-friendly way. */
+/** @fileoverview types re-exported from the resize observer polyfill library, will be removed in v4.0 */
 
-// eslint-disable-next-line deprecation/deprecation
-export type ResizeEntry = IResizeEntry;
+import type { ResizeObserverEntry } from "@juggle/resize-observer";
+// tslint:disable-next-line no-submodule-imports
+import type { DOMRectReadOnly } from "@juggle/resize-observer/lib/DOMRectReadOnly";
 
-/**
- * Equivalent to `ResizeObserverEntry`
- *
- * @deprecated use ResizeEntry
- */
-export interface IResizeEntry {
-    /** Measured dimensions of the target. */
-    readonly contentRect: DOMRectReadOnly;
+/* eslint-disable deprecation/deprecation */
+
+/** @deprecated use { ResizeObserverEntry } from "@juggle/resize-observer" */
+export type IResizeEntry = ResizeObserverEntry;
+
+/** @deprecated use { ResizeObserverEntry } from "@juggle/resize-observer" */
+export type ResizeEntry = IResizeEntry;
 
-    /** The resized element. */
-    readonly target: Element;
-}
+/** @deprecated */
+export type IDOMRectReadOnly = DOMRectReadOnly;
 
-// eslint-disable-next-line deprecation/deprecation
-export type DOMRectReadOnly = IDOMRectReadOnly;
-/** @deprecated use DOMRectReadOnly */
-interface IDOMRectReadOnly {
-    readonly x: number;
-    readonly y: number;
-    readonly width: number;
-    readonly height: number;
-    readonly top: number;
-    readonly right: number;
-    readonly bottom: number;
-    readonly left: number;
-}
+/** @deprecated */
+export { DOMRectReadOnly };

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

@@ -14,14 +14,13 @@
  * limitations under the License.
  */
 
+import { ResizeObserver, ResizeObserverEntry } from "@juggle/resize-observer";
 import * as React from "react";
 import { findDOMNode } from "react-dom";
 import { polyfill } from "react-lifecycles-compat";
-import ResizeObserver from "resize-observer-polyfill";
 
 import { AbstractPureComponent2 } from "../../common";
 import { DISPLAYNAME_PREFIX } from "../../common/props";
-import { ResizeEntry } from "./resizeObserverTypes";
 
 // eslint-disable-next-line deprecation/deprecation
 export type ResizeSensorProps = IResizeSensorProps;
@@ -37,7 +36,7 @@ export interface IResizeSensorProps {
      * Note that this method is called _asynchronously_ after a resize is
      * detected and typically it will be called no more than once per frame.
      */
-    onResize: (entries: ResizeEntry[]) => void;
+    onResize: (entries: ResizeObserverEntry[]) => void;
 
     /**
      * If `true`, all parent DOM elements of the container will also be

packages/core/test/controls/inputGroupTests.tsx

@@ -92,7 +92,7 @@ describe("<InputGroup>", () => {
             <TestComponent
                 initialValue="abc"
                 // tslint:disable-next-line:jsx-no-lambda
-                transformInput={(value: string) => value.substr(0, 3)}
+                transformInput={(value: string) => value.substring(0, 3)}
             />,
         );
 

packages/core/test/toast/toasterTests.tsx

@@ -180,7 +180,7 @@ describe("Toaster", () => {
             public componentDidMount() {
                 try {
                     Toaster.create();
-                } catch (err) {
+                } catch (err: any) {
                     assert.equal(err.message, TOASTER_CREATE_NULL);
                 }
             }

packages/datetime/package.json

@@ -39,7 +39,7 @@
         "classnames": "^2.2",
         "react-day-picker": "7.4.9",
         "react-lifecycles-compat": "^3.0.4",
-        "tslib": "~1.13.0"
+        "tslib": "~2.3.1"
     },
     "peerDependencies": {
         "react": "^15.3.0 || 16 || 17",
@@ -57,7 +57,7 @@
         "react": "^16.14.0",
         "react-dom": "^16.14.0",
         "react-test-renderer": "^16.14.0",
-        "typescript": "~4.1.2",
+        "typescript": "~4.6.2",
         "webpack-cli": "^3.3.12"
     },
     "repository": {

packages/demo-app/package.json

@@ -32,7 +32,7 @@
         "react": "^16.14.0",
         "react-dom": "^16.14.0",
         "react-transition-group": "^4.4.1",
-        "tslib": "~1.13.0"
+        "tslib": "~2.3.1"
     },
     "devDependencies": {
         "@blueprintjs/node-build-scripts": "^1.6.1",

packages/docs-app/package.json

@@ -40,7 +40,7 @@
         "react": "^16.14.0",
         "react-dom": "^16.14.0",
         "react-transition-group": "^4.4.1",
-        "tslib": "~1.13.0",
+        "tslib": "~2.3.1",
         "whatwg-fetch": "^3.4.1"
     },
     "devDependencies": {

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

@@ -85,14 +85,14 @@ export class ClickToCopy extends React.PureComponent<IClickToCopyProps, IClickTo
         );
     }
 
-    private copy = () => {
+    private copy = async () => {
         this.inputElement.select();
-        document.execCommand("copy");
+        await navigator.clipboard.writeText(this.inputElement.value);
         this.setState({ hasCopied: true });
     };
 
-    private handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
-        this.copy();
+    private handleClick = async (e: React.MouseEvent<HTMLDivElement>) => {
+        await this.copy();
         this.props.onClick?.(e);
     };
 

packages/docs-app/src/examples/table-examples/tableFormatsExample.tsx

@@ -75,16 +75,6 @@ const TIME_ZONES: ITimezone[] = ([
     };
 });
 
-const FORMAT_OPTIONS = {
-    day: "2-digit",
-    hour: "2-digit",
-    minute: "2-digit",
-    month: "long",
-    second: "2-digit",
-    weekday: "long",
-    year: "numeric",
-};
-
 export class TableFormatsExample extends React.PureComponent<IExampleProps> {
     private data = TIME_ZONES;
 
@@ -110,7 +100,15 @@ export class TableFormatsExample extends React.PureComponent<IExampleProps> {
     private renderLocalTime = (row: number) => {
         const localDateTime = new Date(this.date);
         localDateTime.setTime(localDateTime.getTime() + this.data[row].offsetMsec);
-        const formattedDateTime = localDateTime.toLocaleString("en-US", FORMAT_OPTIONS);
+        const formattedDateTime = localDateTime.toLocaleString("en-US", {
+            day: "2-digit",
+            hour: "2-digit",
+            minute: "2-digit",
+            month: "long",
+            second: "2-digit",
+            weekday: "long",
+            year: "numeric",
+        });
         return (
             <Cell>
                 <TruncatedFormat>{formattedDateTime}</TruncatedFormat>

packages/docs-app/src/examples/table-examples/tableSortableExample.tsx

@@ -213,6 +213,7 @@ export class TableSortableExample extends React.PureComponent<IExampleProps> {
                     bodyContextMenuRenderer={this.renderBodyContextMenu}
                     numRows={numRows}
                     selectionModes={SelectionModes.COLUMNS_AND_CELLS}
+                    getCellClipboardData={this.getCellData}
                 >
                     {columns}
                 </Table2>

packages/docs-app/src/getting-started.md

@@ -165,7 +165,6 @@ These bundles _do not include_ external dependencies; your application will need
         <script src="https://unpkg.com/react-transition-group@^2.2.1/dist/react-transition-group.min.js"></script>
         <script src="https://unpkg.com/popper.js@^1.14.1/dist/umd/popper.js"></script>
         <script src="https://unpkg.com/react-popper@^1.0.0/dist/index.umd.min.js"></script>
-        <script src="https://unpkg.com/resize-observer-polyfill@^1.5.0"></script>
         <!-- Blueprint packages (note: icons script must come first) -->
         <script src="https://unpkg.com/@blueprintjs/icons@^3.4.0"></script>
         <script src="https://unpkg.com/@blueprintjs/core@^3.10.0"></script>

packages/docs-theme/package.json

@@ -35,7 +35,7 @@
         "@documentalist/client": "~3.0.0",
         "classnames": "^2.2",
         "fuzzaldrin-plus": "^0.6.0",
-        "tslib": "~1.13.0"
+        "tslib": "~2.3.1"
     },
     "peerDependencies": {
         "react": "^15.3.0 || 16 || 17",
@@ -47,7 +47,7 @@
         "npm-run-all": "^4.1.5",
         "react": "^16.14.0",
         "react-dom": "^16.14.0",
-        "typescript": "~4.1.2",
+        "typescript": "~4.6.2",
         "webpack-cli": "^3.3.12"
     },
     "repository": {

packages/docs-theme/src/common/context.ts

@@ -77,7 +77,7 @@ export interface IDocumentationContext {
  * ```tsx
  * export class ContextComponent extends React.PureComponent<IApiLinkProps> {
  *     public static contextTypes = DocumentationContextTypes;
- *     public context: IDocumentationContext;
+ *     public declare context: IDocumentationContext;
  *
  *     public render() {
  *         return this.context.renderBlock(this.props.block);

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

@@ -44,7 +44,7 @@ export function renderBlock(
                 throw new Error(`Unknown @tag: ${node.tag}`);
             }
             return React.createElement(renderer, { ...node, key: i });
-        } catch (ex) {
+        } catch (ex: any) {
             console.error(ex.message);
             return (
                 <H3 key={`__error-${i}`}>

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

@@ -24,7 +24,7 @@ export class ApiHeader extends React.PureComponent<ITsDocBase> {
 
     public static displayName = "Docs2.ApiHeader";
 
-    public context: IDocumentationContext;
+    public declare context: IDocumentationContext;
 
     public render() {
         return (