mirror of
https://github.com/zoriya/v10.git
synced 2026-08-16 02:45:09 +00:00
feat: idiomatic html markup, use popover API, add safe polygon utility (#143)
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Wesley Luyten
@@ -15,6 +15,109 @@ export function activeElement(
|
||||
return element;
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the document or shadow root of a node, not the node itself which can lead to bugs.
|
||||
* https://developer.mozilla.org/en-US/docs/Web/API/Node/getRootNode#return_value
|
||||
* @param node - The node to get the root node from.
|
||||
*/
|
||||
export function getDocumentOrShadowRoot(
|
||||
node: Node,
|
||||
): Document | ShadowRoot | null {
|
||||
const rootNode = node?.getRootNode?.();
|
||||
if (rootNode instanceof ShadowRoot || rootNode instanceof Document) {
|
||||
return rootNode;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
export function getDocument(node: Element | null): Document {
|
||||
return node?.ownerDocument ?? document;
|
||||
}
|
||||
|
||||
export function isElement(value: unknown): value is Element {
|
||||
if (!hasWindow()) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return value instanceof Element || value instanceof getWindow(value).Element;
|
||||
}
|
||||
|
||||
export function contains(parent?: Element | null, child?: Element | null): boolean {
|
||||
if (!parent || !child) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const rootNode = child.getRootNode?.();
|
||||
|
||||
// First, attempt with faster native method
|
||||
if (parent.contains(child)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// then fallback to custom implementation with Shadow DOM support
|
||||
if (rootNode && isShadowRoot(rootNode)) {
|
||||
let next = child;
|
||||
while (next) {
|
||||
if (parent === next) {
|
||||
return true;
|
||||
}
|
||||
// @ts-expect-error - next.host is not defined in the type
|
||||
next = next.parentNode || next.host;
|
||||
}
|
||||
}
|
||||
|
||||
// Give up, the result is false
|
||||
return false;
|
||||
}
|
||||
|
||||
export function getTarget(event: Event): EventTarget | null {
|
||||
if ('composedPath' in event) {
|
||||
return event.composedPath()[0] ?? null;
|
||||
}
|
||||
|
||||
// TS thinks `event` is of type never as it assumes all browsers support
|
||||
// `composedPath()`, but browsers without shadow DOM don't.
|
||||
return (event as Event).target;
|
||||
}
|
||||
|
||||
export function isShadowRoot(value: unknown): value is ShadowRoot {
|
||||
if (!hasWindow() || typeof ShadowRoot === 'undefined') {
|
||||
return false;
|
||||
}
|
||||
|
||||
return (
|
||||
value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot
|
||||
);
|
||||
}
|
||||
|
||||
function hasWindow() {
|
||||
return typeof window !== 'undefined';
|
||||
}
|
||||
|
||||
export function getWindow(node: any): typeof window {
|
||||
return node?.ownerDocument?.defaultView || window;
|
||||
}
|
||||
|
||||
export interface FloatingNodeType {
|
||||
id: string;
|
||||
parentId: string | null;
|
||||
context: FloatingContext;
|
||||
};
|
||||
|
||||
interface FloatingContext {
|
||||
open: boolean;
|
||||
}
|
||||
|
||||
export function getNodeChildren(
|
||||
nodes: Array<FloatingNodeType>,
|
||||
id: string | undefined,
|
||||
onlyOpenChildren = true,
|
||||
): Array<FloatingNodeType> {
|
||||
const directChildren = nodes.filter(
|
||||
node => node.parentId === id && (!onlyOpenChildren || node.context?.open),
|
||||
);
|
||||
return directChildren.flatMap(child => [
|
||||
child,
|
||||
...getNodeChildren(nodes, child.id, onlyOpenChildren),
|
||||
]);
|
||||
}
|
||||
|
||||
@@ -2,4 +2,5 @@ export * from './attributes';
|
||||
export * from './element';
|
||||
export * from './event';
|
||||
export * from './keyboard';
|
||||
export * from './safe-polygon';
|
||||
export * from './shadow-dom';
|
||||
|
||||
@@ -0,0 +1,445 @@
|
||||
import type { FloatingNodeType } from './element';
|
||||
import { contains, getNodeChildren, getTarget, isElement } from './element';
|
||||
|
||||
type Point = [number, number];
|
||||
type Polygon = Point[];
|
||||
|
||||
interface Rect {
|
||||
x: number;
|
||||
y: number;
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
interface HandleClose {
|
||||
(context: HandleCloseContext): (event: MouseEvent) => void;
|
||||
__options?: SafePolygonOptions;
|
||||
}
|
||||
|
||||
interface HandleCloseContext {
|
||||
x: number;
|
||||
y: number;
|
||||
placement: string;
|
||||
elements: Elements;
|
||||
onClose: () => void;
|
||||
nodeId?: string;
|
||||
tree?: {
|
||||
nodesRef: {
|
||||
current: Array<FloatingNodeType>;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
interface Elements {
|
||||
domReference: HTMLElement;
|
||||
floating: HTMLElement;
|
||||
}
|
||||
|
||||
type Side = 'top' | 'right' | 'bottom' | 'left';
|
||||
|
||||
function clearTimeoutIfSet(timeoutRef: { current: number }) {
|
||||
if (timeoutRef.current !== -1) {
|
||||
clearTimeout(timeoutRef.current);
|
||||
timeoutRef.current = -1;
|
||||
}
|
||||
}
|
||||
|
||||
function isPointInPolygon(point: Point, polygon: Polygon) {
|
||||
const [x, y] = point;
|
||||
let isInside = false;
|
||||
const length = polygon.length;
|
||||
for (let i = 0, j = length - 1; i < length; j = i++) {
|
||||
const [xi, yi] = polygon[i] || [0, 0];
|
||||
const [xj, yj] = polygon[j] || [0, 0];
|
||||
const intersect
|
||||
= (yi >= y) !== (yj >= y) && x <= ((xj - xi) * (y - yi)) / (yj - yi) + xi;
|
||||
if (intersect) {
|
||||
isInside = !isInside;
|
||||
}
|
||||
}
|
||||
return isInside;
|
||||
}
|
||||
|
||||
function isInside(point: Point, rect: Rect) {
|
||||
return (
|
||||
point[0] >= rect.x
|
||||
&& point[0] <= rect.x + rect.width
|
||||
&& point[1] >= rect.y
|
||||
&& point[1] <= rect.y + rect.height
|
||||
);
|
||||
}
|
||||
|
||||
export interface SafePolygonOptions {
|
||||
buffer?: number;
|
||||
blockPointerEvents?: boolean;
|
||||
requireIntent?: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Generates a safe polygon area that the user can traverse without closing the
|
||||
* floating element once leaving the reference element.
|
||||
* @see https://floating-ui.com/docs/useHover#safepolygon
|
||||
*/
|
||||
export function safePolygon(options: SafePolygonOptions = {}): HandleClose {
|
||||
const {
|
||||
buffer = 0.5,
|
||||
blockPointerEvents = false,
|
||||
requireIntent = true,
|
||||
} = options;
|
||||
|
||||
const timeoutRef = { current: -1 };
|
||||
|
||||
let hasLanded = false;
|
||||
let lastX: number | null = null;
|
||||
let lastY: number | null = null;
|
||||
let lastCursorTime
|
||||
= typeof performance !== 'undefined' ? performance.now() : 0;
|
||||
|
||||
function getCursorSpeed(x: number, y: number): number | null {
|
||||
const currentTime = performance.now();
|
||||
const elapsedTime = currentTime - lastCursorTime;
|
||||
|
||||
if (lastX === null || lastY === null || elapsedTime === 0) {
|
||||
lastX = x;
|
||||
lastY = y;
|
||||
lastCursorTime = currentTime;
|
||||
return null;
|
||||
}
|
||||
|
||||
const deltaX = x - lastX;
|
||||
const deltaY = y - lastY;
|
||||
const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
|
||||
const speed = distance / elapsedTime; // px / ms
|
||||
|
||||
lastX = x;
|
||||
lastY = y;
|
||||
lastCursorTime = currentTime;
|
||||
|
||||
return speed;
|
||||
}
|
||||
|
||||
const fn: HandleClose = ({
|
||||
x,
|
||||
y,
|
||||
placement,
|
||||
elements,
|
||||
onClose,
|
||||
nodeId,
|
||||
tree,
|
||||
}) => {
|
||||
return function onMouseMove(event: MouseEvent) {
|
||||
function close() {
|
||||
clearTimeoutIfSet(timeoutRef);
|
||||
onClose();
|
||||
}
|
||||
|
||||
clearTimeoutIfSet(timeoutRef);
|
||||
|
||||
if (
|
||||
!elements.domReference
|
||||
|| !elements.floating
|
||||
|| placement == null
|
||||
|| x == null
|
||||
|| y == null
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
const { clientX, clientY } = event;
|
||||
const clientPoint: Point = [clientX, clientY];
|
||||
const target = getTarget(event) as Element | null;
|
||||
const isLeave = event.type === 'mouseleave';
|
||||
const isOverFloatingEl = contains(elements.floating, target);
|
||||
const isOverReferenceEl = contains(elements.domReference, target);
|
||||
const refRect = elements.domReference.getBoundingClientRect();
|
||||
const rect = elements.floating.getBoundingClientRect();
|
||||
const side = placement.split('-')[0] as Side;
|
||||
const cursorLeaveFromRight = x > rect.right - rect.width / 2;
|
||||
const cursorLeaveFromBottom = y > rect.bottom - rect.height / 2;
|
||||
const isOverReferenceRect = isInside(clientPoint, refRect);
|
||||
const isFloatingWider = rect.width > refRect.width;
|
||||
const isFloatingTaller = rect.height > refRect.height;
|
||||
const left = (isFloatingWider ? refRect : rect).left;
|
||||
const right = (isFloatingWider ? refRect : rect).right;
|
||||
const top = (isFloatingTaller ? refRect : rect).top;
|
||||
const bottom = (isFloatingTaller ? refRect : rect).bottom;
|
||||
|
||||
if (isOverFloatingEl) {
|
||||
hasLanded = true;
|
||||
|
||||
if (!isLeave) {
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
if (isOverReferenceEl) {
|
||||
hasLanded = false;
|
||||
}
|
||||
|
||||
if (isOverReferenceEl && !isLeave) {
|
||||
hasLanded = true;
|
||||
return;
|
||||
}
|
||||
|
||||
// Prevent overlapping floating element from being stuck in an open-close
|
||||
// loop: https://github.com/floating-ui/floating-ui/issues/1910
|
||||
if (
|
||||
isLeave
|
||||
&& isElement(event.relatedTarget)
|
||||
&& contains(elements.floating, event.relatedTarget)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If any nested child is open, abort.
|
||||
if (tree && getNodeChildren(tree.nodesRef.current, nodeId).length) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If the pointer is leaving from the opposite side, the "buffer" logic
|
||||
// creates a point where the floating element remains open, but should be
|
||||
// ignored.
|
||||
// A constant of 1 handles floating point rounding errors.
|
||||
if (
|
||||
(side === 'top' && y >= refRect.bottom - 1)
|
||||
|| (side === 'bottom' && y <= refRect.top + 1)
|
||||
|| (side === 'left' && x >= refRect.right - 1)
|
||||
|| (side === 'right' && x <= refRect.left + 1)
|
||||
) {
|
||||
return close();
|
||||
}
|
||||
|
||||
// Ignore when the cursor is within the rectangular trough between the
|
||||
// two elements. Since the triangle is created from the cursor point,
|
||||
// which can start beyond the ref element's edge, traversing back and
|
||||
// forth from the ref to the floating element can cause it to close. This
|
||||
// ensures it always remains open in that case.
|
||||
let rectPoly: Point[] = [];
|
||||
|
||||
switch (side) {
|
||||
case 'top':
|
||||
rectPoly = [
|
||||
[left, refRect.top + 1],
|
||||
[left, rect.bottom - 1],
|
||||
[right, rect.bottom - 1],
|
||||
[right, refRect.top + 1],
|
||||
];
|
||||
break;
|
||||
case 'bottom':
|
||||
rectPoly = [
|
||||
[left, rect.top + 1],
|
||||
[left, refRect.bottom - 1],
|
||||
[right, refRect.bottom - 1],
|
||||
[right, rect.top + 1],
|
||||
];
|
||||
break;
|
||||
case 'left':
|
||||
rectPoly = [
|
||||
[rect.right - 1, bottom],
|
||||
[rect.right - 1, top],
|
||||
[refRect.left + 1, top],
|
||||
[refRect.left + 1, bottom],
|
||||
];
|
||||
break;
|
||||
case 'right':
|
||||
rectPoly = [
|
||||
[refRect.right - 1, bottom],
|
||||
[refRect.right - 1, top],
|
||||
[rect.left + 1, top],
|
||||
[rect.left + 1, bottom],
|
||||
];
|
||||
break;
|
||||
default:
|
||||
rectPoly = [];
|
||||
break;
|
||||
}
|
||||
|
||||
function getPolygon([x, y]: Point): Array<Point> {
|
||||
switch (side) {
|
||||
case 'top': {
|
||||
const cursorPointOne: Point = [
|
||||
isFloatingWider
|
||||
? x + buffer / 2
|
||||
: cursorLeaveFromRight
|
||||
? x + buffer * 4
|
||||
: x - buffer * 4,
|
||||
y + buffer + 1,
|
||||
];
|
||||
const cursorPointTwo: Point = [
|
||||
isFloatingWider
|
||||
? x - buffer / 2
|
||||
: cursorLeaveFromRight
|
||||
? x + buffer * 4
|
||||
: x - buffer * 4,
|
||||
y + buffer + 1,
|
||||
];
|
||||
const commonPoints: [Point, Point] = [
|
||||
[
|
||||
rect.left,
|
||||
cursorLeaveFromRight
|
||||
? rect.bottom - buffer
|
||||
: isFloatingWider
|
||||
? rect.bottom - buffer
|
||||
: rect.top,
|
||||
],
|
||||
[
|
||||
rect.right,
|
||||
cursorLeaveFromRight
|
||||
? isFloatingWider
|
||||
? rect.bottom - buffer
|
||||
: rect.top
|
||||
: rect.bottom - buffer,
|
||||
],
|
||||
];
|
||||
|
||||
return [cursorPointOne, cursorPointTwo, ...commonPoints];
|
||||
}
|
||||
case 'bottom': {
|
||||
const cursorPointOne: Point = [
|
||||
isFloatingWider
|
||||
? x + buffer / 2
|
||||
: cursorLeaveFromRight
|
||||
? x + buffer * 4
|
||||
: x - buffer * 4,
|
||||
y - buffer,
|
||||
];
|
||||
const cursorPointTwo: Point = [
|
||||
isFloatingWider
|
||||
? x - buffer / 2
|
||||
: cursorLeaveFromRight
|
||||
? x + buffer * 4
|
||||
: x - buffer * 4,
|
||||
y - buffer,
|
||||
];
|
||||
const commonPoints: [Point, Point] = [
|
||||
[
|
||||
rect.left,
|
||||
cursorLeaveFromRight
|
||||
? rect.top + buffer
|
||||
: isFloatingWider
|
||||
? rect.top + buffer
|
||||
: rect.bottom,
|
||||
],
|
||||
[
|
||||
rect.right,
|
||||
cursorLeaveFromRight
|
||||
? isFloatingWider
|
||||
? rect.top + buffer
|
||||
: rect.bottom
|
||||
: rect.top + buffer,
|
||||
],
|
||||
];
|
||||
|
||||
return [cursorPointOne, cursorPointTwo, ...commonPoints];
|
||||
}
|
||||
case 'left': {
|
||||
const cursorPointOne: Point = [
|
||||
x + buffer + 1,
|
||||
isFloatingTaller
|
||||
? y + buffer / 2
|
||||
: cursorLeaveFromBottom
|
||||
? y + buffer * 4
|
||||
: y - buffer * 4,
|
||||
];
|
||||
const cursorPointTwo: Point = [
|
||||
x + buffer + 1,
|
||||
isFloatingTaller
|
||||
? y - buffer / 2
|
||||
: cursorLeaveFromBottom
|
||||
? y + buffer * 4
|
||||
: y - buffer * 4,
|
||||
];
|
||||
const commonPoints: [Point, Point] = [
|
||||
[
|
||||
cursorLeaveFromBottom
|
||||
? rect.right - buffer
|
||||
: isFloatingTaller
|
||||
? rect.right - buffer
|
||||
: rect.left,
|
||||
rect.top,
|
||||
],
|
||||
[
|
||||
cursorLeaveFromBottom
|
||||
? isFloatingTaller
|
||||
? rect.right - buffer
|
||||
: rect.left
|
||||
: rect.right - buffer,
|
||||
rect.bottom,
|
||||
],
|
||||
];
|
||||
|
||||
return [...commonPoints, cursorPointOne, cursorPointTwo];
|
||||
}
|
||||
case 'right': {
|
||||
const cursorPointOne: Point = [
|
||||
x - buffer,
|
||||
isFloatingTaller
|
||||
? y + buffer / 2
|
||||
: cursorLeaveFromBottom
|
||||
? y + buffer * 4
|
||||
: y - buffer * 4,
|
||||
];
|
||||
const cursorPointTwo: Point = [
|
||||
x - buffer,
|
||||
isFloatingTaller
|
||||
? y - buffer / 2
|
||||
: cursorLeaveFromBottom
|
||||
? y + buffer * 4
|
||||
: y - buffer * 4,
|
||||
];
|
||||
const commonPoints: [Point, Point] = [
|
||||
[
|
||||
cursorLeaveFromBottom
|
||||
? rect.left + buffer
|
||||
: isFloatingTaller
|
||||
? rect.left + buffer
|
||||
: rect.right,
|
||||
rect.top,
|
||||
],
|
||||
[
|
||||
cursorLeaveFromBottom
|
||||
? isFloatingTaller
|
||||
? rect.left + buffer
|
||||
: rect.right
|
||||
: rect.left + buffer,
|
||||
rect.bottom,
|
||||
],
|
||||
];
|
||||
|
||||
return [cursorPointOne, cursorPointTwo, ...commonPoints];
|
||||
}
|
||||
default:
|
||||
return [[x, y]];
|
||||
}
|
||||
}
|
||||
|
||||
if (isPointInPolygon([clientX, clientY], rectPoly)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (hasLanded && !isOverReferenceRect) {
|
||||
return close();
|
||||
}
|
||||
|
||||
if (!isLeave && requireIntent) {
|
||||
const cursorSpeed = getCursorSpeed(event.clientX, event.clientY);
|
||||
const cursorSpeedThreshold = 0.1;
|
||||
if (cursorSpeed !== null && cursorSpeed < cursorSpeedThreshold) {
|
||||
return close();
|
||||
}
|
||||
}
|
||||
|
||||
if (!isPointInPolygon([clientX, clientY], getPolygon([x, y]))) {
|
||||
close();
|
||||
} else if (!hasLanded && requireIntent) {
|
||||
timeoutRef.current = window.setTimeout(close, 40);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
fn.__options = {
|
||||
blockPointerEvents,
|
||||
};
|
||||
|
||||
return fn;
|
||||
}
|
||||
Reference in New Issue
Block a user