UEA-PRODEM
This commit is contained in:
+1
-1
File diff suppressed because one or more lines are too long
+113
-107
@@ -14,10 +14,6 @@ const oppositeSideMap = {
|
||||
bottom: 'top',
|
||||
top: 'bottom'
|
||||
};
|
||||
const oppositeAlignmentMap = {
|
||||
start: 'end',
|
||||
end: 'start'
|
||||
};
|
||||
function clamp(start, value, end) {
|
||||
return max(start, min(value, end));
|
||||
}
|
||||
@@ -36,9 +32,9 @@ function getOppositeAxis(axis) {
|
||||
function getAxisLength(axis) {
|
||||
return axis === 'y' ? 'height' : 'width';
|
||||
}
|
||||
const yAxisSides = /*#__PURE__*/new Set(['top', 'bottom']);
|
||||
function getSideAxis(placement) {
|
||||
return yAxisSides.has(getSide(placement)) ? 'y' : 'x';
|
||||
const firstChar = placement[0];
|
||||
return firstChar === 't' || firstChar === 'b' ? 'y' : 'x';
|
||||
}
|
||||
function getAlignmentAxis(placement) {
|
||||
return getOppositeAxis(getSideAxis(placement));
|
||||
@@ -61,7 +57,7 @@ function getExpandedPlacements(placement) {
|
||||
return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
|
||||
}
|
||||
function getOppositeAlignmentPlacement(placement) {
|
||||
return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
|
||||
return placement.includes('start') ? placement.replace('start', 'end') : placement.replace('end', 'start');
|
||||
}
|
||||
const lrPlacement = ['left', 'right'];
|
||||
const rlPlacement = ['right', 'left'];
|
||||
@@ -92,7 +88,8 @@ function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
|
||||
return list;
|
||||
}
|
||||
function getOppositePlacement(placement) {
|
||||
return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
|
||||
const side = getSide(placement);
|
||||
return oppositeSideMap[side] + placement.slice(side.length);
|
||||
}
|
||||
function expandPaddingObject(padding) {
|
||||
return {
|
||||
@@ -186,97 +183,6 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
|
||||
return coords;
|
||||
}
|
||||
|
||||
/**
|
||||
* Computes the `x` and `y` coordinates that will place the floating element
|
||||
* next to a given reference element.
|
||||
*
|
||||
* 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));
|
||||
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 (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;
|
||||
}
|
||||
}
|
||||
return {
|
||||
x,
|
||||
y,
|
||||
placement: statefulPlacement,
|
||||
strategy,
|
||||
middlewareData
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Resolves with an object of overflow side offsets that determine how much the
|
||||
* element is overflowing a given clipping boundary on each side.
|
||||
@@ -342,6 +248,104 @@ async function detectOverflow(state, options) {
|
||||
};
|
||||
}
|
||||
|
||||
// Maximum number of resets that can occur before bailing to avoid infinite reset loops.
|
||||
const MAX_RESET_COUNT = 50;
|
||||
|
||||
/**
|
||||
* Computes the `x` and `y` coordinates that will place the floating element
|
||||
* next to a given reference element.
|
||||
*
|
||||
* 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 platformWithDetectOverflow = platform.detectOverflow ? platform : {
|
||||
...platform,
|
||||
detectOverflow
|
||||
};
|
||||
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
|
||||
let rects = await platform.getElementRects({
|
||||
reference,
|
||||
floating,
|
||||
strategy
|
||||
});
|
||||
let {
|
||||
x,
|
||||
y
|
||||
} = computeCoordsFromPlacement(rects, placement, rtl);
|
||||
let statefulPlacement = placement;
|
||||
let resetCount = 0;
|
||||
const middlewareData = {};
|
||||
for (let i = 0; i < middleware.length; i++) {
|
||||
const currentMiddleware = middleware[i];
|
||||
if (!currentMiddleware) {
|
||||
continue;
|
||||
}
|
||||
const {
|
||||
name,
|
||||
fn
|
||||
} = currentMiddleware;
|
||||
const {
|
||||
x: nextX,
|
||||
y: nextY,
|
||||
data,
|
||||
reset
|
||||
} = await fn({
|
||||
x,
|
||||
y,
|
||||
initialPlacement: placement,
|
||||
placement: statefulPlacement,
|
||||
strategy,
|
||||
middlewareData,
|
||||
rects,
|
||||
platform: platformWithDetectOverflow,
|
||||
elements: {
|
||||
reference,
|
||||
floating
|
||||
}
|
||||
});
|
||||
x = nextX != null ? nextX : x;
|
||||
y = nextY != null ? nextY : y;
|
||||
middlewareData[name] = {
|
||||
...middlewareData[name],
|
||||
...data
|
||||
};
|
||||
if (reset && resetCount < MAX_RESET_COUNT) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
return {
|
||||
x,
|
||||
y,
|
||||
placement: statefulPlacement,
|
||||
strategy,
|
||||
middlewareData
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Provides data to position an inner element of the floating element so that it
|
||||
* appears centered to the reference element.
|
||||
@@ -463,7 +467,7 @@ const autoPlacement = function (options) {
|
||||
...detectOverflowOptions
|
||||
} = evaluate(options, state);
|
||||
const placements$1 = alignment !== undefined || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
|
||||
const overflow = await detectOverflow(state, detectOverflowOptions);
|
||||
const overflow = await platform.detectOverflow(state, detectOverflowOptions);
|
||||
const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0;
|
||||
const currentPlacement = placements$1[currentIndex];
|
||||
if (currentPlacement == null) {
|
||||
@@ -577,7 +581,7 @@ const flip = function (options) {
|
||||
fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
|
||||
}
|
||||
const placements = [initialPlacement, ...fallbackPlacements];
|
||||
const overflow = await detectOverflow(state, detectOverflowOptions);
|
||||
const overflow = await platform.detectOverflow(state, detectOverflowOptions);
|
||||
const overflows = [];
|
||||
let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
|
||||
if (checkMainAxis) {
|
||||
@@ -684,7 +688,8 @@ const hide = function (options) {
|
||||
options,
|
||||
async fn(state) {
|
||||
const {
|
||||
rects
|
||||
rects,
|
||||
platform
|
||||
} = state;
|
||||
const {
|
||||
strategy = 'referenceHidden',
|
||||
@@ -693,7 +698,7 @@ const hide = function (options) {
|
||||
switch (strategy) {
|
||||
case 'referenceHidden':
|
||||
{
|
||||
const overflow = await detectOverflow(state, {
|
||||
const overflow = await platform.detectOverflow(state, {
|
||||
...detectOverflowOptions,
|
||||
elementContext: 'reference'
|
||||
});
|
||||
@@ -707,7 +712,7 @@ const hide = function (options) {
|
||||
}
|
||||
case 'escaped':
|
||||
{
|
||||
const overflow = await detectOverflow(state, {
|
||||
const overflow = await platform.detectOverflow(state, {
|
||||
...detectOverflowOptions,
|
||||
altBoundary: true
|
||||
});
|
||||
@@ -961,7 +966,8 @@ const shift = function (options) {
|
||||
const {
|
||||
x,
|
||||
y,
|
||||
placement
|
||||
placement,
|
||||
platform
|
||||
} = state;
|
||||
const {
|
||||
mainAxis: checkMainAxis = true,
|
||||
@@ -984,7 +990,7 @@ const shift = function (options) {
|
||||
x,
|
||||
y
|
||||
};
|
||||
const overflow = await detectOverflow(state, detectOverflowOptions);
|
||||
const overflow = await platform.detectOverflow(state, detectOverflowOptions);
|
||||
const crossAxis = getSideAxis(getSide(placement));
|
||||
const mainAxis = getOppositeAxis(crossAxis);
|
||||
let mainAxisCoord = coords[mainAxis];
|
||||
@@ -1116,7 +1122,7 @@ const size = function (options) {
|
||||
apply = () => {},
|
||||
...detectOverflowOptions
|
||||
} = evaluate(options, state);
|
||||
const overflow = await detectOverflow(state, detectOverflowOptions);
|
||||
const overflow = await platform.detectOverflow(state, detectOverflowOptions);
|
||||
const side = getSide(placement);
|
||||
const alignment = getAlignment(placement);
|
||||
const isYAxis = getSideAxis(placement) === 'y';
|
||||
|
||||
+4
-1
@@ -378,7 +378,9 @@ export declare interface MiddlewareState extends Coords {
|
||||
middlewareData: MiddlewareData;
|
||||
elements: Elements;
|
||||
rects: ElementRects;
|
||||
platform: Platform;
|
||||
platform: {
|
||||
detectOverflow: typeof detectOverflow;
|
||||
} & Platform;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -455,6 +457,7 @@ export declare interface Platform {
|
||||
x: number;
|
||||
y: number;
|
||||
}>;
|
||||
detectOverflow?: typeof detectOverflow;
|
||||
}
|
||||
|
||||
declare type Promisable<T> = T | Promise<T>;
|
||||
|
||||
+4
-1
@@ -378,7 +378,9 @@ export declare interface MiddlewareState extends Coords {
|
||||
middlewareData: MiddlewareData;
|
||||
elements: Elements;
|
||||
rects: ElementRects;
|
||||
platform: Platform;
|
||||
platform: {
|
||||
detectOverflow: typeof detectOverflow;
|
||||
} & Platform;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -455,6 +457,7 @@ export declare interface Platform {
|
||||
x: number;
|
||||
y: number;
|
||||
}>;
|
||||
detectOverflow?: typeof detectOverflow;
|
||||
}
|
||||
|
||||
declare type Promisable<T> = T | Promise<T>;
|
||||
|
||||
+108
-99
@@ -57,97 +57,6 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
|
||||
return coords;
|
||||
}
|
||||
|
||||
/**
|
||||
* Computes the `x` and `y` coordinates that will place the floating element
|
||||
* next to a given reference element.
|
||||
*
|
||||
* 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));
|
||||
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 (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;
|
||||
}
|
||||
}
|
||||
return {
|
||||
x,
|
||||
y,
|
||||
placement: statefulPlacement,
|
||||
strategy,
|
||||
middlewareData
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Resolves with an object of overflow side offsets that determine how much the
|
||||
* element is overflowing a given clipping boundary on each side.
|
||||
@@ -213,6 +122,104 @@ async function detectOverflow(state, options) {
|
||||
};
|
||||
}
|
||||
|
||||
// Maximum number of resets that can occur before bailing to avoid infinite reset loops.
|
||||
const MAX_RESET_COUNT = 50;
|
||||
|
||||
/**
|
||||
* Computes the `x` and `y` coordinates that will place the floating element
|
||||
* next to a given reference element.
|
||||
*
|
||||
* 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 platformWithDetectOverflow = platform.detectOverflow ? platform : {
|
||||
...platform,
|
||||
detectOverflow
|
||||
};
|
||||
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
|
||||
let rects = await platform.getElementRects({
|
||||
reference,
|
||||
floating,
|
||||
strategy
|
||||
});
|
||||
let {
|
||||
x,
|
||||
y
|
||||
} = computeCoordsFromPlacement(rects, placement, rtl);
|
||||
let statefulPlacement = placement;
|
||||
let resetCount = 0;
|
||||
const middlewareData = {};
|
||||
for (let i = 0; i < middleware.length; i++) {
|
||||
const currentMiddleware = middleware[i];
|
||||
if (!currentMiddleware) {
|
||||
continue;
|
||||
}
|
||||
const {
|
||||
name,
|
||||
fn
|
||||
} = currentMiddleware;
|
||||
const {
|
||||
x: nextX,
|
||||
y: nextY,
|
||||
data,
|
||||
reset
|
||||
} = await fn({
|
||||
x,
|
||||
y,
|
||||
initialPlacement: placement,
|
||||
placement: statefulPlacement,
|
||||
strategy,
|
||||
middlewareData,
|
||||
rects,
|
||||
platform: platformWithDetectOverflow,
|
||||
elements: {
|
||||
reference,
|
||||
floating
|
||||
}
|
||||
});
|
||||
x = nextX != null ? nextX : x;
|
||||
y = nextY != null ? nextY : y;
|
||||
middlewareData[name] = {
|
||||
...middlewareData[name],
|
||||
...data
|
||||
};
|
||||
if (reset && resetCount < MAX_RESET_COUNT) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
return {
|
||||
x,
|
||||
y,
|
||||
placement: statefulPlacement,
|
||||
strategy,
|
||||
middlewareData
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Provides data to position an inner element of the floating element so that it
|
||||
* appears centered to the reference element.
|
||||
@@ -334,7 +341,7 @@ const autoPlacement = function (options) {
|
||||
...detectOverflowOptions
|
||||
} = evaluate(options, state);
|
||||
const placements$1 = alignment !== undefined || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
|
||||
const overflow = await detectOverflow(state, detectOverflowOptions);
|
||||
const overflow = await platform.detectOverflow(state, detectOverflowOptions);
|
||||
const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0;
|
||||
const currentPlacement = placements$1[currentIndex];
|
||||
if (currentPlacement == null) {
|
||||
@@ -448,7 +455,7 @@ const flip = function (options) {
|
||||
fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
|
||||
}
|
||||
const placements = [initialPlacement, ...fallbackPlacements];
|
||||
const overflow = await detectOverflow(state, detectOverflowOptions);
|
||||
const overflow = await platform.detectOverflow(state, detectOverflowOptions);
|
||||
const overflows = [];
|
||||
let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
|
||||
if (checkMainAxis) {
|
||||
@@ -555,7 +562,8 @@ const hide = function (options) {
|
||||
options,
|
||||
async fn(state) {
|
||||
const {
|
||||
rects
|
||||
rects,
|
||||
platform
|
||||
} = state;
|
||||
const {
|
||||
strategy = 'referenceHidden',
|
||||
@@ -564,7 +572,7 @@ const hide = function (options) {
|
||||
switch (strategy) {
|
||||
case 'referenceHidden':
|
||||
{
|
||||
const overflow = await detectOverflow(state, {
|
||||
const overflow = await platform.detectOverflow(state, {
|
||||
...detectOverflowOptions,
|
||||
elementContext: 'reference'
|
||||
});
|
||||
@@ -578,7 +586,7 @@ const hide = function (options) {
|
||||
}
|
||||
case 'escaped':
|
||||
{
|
||||
const overflow = await detectOverflow(state, {
|
||||
const overflow = await platform.detectOverflow(state, {
|
||||
...detectOverflowOptions,
|
||||
altBoundary: true
|
||||
});
|
||||
@@ -832,7 +840,8 @@ const shift = function (options) {
|
||||
const {
|
||||
x,
|
||||
y,
|
||||
placement
|
||||
placement,
|
||||
platform
|
||||
} = state;
|
||||
const {
|
||||
mainAxis: checkMainAxis = true,
|
||||
@@ -855,7 +864,7 @@ const shift = function (options) {
|
||||
x,
|
||||
y
|
||||
};
|
||||
const overflow = await detectOverflow(state, detectOverflowOptions);
|
||||
const overflow = await platform.detectOverflow(state, detectOverflowOptions);
|
||||
const crossAxis = getSideAxis(getSide(placement));
|
||||
const mainAxis = getOppositeAxis(crossAxis);
|
||||
let mainAxisCoord = coords[mainAxis];
|
||||
@@ -987,7 +996,7 @@ const size = function (options) {
|
||||
apply = () => {},
|
||||
...detectOverflowOptions
|
||||
} = evaluate(options, state);
|
||||
const overflow = await detectOverflow(state, detectOverflowOptions);
|
||||
const overflow = await platform.detectOverflow(state, detectOverflowOptions);
|
||||
const side = getSide(placement);
|
||||
const alignment = getAlignment(placement);
|
||||
const isYAxis = getSideAxis(placement) === 'y';
|
||||
|
||||
+108
-99
@@ -57,97 +57,6 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
|
||||
return coords;
|
||||
}
|
||||
|
||||
/**
|
||||
* Computes the `x` and `y` coordinates that will place the floating element
|
||||
* next to a given reference element.
|
||||
*
|
||||
* 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));
|
||||
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 (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;
|
||||
}
|
||||
}
|
||||
return {
|
||||
x,
|
||||
y,
|
||||
placement: statefulPlacement,
|
||||
strategy,
|
||||
middlewareData
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Resolves with an object of overflow side offsets that determine how much the
|
||||
* element is overflowing a given clipping boundary on each side.
|
||||
@@ -213,6 +122,104 @@ async function detectOverflow(state, options) {
|
||||
};
|
||||
}
|
||||
|
||||
// Maximum number of resets that can occur before bailing to avoid infinite reset loops.
|
||||
const MAX_RESET_COUNT = 50;
|
||||
|
||||
/**
|
||||
* Computes the `x` and `y` coordinates that will place the floating element
|
||||
* next to a given reference element.
|
||||
*
|
||||
* 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 platformWithDetectOverflow = platform.detectOverflow ? platform : {
|
||||
...platform,
|
||||
detectOverflow
|
||||
};
|
||||
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
|
||||
let rects = await platform.getElementRects({
|
||||
reference,
|
||||
floating,
|
||||
strategy
|
||||
});
|
||||
let {
|
||||
x,
|
||||
y
|
||||
} = computeCoordsFromPlacement(rects, placement, rtl);
|
||||
let statefulPlacement = placement;
|
||||
let resetCount = 0;
|
||||
const middlewareData = {};
|
||||
for (let i = 0; i < middleware.length; i++) {
|
||||
const currentMiddleware = middleware[i];
|
||||
if (!currentMiddleware) {
|
||||
continue;
|
||||
}
|
||||
const {
|
||||
name,
|
||||
fn
|
||||
} = currentMiddleware;
|
||||
const {
|
||||
x: nextX,
|
||||
y: nextY,
|
||||
data,
|
||||
reset
|
||||
} = await fn({
|
||||
x,
|
||||
y,
|
||||
initialPlacement: placement,
|
||||
placement: statefulPlacement,
|
||||
strategy,
|
||||
middlewareData,
|
||||
rects,
|
||||
platform: platformWithDetectOverflow,
|
||||
elements: {
|
||||
reference,
|
||||
floating
|
||||
}
|
||||
});
|
||||
x = nextX != null ? nextX : x;
|
||||
y = nextY != null ? nextY : y;
|
||||
middlewareData[name] = {
|
||||
...middlewareData[name],
|
||||
...data
|
||||
};
|
||||
if (reset && resetCount < MAX_RESET_COUNT) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
return {
|
||||
x,
|
||||
y,
|
||||
placement: statefulPlacement,
|
||||
strategy,
|
||||
middlewareData
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Provides data to position an inner element of the floating element so that it
|
||||
* appears centered to the reference element.
|
||||
@@ -334,7 +341,7 @@ const autoPlacement = function (options) {
|
||||
...detectOverflowOptions
|
||||
} = evaluate(options, state);
|
||||
const placements$1 = alignment !== undefined || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
|
||||
const overflow = await detectOverflow(state, detectOverflowOptions);
|
||||
const overflow = await platform.detectOverflow(state, detectOverflowOptions);
|
||||
const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0;
|
||||
const currentPlacement = placements$1[currentIndex];
|
||||
if (currentPlacement == null) {
|
||||
@@ -448,7 +455,7 @@ const flip = function (options) {
|
||||
fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
|
||||
}
|
||||
const placements = [initialPlacement, ...fallbackPlacements];
|
||||
const overflow = await detectOverflow(state, detectOverflowOptions);
|
||||
const overflow = await platform.detectOverflow(state, detectOverflowOptions);
|
||||
const overflows = [];
|
||||
let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
|
||||
if (checkMainAxis) {
|
||||
@@ -555,7 +562,8 @@ const hide = function (options) {
|
||||
options,
|
||||
async fn(state) {
|
||||
const {
|
||||
rects
|
||||
rects,
|
||||
platform
|
||||
} = state;
|
||||
const {
|
||||
strategy = 'referenceHidden',
|
||||
@@ -564,7 +572,7 @@ const hide = function (options) {
|
||||
switch (strategy) {
|
||||
case 'referenceHidden':
|
||||
{
|
||||
const overflow = await detectOverflow(state, {
|
||||
const overflow = await platform.detectOverflow(state, {
|
||||
...detectOverflowOptions,
|
||||
elementContext: 'reference'
|
||||
});
|
||||
@@ -578,7 +586,7 @@ const hide = function (options) {
|
||||
}
|
||||
case 'escaped':
|
||||
{
|
||||
const overflow = await detectOverflow(state, {
|
||||
const overflow = await platform.detectOverflow(state, {
|
||||
...detectOverflowOptions,
|
||||
altBoundary: true
|
||||
});
|
||||
@@ -832,7 +840,8 @@ const shift = function (options) {
|
||||
const {
|
||||
x,
|
||||
y,
|
||||
placement
|
||||
placement,
|
||||
platform
|
||||
} = state;
|
||||
const {
|
||||
mainAxis: checkMainAxis = true,
|
||||
@@ -855,7 +864,7 @@ const shift = function (options) {
|
||||
x,
|
||||
y
|
||||
};
|
||||
const overflow = await detectOverflow(state, detectOverflowOptions);
|
||||
const overflow = await platform.detectOverflow(state, detectOverflowOptions);
|
||||
const crossAxis = getSideAxis(getSide(placement));
|
||||
const mainAxis = getOppositeAxis(crossAxis);
|
||||
let mainAxisCoord = coords[mainAxis];
|
||||
@@ -987,7 +996,7 @@ const size = function (options) {
|
||||
apply = () => {},
|
||||
...detectOverflowOptions
|
||||
} = evaluate(options, state);
|
||||
const overflow = await detectOverflow(state, detectOverflowOptions);
|
||||
const overflow = await platform.detectOverflow(state, detectOverflowOptions);
|
||||
const side = getSide(placement);
|
||||
const alignment = getAlignment(placement);
|
||||
const isYAxis = getSideAxis(placement) === 'y';
|
||||
|
||||
+113
-107
@@ -20,10 +20,6 @@
|
||||
bottom: 'top',
|
||||
top: 'bottom'
|
||||
};
|
||||
const oppositeAlignmentMap = {
|
||||
start: 'end',
|
||||
end: 'start'
|
||||
};
|
||||
function clamp(start, value, end) {
|
||||
return max(start, min(value, end));
|
||||
}
|
||||
@@ -42,9 +38,9 @@
|
||||
function getAxisLength(axis) {
|
||||
return axis === 'y' ? 'height' : 'width';
|
||||
}
|
||||
const yAxisSides = /*#__PURE__*/new Set(['top', 'bottom']);
|
||||
function getSideAxis(placement) {
|
||||
return yAxisSides.has(getSide(placement)) ? 'y' : 'x';
|
||||
const firstChar = placement[0];
|
||||
return firstChar === 't' || firstChar === 'b' ? 'y' : 'x';
|
||||
}
|
||||
function getAlignmentAxis(placement) {
|
||||
return getOppositeAxis(getSideAxis(placement));
|
||||
@@ -67,7 +63,7 @@
|
||||
return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
|
||||
}
|
||||
function getOppositeAlignmentPlacement(placement) {
|
||||
return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
|
||||
return placement.includes('start') ? placement.replace('start', 'end') : placement.replace('end', 'start');
|
||||
}
|
||||
const lrPlacement = ['left', 'right'];
|
||||
const rlPlacement = ['right', 'left'];
|
||||
@@ -98,7 +94,8 @@
|
||||
return list;
|
||||
}
|
||||
function getOppositePlacement(placement) {
|
||||
return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
|
||||
const side = getSide(placement);
|
||||
return oppositeSideMap[side] + placement.slice(side.length);
|
||||
}
|
||||
function expandPaddingObject(padding) {
|
||||
return {
|
||||
@@ -192,97 +189,6 @@
|
||||
return coords;
|
||||
}
|
||||
|
||||
/**
|
||||
* Computes the `x` and `y` coordinates that will place the floating element
|
||||
* next to a given reference element.
|
||||
*
|
||||
* 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));
|
||||
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 (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;
|
||||
}
|
||||
}
|
||||
return {
|
||||
x,
|
||||
y,
|
||||
placement: statefulPlacement,
|
||||
strategy,
|
||||
middlewareData
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Resolves with an object of overflow side offsets that determine how much the
|
||||
* element is overflowing a given clipping boundary on each side.
|
||||
@@ -348,6 +254,104 @@
|
||||
};
|
||||
}
|
||||
|
||||
// Maximum number of resets that can occur before bailing to avoid infinite reset loops.
|
||||
const MAX_RESET_COUNT = 50;
|
||||
|
||||
/**
|
||||
* Computes the `x` and `y` coordinates that will place the floating element
|
||||
* next to a given reference element.
|
||||
*
|
||||
* 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 platformWithDetectOverflow = platform.detectOverflow ? platform : {
|
||||
...platform,
|
||||
detectOverflow
|
||||
};
|
||||
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
|
||||
let rects = await platform.getElementRects({
|
||||
reference,
|
||||
floating,
|
||||
strategy
|
||||
});
|
||||
let {
|
||||
x,
|
||||
y
|
||||
} = computeCoordsFromPlacement(rects, placement, rtl);
|
||||
let statefulPlacement = placement;
|
||||
let resetCount = 0;
|
||||
const middlewareData = {};
|
||||
for (let i = 0; i < middleware.length; i++) {
|
||||
const currentMiddleware = middleware[i];
|
||||
if (!currentMiddleware) {
|
||||
continue;
|
||||
}
|
||||
const {
|
||||
name,
|
||||
fn
|
||||
} = currentMiddleware;
|
||||
const {
|
||||
x: nextX,
|
||||
y: nextY,
|
||||
data,
|
||||
reset
|
||||
} = await fn({
|
||||
x,
|
||||
y,
|
||||
initialPlacement: placement,
|
||||
placement: statefulPlacement,
|
||||
strategy,
|
||||
middlewareData,
|
||||
rects,
|
||||
platform: platformWithDetectOverflow,
|
||||
elements: {
|
||||
reference,
|
||||
floating
|
||||
}
|
||||
});
|
||||
x = nextX != null ? nextX : x;
|
||||
y = nextY != null ? nextY : y;
|
||||
middlewareData[name] = {
|
||||
...middlewareData[name],
|
||||
...data
|
||||
};
|
||||
if (reset && resetCount < MAX_RESET_COUNT) {
|
||||
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;
|
||||
}
|
||||
}
|
||||
return {
|
||||
x,
|
||||
y,
|
||||
placement: statefulPlacement,
|
||||
strategy,
|
||||
middlewareData
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Provides data to position an inner element of the floating element so that it
|
||||
* appears centered to the reference element.
|
||||
@@ -469,7 +473,7 @@
|
||||
...detectOverflowOptions
|
||||
} = evaluate(options, state);
|
||||
const placements$1 = alignment !== undefined || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
|
||||
const overflow = await detectOverflow(state, detectOverflowOptions);
|
||||
const overflow = await platform.detectOverflow(state, detectOverflowOptions);
|
||||
const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0;
|
||||
const currentPlacement = placements$1[currentIndex];
|
||||
if (currentPlacement == null) {
|
||||
@@ -583,7 +587,7 @@
|
||||
fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
|
||||
}
|
||||
const placements = [initialPlacement, ...fallbackPlacements];
|
||||
const overflow = await detectOverflow(state, detectOverflowOptions);
|
||||
const overflow = await platform.detectOverflow(state, detectOverflowOptions);
|
||||
const overflows = [];
|
||||
let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
|
||||
if (checkMainAxis) {
|
||||
@@ -690,7 +694,8 @@
|
||||
options,
|
||||
async fn(state) {
|
||||
const {
|
||||
rects
|
||||
rects,
|
||||
platform
|
||||
} = state;
|
||||
const {
|
||||
strategy = 'referenceHidden',
|
||||
@@ -699,7 +704,7 @@
|
||||
switch (strategy) {
|
||||
case 'referenceHidden':
|
||||
{
|
||||
const overflow = await detectOverflow(state, {
|
||||
const overflow = await platform.detectOverflow(state, {
|
||||
...detectOverflowOptions,
|
||||
elementContext: 'reference'
|
||||
});
|
||||
@@ -713,7 +718,7 @@
|
||||
}
|
||||
case 'escaped':
|
||||
{
|
||||
const overflow = await detectOverflow(state, {
|
||||
const overflow = await platform.detectOverflow(state, {
|
||||
...detectOverflowOptions,
|
||||
altBoundary: true
|
||||
});
|
||||
@@ -967,7 +972,8 @@
|
||||
const {
|
||||
x,
|
||||
y,
|
||||
placement
|
||||
placement,
|
||||
platform
|
||||
} = state;
|
||||
const {
|
||||
mainAxis: checkMainAxis = true,
|
||||
@@ -990,7 +996,7 @@
|
||||
x,
|
||||
y
|
||||
};
|
||||
const overflow = await detectOverflow(state, detectOverflowOptions);
|
||||
const overflow = await platform.detectOverflow(state, detectOverflowOptions);
|
||||
const crossAxis = getSideAxis(getSide(placement));
|
||||
const mainAxis = getOppositeAxis(crossAxis);
|
||||
let mainAxisCoord = coords[mainAxis];
|
||||
@@ -1122,7 +1128,7 @@
|
||||
apply = () => {},
|
||||
...detectOverflowOptions
|
||||
} = evaluate(options, state);
|
||||
const overflow = await detectOverflow(state, detectOverflowOptions);
|
||||
const overflow = await platform.detectOverflow(state, detectOverflowOptions);
|
||||
const side = getSide(placement);
|
||||
const alignment = getAlignment(placement);
|
||||
const isYAxis = getSideAxis(placement) === 'y';
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user