Twoslash: Fix popups focus outline

fuma-nama · Dec 9, 2024 · 9585561 · 9585561
1 parent 7f53da4
commit 9585561
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 27 deletions.
diff --git a/.changeset/pretty-forks-smell.md b/.changeset/pretty-forks-smell.md
@@ -0,0 +1,6 @@
+---
+'fumadocs-twoslash': patch
+'fumadocs-ui': patch
+---
+
+Fix Twoslash popups focus outline
diff --git a/packages/twoslash/src/ui/popup.tsx b/packages/twoslash/src/ui/popup.tsx
@@ -5,6 +5,9 @@ import {
   useContext,
   createContext,
   useMemo,
+  type ReactNode,
+  type ComponentRef,
+  type ComponentPropsWithoutRef,
 } from 'react';
 import { Popover, PopoverContent, PopoverTrigger } from './popover';
 
@@ -23,41 +26,38 @@ function Popup({
   children,
 }: {
   delay?: number;
-  children: React.ReactNode;
+  children: ReactNode;
 }) {
   const [open, setOpen] = useState(false);
   const openTimeoutRef = useRef<number>(undefined);
   const closeTimeoutRef = useRef<number>(undefined);
 
-  const handleOpen = (e: React.PointerEvent): void => {
-    if (e.pointerType === 'touch') return;
-    if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);
-
-    openTimeoutRef.current = window.setTimeout(() => {
-      setOpen(true);
-    }, delay);
-  };
-
-  const handleClose = (e: React.PointerEvent): void => {
-    if (e.pointerType === 'touch') return;
-    if (openTimeoutRef.current) clearTimeout(openTimeoutRef.current);
-
-    closeTimeoutRef.current = window.setTimeout(() => {
-      setOpen(false);
-    }, delay);
-  };
-
   return (
     <Popover open={open} onOpenChange={setOpen}>
       <PopupContext.Provider
         value={useMemo(
           () => ({
             open,
             setOpen,
-            handleOpen,
-            handleClose,
+            handleOpen(e) {
+              if (e.pointerType === 'touch') return;
+              if (closeTimeoutRef.current)
+                clearTimeout(closeTimeoutRef.current);
+
+              openTimeoutRef.current = window.setTimeout(() => {
+                setOpen(true);
+              }, delay);
+            },
+            handleClose(e) {
+              if (e.pointerType === 'touch') return;
+              if (openTimeoutRef.current) clearTimeout(openTimeoutRef.current);
+
+              closeTimeoutRef.current = window.setTimeout(() => {
+                setOpen(false);
+              }, delay);
+            },
           }),
-          [handleClose, handleOpen, open],
+          [delay, open],
         )}
       >
         {children}
@@ -67,8 +67,8 @@ function Popup({
 }
 
 const PopupTrigger = forwardRef<
-  React.ElementRef<typeof PopoverTrigger>,
-  React.ComponentPropsWithoutRef<typeof PopoverTrigger>
+  ComponentRef<typeof PopoverTrigger>,
+  ComponentPropsWithoutRef<typeof PopoverTrigger>
 >((props, ref) => {
   const ctx = useContext(PopupContext);
   if (!ctx) throw new Error('Missing Popup Context');
@@ -86,8 +86,8 @@ const PopupTrigger = forwardRef<
 PopupTrigger.displayName = 'PopupTrigger';
 
 const PopupContent = forwardRef<
-  React.ComponentRef<typeof PopoverContent>,
-  React.ComponentPropsWithoutRef<typeof PopoverContent>
+  ComponentRef<typeof PopoverContent>,
+  ComponentPropsWithoutRef<typeof PopoverContent>
 >((props, ref) => {
   const ctx = useContext(PopupContext);
   if (!ctx) throw new Error('Missing Popup Context');
@@ -97,6 +97,9 @@ const PopupContent = forwardRef<
       ref={ref}
       onPointerEnter={ctx.handleOpen}
       onPointerLeave={ctx.handleClose}
+      onOpenAutoFocus={(e) => {
+        e.preventDefault();
+      }}
       onCloseAutoFocus={(e) => {
         e.preventDefault();
       }}

diff --git a/packages/ui/src/components/codeblock.tsx b/packages/ui/src/components/codeblock.tsx
@@ -131,7 +131,7 @@ export const CodeBlock = forwardRef<HTMLElement, CodeBlockProps>(
         <ScrollArea ref={areaRef} dir="ltr">
           <ScrollViewport
             {...viewportProps}
-            className={cn('max-h-[400px]', viewportProps?.className)}
+            className={cn('max-h-[600px]', viewportProps?.className)}
           >
             {props.children}
           </ScrollViewport>