modal impl

src/button/ReactionToggleButton.module.css

@@ -3,17 +3,13 @@
 }
 
 .reactionPopupMenu {
+  background: var(--cpd-color-bg-canvas-default);
+  border-radius: var(--cpd-space-4x);
+  width: fit-content;
+  top: 70vh;
   padding: 1em;
   position: absolute;
-  background: var(--cpd-color-bg-canvas-default);
+  border: none;
-  top: -8em;
-  border-radius: var(--cpd-space-4x);
-  display: flex;
-  width: fit-content;
-  left: 0;
-  right: 0;
-  margin-left: auto;
-  margin-right: auto;
 }
 
 .reactionPopupMenu menu {

src/button/ReactionToggleButton.tsx

@@ -16,15 +16,20 @@ import {
   SearchIcon,
   CloseIcon,
   RaisedHandSolidIcon,
+  ReactionIcon,
 } from "@vector-im/compound-design-tokens/assets/web/icons";
 import {
   ChangeEventHandler,
   ComponentPropsWithoutRef,
   FC,
+  forwardRef,
   KeyboardEventHandler,
+  PropsWithRef,
   ReactNode,
   useCallback,
+  useEffect,
   useMemo,
+  useRef,
   useState,
 } from "react";
 import { useTranslation } from "react-i18next";
@@ -45,9 +50,10 @@ import {
 
 interface InnerButtonProps extends ComponentPropsWithoutRef<"button"> {
   raised: boolean;
+  open: boolean;
 }
 
-const InnerButton: FC<InnerButtonProps> = ({ raised, ...props }) => {
+const InnerButton: FC<InnerButtonProps> = ({ raised, open, ...props }) => {
   const { t } = useTranslation();
 
   return (
@@ -55,26 +61,26 @@ const InnerButton: FC<InnerButtonProps> = ({ raised, ...props }) => {
       <CpdButton
         className={classNames(raised && styles.raisedButton)}
         aria-expanded={raised}
-        kind={raised ? "primary" : "secondary"}
+        kind={raised || open ? "primary" : "secondary"}
         iconOnly
-        Icon={RaisedHandSolidIcon}
+        Icon={raised ? RaisedHandSolidIcon : ReactionIcon}
         {...props}
       />
     </Tooltip>
   );
 };
 
-export function ReactionPopupMenu({
+interface ReactionsPopupMenuProps {
-  sendReaction,
-  toggleRaisedHand,
-  isHandRaised,
-  canReact,
-}: {
   sendReaction: (reaction: ReactionOption) => void;
   toggleRaisedHand: () => void;
   isHandRaised: boolean;
   canReact: boolean;
-}): ReactNode {
+}
+
+export const ReactionPopupMenu = forwardRef<
+  HTMLDialogElement,
+  ReactionsPopupMenuProps
+>(({ sendReaction, toggleRaisedHand, isHandRaised, canReact }, ref) => {
   const { t } = useTranslation();
   const [searchText, setSearchText] = useState("");
   const [isSearching, setIsSearching] = useState(false);
@@ -116,7 +122,8 @@ export function ReactionPopupMenu({
   );
 
   return (
-    <div className={styles.reactionPopupMenu}>
+    <dialog ref={ref} className={styles.reactionPopupMenu} open={false}>
+      <div style={{ display: "flex" }}>
         <section className={styles.handRaiseSection}>
           <Tooltip label={t("common.raise_hand")}>
             <CpdButton
@@ -190,8 +197,9 @@ export function ReactionPopupMenu({
           </menu>
         </section>
       </div>
+    </dialog>
   );
-}
+});
 
 interface ReactionToggleButtonProps {
   rtcSession: MatrixRTCSession;
@@ -207,10 +215,37 @@ export function ReactionToggleButton({
   const userId = client.getUserId()!;
   const isHandRaised = !!raisedHands[userId];
   const memberships = useMatrixRTCSessionMemberships(rtcSession);
-  const [showReactionsMenu, setShowReactionsMenu] = useState(false);
+  const ref = useRef<HTMLDialogElement>(null);
 
   const canReact = !reactions[userId];
 
+  const showReactionsMenu = useCallback(() => {
+    if (ref.current) {
+      ref.current.showModal();
+    }
+  }, [ref]);
+
+  const hideReactionsMenu = useCallback(() => {
+    if (ref.current) {
+      ref.current.close();
+    }
+  }, [ref]);
+
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    function onClick(evt: MouseEvent) {
+      if (evt.target === ref.current) {
+        hideReactionsMenu();
+      }
+    }
+    ref.current.addEventListener("click", onClick);
+    return () => {
+      ref.current?.removeEventListener("click", onClick);
+    };
+  }, [ref]);
+
   const sendRelation = useCallback(
     async (reaction: ReactionOption) => {
       const myMembership = memberships.find((m) => m.sender === userId);
@@ -238,6 +273,7 @@ export function ReactionToggleButton({
         logger.error("Failed to send reaction", ex);
       } finally {
         setBusy(false);
+        hideReactionsMenu();
       }
     },
     [memberships, client, userId, rtcSession],
@@ -277,7 +313,7 @@ export function ReactionToggleButton({
           logger.error("Failed to send reaction event", ex);
         } finally {
           setBusy(false);
-          setShowReactionsMenu(false);
+          hideReactionsMenu();
         }
       }
     };
@@ -296,17 +332,17 @@ export function ReactionToggleButton({
     <>
       <InnerButton
         disabled={busy}
-        onClick={() => setShowReactionsMenu((show) => !show)}
+        onClick={showReactionsMenu}
-        raised={isHandRaised || showReactionsMenu}
+        raised={isHandRaised}
+        open={!!ref.current?.open}
       />
-      {showReactionsMenu && (
       <ReactionPopupMenu
+        ref={ref}
         isHandRaised={isHandRaised}
         canReact={canReact}
         sendReaction={(reaction) => void sendRelation(reaction)}
         toggleRaisedHand={toggleRaisedHand}
       />
-      )}
     </>
   );
 }