UIKernel/Core
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity

Add role property to floating elements and "tooltip" role to Tooltips.

Browse source
This commit is contained in:
Madeorsk 2024-06-15 23:54:11 +02:00
parent 0faaa6b10c
commit 32841ec79b
Signed by: Madeorsk
SSH key fingerprint: SHA256:J9G0ofIOLKf7kyS2IfrMqtMaPdfsk1W02+oGueZzDDU
2 changed files with 14 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/Components/Floating/Float.tsx
View file

@ -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<T = React.ReactElement|React.ReactNode> = (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<HTMLElement>)|Managed<(React.ReactElement & React.ClassAttributes<HTMLElement>)>;
content?: React.ReactNode|Managed<React.ReactNode>;
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, {

2
src/Components/Floating/Tooltip.tsx
View file

@ -7,7 +7,7 @@ export function Tooltip({children, content}: {
}): React.ReactElement
{
return (
<Float mode={"hover"} content={content} className={"tooltip"} floatingOptions={{ placement: "top" }}>
<Float mode={"hover"} content={content} className={"tooltip"} role={"tooltip"} floatingOptions={{ placement: "top" }}>
{children}
</Float>
);