Fun picker improvements

ts/components/fun/FunEmojiPicker.tsx

@@ -1,12 +1,13 @@
 // Copyright 2025 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 import type { ReactNode } from 'react';
-import React, { memo, useCallback, useState } from 'react';
+import React, { memo, useCallback, useEffect, useState } from 'react';
 import type { Placement } from 'react-aria';
 import { DialogTrigger } from 'react-aria-components';
 import { FunPopover } from './base/FunPopover';
 import type { FunEmojiSelection } from './panels/FunPanelEmojis';
 import { FunPanelEmojis } from './panels/FunPanelEmojis';
+import { useFunContext } from './FunProvider';
 
 export type FunEmojiPickerProps = Readonly<{
   placement?: Placement;
@@ -20,6 +21,8 @@ export const FunEmojiPicker = memo(function FunEmojiPicker(
   props: FunEmojiPickerProps
 ): JSX.Element {
   const { onOpenChange } = props;
+  const fun = useFunContext();
+  const { onClose } = fun;
   const [isOpen, setIsOpen] = useState(props.defaultOpen ?? false);
 
   const handleOpenChange = useCallback(
@@ -34,6 +37,12 @@ export const FunEmojiPicker = memo(function FunEmojiPicker(
     setIsOpen(false);
   }, []);
 
+  useEffect(() => {
+    if (!isOpen) {
+      onClose();
+    }
+  }, [isOpen, onClose]);
+
   return (
     <DialogTrigger isOpen={isOpen} onOpenChange={handleOpenChange}>
       {props.children}