UEA-PRODEM

This commit is contained in:
2026-06-10 12:14:46 -03:00
parent f54126b9d8
commit 9947565694
5319 changed files with 148520 additions and 129332 deletions
File diff suppressed because one or more lines are too long
+113 -107
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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';
File diff suppressed because one or more lines are too long
+2 -2
View File
@@ -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"
File diff suppressed because one or more lines are too long
+48 -40
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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;
File diff suppressed because one or more lines are too long
+3 -3
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -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
View File
@@ -1,6 +1,6 @@
{
"name": "@floating-ui/utils",
"version": "0.2.10",
"version": "0.2.11",
"description": "Utilities for Floating UI",
"publishConfig": {
"access": "public"