Bump BlueprintJS to v5

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/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/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={{