Bump BlueprintJS to v5

devserver/src/components/Playground.tsx

@@ -1,25 +1,23 @@
-import { Classes, Intent, OverlayToaster, type ToastProps, type Toaster } from "@blueprintjs/core";
+import { Classes, Intent, OverlayToaster, type ToastProps } from "@blueprintjs/core";
 import classNames from "classnames";
+import { SourceDocumentation, getNames, runInContext, type Context } from "js-slang";
 import { Chapter, Variant } from "js-slang/dist/types";
 import { stringify } from "js-slang/dist/utils/stringify";
 import React, { useCallback } from "react";
 import { HotKeys } from "react-hotkeys";
-
+import mockModuleContext from "../mockModuleContext";
+import type { InterpreterOutput } from "../types";
 import Workspace, { type WorkspaceProps } from "./Workspace";
+import { ControlBarClearButton } from "./controlBar/ControlBarClearButton";
+import { ControlBarRefreshButton } from "./controlBar/ControlBarRefreshButton";
 import { ControlBarRunButton } from "./controlBar/ControlBarRunButton";
-import { type Context, runInContext, getNames, SourceDocumentation } from "js-slang";
+import testTabContent from "./sideContent/TestTab";
+import type { SideContentTab } from "./sideContent/types";
+import { getDynamicTabs } from "./sideContent/utils";
 
 // Importing this straight from js-slang doesn't work for whatever reason
 import createContext from "js-slang/dist/createContext";
 
-import { getDynamicTabs } from "./sideContent/utils";
-import type { SideContentTab } from "./sideContent/types";
-import testTabContent from "./sideContent/TestTab";
-import { ControlBarClearButton } from "./controlBar/ControlBarClearButton";
-import { ControlBarRefreshButton } from "./controlBar/ControlBarRefreshButton";
-import type { InterpreterOutput } from "../types";
-import mockModuleContext from "../mockModuleContext";
-
 const refreshSuccessToast: ToastProps = {
 	intent: Intent.SUCCESS,
 	message: "Refresh Successful!"
@@ -48,7 +46,7 @@
 	const [replOutput, setReplOutput] = React.useState<InterpreterOutput | null>(null);
 	const [alerts, setAlerts] = React.useState<string[]>([]);
 
-	const toaster = React.useRef<Toaster | null>(null);
+	const toaster = React.useRef<OverlayToaster>(null);
 
 	const showToast = (props: ToastProps) => {
 		if (toaster.current) {
@@ -124,7 +122,7 @@
 						.then(() => showToast(evalSuccessToast));
 				}
 
 				// TODO: Add support for console.log?
 				if (result.status === "finished") {
 					setReplOutput({
 						type: "result",

devserver/src/components/controlBar/ControlBarClearButton.tsx

@@ -1,15 +1,15 @@
-import { Tooltip2 } from "@blueprintjs/popover2";
+import { Tooltip } from "@blueprintjs/core";
 import ControlButton from "../ControlButton";
 import { IconNames } from "@blueprintjs/icons";
 
 type Props = {
   onClick: () => void
 }
 
-export const ControlBarClearButton = (props: Props) => <Tooltip2 content="Clear the editor and context">
+export const ControlBarClearButton = (props: Props) => <Tooltip content="Clear the editor and context">
 	<ControlButton
 		label="Clear"
 		icon={IconNames.Trash}
 		onClick={props.onClick}
 	/>
-</Tooltip2>;
+</Tooltip>;

devserver/src/components/controlBar/ControlBarRefreshButton.tsx

@@ -1,15 +1,15 @@
-import { Tooltip2 } from "@blueprintjs/popover2";
+import { Tooltip } from "@blueprintjs/core";
 import ControlButton from "../ControlButton";
 import { IconNames } from "@blueprintjs/icons";
 
 type Props = {
   onClick: () => void
 }
 
-export const ControlBarRefreshButton = (props: Props) => <Tooltip2 content="Manually refresh the side content">
+export const ControlBarRefreshButton = (props: Props) => <Tooltip content="Manually refresh the side content">
 	<ControlButton
 		onClick={props.onClick}
 		icon={IconNames.Refresh}
 		label="Refresh"
 	/>
-</Tooltip2>;
+</Tooltip>;

devserver/src/components/controlBar/ControlBarRunButton.tsx

@@ -1,6 +1,5 @@
-import { Position } from "@blueprintjs/core";
+import { Position, Tooltip } from "@blueprintjs/core";
 import { IconNames } from "@blueprintjs/icons";
-import { Tooltip2 } from "@blueprintjs/popover2";
 import React from "react";
 
 import ControlButton from "../ControlButton";
@@ -20,7 +19,7 @@ type ControlButtonRunButtonProps = DispatchProps & StateProps;
 export const ControlBarRunButton: React.FC<ControlButtonRunButtonProps> = (props) => {
 	const tooltipContent = "Evaluate the program";
 	return (
-		<Tooltip2 content={tooltipContent} placement={Position.TOP}>
+		<Tooltip content={tooltipContent} placement={Position.TOP}>
 			<ControlButton
 				label="Run"
 				icon={IconNames.PLAY}
@@ -30,6 +29,6 @@ export const ControlBarRunButton: React.FC<ControlButtonRunButtonProps> = (props
 					className: props.className
 				}}
 			/>
-		</Tooltip2>
+		</Tooltip>
 	);
 };

devserver/src/components/sideContent/SideContent.tsx

@@ -1,5 +1,4 @@
-import { Card, Icon, Tab, type TabProps, Tabs } from "@blueprintjs/core";
-import { Tooltip2 } from "@blueprintjs/popover2";
+import { Card, Icon, Tab, type TabProps, Tabs, Tooltip } from "@blueprintjs/core";
 import React from "react";
 import type { SideContentTab } from "./types";
 
@@ -37,11 +36,11 @@ const renderTab = (
 ) => {
 	const iconSize = 20;
 	const tabTitle = (
-		<Tooltip2 content={tab.label}>
+		<Tooltip content={tab.label}>
 			<div className={!shouldAlert ? "side-content-tooltip" : "side-content-tooltip side-content-tab-alert"}>
 				<Icon icon={tab.iconName} iconSize={iconSize} />
 			</div>
-		</Tooltip2>
+		</Tooltip>
 	);
 	const tabProps: TabProps = {
 		id: tab.id,

devserver/src/styles/index.scss

@@ -1,7 +1,6 @@
 @use 'sass:math';
 
 @import '@blueprintjs/core/lib/css/blueprint.css';
-@import '@blueprintjs/popover2/lib/css/blueprint-popover2.css';
 @import '@blueprintjs/core/lib/scss/variables';
 
 // CSS styles for react-mde Markdown editor

package.json

@@ -96,9 +96,8 @@
     "yarnhook": "^0.5.1"
   },
   "dependencies": {
-    "@blueprintjs/core": "^4.20.2",
-    "@blueprintjs/icons": "^4.4.0",
-    "@blueprintjs/popover2": "^1.4.3",
+    "@blueprintjs/core": "^5.9.1",
+    "@blueprintjs/icons": "^5.7.1",
     "@box2d/core": "^0.10.0",
     "@box2d/debug-draw": "^0.10.0",
     "@jscad/modeling": "2.9.6",

scripts/src/build/modules/tab.ts

@@ -96,7 +96,8 @@ export const getTabOptions = (tabs: string[], { srcDir, outDir }: Record<'srcDir
       'react-ace',
       'react-dom',
       'react/jsx-runtime',
-      '@blueprintjs/*',
+      '@blueprintjs/core',
+      '@blueprintjs/icons',
       // 'phaser',
     ],
     jsx: 'automatic',

src/tabs/Csg/hover_control_hint.tsx

@@ -1,6 +1,5 @@
 /* [Imports] */
-import { Icon } from '@blueprintjs/core';
-import { Tooltip2 } from '@blueprintjs/popover2';
+import { Icon, Tooltip } from '@blueprintjs/core';
 import React from 'react';
 import { BP_ICON_COLOR, SA_TAB_BUTTON_WIDTH, SA_TAB_ICON_SIZE } from '../common/css_constants';
 import type { HintProps } from './types';
@@ -18,7 +17,7 @@ export default class HoverControlHint extends React.Component<HintProps> {
         height: SA_TAB_BUTTON_WIDTH,
       }}
     >
-      <Tooltip2
+      <Tooltip
         content={this.props.tooltipText}
         placement="left"
       >
@@ -27,7 +26,7 @@ export default class HoverControlHint extends React.Component<HintProps> {
           size={SA_TAB_ICON_SIZE}
           color={BP_ICON_COLOR}
         />
-      </Tooltip2>
+      </Tooltip>
     </div>;
   }
 }

src/tabs/Curve/animation_canvas_3d_curve.tsx

@@ -1,6 +1,5 @@
-import { Icon, Slider } from '@blueprintjs/core';
+import { Icon, Slider, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React from 'react';
 import { type AnimatedCurve } from '../../bundles/curve/types';
 import AutoLoopSwitch from '../common/AutoLoopSwitch';
@@ -292,7 +291,7 @@ State
             disabled={Boolean(this.state.errored)}
             onClick={ this.onPlayButtonClick }
           />
-          <Tooltip2
+          <Tooltip
             content="Reset"
             placement="top"
           >
@@ -302,7 +301,7 @@ State
             >
               <Icon icon={ IconNames.RESET } />
             </ButtonComponent>
-          </Tooltip2>
+          </Tooltip>
           <div
             style={{
               display: 'flex',
@@ -324,7 +323,7 @@ State
               onChange={ this.onTimeSliderChange }
               onRelease={ this.onTimeSliderRelease }
             />
-            <Tooltip2
+            <Tooltip
               content="Display Angle"
               placement="top"
             >
@@ -339,7 +338,7 @@ State
 
                 onChange={ this.onAngleSliderChange }
               />
-            </Tooltip2>
+            </Tooltip>
           </div>
           <AutoLoopSwitch
             isAutoLooping={ this.state.isAutoLooping }

src/tabs/UnityAcademy/index.tsx

@@ -131,13 +131,11 @@ class Unity3DTab extends React.Component<Props> {
         <br/>
         {getInstance()
           .getUserAgreementStatus() === 'new_user_agreement' && <div><b>The User Agreement has updated.</b><br/></div>}
-        <Checkbox label = "I agree to the User Agreement" ref = {(e) => {
+        <Checkbox label = "I agree to the User Agreement" inputRef = {(e) => {
           if (e !== null) {
-            if (e.input !== null) {
-              e.input.checked = (getInstance()
-                .getUserAgreementStatus() === 'agreed');
-              this.userAgreementCheckboxChecked = e.input.checked;
-            }
+            e.checked = (getInstance()
+              .getUserAgreementStatus() === 'agreed');
+            this.userAgreementCheckboxChecked = e.checked;
           }
         }} onChange = {(event : React.ChangeEvent<HTMLInputElement>) => {
           this.userAgreementCheckboxChecked = event.target.checked;

src/tabs/common/AnimationCanvas.tsx

@@ -1,6 +1,5 @@
-import { Icon, Slider } from '@blueprintjs/core';
+import { Icon, Slider, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React from 'react';
 import { type glAnimation } from '../../typings/anim_types';
 import AutoLoopSwitch from './AutoLoopSwitch';
@@ -269,7 +268,7 @@ AnimCanvasState
             disabled={Boolean(this.state.errored)}
             onClick={this.onPlayButtonClick}
           />
-          <Tooltip2
+          <Tooltip
             content="Reset"
             placement="top"
           >
@@ -279,7 +278,7 @@ AnimCanvasState
             >
               <Icon icon={ IconNames.RESET } />
             </ButtonComponent>
-          </Tooltip2>
+          </Tooltip>
           <Slider
             value={ this.state.animTimestamp }
             min={ 0 }

src/tabs/common/ButtonComponent.tsx

@@ -1,4 +1,30 @@
-import { AnchorButton, Button, type ButtonProps } from '@blueprintjs/core';
+import { AnchorButton, Button, Intent } from '@blueprintjs/core';
 
-const ButtonComponent = (props: Omit<ButtonProps, 'elementRef'>) => (props.disabled ? <AnchorButton {...props} /> : <Button {...props} />);
+const defaultOptions = {
+  className: '',
+  fullWidth: false,
+  iconOnRight: false,
+  intent: Intent.NONE,
+  minimal: true,
+};
+
+type Props = {
+  onClick?: React.MouseEventHandler<HTMLElement>,
+  disabled?: boolean,
+  children?: React.ReactNode,
+};
+
+const ButtonComponent = (props: Props) => {
+  const buttonProps = {
+    ...defaultOptions,
+    ...props,
+  };
+  return props.disabled
+    ? (
+      <AnchorButton {...buttonProps} />
+    )
+    : (
+      <Button {...buttonProps} />
+    );
+};
 export default ButtonComponent;

src/tabs/common/PlayButton.tsx

@@ -1,6 +1,5 @@
 /* [Imports] */
-import { Icon, type ButtonProps } from '@blueprintjs/core';
-import { Tooltip2 } from '@blueprintjs/popover2';
+import { Icon, type ButtonProps, Tooltip } from '@blueprintjs/core';
 import React from 'react';
 import { IconNames } from '@blueprintjs/icons';
 import ButtonComponent from './ButtonComponent';
@@ -14,7 +13,7 @@ export type PlayButtonProps = {
 /* [Main] */
 export default class PlayButton extends React.Component<PlayButtonProps> {
   render() {
-    return <Tooltip2
+    return <Tooltip
       content={ this.props.isPlaying ? 'Pause' : 'Play' }
       placement="top"
     >
@@ -23,6 +22,6 @@ export default class PlayButton extends React.Component<PlayButtonProps> {
           icon={ this.props.isPlaying ? IconNames.PAUSE : IconNames.PLAY }
         />
       </ButtonComponent>
-    </Tooltip2>;
+    </Tooltip>;
   }
 }

src/tabs/physics_2d/DebugDrawCanvas.tsx

@@ -2,9 +2,8 @@
 // We have to disable linting rules since Box2D functions do not
 // follow the same guidelines as the rest of the codebase.
 
-import { Button, Icon, Slider } from '@blueprintjs/core';
+import { Button, Icon, Slider, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { Tooltip2 } from '@blueprintjs/popover2';
 import React from 'react';
 import { DebugDraw } from '@box2d/debug-draw';
 import { DrawShapes, type b2World } from '@box2d/core';
@@ -209,13 +208,13 @@ DebugDrawCanvasState
             marginRight: '20px',
           }}
         >
-          <Tooltip2 content={this.state.isPlaying ? 'Pause' : 'Play'}>
+          <Tooltip content={this.state.isPlaying ? 'Pause' : 'Play'}>
             <Button onClick={this.onPlayButtonClick}>
               <Icon
                 icon={this.state.isPlaying ? IconNames.PAUSE : IconNames.PLAY}
               />
             </Button>
-          </Tooltip2>
+          </Tooltip>
         </div>
         <div
           style={{