123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633 |
- import { rectToClientRect, computePosition as computePosition$1 } from '@floating-ui/core';
- export { arrow, autoPlacement, detectOverflow, flip, hide, inline, limitShift, offset, shift, size } from '@floating-ui/core';
- function isWindow(value) {
- return value && value.document && value.location && value.alert && value.setInterval;
- }
- function getWindow(node) {
- if (node == null) {
- return window;
- }
- if (!isWindow(node)) {
- const ownerDocument = node.ownerDocument;
- return ownerDocument ? ownerDocument.defaultView || window : window;
- }
- return node;
- }
- function getComputedStyle(element) {
- return getWindow(element).getComputedStyle(element);
- }
- function getNodeName(node) {
- return isWindow(node) ? '' : node ? (node.nodeName || '').toLowerCase() : '';
- }
- function getUAString() {
- const uaData = navigator.userAgentData;
- if (uaData != null && uaData.brands) {
- return uaData.brands.map(item => item.brand + "/" + item.version).join(' ');
- }
- return navigator.userAgent;
- }
- function isHTMLElement(value) {
- return value instanceof getWindow(value).HTMLElement;
- }
- function isElement(value) {
- return value instanceof getWindow(value).Element;
- }
- function isNode(value) {
- return value instanceof getWindow(value).Node;
- }
- function isShadowRoot(node) {
- // Browsers without `ShadowRoot` support
- if (typeof ShadowRoot === 'undefined') {
- return false;
- }
- const OwnElement = getWindow(node).ShadowRoot;
- return node instanceof OwnElement || node instanceof ShadowRoot;
- }
- function isOverflowElement(element) {
- // Firefox wants us to check `-x` and `-y` variations as well
- const {
- overflow,
- overflowX,
- overflowY,
- display
- } = getComputedStyle(element);
- return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
- }
- function isTableElement(element) {
- return ['table', 'td', 'th'].includes(getNodeName(element));
- }
- function isContainingBlock(element) {
- // TODO: Try and use feature detection here instead
- const isFirefox = /firefox/i.test(getUAString());
- const css = getComputedStyle(element); // This is non-exhaustive but covers the most common CSS properties that
- // create a containing block.
- // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
- return css.transform !== 'none' || css.perspective !== 'none' || isFirefox && css.willChange === 'filter' || isFirefox && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective'].some(value => css.willChange.includes(value)) || ['paint', 'layout', 'strict', 'content'].some( // TS 4.1 compat
- value => {
- const contain = css.contain;
- return contain != null ? contain.includes(value) : false;
- });
- }
- function isLayoutViewport() {
- // Not Safari
- return !/^((?!chrome|android).)*safari/i.test(getUAString()); // Feature detection for this fails in various ways
- // • Always-visible scrollbar or not
- // • Width of <html>, etc.
- // const vV = win.visualViewport;
- // return vV ? Math.abs(win.innerWidth / vV.scale - vV.width) < 0.5 : true;
- }
- function isLastTraversableNode(node) {
- return ['html', 'body', '#document'].includes(getNodeName(node));
- }
- const min = Math.min;
- const max = Math.max;
- const round = Math.round;
- function getBoundingClientRect(element, includeScale, isFixedStrategy) {
- var _win$visualViewport$o, _win$visualViewport, _win$visualViewport$o2, _win$visualViewport2;
- if (includeScale === void 0) {
- includeScale = false;
- }
- if (isFixedStrategy === void 0) {
- isFixedStrategy = false;
- }
- const clientRect = element.getBoundingClientRect();
- let scaleX = 1;
- let scaleY = 1;
- if (includeScale && isHTMLElement(element)) {
- scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1;
- scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1;
- }
- const win = isElement(element) ? getWindow(element) : window;
- const addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
- const x = (clientRect.left + (addVisualOffsets ? (_win$visualViewport$o = (_win$visualViewport = win.visualViewport) == null ? void 0 : _win$visualViewport.offsetLeft) != null ? _win$visualViewport$o : 0 : 0)) / scaleX;
- const y = (clientRect.top + (addVisualOffsets ? (_win$visualViewport$o2 = (_win$visualViewport2 = win.visualViewport) == null ? void 0 : _win$visualViewport2.offsetTop) != null ? _win$visualViewport$o2 : 0 : 0)) / scaleY;
- const width = clientRect.width / scaleX;
- const height = clientRect.height / scaleY;
- return {
- width,
- height,
- top: y,
- right: x + width,
- bottom: y + height,
- left: x,
- x,
- y
- };
- }
- function getDocumentElement(node) {
- return ((isNode(node) ? node.ownerDocument : node.document) || window.document).documentElement;
- }
- function getNodeScroll(element) {
- if (isElement(element)) {
- return {
- scrollLeft: element.scrollLeft,
- scrollTop: element.scrollTop
- };
- }
- return {
- scrollLeft: element.pageXOffset,
- scrollTop: element.pageYOffset
- };
- }
- function getWindowScrollBarX(element) {
- // If <html> has a CSS width greater than the viewport, then this will be
- // incorrect for RTL.
- return getBoundingClientRect(getDocumentElement(element)).left + getNodeScroll(element).scrollLeft;
- }
- function isScaled(element) {
- const rect = getBoundingClientRect(element);
- return round(rect.width) !== element.offsetWidth || round(rect.height) !== element.offsetHeight;
- }
- function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
- const isOffsetParentAnElement = isHTMLElement(offsetParent);
- const documentElement = getDocumentElement(offsetParent);
- const rect = getBoundingClientRect(element, // @ts-ignore - checked above (TS 4.1 compat)
- isOffsetParentAnElement && isScaled(offsetParent), strategy === 'fixed');
- let scroll = {
- scrollLeft: 0,
- scrollTop: 0
- };
- const offsets = {
- x: 0,
- y: 0
- };
- if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
- if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
- scroll = getNodeScroll(offsetParent);
- }
- if (isHTMLElement(offsetParent)) {
- const offsetRect = getBoundingClientRect(offsetParent, true);
- offsets.x = offsetRect.x + offsetParent.clientLeft;
- offsets.y = offsetRect.y + offsetParent.clientTop;
- } else if (documentElement) {
- offsets.x = getWindowScrollBarX(documentElement);
- }
- }
- return {
- x: rect.left + scroll.scrollLeft - offsets.x,
- y: rect.top + scroll.scrollTop - offsets.y,
- width: rect.width,
- height: rect.height
- };
- }
- function getParentNode(node) {
- if (getNodeName(node) === 'html') {
- return node;
- }
- return (// this is a quicker (but less type safe) way to save quite some bytes from the bundle
- // @ts-ignore
- node.assignedSlot || // step into the shadow DOM of the parent of a slotted node
- node.parentNode || ( // DOM Element detected
- isShadowRoot(node) ? node.host : null) || // ShadowRoot detected
- getDocumentElement(node) // fallback
- );
- }
- function getTrueOffsetParent(element) {
- if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') {
- return null;
- }
- return element.offsetParent;
- }
- function getContainingBlock(element) {
- let currentNode = getParentNode(element);
- if (isShadowRoot(currentNode)) {
- currentNode = currentNode.host;
- }
- while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
- if (isContainingBlock(currentNode)) {
- return currentNode;
- } else {
- const parent = currentNode.parentNode;
- currentNode = isShadowRoot(parent) ? parent.host : parent;
- }
- }
- return null;
- } // Gets the closest ancestor positioned element. Handles some edge cases,
- // such as table ancestors and cross browser bugs.
- function getOffsetParent(element) {
- const window = getWindow(element);
- let offsetParent = getTrueOffsetParent(element);
- while (offsetParent && isTableElement(offsetParent) && getComputedStyle(offsetParent).position === 'static') {
- offsetParent = getTrueOffsetParent(offsetParent);
- }
- if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static' && !isContainingBlock(offsetParent))) {
- return window;
- }
- return offsetParent || getContainingBlock(element) || window;
- }
- function getDimensions(element) {
- if (isHTMLElement(element)) {
- return {
- width: element.offsetWidth,
- height: element.offsetHeight
- };
- }
- const rect = getBoundingClientRect(element);
- return {
- width: rect.width,
- height: rect.height
- };
- }
- function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
- let {
- rect,
- offsetParent,
- strategy
- } = _ref;
- const isOffsetParentAnElement = isHTMLElement(offsetParent);
- const documentElement = getDocumentElement(offsetParent);
- if (offsetParent === documentElement) {
- return rect;
- }
- let scroll = {
- scrollLeft: 0,
- scrollTop: 0
- };
- const offsets = {
- x: 0,
- y: 0
- };
- if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
- if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
- scroll = getNodeScroll(offsetParent);
- }
- if (isHTMLElement(offsetParent)) {
- const offsetRect = getBoundingClientRect(offsetParent, true);
- offsets.x = offsetRect.x + offsetParent.clientLeft;
- offsets.y = offsetRect.y + offsetParent.clientTop;
- } // This doesn't appear to be need to be negated.
- // else if (documentElement) {
- // offsets.x = getWindowScrollBarX(documentElement);
- // }
- }
- return { ...rect,
- x: rect.x - scroll.scrollLeft + offsets.x,
- y: rect.y - scroll.scrollTop + offsets.y
- };
- }
- function getViewportRect(element, strategy) {
- const win = getWindow(element);
- const html = getDocumentElement(element);
- const visualViewport = win.visualViewport;
- let width = html.clientWidth;
- let height = html.clientHeight;
- let x = 0;
- let y = 0;
- if (visualViewport) {
- width = visualViewport.width;
- height = visualViewport.height;
- const layoutViewport = isLayoutViewport();
- if (layoutViewport || !layoutViewport && strategy === 'fixed') {
- x = visualViewport.offsetLeft;
- y = visualViewport.offsetTop;
- }
- }
- return {
- width,
- height,
- x,
- y
- };
- }
- // of the `<html>` and `<body>` rect bounds if horizontally scrollable
- function getDocumentRect(element) {
- var _element$ownerDocumen;
- const html = getDocumentElement(element);
- const scroll = getNodeScroll(element);
- const body = (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body;
- const width = max(html.scrollWidth, html.clientWidth, body ? body.scrollWidth : 0, body ? body.clientWidth : 0);
- const height = max(html.scrollHeight, html.clientHeight, body ? body.scrollHeight : 0, body ? body.clientHeight : 0);
- let x = -scroll.scrollLeft + getWindowScrollBarX(element);
- const y = -scroll.scrollTop;
- if (getComputedStyle(body || html).direction === 'rtl') {
- x += max(html.clientWidth, body ? body.clientWidth : 0) - width;
- }
- return {
- width,
- height,
- x,
- y
- };
- }
- function getNearestOverflowAncestor(node) {
- const parentNode = getParentNode(node);
- if (isLastTraversableNode(parentNode)) {
- // @ts-ignore assume body is always available
- return node.ownerDocument.body;
- }
- if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
- return parentNode;
- }
- return getNearestOverflowAncestor(parentNode);
- }
- function getOverflowAncestors(node, list) {
- var _node$ownerDocument;
- if (list === void 0) {
- list = [];
- }
- const scrollableAncestor = getNearestOverflowAncestor(node);
- const isBody = scrollableAncestor === ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.body);
- const win = getWindow(scrollableAncestor);
- const target = isBody ? [win].concat(win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []) : scrollableAncestor;
- const updatedList = list.concat(target);
- return isBody ? updatedList : // @ts-ignore: isBody tells us target will be an HTMLElement here
- updatedList.concat(getOverflowAncestors(target));
- }
- function contains(parent, child) {
- const rootNode = child.getRootNode == null ? void 0 : child.getRootNode(); // First, attempt with faster native method
- if (parent.contains(child)) {
- return true;
- } // then fallback to custom implementation with Shadow DOM support
- else if (rootNode && isShadowRoot(rootNode)) {
- let next = child;
- do {
- // use `===` replace node.isSameNode()
- if (next && parent === next) {
- return true;
- } // @ts-ignore: need a better way to handle this...
- next = next.parentNode || next.host;
- } while (next);
- }
- return false;
- }
- function getNearestParentCapableOfEscapingClipping(element, clippingAncestors) {
- let currentNode = element;
- while (currentNode && !isLastTraversableNode(currentNode) && // @ts-expect-error
- !clippingAncestors.includes(currentNode)) {
- if (isElement(currentNode) && ['absolute', 'fixed'].includes(getComputedStyle(currentNode).position)) {
- break;
- }
- const parentNode = getParentNode(currentNode);
- currentNode = isShadowRoot(parentNode) ? parentNode.host : parentNode;
- }
- return currentNode;
- }
- function getInnerBoundingClientRect(element, strategy) {
- const clientRect = getBoundingClientRect(element, false, strategy === 'fixed');
- const top = clientRect.top + element.clientTop;
- const left = clientRect.left + element.clientLeft;
- return {
- top,
- left,
- x: left,
- y: top,
- right: left + element.clientWidth,
- bottom: top + element.clientHeight,
- width: element.clientWidth,
- height: element.clientHeight
- };
- }
- function getClientRectFromClippingAncestor(element, clippingParent, strategy) {
- if (clippingParent === 'viewport') {
- return rectToClientRect(getViewportRect(element, strategy));
- }
- if (isElement(clippingParent)) {
- return getInnerBoundingClientRect(clippingParent, strategy);
- }
- return rectToClientRect(getDocumentRect(getDocumentElement(element)));
- } // A "clipping ancestor" is an overflowable container with the characteristic of
- // clipping (or hiding) overflowing elements with a position different from
- // `initial`
- function getClippingAncestors(element) {
- const clippingAncestors = getOverflowAncestors(element);
- const nearestEscapableParent = getNearestParentCapableOfEscapingClipping(element, clippingAncestors);
- let clipperElement = null;
- if (nearestEscapableParent && isHTMLElement(nearestEscapableParent)) {
- const offsetParent = getOffsetParent(nearestEscapableParent);
- if (isOverflowElement(nearestEscapableParent)) {
- clipperElement = nearestEscapableParent;
- } else if (isHTMLElement(offsetParent)) {
- clipperElement = offsetParent;
- }
- }
- if (!isElement(clipperElement)) {
- return [];
- } // @ts-ignore isElement check ensures we return Array<Element>
- return clippingAncestors.filter(clippingAncestors => clipperElement && isElement(clippingAncestors) && contains(clippingAncestors, clipperElement) && getNodeName(clippingAncestors) !== 'body');
- } // Gets the maximum area that the element is visible in due to any number of
- // clipping ancestors
- function getClippingRect(_ref) {
- let {
- element,
- boundary,
- rootBoundary,
- strategy
- } = _ref;
- const mainClippingAncestors = boundary === 'clippingAncestors' ? getClippingAncestors(element) : [].concat(boundary);
- const clippingAncestors = [...mainClippingAncestors, rootBoundary];
- const firstClippingAncestor = clippingAncestors[0];
- const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
- const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
- accRect.top = max(rect.top, accRect.top);
- accRect.right = min(rect.right, accRect.right);
- accRect.bottom = min(rect.bottom, accRect.bottom);
- accRect.left = max(rect.left, accRect.left);
- return accRect;
- }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
- return {
- width: clippingRect.right - clippingRect.left,
- height: clippingRect.bottom - clippingRect.top,
- x: clippingRect.left,
- y: clippingRect.top
- };
- }
- const platform = {
- getClippingRect,
- convertOffsetParentRelativeRectToViewportRelativeRect,
- isElement,
- getDimensions,
- getOffsetParent,
- getDocumentElement,
- getElementRects: _ref => {
- let {
- reference,
- floating,
- strategy
- } = _ref;
- return {
- reference: getRectRelativeToOffsetParent(reference, getOffsetParent(floating), strategy),
- floating: { ...getDimensions(floating),
- x: 0,
- y: 0
- }
- };
- },
- getClientRects: element => Array.from(element.getClientRects()),
- isRTL: element => getComputedStyle(element).direction === 'rtl'
- };
- /**
- * Automatically updates the position of the floating element when necessary.
- * @see https://floating-ui.com/docs/autoUpdate
- */
- function autoUpdate(reference, floating, update, options) {
- if (options === void 0) {
- options = {};
- }
- const {
- ancestorScroll: _ancestorScroll = true,
- ancestorResize = true,
- elementResize = true,
- animationFrame = false
- } = options;
- const ancestorScroll = _ancestorScroll && !animationFrame;
- const ancestors = ancestorScroll || ancestorResize ? [...(isElement(reference) ? getOverflowAncestors(reference) : []), ...getOverflowAncestors(floating)] : [];
- ancestors.forEach(ancestor => {
- ancestorScroll && ancestor.addEventListener('scroll', update, {
- passive: true
- });
- ancestorResize && ancestor.addEventListener('resize', update);
- });
- let observer = null;
- if (elementResize) {
- let initialUpdate = true;
- observer = new ResizeObserver(() => {
- if (!initialUpdate) {
- update();
- }
- initialUpdate = false;
- });
- isElement(reference) && !animationFrame && observer.observe(reference);
- observer.observe(floating);
- }
- let frameId;
- let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
- if (animationFrame) {
- frameLoop();
- }
- function frameLoop() {
- const nextRefRect = getBoundingClientRect(reference);
- if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
- update();
- }
- prevRefRect = nextRefRect;
- frameId = requestAnimationFrame(frameLoop);
- }
- update();
- return () => {
- var _observer;
- ancestors.forEach(ancestor => {
- ancestorScroll && ancestor.removeEventListener('scroll', update);
- ancestorResize && ancestor.removeEventListener('resize', update);
- });
- (_observer = observer) == null ? void 0 : _observer.disconnect();
- observer = null;
- if (animationFrame) {
- cancelAnimationFrame(frameId);
- }
- };
- }
- /**
- * Computes the `x` and `y` coordinates that will place the floating element
- * next to a reference element when it is given a certain CSS positioning
- * strategy.
- */
- const computePosition = (reference, floating, options) => computePosition$1(reference, floating, {
- platform,
- ...options
- });
- export { autoUpdate, computePosition, getOverflowAncestors, platform };
|