1import type { ReactNode } from "react";
2import { useEffect } from "react";
3import { View } from "react-native";
4
5import { useComposerPopoverHost } from "./ComposerPopoverHost";
6
7export function ComposerPopoverAnchor(props: { readonly children: ReactNode }) {
8 const popoverHeight = useComposerPopoverHost()?.popoverHeight;
9 // oxlint-disable-next-line t3code/no-unreasoned-state-sync -- resets the popover host's shared height value when the anchor unmounts
10 useEffect(
11 () => () => {
12 popoverHeight?.set(0);
13 },
14 [popoverHeight],
15 );
16 return (
17 <View
18 className="absolute inset-x-0 bottom-full z-10 mb-2"
19 onLayout={(event) => {
20 popoverHeight?.set(event.nativeEvent.layout.height);
21 }}
22 >
23 {props.children}
24 </View>
25 );
26}