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
+2
-2
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@floating-ui/core",
|
||||
"version": "1.7.3",
|
||||
"version": "1.7.5",
|
||||
"description": "Positioning library for floating elements: tooltips, popovers, dropdowns, and more",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
@@ -43,7 +43,7 @@
|
||||
"positioning"
|
||||
],
|
||||
"dependencies": {
|
||||
"@floating-ui/utils": "^0.2.10"
|
||||
"@floating-ui/utils": "^0.2.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"config": "0.0.0"
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
+48
-40
@@ -58,7 +58,6 @@ function isShadowRoot(value) {
|
||||
}
|
||||
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
|
||||
}
|
||||
const invalidOverflowDisplayValues = /*#__PURE__*/new Set(['inline', 'contents']);
|
||||
function isOverflowElement(element) {
|
||||
const {
|
||||
overflow,
|
||||
@@ -66,32 +65,35 @@ function isOverflowElement(element) {
|
||||
overflowY,
|
||||
display
|
||||
} = getComputedStyle$1(element);
|
||||
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
|
||||
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && display !== 'inline' && display !== 'contents';
|
||||
}
|
||||
const tableElements = /*#__PURE__*/new Set(['table', 'td', 'th']);
|
||||
function isTableElement(element) {
|
||||
return tableElements.has(getNodeName(element));
|
||||
return /^(table|td|th)$/.test(getNodeName(element));
|
||||
}
|
||||
const topLayerSelectors = [':popover-open', ':modal'];
|
||||
function isTopLayer(element) {
|
||||
return topLayerSelectors.some(selector => {
|
||||
try {
|
||||
return element.matches(selector);
|
||||
} catch (_e) {
|
||||
return false;
|
||||
try {
|
||||
if (element.matches(':popover-open')) {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
} catch (_e) {
|
||||
// no-op
|
||||
}
|
||||
try {
|
||||
return element.matches(':modal');
|
||||
} catch (_e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
const transformProperties = ['transform', 'translate', 'scale', 'rotate', 'perspective'];
|
||||
const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'];
|
||||
const containValues = ['paint', 'layout', 'strict', 'content'];
|
||||
const willChangeRe = /transform|translate|scale|rotate|perspective|filter/;
|
||||
const containRe = /paint|layout|strict|content/;
|
||||
const isNotNone = value => !!value && value !== 'none';
|
||||
let isWebKitValue;
|
||||
function isContainingBlock(elementOrCss) {
|
||||
const webkit = isWebKit();
|
||||
const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
|
||||
|
||||
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
||||
// https://drafts.csswg.org/css-transforms-2/#individual-transforms
|
||||
return transformProperties.some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || willChangeValues.some(value => (css.willChange || '').includes(value)) || containValues.some(value => (css.contain || '').includes(value));
|
||||
return isNotNone(css.transform) || isNotNone(css.translate) || isNotNone(css.scale) || isNotNone(css.rotate) || isNotNone(css.perspective) || !isWebKit() && (isNotNone(css.backdropFilter) || isNotNone(css.filter)) || willChangeRe.test(css.willChange || '') || containRe.test(css.contain || '');
|
||||
}
|
||||
function getContainingBlock(element) {
|
||||
let currentNode = getParentNode(element);
|
||||
@@ -106,12 +108,13 @@ function getContainingBlock(element) {
|
||||
return null;
|
||||
}
|
||||
function isWebKit() {
|
||||
if (typeof CSS === 'undefined' || !CSS.supports) return false;
|
||||
return CSS.supports('-webkit-backdrop-filter', 'none');
|
||||
if (isWebKitValue == null) {
|
||||
isWebKitValue = typeof CSS !== 'undefined' && CSS.supports && CSS.supports('-webkit-backdrop-filter', 'none');
|
||||
}
|
||||
return isWebKitValue;
|
||||
}
|
||||
const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#document']);
|
||||
function isLastTraversableNode(node) {
|
||||
return lastTraversableNodeNames.has(getNodeName(node));
|
||||
return /^(html|body|#document)$/.test(getNodeName(node));
|
||||
}
|
||||
function getComputedStyle$1(element) {
|
||||
return getWindow(element).getComputedStyle(element);
|
||||
@@ -167,8 +170,9 @@ function getOverflowAncestors(node, list, traverseIframes) {
|
||||
if (isBody) {
|
||||
const frameElement = getFrameElement(win);
|
||||
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
|
||||
} else {
|
||||
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
|
||||
}
|
||||
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
|
||||
}
|
||||
function getFrameElement(win) {
|
||||
return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
|
||||
@@ -345,7 +349,7 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
||||
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
||||
scroll = getNodeScroll(offsetParent);
|
||||
}
|
||||
if (isHTMLElement(offsetParent)) {
|
||||
if (isOffsetParentAnElement) {
|
||||
const offsetRect = getBoundingClientRect(offsetParent);
|
||||
scale = getScale(offsetParent);
|
||||
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
||||
@@ -433,7 +437,6 @@ function getViewportRect(element, strategy) {
|
||||
};
|
||||
}
|
||||
|
||||
const absoluteOrFixed = /*#__PURE__*/new Set(['absolute', 'fixed']);
|
||||
// Returns the inner client rect, subtracting scrollbars if present.
|
||||
function getInnerBoundingClientRect(element, strategy) {
|
||||
const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
|
||||
@@ -498,7 +501,7 @@ function getClippingElementAncestors(element, cache) {
|
||||
if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
|
||||
currentContainingBlockComputedStyle = null;
|
||||
}
|
||||
const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
|
||||
const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && (currentContainingBlockComputedStyle.position === 'absolute' || currentContainingBlockComputedStyle.position === 'fixed') || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
|
||||
if (shouldDropCurrentNode) {
|
||||
// Drop non-containing blocks.
|
||||
result = result.filter(ancestor => ancestor !== currentNode);
|
||||
@@ -523,20 +526,23 @@ function getClippingRect(_ref) {
|
||||
} = _ref;
|
||||
const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
|
||||
const clippingAncestors = [...elementClippingAncestors, 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));
|
||||
const firstRect = getClientRectFromClippingAncestor(element, clippingAncestors[0], strategy);
|
||||
let top = firstRect.top;
|
||||
let right = firstRect.right;
|
||||
let bottom = firstRect.bottom;
|
||||
let left = firstRect.left;
|
||||
for (let i = 1; i < clippingAncestors.length; i++) {
|
||||
const rect = getClientRectFromClippingAncestor(element, clippingAncestors[i], strategy);
|
||||
top = max(rect.top, top);
|
||||
right = min(rect.right, right);
|
||||
bottom = min(rect.bottom, bottom);
|
||||
left = max(rect.left, left);
|
||||
}
|
||||
return {
|
||||
width: clippingRect.right - clippingRect.left,
|
||||
height: clippingRect.bottom - clippingRect.top,
|
||||
x: clippingRect.left,
|
||||
y: clippingRect.top
|
||||
width: right - left,
|
||||
height: bottom - top,
|
||||
x: left,
|
||||
y: top
|
||||
};
|
||||
}
|
||||
|
||||
@@ -787,7 +793,7 @@ function autoUpdate(reference, floating, update, options) {
|
||||
animationFrame = false
|
||||
} = options;
|
||||
const referenceEl = unwrapElement(reference);
|
||||
const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...getOverflowAncestors(floating)] : [];
|
||||
const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...(floating ? getOverflowAncestors(floating) : [])] : [];
|
||||
ancestors.forEach(ancestor => {
|
||||
ancestorScroll && ancestor.addEventListener('scroll', update, {
|
||||
passive: true
|
||||
@@ -800,7 +806,7 @@ function autoUpdate(reference, floating, update, options) {
|
||||
if (elementResize) {
|
||||
resizeObserver = new ResizeObserver(_ref => {
|
||||
let [firstEntry] = _ref;
|
||||
if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
|
||||
if (firstEntry && firstEntry.target === referenceEl && resizeObserver && floating) {
|
||||
// Prevent update loops when using the `size` middleware.
|
||||
// https://github.com/floating-ui/floating-ui/issues/1740
|
||||
resizeObserver.unobserve(floating);
|
||||
@@ -815,7 +821,9 @@ function autoUpdate(reference, floating, update, options) {
|
||||
if (referenceEl && !animationFrame) {
|
||||
resizeObserver.observe(referenceEl);
|
||||
}
|
||||
resizeObserver.observe(floating);
|
||||
if (floating) {
|
||||
resizeObserver.observe(floating);
|
||||
}
|
||||
}
|
||||
let frameId;
|
||||
let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
|
||||
|
||||
+3
-1
@@ -7,6 +7,7 @@ import { ClientRectObject } from '@floating-ui/core';
|
||||
import type { ComputePositionConfig as ComputePositionConfig_2 } from '@floating-ui/core';
|
||||
import { ComputePositionReturn } from '@floating-ui/core';
|
||||
import { Coords } from '@floating-ui/core';
|
||||
import type { detectOverflow as detectOverflow_2 } from '@floating-ui/core';
|
||||
import type { DetectOverflowOptions as DetectOverflowOptions_2 } from '@floating-ui/core';
|
||||
import { Dimensions } from '@floating-ui/core';
|
||||
import { ElementContext } from '@floating-ui/core';
|
||||
@@ -64,7 +65,7 @@ export declare type AutoPlacementOptions = Prettify<Omit<AutoPlacementOptions_2,
|
||||
* removed from the DOM or hidden from the screen.
|
||||
* @see https://floating-ui.com/docs/autoUpdate
|
||||
*/
|
||||
export declare function autoUpdate(reference: ReferenceElement, floating: FloatingElement, update: () => void, options?: AutoUpdateOptions): () => void;
|
||||
export declare function autoUpdate(reference: ReferenceElement, floating: FloatingElement | null, update: () => void, options?: AutoUpdateOptions): () => void;
|
||||
|
||||
export declare interface AutoUpdateOptions {
|
||||
/**
|
||||
@@ -292,6 +293,7 @@ export declare interface Platform {
|
||||
x: number;
|
||||
y: number;
|
||||
}>;
|
||||
detectOverflow?: typeof detectOverflow_2;
|
||||
}
|
||||
|
||||
export declare const platform: Platform;
|
||||
|
||||
+3
-1
@@ -7,6 +7,7 @@ import { ClientRectObject } from '@floating-ui/core';
|
||||
import type { ComputePositionConfig as ComputePositionConfig_2 } from '@floating-ui/core';
|
||||
import { ComputePositionReturn } from '@floating-ui/core';
|
||||
import { Coords } from '@floating-ui/core';
|
||||
import type { detectOverflow as detectOverflow_2 } from '@floating-ui/core';
|
||||
import type { DetectOverflowOptions as DetectOverflowOptions_2 } from '@floating-ui/core';
|
||||
import { Dimensions } from '@floating-ui/core';
|
||||
import { ElementContext } from '@floating-ui/core';
|
||||
@@ -64,7 +65,7 @@ export declare type AutoPlacementOptions = Prettify<Omit<AutoPlacementOptions_2,
|
||||
* removed from the DOM or hidden from the screen.
|
||||
* @see https://floating-ui.com/docs/autoUpdate
|
||||
*/
|
||||
export declare function autoUpdate(reference: ReferenceElement, floating: FloatingElement, update: () => void, options?: AutoUpdateOptions): () => void;
|
||||
export declare function autoUpdate(reference: ReferenceElement, floating: FloatingElement | null, update: () => void, options?: AutoUpdateOptions): () => void;
|
||||
|
||||
export declare interface AutoUpdateOptions {
|
||||
/**
|
||||
@@ -292,6 +293,7 @@ export declare interface Platform {
|
||||
x: number;
|
||||
y: number;
|
||||
}>;
|
||||
detectOverflow?: typeof detectOverflow_2;
|
||||
}
|
||||
|
||||
export declare const platform: Platform;
|
||||
|
||||
+23
-19
@@ -174,7 +174,7 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
||||
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
||||
scroll = getNodeScroll(offsetParent);
|
||||
}
|
||||
if (isHTMLElement(offsetParent)) {
|
||||
if (isOffsetParentAnElement) {
|
||||
const offsetRect = getBoundingClientRect(offsetParent);
|
||||
scale = getScale(offsetParent);
|
||||
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
||||
@@ -262,7 +262,6 @@ function getViewportRect(element, strategy) {
|
||||
};
|
||||
}
|
||||
|
||||
const absoluteOrFixed = /*#__PURE__*/new Set(['absolute', 'fixed']);
|
||||
// Returns the inner client rect, subtracting scrollbars if present.
|
||||
function getInnerBoundingClientRect(element, strategy) {
|
||||
const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
|
||||
@@ -327,7 +326,7 @@ function getClippingElementAncestors(element, cache) {
|
||||
if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
|
||||
currentContainingBlockComputedStyle = null;
|
||||
}
|
||||
const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
|
||||
const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && (currentContainingBlockComputedStyle.position === 'absolute' || currentContainingBlockComputedStyle.position === 'fixed') || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
|
||||
if (shouldDropCurrentNode) {
|
||||
// Drop non-containing blocks.
|
||||
result = result.filter(ancestor => ancestor !== currentNode);
|
||||
@@ -352,20 +351,23 @@ function getClippingRect(_ref) {
|
||||
} = _ref;
|
||||
const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
|
||||
const clippingAncestors = [...elementClippingAncestors, 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));
|
||||
const firstRect = getClientRectFromClippingAncestor(element, clippingAncestors[0], strategy);
|
||||
let top = firstRect.top;
|
||||
let right = firstRect.right;
|
||||
let bottom = firstRect.bottom;
|
||||
let left = firstRect.left;
|
||||
for (let i = 1; i < clippingAncestors.length; i++) {
|
||||
const rect = getClientRectFromClippingAncestor(element, clippingAncestors[i], strategy);
|
||||
top = max(rect.top, top);
|
||||
right = min(rect.right, right);
|
||||
bottom = min(rect.bottom, bottom);
|
||||
left = max(rect.left, left);
|
||||
}
|
||||
return {
|
||||
width: clippingRect.right - clippingRect.left,
|
||||
height: clippingRect.bottom - clippingRect.top,
|
||||
x: clippingRect.left,
|
||||
y: clippingRect.top
|
||||
width: right - left,
|
||||
height: bottom - top,
|
||||
x: left,
|
||||
y: top
|
||||
};
|
||||
}
|
||||
|
||||
@@ -616,7 +618,7 @@ function autoUpdate(reference, floating, update, options) {
|
||||
animationFrame = false
|
||||
} = options;
|
||||
const referenceEl = unwrapElement(reference);
|
||||
const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...getOverflowAncestors(floating)] : [];
|
||||
const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...(floating ? getOverflowAncestors(floating) : [])] : [];
|
||||
ancestors.forEach(ancestor => {
|
||||
ancestorScroll && ancestor.addEventListener('scroll', update, {
|
||||
passive: true
|
||||
@@ -629,7 +631,7 @@ function autoUpdate(reference, floating, update, options) {
|
||||
if (elementResize) {
|
||||
resizeObserver = new ResizeObserver(_ref => {
|
||||
let [firstEntry] = _ref;
|
||||
if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
|
||||
if (firstEntry && firstEntry.target === referenceEl && resizeObserver && floating) {
|
||||
// Prevent update loops when using the `size` middleware.
|
||||
// https://github.com/floating-ui/floating-ui/issues/1740
|
||||
resizeObserver.unobserve(floating);
|
||||
@@ -644,7 +646,9 @@ function autoUpdate(reference, floating, update, options) {
|
||||
if (referenceEl && !animationFrame) {
|
||||
resizeObserver.observe(referenceEl);
|
||||
}
|
||||
resizeObserver.observe(floating);
|
||||
if (floating) {
|
||||
resizeObserver.observe(floating);
|
||||
}
|
||||
}
|
||||
let frameId;
|
||||
let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
|
||||
|
||||
+23
-19
@@ -174,7 +174,7 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
||||
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
||||
scroll = getNodeScroll(offsetParent);
|
||||
}
|
||||
if (isHTMLElement(offsetParent)) {
|
||||
if (isOffsetParentAnElement) {
|
||||
const offsetRect = getBoundingClientRect(offsetParent);
|
||||
scale = getScale(offsetParent);
|
||||
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
||||
@@ -262,7 +262,6 @@ function getViewportRect(element, strategy) {
|
||||
};
|
||||
}
|
||||
|
||||
const absoluteOrFixed = /*#__PURE__*/new Set(['absolute', 'fixed']);
|
||||
// Returns the inner client rect, subtracting scrollbars if present.
|
||||
function getInnerBoundingClientRect(element, strategy) {
|
||||
const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
|
||||
@@ -327,7 +326,7 @@ function getClippingElementAncestors(element, cache) {
|
||||
if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
|
||||
currentContainingBlockComputedStyle = null;
|
||||
}
|
||||
const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
|
||||
const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && (currentContainingBlockComputedStyle.position === 'absolute' || currentContainingBlockComputedStyle.position === 'fixed') || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
|
||||
if (shouldDropCurrentNode) {
|
||||
// Drop non-containing blocks.
|
||||
result = result.filter(ancestor => ancestor !== currentNode);
|
||||
@@ -352,20 +351,23 @@ function getClippingRect(_ref) {
|
||||
} = _ref;
|
||||
const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
|
||||
const clippingAncestors = [...elementClippingAncestors, 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));
|
||||
const firstRect = getClientRectFromClippingAncestor(element, clippingAncestors[0], strategy);
|
||||
let top = firstRect.top;
|
||||
let right = firstRect.right;
|
||||
let bottom = firstRect.bottom;
|
||||
let left = firstRect.left;
|
||||
for (let i = 1; i < clippingAncestors.length; i++) {
|
||||
const rect = getClientRectFromClippingAncestor(element, clippingAncestors[i], strategy);
|
||||
top = max(rect.top, top);
|
||||
right = min(rect.right, right);
|
||||
bottom = min(rect.bottom, bottom);
|
||||
left = max(rect.left, left);
|
||||
}
|
||||
return {
|
||||
width: clippingRect.right - clippingRect.left,
|
||||
height: clippingRect.bottom - clippingRect.top,
|
||||
x: clippingRect.left,
|
||||
y: clippingRect.top
|
||||
width: right - left,
|
||||
height: bottom - top,
|
||||
x: left,
|
||||
y: top
|
||||
};
|
||||
}
|
||||
|
||||
@@ -616,7 +618,7 @@ function autoUpdate(reference, floating, update, options) {
|
||||
animationFrame = false
|
||||
} = options;
|
||||
const referenceEl = unwrapElement(reference);
|
||||
const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...getOverflowAncestors(floating)] : [];
|
||||
const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...(floating ? getOverflowAncestors(floating) : [])] : [];
|
||||
ancestors.forEach(ancestor => {
|
||||
ancestorScroll && ancestor.addEventListener('scroll', update, {
|
||||
passive: true
|
||||
@@ -629,7 +631,7 @@ function autoUpdate(reference, floating, update, options) {
|
||||
if (elementResize) {
|
||||
resizeObserver = new ResizeObserver(_ref => {
|
||||
let [firstEntry] = _ref;
|
||||
if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
|
||||
if (firstEntry && firstEntry.target === referenceEl && resizeObserver && floating) {
|
||||
// Prevent update loops when using the `size` middleware.
|
||||
// https://github.com/floating-ui/floating-ui/issues/1740
|
||||
resizeObserver.unobserve(floating);
|
||||
@@ -644,7 +646,9 @@ function autoUpdate(reference, floating, update, options) {
|
||||
if (referenceEl && !animationFrame) {
|
||||
resizeObserver.observe(referenceEl);
|
||||
}
|
||||
resizeObserver.observe(floating);
|
||||
if (floating) {
|
||||
resizeObserver.observe(floating);
|
||||
}
|
||||
}
|
||||
let frameId;
|
||||
let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
|
||||
|
||||
+48
-40
@@ -62,7 +62,6 @@
|
||||
}
|
||||
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
|
||||
}
|
||||
const invalidOverflowDisplayValues = /*#__PURE__*/new Set(['inline', 'contents']);
|
||||
function isOverflowElement(element) {
|
||||
const {
|
||||
overflow,
|
||||
@@ -70,32 +69,35 @@
|
||||
overflowY,
|
||||
display
|
||||
} = getComputedStyle$1(element);
|
||||
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
|
||||
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && display !== 'inline' && display !== 'contents';
|
||||
}
|
||||
const tableElements = /*#__PURE__*/new Set(['table', 'td', 'th']);
|
||||
function isTableElement(element) {
|
||||
return tableElements.has(getNodeName(element));
|
||||
return /^(table|td|th)$/.test(getNodeName(element));
|
||||
}
|
||||
const topLayerSelectors = [':popover-open', ':modal'];
|
||||
function isTopLayer(element) {
|
||||
return topLayerSelectors.some(selector => {
|
||||
try {
|
||||
return element.matches(selector);
|
||||
} catch (_e) {
|
||||
return false;
|
||||
try {
|
||||
if (element.matches(':popover-open')) {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
} catch (_e) {
|
||||
// no-op
|
||||
}
|
||||
try {
|
||||
return element.matches(':modal');
|
||||
} catch (_e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
const transformProperties = ['transform', 'translate', 'scale', 'rotate', 'perspective'];
|
||||
const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'];
|
||||
const containValues = ['paint', 'layout', 'strict', 'content'];
|
||||
const willChangeRe = /transform|translate|scale|rotate|perspective|filter/;
|
||||
const containRe = /paint|layout|strict|content/;
|
||||
const isNotNone = value => !!value && value !== 'none';
|
||||
let isWebKitValue;
|
||||
function isContainingBlock(elementOrCss) {
|
||||
const webkit = isWebKit();
|
||||
const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
|
||||
|
||||
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
||||
// https://drafts.csswg.org/css-transforms-2/#individual-transforms
|
||||
return transformProperties.some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || willChangeValues.some(value => (css.willChange || '').includes(value)) || containValues.some(value => (css.contain || '').includes(value));
|
||||
return isNotNone(css.transform) || isNotNone(css.translate) || isNotNone(css.scale) || isNotNone(css.rotate) || isNotNone(css.perspective) || !isWebKit() && (isNotNone(css.backdropFilter) || isNotNone(css.filter)) || willChangeRe.test(css.willChange || '') || containRe.test(css.contain || '');
|
||||
}
|
||||
function getContainingBlock(element) {
|
||||
let currentNode = getParentNode(element);
|
||||
@@ -110,12 +112,13 @@
|
||||
return null;
|
||||
}
|
||||
function isWebKit() {
|
||||
if (typeof CSS === 'undefined' || !CSS.supports) return false;
|
||||
return CSS.supports('-webkit-backdrop-filter', 'none');
|
||||
if (isWebKitValue == null) {
|
||||
isWebKitValue = typeof CSS !== 'undefined' && CSS.supports && CSS.supports('-webkit-backdrop-filter', 'none');
|
||||
}
|
||||
return isWebKitValue;
|
||||
}
|
||||
const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#document']);
|
||||
function isLastTraversableNode(node) {
|
||||
return lastTraversableNodeNames.has(getNodeName(node));
|
||||
return /^(html|body|#document)$/.test(getNodeName(node));
|
||||
}
|
||||
function getComputedStyle$1(element) {
|
||||
return getWindow(element).getComputedStyle(element);
|
||||
@@ -171,8 +174,9 @@
|
||||
if (isBody) {
|
||||
const frameElement = getFrameElement(win);
|
||||
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
|
||||
} else {
|
||||
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
|
||||
}
|
||||
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
|
||||
}
|
||||
function getFrameElement(win) {
|
||||
return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
|
||||
@@ -349,7 +353,7 @@
|
||||
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
||||
scroll = getNodeScroll(offsetParent);
|
||||
}
|
||||
if (isHTMLElement(offsetParent)) {
|
||||
if (isOffsetParentAnElement) {
|
||||
const offsetRect = getBoundingClientRect(offsetParent);
|
||||
scale = getScale(offsetParent);
|
||||
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
||||
@@ -437,7 +441,6 @@
|
||||
};
|
||||
}
|
||||
|
||||
const absoluteOrFixed = /*#__PURE__*/new Set(['absolute', 'fixed']);
|
||||
// Returns the inner client rect, subtracting scrollbars if present.
|
||||
function getInnerBoundingClientRect(element, strategy) {
|
||||
const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
|
||||
@@ -502,7 +505,7 @@
|
||||
if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
|
||||
currentContainingBlockComputedStyle = null;
|
||||
}
|
||||
const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
|
||||
const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && (currentContainingBlockComputedStyle.position === 'absolute' || currentContainingBlockComputedStyle.position === 'fixed') || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
|
||||
if (shouldDropCurrentNode) {
|
||||
// Drop non-containing blocks.
|
||||
result = result.filter(ancestor => ancestor !== currentNode);
|
||||
@@ -527,20 +530,23 @@
|
||||
} = _ref;
|
||||
const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
|
||||
const clippingAncestors = [...elementClippingAncestors, 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));
|
||||
const firstRect = getClientRectFromClippingAncestor(element, clippingAncestors[0], strategy);
|
||||
let top = firstRect.top;
|
||||
let right = firstRect.right;
|
||||
let bottom = firstRect.bottom;
|
||||
let left = firstRect.left;
|
||||
for (let i = 1; i < clippingAncestors.length; i++) {
|
||||
const rect = getClientRectFromClippingAncestor(element, clippingAncestors[i], strategy);
|
||||
top = max(rect.top, top);
|
||||
right = min(rect.right, right);
|
||||
bottom = min(rect.bottom, bottom);
|
||||
left = max(rect.left, left);
|
||||
}
|
||||
return {
|
||||
width: clippingRect.right - clippingRect.left,
|
||||
height: clippingRect.bottom - clippingRect.top,
|
||||
x: clippingRect.left,
|
||||
y: clippingRect.top
|
||||
width: right - left,
|
||||
height: bottom - top,
|
||||
x: left,
|
||||
y: top
|
||||
};
|
||||
}
|
||||
|
||||
@@ -791,7 +797,7 @@
|
||||
animationFrame = false
|
||||
} = options;
|
||||
const referenceEl = unwrapElement(reference);
|
||||
const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...getOverflowAncestors(floating)] : [];
|
||||
const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...(floating ? getOverflowAncestors(floating) : [])] : [];
|
||||
ancestors.forEach(ancestor => {
|
||||
ancestorScroll && ancestor.addEventListener('scroll', update, {
|
||||
passive: true
|
||||
@@ -804,7 +810,7 @@
|
||||
if (elementResize) {
|
||||
resizeObserver = new ResizeObserver(_ref => {
|
||||
let [firstEntry] = _ref;
|
||||
if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
|
||||
if (firstEntry && firstEntry.target === referenceEl && resizeObserver && floating) {
|
||||
// Prevent update loops when using the `size` middleware.
|
||||
// https://github.com/floating-ui/floating-ui/issues/1740
|
||||
resizeObserver.unobserve(floating);
|
||||
@@ -819,7 +825,9 @@
|
||||
if (referenceEl && !animationFrame) {
|
||||
resizeObserver.observe(referenceEl);
|
||||
}
|
||||
resizeObserver.observe(floating);
|
||||
if (floating) {
|
||||
resizeObserver.observe(floating);
|
||||
}
|
||||
}
|
||||
let frameId;
|
||||
let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
|
||||
|
||||
+1
-1
File diff suppressed because one or more lines are too long
+3
-3
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@floating-ui/dom",
|
||||
"version": "1.7.4",
|
||||
"version": "1.7.6",
|
||||
"description": "Floating UI for the web",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
@@ -43,8 +43,8 @@
|
||||
"positioning"
|
||||
],
|
||||
"dependencies": {
|
||||
"@floating-ui/core": "^1.7.3",
|
||||
"@floating-ui/utils": "^0.2.10"
|
||||
"@floating-ui/core": "^1.7.5",
|
||||
"@floating-ui/utils": "^0.2.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.19",
|
||||
|
||||
+71
-36
@@ -281,28 +281,39 @@ const arrow$1 = options => {
|
||||
* object may be passed.
|
||||
* @see https://floating-ui.com/docs/offset
|
||||
*/
|
||||
const offset = (options, deps) => ({
|
||||
...offset$1(options),
|
||||
options: [options, deps]
|
||||
});
|
||||
const offset = (options, deps) => {
|
||||
const result = offset$1(options);
|
||||
return {
|
||||
name: result.name,
|
||||
fn: result.fn,
|
||||
options: [options, deps]
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Optimizes the visibility of the floating element by shifting it in order to
|
||||
* keep it in view when it will overflow the clipping boundary.
|
||||
* @see https://floating-ui.com/docs/shift
|
||||
*/
|
||||
const shift = (options, deps) => ({
|
||||
...shift$1(options),
|
||||
options: [options, deps]
|
||||
});
|
||||
const shift = (options, deps) => {
|
||||
const result = shift$1(options);
|
||||
return {
|
||||
name: result.name,
|
||||
fn: result.fn,
|
||||
options: [options, deps]
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Built-in `limiter` that will stop `shift()` at a certain point.
|
||||
*/
|
||||
const limitShift = (options, deps) => ({
|
||||
...limitShift$1(options),
|
||||
options: [options, deps]
|
||||
});
|
||||
const limitShift = (options, deps) => {
|
||||
const result = limitShift$1(options);
|
||||
return {
|
||||
fn: result.fn,
|
||||
options: [options, deps]
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Optimizes the visibility of the floating element by flipping the `placement`
|
||||
@@ -310,10 +321,14 @@ const limitShift = (options, deps) => ({
|
||||
* clipping boundary. Alternative to `autoPlacement`.
|
||||
* @see https://floating-ui.com/docs/flip
|
||||
*/
|
||||
const flip = (options, deps) => ({
|
||||
...flip$1(options),
|
||||
options: [options, deps]
|
||||
});
|
||||
const flip = (options, deps) => {
|
||||
const result = flip$1(options);
|
||||
return {
|
||||
name: result.name,
|
||||
fn: result.fn,
|
||||
options: [options, deps]
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Provides data that allows you to change the size of the floating element —
|
||||
@@ -321,10 +336,14 @@ const flip = (options, deps) => ({
|
||||
* width of the reference element.
|
||||
* @see https://floating-ui.com/docs/size
|
||||
*/
|
||||
const size = (options, deps) => ({
|
||||
...size$1(options),
|
||||
options: [options, deps]
|
||||
});
|
||||
const size = (options, deps) => {
|
||||
const result = size$1(options);
|
||||
return {
|
||||
name: result.name,
|
||||
fn: result.fn,
|
||||
options: [options, deps]
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Optimizes the visibility of the floating element by choosing the placement
|
||||
@@ -332,30 +351,42 @@ const size = (options, deps) => ({
|
||||
* preferred placement. Alternative to `flip`.
|
||||
* @see https://floating-ui.com/docs/autoPlacement
|
||||
*/
|
||||
const autoPlacement = (options, deps) => ({
|
||||
...autoPlacement$1(options),
|
||||
options: [options, deps]
|
||||
});
|
||||
const autoPlacement = (options, deps) => {
|
||||
const result = autoPlacement$1(options);
|
||||
return {
|
||||
name: result.name,
|
||||
fn: result.fn,
|
||||
options: [options, deps]
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* 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 = (options, deps) => ({
|
||||
...hide$1(options),
|
||||
options: [options, deps]
|
||||
});
|
||||
const hide = (options, deps) => {
|
||||
const result = hide$1(options);
|
||||
return {
|
||||
name: result.name,
|
||||
fn: result.fn,
|
||||
options: [options, deps]
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* 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 = (options, deps) => ({
|
||||
...inline$1(options),
|
||||
options: [options, deps]
|
||||
});
|
||||
const inline = (options, deps) => {
|
||||
const result = inline$1(options);
|
||||
return {
|
||||
name: result.name,
|
||||
fn: result.fn,
|
||||
options: [options, deps]
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Provides data to position an inner element of the floating element so that it
|
||||
@@ -363,9 +394,13 @@ const inline = (options, deps) => ({
|
||||
* This wraps the core `arrow` middleware to allow React refs as the element.
|
||||
* @see https://floating-ui.com/docs/arrow
|
||||
*/
|
||||
const arrow = (options, deps) => ({
|
||||
...arrow$1(options),
|
||||
options: [options, deps]
|
||||
});
|
||||
const arrow = (options, deps) => {
|
||||
const result = arrow$1(options);
|
||||
return {
|
||||
name: result.name,
|
||||
fn: result.fn,
|
||||
options: [options, deps]
|
||||
};
|
||||
};
|
||||
|
||||
export { arrow, autoPlacement, flip, hide, inline, limitShift, offset, shift, size, useFloating };
|
||||
|
||||
+71
-36
@@ -281,28 +281,39 @@ const arrow$1 = options => {
|
||||
* object may be passed.
|
||||
* @see https://floating-ui.com/docs/offset
|
||||
*/
|
||||
const offset = (options, deps) => ({
|
||||
...offset$1(options),
|
||||
options: [options, deps]
|
||||
});
|
||||
const offset = (options, deps) => {
|
||||
const result = offset$1(options);
|
||||
return {
|
||||
name: result.name,
|
||||
fn: result.fn,
|
||||
options: [options, deps]
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Optimizes the visibility of the floating element by shifting it in order to
|
||||
* keep it in view when it will overflow the clipping boundary.
|
||||
* @see https://floating-ui.com/docs/shift
|
||||
*/
|
||||
const shift = (options, deps) => ({
|
||||
...shift$1(options),
|
||||
options: [options, deps]
|
||||
});
|
||||
const shift = (options, deps) => {
|
||||
const result = shift$1(options);
|
||||
return {
|
||||
name: result.name,
|
||||
fn: result.fn,
|
||||
options: [options, deps]
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Built-in `limiter` that will stop `shift()` at a certain point.
|
||||
*/
|
||||
const limitShift = (options, deps) => ({
|
||||
...limitShift$1(options),
|
||||
options: [options, deps]
|
||||
});
|
||||
const limitShift = (options, deps) => {
|
||||
const result = limitShift$1(options);
|
||||
return {
|
||||
fn: result.fn,
|
||||
options: [options, deps]
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Optimizes the visibility of the floating element by flipping the `placement`
|
||||
@@ -310,10 +321,14 @@ const limitShift = (options, deps) => ({
|
||||
* clipping boundary. Alternative to `autoPlacement`.
|
||||
* @see https://floating-ui.com/docs/flip
|
||||
*/
|
||||
const flip = (options, deps) => ({
|
||||
...flip$1(options),
|
||||
options: [options, deps]
|
||||
});
|
||||
const flip = (options, deps) => {
|
||||
const result = flip$1(options);
|
||||
return {
|
||||
name: result.name,
|
||||
fn: result.fn,
|
||||
options: [options, deps]
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Provides data that allows you to change the size of the floating element —
|
||||
@@ -321,10 +336,14 @@ const flip = (options, deps) => ({
|
||||
* width of the reference element.
|
||||
* @see https://floating-ui.com/docs/size
|
||||
*/
|
||||
const size = (options, deps) => ({
|
||||
...size$1(options),
|
||||
options: [options, deps]
|
||||
});
|
||||
const size = (options, deps) => {
|
||||
const result = size$1(options);
|
||||
return {
|
||||
name: result.name,
|
||||
fn: result.fn,
|
||||
options: [options, deps]
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Optimizes the visibility of the floating element by choosing the placement
|
||||
@@ -332,30 +351,42 @@ const size = (options, deps) => ({
|
||||
* preferred placement. Alternative to `flip`.
|
||||
* @see https://floating-ui.com/docs/autoPlacement
|
||||
*/
|
||||
const autoPlacement = (options, deps) => ({
|
||||
...autoPlacement$1(options),
|
||||
options: [options, deps]
|
||||
});
|
||||
const autoPlacement = (options, deps) => {
|
||||
const result = autoPlacement$1(options);
|
||||
return {
|
||||
name: result.name,
|
||||
fn: result.fn,
|
||||
options: [options, deps]
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* 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 = (options, deps) => ({
|
||||
...hide$1(options),
|
||||
options: [options, deps]
|
||||
});
|
||||
const hide = (options, deps) => {
|
||||
const result = hide$1(options);
|
||||
return {
|
||||
name: result.name,
|
||||
fn: result.fn,
|
||||
options: [options, deps]
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* 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 = (options, deps) => ({
|
||||
...inline$1(options),
|
||||
options: [options, deps]
|
||||
});
|
||||
const inline = (options, deps) => {
|
||||
const result = inline$1(options);
|
||||
return {
|
||||
name: result.name,
|
||||
fn: result.fn,
|
||||
options: [options, deps]
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Provides data to position an inner element of the floating element so that it
|
||||
@@ -363,9 +394,13 @@ const inline = (options, deps) => ({
|
||||
* This wraps the core `arrow` middleware to allow React refs as the element.
|
||||
* @see https://floating-ui.com/docs/arrow
|
||||
*/
|
||||
const arrow = (options, deps) => ({
|
||||
...arrow$1(options),
|
||||
options: [options, deps]
|
||||
});
|
||||
const arrow = (options, deps) => {
|
||||
const result = arrow$1(options);
|
||||
return {
|
||||
name: result.name,
|
||||
fn: result.fn,
|
||||
options: [options, deps]
|
||||
};
|
||||
};
|
||||
|
||||
export { arrow, autoPlacement, flip, hide, inline, limitShift, offset, shift, size, useFloating };
|
||||
|
||||
+71
-36
@@ -301,28 +301,39 @@
|
||||
* object may be passed.
|
||||
* @see https://floating-ui.com/docs/offset
|
||||
*/
|
||||
const offset = (options, deps) => ({
|
||||
...dom.offset(options),
|
||||
options: [options, deps]
|
||||
});
|
||||
const offset = (options, deps) => {
|
||||
const result = dom.offset(options);
|
||||
return {
|
||||
name: result.name,
|
||||
fn: result.fn,
|
||||
options: [options, deps]
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Optimizes the visibility of the floating element by shifting it in order to
|
||||
* keep it in view when it will overflow the clipping boundary.
|
||||
* @see https://floating-ui.com/docs/shift
|
||||
*/
|
||||
const shift = (options, deps) => ({
|
||||
...dom.shift(options),
|
||||
options: [options, deps]
|
||||
});
|
||||
const shift = (options, deps) => {
|
||||
const result = dom.shift(options);
|
||||
return {
|
||||
name: result.name,
|
||||
fn: result.fn,
|
||||
options: [options, deps]
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Built-in `limiter` that will stop `shift()` at a certain point.
|
||||
*/
|
||||
const limitShift = (options, deps) => ({
|
||||
...dom.limitShift(options),
|
||||
options: [options, deps]
|
||||
});
|
||||
const limitShift = (options, deps) => {
|
||||
const result = dom.limitShift(options);
|
||||
return {
|
||||
fn: result.fn,
|
||||
options: [options, deps]
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Optimizes the visibility of the floating element by flipping the `placement`
|
||||
@@ -330,10 +341,14 @@
|
||||
* clipping boundary. Alternative to `autoPlacement`.
|
||||
* @see https://floating-ui.com/docs/flip
|
||||
*/
|
||||
const flip = (options, deps) => ({
|
||||
...dom.flip(options),
|
||||
options: [options, deps]
|
||||
});
|
||||
const flip = (options, deps) => {
|
||||
const result = dom.flip(options);
|
||||
return {
|
||||
name: result.name,
|
||||
fn: result.fn,
|
||||
options: [options, deps]
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Provides data that allows you to change the size of the floating element —
|
||||
@@ -341,10 +356,14 @@
|
||||
* width of the reference element.
|
||||
* @see https://floating-ui.com/docs/size
|
||||
*/
|
||||
const size = (options, deps) => ({
|
||||
...dom.size(options),
|
||||
options: [options, deps]
|
||||
});
|
||||
const size = (options, deps) => {
|
||||
const result = dom.size(options);
|
||||
return {
|
||||
name: result.name,
|
||||
fn: result.fn,
|
||||
options: [options, deps]
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Optimizes the visibility of the floating element by choosing the placement
|
||||
@@ -352,30 +371,42 @@
|
||||
* preferred placement. Alternative to `flip`.
|
||||
* @see https://floating-ui.com/docs/autoPlacement
|
||||
*/
|
||||
const autoPlacement = (options, deps) => ({
|
||||
...dom.autoPlacement(options),
|
||||
options: [options, deps]
|
||||
});
|
||||
const autoPlacement = (options, deps) => {
|
||||
const result = dom.autoPlacement(options);
|
||||
return {
|
||||
name: result.name,
|
||||
fn: result.fn,
|
||||
options: [options, deps]
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* 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 = (options, deps) => ({
|
||||
...dom.hide(options),
|
||||
options: [options, deps]
|
||||
});
|
||||
const hide = (options, deps) => {
|
||||
const result = dom.hide(options);
|
||||
return {
|
||||
name: result.name,
|
||||
fn: result.fn,
|
||||
options: [options, deps]
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* 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 = (options, deps) => ({
|
||||
...dom.inline(options),
|
||||
options: [options, deps]
|
||||
});
|
||||
const inline = (options, deps) => {
|
||||
const result = dom.inline(options);
|
||||
return {
|
||||
name: result.name,
|
||||
fn: result.fn,
|
||||
options: [options, deps]
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* Provides data to position an inner element of the floating element so that it
|
||||
@@ -383,10 +414,14 @@
|
||||
* This wraps the core `arrow` middleware to allow React refs as the element.
|
||||
* @see https://floating-ui.com/docs/arrow
|
||||
*/
|
||||
const arrow = (options, deps) => ({
|
||||
...arrow$1(options),
|
||||
options: [options, deps]
|
||||
});
|
||||
const arrow = (options, deps) => {
|
||||
const result = arrow$1(options);
|
||||
return {
|
||||
name: result.name,
|
||||
fn: result.fn,
|
||||
options: [options, deps]
|
||||
};
|
||||
};
|
||||
|
||||
Object.defineProperty(exports, "autoUpdate", {
|
||||
enumerable: true,
|
||||
|
||||
+1
-1
@@ -1 +1 @@
|
||||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@floating-ui/dom"),require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","@floating-ui/dom","react","react-dom"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).FloatingUIReactDOM={},e.FloatingUIDOM,e.React,e.ReactDOM)}(this,(function(e,t,n,r){"use strict";function o(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var i=o(n),u=o(r),f="undefined"!=typeof document?n.useLayoutEffect:function(){};function c(e,t){if(e===t)return!0;if(typeof e!=typeof t)return!1;if("function"==typeof e&&e.toString()===t.toString())return!0;let n,r,o;if(e&&t&&"object"==typeof e){if(Array.isArray(e)){if(n=e.length,n!==t.length)return!1;for(r=n;0!=r--;)if(!c(e[r],t[r]))return!1;return!0}if(o=Object.keys(e),n=o.length,n!==Object.keys(t).length)return!1;for(r=n;0!=r--;)if(!{}.hasOwnProperty.call(t,o[r]))return!1;for(r=n;0!=r--;){const n=o[r];if(("_owner"!==n||!e.$$typeof)&&!c(e[n],t[n]))return!1}return!0}return e!=e&&t!=t}function a(e){if("undefined"==typeof window)return 1;return(e.ownerDocument.defaultView||window).devicePixelRatio||1}function s(e,t){const n=a(e);return Math.round(t*n)/n}function l(e){const t=i.useRef(e);return f((()=>{t.current=e})),t}const p=e=>({name:"arrow",options:e,fn(n){const{element:r,padding:o}="function"==typeof e?e(n):e;return r&&(i=r,{}.hasOwnProperty.call(i,"current"))?null!=r.current?t.arrow({element:r.current,padding:o}).fn(n):{}:r?t.arrow({element:r,padding:o}).fn(n):{};var i}});Object.defineProperty(e,"autoUpdate",{enumerable:!0,get:function(){return t.autoUpdate}}),Object.defineProperty(e,"computePosition",{enumerable:!0,get:function(){return t.computePosition}}),Object.defineProperty(e,"detectOverflow",{enumerable:!0,get:function(){return t.detectOverflow}}),Object.defineProperty(e,"getOverflowAncestors",{enumerable:!0,get:function(){return t.getOverflowAncestors}}),Object.defineProperty(e,"platform",{enumerable:!0,get:function(){return t.platform}}),e.arrow=(e,t)=>({...p(e),options:[e,t]}),e.autoPlacement=(e,n)=>({...t.autoPlacement(e),options:[e,n]}),e.flip=(e,n)=>({...t.flip(e),options:[e,n]}),e.hide=(e,n)=>({...t.hide(e),options:[e,n]}),e.inline=(e,n)=>({...t.inline(e),options:[e,n]}),e.limitShift=(e,n)=>({...t.limitShift(e),options:[e,n]}),e.offset=(e,n)=>({...t.offset(e),options:[e,n]}),e.shift=(e,n)=>({...t.shift(e),options:[e,n]}),e.size=(e,n)=>({...t.size(e),options:[e,n]}),e.useFloating=function(e){void 0===e&&(e={});const{placement:n="bottom",strategy:r="absolute",middleware:o=[],platform:p,elements:{reference:d,floating:m}={},transform:g=!0,whileElementsMounted:y,open:b}=e,[w,O]=i.useState({x:0,y:0,strategy:r,placement:n,middlewareData:{},isPositioned:!1}),[h,P]=i.useState(o);c(h,o)||P(o);const[j,v]=i.useState(null),[R,S]=i.useState(null),x=i.useCallback((e=>{e!==A.current&&(A.current=e,v(e))}),[]),M=i.useCallback((e=>{e!==C.current&&(C.current=e,S(e))}),[]),k=d||j,D=m||R,A=i.useRef(null),C=i.useRef(null),F=i.useRef(w),U=null!=y,q=l(y),z=l(p),E=l(b),I=i.useCallback((()=>{if(!A.current||!C.current)return;const e={placement:n,strategy:r,middleware:h};z.current&&(e.platform=z.current),t.computePosition(A.current,C.current,e).then((e=>{const t={...e,isPositioned:!1!==E.current};T.current&&!c(F.current,t)&&(F.current=t,u.flushSync((()=>{O(t)})))}))}),[h,n,r,z,E]);f((()=>{!1===b&&F.current.isPositioned&&(F.current.isPositioned=!1,O((e=>({...e,isPositioned:!1}))))}),[b]);const T=i.useRef(!1);f((()=>(T.current=!0,()=>{T.current=!1})),[]),f((()=>{if(k&&(A.current=k),D&&(C.current=D),k&&D){if(q.current)return q.current(k,D,I);I()}}),[k,D,I,q,U]);const $=i.useMemo((()=>({reference:A,floating:C,setReference:x,setFloating:M})),[x,M]),L=i.useMemo((()=>({reference:k,floating:D})),[k,D]),V=i.useMemo((()=>{const e={position:r,left:0,top:0};if(!L.floating)return e;const t=s(L.floating,w.x),n=s(L.floating,w.y);return g?{...e,transform:"translate("+t+"px, "+n+"px)",...a(L.floating)>=1.5&&{willChange:"transform"}}:{position:r,left:t,top:n}}),[r,g,L.floating,w.x,w.y]);return i.useMemo((()=>({...w,update:I,refs:$,elements:L,floatingStyles:V})),[w,I,$,L,V])}}));
|
||||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@floating-ui/dom"),require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","@floating-ui/dom","react","react-dom"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).FloatingUIReactDOM={},e.FloatingUIDOM,e.React,e.ReactDOM)}(this,(function(e,t,n,r){"use strict";function o(e){var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var i=o(n),u=o(r),f="undefined"!=typeof document?n.useLayoutEffect:function(){};function c(e,t){if(e===t)return!0;if(typeof e!=typeof t)return!1;if("function"==typeof e&&e.toString()===t.toString())return!0;let n,r,o;if(e&&t&&"object"==typeof e){if(Array.isArray(e)){if(n=e.length,n!==t.length)return!1;for(r=n;0!=r--;)if(!c(e[r],t[r]))return!1;return!0}if(o=Object.keys(e),n=o.length,n!==Object.keys(t).length)return!1;for(r=n;0!=r--;)if(!{}.hasOwnProperty.call(t,o[r]))return!1;for(r=n;0!=r--;){const n=o[r];if(("_owner"!==n||!e.$$typeof)&&!c(e[n],t[n]))return!1}return!0}return e!=e&&t!=t}function a(e){if("undefined"==typeof window)return 1;return(e.ownerDocument.defaultView||window).devicePixelRatio||1}function s(e,t){const n=a(e);return Math.round(t*n)/n}function l(e){const t=i.useRef(e);return f((()=>{t.current=e})),t}Object.defineProperty(e,"autoUpdate",{enumerable:!0,get:function(){return t.autoUpdate}}),Object.defineProperty(e,"computePosition",{enumerable:!0,get:function(){return t.computePosition}}),Object.defineProperty(e,"detectOverflow",{enumerable:!0,get:function(){return t.detectOverflow}}),Object.defineProperty(e,"getOverflowAncestors",{enumerable:!0,get:function(){return t.getOverflowAncestors}}),Object.defineProperty(e,"platform",{enumerable:!0,get:function(){return t.platform}}),e.arrow=(e,n)=>{const r=(e=>({name:"arrow",options:e,fn(n){const{element:r,padding:o}="function"==typeof e?e(n):e;return r&&(i=r,{}.hasOwnProperty.call(i,"current"))?null!=r.current?t.arrow({element:r.current,padding:o}).fn(n):{}:r?t.arrow({element:r,padding:o}).fn(n):{};var i}}))(e);return{name:r.name,fn:r.fn,options:[e,n]}},e.autoPlacement=(e,n)=>{const r=t.autoPlacement(e);return{name:r.name,fn:r.fn,options:[e,n]}},e.flip=(e,n)=>{const r=t.flip(e);return{name:r.name,fn:r.fn,options:[e,n]}},e.hide=(e,n)=>{const r=t.hide(e);return{name:r.name,fn:r.fn,options:[e,n]}},e.inline=(e,n)=>{const r=t.inline(e);return{name:r.name,fn:r.fn,options:[e,n]}},e.limitShift=(e,n)=>({fn:t.limitShift(e).fn,options:[e,n]}),e.offset=(e,n)=>{const r=t.offset(e);return{name:r.name,fn:r.fn,options:[e,n]}},e.shift=(e,n)=>{const r=t.shift(e);return{name:r.name,fn:r.fn,options:[e,n]}},e.size=(e,n)=>{const r=t.size(e);return{name:r.name,fn:r.fn,options:[e,n]}},e.useFloating=function(e){void 0===e&&(e={});const{placement:n="bottom",strategy:r="absolute",middleware:o=[],platform:m,elements:{reference:p,floating:d}={},transform:g=!0,whileElementsMounted:y,open:b}=e,[w,O]=i.useState({x:0,y:0,strategy:r,placement:n,middlewareData:{},isPositioned:!1}),[h,P]=i.useState(o);c(h,o)||P(o);const[j,v]=i.useState(null),[R,S]=i.useState(null),x=i.useCallback((e=>{e!==A.current&&(A.current=e,v(e))}),[]),M=i.useCallback((e=>{e!==C.current&&(C.current=e,S(e))}),[]),k=p||j,D=d||R,A=i.useRef(null),C=i.useRef(null),F=i.useRef(w),U=null!=y,q=l(y),z=l(m),E=l(b),I=i.useCallback((()=>{if(!A.current||!C.current)return;const e={placement:n,strategy:r,middleware:h};z.current&&(e.platform=z.current),t.computePosition(A.current,C.current,e).then((e=>{const t={...e,isPositioned:!1!==E.current};T.current&&!c(F.current,t)&&(F.current=t,u.flushSync((()=>{O(t)})))}))}),[h,n,r,z,E]);f((()=>{!1===b&&F.current.isPositioned&&(F.current.isPositioned=!1,O((e=>({...e,isPositioned:!1}))))}),[b]);const T=i.useRef(!1);f((()=>(T.current=!0,()=>{T.current=!1})),[]),f((()=>{if(k&&(A.current=k),D&&(C.current=D),k&&D){if(q.current)return q.current(k,D,I);I()}}),[k,D,I,q,U]);const $=i.useMemo((()=>({reference:A,floating:C,setReference:x,setFloating:M})),[x,M]),L=i.useMemo((()=>({reference:k,floating:D})),[k,D]),V=i.useMemo((()=>{const e={position:r,left:0,top:0};if(!L.floating)return e;const t=s(L.floating,w.x),n=s(L.floating,w.y);return g?{...e,transform:"translate("+t+"px, "+n+"px)",...a(L.floating)>=1.5&&{willChange:"transform"}}:{position:r,left:t,top:n}}),[r,g,L.floating,w.x,w.y]);return i.useMemo((()=>({...w,update:I,refs:$,elements:L,floatingStyles:V})),[w,I,$,L,V])}}));
|
||||
|
||||
+2
-2
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@floating-ui/react-dom",
|
||||
"version": "2.1.6",
|
||||
"version": "2.1.8",
|
||||
"description": "Floating UI for React DOM",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
@@ -49,7 +49,7 @@
|
||||
"react-dom": ">=16.8.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@floating-ui/dom": "^1.7.4"
|
||||
"@floating-ui/dom": "^1.7.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/preset-react": "^7.23.3",
|
||||
|
||||
+25
-21
@@ -42,7 +42,6 @@ function isShadowRoot(value) {
|
||||
}
|
||||
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
|
||||
}
|
||||
const invalidOverflowDisplayValues = /*#__PURE__*/new Set(['inline', 'contents']);
|
||||
function isOverflowElement(element) {
|
||||
const {
|
||||
overflow,
|
||||
@@ -50,32 +49,35 @@ function isOverflowElement(element) {
|
||||
overflowY,
|
||||
display
|
||||
} = getComputedStyle(element);
|
||||
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
|
||||
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && display !== 'inline' && display !== 'contents';
|
||||
}
|
||||
const tableElements = /*#__PURE__*/new Set(['table', 'td', 'th']);
|
||||
function isTableElement(element) {
|
||||
return tableElements.has(getNodeName(element));
|
||||
return /^(table|td|th)$/.test(getNodeName(element));
|
||||
}
|
||||
const topLayerSelectors = [':popover-open', ':modal'];
|
||||
function isTopLayer(element) {
|
||||
return topLayerSelectors.some(selector => {
|
||||
try {
|
||||
return element.matches(selector);
|
||||
} catch (_e) {
|
||||
return false;
|
||||
try {
|
||||
if (element.matches(':popover-open')) {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
} catch (_e) {
|
||||
// no-op
|
||||
}
|
||||
try {
|
||||
return element.matches(':modal');
|
||||
} catch (_e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
const transformProperties = ['transform', 'translate', 'scale', 'rotate', 'perspective'];
|
||||
const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'];
|
||||
const containValues = ['paint', 'layout', 'strict', 'content'];
|
||||
const willChangeRe = /transform|translate|scale|rotate|perspective|filter/;
|
||||
const containRe = /paint|layout|strict|content/;
|
||||
const isNotNone = value => !!value && value !== 'none';
|
||||
let isWebKitValue;
|
||||
function isContainingBlock(elementOrCss) {
|
||||
const webkit = isWebKit();
|
||||
const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
|
||||
|
||||
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
||||
// https://drafts.csswg.org/css-transforms-2/#individual-transforms
|
||||
return transformProperties.some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || willChangeValues.some(value => (css.willChange || '').includes(value)) || containValues.some(value => (css.contain || '').includes(value));
|
||||
return isNotNone(css.transform) || isNotNone(css.translate) || isNotNone(css.scale) || isNotNone(css.rotate) || isNotNone(css.perspective) || !isWebKit() && (isNotNone(css.backdropFilter) || isNotNone(css.filter)) || willChangeRe.test(css.willChange || '') || containRe.test(css.contain || '');
|
||||
}
|
||||
function getContainingBlock(element) {
|
||||
let currentNode = getParentNode(element);
|
||||
@@ -90,12 +92,13 @@ function getContainingBlock(element) {
|
||||
return null;
|
||||
}
|
||||
function isWebKit() {
|
||||
if (typeof CSS === 'undefined' || !CSS.supports) return false;
|
||||
return CSS.supports('-webkit-backdrop-filter', 'none');
|
||||
if (isWebKitValue == null) {
|
||||
isWebKitValue = typeof CSS !== 'undefined' && CSS.supports && CSS.supports('-webkit-backdrop-filter', 'none');
|
||||
}
|
||||
return isWebKitValue;
|
||||
}
|
||||
const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#document']);
|
||||
function isLastTraversableNode(node) {
|
||||
return lastTraversableNodeNames.has(getNodeName(node));
|
||||
return /^(html|body|#document)$/.test(getNodeName(node));
|
||||
}
|
||||
function getComputedStyle(element) {
|
||||
return getWindow(element).getComputedStyle(element);
|
||||
@@ -151,8 +154,9 @@ function getOverflowAncestors(node, list, traverseIframes) {
|
||||
if (isBody) {
|
||||
const frameElement = getFrameElement(win);
|
||||
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
|
||||
} else {
|
||||
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
|
||||
}
|
||||
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
|
||||
}
|
||||
function getFrameElement(win) {
|
||||
return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
|
||||
|
||||
+25
-21
@@ -42,7 +42,6 @@ function isShadowRoot(value) {
|
||||
}
|
||||
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
|
||||
}
|
||||
const invalidOverflowDisplayValues = /*#__PURE__*/new Set(['inline', 'contents']);
|
||||
function isOverflowElement(element) {
|
||||
const {
|
||||
overflow,
|
||||
@@ -50,32 +49,35 @@ function isOverflowElement(element) {
|
||||
overflowY,
|
||||
display
|
||||
} = getComputedStyle(element);
|
||||
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
|
||||
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && display !== 'inline' && display !== 'contents';
|
||||
}
|
||||
const tableElements = /*#__PURE__*/new Set(['table', 'td', 'th']);
|
||||
function isTableElement(element) {
|
||||
return tableElements.has(getNodeName(element));
|
||||
return /^(table|td|th)$/.test(getNodeName(element));
|
||||
}
|
||||
const topLayerSelectors = [':popover-open', ':modal'];
|
||||
function isTopLayer(element) {
|
||||
return topLayerSelectors.some(selector => {
|
||||
try {
|
||||
return element.matches(selector);
|
||||
} catch (_e) {
|
||||
return false;
|
||||
try {
|
||||
if (element.matches(':popover-open')) {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
} catch (_e) {
|
||||
// no-op
|
||||
}
|
||||
try {
|
||||
return element.matches(':modal');
|
||||
} catch (_e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
const transformProperties = ['transform', 'translate', 'scale', 'rotate', 'perspective'];
|
||||
const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'];
|
||||
const containValues = ['paint', 'layout', 'strict', 'content'];
|
||||
const willChangeRe = /transform|translate|scale|rotate|perspective|filter/;
|
||||
const containRe = /paint|layout|strict|content/;
|
||||
const isNotNone = value => !!value && value !== 'none';
|
||||
let isWebKitValue;
|
||||
function isContainingBlock(elementOrCss) {
|
||||
const webkit = isWebKit();
|
||||
const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
|
||||
|
||||
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
||||
// https://drafts.csswg.org/css-transforms-2/#individual-transforms
|
||||
return transformProperties.some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || willChangeValues.some(value => (css.willChange || '').includes(value)) || containValues.some(value => (css.contain || '').includes(value));
|
||||
return isNotNone(css.transform) || isNotNone(css.translate) || isNotNone(css.scale) || isNotNone(css.rotate) || isNotNone(css.perspective) || !isWebKit() && (isNotNone(css.backdropFilter) || isNotNone(css.filter)) || willChangeRe.test(css.willChange || '') || containRe.test(css.contain || '');
|
||||
}
|
||||
function getContainingBlock(element) {
|
||||
let currentNode = getParentNode(element);
|
||||
@@ -90,12 +92,13 @@ function getContainingBlock(element) {
|
||||
return null;
|
||||
}
|
||||
function isWebKit() {
|
||||
if (typeof CSS === 'undefined' || !CSS.supports) return false;
|
||||
return CSS.supports('-webkit-backdrop-filter', 'none');
|
||||
if (isWebKitValue == null) {
|
||||
isWebKitValue = typeof CSS !== 'undefined' && CSS.supports && CSS.supports('-webkit-backdrop-filter', 'none');
|
||||
}
|
||||
return isWebKitValue;
|
||||
}
|
||||
const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#document']);
|
||||
function isLastTraversableNode(node) {
|
||||
return lastTraversableNodeNames.has(getNodeName(node));
|
||||
return /^(html|body|#document)$/.test(getNodeName(node));
|
||||
}
|
||||
function getComputedStyle(element) {
|
||||
return getWindow(element).getComputedStyle(element);
|
||||
@@ -151,8 +154,9 @@ function getOverflowAncestors(node, list, traverseIframes) {
|
||||
if (isBody) {
|
||||
const frameElement = getFrameElement(win);
|
||||
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
|
||||
} else {
|
||||
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
|
||||
}
|
||||
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
|
||||
}
|
||||
function getFrameElement(win) {
|
||||
return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
|
||||
|
||||
+25
-21
@@ -48,7 +48,6 @@
|
||||
}
|
||||
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
|
||||
}
|
||||
const invalidOverflowDisplayValues = /*#__PURE__*/new Set(['inline', 'contents']);
|
||||
function isOverflowElement(element) {
|
||||
const {
|
||||
overflow,
|
||||
@@ -56,32 +55,35 @@
|
||||
overflowY,
|
||||
display
|
||||
} = getComputedStyle(element);
|
||||
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
|
||||
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && display !== 'inline' && display !== 'contents';
|
||||
}
|
||||
const tableElements = /*#__PURE__*/new Set(['table', 'td', 'th']);
|
||||
function isTableElement(element) {
|
||||
return tableElements.has(getNodeName(element));
|
||||
return /^(table|td|th)$/.test(getNodeName(element));
|
||||
}
|
||||
const topLayerSelectors = [':popover-open', ':modal'];
|
||||
function isTopLayer(element) {
|
||||
return topLayerSelectors.some(selector => {
|
||||
try {
|
||||
return element.matches(selector);
|
||||
} catch (_e) {
|
||||
return false;
|
||||
try {
|
||||
if (element.matches(':popover-open')) {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
} catch (_e) {
|
||||
// no-op
|
||||
}
|
||||
try {
|
||||
return element.matches(':modal');
|
||||
} catch (_e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
const transformProperties = ['transform', 'translate', 'scale', 'rotate', 'perspective'];
|
||||
const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'];
|
||||
const containValues = ['paint', 'layout', 'strict', 'content'];
|
||||
const willChangeRe = /transform|translate|scale|rotate|perspective|filter/;
|
||||
const containRe = /paint|layout|strict|content/;
|
||||
const isNotNone = value => !!value && value !== 'none';
|
||||
let isWebKitValue;
|
||||
function isContainingBlock(elementOrCss) {
|
||||
const webkit = isWebKit();
|
||||
const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
|
||||
|
||||
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
||||
// https://drafts.csswg.org/css-transforms-2/#individual-transforms
|
||||
return transformProperties.some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || willChangeValues.some(value => (css.willChange || '').includes(value)) || containValues.some(value => (css.contain || '').includes(value));
|
||||
return isNotNone(css.transform) || isNotNone(css.translate) || isNotNone(css.scale) || isNotNone(css.rotate) || isNotNone(css.perspective) || !isWebKit() && (isNotNone(css.backdropFilter) || isNotNone(css.filter)) || willChangeRe.test(css.willChange || '') || containRe.test(css.contain || '');
|
||||
}
|
||||
function getContainingBlock(element) {
|
||||
let currentNode = getParentNode(element);
|
||||
@@ -96,12 +98,13 @@
|
||||
return null;
|
||||
}
|
||||
function isWebKit() {
|
||||
if (typeof CSS === 'undefined' || !CSS.supports) return false;
|
||||
return CSS.supports('-webkit-backdrop-filter', 'none');
|
||||
if (isWebKitValue == null) {
|
||||
isWebKitValue = typeof CSS !== 'undefined' && CSS.supports && CSS.supports('-webkit-backdrop-filter', 'none');
|
||||
}
|
||||
return isWebKitValue;
|
||||
}
|
||||
const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#document']);
|
||||
function isLastTraversableNode(node) {
|
||||
return lastTraversableNodeNames.has(getNodeName(node));
|
||||
return /^(html|body|#document)$/.test(getNodeName(node));
|
||||
}
|
||||
function getComputedStyle(element) {
|
||||
return getWindow(element).getComputedStyle(element);
|
||||
@@ -157,8 +160,9 @@
|
||||
if (isBody) {
|
||||
const frameElement = getFrameElement(win);
|
||||
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
|
||||
} else {
|
||||
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
|
||||
}
|
||||
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
|
||||
}
|
||||
function getFrameElement(win) {
|
||||
return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
|
||||
|
||||
+1
-1
@@ -1 +1 @@
|
||||
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n((e="undefined"!=typeof globalThis?globalThis:e||self).FloatingUIUtilsDOM={})}(this,(function(e){"use strict";function n(){return"undefined"!=typeof window}function t(e){return i(e)?(e.nodeName||"").toLowerCase():"#document"}function o(e){var n;return(null==e||null==(n=e.ownerDocument)?void 0:n.defaultView)||window}function r(e){var n;return null==(n=(i(e)?e.ownerDocument:e.document)||window.document)?void 0:n.documentElement}function i(e){return!!n()&&(e instanceof Node||e instanceof o(e).Node)}function c(e){return!!n()&&(e instanceof Element||e instanceof o(e).Element)}function l(e){return!!n()&&(e instanceof HTMLElement||e instanceof o(e).HTMLElement)}function s(e){return!(!n()||"undefined"==typeof ShadowRoot)&&(e instanceof ShadowRoot||e instanceof o(e).ShadowRoot)}const u=new Set(["inline","contents"]);function a(e){const{overflow:n,overflowX:t,overflowY:o,display:r}=b(e);return/auto|scroll|overlay|hidden|clip/.test(n+o+t)&&!u.has(r)}const f=new Set(["table","td","th"]);const d=[":popover-open",":modal"];function m(e){return d.some((n=>{try{return e.matches(n)}catch(e){return!1}}))}const p=["transform","translate","scale","rotate","perspective"],w=["transform","translate","scale","rotate","perspective","filter"],y=["paint","layout","strict","content"];function v(e){const n=g(),t=c(e)?b(e):e;return p.some((e=>!!t[e]&&"none"!==t[e]))||!!t.containerType&&"normal"!==t.containerType||!n&&!!t.backdropFilter&&"none"!==t.backdropFilter||!n&&!!t.filter&&"none"!==t.filter||w.some((e=>(t.willChange||"").includes(e)))||y.some((e=>(t.contain||"").includes(e)))}function g(){return!("undefined"==typeof CSS||!CSS.supports)&&CSS.supports("-webkit-backdrop-filter","none")}const h=new Set(["html","body","#document"]);function S(e){return h.has(t(e))}function b(e){return o(e).getComputedStyle(e)}function T(e){if("html"===t(e))return e;const n=e.assignedSlot||e.parentNode||s(e)&&e.host||r(e);return s(n)?n.host:n}function E(e){const n=T(e);return S(n)?e.ownerDocument?e.ownerDocument.body:e.body:l(n)&&a(n)?n:E(n)}function N(e){return e.parent&&Object.getPrototypeOf(e.parent)?e.frameElement:null}e.getComputedStyle=b,e.getContainingBlock=function(e){let n=T(e);for(;l(n)&&!S(n);){if(v(n))return n;if(m(n))return null;n=T(n)}return null},e.getDocumentElement=r,e.getFrameElement=N,e.getNearestOverflowAncestor=E,e.getNodeName=t,e.getNodeScroll=function(e){return c(e)?{scrollLeft:e.scrollLeft,scrollTop:e.scrollTop}:{scrollLeft:e.scrollX,scrollTop:e.scrollY}},e.getOverflowAncestors=function e(n,t,r){var i;void 0===t&&(t=[]),void 0===r&&(r=!0);const c=E(n),l=c===(null==(i=n.ownerDocument)?void 0:i.body),s=o(c);if(l){const n=N(s);return t.concat(s,s.visualViewport||[],a(c)?c:[],n&&r?e(n):[])}return t.concat(c,e(c,[],r))},e.getParentNode=T,e.getWindow=o,e.isContainingBlock=v,e.isElement=c,e.isHTMLElement=l,e.isLastTraversableNode=S,e.isNode=i,e.isOverflowElement=a,e.isShadowRoot=s,e.isTableElement=function(e){return f.has(t(e))},e.isTopLayer=m,e.isWebKit=g}));
|
||||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).FloatingUIUtilsDOM={})}(this,(function(t){"use strict";function e(){return"undefined"!=typeof window}function n(t){return i(t)?(t.nodeName||"").toLowerCase():"#document"}function o(t){var e;return(null==t||null==(e=t.ownerDocument)?void 0:e.defaultView)||window}function r(t){var e;return null==(e=(i(t)?t.ownerDocument:t.document)||window.document)?void 0:e.documentElement}function i(t){return!!e()&&(t instanceof Node||t instanceof o(t).Node)}function l(t){return!!e()&&(t instanceof Element||t instanceof o(t).Element)}function c(t){return!!e()&&(t instanceof HTMLElement||t instanceof o(t).HTMLElement)}function u(t){return!(!e()||"undefined"==typeof ShadowRoot)&&(t instanceof ShadowRoot||t instanceof o(t).ShadowRoot)}function s(t){const{overflow:e,overflowX:n,overflowY:o,display:r}=g(t);return/auto|scroll|overlay|hidden|clip/.test(e+o+n)&&"inline"!==r&&"contents"!==r}function f(t){try{if(t.matches(":popover-open"))return!0}catch(t){}try{return t.matches(":modal")}catch(t){return!1}}const a=/transform|translate|scale|rotate|perspective|filter/,d=/paint|layout|strict|content/,m=t=>!!t&&"none"!==t;let p;function w(t){const e=l(t)?g(t):t;return m(e.transform)||m(e.translate)||m(e.scale)||m(e.rotate)||m(e.perspective)||!v()&&(m(e.backdropFilter)||m(e.filter))||a.test(e.willChange||"")||d.test(e.contain||"")}function v(){return null==p&&(p="undefined"!=typeof CSS&&CSS.supports&&CSS.supports("-webkit-backdrop-filter","none")),p}function y(t){return/^(html|body|#document)$/.test(n(t))}function g(t){return o(t).getComputedStyle(t)}function h(t){if("html"===n(t))return t;const e=t.assignedSlot||t.parentNode||u(t)&&t.host||r(t);return u(e)?e.host:e}function b(t){const e=h(t);return y(e)?t.ownerDocument?t.ownerDocument.body:t.body:c(e)&&s(e)?e:b(e)}function S(t){return t.parent&&Object.getPrototypeOf(t.parent)?t.frameElement:null}t.getComputedStyle=g,t.getContainingBlock=function(t){let e=h(t);for(;c(e)&&!y(e);){if(w(e))return e;if(f(e))return null;e=h(e)}return null},t.getDocumentElement=r,t.getFrameElement=S,t.getNearestOverflowAncestor=b,t.getNodeName=n,t.getNodeScroll=function(t){return l(t)?{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}:{scrollLeft:t.scrollX,scrollTop:t.scrollY}},t.getOverflowAncestors=function t(e,n,r){var i;void 0===n&&(n=[]),void 0===r&&(r=!0);const l=b(e),c=l===(null==(i=e.ownerDocument)?void 0:i.body),u=o(l);if(c){const e=S(u);return n.concat(u,u.visualViewport||[],s(l)?l:[],e&&r?t(e):[])}return n.concat(l,t(l,[],r))},t.getParentNode=h,t.getWindow=o,t.isContainingBlock=w,t.isElement=l,t.isHTMLElement=c,t.isLastTraversableNode=y,t.isNode=i,t.isOverflowElement=s,t.isShadowRoot=u,t.isTableElement=function(t){return/^(table|td|th)$/.test(n(t))},t.isTopLayer=f,t.isWebKit=v}));
|
||||
|
||||
+5
-8
@@ -20,10 +20,6 @@ const oppositeSideMap = {
|
||||
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 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));
|
||||
@@ -67,7 +63,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'];
|
||||
@@ -98,7 +94,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 {
|
||||
|
||||
+5
-8
@@ -20,10 +20,6 @@ const oppositeSideMap = {
|
||||
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 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));
|
||||
@@ -67,7 +63,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'];
|
||||
@@ -98,7 +94,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 {
|
||||
|
||||
+5
-8
@@ -26,10 +26,6 @@
|
||||
bottom: 'top',
|
||||
top: 'bottom'
|
||||
};
|
||||
const oppositeAlignmentMap = {
|
||||
start: 'end',
|
||||
end: 'start'
|
||||
};
|
||||
function clamp(start, value, end) {
|
||||
return max(start, min(value, end));
|
||||
}
|
||||
@@ -48,9 +44,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));
|
||||
@@ -73,7 +69,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'];
|
||||
@@ -104,7 +100,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 {
|
||||
|
||||
+1
-1
@@ -1 +1 @@
|
||||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).FloatingUIUtils={})}(this,(function(t){"use strict";const e=["top","right","bottom","left"],n=["start","end"],o=e.reduce(((t,e)=>t.concat(e,e+"-"+n[0],e+"-"+n[1])),[]),i=Math.min,r=Math.max,c=Math.round,u=Math.floor,f={left:"right",right:"left",bottom:"top",top:"bottom"},s={start:"end",end:"start"};function a(t){return t.split("-")[0]}function l(t){return t.split("-")[1]}function g(t){return"x"===t?"y":"x"}function p(t){return"y"===t?"height":"width"}const d=new Set(["top","bottom"]);function m(t){return d.has(a(t))?"y":"x"}function h(t){return g(m(t))}function x(t){return t.replace(/start|end/g,(t=>s[t]))}const b=["left","right"],y=["right","left"],A=["top","bottom"],O=["bottom","top"];function P(t){return t.replace(/left|right|bottom|top/g,(t=>f[t]))}function w(t){return{top:0,right:0,bottom:0,left:0,...t}}t.alignments=n,t.clamp=function(t,e,n){return r(t,i(e,n))},t.createCoords=t=>({x:t,y:t}),t.evaluate=function(t,e){return"function"==typeof t?t(e):t},t.expandPaddingObject=w,t.floor=u,t.getAlignment=l,t.getAlignmentAxis=h,t.getAlignmentSides=function(t,e,n){void 0===n&&(n=!1);const o=l(t),i=h(t),r=p(i);let c="x"===i?o===(n?"end":"start")?"right":"left":"start"===o?"bottom":"top";return e.reference[r]>e.floating[r]&&(c=P(c)),[c,P(c)]},t.getAxisLength=p,t.getExpandedPlacements=function(t){const e=P(t);return[x(t),e,x(e)]},t.getOppositeAlignmentPlacement=x,t.getOppositeAxis=g,t.getOppositeAxisPlacements=function(t,e,n,o){const i=l(t);let r=function(t,e,n){switch(t){case"top":case"bottom":return n?e?y:b:e?b:y;case"left":case"right":return e?A:O;default:return[]}}(a(t),"start"===n,o);return i&&(r=r.map((t=>t+"-"+i)),e&&(r=r.concat(r.map(x)))),r},t.getOppositePlacement=P,t.getPaddingObject=function(t){return"number"!=typeof t?w(t):{top:t,right:t,bottom:t,left:t}},t.getSide=a,t.getSideAxis=m,t.max=r,t.min=i,t.placements=o,t.rectToClientRect=function(t){const{x:e,y:n,width:o,height:i}=t;return{width:o,height:i,top:n,left:e,right:e+o,bottom:n+i,x:e,y:n}},t.round=c,t.sides=e}));
|
||||
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).FloatingUIUtils={})}(this,(function(t){"use strict";const e=["top","right","bottom","left"],n=["start","end"],o=e.reduce(((t,e)=>t.concat(e,e+"-"+n[0],e+"-"+n[1])),[]),i=Math.min,r=Math.max,c=Math.round,s=Math.floor,u={left:"right",right:"left",bottom:"top",top:"bottom"};function f(t){return t.split("-")[0]}function l(t){return t.split("-")[1]}function a(t){return"x"===t?"y":"x"}function g(t){return"y"===t?"height":"width"}function p(t){const e=t[0];return"t"===e||"b"===e?"y":"x"}function d(t){return a(p(t))}function m(t){return t.includes("start")?t.replace("start","end"):t.replace("end","start")}const h=["left","right"],x=["right","left"],b=["top","bottom"],y=["bottom","top"];function A(t){const e=f(t);return u[e]+t.slice(e.length)}function O(t){return{top:0,right:0,bottom:0,left:0,...t}}t.alignments=n,t.clamp=function(t,e,n){return r(t,i(e,n))},t.createCoords=t=>({x:t,y:t}),t.evaluate=function(t,e){return"function"==typeof t?t(e):t},t.expandPaddingObject=O,t.floor=s,t.getAlignment=l,t.getAlignmentAxis=d,t.getAlignmentSides=function(t,e,n){void 0===n&&(n=!1);const o=l(t),i=d(t),r=g(i);let c="x"===i?o===(n?"end":"start")?"right":"left":"start"===o?"bottom":"top";return e.reference[r]>e.floating[r]&&(c=A(c)),[c,A(c)]},t.getAxisLength=g,t.getExpandedPlacements=function(t){const e=A(t);return[m(t),e,m(e)]},t.getOppositeAlignmentPlacement=m,t.getOppositeAxis=a,t.getOppositeAxisPlacements=function(t,e,n,o){const i=l(t);let r=function(t,e,n){switch(t){case"top":case"bottom":return n?e?x:h:e?h:x;case"left":case"right":return e?b:y;default:return[]}}(f(t),"start"===n,o);return i&&(r=r.map((t=>t+"-"+i)),e&&(r=r.concat(r.map(m)))),r},t.getOppositePlacement=A,t.getPaddingObject=function(t){return"number"!=typeof t?O(t):{top:t,right:t,bottom:t,left:t}},t.getSide=f,t.getSideAxis=p,t.max=r,t.min=i,t.placements=o,t.rectToClientRect=function(t){const{x:e,y:n,width:o,height:i}=t;return{width:o,height:i,top:n,left:e,right:e+o,bottom:n+i,x:e,y:n}},t.round=c,t.sides=e}));
|
||||
|
||||
+25
-21
@@ -42,7 +42,6 @@ function isShadowRoot(value) {
|
||||
}
|
||||
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
|
||||
}
|
||||
const invalidOverflowDisplayValues = /*#__PURE__*/new Set(['inline', 'contents']);
|
||||
function isOverflowElement(element) {
|
||||
const {
|
||||
overflow,
|
||||
@@ -50,32 +49,35 @@ function isOverflowElement(element) {
|
||||
overflowY,
|
||||
display
|
||||
} = getComputedStyle(element);
|
||||
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
|
||||
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && display !== 'inline' && display !== 'contents';
|
||||
}
|
||||
const tableElements = /*#__PURE__*/new Set(['table', 'td', 'th']);
|
||||
function isTableElement(element) {
|
||||
return tableElements.has(getNodeName(element));
|
||||
return /^(table|td|th)$/.test(getNodeName(element));
|
||||
}
|
||||
const topLayerSelectors = [':popover-open', ':modal'];
|
||||
function isTopLayer(element) {
|
||||
return topLayerSelectors.some(selector => {
|
||||
try {
|
||||
return element.matches(selector);
|
||||
} catch (_e) {
|
||||
return false;
|
||||
try {
|
||||
if (element.matches(':popover-open')) {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
} catch (_e) {
|
||||
// no-op
|
||||
}
|
||||
try {
|
||||
return element.matches(':modal');
|
||||
} catch (_e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
const transformProperties = ['transform', 'translate', 'scale', 'rotate', 'perspective'];
|
||||
const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'];
|
||||
const containValues = ['paint', 'layout', 'strict', 'content'];
|
||||
const willChangeRe = /transform|translate|scale|rotate|perspective|filter/;
|
||||
const containRe = /paint|layout|strict|content/;
|
||||
const isNotNone = value => !!value && value !== 'none';
|
||||
let isWebKitValue;
|
||||
function isContainingBlock(elementOrCss) {
|
||||
const webkit = isWebKit();
|
||||
const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
|
||||
|
||||
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
||||
// https://drafts.csswg.org/css-transforms-2/#individual-transforms
|
||||
return transformProperties.some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || willChangeValues.some(value => (css.willChange || '').includes(value)) || containValues.some(value => (css.contain || '').includes(value));
|
||||
return isNotNone(css.transform) || isNotNone(css.translate) || isNotNone(css.scale) || isNotNone(css.rotate) || isNotNone(css.perspective) || !isWebKit() && (isNotNone(css.backdropFilter) || isNotNone(css.filter)) || willChangeRe.test(css.willChange || '') || containRe.test(css.contain || '');
|
||||
}
|
||||
function getContainingBlock(element) {
|
||||
let currentNode = getParentNode(element);
|
||||
@@ -90,12 +92,13 @@ function getContainingBlock(element) {
|
||||
return null;
|
||||
}
|
||||
function isWebKit() {
|
||||
if (typeof CSS === 'undefined' || !CSS.supports) return false;
|
||||
return CSS.supports('-webkit-backdrop-filter', 'none');
|
||||
if (isWebKitValue == null) {
|
||||
isWebKitValue = typeof CSS !== 'undefined' && CSS.supports && CSS.supports('-webkit-backdrop-filter', 'none');
|
||||
}
|
||||
return isWebKitValue;
|
||||
}
|
||||
const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#document']);
|
||||
function isLastTraversableNode(node) {
|
||||
return lastTraversableNodeNames.has(getNodeName(node));
|
||||
return /^(html|body|#document)$/.test(getNodeName(node));
|
||||
}
|
||||
function getComputedStyle(element) {
|
||||
return getWindow(element).getComputedStyle(element);
|
||||
@@ -151,8 +154,9 @@ function getOverflowAncestors(node, list, traverseIframes) {
|
||||
if (isBody) {
|
||||
const frameElement = getFrameElement(win);
|
||||
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
|
||||
} else {
|
||||
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
|
||||
}
|
||||
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
|
||||
}
|
||||
function getFrameElement(win) {
|
||||
return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
|
||||
|
||||
+25
-21
@@ -48,7 +48,6 @@
|
||||
}
|
||||
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
|
||||
}
|
||||
const invalidOverflowDisplayValues = /*#__PURE__*/new Set(['inline', 'contents']);
|
||||
function isOverflowElement(element) {
|
||||
const {
|
||||
overflow,
|
||||
@@ -56,32 +55,35 @@
|
||||
overflowY,
|
||||
display
|
||||
} = getComputedStyle(element);
|
||||
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
|
||||
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && display !== 'inline' && display !== 'contents';
|
||||
}
|
||||
const tableElements = /*#__PURE__*/new Set(['table', 'td', 'th']);
|
||||
function isTableElement(element) {
|
||||
return tableElements.has(getNodeName(element));
|
||||
return /^(table|td|th)$/.test(getNodeName(element));
|
||||
}
|
||||
const topLayerSelectors = [':popover-open', ':modal'];
|
||||
function isTopLayer(element) {
|
||||
return topLayerSelectors.some(selector => {
|
||||
try {
|
||||
return element.matches(selector);
|
||||
} catch (_e) {
|
||||
return false;
|
||||
try {
|
||||
if (element.matches(':popover-open')) {
|
||||
return true;
|
||||
}
|
||||
});
|
||||
} catch (_e) {
|
||||
// no-op
|
||||
}
|
||||
try {
|
||||
return element.matches(':modal');
|
||||
} catch (_e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
const transformProperties = ['transform', 'translate', 'scale', 'rotate', 'perspective'];
|
||||
const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'];
|
||||
const containValues = ['paint', 'layout', 'strict', 'content'];
|
||||
const willChangeRe = /transform|translate|scale|rotate|perspective|filter/;
|
||||
const containRe = /paint|layout|strict|content/;
|
||||
const isNotNone = value => !!value && value !== 'none';
|
||||
let isWebKitValue;
|
||||
function isContainingBlock(elementOrCss) {
|
||||
const webkit = isWebKit();
|
||||
const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
|
||||
|
||||
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
||||
// https://drafts.csswg.org/css-transforms-2/#individual-transforms
|
||||
return transformProperties.some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || willChangeValues.some(value => (css.willChange || '').includes(value)) || containValues.some(value => (css.contain || '').includes(value));
|
||||
return isNotNone(css.transform) || isNotNone(css.translate) || isNotNone(css.scale) || isNotNone(css.rotate) || isNotNone(css.perspective) || !isWebKit() && (isNotNone(css.backdropFilter) || isNotNone(css.filter)) || willChangeRe.test(css.willChange || '') || containRe.test(css.contain || '');
|
||||
}
|
||||
function getContainingBlock(element) {
|
||||
let currentNode = getParentNode(element);
|
||||
@@ -96,12 +98,13 @@
|
||||
return null;
|
||||
}
|
||||
function isWebKit() {
|
||||
if (typeof CSS === 'undefined' || !CSS.supports) return false;
|
||||
return CSS.supports('-webkit-backdrop-filter', 'none');
|
||||
if (isWebKitValue == null) {
|
||||
isWebKitValue = typeof CSS !== 'undefined' && CSS.supports && CSS.supports('-webkit-backdrop-filter', 'none');
|
||||
}
|
||||
return isWebKitValue;
|
||||
}
|
||||
const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#document']);
|
||||
function isLastTraversableNode(node) {
|
||||
return lastTraversableNodeNames.has(getNodeName(node));
|
||||
return /^(html|body|#document)$/.test(getNodeName(node));
|
||||
}
|
||||
function getComputedStyle(element) {
|
||||
return getWindow(element).getComputedStyle(element);
|
||||
@@ -157,8 +160,9 @@
|
||||
if (isBody) {
|
||||
const frameElement = getFrameElement(win);
|
||||
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
|
||||
} else {
|
||||
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
|
||||
}
|
||||
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
|
||||
}
|
||||
function getFrameElement(win) {
|
||||
return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
|
||||
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@floating-ui/utils",
|
||||
"version": "0.2.10",
|
||||
"version": "0.2.11",
|
||||
"description": "Utilities for Floating UI",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
|
||||
Reference in New Issue
Block a user