fix: 🏷️ Fix several typing issues from React 19

versia-pub · Dec 10, 2024 · 8bb062e · 8bb062e
1 parent 7055b89
commit 8bb062e
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 7 deletions.
diff --git a/components/Code.tsx b/components/Code.tsx
@@ -144,7 +144,8 @@ function CodePanel({
     label?: string;
     code?: string;
 }) {
-    const child = Children.only(children);
+    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+    const child = Children.only(children) as ReactNode & { props: any };
 
     if (isValidElement(child)) {
         tag = child.props.tag ?? tag;
@@ -205,7 +206,10 @@ function CodeGroupHeader({
                             )}
                         >
                             {getPanelTitle(
-                                isValidElement(child) ? child.props : {},
+                                isValidElement(child)
+                                    ? // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+                                      (child.props as any)
+                                    : {},
                             )}
                         </Tab>
                     ))}
@@ -238,7 +242,7 @@ function CodeGroupPanels({
 
 function usePreventLayoutShift() {
     const positionRef = useRef<HTMLElement>(null);
-    const rafRef = useRef<number>();
+    const rafRef = useRef<number | undefined>(undefined);
 
     useEffect(() => {
         return () => {
@@ -322,7 +326,8 @@ export function CodeGroup({
 }: ComponentPropsWithoutRef<typeof CodeGroupPanels> & { title: string }) {
     const languages =
         Children.map(children, (child) =>
-            getPanelTitle(isValidElement(child) ? child.props : {}),
+            // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+            getPanelTitle(isValidElement(child) ? (child.props as any) : {}),
         ) ?? [];
     const tabGroupProps = useTabGroupProps(languages);
     const hasTabs = Children.count(children) > 1;

diff --git a/components/Heading.tsx b/components/Heading.tsx
@@ -5,6 +5,7 @@ import Link from "next/link";
 import {
     type ComponentPropsWithoutRef,
     type ReactNode,
+    type RefObject,
     useEffect,
     useRef,
 } from "react";
@@ -87,7 +88,7 @@ export function Heading<Level extends 2 | 3>({
 }) {
     level = level ?? (2 as Level);
     const Component = `h${level}` as "h2" | "h3";
-    const ref = useRef<HTMLHeadingElement>(null);
+    const ref = useRef<HTMLHeadingElement | null>(null);
     const registerHeading = useSectionStore((s) => s.registerHeading);
 
     const inView = useInView(ref, {
@@ -96,10 +97,10 @@ export function Heading<Level extends 2 | 3>({
     });
 
     useEffect(() => {
-        if (level === 2) {
+        if (level === 2 && ref.current) {
             registerHeading({
                 id: props.id,
-                ref,
+                ref: ref as RefObject<HTMLHeadingElement>,
                 offsetRem: tag || label ? 8 : 6,
             });
         }

diff --git a/components/Search.tsx b/components/Search.tsx
@@ -164,6 +164,7 @@ function LoadingIcon(props: ComponentPropsWithoutRef<"svg">) {
 
 function HighlightQuery({ text, query }: { text: string; query: string }) {
     return (
+        // @ts-expect-error types not properly updated to react 19
         <Highlighter
             highlightClassName="underline bg-transparent text-brand-500"
             searchWords={[query]}