this repo has no description
1import { Menu } from '@szhsin/react-menu';
2import { useRef } from 'preact/hooks';
3
4import isRTL from '../utils/is-rtl';
5import safeBoundingBoxPadding from '../utils/safe-bounding-box-padding';
6import useWindowSize from '../utils/useWindowSize';
7
8// It's like Menu but with sensible defaults, bug fixes and improvements.
9function Menu2(props) {
10 const { containerProps, instanceRef: _instanceRef, align } = props;
11 const size = useWindowSize();
12 const instanceRef = _instanceRef?.current ? _instanceRef : useRef();
13
14 // Values: start, end, center
15 // Note: don't mess with 'center'
16 const rtlAlign = isRTL()
17 ? align === 'end'
18 ? 'start'
19 : align === 'start'
20 ? 'end'
21 : align
22 : align;
23
24 return (
25 <Menu
26 boundingBoxPadding={safeBoundingBoxPadding()}
27 repositionFlag={`${size.width}x${size.height}`}
28 unmountOnClose
29 {...props}
30 align={rtlAlign}
31 instanceRef={instanceRef}
32 containerProps={{
33 onClick: (e) => {
34 if (e.target === e.currentTarget) {
35 instanceRef.current?.closeMenu?.();
36 }
37 containerProps?.onClick?.(e);
38 },
39 ...containerProps,
40 }}
41 />
42 );
43}
44
45export default Menu2;