various FlowGrid bugfixes; update some deps

package.json

@@ -40,8 +40,8 @@
     "@types/draft-js": "^0.11.10",
     "@types/jest": "^29.2.4",
     "@types/lodash": "^4.14.191",
-    "@types/react": "18.0.26",
-    "@types/react-dom": "^18.0.9",
+    "@types/react": "^18.2.58",
+    "@types/react-dom": "^18.2.19",
     "@types/react-modal": "^3.13.1",
     "@typescript-eslint/eslint-plugin": "^5.48.0",
     "@typescript-eslint/parser": "^5.48.0",
@@ -56,7 +56,7 @@
     "prettier": "^2.8.1",
     "prettier-plugin-tailwindcss": "^0.2.3",
     "ts-jest": "^29.0.3",
-    "typescript": "4.9.4"
+    "typescript": "5.3.3"
   },
   "dependencies": {
     "@floating-ui/react": "^0.18.0",

src/components/layouts/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, PropsWithChildren } from "react";
+import { FC, PropsWithChildren } from "react";
 
 import clsx from "clsx";
 import { NavHelper } from "~/components/utility/NavHelper/index";

src/components/lib/FlowGrid/BackgroundContainer.tsx

@@ -1,11 +1,11 @@
-import React, { useContext, useLayoutEffect, useState } from "react";
+import React, { FC, memo, useContext, useLayoutEffect, useState } from "react";
 
-import { Edges, EdgeShape } from "./Edges";
-import { GridPoint } from "./gridPoints";
-
-import { isRegion, MaybeRegion, Region } from "~/lib/locationUtils";
 import clsx from "clsx";
+import { isRegion, MaybeRegion, Region } from "~/lib/locationUtils";
+
+import { Edges, EdgeShape } from "./Edges";
 import { cellSizeInfo, FlowGridContext } from "./FlowGrid";
+import { GridPoint } from "./gridPoints";
 
 type RegionType = "selected" | "analyzed" | "copied" | "fill";
 
@@ -18,7 +18,7 @@ const regionTypeToClass = {
     "bg-gradient-to-br from-[rgb(72,187,90)]/[0.66] to-[rgb(120,203,149)]/[0.65]",
 };
 
-const Region: React.FC<{
+const Region: FC<{
   rowHeights: number[];
   columnWidth: number;
   selectedRegion: Region;
@@ -41,7 +41,7 @@ type Props = {
   getRowHeight(row: number): number;
 };
 
-export const BackgroundContainer: React.FC<Props> = React.memo(
+export const BackgroundContainer: FC<Props> = memo(
   function BackgroundContainer({
     rowCount,
     getRowHeight,
@@ -75,11 +75,11 @@ export const BackgroundContainer: React.FC<Props> = React.memo(
       if (isRegion(locations)) {
         return (
           <Region
+            key={type}
             rowHeights={rowHeights}
             columnWidth={columnWidth}
             selectedRegion={locations}
             type={type}
-            key={type}
           />
         );
       } else {

src/components/lib/FlowGrid/DropCell.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useRef } from "react";
+import React, { FC, useContext, useEffect, useRef } from "react";
 
 import clsx from "clsx";
 import { useDrop } from "react-dnd";
@@ -36,30 +36,10 @@ type Props = {
   getRowHeight(): number;
 };
 
-// shouldComponentUpdate(newProps: Props) {
-//   const difProps =
-//     newProps.isOver !== this.props.isOver ||
-//     newProps.inSelectedRegion !== this.props.inSelectedRegion ||
-//     newProps.inSelectedCell !== this.props.inSelectedCell ||
-//     newProps.isHovered !== this.props.isHovered ||
-//     newProps.showAutoFillToken !== this.props.showAutoFillToken;
-//   const itemDifferent = !!newProps.item !== !!this.props.item;
-
-//   return (
-//     difProps ||
-//     itemDifferent ||
-//     (!!newProps.item &&
-//       !!this.props.item &&
-//       this.props.hasItemUpdated(this.props.item, newProps.item))
-//   );
-// }
-
-export const DropCell: React.FC<Props> = (props) => {
+export const DropCell: FC<Props> = (props) => {
   const itemRef = useRef<{ focus(): void }>(null);
 
-  const { size } = useContext(FlowGridContext);
-
-  const { showGridLines } = useContext(FlowGridContext);
+  const { size, showGridLines } = useContext(FlowGridContext);
 
   const [{ isOver }, connectDropTarget] = useDrop({
     accept: "card",
@@ -73,20 +53,13 @@ export const DropCell: React.FC<Props> = (props) => {
     },
   });
 
-  useEffect(() => {
-    if (props.inSelectedCell) {
-      itemRef.current?.focus();
-    }
-  }, []);
-
+  // Self-focus on render; TODO - is there a better solution?
   useEffect(() => {
     if (props.inSelectedCell) {
       itemRef.current?.focus();
     }
   }, [props.inSelectedCell]);
 
-  const { inSelectedRegion, item, isHovered } = props;
-
   const handleAutoFillTargetMouseDown = (e: React.MouseEvent) => {
     if (e.button === 0) {
       props.onAutoFillTargetMouseDown();
@@ -101,8 +74,8 @@ export const DropCell: React.FC<Props> = (props) => {
     const isFunctionSelect =
       props.canvasState.metricClickMode === "FUNCTION_INPUT_SELECT";
     const { inSelectedCell, item, location } = props;
-    const leftClick = e.button === 0;
 
+    const leftClick = e.button === 0;
     if (!leftClick) {
       return;
     }
@@ -116,9 +89,7 @@ export const DropCell: React.FC<Props> = (props) => {
         props.onAddItem(location);
       }
       props.handleSelect(location);
-    }
-
-    if (!inSelectedCell) {
+    } else {
       if (e.shiftKey) {
         props.handleEndRangeSelect(props.location);
         return;
@@ -130,11 +101,11 @@ export const DropCell: React.FC<Props> = (props) => {
     }
   };
 
-  const cellElement = item ? (
+  const cellElement = props.item ? (
     // Then endDrag fixes a bug where the original dragging position is hovered.
     <FilledCell
       {...props}
-      item={item} // typescript fix
+      item={props.item} // typescript fix
       onEndDrag={props.onEndDragCell}
       forceFlowGridUpdate={props.forceFlowGridUpdate}
       focusCell={() => itemRef.current?.focus()}
@@ -144,18 +115,16 @@ export const DropCell: React.FC<Props> = (props) => {
     <EmptyCell {...props} ref={itemRef} isOver={isOver} />
   );
 
-  const className = clsx(
-    "group/gridcell",
-    "flex-none min-h-[60px] relative grid place-items-stretch",
-    showGridLines &&
-      "border-r border-b border-[rgb(0,25,95)]/[0.09] border-dashed",
-    cellSizeInfo[size].classNames
-  );
-
   return (
     <div
       ref={connectDropTarget}
-      className={className}
+      className={clsx(
+        "group/gridcell",
+        "relative grid min-h-[60px] flex-none place-items-stretch",
+        showGridLines &&
+          "border-r border-b border-dashed border-[rgb(0,25,95)]/[0.09]",
+        cellSizeInfo[size].classNames
+      )}
       onMouseEnter={props.onMouseEnter}
       onMouseDown={handleMouseDown}
       onMouseUp={props.onMouseUp}

src/components/lib/FlowGrid/Edge.tsx

@@ -1,7 +1,7 @@
-import _ from "lodash";
-import React from "react";
+import React, { FC, memo } from "react";
 
 import angleBetweenPoints from "angle-between-points";
+import _ from "lodash";
 
 import { edgeColors, PathStatus } from "./Edges";
 import { RectangleShape } from "./gridPoints";
@@ -111,7 +111,7 @@ type Props = {
   pathStatus: PathStatus;
 };
 
-export const Edge: React.FC<Props> = React.memo(
+export const Edge: FC<Props> = memo(
   ({ output, input, hasErrors, pathStatus }) => {
     if (!isValidNode(input) || !isValidNode(output)) {
       return null;

src/components/lib/FlowGrid/Edges.tsx

@@ -1,7 +1,8 @@
-import _ from "lodash";
-import React from "react";
+import React, { FC, memo } from "react";
 
+import _ from "lodash";
 import { CanvasLocation } from "~/lib/locationUtils";
+
 import { Edge } from "./Edge";
 import { GridPoint } from "./gridPoints";
 
@@ -52,7 +53,7 @@ const areEqual = (props: Props, nextProps: Props) => {
   );
 };
 
-export const Edges: React.FC<Props> = React.memo(
+export const Edges: FC<Props> = memo(
   ({ columnWidth, containerHeight, rowHeights, edges }) => {
     const gridPoint = new GridPoint({
       rowHeights,

src/components/lib/FlowGrid/EmptyCell.tsx

@@ -1,6 +1,14 @@
+import React, {
+  forwardRef,
+  memo,
+  useContext,
+  useImperativeHandle,
+  useRef,
+} from "react";
+
 import clsx from "clsx";
-import React, { useImperativeHandle, useRef } from "react";
 import { CanvasLocation } from "~/lib/locationUtils";
+
 import { FlowGridContext } from "./FlowGrid";
 
 type Props = {
@@ -12,9 +20,9 @@ type Props = {
   isHovered: boolean;
 };
 
-export const EmptyCell = React.memo(
-  React.forwardRef<{ focus(): void }, Props>(function EmptyCell(props, ref) {
-    const { isModelingCanvas } = React.useContext(FlowGridContext);
+export const EmptyCell = memo(
+  forwardRef<{ focus(): void }, Props>(function EmptyCell(props, ref) {
+    const { isModelingCanvas } = useContext(FlowGridContext);
     const divRef = useRef<HTMLDivElement | null>(null);
 
     useImperativeHandle(ref, () => ({
@@ -47,11 +55,5 @@ export const EmptyCell = React.memo(
         ref={divRef}
       />
     );
-  }),
-  (prevProps, props) => {
-    return (
-      prevProps.isOver === props.isOver &&
-      prevProps.isHovered === props.isHovered
-    ); // TODO - is this safe?
-  }
+  })
 );

src/components/lib/FlowGrid/FilledCell.tsx

@@ -1,19 +1,19 @@
 import React, {
   CSSProperties,
+  forwardRef,
   useContext,
   useEffect,
   useImperativeHandle,
   useRef,
 } from "react";
 
+import clsx from "clsx";
 import { ConnectDragSource, useDrag, useDragLayer, XYCoord } from "react-dnd";
-
+import { getEmptyImage } from "react-dnd-html5-backend";
 import { CanvasLocation, Direction } from "~/lib/locationUtils";
 
-import clsx from "clsx";
-import { getEmptyImage } from "react-dnd-html5-backend";
-import { GridItem } from "./types";
 import { FlowGridContext } from "./FlowGrid";
+import { GridItem } from "./types";
 
 export type GridContext = {
   hovered: boolean;
@@ -96,7 +96,7 @@ type Props = {
   focusCell(): void;
 };
 
-export const FilledCell = React.forwardRef<{ focus(): void }, Props>(
+export const FilledCell = forwardRef<{ focus(): void }, Props>(
   function FilledCell(props, ref) {
     const { isModelingCanvas } = useContext(FlowGridContext);