1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138 |
- function getSide(placement) {
- return placement.split('-')[0];
- }
- function getAlignment(placement) {
- return placement.split('-')[1];
- }
- function getMainAxisFromPlacement(placement) {
- return ['top', 'bottom'].includes(getSide(placement)) ? 'x' : 'y';
- }
- function getLengthFromAxis(axis) {
- return axis === 'y' ? 'height' : 'width';
- }
- function computeCoordsFromPlacement(_ref, placement, rtl) {
- let {
- reference,
- floating
- } = _ref;
- const commonX = reference.x + reference.width / 2 - floating.width / 2;
- const commonY = reference.y + reference.height / 2 - floating.height / 2;
- const mainAxis = getMainAxisFromPlacement(placement);
- const length = getLengthFromAxis(mainAxis);
- const commonAlign = reference[length] / 2 - floating[length] / 2;
- const side = getSide(placement);
- const isVertical = mainAxis === 'x';
- let coords;
- switch (side) {
- case 'top':
- coords = {
- x: commonX,
- y: reference.y - floating.height
- };
- break;
- case 'bottom':
- coords = {
- x: commonX,
- y: reference.y + reference.height
- };
- break;
- case 'right':
- coords = {
- x: reference.x + reference.width,
- y: commonY
- };
- break;
- case 'left':
- coords = {
- x: reference.x - floating.width,
- y: commonY
- };
- break;
- default:
- coords = {
- x: reference.x,
- y: reference.y
- };
- }
- switch (getAlignment(placement)) {
- case 'start':
- coords[mainAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
- break;
- case 'end':
- coords[mainAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
- break;
- }
- return coords;
- }
- /**
- * Computes the `x` and `y` coordinates that will place the floating element
- * next to a reference element when it is given a certain positioning strategy.
- *
- * This export does not have any `platform` interface logic. You will need to
- * write one for the platform you are using Floating UI with.
- */
- const computePosition = async (reference, floating, config) => {
- const {
- placement = 'bottom',
- strategy = 'absolute',
- middleware = [],
- platform
- } = config;
- const validMiddleware = middleware.filter(Boolean);
- const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
- if (process.env.NODE_ENV !== "production") {
- if (platform == null) {
- console.error(['Floating UI: `platform` property was not passed to config. If you', 'want to use Floating UI on the web, install @floating-ui/dom', 'instead of the /core package. Otherwise, you can create your own', '`platform`: https://floating-ui.com/docs/platform'].join(' '));
- }
- if (validMiddleware.filter(_ref => {
- let {
- name
- } = _ref;
- return name === 'autoPlacement' || name === 'flip';
- }).length > 1) {
- throw new Error(['Floating UI: duplicate `flip` and/or `autoPlacement` middleware', 'detected. This will lead to an infinite loop. Ensure only one of', 'either has been passed to the `middleware` array.'].join(' '));
- }
- if (!reference || !floating) {
- console.error(['Floating UI: The reference and/or floating element was not defined', 'when `computePosition()` was called. Ensure that both elements have', 'been created and can be measured.'].join(' '));
- }
- }
- let rects = await platform.getElementRects({
- reference,
- floating,
- strategy
- });
- let {
- x,
- y
- } = computeCoordsFromPlacement(rects, placement, rtl);
- let statefulPlacement = placement;
- let middlewareData = {};
- let resetCount = 0;
- for (let i = 0; i < validMiddleware.length; i++) {
- const {
- name,
- fn
- } = validMiddleware[i];
- const {
- x: nextX,
- y: nextY,
- data,
- reset
- } = await fn({
- x,
- y,
- initialPlacement: placement,
- placement: statefulPlacement,
- strategy,
- middlewareData,
- rects,
- platform,
- elements: {
- reference,
- floating
- }
- });
- x = nextX != null ? nextX : x;
- y = nextY != null ? nextY : y;
- middlewareData = { ...middlewareData,
- [name]: { ...middlewareData[name],
- ...data
- }
- };
- if (process.env.NODE_ENV !== "production") {
- if (resetCount > 50) {
- console.warn(['Floating UI: The middleware lifecycle appears to be running in an', 'infinite loop. This is usually caused by a `reset` continually', 'being returned without a break condition.'].join(' '));
- }
- }
- if (reset && resetCount <= 50) {
- resetCount++;
- if (typeof reset === 'object') {
- if (reset.placement) {
- statefulPlacement = reset.placement;
- }
- if (reset.rects) {
- rects = reset.rects === true ? await platform.getElementRects({
- reference,
- floating,
- strategy
- }) : reset.rects;
- }
- ({
- x,
- y
- } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
- }
- i = -1;
- continue;
- }
- }
- return {
- x,
- y,
- placement: statefulPlacement,
- strategy,
- middlewareData
- };
- };
- function expandPaddingObject(padding) {
- return {
- top: 0,
- right: 0,
- bottom: 0,
- left: 0,
- ...padding
- };
- }
- function getSideObjectFromPadding(padding) {
- return typeof padding !== 'number' ? expandPaddingObject(padding) : {
- top: padding,
- right: padding,
- bottom: padding,
- left: padding
- };
- }
- function rectToClientRect(rect) {
- return { ...rect,
- top: rect.y,
- left: rect.x,
- right: rect.x + rect.width,
- bottom: rect.y + rect.height
- };
- }
- /**
- * Resolves with an object of overflow side offsets that determine how much the
- * element is overflowing a given clipping boundary.
- * - positive = overflowing the boundary by that number of pixels
- * - negative = how many pixels left before it will overflow
- * - 0 = lies flush with the boundary
- * @see https://floating-ui.com/docs/detectOverflow
- */
- async function detectOverflow(middlewareArguments, options) {
- var _await$platform$isEle;
- if (options === void 0) {
- options = {};
- }
- const {
- x,
- y,
- platform,
- rects,
- elements,
- strategy
- } = middlewareArguments;
- const {
- boundary = 'clippingAncestors',
- rootBoundary = 'viewport',
- elementContext = 'floating',
- altBoundary = false,
- padding = 0
- } = options;
- const paddingObject = getSideObjectFromPadding(padding);
- const altContext = elementContext === 'floating' ? 'reference' : 'floating';
- const element = elements[altBoundary ? altContext : elementContext];
- const clippingClientRect = rectToClientRect(await platform.getClippingRect({
- element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
- boundary,
- rootBoundary,
- strategy
- }));
- const rect = elementContext === 'floating' ? { ...rects.floating,
- x,
- y
- } : rects.reference;
- const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
- const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
- x: 1,
- y: 1
- } : {
- x: 1,
- y: 1
- };
- const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
- rect,
- offsetParent,
- strategy
- }) : rect);
- if (process.env.NODE_ENV !== "production") ;
- return {
- top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
- bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
- left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
- right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
- };
- }
- const min = Math.min;
- const max = Math.max;
- function within(min$1, value, max$1) {
- return max(min$1, min(value, max$1));
- }
- /**
- * Positions an inner element of the floating element such that it is centered
- * to the reference element.
- * @see https://floating-ui.com/docs/arrow
- */
- const arrow = options => ({
- name: 'arrow',
- options,
- async fn(middlewareArguments) {
- // Since `element` is required, we don't Partial<> the type
- const {
- element,
- padding = 0
- } = options != null ? options : {};
- const {
- x,
- y,
- placement,
- rects,
- platform
- } = middlewareArguments;
- if (element == null) {
- if (process.env.NODE_ENV !== "production") {
- console.warn('Floating UI: No `element` was passed to the `arrow` middleware.');
- }
- return {};
- }
- const paddingObject = getSideObjectFromPadding(padding);
- const coords = {
- x,
- y
- };
- const axis = getMainAxisFromPlacement(placement);
- const alignment = getAlignment(placement);
- const length = getLengthFromAxis(axis);
- const arrowDimensions = await platform.getDimensions(element);
- const minProp = axis === 'y' ? 'top' : 'left';
- const maxProp = axis === 'y' ? 'bottom' : 'right';
- const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
- const startDiff = coords[axis] - rects.reference[axis];
- const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
- let clientSize = arrowOffsetParent ? axis === 'y' ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0;
- if (clientSize === 0) {
- clientSize = rects.floating[length];
- }
- const centerToReference = endDiff / 2 - startDiff / 2; // Make sure the arrow doesn't overflow the floating element if the center
- // point is outside the floating element's bounds
- const min = paddingObject[minProp];
- const max = clientSize - arrowDimensions[length] - paddingObject[maxProp];
- const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
- const offset = within(min, center, max); // Make sure that arrow points at the reference
- const alignmentPadding = alignment === 'start' ? paddingObject[minProp] : paddingObject[maxProp];
- const shouldAddOffset = alignmentPadding > 0 && center !== offset && rects.reference[length] <= rects.floating[length];
- const alignmentOffset = shouldAddOffset ? center < min ? min - center : max - center : 0;
- return {
- [axis]: coords[axis] - alignmentOffset,
- data: {
- [axis]: offset,
- centerOffset: center - offset
- }
- };
- }
- });
- const hash$1 = {
- left: 'right',
- right: 'left',
- bottom: 'top',
- top: 'bottom'
- };
- function getOppositePlacement(placement) {
- return placement.replace(/left|right|bottom|top/g, matched => hash$1[matched]);
- }
- function getAlignmentSides(placement, rects, rtl) {
- if (rtl === void 0) {
- rtl = false;
- }
- const alignment = getAlignment(placement);
- const mainAxis = getMainAxisFromPlacement(placement);
- const length = getLengthFromAxis(mainAxis);
- let mainAlignmentSide = mainAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
- if (rects.reference[length] > rects.floating[length]) {
- mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
- }
- return {
- main: mainAlignmentSide,
- cross: getOppositePlacement(mainAlignmentSide)
- };
- }
- const hash = {
- start: 'end',
- end: 'start'
- };
- function getOppositeAlignmentPlacement(placement) {
- return placement.replace(/start|end/g, matched => hash[matched]);
- }
- const sides = ['top', 'right', 'bottom', 'left'];
- const allPlacements = /*#__PURE__*/sides.reduce((acc, side) => acc.concat(side, side + "-start", side + "-end"), []);
- function getPlacementList(alignment, autoAlignment, allowedPlacements) {
- const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter(placement => getAlignment(placement) === alignment), ...allowedPlacements.filter(placement => getAlignment(placement) !== alignment)] : allowedPlacements.filter(placement => getSide(placement) === placement);
- return allowedPlacementsSortedByAlignment.filter(placement => {
- if (alignment) {
- return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false);
- }
- return true;
- });
- }
- /**
- * Automatically chooses the `placement` which has the most space available.
- * @see https://floating-ui.com/docs/autoPlacement
- */
- const autoPlacement = function (options) {
- if (options === void 0) {
- options = {};
- }
- return {
- name: 'autoPlacement',
- options,
- async fn(middlewareArguments) {
- var _middlewareData$autoP, _middlewareData$autoP2, _middlewareData$autoP3, _middlewareData$autoP4, _placementsSortedByLe;
- const {
- x,
- y,
- rects,
- middlewareData,
- placement,
- platform,
- elements
- } = middlewareArguments;
- const {
- alignment = null,
- allowedPlacements = allPlacements,
- autoAlignment = true,
- ...detectOverflowOptions
- } = options;
- const placements = getPlacementList(alignment, autoAlignment, allowedPlacements);
- const overflow = await detectOverflow(middlewareArguments, detectOverflowOptions);
- const currentIndex = (_middlewareData$autoP = (_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.index) != null ? _middlewareData$autoP : 0;
- const currentPlacement = placements[currentIndex];
- if (currentPlacement == null) {
- return {};
- }
- const {
- main,
- cross
- } = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))); // Make `computeCoords` start from the right place
- if (placement !== currentPlacement) {
- return {
- x,
- y,
- reset: {
- placement: placements[0]
- }
- };
- }
- const currentOverflows = [overflow[getSide(currentPlacement)], overflow[main], overflow[cross]];
- const allOverflows = [...((_middlewareData$autoP3 = (_middlewareData$autoP4 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP4.overflows) != null ? _middlewareData$autoP3 : []), {
- placement: currentPlacement,
- overflows: currentOverflows
- }];
- const nextPlacement = placements[currentIndex + 1]; // There are more placements to check
- if (nextPlacement) {
- return {
- data: {
- index: currentIndex + 1,
- overflows: allOverflows
- },
- reset: {
- placement: nextPlacement
- }
- };
- }
- const placementsSortedByLeastOverflow = allOverflows.slice().sort((a, b) => a.overflows[0] - b.overflows[0]);
- const placementThatFitsOnAllSides = (_placementsSortedByLe = placementsSortedByLeastOverflow.find(_ref => {
- let {
- overflows
- } = _ref;
- return overflows.every(overflow => overflow <= 0);
- })) == null ? void 0 : _placementsSortedByLe.placement;
- const resetPlacement = placementThatFitsOnAllSides != null ? placementThatFitsOnAllSides : placementsSortedByLeastOverflow[0].placement;
- if (resetPlacement !== placement) {
- return {
- data: {
- index: currentIndex + 1,
- overflows: allOverflows
- },
- reset: {
- placement: resetPlacement
- }
- };
- }
- return {};
- }
- };
- };
- function getExpandedPlacements(placement) {
- const oppositePlacement = getOppositePlacement(placement);
- return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
- }
- /**
- * Changes the placement of the floating element to one that will fit if the
- * initially specified `placement` does not.
- * @see https://floating-ui.com/docs/flip
- */
- const flip = function (options) {
- if (options === void 0) {
- options = {};
- }
- return {
- name: 'flip',
- options,
- async fn(middlewareArguments) {
- var _middlewareData$flip;
- const {
- placement,
- middlewareData,
- rects,
- initialPlacement,
- platform,
- elements
- } = middlewareArguments;
- const {
- mainAxis: checkMainAxis = true,
- crossAxis: checkCrossAxis = true,
- fallbackPlacements: specifiedFallbackPlacements,
- fallbackStrategy = 'bestFit',
- flipAlignment = true,
- ...detectOverflowOptions
- } = options;
- const side = getSide(placement);
- const isBasePlacement = side === initialPlacement;
- const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
- const placements = [initialPlacement, ...fallbackPlacements];
- const overflow = await detectOverflow(middlewareArguments, detectOverflowOptions);
- const overflows = [];
- let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
- if (checkMainAxis) {
- overflows.push(overflow[side]);
- }
- if (checkCrossAxis) {
- const {
- main,
- cross
- } = getAlignmentSides(placement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
- overflows.push(overflow[main], overflow[cross]);
- }
- overflowsData = [...overflowsData, {
- placement,
- overflows
- }]; // One or more sides is overflowing
- if (!overflows.every(side => side <= 0)) {
- var _middlewareData$flip$, _middlewareData$flip2;
- const nextIndex = ((_middlewareData$flip$ = (_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) != null ? _middlewareData$flip$ : 0) + 1;
- const nextPlacement = placements[nextIndex];
- if (nextPlacement) {
- // Try next placement and re-run the lifecycle
- return {
- data: {
- index: nextIndex,
- overflows: overflowsData
- },
- reset: {
- placement: nextPlacement
- }
- };
- }
- let resetPlacement = 'bottom';
- switch (fallbackStrategy) {
- case 'bestFit':
- {
- var _overflowsData$map$so;
- const placement = (_overflowsData$map$so = overflowsData.map(d => [d, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$map$so[0].placement;
- if (placement) {
- resetPlacement = placement;
- }
- break;
- }
- case 'initialPlacement':
- resetPlacement = initialPlacement;
- break;
- }
- if (placement !== resetPlacement) {
- return {
- reset: {
- placement: resetPlacement
- }
- };
- }
- }
- return {};
- }
- };
- };
- function getSideOffsets(overflow, rect) {
- return {
- top: overflow.top - rect.height,
- right: overflow.right - rect.width,
- bottom: overflow.bottom - rect.height,
- left: overflow.left - rect.width
- };
- }
- function isAnySideFullyClipped(overflow) {
- return sides.some(side => overflow[side] >= 0);
- }
- /**
- * Provides data to hide the floating element in applicable situations, such as
- * when it is not in the same clipping context as the reference element.
- * @see https://floating-ui.com/docs/hide
- */
- const hide = function (_temp) {
- let {
- strategy = 'referenceHidden',
- ...detectOverflowOptions
- } = _temp === void 0 ? {} : _temp;
- return {
- name: 'hide',
- async fn(middlewareArguments) {
- const {
- rects
- } = middlewareArguments;
- switch (strategy) {
- case 'referenceHidden':
- {
- const overflow = await detectOverflow(middlewareArguments, { ...detectOverflowOptions,
- elementContext: 'reference'
- });
- const offsets = getSideOffsets(overflow, rects.reference);
- return {
- data: {
- referenceHiddenOffsets: offsets,
- referenceHidden: isAnySideFullyClipped(offsets)
- }
- };
- }
- case 'escaped':
- {
- const overflow = await detectOverflow(middlewareArguments, { ...detectOverflowOptions,
- altBoundary: true
- });
- const offsets = getSideOffsets(overflow, rects.floating);
- return {
- data: {
- escapedOffsets: offsets,
- escaped: isAnySideFullyClipped(offsets)
- }
- };
- }
- default:
- {
- return {};
- }
- }
- }
- };
- };
- async function convertValueToCoords(middlewareArguments, value) {
- const {
- placement,
- platform,
- elements
- } = middlewareArguments;
- const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
- const side = getSide(placement);
- const alignment = getAlignment(placement);
- const isVertical = getMainAxisFromPlacement(placement) === 'x';
- const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
- const crossAxisMulti = rtl && isVertical ? -1 : 1;
- const rawValue = typeof value === 'function' ? value(middlewareArguments) : value; // eslint-disable-next-line prefer-const
- let {
- mainAxis,
- crossAxis,
- alignmentAxis
- } = typeof rawValue === 'number' ? {
- mainAxis: rawValue,
- crossAxis: 0,
- alignmentAxis: null
- } : {
- mainAxis: 0,
- crossAxis: 0,
- alignmentAxis: null,
- ...rawValue
- };
- if (alignment && typeof alignmentAxis === 'number') {
- crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
- }
- return isVertical ? {
- x: crossAxis * crossAxisMulti,
- y: mainAxis * mainAxisMulti
- } : {
- x: mainAxis * mainAxisMulti,
- y: crossAxis * crossAxisMulti
- };
- }
- /**
- * Displaces the floating element from its reference element.
- * @see https://floating-ui.com/docs/offset
- */
- const offset = function (value) {
- if (value === void 0) {
- value = 0;
- }
- return {
- name: 'offset',
- options: value,
- async fn(middlewareArguments) {
- const {
- x,
- y
- } = middlewareArguments;
- const diffCoords = await convertValueToCoords(middlewareArguments, value);
- return {
- x: x + diffCoords.x,
- y: y + diffCoords.y,
- data: diffCoords
- };
- }
- };
- };
- function getCrossAxis(axis) {
- return axis === 'x' ? 'y' : 'x';
- }
- /**
- * Shifts the floating element in order to keep it in view when it will overflow
- * a clipping boundary.
- * @see https://floating-ui.com/docs/shift
- */
- const shift = function (options) {
- if (options === void 0) {
- options = {};
- }
- return {
- name: 'shift',
- options,
- async fn(middlewareArguments) {
- const {
- x,
- y,
- placement
- } = middlewareArguments;
- const {
- mainAxis: checkMainAxis = true,
- crossAxis: checkCrossAxis = false,
- limiter = {
- fn: _ref => {
- let {
- x,
- y
- } = _ref;
- return {
- x,
- y
- };
- }
- },
- ...detectOverflowOptions
- } = options;
- const coords = {
- x,
- y
- };
- const overflow = await detectOverflow(middlewareArguments, detectOverflowOptions);
- const mainAxis = getMainAxisFromPlacement(getSide(placement));
- const crossAxis = getCrossAxis(mainAxis);
- let mainAxisCoord = coords[mainAxis];
- let crossAxisCoord = coords[crossAxis];
- if (checkMainAxis) {
- const minSide = mainAxis === 'y' ? 'top' : 'left';
- const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
- const min = mainAxisCoord + overflow[minSide];
- const max = mainAxisCoord - overflow[maxSide];
- mainAxisCoord = within(min, mainAxisCoord, max);
- }
- if (checkCrossAxis) {
- const minSide = crossAxis === 'y' ? 'top' : 'left';
- const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
- const min = crossAxisCoord + overflow[minSide];
- const max = crossAxisCoord - overflow[maxSide];
- crossAxisCoord = within(min, crossAxisCoord, max);
- }
- const limitedCoords = limiter.fn({ ...middlewareArguments,
- [mainAxis]: mainAxisCoord,
- [crossAxis]: crossAxisCoord
- });
- return { ...limitedCoords,
- data: {
- x: limitedCoords.x - x,
- y: limitedCoords.y - y
- }
- };
- }
- };
- };
- /**
- * Built-in `limiter` that will stop `shift()` at a certain point.
- */
- const limitShift = function (options) {
- if (options === void 0) {
- options = {};
- }
- return {
- options,
- fn(middlewareArguments) {
- const {
- x,
- y,
- placement,
- rects,
- middlewareData
- } = middlewareArguments;
- const {
- offset = 0,
- mainAxis: checkMainAxis = true,
- crossAxis: checkCrossAxis = true
- } = options;
- const coords = {
- x,
- y
- };
- const mainAxis = getMainAxisFromPlacement(placement);
- const crossAxis = getCrossAxis(mainAxis);
- let mainAxisCoord = coords[mainAxis];
- let crossAxisCoord = coords[crossAxis];
- const rawOffset = typeof offset === 'function' ? offset(middlewareArguments) : offset;
- const computedOffset = typeof rawOffset === 'number' ? {
- mainAxis: rawOffset,
- crossAxis: 0
- } : {
- mainAxis: 0,
- crossAxis: 0,
- ...rawOffset
- };
- if (checkMainAxis) {
- const len = mainAxis === 'y' ? 'height' : 'width';
- const limitMin = rects.reference[mainAxis] - rects.floating[len] + computedOffset.mainAxis;
- const limitMax = rects.reference[mainAxis] + rects.reference[len] - computedOffset.mainAxis;
- if (mainAxisCoord < limitMin) {
- mainAxisCoord = limitMin;
- } else if (mainAxisCoord > limitMax) {
- mainAxisCoord = limitMax;
- }
- }
- if (checkCrossAxis) {
- var _middlewareData$offse, _middlewareData$offse2, _middlewareData$offse3, _middlewareData$offse4;
- const len = mainAxis === 'y' ? 'width' : 'height';
- const isOriginSide = ['top', 'left'].includes(getSide(placement));
- const limitMin = rects.reference[crossAxis] - rects.floating[len] + (isOriginSide ? (_middlewareData$offse = (_middlewareData$offse2 = middlewareData.offset) == null ? void 0 : _middlewareData$offse2[crossAxis]) != null ? _middlewareData$offse : 0 : 0) + (isOriginSide ? 0 : computedOffset.crossAxis);
- const limitMax = rects.reference[crossAxis] + rects.reference[len] + (isOriginSide ? 0 : (_middlewareData$offse3 = (_middlewareData$offse4 = middlewareData.offset) == null ? void 0 : _middlewareData$offse4[crossAxis]) != null ? _middlewareData$offse3 : 0) - (isOriginSide ? computedOffset.crossAxis : 0);
- if (crossAxisCoord < limitMin) {
- crossAxisCoord = limitMin;
- } else if (crossAxisCoord > limitMax) {
- crossAxisCoord = limitMax;
- }
- }
- return {
- [mainAxis]: mainAxisCoord,
- [crossAxis]: crossAxisCoord
- };
- }
- };
- };
- /**
- * Provides data to change the size of the floating element. For instance,
- * prevent it from overflowing its clipping boundary or match the width of the
- * reference element.
- * @see https://floating-ui.com/docs/size
- */
- const size = function (options) {
- if (options === void 0) {
- options = {};
- }
- return {
- name: 'size',
- options,
- async fn(middlewareArguments) {
- const {
- placement,
- rects,
- platform,
- elements
- } = middlewareArguments;
- const {
- apply = () => {},
- ...detectOverflowOptions
- } = options;
- const overflow = await detectOverflow(middlewareArguments, detectOverflowOptions);
- const side = getSide(placement);
- const alignment = getAlignment(placement);
- let heightSide;
- let widthSide;
- if (side === 'top' || side === 'bottom') {
- heightSide = side;
- widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right';
- } else {
- widthSide = side;
- heightSide = alignment === 'end' ? 'top' : 'bottom';
- }
- const xMin = max(overflow.left, 0);
- const xMax = max(overflow.right, 0);
- const yMin = max(overflow.top, 0);
- const yMax = max(overflow.bottom, 0);
- const dimensions = {
- availableHeight: rects.floating.height - (['left', 'right'].includes(placement) ? 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom)) : overflow[heightSide]),
- availableWidth: rects.floating.width - (['top', 'bottom'].includes(placement) ? 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right)) : overflow[widthSide])
- };
- await apply({ ...middlewareArguments,
- ...dimensions
- });
- const nextDimensions = await platform.getDimensions(elements.floating);
- if (rects.floating.width !== nextDimensions.width || rects.floating.height !== nextDimensions.height) {
- return {
- reset: {
- rects: true
- }
- };
- }
- return {};
- }
- };
- };
- /**
- * Provides improved positioning for inline reference elements that can span
- * over multiple lines, such as hyperlinks or range selections.
- * @see https://floating-ui.com/docs/inline
- */
- const inline = function (options) {
- if (options === void 0) {
- options = {};
- }
- return {
- name: 'inline',
- options,
- async fn(middlewareArguments) {
- var _await$platform$getCl;
- const {
- placement,
- elements,
- rects,
- platform,
- strategy
- } = middlewareArguments; // A MouseEvent's client{X,Y} coords can be up to 2 pixels off a
- // ClientRect's bounds, despite the event listener being triggered. A
- // padding of 2 seems to handle this issue.
- const {
- padding = 2,
- x,
- y
- } = options;
- const fallback = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
- rect: rects.reference,
- offsetParent: await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating)),
- strategy
- }) : rects.reference);
- const clientRects = (_await$platform$getCl = await (platform.getClientRects == null ? void 0 : platform.getClientRects(elements.reference))) != null ? _await$platform$getCl : [];
- const paddingObject = getSideObjectFromPadding(padding);
- function getBoundingClientRect() {
- // There are two rects and they are disjoined
- if (clientRects.length === 2 && clientRects[0].left > clientRects[1].right && x != null && y != null) {
- var _clientRects$find;
- // Find the first rect in which the point is fully inside
- return (_clientRects$find = clientRects.find(rect => x > rect.left - paddingObject.left && x < rect.right + paddingObject.right && y > rect.top - paddingObject.top && y < rect.bottom + paddingObject.bottom)) != null ? _clientRects$find : fallback;
- } // There are 2 or more connected rects
- if (clientRects.length >= 2) {
- if (getMainAxisFromPlacement(placement) === 'x') {
- const firstRect = clientRects[0];
- const lastRect = clientRects[clientRects.length - 1];
- const isTop = getSide(placement) === 'top';
- const top = firstRect.top;
- const bottom = lastRect.bottom;
- const left = isTop ? firstRect.left : lastRect.left;
- const right = isTop ? firstRect.right : lastRect.right;
- const width = right - left;
- const height = bottom - top;
- return {
- top,
- bottom,
- left,
- right,
- width,
- height,
- x: left,
- y: top
- };
- }
- const isLeftSide = getSide(placement) === 'left';
- const maxRight = max(...clientRects.map(rect => rect.right));
- const minLeft = min(...clientRects.map(rect => rect.left));
- const measureRects = clientRects.filter(rect => isLeftSide ? rect.left === minLeft : rect.right === maxRight);
- const top = measureRects[0].top;
- const bottom = measureRects[measureRects.length - 1].bottom;
- const left = minLeft;
- const right = maxRight;
- const width = right - left;
- const height = bottom - top;
- return {
- top,
- bottom,
- left,
- right,
- width,
- height,
- x: left,
- y: top
- };
- }
- return fallback;
- }
- const resetRects = await platform.getElementRects({
- reference: {
- getBoundingClientRect
- },
- floating: elements.floating,
- strategy
- });
- if (rects.reference.x !== resetRects.reference.x || rects.reference.y !== resetRects.reference.y || rects.reference.width !== resetRects.reference.width || rects.reference.height !== resetRects.reference.height) {
- return {
- reset: {
- rects: resetRects
- }
- };
- }
- return {};
- }
- };
- };
- export { arrow, autoPlacement, computePosition, detectOverflow, flip, hide, inline, limitShift, offset, rectToClientRect, shift, size };
|