starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-24 01:28:35 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Menu now uses "click away" instead of backdrop

Browse Source
This commit is contained in:
Gregory Schier
2025-01-08 06:20:21 -08:00
parent 1920f720a9
commit 1d51bd642a
1 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src-web/components/core/Dropdown.tsx
View File

@@ -20,12 +20,12 @@ import React, {
useRef, useRef,
useState, useState,
} from 'react'; } from 'react';
import { useKey, useWindowSize } from 'react-use'; import {useClickAway, useKey, useWindowSize} from 'react-use';
import type { HotkeyAction } from '../../hooks/useHotKey'; import type { HotkeyAction } from '../../hooks/useHotKey';
import { useHotKey } from '../../hooks/useHotKey'; import { useHotKey } from '../../hooks/useHotKey';
import { useStateWithDeps } from '../../hooks/useStateWithDeps'; import { useStateWithDeps } from '../../hooks/useStateWithDeps';
import { getNodeText } from '../../lib/getNodeText'; import { getNodeText } from '../../lib/getNodeText';
import { Overlay } from '../Overlay'; import { Portal } from '../Portal';
import { Button } from './Button'; import { Button } from './Button';
import { HotKey } from './HotKey'; import { HotKey } from './HotKey';
import { Icon } from './Icon'; import { Icon } from './Icon';
@@ -414,6 +414,9 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle' | 'items'
[filteredItems, setSelectedIndex], [filteredItems, setSelectedIndex],
); );
const menuRef = useRef<HTMLDivElement | null>(null);
useClickAway(menuRef, handleClose);
return ( return (
<> <>
{items.map( {items.map(
@@ -429,9 +432,8 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle' | 'items'
), ),
)} )}
{isOpen && ( {isOpen && (
<Overlay open={true} variant="transparent" portalName="dropdown" zIndex={50}> <Portal name="dropdown-menu">
<div className="x-theme-menu"> <div ref={menuRef} className="x-theme-menu">
<div tabIndex={-1} aria-hidden className="fixed inset-0 z-30" onClick={handleClose} />
<motion.div <motion.div
tabIndex={0} tabIndex={0}
onKeyDown={handleMenuKeyDown} onKeyDown={handleMenuKeyDown}
@@ -497,7 +499,7 @@ const Menu = forwardRef<Omit<DropdownRef, 'open' | 'isOpen' | 'toggle' | 'items'
</VStack> </VStack>
</motion.div> </motion.div>
</div> </div>
</Overlay> </Portal>
)} )}
</> </>
); );