274 lines
7.2 KiB
JavaScript
274 lines
7.2 KiB
JavaScript
|
import { arrow as arrow$1, computePosition } from '@floating-ui/dom';
|
||
|
export { autoPlacement, autoUpdate, computePosition, detectOverflow, flip, getOverflowAncestors, hide, inline, limitShift, offset, platform, shift, size } from '@floating-ui/dom';
|
||
|
import * as React from 'react';
|
||
|
import { useLayoutEffect, useEffect } from 'react';
|
||
|
import * as ReactDOM from 'react-dom';
|
||
|
|
||
|
/**
|
||
|
* Provides data to position an inner element of the floating element so that it
|
||
|
* appears centered to the reference element.
|
||
|
* This wraps the core `arrow` middleware to allow React refs as the element.
|
||
|
* @see https://floating-ui.com/docs/arrow
|
||
|
*/
|
||
|
const arrow = options => {
|
||
|
function isRef(value) {
|
||
|
return {}.hasOwnProperty.call(value, 'current');
|
||
|
}
|
||
|
return {
|
||
|
name: 'arrow',
|
||
|
options,
|
||
|
fn(state) {
|
||
|
const {
|
||
|
element,
|
||
|
padding
|
||
|
} = typeof options === 'function' ? options(state) : options;
|
||
|
if (element && isRef(element)) {
|
||
|
if (element.current != null) {
|
||
|
return arrow$1({
|
||
|
element: element.current,
|
||
|
padding
|
||
|
}).fn(state);
|
||
|
}
|
||
|
return {};
|
||
|
}
|
||
|
if (element) {
|
||
|
return arrow$1({
|
||
|
element,
|
||
|
padding
|
||
|
}).fn(state);
|
||
|
}
|
||
|
return {};
|
||
|
}
|
||
|
};
|
||
|
};
|
||
|
|
||
|
var index = typeof document !== 'undefined' ? useLayoutEffect : useEffect;
|
||
|
|
||
|
// Fork of `fast-deep-equal` that only does the comparisons we need and compares
|
||
|
// functions
|
||
|
function deepEqual(a, b) {
|
||
|
if (a === b) {
|
||
|
return true;
|
||
|
}
|
||
|
if (typeof a !== typeof b) {
|
||
|
return false;
|
||
|
}
|
||
|
if (typeof a === 'function' && a.toString() === b.toString()) {
|
||
|
return true;
|
||
|
}
|
||
|
let length;
|
||
|
let i;
|
||
|
let keys;
|
||
|
if (a && b && typeof a === 'object') {
|
||
|
if (Array.isArray(a)) {
|
||
|
length = a.length;
|
||
|
if (length !== b.length) return false;
|
||
|
for (i = length; i-- !== 0;) {
|
||
|
if (!deepEqual(a[i], b[i])) {
|
||
|
return false;
|
||
|
}
|
||
|
}
|
||
|
return true;
|
||
|
}
|
||
|
keys = Object.keys(a);
|
||
|
length = keys.length;
|
||
|
if (length !== Object.keys(b).length) {
|
||
|
return false;
|
||
|
}
|
||
|
for (i = length; i-- !== 0;) {
|
||
|
if (!{}.hasOwnProperty.call(b, keys[i])) {
|
||
|
return false;
|
||
|
}
|
||
|
}
|
||
|
for (i = length; i-- !== 0;) {
|
||
|
const key = keys[i];
|
||
|
if (key === '_owner' && a.$$typeof) {
|
||
|
continue;
|
||
|
}
|
||
|
if (!deepEqual(a[key], b[key])) {
|
||
|
return false;
|
||
|
}
|
||
|
}
|
||
|
return true;
|
||
|
}
|
||
|
|
||
|
// biome-ignore lint/suspicious/noSelfCompare: in source
|
||
|
return a !== a && b !== b;
|
||
|
}
|
||
|
|
||
|
function getDPR(element) {
|
||
|
if (typeof window === 'undefined') {
|
||
|
return 1;
|
||
|
}
|
||
|
const win = element.ownerDocument.defaultView || window;
|
||
|
return win.devicePixelRatio || 1;
|
||
|
}
|
||
|
|
||
|
function roundByDPR(element, value) {
|
||
|
const dpr = getDPR(element);
|
||
|
return Math.round(value * dpr) / dpr;
|
||
|
}
|
||
|
|
||
|
function useLatestRef(value) {
|
||
|
const ref = React.useRef(value);
|
||
|
index(() => {
|
||
|
ref.current = value;
|
||
|
});
|
||
|
return ref;
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* Provides data to position a floating element.
|
||
|
* @see https://floating-ui.com/docs/useFloating
|
||
|
*/
|
||
|
function useFloating(options) {
|
||
|
if (options === void 0) {
|
||
|
options = {};
|
||
|
}
|
||
|
const {
|
||
|
placement = 'bottom',
|
||
|
strategy = 'absolute',
|
||
|
middleware = [],
|
||
|
platform,
|
||
|
elements: {
|
||
|
reference: externalReference,
|
||
|
floating: externalFloating
|
||
|
} = {},
|
||
|
transform = true,
|
||
|
whileElementsMounted,
|
||
|
open
|
||
|
} = options;
|
||
|
const [data, setData] = React.useState({
|
||
|
x: 0,
|
||
|
y: 0,
|
||
|
strategy,
|
||
|
placement,
|
||
|
middlewareData: {},
|
||
|
isPositioned: false
|
||
|
});
|
||
|
const [latestMiddleware, setLatestMiddleware] = React.useState(middleware);
|
||
|
if (!deepEqual(latestMiddleware, middleware)) {
|
||
|
setLatestMiddleware(middleware);
|
||
|
}
|
||
|
const [_reference, _setReference] = React.useState(null);
|
||
|
const [_floating, _setFloating] = React.useState(null);
|
||
|
const setReference = React.useCallback(node => {
|
||
|
if (node !== referenceRef.current) {
|
||
|
referenceRef.current = node;
|
||
|
_setReference(node);
|
||
|
}
|
||
|
}, []);
|
||
|
const setFloating = React.useCallback(node => {
|
||
|
if (node !== floatingRef.current) {
|
||
|
floatingRef.current = node;
|
||
|
_setFloating(node);
|
||
|
}
|
||
|
}, []);
|
||
|
const referenceEl = externalReference || _reference;
|
||
|
const floatingEl = externalFloating || _floating;
|
||
|
const referenceRef = React.useRef(null);
|
||
|
const floatingRef = React.useRef(null);
|
||
|
const dataRef = React.useRef(data);
|
||
|
const hasWhileElementsMounted = whileElementsMounted != null;
|
||
|
const whileElementsMountedRef = useLatestRef(whileElementsMounted);
|
||
|
const platformRef = useLatestRef(platform);
|
||
|
const update = React.useCallback(() => {
|
||
|
if (!referenceRef.current || !floatingRef.current) {
|
||
|
return;
|
||
|
}
|
||
|
const config = {
|
||
|
placement,
|
||
|
strategy,
|
||
|
middleware: latestMiddleware
|
||
|
};
|
||
|
if (platformRef.current) {
|
||
|
config.platform = platformRef.current;
|
||
|
}
|
||
|
computePosition(referenceRef.current, floatingRef.current, config).then(data => {
|
||
|
const fullData = {
|
||
|
...data,
|
||
|
isPositioned: true
|
||
|
};
|
||
|
if (isMountedRef.current && !deepEqual(dataRef.current, fullData)) {
|
||
|
dataRef.current = fullData;
|
||
|
ReactDOM.flushSync(() => {
|
||
|
setData(fullData);
|
||
|
});
|
||
|
}
|
||
|
});
|
||
|
}, [latestMiddleware, placement, strategy, platformRef]);
|
||
|
index(() => {
|
||
|
if (open === false && dataRef.current.isPositioned) {
|
||
|
dataRef.current.isPositioned = false;
|
||
|
setData(data => ({
|
||
|
...data,
|
||
|
isPositioned: false
|
||
|
}));
|
||
|
}
|
||
|
}, [open]);
|
||
|
const isMountedRef = React.useRef(false);
|
||
|
index(() => {
|
||
|
isMountedRef.current = true;
|
||
|
return () => {
|
||
|
isMountedRef.current = false;
|
||
|
};
|
||
|
}, []);
|
||
|
|
||
|
// biome-ignore lint/correctness/useExhaustiveDependencies: `hasWhileElementsMounted` is intentionally included.
|
||
|
index(() => {
|
||
|
if (referenceEl) referenceRef.current = referenceEl;
|
||
|
if (floatingEl) floatingRef.current = floatingEl;
|
||
|
if (referenceEl && floatingEl) {
|
||
|
if (whileElementsMountedRef.current) {
|
||
|
return whileElementsMountedRef.current(referenceEl, floatingEl, update);
|
||
|
}
|
||
|
update();
|
||
|
}
|
||
|
}, [referenceEl, floatingEl, update, whileElementsMountedRef, hasWhileElementsMounted]);
|
||
|
const refs = React.useMemo(() => ({
|
||
|
reference: referenceRef,
|
||
|
floating: floatingRef,
|
||
|
setReference,
|
||
|
setFloating
|
||
|
}), [setReference, setFloating]);
|
||
|
const elements = React.useMemo(() => ({
|
||
|
reference: referenceEl,
|
||
|
floating: floatingEl
|
||
|
}), [referenceEl, floatingEl]);
|
||
|
const floatingStyles = React.useMemo(() => {
|
||
|
const initialStyles = {
|
||
|
position: strategy,
|
||
|
left: 0,
|
||
|
top: 0
|
||
|
};
|
||
|
if (!elements.floating) {
|
||
|
return initialStyles;
|
||
|
}
|
||
|
const x = roundByDPR(elements.floating, data.x);
|
||
|
const y = roundByDPR(elements.floating, data.y);
|
||
|
if (transform) {
|
||
|
return {
|
||
|
...initialStyles,
|
||
|
transform: "translate(" + x + "px, " + y + "px)",
|
||
|
...(getDPR(elements.floating) >= 1.5 && {
|
||
|
willChange: 'transform'
|
||
|
})
|
||
|
};
|
||
|
}
|
||
|
return {
|
||
|
position: strategy,
|
||
|
left: x,
|
||
|
top: y
|
||
|
};
|
||
|
}, [strategy, transform, elements.floating, data.x, data.y]);
|
||
|
return React.useMemo(() => ({
|
||
|
...data,
|
||
|
update,
|
||
|
refs,
|
||
|
elements,
|
||
|
floatingStyles
|
||
|
}), [data, update, refs, elements, floatingStyles]);
|
||
|
}
|
||
|
|
||
|
export { arrow, useFloating };
|