chore: enable "strict" compiler flag in most packages (#4351)

config/tsconfig.base.json

@@ -18,6 +18,7 @@
         "pretty": true,
         "removeComments": false,
         "sourceMap": true,
+        "strict": true,
         "stripInternal": true,
         "target": "es5",
         "typeRoots": ["../node_modules/@types"]

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

@@ -43,19 +43,19 @@ export interface IThrottledReactEventOptions {
  * the throttled function.
  * @see https://www.html5rocks.com/en/tutorials/speed/animations/
  */
-export function throttleReactEventCallback(
-    callback: (event: React.SyntheticEvent<any>, ...otherArgs: any[]) => any,
+export function throttleReactEventCallback<E extends React.SyntheticEvent = React.SyntheticEvent>(
+    callback: (event: E, ...otherArgs: any[]) => any,
     options: IThrottledReactEventOptions = {},
 ) {
     const throttledFunc = throttleImpl(
         callback,
-        (event2: React.SyntheticEvent<any>) => {
+        (event2: E) => {
             if (options.preventDefault) {
                 event2.preventDefault();
             }
         },
         // prevent React from reclaiming the event object before we reference it
-        (event2: React.SyntheticEvent<any>) => event2.persist(),
+        (event2: E) => event2.persist(),
     );
     return throttledFunc;
 }

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

@@ -114,5 +114,6 @@ export function createReactRef<T>() {
 /**
  * Replacement type for { polyfill } from "react-lifecycles-compat" useful in some places where
  * the correct type is not inferred automatically. This should be removed once Blueprint depends on React >= 16.
+ * HACKHACK part of https://github.com/palantir/blueprint/issues/4342
  */
 export type LifecycleCompatPolyfill<P, T extends React.ComponentClass<P>> = (Comp: T) => T & { [K in keyof T]: T[K] };

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

@@ -173,6 +173,7 @@ export interface IOverlayState {
     hasEverOpened?: boolean;
 }
 
+// HACKHACK: https://github.com/palantir/blueprint/issues/4342
 @(polyfill as LifecycleCompatPolyfill<IOverlayProps, any>)
 export class Overlay extends AbstractPureComponent2<IOverlayProps, IOverlayState> {
     public static displayName = `${DISPLAYNAME_PREFIX}.Overlay`;

packages/core/src/components/tabs/tabs.tsx

@@ -91,6 +91,7 @@ export interface ITabsState {
     selectedTabId?: TabId;
 }
 
+// HACKHACK: https://github.com/palantir/blueprint/issues/4342
 @(polyfill as Utils.LifecycleCompatPolyfill<ITabsProps, any>)
 export class Tabs extends AbstractPureComponent2<ITabsProps, ITabsState> {
     /** Insert a `Tabs.Expander` between any two children to right-align all subsequent children. */

packages/core/src/tsconfig.json

@@ -1,7 +1,6 @@
 {
     "extends": "../../../config/tsconfig.base",
     "compilerOptions": {
-        "outDir": "../lib/esm",
-        "strict": true
+        "outDir": "../lib/esm"
     }
 }

packages/datetime/src/dateRangeInput.tsx

@@ -534,33 +534,39 @@ export class DateRangeInput extends AbstractPureComponent2<IDateRangeInputProps,
     };
 
     private handleInputEvent = (e: InputEvent, boundary: Boundary) => {
+        const inputProps = this.getInputProps(boundary);
+
         switch (e.type) {
             case "blur":
                 this.handleInputBlur(e, boundary);
+                inputProps.onBlur?.(e as React.FocusEvent<HTMLInputElement>);
                 break;
             case "change":
                 this.handleInputChange(e, boundary);
+                inputProps.onChange?.(e as React.ChangeEvent<HTMLInputElement>);
                 break;
             case "click":
-                this.handleInputClick(e as React.MouseEvent<HTMLInputElement>);
+                e = e as React.MouseEvent<HTMLInputElement>;
+                this.handleInputClick(e);
+                inputProps.onClick?.(e);
                 break;
             case "focus":
                 this.handleInputFocus(e, boundary);
+                inputProps.onFocus?.(e as React.FocusEvent<HTMLInputElement>);
                 break;
             case "keydown":
-                this.handleInputKeyDown(e as React.KeyboardEvent<HTMLInputElement>);
+                e = e as React.KeyboardEvent<HTMLInputElement>;
+                this.handleInputKeyDown(e);
+                inputProps.onKeyDown?.(e);
                 break;
             case "mousedown":
+                e = e as React.MouseEvent<HTMLInputElement>;
                 this.handleInputMouseDown();
+                inputProps.onMouseDown?.(e);
                 break;
             default:
                 break;
         }
-
-        const inputProps = this.getInputProps(boundary);
-        const callbackFn = this.getInputGroupCallbackForEvent(e, inputProps);
-
-        callbackFn?.(e);
     };
 
     // add a keydown listener to persistently change focus when tabbing:
@@ -812,29 +818,6 @@ export class DateRangeInput extends AbstractPureComponent2<IDateRangeInputProps,
         }) as DateRange;
     };
 
-    private getInputGroupCallbackForEvent: (
-        e: React.SyntheticEvent<HTMLInputElement>,
-        inputProps: HTMLInputProps & IInputGroupProps,
-    ) => ((event: InputEvent) => void) | undefined = (e, inputProps) => {
-        // use explicit switch cases to ensure callback function names remain grep-able in the codebase.
-        switch (e.type) {
-            case "blur":
-                return inputProps.onBlur;
-            case "change":
-                return inputProps.onChange;
-            case "click":
-                return inputProps.onClick;
-            case "focus":
-                return inputProps.onFocus;
-            case "keydown":
-                return inputProps.onKeyDown;
-            case "mousedown":
-                return inputProps.onMouseDown;
-            default:
-                return undefined;
-        }
-    };
-
     private getInputDisplayString = (boundary: Boundary) => {
         const { values } = this.getStateKeysAndValuesForBoundary(boundary);
         const { isInputFocused, inputString, selectedValue, hoverString } = values;

packages/datetime/src/tsconfig.json

@@ -1,6 +1,7 @@
 {
     "extends": "../../../config/tsconfig.base",
     "compilerOptions": {
-        "outDir": "../lib/esm"
+        "outDir": "../lib/esm",
+        "strictNullChecks": false
     }
 }

packages/datetime/test/dateRangeInputTests.tsx

@@ -2631,11 +2631,11 @@ describe("<DateRangeInput>", () => {
     });
 
     function getStartInput(root: WrappedComponentRoot): WrappedComponentInput {
-        return root.find(InputGroup).first().find("input");
+        return root.find(InputGroup).first().find("input") as WrappedComponentInput;
     }
 
     function getEndInput(root: WrappedComponentRoot): WrappedComponentInput {
-        return root.find(InputGroup).last().find("input");
+        return root.find(InputGroup).last().find("input") as WrappedComponentInput;
     }
 
     function getInputText(input: WrappedComponentInput) {

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

@@ -164,7 +164,7 @@ export class BlueprintDocs extends React.Component<IBlueprintDocsProps, { themeN
     // run non-React code on the newly rendered sections.
     private handleComponentUpdate = () => {
         // indeterminate checkbox styles must be applied via JavaScript.
-        Array.from(document.querySelectorAll(`.${Classes.CHECKBOX} input[indeterminate]`)).forEach(
+        Array.from(document.querySelectorAll<HTMLInputElement>(`.${Classes.CHECKBOX} input[indeterminate]`)).forEach(
             (el: HTMLInputElement) => (el.indeterminate = true),
         );
     };

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

@@ -59,7 +59,9 @@ export class BreadcrumbsExample extends React.PureComponent<IExampleProps, IBrea
         width: 50,
     };
 
-    private handleChangeCollapse = handleStringChange((collapseFrom: Boundary) => this.setState({ collapseFrom }));
+    private handleChangeCollapse = handleStringChange(collapseFrom =>
+        this.setState({ collapseFrom: collapseFrom as Boundary }),
+    );
 
     public render() {
         const options = (

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

@@ -53,7 +53,7 @@ export class ButtonsExample extends React.PureComponent<IExampleProps, IButtonsE
     private handleLoadingChange = handleBooleanChange(loading => this.setState({ loading }));
     private handleMinimalChange = handleBooleanChange(minimal => this.setState({ minimal }));
     private handleOutlinedChange = handleBooleanChange(outlined => this.setState({ outlined }));
-    private handleIntentChange = handleStringChange((intent: Intent) => this.setState({ intent }));
+    private handleIntentChange = handleStringChange(intent => this.setState({ intent: intent as Intent }));
 
     private wiggleTimeoutId: number;
 

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

@@ -17,7 +17,7 @@
 import * as React from "react";
 
 import { Callout, Code, H5, Intent, Switch } from "@blueprintjs/core";
-import { Example, handleBooleanChange, handleStringChange, IDocsExampleProps } from "@blueprintjs/docs-theme";
+import { Example, handleBooleanChange, handleValueChange, IDocsExampleProps } from "@blueprintjs/docs-theme";
 import { IconName } from "@blueprintjs/icons";
 import { IconSelect } from "./common/iconSelect";
 import { IntentSelect } from "./common/intentSelect";
@@ -32,7 +32,7 @@ export class CalloutExample extends React.PureComponent<IDocsExampleProps, ICall
     public state: ICalloutExampleState = { showHeader: true };
 
     private handleHeaderChange = handleBooleanChange((showHeader: boolean) => this.setState({ showHeader }));
-    private handleIntentChange = handleStringChange((intent: Intent) => this.setState({ intent }));
+    private handleIntentChange = handleValueChange((intent: Intent) => this.setState({ intent }));
 
     public render() {
         const { showHeader, ...calloutProps } = this.state;

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

@@ -28,7 +28,7 @@ import {
     RadioGroup,
     Slider,
 } from "@blueprintjs/core";
-import { Example, handleStringChange, IExampleProps } from "@blueprintjs/docs-theme";
+import { Example, handleValueChange, IExampleProps } from "@blueprintjs/docs-theme";
 
 export interface ICollapsibleListExampleState {
     collapseFrom?: Boundary;
@@ -46,7 +46,7 @@ export class CollapsibleListExample extends React.PureComponent<IExampleProps, I
         visibleItemCount: 3,
     };
 
-    private handleChangeCollapse = handleStringChange((collapseFrom: Boundary) => this.setState({ collapseFrom }));
+    private handleChangeCollapse = handleValueChange((collapseFrom: Boundary) => this.setState({ collapseFrom }));
 
     public render() {
         const options = (

packages/docs-app/src/examples/core-examples/common/iconSelect.tsx

@@ -26,7 +26,7 @@ export interface IIconSelectProps {
 
 const NONE = "(none)";
 type IconType = IconName | typeof NONE;
-const ICON_NAMES = Object.keys(IconNames).map<IconType>((name: keyof typeof IconNames) => IconNames[name]);
+const ICON_NAMES = Object.keys(IconNames).map<IconType>((name: string) => IconNames[name as keyof typeof IconNames]);
 ICON_NAMES.push(NONE);
 
 const TypedSelect = Select.ofType<IconType>();
@@ -58,11 +58,19 @@ export class IconSelect extends React.PureComponent<IIconSelectProps> {
         );
     }
 
-    private renderIconItem: ItemRenderer<IconName> = (icon, { handleClick, modifiers }) => {
+    private renderIconItem: ItemRenderer<IconName | typeof NONE> = (icon, { handleClick, modifiers }) => {
         if (!modifiers.matchesPredicate) {
             return null;
         }
-        return <MenuItem active={modifiers.active} icon={icon} key={icon} onClick={handleClick} text={icon} />;
+        return (
+            <MenuItem
+                active={modifiers.active}
+                icon={icon === NONE ? undefined : icon}
+                key={icon}
+                onClick={handleClick}
+                text={icon}
+            />
+        );
     };
 
     private filterIconName = (query: string, iconName: IconName | typeof NONE) => {

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

@@ -29,7 +29,13 @@ import {
     Position,
     Switch,
 } from "@blueprintjs/core";
-import { Example, handleBooleanChange, handleStringChange, IExampleProps } from "@blueprintjs/docs-theme";
+import {
+    Example,
+    handleBooleanChange,
+    handleStringChange,
+    handleValueChange,
+    IExampleProps,
+} from "@blueprintjs/docs-theme";
 import { IBlueprintExampleData } from "../../tags/types";
 
 export interface IDrawerExampleState {
@@ -61,7 +67,7 @@ export class DrawerExample extends React.PureComponent<IExampleProps<IBlueprintE
     private handleEnforceFocusChange = handleBooleanChange(enforceFocus => this.setState({ enforceFocus }));
     private handleEscapeKeyChange = handleBooleanChange(canEscapeKeyClose => this.setState({ canEscapeKeyClose }));
     private handleUsePortalChange = handleBooleanChange(usePortal => this.setState({ usePortal }));
-    private handlePositionChange = handleStringChange((position: Position) => this.setState({ position }));
+    private handlePositionChange = handleValueChange((position: Position) => this.setState({ position }));
     private handleOutsideClickChange = handleBooleanChange(val => this.setState({ canOutsideClickClose: val }));
     private handleSizeChange = handleStringChange(size => this.setState({ size }));
 

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

@@ -17,7 +17,7 @@
 import * as React from "react";
 
 import { Classes, EditableText, FormGroup, H1, H5, Intent, NumericInput, Switch } from "@blueprintjs/core";
-import { Example, handleBooleanChange, handleStringChange, IExampleProps } from "@blueprintjs/docs-theme";
+import { Example, handleBooleanChange, handleValueChange, IExampleProps } from "@blueprintjs/docs-theme";
 
 import { IntentSelect } from "./common/intentSelect";
 
@@ -40,7 +40,7 @@ export class EditableTextExample extends React.PureComponent<IExampleProps, IEdi
         selectAllOnFocus: false,
     };
 
-    private handleIntentChange = handleStringChange((intent: Intent) => this.setState({ intent }));
+    private handleIntentChange = handleValueChange((intent: Intent) => this.setState({ intent }));
     private toggleSelectAll = handleBooleanChange(selectAllOnFocus => this.setState({ selectAllOnFocus }));
     private toggleSwap = handleBooleanChange(confirmOnEnterKey => this.setState({ confirmOnEnterKey }));
     private toggleAlwaysRenderInput = handleBooleanChange(alwaysRenderInput => this.setState({ alwaysRenderInput }));

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

@@ -17,7 +17,7 @@
 import * as React from "react";
 
 import { FormGroup, H5, InputGroup, Intent, Switch } from "@blueprintjs/core";
-import { Example, handleBooleanChange, handleStringChange, IExampleProps } from "@blueprintjs/docs-theme";
+import { Example, handleBooleanChange, handleValueChange, IExampleProps } from "@blueprintjs/docs-theme";
 import { IntentSelect } from "./common/intentSelect";
 
 export interface IFormGroupExampleState {
@@ -44,7 +44,7 @@ export class FormGroupExample extends React.PureComponent<IExampleProps, IFormGr
     private handleInlineChange = handleBooleanChange(inline => this.setState({ inline }));
     private handleLabelChange = handleBooleanChange(label => this.setState({ label }));
     private handleRequiredLabelChange = handleBooleanChange(requiredLabel => this.setState({ requiredLabel }));
-    private handleIntentChange = handleStringChange((intent: Intent) => this.setState({ intent }));
+    private handleIntentChange = handleValueChange((intent: Intent) => this.setState({ intent }));
 
     public render() {
         const { disabled, helperText, inline, intent, label, requiredLabel } = this.state;

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

@@ -17,7 +17,7 @@
 import * as React from "react";
 
 import { H5, Icon, Intent, Label, Slider } from "@blueprintjs/core";
-import { Example, handleStringChange, IExampleProps } from "@blueprintjs/docs-theme";
+import { Example, handleValueChange, IExampleProps } from "@blueprintjs/docs-theme";
 import { IconName } from "@blueprintjs/icons";
 import { IconSelect } from "./common/iconSelect";
 import { IntentSelect } from "./common/intentSelect";
@@ -35,6 +35,10 @@ export class IconExample extends React.PureComponent<IExampleProps, IIconExample
         intent: Intent.NONE,
     };
 
+    private handleIntentChange = handleValueChange((intent: Intent) => this.setState({ intent }));
+    private handleIconSizeChange = (iconSize: number) => this.setState({ iconSize });
+    private handleIconNameChange = (icon: IconName) => this.setState({ icon });
+
     public render() {
         const { icon, iconSize, intent } = this.state;
 
@@ -61,11 +65,6 @@ export class IconExample extends React.PureComponent<IExampleProps, IIconExample
             </Example>
         );
     }
-
-    // eslint-disable-line @typescript-eslint/member-ordering
-    private handleIntentChange = handleStringChange((intent: Intent) => this.setState({ intent }));
-    private handleIconSizeChange = (iconSize: number) => this.setState({ iconSize });
-    private handleIconNameChange = (icon: IconName) => this.setState({ icon });
 }
 
 const MAX_ICON_SIZE = 100;

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

@@ -17,7 +17,7 @@
 import * as React from "react";
 
 import { H5, HandleInteractionKind, Intent, MultiSlider, Radio, RadioGroup, Switch } from "@blueprintjs/core";
-import { Example, handleBooleanChange, handleStringChange, IExampleProps } from "@blueprintjs/docs-theme";
+import { Example, handleBooleanChange, handleValueChange, IExampleProps } from "@blueprintjs/docs-theme";
 
 interface ISliderValues {
     dangerStart: number;
@@ -54,10 +54,10 @@ export class MultiSliderExample extends React.PureComponent<IExampleProps, IMult
 
     private toggleTrackFill = handleBooleanChange(showTrackFill => this.setState({ showTrackFill }));
     private toggleVertical = handleBooleanChange(vertical => this.setState({ vertical }));
-    private handleInteractionKindChange = handleStringChange((interactionKind: HandleInteractionKind) =>
+    private handleInteractionKindChange = handleValueChange((interactionKind: HandleInteractionKind) =>
         this.setState({ interactionKind }),
     );
-    private handleShownIntentsChange = handleStringChange((shownIntents: ShownIntents) =>
+    private handleShownIntentsChange = handleValueChange((shownIntents: ShownIntents) =>
         this.setState({ shownIntents }),
     );
 
@@ -139,7 +139,7 @@ export class MultiSliderExample extends React.PureComponent<IExampleProps, IMult
     private handleChange = (rawValues: number[]) => {
         // newValues is always in sorted order, and handled cannot be unsorted by dragging with lock/push interactions.
         const newValuesMap = { ...this.state.values, ...this.getUpdatedHandles(rawValues) };
-        const newValues = Object.keys(newValuesMap).map((key: keyof ISliderValues) => newValuesMap[key]);
+        const newValues = Object.keys(newValuesMap).map((key: string) => newValuesMap[key as keyof ISliderValues]);
         newValues.sort((a, b) => a - b);
         const [dangerStart, warningStart, warningEnd, dangerEnd] = newValues;
         this.setState({ values: { dangerStart, warningStart, warningEnd, dangerEnd } });