Add role property to floating elements and "tooltip" role to Tooltips.
This commit is contained in:
parent
0faaa6b10c
commit
32841ec79b
2 changed files with 14 additions and 4 deletions
|
@ -6,7 +6,7 @@ import {
|
||||||
useFloating,
|
useFloating,
|
||||||
useFocus,
|
useFocus,
|
||||||
useHover,
|
useHover,
|
||||||
useInteractions, useTransitionStyles
|
useInteractions, useRole, useTransitionStyles
|
||||||
} from "@floating-ui/react";
|
} from "@floating-ui/react";
|
||||||
import {UseFloatingOptions} from "@floating-ui/react/dist/floating-ui.react";
|
import {UseFloatingOptions} from "@floating-ui/react/dist/floating-ui.react";
|
||||||
import {mergeRefs} from "react-merge-refs";
|
import {mergeRefs} from "react-merge-refs";
|
||||||
|
@ -21,14 +21,20 @@ export type Managed<T = React.ReactElement|React.ReactNode> = (show: () => void,
|
||||||
*/
|
*/
|
||||||
export type FloatingMode = "always"|"click"|"hover"|"focus"|"managed";
|
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.
|
* 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<HTMLElement>)|Managed<(React.ReactElement & React.ClassAttributes<HTMLElement>)>;
|
children: (React.ReactElement & React.ClassAttributes<HTMLElement>)|Managed<(React.ReactElement & React.ClassAttributes<HTMLElement>)>;
|
||||||
content?: React.ReactNode|Managed<React.ReactNode>;
|
content?: React.ReactNode|Managed<React.ReactNode>;
|
||||||
className?: string;
|
className?: string;
|
||||||
mode?: FloatingMode;
|
mode?: FloatingMode;
|
||||||
|
role?: FloatRole;
|
||||||
floatingOptions?: UseFloatingOptions;
|
floatingOptions?: UseFloatingOptions;
|
||||||
}): React.ReactElement
|
}): React.ReactElement
|
||||||
{
|
{
|
||||||
|
@ -63,7 +69,11 @@ export function Float({children, content, className, mode, floatingOptions}: {
|
||||||
const hover = useHover(context, useMemo(() => ({ enabled: mode == "hover" }), [mode]));
|
const hover = useHover(context, useMemo(() => ({ enabled: mode == "hover" }), [mode]));
|
||||||
const focus = useFocus(context, useMemo(() => ({ enabled: mode == "focus", visibleOnly: false }), [mode]));
|
const focus = useFocus(context, useMemo(() => ({ enabled: mode == "focus", visibleOnly: false }), [mode]));
|
||||||
const click = useClick(context, useMemo(() => ({ enabled: mode == "click" }), [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.
|
// Transition configuration.
|
||||||
const {isMounted, styles: transitionStyles} = useTransitionStyles(context, {
|
const {isMounted, styles: transitionStyles} = useTransitionStyles(context, {
|
||||||
|
|
|
@ -7,7 +7,7 @@ export function Tooltip({children, content}: {
|
||||||
}): React.ReactElement
|
}): React.ReactElement
|
||||||
{
|
{
|
||||||
return (
|
return (
|
||||||
<Float mode={"hover"} content={content} className={"tooltip"} floatingOptions={{ placement: "top" }}>
|
<Float mode={"hover"} content={content} className={"tooltip"} role={"tooltip"} floatingOptions={{ placement: "top" }}>
|
||||||
{children}
|
{children}
|
||||||
</Float>
|
</Float>
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in a new issue