fix types

packages/core/src/search/client.ts

@@ -56,7 +56,7 @@ export function useDocsSearch(
   const [error, setError] = useState<Error>();
   const [isLoading, setIsLoading] = useState(false);
   const debouncedValue = useDebounce(search, delayMs);
-  const onStart = useRef<() => void>();
+  const onStart = useRef<() => void>(undefined);
 
   const cacheKey = useMemo(() => {
     return key ?? JSON.stringify([client.type, debouncedValue, locale, tag]);

packages/core/src/toc.tsx

@@ -9,7 +9,9 @@ import { useAnchorObserver } from './utils/use-anchor-observer';
 
 const ActiveAnchorContext = createContext<string[]>([]);
 
-const ScrollContext = createContext<RefObject<HTMLElement>>({ current: null });
+const ScrollContext = createContext<RefObject<HTMLElement | null>>({
+  current: null,
+});
 
 /**
  * The estimated active heading ID
@@ -40,7 +42,7 @@ export interface ScrollProviderProps {
   /**
    * Scroll into the view of container when active
    */
-  containerRef: RefObject<HTMLElement>;
+  containerRef: RefObject<HTMLElement | null>;
 
   children?: ReactNode;
 }

packages/core/src/utils/use-debounce.ts

@@ -2,7 +2,7 @@ import { useRef, useState } from 'react';
 
 export function useDebounce<T>(value: T, delayMs = 1000): T {
   const [debouncedValue, setDebouncedValue] = useState(value);
-  const timer = useRef<{ value: T; handler: number }>();
+  const timer = useRef<{ value: T; handler: number } | undefined>(undefined);
 
   if (delayMs === 0) return value;
 

packages/core/src/utils/use-shiki.tsx

@@ -20,8 +20,9 @@ export function useShiki(
 ): ReactNode {
   const [out, setOut] = useState<ReactNode>(() => {
     if (options.defaultValue) return options.defaultValue;
+    const Pre = (options.components?.pre ?? 'pre') as 'pre';
+    const Code = (options.components?.code ?? 'code') as 'code';
 
-    const { pre: Pre = 'pre', code: Code = 'code' } = options.components ?? {};
     return (
       <Pre>
         <Code>{code}</Code>

packages/openapi/src/render/markdown.tsx

@@ -33,7 +33,6 @@ export async function Markdown({
     jsx: jsx as Jsx,
     jsxs: jsxs as Jsx,
     Fragment,
-    // @ts-expect-error -- safe to use
     components: defaultMdxComponents,
   });
 }

packages/twoslash/src/ui/popup.tsx

@@ -24,10 +24,10 @@ function Popup({
 }: {
   delay?: number;
   children: React.ReactNode;
-}): JSX.Element {
+}) {
   const [open, setOpen] = useState(false);
-  const openTimeoutRef = useRef<number>();
-  const closeTimeoutRef = useRef<number>();
+  const openTimeoutRef = useRef<number>(undefined);
+  const closeTimeoutRef = useRef<number>(undefined);
 
   const handleOpen = (e: React.PointerEvent): void => {
     if (e.pointerType === 'touch') return;
@@ -86,7 +86,7 @@ const PopupTrigger = forwardRef<
 PopupTrigger.displayName = 'PopupTrigger';
 
 const PopupContent = forwardRef<
-  React.ElementRef<typeof PopoverContent>,
+  React.ComponentRef<typeof PopoverContent>,
   React.ComponentPropsWithoutRef<typeof PopoverContent>
 >((props, ref) => {
   const ctx = useContext(PopupContext);

packages/typescript/src/ui/auto-type-table.tsx

@@ -129,7 +129,6 @@ async function renderMarkdown(md: string): Promise<React.ReactElement> {
     Fragment: runtime.Fragment,
     jsx: runtime.jsx as Jsx,
     jsxs: runtime.jsxs as Jsx,
-    // @ts-expect-error -- mdx components
     components: { ...defaultMdxComponents, img: undefined },
   });
 }

packages/ui/src/components/dialog/search.tsx

@@ -153,8 +153,7 @@ function SearchList({ items, hideResults = false }: SearchResultProps) {
     setActive(items[0].id);
   }
 
-  const listenerRef = useRef<(e: KeyboardEvent) => void>();
-  listenerRef.current = (e) => {
+  function onKey(e: KeyboardEvent) {
     if (e.key === 'ArrowDown' || e.key == 'ArrowUp') {
       setActive((cur) => {
         const idx = items.findIndex((item) => item.id === cur);
@@ -174,12 +173,13 @@ function SearchList({ items, hideResults = false }: SearchResultProps) {
       if (selected) onOpen(selected.url);
       e.preventDefault();
     }
-  };
+  }
+
+  const listenerRef = useRef(onKey);
+  listenerRef.current = onKey;
 
   useEffect(() => {
-    const listener = (e: KeyboardEvent) => {
-      listenerRef.current?.(e);
-    };
+    const listener = (e: KeyboardEvent) => listenerRef.current?.(e);
 
     window.addEventListener('keydown', listener);
     return () => {

packages/ui/src/components/layout/toc-thumb.tsx

@@ -44,7 +44,7 @@ export function TocThumb({
   containerRef,
   ...props
 }: HTMLAttributes<HTMLDivElement> & {
-  containerRef: RefObject<HTMLElement>;
+  containerRef: RefObject<HTMLElement | null>;
 }): ReactNode {
   const active = Primitive.useActiveAnchors();
   const thumbRef = useRef<HTMLDivElement>(null);

packages/ui/src/components/tabs.tsx

@@ -73,12 +73,13 @@ export function Tabs({
   const values = useMemo(() => items.map((item) => toValue(item)), [items]);
   const [value, setValue] = useState(values[defaultIndex]);
   const valueToIdMapRef = useRef(new Map<string, string>());
-  const onChangeRef = useRef<ChangeListener>();
-
-  onChangeRef.current = (v) => {
+  const onChange: ChangeListener = (v) => {
     if (values.includes(v)) setValue(v);
   };
 
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+
   useLayoutEffect(() => {
     if (!groupId) return;
     const onUpdate: ChangeListener = (v) => onChangeRef.current?.(v);