From 300805a25a7a197e3b5ee02de9a71aae7a5a958f Mon Sep 17 00:00:00 2001
From: psychedelicious <4822129+psychedelicious@users.noreply.github.com>
Date: Fri, 29 Dec 2023 14:30:06 +1100
Subject: [PATCH] fix(ui): fix typing issues

---
 .../common/components/InvContextMenu/InvContextMenu.tsx  | 9 ++++++---
 .../web/src/common/components/InvMenu/InvMenuItem.tsx    | 2 +-
 .../common/components/InvRangeSlider/InvRangeSlider.tsx  | 3 ++-
 invokeai/frontend/web/src/common/util/typedMemo.ts       | 6 ++++++
 .../features/queue/components/QueueControls.stories.tsx  | 2 +-
 5 files changed, 16 insertions(+), 6 deletions(-)
 create mode 100644 invokeai/frontend/web/src/common/util/typedMemo.ts

diff --git a/invokeai/frontend/web/src/common/components/InvContextMenu/InvContextMenu.tsx b/invokeai/frontend/web/src/common/components/InvContextMenu/InvContextMenu.tsx
index 20025b0b56..43d51f49fc 100644
--- a/invokeai/frontend/web/src/common/components/InvContextMenu/InvContextMenu.tsx
+++ b/invokeai/frontend/web/src/common/components/InvContextMenu/InvContextMenu.tsx
@@ -16,7 +16,8 @@ import type { MenuButtonProps, MenuProps, PortalProps } from '@chakra-ui/react';
 import { Portal, useEventListener } from '@chakra-ui/react';
 import { InvMenu, InvMenuButton } from 'common/components/InvMenu/wrapper';
 import { useGlobalMenuCloseTrigger } from 'common/hooks/useGlobalMenuCloseTrigger';
-import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { typedMemo } from 'common/util/typedMemo';
+import { useCallback, useEffect, useRef, useState } from 'react';
 
 export interface InvContextMenuProps<T extends HTMLElement = HTMLDivElement> {
   renderMenu: () => JSX.Element | null;
@@ -26,7 +27,7 @@ export interface InvContextMenuProps<T extends HTMLElement = HTMLDivElement> {
   menuButtonProps?: MenuButtonProps;
 }
 
-export const InvContextMenu = memo(
+export const InvContextMenu = typedMemo(
   <T extends HTMLElement = HTMLElement>(props: InvContextMenuProps<T>) => {
     const [isOpen, setIsOpen] = useState(false);
     const [isRendered, setIsRendered] = useState(false);
@@ -113,4 +114,6 @@ export const InvContextMenu = memo(
   }
 );
 
-InvContextMenu.displayName = 'InvContextMenu';
+Object.assign(InvContextMenu, {
+  displayName: 'InvContextMenu',
+});
diff --git a/invokeai/frontend/web/src/common/components/InvMenu/InvMenuItem.tsx b/invokeai/frontend/web/src/common/components/InvMenu/InvMenuItem.tsx
index fee0950e08..87715e191c 100644
--- a/invokeai/frontend/web/src/common/components/InvMenu/InvMenuItem.tsx
+++ b/invokeai/frontend/web/src/common/components/InvMenu/InvMenuItem.tsx
@@ -4,7 +4,7 @@ import {
   keyframes,
   MenuItem as ChakraMenuItem,
 } from '@chakra-ui/react';
-import {memo} from'react'
+import { memo } from 'react';
 
 import type { InvMenuItemProps } from './types';
 
diff --git a/invokeai/frontend/web/src/common/components/InvRangeSlider/InvRangeSlider.tsx b/invokeai/frontend/web/src/common/components/InvRangeSlider/InvRangeSlider.tsx
index 102557e797..d14d1e0b9b 100644
--- a/invokeai/frontend/web/src/common/components/InvRangeSlider/InvRangeSlider.tsx
+++ b/invokeai/frontend/web/src/common/components/InvRangeSlider/InvRangeSlider.tsx
@@ -1,4 +1,5 @@
 import {
+  forwardRef,
   RangeSlider as ChakraRangeSlider,
   RangeSliderFilledTrack as ChakraRangeSliderFilledTrack,
   RangeSliderThumb as ChakraRangeSliderThumb,
@@ -16,7 +17,7 @@ import { InvRangeSliderMark } from './InvRangeSliderMark';
 import type { InvRangeSliderProps } from './types';
 
 export const InvRangeSlider = memo(
-  forwardRef<InvRangeSliderProps, ChakraRangeSlider>(
+  forwardRef<InvRangeSliderProps, typeof ChakraRangeSlider>(
     (props: InvRangeSliderProps, ref) => {
       const {
         value,
diff --git a/invokeai/frontend/web/src/common/util/typedMemo.ts b/invokeai/frontend/web/src/common/util/typedMemo.ts
new file mode 100644
index 0000000000..321833cdba
--- /dev/null
+++ b/invokeai/frontend/web/src/common/util/typedMemo.ts
@@ -0,0 +1,6 @@
+import { memo } from 'react';
+
+/**
+ * A typed version of React.memo, useful for components that take generics.
+ */
+export const typedMemo: <T>(c: T) => T = memo;
diff --git a/invokeai/frontend/web/src/features/queue/components/QueueControls.stories.tsx b/invokeai/frontend/web/src/features/queue/components/QueueControls.stories.tsx
index cf6d2974ea..38efa28b92 100644
--- a/invokeai/frontend/web/src/features/queue/components/QueueControls.stories.tsx
+++ b/invokeai/frontend/web/src/features/queue/components/QueueControls.stories.tsx
@@ -12,5 +12,5 @@ export default meta;
 type Story = StoryObj<typeof QueueControls>;
 
 export const Default: Story = {
-  render: QueueControls,
+  render: () => <QueueControls />,
 };