convert overlay to popover

packages/interface/src/components/explorer/ExplorerTopBar.tsx

@@ -15,7 +15,7 @@ import {
 import { forwardRef, useEffect, useRef } from 'react';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
-import { Button, Input, OverlayPanel, cva } from '@sd/ui';
+import { Button, Input, Popover, cva } from '@sd/ui';
 import { getExplorerStore, useExplorerStore } from '../../hooks/useExplorerStore';
 import { useOperatingSystem } from '../../hooks/useOperatingSystem';
 import { KeybindEvent } from '../../util/keybind';
@@ -265,7 +265,7 @@ export const TopBar: React.FC<TopBarProps> = (props) => {
 
 					<div className="flex mx-8 space-x-2">
 						<Tooltip label="Key Manager">
-							<OverlayPanel
+							<Popover
 								className="focus:outline-none"
 								trigger={
 									// <Tooltip label="Major Key Alert">
@@ -278,7 +278,7 @@ export const TopBar: React.FC<TopBarProps> = (props) => {
 								<div className="block w-[350px]">
 									<KeyManager className={TOP_BAR_ICON_STYLE} />
 								</div>
-							</OverlayPanel>
+							</Popover>
 						</Tooltip>
 						<Tooltip label="Tag Assign Mode">
 							<TopBarButton
@@ -305,7 +305,7 @@ export const TopBar: React.FC<TopBarProps> = (props) => {
 				</div>
 				<div className="flex mr-3 space-x-2">
 					<Tooltip label="File display options" position="left">
-						<OverlayPanel
+						<Popover
 							className="focus:outline-none"
 							trigger={
 								// <Tooltip label="Major Key Alert">
@@ -318,7 +318,7 @@ export const TopBar: React.FC<TopBarProps> = (props) => {
 							<div className="block w-[250px] ">
 								<ExplorerOptionsPanel />
 							</div>
-						</OverlayPanel>
+						</Popover>
 					</Tooltip>
 
 					<Tooltip

packages/interface/src/components/jobs/JobManager.tsx

@@ -15,7 +15,7 @@ import {
 	X
 } from 'phosphor-react';
 import { JobReport, useLibraryMutation, useLibraryQuery } from '@sd/client';
-import { Button, CategoryHeading, PopoverClose, tw } from '@sd/ui';
+import { Button, CategoryHeading, Popover, PopoverClose, tw } from '@sd/ui';
 import ProgressBar from '../primitive/ProgressBar';
 import { Tooltip } from '../tooltip/Tooltip';
 

packages/interface/src/components/layout/Sidebar.tsx

@@ -18,7 +18,6 @@ import {
 	CategoryHeading,
 	Dropdown,
 	Loader,
-	OverlayPanel,
 	Popover,
 	Select,
 	SelectOption,
@@ -177,7 +176,7 @@ function DebugPanel() {
 	const platform = usePlatform();
 
 	return (
-		<OverlayPanel
+		<Popover
 			className="p-4 focus:outline-none"
 			transformOrigin="bottom left"
 			trigger={
@@ -246,7 +245,7 @@ function DebugPanel() {
 					</InputContainer>
 				)} */}
 			</div>
-		</OverlayPanel>
+		</Popover>
 	);
 }
 

packages/ui/src/OverlayPanel.tsx

@@ -1,61 +0,0 @@
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import clsx from 'clsx';
-import { PropsWithChildren, useState } from 'react';
-import { animated, config, useTransition } from 'react-spring';
-
-interface Props extends DropdownMenu.MenuContentProps {
-	trigger: React.ReactNode;
-	transformOrigin?: string;
-	disabled?: boolean;
-}
-
-export const OverlayPanel = ({
-	trigger,
-	children,
-	disabled,
-	transformOrigin,
-	className,
-	...props
-}: PropsWithChildren<Props>) => {
-	const [open, setOpen] = useState(false);
-
-	// const transitions = useTransition(open, {
-	// 	from: {
-	// 		opacity: 0,
-	// 		transform: `scale(0.5)`,
-	// 		transformOrigin: transformOrigin || 'top'
-	// 	},
-	// 	enter: { opacity: 1, transform: 'scale(1)' },
-	// 	leave: { opacity: -0.5, transform: 'scale(0.95)' },
-	// 	config: { mass: 0.4, tension: 170, friction: 10 }
-	// });
-
-	return (
-		<DropdownMenu.Root open={open} onOpenChange={setOpen}>
-			<DropdownMenu.Trigger disabled={disabled} asChild>
-				{trigger}
-			</DropdownMenu.Trigger>
-			{open && (
-				<DropdownMenu.Portal forceMount>
-					<DropdownMenu.Content forceMount asChild>
-						<div
-							className={clsx(
-								'flex flex-col',
-								'min-w-[11rem] z-50 m-2 space-y-1',
-								'select-none cursor-default rounded-lg',
-								'text-left text-sm text-ink',
-								'bg-app-overlay ',
-								'border border-app-line',
-								'shadow-2xl shadow-black/60 ',
-								className
-							)}
-							// style={styles}
-						>
-							{children}
-						</div>
-					</DropdownMenu.Content>
-				</DropdownMenu.Portal>
-			)}
-		</DropdownMenu.Root>
-	);
-};

packages/ui/src/Popover.tsx

@@ -1,30 +1,63 @@
-import * as DP from '@radix-ui/react-popover';
+import * as Radix from '@radix-ui/react-popover';
 import clsx from 'clsx';
-import { PropsWithChildren, ReactNode } from 'react';
+import { PropsWithChildren, useState } from 'react';
 
-interface Props extends PropsWithChildren, DP.PopoverContentProps {
-	trigger: ReactNode;
+interface Props extends Radix.PopoverContentProps {
+	trigger: React.ReactNode;
+	transformOrigin?: string;
+	disabled?: boolean;
+	className?: string;
 }
 
-export const Popover = ({ trigger, children, className, ...props }: Props) => {
+export const Popover = ({
+	trigger,
+	children,
+	disabled,
+	transformOrigin,
+	className,
+	...props
+}: PropsWithChildren<Props>) => {
+	const [open, setOpen] = useState(false);
+
+	// const transitions = useTransition(open, {
+	// 	from: {
+	// 		opacity: 0,
+	// 		transform: `scale(0.5)`,
+	// 		transformOrigin: transformOrigin || 'top'
+	// 	},
+	// 	enter: { opacity: 1, transform: 'scale(1)' },
+	// 	leave: { opacity: -0.5, transform: 'scale(0.95)' },
+	// 	config: { mass: 0.4, tension: 170, friction: 10 }
+	// });
+
 	return (
-		<DP.Root>
-			<DP.Trigger asChild>{trigger}</DP.Trigger>
-			<DP.Portal>
-				<DP.Content
-					sideOffset={5}
-					collisionPadding={10}
-					className={clsx(
-						'rounded-lg text-sm text-ink select-none cursor-default bg-app-overlay border border-app-line shadow-2xl shadow-black/60',
-						className
-					)}
-					{...props}
-				>
-					{children}
-				</DP.Content>
-			</DP.Portal>
-		</DP.Root>
+		<Radix.Root open={open} onOpenChange={setOpen}>
+			<Radix.Trigger disabled={disabled} asChild>
+				{trigger}
+			</Radix.Trigger>
+			{open && (
+				<Radix.Portal forceMount>
+					<Radix.Content forceMount asChild>
+						<div
+							className={clsx(
+								'flex flex-col',
+								'min-w-[11rem] z-50 m-2 space-y-1',
+								'select-none cursor-default rounded-lg',
+								'text-left text-sm text-ink',
+								'bg-app-overlay ',
+								'border border-app-line',
+								'shadow-2xl shadow-black/60 ',
+								className
+							)}
+							// style={styles}
+						>
+							{children}
+						</div>
+					</Radix.Content>
+				</Radix.Portal>
+			)}
+		</Radix.Root>
 	);
 };
 
-export * from '@radix-ui/react-popover';
+export { Close as PopoverClose } from '@radix-ui/react-popover';

packages/ui/src/index.ts

@@ -7,7 +7,6 @@ export * as Dropdown from './Dropdown';
 export * from './Input';
 export * from './Layout';
 export * from './Loader';
-export * from './OverlayPanel';
 export * from './Popover';
 export * from './Select';
 export * from './Switch';