From 1155c738e97d402c4bb9ed713e057221575d18da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Morten=20N=2EO=2E=20N=C3=B8rgaard=20Henriksen?=
 <1136718+raix@users.noreply.github.com>
Date: Wed, 17 Jul 2024 09:11:19 +0200
Subject: [PATCH] Fix type issue in React 19

---
 ui/components/Accordion.tsx |  4 ++--
 ui/components/Toast.tsx     | 12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/ui/components/Accordion.tsx b/ui/components/Accordion.tsx
index 518472a..631fed6 100644
--- a/ui/components/Accordion.tsx
+++ b/ui/components/Accordion.tsx
@@ -30,7 +30,7 @@ type AccordionProps<T> = {
 
 export function Accordion<T extends object>({ className, ...props }: AccordionProps<T>) {
   const state = useTreeState<T>(props);
-  const ref = useRef<HTMLDivElement>(null);
+  const ref = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>; // Note(raix): Remove when fixed in react-aria
   const { accordionProps } = useAccordion<T>(props, state, ref);
 
   return (
@@ -55,7 +55,7 @@ type AccordionItemInstanceProps<T> = {
 } & AccordionItemAriaProps<T>;
 
 function AccordionItemInstance<T>({ state, ...props }: AccordionItemInstanceProps<T>) {
-  const ref = useRef<HTMLButtonElement>(null);
+  const ref = useRef<HTMLButtonElement>(null) as React.RefObject<HTMLButtonElement>; // Note(raix): Remove when fixed in react-aria
   const { item } = props;
   const { buttonProps, regionProps } = useAccordionItem<T>(props, state, ref);
   const isOpen = state.expandedKeys.has(item.key);
diff --git a/ui/components/Toast.tsx b/ui/components/Toast.tsx
index 1433919..79aca47 100644
--- a/ui/components/Toast.tsx
+++ b/ui/components/Toast.tsx
@@ -7,7 +7,7 @@ import type { AriaToastProps, AriaToastRegionProps } from "@react-aria/toast";
 import { useToast, useToastRegion } from "@react-aria/toast";
 import { ToastQueue, type ToastState, useToastQueue } from "@react-stately/toast";
 import { XIcon } from "lucide-react";
-import { createContext, isValidElement, useContext, useRef } from "react";
+import { type RefObject, createContext, isValidElement, useContext, useRef } from "react";
 import { Button as AriaButton } from "react-aria-components";
 import { createPortal } from "react-dom";
 import { tv } from "tailwind-variants";
@@ -43,8 +43,8 @@ interface ToastRegionProps<T> extends AriaToastRegionProps {
   state: ToastState<T>;
 }
 
-function ToastRegion<T extends ToastContents>({ state, ...props }: ToastRegionProps<T>) {
-  const ref = useRef(null);
+function ToastRegion<T extends ToastContents>({ state, ...props }: Readonly<ToastRegionProps<T>>) {
+  const ref = useRef<HTMLDivElement>(null) as RefObject<HTMLDivElement>; // Note(raix): Remove when fixed in react-aria
   const { regionProps } = useToastRegion(props, state, ref);
 
   return (
@@ -88,8 +88,8 @@ interface ToastProps<T> extends AriaToastProps<T> {
   state: ToastState<T>;
 }
 
-function Toast<T extends ToastContents>({ state, ...props }: ToastProps<T>) {
-  const ref = useRef<HTMLDivElement>(null);
+function Toast<T extends ToastContents>({ state, ...props }: Readonly<ToastProps<T>>) {
+  const ref = useRef<HTMLDivElement>(null) as RefObject<HTMLDivElement>; // Note(raix): Remove when fixed in react-aria
   const { toastProps, titleProps, closeButtonProps, descriptionProps } = useToast(props, state, ref);
   const { content } = props.toast;
 
@@ -166,7 +166,7 @@ type ToastActionProps = {
   children: React.ReactNode;
 };
 
-export function ToastAction({ children }: ToastActionProps) {
+export function ToastAction({ children }: Readonly<ToastActionProps>) {
   const { variant } = useContext(toastContext);
   return (
     <AriaButton className={(renderProps) => toastActionStyles({ ...renderProps, variant })}>{children}</AriaButton>