diff --git a/src-web/components/Overlay.tsx b/src-web/components/Overlay.tsx index 91e174f1..f60eac44 100644 --- a/src-web/components/Overlay.tsx +++ b/src-web/components/Overlay.tsx @@ -1,11 +1,10 @@ import classNames from 'classnames'; +import { FocusTrap } from 'focus-trap-react'; import * as m from 'motion/react-m'; -import type { ReactNode} from 'react'; -import React, { Suspense , lazy, useRef } from 'react'; +import type { ReactNode } from 'react'; +import React, { useRef } from 'react'; import { Portal } from './Portal'; -const FocusTrap = lazy(() => import('focus-trap-react')); - interface Props { children: ReactNode; portalName: string; @@ -51,52 +50,50 @@ export function Overlay({ return ( {open && ( - - containerRef.current!, // always have a target - initialFocus: () => - // Doing this explicitly seems to work better than the default behavior for some reason - containerRef.current?.querySelector( - [ - 'a[href]', - 'input:not([disabled])', - 'select:not([disabled])', - 'textarea:not([disabled])', - 'button:not([disabled])', - '[tabindex]:not([tabindex="-1"])', - '[contenteditable]:not([contenteditable="false"])', - ].join(', '), - ) ?? undefined, - }} + containerRef.current!, // always have a target + initialFocus: () => + // Doing this explicitly seems to work better than the default behavior for some reason + containerRef.current?.querySelector( + [ + 'a[href]', + 'input:not([disabled])', + 'select:not([disabled])', + 'textarea:not([disabled])', + 'button:not([disabled])', + '[tabindex]:not([tabindex="-1"])', + '[contenteditable]:not([contenteditable="false"])', + ].join(', '), + ) ?? undefined, + }} + > + - -
- - {/* Show the draggable region at the top */} - {/* TODO: Figure out tauri drag region and also make clickable still */} - {variant === 'default' && ( -
+
- - + /> + + {/* Show the draggable region at the top */} + {/* TODO: Figure out tauri drag region and also make clickable still */} + {variant === 'default' && ( +
+ )} + {children} + + )} ); diff --git a/src-web/components/core/Tooltip.tsx b/src-web/components/core/Tooltip.tsx index 0d3954ab..13e5ed0c 100644 --- a/src-web/components/core/Tooltip.tsx +++ b/src-web/components/core/Tooltip.tsx @@ -1,17 +1,8 @@ import classNames from 'classnames'; -import type { - CSSProperties, - KeyboardEvent, - ReactNode} from 'react'; -import React, { - lazy, - Suspense, - useRef, - useState, -} from 'react'; +import type { CSSProperties, KeyboardEvent, ReactNode } from 'react'; +import React, { useRef, useState } from 'react'; import { generateId } from '../../lib/generateId'; - -const Portal = lazy(() => import('../Portal').then((m) => ({ default: m.Portal }))); +import { Portal } from '../Portal'; export interface TooltipProps { children: ReactNode; @@ -75,7 +66,7 @@ export function Tooltip({ children, content, tabIndex, size = 'md' }: TooltipPro const id = useRef(`tooltip-${generateId()}`); return ( - + <>
{children} - + ); }