diff --git a/src/Tooltip.jsx b/src/Tooltip.jsx index e9d3596f..9f613083 100644 --- a/src/Tooltip.jsx +++ b/src/Tooltip.jsx @@ -1,32 +1,46 @@ -import React, { forwardRef } from "react"; +import React, { forwardRef, useRef } from "react"; import { useTooltipTriggerState } from "@react-stately/tooltip"; +import { FocusableProvider } from "@react-aria/focus"; import { useTooltipTrigger, useTooltip } from "@react-aria/tooltip"; import { mergeProps, useObjectRef } from "@react-aria/utils"; import styles from "./Tooltip.module.css"; import classNames from "classnames"; +import { OverlayContainer, useOverlayPosition } from "@react-aria/overlays"; -export function Tooltip({ position, state, ...props }) { - let { tooltipProps } = useTooltip(props, state); +export const Tooltip = forwardRef( + ({ position, state, className, ...props }, ref) => { + let { tooltipProps } = useTooltip(props, state); - return ( -
- {props.children} -
- ); -} + return ( +
+ {props.children} +
+ ); + } +); export const TooltipTrigger = forwardRef(({ children, ...rest }, ref) => { const tooltipState = useTooltipTriggerState(rest); const triggerRef = useObjectRef(ref); + const overlayRef = useRef(); const { triggerProps, tooltipProps } = useTooltipTrigger( rest, tooltipState, triggerRef ); + const { overlayProps } = useOverlayPosition({ + placement: rest.placement || "top", + targetRef: triggerRef, + overlayRef, + isOpen: tooltipState.isOpen, + offset: 5, + }); + if ( !Array.isArray(children) || children.length > 2 || @@ -40,13 +54,20 @@ export const TooltipTrigger = forwardRef(({ children, ...rest }, ref) => { const [tooltipTrigger, tooltip] = children; return ( -
- - {tooltipState.isOpen && tooltip({ state: tooltipState, ...tooltipProps })} -
+ + {} + {tooltipState.isOpen && ( + + + {tooltip()} + + + )} + ); }); diff --git a/src/Tooltip.module.css b/src/Tooltip.module.css index bbf7608e..053bc890 100644 --- a/src/Tooltip.module.css +++ b/src/Tooltip.module.css @@ -1,6 +1,5 @@ .tooltip { background-color: var(--bgColor2); - position: absolute; flex-direction: row; justify-content: center; align-items: center; @@ -9,25 +8,5 @@ border-radius: 8px; max-width: 135px; width: max-content; - z-index: 1; - left: 50%; - transform: translateX(-50%); text-align: center; } - -.tooltip.top { - bottom: calc(100% + 6px); -} - -.tooltip.bottom { - top: calc(100% + 6px); -} - -.tooltip.bottomLeft { - top: calc(100% + 6px); - left: -25%; -} - -.tooltipContainer { - position: relative; -} diff --git a/src/UserMenu.jsx b/src/UserMenu.jsx index ad4dd10e..f85c5e5a 100644 --- a/src/UserMenu.jsx +++ b/src/UserMenu.jsx @@ -62,7 +62,7 @@ export function UserMenu({ return ( - + - {(props) => ( - - Profile - - )} + {() => "Profile"} {(props) => ( diff --git a/src/button/Button.jsx b/src/button/Button.jsx index 08a6ea70..b28420d4 100644 --- a/src/button/Button.jsx +++ b/src/button/Button.jsx @@ -76,25 +76,13 @@ export const Button = forwardRef( } ); -export function ButtonTooltip({ className, children }) { - return ( -
- {children} -
- ); -} - export function MicButton({ muted, ...rest }) { return ( - {(props) => ( - - {muted ? "Unmute microphone" : "Mute microphone"} - - )} + {() => (muted ? "Unmute microphone" : "Mute microphone")} ); } @@ -105,11 +93,7 @@ export function VideoButton({ muted, ...rest }) { - {(props) => ( - - {muted ? "Turn on camera" : "Turn off camera"} - - )} + {() => (muted ? "Turn on camera" : "Turn off camera")} ); } @@ -120,11 +104,7 @@ export function ScreenshareButton({ enabled, className, ...rest }) { - {(props) => ( - - {enabled ? "Stop sharing screen" : "Share screen"} - - )} + {() => (enabled ? "Stop sharing screen" : "Share screen")} ); } @@ -139,11 +119,7 @@ export function HangupButton({ className, ...rest }) { > - {(props) => ( - - Leave - - )} + {() => "Leave"} ); } diff --git a/src/button/Button.module.css b/src/button/Button.module.css index 72306dbb..c8e0e447 100644 --- a/src/button/Button.module.css +++ b/src/button/Button.module.css @@ -100,35 +100,6 @@ limitations under the License. fill: #21262c; } -.buttonTooltip { - display: none; - background-color: var(--bgColor2); - position: absolute; - flex-direction: row; - justify-content: center; - align-items: center; - padding: 8px 10px; - color: var(--textColor1); - border-radius: 8px; - max-width: 135px; - width: max-content; - z-index: 1; -} - -.buttonTooltip.bottomRight { - right: 0; -} - -.toolbarButton:hover .buttonTooltip { - display: flex; - bottom: calc(100% + 6px); -} - -.iconButton:hover .buttonTooltip { - display: flex; - top: calc(100% + 6px); -} - .secondary, .copyButton { color: #0dbd8b; diff --git a/src/popover/PopoverMenu.jsx b/src/popover/PopoverMenu.jsx index 1436b995..66ed3a77 100644 --- a/src/popover/PopoverMenu.jsx +++ b/src/popover/PopoverMenu.jsx @@ -1,72 +1,68 @@ -import React, { useRef } from "react"; +import React, { forwardRef, useRef } from "react"; import styles from "./PopoverMenu.module.css"; import { useMenuTriggerState } from "@react-stately/menu"; import { useMenuTrigger } from "@react-aria/menu"; import { OverlayContainer, useOverlayPosition } from "@react-aria/overlays"; +import { mergeProps, useObjectRef } from "@react-aria/utils"; import classNames from "classnames"; import { Popover } from "./Popover"; -export function PopoverMenuTrigger({ - children, - placement, - className, - disableOnState, - ...rest -}) { - const popoverMenuState = useMenuTriggerState(rest); - const buttonRef = useRef(); - const { menuTriggerProps, menuProps } = useMenuTrigger( - {}, - popoverMenuState, - buttonRef - ); +export const PopoverMenuTrigger = forwardRef( + ({ children, placement, className, disableOnState, ...rest }, ref) => { + const popoverMenuState = useMenuTriggerState(rest); + const buttonRef = useObjectRef(ref); + const { menuTriggerProps, menuProps } = useMenuTrigger( + {}, + popoverMenuState, + buttonRef + ); - const popoverRef = useRef(); + const popoverRef = useRef(); - const { overlayProps } = useOverlayPosition({ - targetRef: buttonRef, - overlayRef: popoverRef, - placement: placement || "top", - offset: 5, - isOpen: popoverMenuState.isOpen, - }); + const { overlayProps } = useOverlayPosition({ + targetRef: buttonRef, + overlayRef: popoverRef, + placement: placement || "top", + offset: 5, + isOpen: popoverMenuState.isOpen, + }); - if ( - !Array.isArray(children) || - children.length > 2 || - typeof children[1] !== "function" - ) { - throw new Error( - "PopoverMenu must have two props. The first being a button and the second being a render prop." + if ( + !Array.isArray(children) || + children.length > 2 || + typeof children[1] !== "function" + ) { + throw new Error( + "PopoverMenu must have two props. The first being a button and the second being a render prop." + ); + } + + const [popoverTrigger, popoverMenu] = children; + + return ( +
+ + {popoverMenuState.isOpen && ( + + + {popoverMenu({ + ...menuProps, + autoFocus: popoverMenuState.focusStrategy, + onClose: popoverMenuState.close, + })} + + + )} +
); } - - const [popoverTrigger, popoverMenu] = children; - - return ( -
- - {popoverMenuState.isOpen && ( - - - {popoverMenu({ - ...menuProps, - autoFocus: popoverMenuState.focusStrategy, - onClose: popoverMenuState.close, - })} - - - )} -
- ); -} +); diff --git a/src/room/GridLayoutMenu.jsx b/src/room/GridLayoutMenu.jsx index f0037127..a7cfd6c7 100644 --- a/src/room/GridLayoutMenu.jsx +++ b/src/room/GridLayoutMenu.jsx @@ -16,11 +16,7 @@ export function GridLayoutMenu({ layout, setLayout }) { - {(props) => ( - - Layout Type - - )} + {() => "Layout Type"} {(props) => ( diff --git a/src/room/OverflowMenu.jsx b/src/room/OverflowMenu.jsx index ec0045a7..e35538d2 100644 --- a/src/room/OverflowMenu.jsx +++ b/src/room/OverflowMenu.jsx @@ -38,15 +38,11 @@ export function OverflowMenu({ return ( <> - + - {(props) => ( - - More - - )} + {() => "More"} {(props) => (