diff --git a/src/Components/Floating/Float.tsx b/src/Components/Floating/Float.tsx index bb975c8..fafe6fa 100644 --- a/src/Components/Floating/Float.tsx +++ b/src/Components/Floating/Float.tsx @@ -6,7 +6,7 @@ import { useFloating, useFocus, useHover, - useInteractions, useTransitionStyles + useInteractions, useRole, useTransitionStyles } from "@floating-ui/react"; import {UseFloatingOptions} from "@floating-ui/react/dist/floating-ui.react"; import {mergeRefs} from "react-merge-refs"; @@ -21,14 +21,20 @@ export type Managed = (show: () => void, */ export type FloatingMode = "always"|"click"|"hover"|"focus"|"managed"; +/** + * Role of a floating element. + */ +export type FloatRole = "tooltip" | "dialog" | "alertdialog" | "menu" | "listbox" | "grid" | "tree" | "select" | "label" | "combobox"; + /** * A component to show something floating next to an element. */ -export function Float({children, content, className, mode, floatingOptions}: { +export function Float({children, content, className, mode, role, floatingOptions}: { children: (React.ReactElement & React.ClassAttributes)|Managed<(React.ReactElement & React.ClassAttributes)>; content?: React.ReactNode|Managed; className?: string; mode?: FloatingMode; + role?: FloatRole; floatingOptions?: UseFloatingOptions; }): React.ReactElement { @@ -63,7 +69,11 @@ export function Float({children, content, className, mode, floatingOptions}: { const hover = useHover(context, useMemo(() => ({ enabled: mode == "hover" }), [mode])); const focus = useFocus(context, useMemo(() => ({ enabled: mode == "focus", visibleOnly: false }), [mode])); const click = useClick(context, useMemo(() => ({ enabled: mode == "click" }), [mode])); - const {getReferenceProps, getFloatingProps} = useInteractions([hover, focus, click]); + const roleProps = useRole(context, { + role: role, + enabled: !!role, + }); + const {getReferenceProps, getFloatingProps} = useInteractions([roleProps, hover, focus, click]); // Transition configuration. const {isMounted, styles: transitionStyles} = useTransitionStyles(context, { diff --git a/src/Components/Floating/Tooltip.tsx b/src/Components/Floating/Tooltip.tsx index 9a95fc2..23bd239 100644 --- a/src/Components/Floating/Tooltip.tsx +++ b/src/Components/Floating/Tooltip.tsx @@ -7,7 +7,7 @@ export function Tooltip({children, content}: { }): React.ReactElement { return ( - + {children} );