feature: vor und nachteile

This commit is contained in:
Hikyu
2026-05-31 13:54:31 +02:00
parent 552a947a1c
commit e3dad17446
23270 changed files with 3024794 additions and 200 deletions
+20
View File
@@ -0,0 +1,20 @@
MIT License
Copyright (c) 2021-present Floating UI contributors
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+4
View File
@@ -0,0 +1,4 @@
# @floating-ui/core
This is the platform-agnostic core of Floating UI, exposing the main
`computePosition` function but no platform interface logic.
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large Load Diff
@@ -0,0 +1,531 @@
import { AlignedPlacement } from '@floating-ui/utils';
import { Alignment } from '@floating-ui/utils';
import { Axis } from '@floating-ui/utils';
import { ClientRectObject } from '@floating-ui/utils';
import { Coords } from '@floating-ui/utils';
import { Dimensions } from '@floating-ui/utils';
import { ElementRects } from '@floating-ui/utils';
import { Length } from '@floating-ui/utils';
import { Padding } from '@floating-ui/utils';
import { Placement } from '@floating-ui/utils';
import { Rect } from '@floating-ui/utils';
import { rectToClientRect } from '@floating-ui/utils';
import { Side } from '@floating-ui/utils';
import { SideObject } from '@floating-ui/utils';
import { Strategy } from '@floating-ui/utils';
import { VirtualElement } from '@floating-ui/utils';
export { AlignedPlacement }
export { Alignment }
/**
* Provides data to position an inner element of the floating element so that it
* appears centered to the reference element.
* @see https://floating-ui.com/docs/arrow
*/
export declare const arrow: (options: ArrowOptions | Derivable<ArrowOptions>) => Middleware;
export declare interface ArrowOptions {
/**
* The arrow element to be positioned.
* @default undefined
*/
element: any;
/**
* The padding between the arrow element and the floating element edges.
* Useful when the floating element has rounded corners.
* @default 0
*/
padding?: Padding;
}
/**
* Optimizes the visibility of the floating element by choosing the placement
* that has the most space available automatically, without needing to specify a
* preferred placement. Alternative to `flip`.
* @see https://floating-ui.com/docs/autoPlacement
*/
export declare const autoPlacement: (options?: AutoPlacementOptions | Derivable<AutoPlacementOptions>) => Middleware;
export declare interface AutoPlacementOptions extends DetectOverflowOptions {
/**
* The axis that runs along the alignment of the floating element. Determines
* whether to check for most space along this axis.
* @default false
*/
crossAxis?: boolean;
/**
* Choose placements with a particular alignment.
* @default undefined
*/
alignment?: Alignment | null;
/**
* Whether to choose placements with the opposite alignment if the preferred
* alignment does not fit.
* @default true
*/
autoAlignment?: boolean;
/**
* Which placements are allowed to be chosen. Placements must be within the
* `alignment` option if explicitly set.
* @default allPlacements (variable)
*/
allowedPlacements?: Array<Placement>;
}
export { Axis }
export declare type Boundary = any;
export { ClientRectObject }
export declare type ComputePosition = (reference: unknown, floating: unknown, config: ComputePositionConfig) => Promise<ComputePositionReturn>;
/**
* 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.
*/
export declare const computePosition: ComputePosition;
export declare interface ComputePositionConfig {
/**
* Object to interface with the current platform.
*/
platform: Platform;
/**
* Where to place the floating element relative to the reference element.
*/
placement?: Placement;
/**
* The strategy to use when positioning the floating element.
*/
strategy?: Strategy;
/**
* Array of middleware objects to modify the positioning or provide data for
* rendering.
*/
middleware?: Array<Middleware | null | undefined | false>;
}
export declare interface ComputePositionReturn extends Coords {
/**
* The final chosen placement of the floating element.
*/
placement: Placement;
/**
* The strategy used to position the floating element.
*/
strategy: Strategy;
/**
* Object containing data returned from all middleware, keyed by their name.
*/
middlewareData: MiddlewareData;
}
export { Coords }
/**
* Function option to derive middleware options from state.
*/
export declare type Derivable<T> = (state: MiddlewareState) => T;
/**
* Resolves with an object of overflow side offsets that determine how much the
* element is overflowing a given clipping boundary on each side.
* - positive = overflowing the boundary by that number of pixels
* - negative = how many pixels left before it will overflow
* - 0 = lies flush with the boundary
* @see https://floating-ui.com/docs/detectOverflow
*/
export declare function detectOverflow(state: MiddlewareState, options?: DetectOverflowOptions | Derivable<DetectOverflowOptions>): Promise<SideObject>;
export declare interface DetectOverflowOptions {
/**
* The clipping element(s) or area in which overflow will be checked.
* @default 'clippingAncestors'
*/
boundary?: Boundary;
/**
* The root clipping area in which overflow will be checked.
* @default 'viewport'
*/
rootBoundary?: RootBoundary;
/**
* The element in which overflow is being checked relative to a boundary.
* @default 'floating'
*/
elementContext?: ElementContext;
/**
* Whether to check for overflow using the alternate element's boundary
* (`clippingAncestors` boundary only).
* @default false
*/
altBoundary?: boolean;
/**
* Virtual padding for the resolved overflow detection offsets.
* @default 0
*/
padding?: Padding;
}
export { Dimensions }
export declare type ElementContext = 'reference' | 'floating';
export { ElementRects }
export declare interface Elements {
reference: ReferenceElement;
floating: FloatingElement;
}
/**
* Optimizes the visibility of the floating element by flipping the `placement`
* in order to keep it in view when the preferred placement(s) will overflow the
* clipping boundary. Alternative to `autoPlacement`.
* @see https://floating-ui.com/docs/flip
*/
export declare const flip: (options?: FlipOptions | Derivable<FlipOptions>) => Middleware;
export declare interface FlipOptions extends DetectOverflowOptions {
/**
* The axis that runs along the side of the floating element. Determines
* whether overflow along this axis is checked to perform a flip.
* @default true
*/
mainAxis?: boolean;
/**
* The axis that runs along the alignment of the floating element. Determines
* whether overflow along this axis is checked to perform a flip.
* - `true`: Whether to check cross axis overflow for both side and alignment flipping.
* - `false`: Whether to disable all cross axis overflow checking.
* - `'alignment'`: Whether to check cross axis overflow for alignment flipping only.
* @default true
*/
crossAxis?: boolean | 'alignment';
/**
* Placements to try sequentially if the preferred `placement` does not fit.
* @default [oppositePlacement] (computed)
*/
fallbackPlacements?: Array<Placement>;
/**
* What strategy to use when no placements fit.
* @default 'bestFit'
*/
fallbackStrategy?: 'bestFit' | 'initialPlacement';
/**
* Whether to allow fallback to the perpendicular axis of the preferred
* placement, and if so, which side direction along the axis to prefer.
* @default 'none' (disallow fallback)
*/
fallbackAxisSideDirection?: 'none' | 'start' | 'end';
/**
* Whether to flip to placements with the opposite alignment if they fit
* better.
* @default true
*/
flipAlignment?: boolean;
}
export declare type FloatingElement = any;
/**
* 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
*/
export declare const hide: (options?: HideOptions | Derivable<HideOptions>) => Middleware;
export declare interface HideOptions extends DetectOverflowOptions {
/**
* The strategy used to determine when to hide the floating element.
*/
strategy?: 'referenceHidden' | 'escaped';
}
/**
* 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
*/
export declare const inline: (options?: InlineOptions | Derivable<InlineOptions>) => Middleware;
export declare interface InlineOptions {
/**
* Viewport-relative `x` coordinate to choose a `ClientRect`.
* @default undefined
*/
x?: number;
/**
* Viewport-relative `y` coordinate to choose a `ClientRect`.
* @default undefined
*/
y?: number;
/**
* Represents the padding around a disjoined rect when choosing it.
* @default 2
*/
padding?: Padding;
}
export { Length }
/**
* Built-in `limiter` that will stop `shift()` at a certain point.
*/
export declare const limitShift: (options?: LimitShiftOptions | Derivable<LimitShiftOptions>) => {
options: any;
fn: (state: MiddlewareState) => Coords;
};
declare type LimitShiftOffset = number | {
/**
* Offset the limiting of the axis that runs along the alignment of the
* floating element.
*/
mainAxis?: number;
/**
* Offset the limiting of the axis that runs along the side of the
* floating element.
*/
crossAxis?: number;
};
export declare interface LimitShiftOptions {
/**
* Offset when limiting starts. `0` will limit when the opposite edges of the
* reference and floating elements are aligned.
* - positive = start limiting earlier
* - negative = start limiting later
*/
offset?: LimitShiftOffset | Derivable<LimitShiftOffset>;
/**
* Whether to limit the axis that runs along the alignment of the floating
* element.
*/
mainAxis?: boolean;
/**
* Whether to limit the axis that runs along the side of the floating element.
*/
crossAxis?: boolean;
}
export declare type Middleware = {
name: string;
options?: any;
fn: (state: MiddlewareState) => Promisable<MiddlewareReturn>;
};
/**
* @deprecated use `MiddlewareState` instead.
*/
export declare type MiddlewareArguments = MiddlewareState;
export declare interface MiddlewareData {
[key: string]: any;
arrow?: Partial<Coords> & {
centerOffset: number;
alignmentOffset?: number;
};
autoPlacement?: {
index?: number;
overflows: Array<{
placement: Placement;
overflows: Array<number>;
}>;
};
flip?: {
index?: number;
overflows: Array<{
placement: Placement;
overflows: Array<number>;
}>;
};
hide?: {
referenceHidden?: boolean;
escaped?: boolean;
referenceHiddenOffsets?: SideObject;
escapedOffsets?: SideObject;
};
offset?: Coords & {
placement: Placement;
};
shift?: Coords & {
enabled: {
[key in Axis]: boolean;
};
};
}
export declare interface MiddlewareReturn extends Partial<Coords> {
data?: {
[key: string]: any;
};
reset?: boolean | {
placement?: Placement;
rects?: boolean | ElementRects;
};
}
export declare interface MiddlewareState extends Coords {
initialPlacement: Placement;
placement: Placement;
strategy: Strategy;
middlewareData: MiddlewareData;
elements: Elements;
rects: ElementRects;
platform: {
detectOverflow: typeof detectOverflow;
} & Platform;
}
/**
* Modifies the placement by translating the floating element along the
* specified axes.
* A number (shorthand for `mainAxis` or distance), or an axes configuration
* object may be passed.
* @see https://floating-ui.com/docs/offset
*/
export declare const offset: (options?: OffsetOptions) => Middleware;
export declare type OffsetOptions = OffsetValue | Derivable<OffsetValue>;
declare type OffsetValue = number | {
/**
* The axis that runs along the side of the floating element. Represents
* the distance (gutter or margin) between the reference and floating
* element.
* @default 0
*/
mainAxis?: number;
/**
* The axis that runs along the alignment of the floating element.
* Represents the skidding between the reference and floating element.
* @default 0
*/
crossAxis?: number;
/**
* The same axis as `crossAxis` but applies only to aligned placements
* and inverts the `end` alignment. When set to a number, it overrides the
* `crossAxis` value.
*
* A positive number will move the floating element in the direction of
* the opposite edge to the one that is aligned, while a negative number
* the reverse.
* @default null
*/
alignmentAxis?: number | null;
};
export { Padding }
export { Placement }
/**
* Platform interface methods to work with the current platform.
* @see https://floating-ui.com/docs/platform
*/
export declare interface Platform {
getElementRects: (args: {
reference: ReferenceElement;
floating: FloatingElement;
strategy: Strategy;
}) => Promisable<ElementRects>;
getClippingRect: (args: {
element: any;
boundary: Boundary;
rootBoundary: RootBoundary;
strategy: Strategy;
}) => Promisable<Rect>;
getDimensions: (element: any) => Promisable<Dimensions>;
convertOffsetParentRelativeRectToViewportRelativeRect?: (args: {
elements?: Elements;
rect: Rect;
offsetParent: any;
strategy: Strategy;
}) => Promisable<Rect>;
getOffsetParent?: (element: any) => Promisable<any>;
isElement?: (value: any) => Promisable<boolean>;
getDocumentElement?: (element: any) => Promisable<any>;
getClientRects?: (element: any) => Promisable<Array<ClientRectObject>>;
isRTL?: (element: any) => Promisable<boolean>;
getScale?: (element: any) => Promisable<{
x: number;
y: number;
}>;
detectOverflow?: typeof detectOverflow;
}
declare type Promisable<T> = T | Promise<T>;
export { Rect }
export { rectToClientRect }
export declare type ReferenceElement = any;
export declare type RootBoundary = 'viewport' | 'document' | Rect;
/**
* 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
*/
export declare const shift: (options?: ShiftOptions | Derivable<ShiftOptions>) => Middleware;
export declare interface ShiftOptions extends DetectOverflowOptions {
/**
* The axis that runs along the alignment of the floating element. Determines
* whether overflow along this axis is checked to perform shifting.
* @default true
*/
mainAxis?: boolean;
/**
* The axis that runs along the side of the floating element. Determines
* whether overflow along this axis is checked to perform shifting.
* @default false
*/
crossAxis?: boolean;
/**
* Accepts a function that limits the shifting done in order to prevent
* detachment.
*/
limiter?: {
fn: (state: MiddlewareState) => Coords;
options?: any;
};
}
export { Side }
export { SideObject }
/**
* Provides data that allows you to change the size of the floating element —
* for instance, prevent it from overflowing the clipping boundary or match the
* width of the reference element.
* @see https://floating-ui.com/docs/size
*/
export declare const size: (options?: SizeOptions | Derivable<SizeOptions>) => Middleware;
export declare interface SizeOptions extends DetectOverflowOptions {
/**
* Function that is called to perform style mutations to the floating element
* to change its size.
* @default undefined
*/
apply?(args: MiddlewareState & {
availableWidth: number;
availableHeight: number;
}): void | Promise<void>;
}
export { Strategy }
export { VirtualElement }
export { }
+531
View File
@@ -0,0 +1,531 @@
import { AlignedPlacement } from '@floating-ui/utils';
import { Alignment } from '@floating-ui/utils';
import { Axis } from '@floating-ui/utils';
import { ClientRectObject } from '@floating-ui/utils';
import { Coords } from '@floating-ui/utils';
import { Dimensions } from '@floating-ui/utils';
import { ElementRects } from '@floating-ui/utils';
import { Length } from '@floating-ui/utils';
import { Padding } from '@floating-ui/utils';
import { Placement } from '@floating-ui/utils';
import { Rect } from '@floating-ui/utils';
import { rectToClientRect } from '@floating-ui/utils';
import { Side } from '@floating-ui/utils';
import { SideObject } from '@floating-ui/utils';
import { Strategy } from '@floating-ui/utils';
import { VirtualElement } from '@floating-ui/utils';
export { AlignedPlacement }
export { Alignment }
/**
* Provides data to position an inner element of the floating element so that it
* appears centered to the reference element.
* @see https://floating-ui.com/docs/arrow
*/
export declare const arrow: (options: ArrowOptions | Derivable<ArrowOptions>) => Middleware;
export declare interface ArrowOptions {
/**
* The arrow element to be positioned.
* @default undefined
*/
element: any;
/**
* The padding between the arrow element and the floating element edges.
* Useful when the floating element has rounded corners.
* @default 0
*/
padding?: Padding;
}
/**
* Optimizes the visibility of the floating element by choosing the placement
* that has the most space available automatically, without needing to specify a
* preferred placement. Alternative to `flip`.
* @see https://floating-ui.com/docs/autoPlacement
*/
export declare const autoPlacement: (options?: AutoPlacementOptions | Derivable<AutoPlacementOptions>) => Middleware;
export declare interface AutoPlacementOptions extends DetectOverflowOptions {
/**
* The axis that runs along the alignment of the floating element. Determines
* whether to check for most space along this axis.
* @default false
*/
crossAxis?: boolean;
/**
* Choose placements with a particular alignment.
* @default undefined
*/
alignment?: Alignment | null;
/**
* Whether to choose placements with the opposite alignment if the preferred
* alignment does not fit.
* @default true
*/
autoAlignment?: boolean;
/**
* Which placements are allowed to be chosen. Placements must be within the
* `alignment` option if explicitly set.
* @default allPlacements (variable)
*/
allowedPlacements?: Array<Placement>;
}
export { Axis }
export declare type Boundary = any;
export { ClientRectObject }
export declare type ComputePosition = (reference: unknown, floating: unknown, config: ComputePositionConfig) => Promise<ComputePositionReturn>;
/**
* 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.
*/
export declare const computePosition: ComputePosition;
export declare interface ComputePositionConfig {
/**
* Object to interface with the current platform.
*/
platform: Platform;
/**
* Where to place the floating element relative to the reference element.
*/
placement?: Placement;
/**
* The strategy to use when positioning the floating element.
*/
strategy?: Strategy;
/**
* Array of middleware objects to modify the positioning or provide data for
* rendering.
*/
middleware?: Array<Middleware | null | undefined | false>;
}
export declare interface ComputePositionReturn extends Coords {
/**
* The final chosen placement of the floating element.
*/
placement: Placement;
/**
* The strategy used to position the floating element.
*/
strategy: Strategy;
/**
* Object containing data returned from all middleware, keyed by their name.
*/
middlewareData: MiddlewareData;
}
export { Coords }
/**
* Function option to derive middleware options from state.
*/
export declare type Derivable<T> = (state: MiddlewareState) => T;
/**
* Resolves with an object of overflow side offsets that determine how much the
* element is overflowing a given clipping boundary on each side.
* - positive = overflowing the boundary by that number of pixels
* - negative = how many pixels left before it will overflow
* - 0 = lies flush with the boundary
* @see https://floating-ui.com/docs/detectOverflow
*/
export declare function detectOverflow(state: MiddlewareState, options?: DetectOverflowOptions | Derivable<DetectOverflowOptions>): Promise<SideObject>;
export declare interface DetectOverflowOptions {
/**
* The clipping element(s) or area in which overflow will be checked.
* @default 'clippingAncestors'
*/
boundary?: Boundary;
/**
* The root clipping area in which overflow will be checked.
* @default 'viewport'
*/
rootBoundary?: RootBoundary;
/**
* The element in which overflow is being checked relative to a boundary.
* @default 'floating'
*/
elementContext?: ElementContext;
/**
* Whether to check for overflow using the alternate element's boundary
* (`clippingAncestors` boundary only).
* @default false
*/
altBoundary?: boolean;
/**
* Virtual padding for the resolved overflow detection offsets.
* @default 0
*/
padding?: Padding;
}
export { Dimensions }
export declare type ElementContext = 'reference' | 'floating';
export { ElementRects }
export declare interface Elements {
reference: ReferenceElement;
floating: FloatingElement;
}
/**
* Optimizes the visibility of the floating element by flipping the `placement`
* in order to keep it in view when the preferred placement(s) will overflow the
* clipping boundary. Alternative to `autoPlacement`.
* @see https://floating-ui.com/docs/flip
*/
export declare const flip: (options?: FlipOptions | Derivable<FlipOptions>) => Middleware;
export declare interface FlipOptions extends DetectOverflowOptions {
/**
* The axis that runs along the side of the floating element. Determines
* whether overflow along this axis is checked to perform a flip.
* @default true
*/
mainAxis?: boolean;
/**
* The axis that runs along the alignment of the floating element. Determines
* whether overflow along this axis is checked to perform a flip.
* - `true`: Whether to check cross axis overflow for both side and alignment flipping.
* - `false`: Whether to disable all cross axis overflow checking.
* - `'alignment'`: Whether to check cross axis overflow for alignment flipping only.
* @default true
*/
crossAxis?: boolean | 'alignment';
/**
* Placements to try sequentially if the preferred `placement` does not fit.
* @default [oppositePlacement] (computed)
*/
fallbackPlacements?: Array<Placement>;
/**
* What strategy to use when no placements fit.
* @default 'bestFit'
*/
fallbackStrategy?: 'bestFit' | 'initialPlacement';
/**
* Whether to allow fallback to the perpendicular axis of the preferred
* placement, and if so, which side direction along the axis to prefer.
* @default 'none' (disallow fallback)
*/
fallbackAxisSideDirection?: 'none' | 'start' | 'end';
/**
* Whether to flip to placements with the opposite alignment if they fit
* better.
* @default true
*/
flipAlignment?: boolean;
}
export declare type FloatingElement = any;
/**
* 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
*/
export declare const hide: (options?: HideOptions | Derivable<HideOptions>) => Middleware;
export declare interface HideOptions extends DetectOverflowOptions {
/**
* The strategy used to determine when to hide the floating element.
*/
strategy?: 'referenceHidden' | 'escaped';
}
/**
* 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
*/
export declare const inline: (options?: InlineOptions | Derivable<InlineOptions>) => Middleware;
export declare interface InlineOptions {
/**
* Viewport-relative `x` coordinate to choose a `ClientRect`.
* @default undefined
*/
x?: number;
/**
* Viewport-relative `y` coordinate to choose a `ClientRect`.
* @default undefined
*/
y?: number;
/**
* Represents the padding around a disjoined rect when choosing it.
* @default 2
*/
padding?: Padding;
}
export { Length }
/**
* Built-in `limiter` that will stop `shift()` at a certain point.
*/
export declare const limitShift: (options?: LimitShiftOptions | Derivable<LimitShiftOptions>) => {
options: any;
fn: (state: MiddlewareState) => Coords;
};
declare type LimitShiftOffset = number | {
/**
* Offset the limiting of the axis that runs along the alignment of the
* floating element.
*/
mainAxis?: number;
/**
* Offset the limiting of the axis that runs along the side of the
* floating element.
*/
crossAxis?: number;
};
export declare interface LimitShiftOptions {
/**
* Offset when limiting starts. `0` will limit when the opposite edges of the
* reference and floating elements are aligned.
* - positive = start limiting earlier
* - negative = start limiting later
*/
offset?: LimitShiftOffset | Derivable<LimitShiftOffset>;
/**
* Whether to limit the axis that runs along the alignment of the floating
* element.
*/
mainAxis?: boolean;
/**
* Whether to limit the axis that runs along the side of the floating element.
*/
crossAxis?: boolean;
}
export declare type Middleware = {
name: string;
options?: any;
fn: (state: MiddlewareState) => Promisable<MiddlewareReturn>;
};
/**
* @deprecated use `MiddlewareState` instead.
*/
export declare type MiddlewareArguments = MiddlewareState;
export declare interface MiddlewareData {
[key: string]: any;
arrow?: Partial<Coords> & {
centerOffset: number;
alignmentOffset?: number;
};
autoPlacement?: {
index?: number;
overflows: Array<{
placement: Placement;
overflows: Array<number>;
}>;
};
flip?: {
index?: number;
overflows: Array<{
placement: Placement;
overflows: Array<number>;
}>;
};
hide?: {
referenceHidden?: boolean;
escaped?: boolean;
referenceHiddenOffsets?: SideObject;
escapedOffsets?: SideObject;
};
offset?: Coords & {
placement: Placement;
};
shift?: Coords & {
enabled: {
[key in Axis]: boolean;
};
};
}
export declare interface MiddlewareReturn extends Partial<Coords> {
data?: {
[key: string]: any;
};
reset?: boolean | {
placement?: Placement;
rects?: boolean | ElementRects;
};
}
export declare interface MiddlewareState extends Coords {
initialPlacement: Placement;
placement: Placement;
strategy: Strategy;
middlewareData: MiddlewareData;
elements: Elements;
rects: ElementRects;
platform: {
detectOverflow: typeof detectOverflow;
} & Platform;
}
/**
* Modifies the placement by translating the floating element along the
* specified axes.
* A number (shorthand for `mainAxis` or distance), or an axes configuration
* object may be passed.
* @see https://floating-ui.com/docs/offset
*/
export declare const offset: (options?: OffsetOptions) => Middleware;
export declare type OffsetOptions = OffsetValue | Derivable<OffsetValue>;
declare type OffsetValue = number | {
/**
* The axis that runs along the side of the floating element. Represents
* the distance (gutter or margin) between the reference and floating
* element.
* @default 0
*/
mainAxis?: number;
/**
* The axis that runs along the alignment of the floating element.
* Represents the skidding between the reference and floating element.
* @default 0
*/
crossAxis?: number;
/**
* The same axis as `crossAxis` but applies only to aligned placements
* and inverts the `end` alignment. When set to a number, it overrides the
* `crossAxis` value.
*
* A positive number will move the floating element in the direction of
* the opposite edge to the one that is aligned, while a negative number
* the reverse.
* @default null
*/
alignmentAxis?: number | null;
};
export { Padding }
export { Placement }
/**
* Platform interface methods to work with the current platform.
* @see https://floating-ui.com/docs/platform
*/
export declare interface Platform {
getElementRects: (args: {
reference: ReferenceElement;
floating: FloatingElement;
strategy: Strategy;
}) => Promisable<ElementRects>;
getClippingRect: (args: {
element: any;
boundary: Boundary;
rootBoundary: RootBoundary;
strategy: Strategy;
}) => Promisable<Rect>;
getDimensions: (element: any) => Promisable<Dimensions>;
convertOffsetParentRelativeRectToViewportRelativeRect?: (args: {
elements?: Elements;
rect: Rect;
offsetParent: any;
strategy: Strategy;
}) => Promisable<Rect>;
getOffsetParent?: (element: any) => Promisable<any>;
isElement?: (value: any) => Promisable<boolean>;
getDocumentElement?: (element: any) => Promisable<any>;
getClientRects?: (element: any) => Promisable<Array<ClientRectObject>>;
isRTL?: (element: any) => Promisable<boolean>;
getScale?: (element: any) => Promisable<{
x: number;
y: number;
}>;
detectOverflow?: typeof detectOverflow;
}
declare type Promisable<T> = T | Promise<T>;
export { Rect }
export { rectToClientRect }
export declare type ReferenceElement = any;
export declare type RootBoundary = 'viewport' | 'document' | Rect;
/**
* 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
*/
export declare const shift: (options?: ShiftOptions | Derivable<ShiftOptions>) => Middleware;
export declare interface ShiftOptions extends DetectOverflowOptions {
/**
* The axis that runs along the alignment of the floating element. Determines
* whether overflow along this axis is checked to perform shifting.
* @default true
*/
mainAxis?: boolean;
/**
* The axis that runs along the side of the floating element. Determines
* whether overflow along this axis is checked to perform shifting.
* @default false
*/
crossAxis?: boolean;
/**
* Accepts a function that limits the shifting done in order to prevent
* detachment.
*/
limiter?: {
fn: (state: MiddlewareState) => Coords;
options?: any;
};
}
export { Side }
export { SideObject }
/**
* Provides data that allows you to change the size of the floating element —
* for instance, prevent it from overflowing the clipping boundary or match the
* width of the reference element.
* @see https://floating-ui.com/docs/size
*/
export declare const size: (options?: SizeOptions | Derivable<SizeOptions>) => Middleware;
export declare interface SizeOptions extends DetectOverflowOptions {
/**
* Function that is called to perform style mutations to the floating element
* to change its size.
* @default undefined
*/
apply?(args: MiddlewareState & {
availableWidth: number;
availableHeight: number;
}): void | Promise<void>;
}
export { Strategy }
export { VirtualElement }
export { }
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
File diff suppressed because it is too large Load Diff
File diff suppressed because one or more lines are too long
+63
View File
@@ -0,0 +1,63 @@
{
"name": "@floating-ui/core",
"version": "1.7.5",
"description": "Positioning library for floating elements: tooltips, popovers, dropdowns, and more",
"publishConfig": {
"access": "public"
},
"main": "./dist/floating-ui.core.umd.js",
"module": "./dist/floating-ui.core.esm.js",
"unpkg": "./dist/floating-ui.core.umd.min.js",
"types": "./dist/floating-ui.core.d.ts",
"exports": {
"./package.json": "./package.json",
".": {
"import": {
"types": "./dist/floating-ui.core.d.mts",
"default": "./dist/floating-ui.core.mjs"
},
"types": "./dist/floating-ui.core.d.ts",
"module": "./dist/floating-ui.core.esm.js",
"default": "./dist/floating-ui.core.umd.js"
}
},
"sideEffects": false,
"files": [
"dist"
],
"author": "atomiks",
"license": "MIT",
"bugs": "https://github.com/floating-ui/floating-ui",
"repository": {
"type": "git",
"url": "https://github.com/floating-ui/floating-ui.git",
"directory": "packages/core"
},
"homepage": "https://floating-ui.com",
"keywords": [
"tooltip",
"popover",
"dropdown",
"menu",
"popup",
"positioning"
],
"dependencies": {
"@floating-ui/utils": "^0.2.11"
},
"devDependencies": {
"config": "0.0.0"
},
"scripts": {
"test": "vitest run",
"test:watch": "vitest watch",
"lint": "eslint .",
"format": "prettier --write .",
"clean": "rimraf dist out-tsc",
"dev": "rollup -c -w",
"build": "rollup -c",
"build:api": "build-api --tsc tsconfig.lib.json",
"publint": "publint",
"typecheck": "tsc -b"
}
}
+21
View File
@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2021 Floating UI contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
+4
View File
@@ -0,0 +1,4 @@
# @floating-ui/dom
This is the library to use Floating UI on the web, wrapping `@floating-ui/core`
with DOM interface logic.
File diff suppressed because one or more lines are too long
@@ -0,0 +1,635 @@
import { rectToClientRect, computePosition as computePosition$1 } from '@floating-ui/core';
export { arrow, autoPlacement, detectOverflow, flip, hide, inline, limitShift, offset, shift, size } from '@floating-ui/core';
function getWindow(node) {
var _node$ownerDocument;
return ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
}
function getComputedStyle$1(element) {
return getWindow(element).getComputedStyle(element);
}
const min = Math.min;
const max = Math.max;
const round = Math.round;
function getCssDimensions(element) {
const css = getComputedStyle$1(element);
let width = parseFloat(css.width);
let height = parseFloat(css.height);
const offsetWidth = element.offsetWidth;
const offsetHeight = element.offsetHeight;
const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
if (shouldFallback) {
width = offsetWidth;
height = offsetHeight;
}
return {
width,
height,
fallback: shouldFallback
};
}
function getNodeName(node) {
return isNode(node) ? (node.nodeName || '').toLowerCase() : '';
}
let uaString;
function getUAString() {
if (uaString) {
return uaString;
}
const uaData = navigator.userAgentData;
if (uaData && Array.isArray(uaData.brands)) {
uaString = uaData.brands.map(item => item.brand + "/" + item.version).join(' ');
return uaString;
}
return navigator.userAgent;
}
function isHTMLElement(value) {
return value instanceof getWindow(value).HTMLElement;
}
function isElement(value) {
return value instanceof getWindow(value).Element;
}
function isNode(value) {
return value instanceof getWindow(value).Node;
}
function isShadowRoot(node) {
// Browsers without `ShadowRoot` support.
if (typeof ShadowRoot === 'undefined') {
return false;
}
const OwnElement = getWindow(node).ShadowRoot;
return node instanceof OwnElement || node instanceof ShadowRoot;
}
function isOverflowElement(element) {
const {
overflow,
overflowX,
overflowY,
display
} = getComputedStyle$1(element);
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
}
function isTableElement(element) {
return ['table', 'td', 'th'].includes(getNodeName(element));
}
function isContainingBlock(element) {
// TODO: Try to use feature detection here instead.
const isFirefox = /firefox/i.test(getUAString());
const css = getComputedStyle$1(element);
const backdropFilter = css.backdropFilter || css.WebkitBackdropFilter;
// This is non-exhaustive but covers the most common CSS properties that
// create a containing block.
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
return css.transform !== 'none' || css.perspective !== 'none' || (backdropFilter ? backdropFilter !== 'none' : false) || isFirefox && css.willChange === 'filter' || isFirefox && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective'].some(value => css.willChange.includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => {
// Add type check for old browsers.
const contain = css.contain;
return contain != null ? contain.includes(value) : false;
});
}
function isLayoutViewport() {
// TODO: Try to use feature detection here instead. Feature detection for
// this can fail in various ways, making the userAgent check the most:
// reliable:
// • Always-visible scrollbar or not
// • Width of <html>
// Not Safari.
return !/^((?!chrome|android).)*safari/i.test(getUAString());
}
function isLastTraversableNode(node) {
return ['html', 'body', '#document'].includes(getNodeName(node));
}
function unwrapElement(element) {
return !isElement(element) ? element.contextElement : element;
}
const FALLBACK_SCALE = {
x: 1,
y: 1
};
function getScale(element) {
const domElement = unwrapElement(element);
if (!isHTMLElement(domElement)) {
return FALLBACK_SCALE;
}
const rect = domElement.getBoundingClientRect();
const {
width,
height,
fallback
} = getCssDimensions(domElement);
let x = (fallback ? round(rect.width) : rect.width) / width;
let y = (fallback ? round(rect.height) : rect.height) / height;
// 0, NaN, or Infinity should always fallback to 1.
if (!x || !Number.isFinite(x)) {
x = 1;
}
if (!y || !Number.isFinite(y)) {
y = 1;
}
return {
x,
y
};
}
function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
var _win$visualViewport, _win$visualViewport2;
if (includeScale === void 0) {
includeScale = false;
}
if (isFixedStrategy === void 0) {
isFixedStrategy = false;
}
const clientRect = element.getBoundingClientRect();
const domElement = unwrapElement(element);
let scale = FALLBACK_SCALE;
if (includeScale) {
if (offsetParent) {
if (isElement(offsetParent)) {
scale = getScale(offsetParent);
}
} else {
scale = getScale(element);
}
}
const win = domElement ? getWindow(domElement) : window;
const addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
let x = (clientRect.left + (addVisualOffsets ? ((_win$visualViewport = win.visualViewport) == null ? void 0 : _win$visualViewport.offsetLeft) || 0 : 0)) / scale.x;
let y = (clientRect.top + (addVisualOffsets ? ((_win$visualViewport2 = win.visualViewport) == null ? void 0 : _win$visualViewport2.offsetTop) || 0 : 0)) / scale.y;
let width = clientRect.width / scale.x;
let height = clientRect.height / scale.y;
if (domElement) {
const win = getWindow(domElement);
const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
let currentIFrame = win.frameElement;
while (currentIFrame && offsetParent && offsetWin !== win) {
const iframeScale = getScale(currentIFrame);
const iframeRect = currentIFrame.getBoundingClientRect();
const css = getComputedStyle(currentIFrame);
iframeRect.x += (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
iframeRect.y += (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
x *= iframeScale.x;
y *= iframeScale.y;
width *= iframeScale.x;
height *= iframeScale.y;
x += iframeRect.x;
y += iframeRect.y;
currentIFrame = getWindow(currentIFrame).frameElement;
}
}
return {
width,
height,
top: y,
right: x + width,
bottom: y + height,
left: x,
x,
y
};
}
function getDocumentElement(node) {
return ((isNode(node) ? node.ownerDocument : node.document) || window.document).documentElement;
}
function getNodeScroll(element) {
if (isElement(element)) {
return {
scrollLeft: element.scrollLeft,
scrollTop: element.scrollTop
};
}
return {
scrollLeft: element.pageXOffset,
scrollTop: element.pageYOffset
};
}
function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
let {
rect,
offsetParent,
strategy
} = _ref;
const isOffsetParentAnElement = isHTMLElement(offsetParent);
const documentElement = getDocumentElement(offsetParent);
if (offsetParent === documentElement) {
return rect;
}
let scroll = {
scrollLeft: 0,
scrollTop: 0
};
let scale = {
x: 1,
y: 1
};
const offsets = {
x: 0,
y: 0
};
if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
scroll = getNodeScroll(offsetParent);
}
if (isHTMLElement(offsetParent)) {
const offsetRect = getBoundingClientRect(offsetParent);
scale = getScale(offsetParent);
offsets.x = offsetRect.x + offsetParent.clientLeft;
offsets.y = offsetRect.y + offsetParent.clientTop;
}
}
return {
width: rect.width * scale.x,
height: rect.height * scale.y,
x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x,
y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y
};
}
function getWindowScrollBarX(element) {
// If <html> has a CSS width greater than the viewport, then this will be
// incorrect for RTL.
return getBoundingClientRect(getDocumentElement(element)).left + getNodeScroll(element).scrollLeft;
}
// Gets the entire size of the scrollable document area, even extending outside
// of the `<html>` and `<body>` rect bounds if horizontally scrollable.
function getDocumentRect(element) {
const html = getDocumentElement(element);
const scroll = getNodeScroll(element);
const body = element.ownerDocument.body;
const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
let x = -scroll.scrollLeft + getWindowScrollBarX(element);
const y = -scroll.scrollTop;
if (getComputedStyle$1(body).direction === 'rtl') {
x += max(html.clientWidth, body.clientWidth) - width;
}
return {
width,
height,
x,
y
};
}
function getParentNode(node) {
if (getNodeName(node) === 'html') {
return node;
}
const result =
// Step into the shadow DOM of the parent of a slotted node.
node.assignedSlot ||
// DOM Element detected.
node.parentNode ||
// ShadowRoot detected.
isShadowRoot(node) && node.host ||
// Fallback.
getDocumentElement(node);
return isShadowRoot(result) ? result.host : result;
}
function getNearestOverflowAncestor(node) {
const parentNode = getParentNode(node);
if (isLastTraversableNode(parentNode)) {
// `getParentNode` will never return a `Document` due to the fallback
// check, so it's either the <html> or <body> element.
return parentNode.ownerDocument.body;
}
if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
return parentNode;
}
return getNearestOverflowAncestor(parentNode);
}
function getOverflowAncestors(node, list) {
var _node$ownerDocument;
if (list === void 0) {
list = [];
}
const scrollableAncestor = getNearestOverflowAncestor(node);
const isBody = scrollableAncestor === ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.body);
const win = getWindow(scrollableAncestor);
if (isBody) {
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []);
}
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor));
}
function getViewportRect(element, strategy) {
const win = getWindow(element);
const html = getDocumentElement(element);
const visualViewport = win.visualViewport;
let width = html.clientWidth;
let height = html.clientHeight;
let x = 0;
let y = 0;
if (visualViewport) {
width = visualViewport.width;
height = visualViewport.height;
const layoutViewport = isLayoutViewport();
if (layoutViewport || !layoutViewport && strategy === 'fixed') {
x = visualViewport.offsetLeft;
y = visualViewport.offsetTop;
}
}
return {
width,
height,
x,
y
};
}
// Returns the inner client rect, subtracting scrollbars if present.
function getInnerBoundingClientRect(element, strategy) {
const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
const top = clientRect.top + element.clientTop;
const left = clientRect.left + element.clientLeft;
const scale = isHTMLElement(element) ? getScale(element) : {
x: 1,
y: 1
};
const width = element.clientWidth * scale.x;
const height = element.clientHeight * scale.y;
const x = left * scale.x;
const y = top * scale.y;
return {
width,
height,
x,
y
};
}
function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
if (clippingAncestor === 'viewport') {
return rectToClientRect(getViewportRect(element, strategy));
}
if (isElement(clippingAncestor)) {
return rectToClientRect(getInnerBoundingClientRect(clippingAncestor, strategy));
}
return rectToClientRect(getDocumentRect(getDocumentElement(element)));
}
// A "clipping ancestor" is an `overflow` element with the characteristic of
// clipping (or hiding) child elements. This returns all clipping ancestors
// of the given element up the tree.
function getClippingElementAncestors(element, cache) {
const cachedResult = cache.get(element);
if (cachedResult) {
return cachedResult;
}
let result = getOverflowAncestors(element).filter(el => isElement(el) && getNodeName(el) !== 'body');
let currentContainingBlockComputedStyle = null;
const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
let currentNode = elementIsFixed ? getParentNode(element) : element;
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
const computedStyle = getComputedStyle$1(currentNode);
const containingBlock = isContainingBlock(currentNode);
const shouldDropCurrentNode = elementIsFixed ? !containingBlock && !currentContainingBlockComputedStyle : !containingBlock && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position);
if (shouldDropCurrentNode) {
// Drop non-containing blocks.
result = result.filter(ancestor => ancestor !== currentNode);
} else {
// Record last containing block for next iteration.
currentContainingBlockComputedStyle = computedStyle;
}
currentNode = getParentNode(currentNode);
}
cache.set(element, result);
return result;
}
// Gets the maximum area that the element is visible in due to any number of
// clipping ancestors.
function getClippingRect(_ref) {
let {
element,
boundary,
rootBoundary,
strategy
} = _ref;
const elementClippingAncestors = boundary === 'clippingAncestors' ? 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));
return {
width: clippingRect.right - clippingRect.left,
height: clippingRect.bottom - clippingRect.top,
x: clippingRect.left,
y: clippingRect.top
};
}
function getDimensions(element) {
if (isHTMLElement(element)) {
return getCssDimensions(element);
}
return element.getBoundingClientRect();
}
function getTrueOffsetParent(element) {
if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
return null;
}
return element.offsetParent;
}
function getContainingBlock(element) {
let currentNode = getParentNode(element);
while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
if (isContainingBlock(currentNode)) {
return currentNode;
} else {
currentNode = getParentNode(currentNode);
}
}
return null;
}
// Gets the closest ancestor positioned element. Handles some edge cases,
// such as table ancestors and cross browser bugs.
function getOffsetParent(element) {
const window = getWindow(element);
let offsetParent = getTrueOffsetParent(element);
while (offsetParent && isTableElement(offsetParent) && getComputedStyle$1(offsetParent).position === 'static') {
offsetParent = getTrueOffsetParent(offsetParent);
}
if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle$1(offsetParent).position === 'static' && !isContainingBlock(offsetParent))) {
return window;
}
return offsetParent || getContainingBlock(element) || window;
}
function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
const isOffsetParentAnElement = isHTMLElement(offsetParent);
const documentElement = getDocumentElement(offsetParent);
const rect = getBoundingClientRect(element, true, strategy === 'fixed', offsetParent);
let scroll = {
scrollLeft: 0,
scrollTop: 0
};
const offsets = {
x: 0,
y: 0
};
if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
scroll = getNodeScroll(offsetParent);
}
if (isHTMLElement(offsetParent)) {
const offsetRect = getBoundingClientRect(offsetParent, true);
offsets.x = offsetRect.x + offsetParent.clientLeft;
offsets.y = offsetRect.y + offsetParent.clientTop;
} else if (documentElement) {
offsets.x = getWindowScrollBarX(documentElement);
}
}
return {
x: rect.left + scroll.scrollLeft - offsets.x,
y: rect.top + scroll.scrollTop - offsets.y,
width: rect.width,
height: rect.height
};
}
const platform = {
getClippingRect,
convertOffsetParentRelativeRectToViewportRelativeRect,
isElement,
getDimensions,
getOffsetParent,
getDocumentElement,
getScale,
async getElementRects(_ref) {
let {
reference,
floating,
strategy
} = _ref;
const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
const getDimensionsFn = this.getDimensions;
return {
reference: getRectRelativeToOffsetParent(reference, await getOffsetParentFn(floating), strategy),
floating: {
x: 0,
y: 0,
...(await getDimensionsFn(floating))
}
};
},
getClientRects: element => Array.from(element.getClientRects()),
isRTL: element => getComputedStyle$1(element).direction === 'rtl'
};
/**
* Automatically updates the position of the floating element when necessary.
* @see https://floating-ui.com/docs/autoUpdate
*/
function autoUpdate(reference, floating, update, options) {
if (options === void 0) {
options = {};
}
const {
ancestorScroll: _ancestorScroll = true,
ancestorResize = true,
elementResize = true,
animationFrame = false
} = options;
const ancestorScroll = _ancestorScroll && !animationFrame;
const ancestors = ancestorScroll || ancestorResize ? [...(isElement(reference) ? getOverflowAncestors(reference) : reference.contextElement ? getOverflowAncestors(reference.contextElement) : []), ...getOverflowAncestors(floating)] : [];
ancestors.forEach(ancestor => {
ancestorScroll && ancestor.addEventListener('scroll', update, {
passive: true
});
ancestorResize && ancestor.addEventListener('resize', update);
});
let observer = null;
if (elementResize) {
let initialUpdate = true;
observer = new ResizeObserver(() => {
if (!initialUpdate) {
update();
}
initialUpdate = false;
});
isElement(reference) && !animationFrame && observer.observe(reference);
if (!isElement(reference) && reference.contextElement && !animationFrame) {
observer.observe(reference.contextElement);
}
observer.observe(floating);
}
let frameId;
let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
if (animationFrame) {
frameLoop();
}
function frameLoop() {
const nextRefRect = getBoundingClientRect(reference);
if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
update();
}
prevRefRect = nextRefRect;
frameId = requestAnimationFrame(frameLoop);
}
update();
return () => {
var _observer;
ancestors.forEach(ancestor => {
ancestorScroll && ancestor.removeEventListener('scroll', update);
ancestorResize && ancestor.removeEventListener('resize', update);
});
(_observer = observer) == null ? void 0 : _observer.disconnect();
observer = null;
if (animationFrame) {
cancelAnimationFrame(frameId);
}
};
}
/**
* Computes the `x` and `y` coordinates that will place the floating element
* next to a reference element when it is given a certain CSS positioning
* strategy.
*/
const computePosition = (reference, floating, options) => {
// This caches the expensive `getClippingElementAncestors` function so that
// multiple lifecycle resets re-use the same result. It only lives for a
// single call. If other functions become expensive, we can add them as well.
const cache = new Map();
const mergedOptions = {
platform,
...options
};
const platformWithCache = {
...mergedOptions.platform,
_c: cache
};
return computePosition$1(reference, floating, {
...mergedOptions,
platform: platformWithCache
});
};
export { autoUpdate, computePosition, getOverflowAncestors, platform };
+635
View File
@@ -0,0 +1,635 @@
import { rectToClientRect, computePosition as computePosition$1 } from '@floating-ui/core';
export { arrow, autoPlacement, detectOverflow, flip, hide, inline, limitShift, offset, shift, size } from '@floating-ui/core';
function getWindow(node) {
var _node$ownerDocument;
return ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
}
function getComputedStyle$1(element) {
return getWindow(element).getComputedStyle(element);
}
const min = Math.min;
const max = Math.max;
const round = Math.round;
function getCssDimensions(element) {
const css = getComputedStyle$1(element);
let width = parseFloat(css.width);
let height = parseFloat(css.height);
const offsetWidth = element.offsetWidth;
const offsetHeight = element.offsetHeight;
const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
if (shouldFallback) {
width = offsetWidth;
height = offsetHeight;
}
return {
width,
height,
fallback: shouldFallback
};
}
function getNodeName(node) {
return isNode(node) ? (node.nodeName || '').toLowerCase() : '';
}
let uaString;
function getUAString() {
if (uaString) {
return uaString;
}
const uaData = navigator.userAgentData;
if (uaData && Array.isArray(uaData.brands)) {
uaString = uaData.brands.map(item => item.brand + "/" + item.version).join(' ');
return uaString;
}
return navigator.userAgent;
}
function isHTMLElement(value) {
return value instanceof getWindow(value).HTMLElement;
}
function isElement(value) {
return value instanceof getWindow(value).Element;
}
function isNode(value) {
return value instanceof getWindow(value).Node;
}
function isShadowRoot(node) {
// Browsers without `ShadowRoot` support.
if (typeof ShadowRoot === 'undefined') {
return false;
}
const OwnElement = getWindow(node).ShadowRoot;
return node instanceof OwnElement || node instanceof ShadowRoot;
}
function isOverflowElement(element) {
const {
overflow,
overflowX,
overflowY,
display
} = getComputedStyle$1(element);
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
}
function isTableElement(element) {
return ['table', 'td', 'th'].includes(getNodeName(element));
}
function isContainingBlock(element) {
// TODO: Try to use feature detection here instead.
const isFirefox = /firefox/i.test(getUAString());
const css = getComputedStyle$1(element);
const backdropFilter = css.backdropFilter || css.WebkitBackdropFilter;
// This is non-exhaustive but covers the most common CSS properties that
// create a containing block.
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
return css.transform !== 'none' || css.perspective !== 'none' || (backdropFilter ? backdropFilter !== 'none' : false) || isFirefox && css.willChange === 'filter' || isFirefox && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective'].some(value => css.willChange.includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => {
// Add type check for old browsers.
const contain = css.contain;
return contain != null ? contain.includes(value) : false;
});
}
function isLayoutViewport() {
// TODO: Try to use feature detection here instead. Feature detection for
// this can fail in various ways, making the userAgent check the most:
// reliable:
// • Always-visible scrollbar or not
// • Width of <html>
// Not Safari.
return !/^((?!chrome|android).)*safari/i.test(getUAString());
}
function isLastTraversableNode(node) {
return ['html', 'body', '#document'].includes(getNodeName(node));
}
function unwrapElement(element) {
return !isElement(element) ? element.contextElement : element;
}
const FALLBACK_SCALE = {
x: 1,
y: 1
};
function getScale(element) {
const domElement = unwrapElement(element);
if (!isHTMLElement(domElement)) {
return FALLBACK_SCALE;
}
const rect = domElement.getBoundingClientRect();
const {
width,
height,
fallback
} = getCssDimensions(domElement);
let x = (fallback ? round(rect.width) : rect.width) / width;
let y = (fallback ? round(rect.height) : rect.height) / height;
// 0, NaN, or Infinity should always fallback to 1.
if (!x || !Number.isFinite(x)) {
x = 1;
}
if (!y || !Number.isFinite(y)) {
y = 1;
}
return {
x,
y
};
}
function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
var _win$visualViewport, _win$visualViewport2;
if (includeScale === void 0) {
includeScale = false;
}
if (isFixedStrategy === void 0) {
isFixedStrategy = false;
}
const clientRect = element.getBoundingClientRect();
const domElement = unwrapElement(element);
let scale = FALLBACK_SCALE;
if (includeScale) {
if (offsetParent) {
if (isElement(offsetParent)) {
scale = getScale(offsetParent);
}
} else {
scale = getScale(element);
}
}
const win = domElement ? getWindow(domElement) : window;
const addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
let x = (clientRect.left + (addVisualOffsets ? ((_win$visualViewport = win.visualViewport) == null ? void 0 : _win$visualViewport.offsetLeft) || 0 : 0)) / scale.x;
let y = (clientRect.top + (addVisualOffsets ? ((_win$visualViewport2 = win.visualViewport) == null ? void 0 : _win$visualViewport2.offsetTop) || 0 : 0)) / scale.y;
let width = clientRect.width / scale.x;
let height = clientRect.height / scale.y;
if (domElement) {
const win = getWindow(domElement);
const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
let currentIFrame = win.frameElement;
while (currentIFrame && offsetParent && offsetWin !== win) {
const iframeScale = getScale(currentIFrame);
const iframeRect = currentIFrame.getBoundingClientRect();
const css = getComputedStyle(currentIFrame);
iframeRect.x += (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
iframeRect.y += (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
x *= iframeScale.x;
y *= iframeScale.y;
width *= iframeScale.x;
height *= iframeScale.y;
x += iframeRect.x;
y += iframeRect.y;
currentIFrame = getWindow(currentIFrame).frameElement;
}
}
return {
width,
height,
top: y,
right: x + width,
bottom: y + height,
left: x,
x,
y
};
}
function getDocumentElement(node) {
return ((isNode(node) ? node.ownerDocument : node.document) || window.document).documentElement;
}
function getNodeScroll(element) {
if (isElement(element)) {
return {
scrollLeft: element.scrollLeft,
scrollTop: element.scrollTop
};
}
return {
scrollLeft: element.pageXOffset,
scrollTop: element.pageYOffset
};
}
function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
let {
rect,
offsetParent,
strategy
} = _ref;
const isOffsetParentAnElement = isHTMLElement(offsetParent);
const documentElement = getDocumentElement(offsetParent);
if (offsetParent === documentElement) {
return rect;
}
let scroll = {
scrollLeft: 0,
scrollTop: 0
};
let scale = {
x: 1,
y: 1
};
const offsets = {
x: 0,
y: 0
};
if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
scroll = getNodeScroll(offsetParent);
}
if (isHTMLElement(offsetParent)) {
const offsetRect = getBoundingClientRect(offsetParent);
scale = getScale(offsetParent);
offsets.x = offsetRect.x + offsetParent.clientLeft;
offsets.y = offsetRect.y + offsetParent.clientTop;
}
}
return {
width: rect.width * scale.x,
height: rect.height * scale.y,
x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x,
y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y
};
}
function getWindowScrollBarX(element) {
// If <html> has a CSS width greater than the viewport, then this will be
// incorrect for RTL.
return getBoundingClientRect(getDocumentElement(element)).left + getNodeScroll(element).scrollLeft;
}
// Gets the entire size of the scrollable document area, even extending outside
// of the `<html>` and `<body>` rect bounds if horizontally scrollable.
function getDocumentRect(element) {
const html = getDocumentElement(element);
const scroll = getNodeScroll(element);
const body = element.ownerDocument.body;
const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
let x = -scroll.scrollLeft + getWindowScrollBarX(element);
const y = -scroll.scrollTop;
if (getComputedStyle$1(body).direction === 'rtl') {
x += max(html.clientWidth, body.clientWidth) - width;
}
return {
width,
height,
x,
y
};
}
function getParentNode(node) {
if (getNodeName(node) === 'html') {
return node;
}
const result =
// Step into the shadow DOM of the parent of a slotted node.
node.assignedSlot ||
// DOM Element detected.
node.parentNode ||
// ShadowRoot detected.
isShadowRoot(node) && node.host ||
// Fallback.
getDocumentElement(node);
return isShadowRoot(result) ? result.host : result;
}
function getNearestOverflowAncestor(node) {
const parentNode = getParentNode(node);
if (isLastTraversableNode(parentNode)) {
// `getParentNode` will never return a `Document` due to the fallback
// check, so it's either the <html> or <body> element.
return parentNode.ownerDocument.body;
}
if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
return parentNode;
}
return getNearestOverflowAncestor(parentNode);
}
function getOverflowAncestors(node, list) {
var _node$ownerDocument;
if (list === void 0) {
list = [];
}
const scrollableAncestor = getNearestOverflowAncestor(node);
const isBody = scrollableAncestor === ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.body);
const win = getWindow(scrollableAncestor);
if (isBody) {
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []);
}
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor));
}
function getViewportRect(element, strategy) {
const win = getWindow(element);
const html = getDocumentElement(element);
const visualViewport = win.visualViewport;
let width = html.clientWidth;
let height = html.clientHeight;
let x = 0;
let y = 0;
if (visualViewport) {
width = visualViewport.width;
height = visualViewport.height;
const layoutViewport = isLayoutViewport();
if (layoutViewport || !layoutViewport && strategy === 'fixed') {
x = visualViewport.offsetLeft;
y = visualViewport.offsetTop;
}
}
return {
width,
height,
x,
y
};
}
// Returns the inner client rect, subtracting scrollbars if present.
function getInnerBoundingClientRect(element, strategy) {
const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
const top = clientRect.top + element.clientTop;
const left = clientRect.left + element.clientLeft;
const scale = isHTMLElement(element) ? getScale(element) : {
x: 1,
y: 1
};
const width = element.clientWidth * scale.x;
const height = element.clientHeight * scale.y;
const x = left * scale.x;
const y = top * scale.y;
return {
width,
height,
x,
y
};
}
function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
if (clippingAncestor === 'viewport') {
return rectToClientRect(getViewportRect(element, strategy));
}
if (isElement(clippingAncestor)) {
return rectToClientRect(getInnerBoundingClientRect(clippingAncestor, strategy));
}
return rectToClientRect(getDocumentRect(getDocumentElement(element)));
}
// A "clipping ancestor" is an `overflow` element with the characteristic of
// clipping (or hiding) child elements. This returns all clipping ancestors
// of the given element up the tree.
function getClippingElementAncestors(element, cache) {
const cachedResult = cache.get(element);
if (cachedResult) {
return cachedResult;
}
let result = getOverflowAncestors(element).filter(el => isElement(el) && getNodeName(el) !== 'body');
let currentContainingBlockComputedStyle = null;
const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
let currentNode = elementIsFixed ? getParentNode(element) : element;
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
const computedStyle = getComputedStyle$1(currentNode);
const containingBlock = isContainingBlock(currentNode);
const shouldDropCurrentNode = elementIsFixed ? !containingBlock && !currentContainingBlockComputedStyle : !containingBlock && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position);
if (shouldDropCurrentNode) {
// Drop non-containing blocks.
result = result.filter(ancestor => ancestor !== currentNode);
} else {
// Record last containing block for next iteration.
currentContainingBlockComputedStyle = computedStyle;
}
currentNode = getParentNode(currentNode);
}
cache.set(element, result);
return result;
}
// Gets the maximum area that the element is visible in due to any number of
// clipping ancestors.
function getClippingRect(_ref) {
let {
element,
boundary,
rootBoundary,
strategy
} = _ref;
const elementClippingAncestors = boundary === 'clippingAncestors' ? 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));
return {
width: clippingRect.right - clippingRect.left,
height: clippingRect.bottom - clippingRect.top,
x: clippingRect.left,
y: clippingRect.top
};
}
function getDimensions(element) {
if (isHTMLElement(element)) {
return getCssDimensions(element);
}
return element.getBoundingClientRect();
}
function getTrueOffsetParent(element) {
if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
return null;
}
return element.offsetParent;
}
function getContainingBlock(element) {
let currentNode = getParentNode(element);
while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
if (isContainingBlock(currentNode)) {
return currentNode;
} else {
currentNode = getParentNode(currentNode);
}
}
return null;
}
// Gets the closest ancestor positioned element. Handles some edge cases,
// such as table ancestors and cross browser bugs.
function getOffsetParent(element) {
const window = getWindow(element);
let offsetParent = getTrueOffsetParent(element);
while (offsetParent && isTableElement(offsetParent) && getComputedStyle$1(offsetParent).position === 'static') {
offsetParent = getTrueOffsetParent(offsetParent);
}
if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle$1(offsetParent).position === 'static' && !isContainingBlock(offsetParent))) {
return window;
}
return offsetParent || getContainingBlock(element) || window;
}
function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
const isOffsetParentAnElement = isHTMLElement(offsetParent);
const documentElement = getDocumentElement(offsetParent);
const rect = getBoundingClientRect(element, true, strategy === 'fixed', offsetParent);
let scroll = {
scrollLeft: 0,
scrollTop: 0
};
const offsets = {
x: 0,
y: 0
};
if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
scroll = getNodeScroll(offsetParent);
}
if (isHTMLElement(offsetParent)) {
const offsetRect = getBoundingClientRect(offsetParent, true);
offsets.x = offsetRect.x + offsetParent.clientLeft;
offsets.y = offsetRect.y + offsetParent.clientTop;
} else if (documentElement) {
offsets.x = getWindowScrollBarX(documentElement);
}
}
return {
x: rect.left + scroll.scrollLeft - offsets.x,
y: rect.top + scroll.scrollTop - offsets.y,
width: rect.width,
height: rect.height
};
}
const platform = {
getClippingRect,
convertOffsetParentRelativeRectToViewportRelativeRect,
isElement,
getDimensions,
getOffsetParent,
getDocumentElement,
getScale,
async getElementRects(_ref) {
let {
reference,
floating,
strategy
} = _ref;
const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
const getDimensionsFn = this.getDimensions;
return {
reference: getRectRelativeToOffsetParent(reference, await getOffsetParentFn(floating), strategy),
floating: {
x: 0,
y: 0,
...(await getDimensionsFn(floating))
}
};
},
getClientRects: element => Array.from(element.getClientRects()),
isRTL: element => getComputedStyle$1(element).direction === 'rtl'
};
/**
* Automatically updates the position of the floating element when necessary.
* @see https://floating-ui.com/docs/autoUpdate
*/
function autoUpdate(reference, floating, update, options) {
if (options === void 0) {
options = {};
}
const {
ancestorScroll: _ancestorScroll = true,
ancestorResize = true,
elementResize = true,
animationFrame = false
} = options;
const ancestorScroll = _ancestorScroll && !animationFrame;
const ancestors = ancestorScroll || ancestorResize ? [...(isElement(reference) ? getOverflowAncestors(reference) : reference.contextElement ? getOverflowAncestors(reference.contextElement) : []), ...getOverflowAncestors(floating)] : [];
ancestors.forEach(ancestor => {
ancestorScroll && ancestor.addEventListener('scroll', update, {
passive: true
});
ancestorResize && ancestor.addEventListener('resize', update);
});
let observer = null;
if (elementResize) {
let initialUpdate = true;
observer = new ResizeObserver(() => {
if (!initialUpdate) {
update();
}
initialUpdate = false;
});
isElement(reference) && !animationFrame && observer.observe(reference);
if (!isElement(reference) && reference.contextElement && !animationFrame) {
observer.observe(reference.contextElement);
}
observer.observe(floating);
}
let frameId;
let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
if (animationFrame) {
frameLoop();
}
function frameLoop() {
const nextRefRect = getBoundingClientRect(reference);
if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
update();
}
prevRefRect = nextRefRect;
frameId = requestAnimationFrame(frameLoop);
}
update();
return () => {
var _observer;
ancestors.forEach(ancestor => {
ancestorScroll && ancestor.removeEventListener('scroll', update);
ancestorResize && ancestor.removeEventListener('resize', update);
});
(_observer = observer) == null ? void 0 : _observer.disconnect();
observer = null;
if (animationFrame) {
cancelAnimationFrame(frameId);
}
};
}
/**
* Computes the `x` and `y` coordinates that will place the floating element
* next to a reference element when it is given a certain CSS positioning
* strategy.
*/
const computePosition = (reference, floating, options) => {
// This caches the expensive `getClippingElementAncestors` function so that
// multiple lifecycle resets re-use the same result. It only lives for a
// single call. If other functions become expensive, we can add them as well.
const cache = new Map();
const mergedOptions = {
platform,
...options
};
const platformWithCache = {
...mergedOptions.platform,
_c: cache
};
return computePosition$1(reference, floating, {
...mergedOptions,
platform: platformWithCache
});
};
export { autoUpdate, computePosition, getOverflowAncestors, platform };
+635
View File
@@ -0,0 +1,635 @@
import { rectToClientRect, computePosition as computePosition$1 } from '@floating-ui/core';
export { arrow, autoPlacement, detectOverflow, flip, hide, inline, limitShift, offset, shift, size } from '@floating-ui/core';
function getWindow(node) {
var _node$ownerDocument;
return ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
}
function getComputedStyle$1(element) {
return getWindow(element).getComputedStyle(element);
}
const min = Math.min;
const max = Math.max;
const round = Math.round;
function getCssDimensions(element) {
const css = getComputedStyle$1(element);
let width = parseFloat(css.width);
let height = parseFloat(css.height);
const offsetWidth = element.offsetWidth;
const offsetHeight = element.offsetHeight;
const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
if (shouldFallback) {
width = offsetWidth;
height = offsetHeight;
}
return {
width,
height,
fallback: shouldFallback
};
}
function getNodeName(node) {
return isNode(node) ? (node.nodeName || '').toLowerCase() : '';
}
let uaString;
function getUAString() {
if (uaString) {
return uaString;
}
const uaData = navigator.userAgentData;
if (uaData && Array.isArray(uaData.brands)) {
uaString = uaData.brands.map(item => item.brand + "/" + item.version).join(' ');
return uaString;
}
return navigator.userAgent;
}
function isHTMLElement(value) {
return value instanceof getWindow(value).HTMLElement;
}
function isElement(value) {
return value instanceof getWindow(value).Element;
}
function isNode(value) {
return value instanceof getWindow(value).Node;
}
function isShadowRoot(node) {
// Browsers without `ShadowRoot` support.
if (typeof ShadowRoot === 'undefined') {
return false;
}
const OwnElement = getWindow(node).ShadowRoot;
return node instanceof OwnElement || node instanceof ShadowRoot;
}
function isOverflowElement(element) {
const {
overflow,
overflowX,
overflowY,
display
} = getComputedStyle$1(element);
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
}
function isTableElement(element) {
return ['table', 'td', 'th'].includes(getNodeName(element));
}
function isContainingBlock(element) {
// TODO: Try to use feature detection here instead.
const isFirefox = /firefox/i.test(getUAString());
const css = getComputedStyle$1(element);
const backdropFilter = css.backdropFilter || css.WebkitBackdropFilter;
// This is non-exhaustive but covers the most common CSS properties that
// create a containing block.
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
return css.transform !== 'none' || css.perspective !== 'none' || (backdropFilter ? backdropFilter !== 'none' : false) || isFirefox && css.willChange === 'filter' || isFirefox && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective'].some(value => css.willChange.includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => {
// Add type check for old browsers.
const contain = css.contain;
return contain != null ? contain.includes(value) : false;
});
}
function isLayoutViewport() {
// TODO: Try to use feature detection here instead. Feature detection for
// this can fail in various ways, making the userAgent check the most:
// reliable:
// • Always-visible scrollbar or not
// • Width of <html>
// Not Safari.
return !/^((?!chrome|android).)*safari/i.test(getUAString());
}
function isLastTraversableNode(node) {
return ['html', 'body', '#document'].includes(getNodeName(node));
}
function unwrapElement(element) {
return !isElement(element) ? element.contextElement : element;
}
const FALLBACK_SCALE = {
x: 1,
y: 1
};
function getScale(element) {
const domElement = unwrapElement(element);
if (!isHTMLElement(domElement)) {
return FALLBACK_SCALE;
}
const rect = domElement.getBoundingClientRect();
const {
width,
height,
fallback
} = getCssDimensions(domElement);
let x = (fallback ? round(rect.width) : rect.width) / width;
let y = (fallback ? round(rect.height) : rect.height) / height;
// 0, NaN, or Infinity should always fallback to 1.
if (!x || !Number.isFinite(x)) {
x = 1;
}
if (!y || !Number.isFinite(y)) {
y = 1;
}
return {
x,
y
};
}
function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
var _win$visualViewport, _win$visualViewport2;
if (includeScale === void 0) {
includeScale = false;
}
if (isFixedStrategy === void 0) {
isFixedStrategy = false;
}
const clientRect = element.getBoundingClientRect();
const domElement = unwrapElement(element);
let scale = FALLBACK_SCALE;
if (includeScale) {
if (offsetParent) {
if (isElement(offsetParent)) {
scale = getScale(offsetParent);
}
} else {
scale = getScale(element);
}
}
const win = domElement ? getWindow(domElement) : window;
const addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
let x = (clientRect.left + (addVisualOffsets ? ((_win$visualViewport = win.visualViewport) == null ? void 0 : _win$visualViewport.offsetLeft) || 0 : 0)) / scale.x;
let y = (clientRect.top + (addVisualOffsets ? ((_win$visualViewport2 = win.visualViewport) == null ? void 0 : _win$visualViewport2.offsetTop) || 0 : 0)) / scale.y;
let width = clientRect.width / scale.x;
let height = clientRect.height / scale.y;
if (domElement) {
const win = getWindow(domElement);
const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
let currentIFrame = win.frameElement;
while (currentIFrame && offsetParent && offsetWin !== win) {
const iframeScale = getScale(currentIFrame);
const iframeRect = currentIFrame.getBoundingClientRect();
const css = getComputedStyle(currentIFrame);
iframeRect.x += (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
iframeRect.y += (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
x *= iframeScale.x;
y *= iframeScale.y;
width *= iframeScale.x;
height *= iframeScale.y;
x += iframeRect.x;
y += iframeRect.y;
currentIFrame = getWindow(currentIFrame).frameElement;
}
}
return {
width,
height,
top: y,
right: x + width,
bottom: y + height,
left: x,
x,
y
};
}
function getDocumentElement(node) {
return ((isNode(node) ? node.ownerDocument : node.document) || window.document).documentElement;
}
function getNodeScroll(element) {
if (isElement(element)) {
return {
scrollLeft: element.scrollLeft,
scrollTop: element.scrollTop
};
}
return {
scrollLeft: element.pageXOffset,
scrollTop: element.pageYOffset
};
}
function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
let {
rect,
offsetParent,
strategy
} = _ref;
const isOffsetParentAnElement = isHTMLElement(offsetParent);
const documentElement = getDocumentElement(offsetParent);
if (offsetParent === documentElement) {
return rect;
}
let scroll = {
scrollLeft: 0,
scrollTop: 0
};
let scale = {
x: 1,
y: 1
};
const offsets = {
x: 0,
y: 0
};
if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
scroll = getNodeScroll(offsetParent);
}
if (isHTMLElement(offsetParent)) {
const offsetRect = getBoundingClientRect(offsetParent);
scale = getScale(offsetParent);
offsets.x = offsetRect.x + offsetParent.clientLeft;
offsets.y = offsetRect.y + offsetParent.clientTop;
}
}
return {
width: rect.width * scale.x,
height: rect.height * scale.y,
x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x,
y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y
};
}
function getWindowScrollBarX(element) {
// If <html> has a CSS width greater than the viewport, then this will be
// incorrect for RTL.
return getBoundingClientRect(getDocumentElement(element)).left + getNodeScroll(element).scrollLeft;
}
// Gets the entire size of the scrollable document area, even extending outside
// of the `<html>` and `<body>` rect bounds if horizontally scrollable.
function getDocumentRect(element) {
const html = getDocumentElement(element);
const scroll = getNodeScroll(element);
const body = element.ownerDocument.body;
const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
let x = -scroll.scrollLeft + getWindowScrollBarX(element);
const y = -scroll.scrollTop;
if (getComputedStyle$1(body).direction === 'rtl') {
x += max(html.clientWidth, body.clientWidth) - width;
}
return {
width,
height,
x,
y
};
}
function getParentNode(node) {
if (getNodeName(node) === 'html') {
return node;
}
const result =
// Step into the shadow DOM of the parent of a slotted node.
node.assignedSlot ||
// DOM Element detected.
node.parentNode ||
// ShadowRoot detected.
isShadowRoot(node) && node.host ||
// Fallback.
getDocumentElement(node);
return isShadowRoot(result) ? result.host : result;
}
function getNearestOverflowAncestor(node) {
const parentNode = getParentNode(node);
if (isLastTraversableNode(parentNode)) {
// `getParentNode` will never return a `Document` due to the fallback
// check, so it's either the <html> or <body> element.
return parentNode.ownerDocument.body;
}
if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
return parentNode;
}
return getNearestOverflowAncestor(parentNode);
}
function getOverflowAncestors(node, list) {
var _node$ownerDocument;
if (list === void 0) {
list = [];
}
const scrollableAncestor = getNearestOverflowAncestor(node);
const isBody = scrollableAncestor === ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.body);
const win = getWindow(scrollableAncestor);
if (isBody) {
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []);
}
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor));
}
function getViewportRect(element, strategy) {
const win = getWindow(element);
const html = getDocumentElement(element);
const visualViewport = win.visualViewport;
let width = html.clientWidth;
let height = html.clientHeight;
let x = 0;
let y = 0;
if (visualViewport) {
width = visualViewport.width;
height = visualViewport.height;
const layoutViewport = isLayoutViewport();
if (layoutViewport || !layoutViewport && strategy === 'fixed') {
x = visualViewport.offsetLeft;
y = visualViewport.offsetTop;
}
}
return {
width,
height,
x,
y
};
}
// Returns the inner client rect, subtracting scrollbars if present.
function getInnerBoundingClientRect(element, strategy) {
const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
const top = clientRect.top + element.clientTop;
const left = clientRect.left + element.clientLeft;
const scale = isHTMLElement(element) ? getScale(element) : {
x: 1,
y: 1
};
const width = element.clientWidth * scale.x;
const height = element.clientHeight * scale.y;
const x = left * scale.x;
const y = top * scale.y;
return {
width,
height,
x,
y
};
}
function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
if (clippingAncestor === 'viewport') {
return rectToClientRect(getViewportRect(element, strategy));
}
if (isElement(clippingAncestor)) {
return rectToClientRect(getInnerBoundingClientRect(clippingAncestor, strategy));
}
return rectToClientRect(getDocumentRect(getDocumentElement(element)));
}
// A "clipping ancestor" is an `overflow` element with the characteristic of
// clipping (or hiding) child elements. This returns all clipping ancestors
// of the given element up the tree.
function getClippingElementAncestors(element, cache) {
const cachedResult = cache.get(element);
if (cachedResult) {
return cachedResult;
}
let result = getOverflowAncestors(element).filter(el => isElement(el) && getNodeName(el) !== 'body');
let currentContainingBlockComputedStyle = null;
const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
let currentNode = elementIsFixed ? getParentNode(element) : element;
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
const computedStyle = getComputedStyle$1(currentNode);
const containingBlock = isContainingBlock(currentNode);
const shouldDropCurrentNode = elementIsFixed ? !containingBlock && !currentContainingBlockComputedStyle : !containingBlock && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position);
if (shouldDropCurrentNode) {
// Drop non-containing blocks.
result = result.filter(ancestor => ancestor !== currentNode);
} else {
// Record last containing block for next iteration.
currentContainingBlockComputedStyle = computedStyle;
}
currentNode = getParentNode(currentNode);
}
cache.set(element, result);
return result;
}
// Gets the maximum area that the element is visible in due to any number of
// clipping ancestors.
function getClippingRect(_ref) {
let {
element,
boundary,
rootBoundary,
strategy
} = _ref;
const elementClippingAncestors = boundary === 'clippingAncestors' ? 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));
return {
width: clippingRect.right - clippingRect.left,
height: clippingRect.bottom - clippingRect.top,
x: clippingRect.left,
y: clippingRect.top
};
}
function getDimensions(element) {
if (isHTMLElement(element)) {
return getCssDimensions(element);
}
return element.getBoundingClientRect();
}
function getTrueOffsetParent(element) {
if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
return null;
}
return element.offsetParent;
}
function getContainingBlock(element) {
let currentNode = getParentNode(element);
while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
if (isContainingBlock(currentNode)) {
return currentNode;
} else {
currentNode = getParentNode(currentNode);
}
}
return null;
}
// Gets the closest ancestor positioned element. Handles some edge cases,
// such as table ancestors and cross browser bugs.
function getOffsetParent(element) {
const window = getWindow(element);
let offsetParent = getTrueOffsetParent(element);
while (offsetParent && isTableElement(offsetParent) && getComputedStyle$1(offsetParent).position === 'static') {
offsetParent = getTrueOffsetParent(offsetParent);
}
if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle$1(offsetParent).position === 'static' && !isContainingBlock(offsetParent))) {
return window;
}
return offsetParent || getContainingBlock(element) || window;
}
function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
const isOffsetParentAnElement = isHTMLElement(offsetParent);
const documentElement = getDocumentElement(offsetParent);
const rect = getBoundingClientRect(element, true, strategy === 'fixed', offsetParent);
let scroll = {
scrollLeft: 0,
scrollTop: 0
};
const offsets = {
x: 0,
y: 0
};
if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
scroll = getNodeScroll(offsetParent);
}
if (isHTMLElement(offsetParent)) {
const offsetRect = getBoundingClientRect(offsetParent, true);
offsets.x = offsetRect.x + offsetParent.clientLeft;
offsets.y = offsetRect.y + offsetParent.clientTop;
} else if (documentElement) {
offsets.x = getWindowScrollBarX(documentElement);
}
}
return {
x: rect.left + scroll.scrollLeft - offsets.x,
y: rect.top + scroll.scrollTop - offsets.y,
width: rect.width,
height: rect.height
};
}
const platform = {
getClippingRect,
convertOffsetParentRelativeRectToViewportRelativeRect,
isElement,
getDimensions,
getOffsetParent,
getDocumentElement,
getScale,
async getElementRects(_ref) {
let {
reference,
floating,
strategy
} = _ref;
const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
const getDimensionsFn = this.getDimensions;
return {
reference: getRectRelativeToOffsetParent(reference, await getOffsetParentFn(floating), strategy),
floating: {
x: 0,
y: 0,
...(await getDimensionsFn(floating))
}
};
},
getClientRects: element => Array.from(element.getClientRects()),
isRTL: element => getComputedStyle$1(element).direction === 'rtl'
};
/**
* Automatically updates the position of the floating element when necessary.
* @see https://floating-ui.com/docs/autoUpdate
*/
function autoUpdate(reference, floating, update, options) {
if (options === void 0) {
options = {};
}
const {
ancestorScroll: _ancestorScroll = true,
ancestorResize = true,
elementResize = true,
animationFrame = false
} = options;
const ancestorScroll = _ancestorScroll && !animationFrame;
const ancestors = ancestorScroll || ancestorResize ? [...(isElement(reference) ? getOverflowAncestors(reference) : reference.contextElement ? getOverflowAncestors(reference.contextElement) : []), ...getOverflowAncestors(floating)] : [];
ancestors.forEach(ancestor => {
ancestorScroll && ancestor.addEventListener('scroll', update, {
passive: true
});
ancestorResize && ancestor.addEventListener('resize', update);
});
let observer = null;
if (elementResize) {
let initialUpdate = true;
observer = new ResizeObserver(() => {
if (!initialUpdate) {
update();
}
initialUpdate = false;
});
isElement(reference) && !animationFrame && observer.observe(reference);
if (!isElement(reference) && reference.contextElement && !animationFrame) {
observer.observe(reference.contextElement);
}
observer.observe(floating);
}
let frameId;
let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
if (animationFrame) {
frameLoop();
}
function frameLoop() {
const nextRefRect = getBoundingClientRect(reference);
if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
update();
}
prevRefRect = nextRefRect;
frameId = requestAnimationFrame(frameLoop);
}
update();
return () => {
var _observer;
ancestors.forEach(ancestor => {
ancestorScroll && ancestor.removeEventListener('scroll', update);
ancestorResize && ancestor.removeEventListener('resize', update);
});
(_observer = observer) == null ? void 0 : _observer.disconnect();
observer = null;
if (animationFrame) {
cancelAnimationFrame(frameId);
}
};
}
/**
* Computes the `x` and `y` coordinates that will place the floating element
* next to a reference element when it is given a certain CSS positioning
* strategy.
*/
const computePosition = (reference, floating, options) => {
// This caches the expensive `getClippingElementAncestors` function so that
// multiple lifecycle resets re-use the same result. It only lives for a
// single call. If other functions become expensive, we can add them as well.
const cache = new Map();
const mergedOptions = {
platform,
...options
};
const platformWithCache = {
...mergedOptions.platform,
_c: cache
};
return computePosition$1(reference, floating, {
...mergedOptions,
platform: platformWithCache
});
};
export { autoUpdate, computePosition, getOverflowAncestors, platform };
+685
View File
@@ -0,0 +1,685 @@
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@floating-ui/core')) :
typeof define === 'function' && define.amd ? define(['exports', '@floating-ui/core'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.FloatingUIDOM = {}, global.FloatingUICore));
})(this, (function (exports, core) { 'use strict';
function getWindow(node) {
var _node$ownerDocument;
return ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
}
function getComputedStyle$1(element) {
return getWindow(element).getComputedStyle(element);
}
const min = Math.min;
const max = Math.max;
const round = Math.round;
function getCssDimensions(element) {
const css = getComputedStyle$1(element);
let width = parseFloat(css.width);
let height = parseFloat(css.height);
const offsetWidth = element.offsetWidth;
const offsetHeight = element.offsetHeight;
const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
if (shouldFallback) {
width = offsetWidth;
height = offsetHeight;
}
return {
width,
height,
fallback: shouldFallback
};
}
function getNodeName(node) {
return isNode(node) ? (node.nodeName || '').toLowerCase() : '';
}
let uaString;
function getUAString() {
if (uaString) {
return uaString;
}
const uaData = navigator.userAgentData;
if (uaData && Array.isArray(uaData.brands)) {
uaString = uaData.brands.map(item => item.brand + "/" + item.version).join(' ');
return uaString;
}
return navigator.userAgent;
}
function isHTMLElement(value) {
return value instanceof getWindow(value).HTMLElement;
}
function isElement(value) {
return value instanceof getWindow(value).Element;
}
function isNode(value) {
return value instanceof getWindow(value).Node;
}
function isShadowRoot(node) {
// Browsers without `ShadowRoot` support.
if (typeof ShadowRoot === 'undefined') {
return false;
}
const OwnElement = getWindow(node).ShadowRoot;
return node instanceof OwnElement || node instanceof ShadowRoot;
}
function isOverflowElement(element) {
const {
overflow,
overflowX,
overflowY,
display
} = getComputedStyle$1(element);
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
}
function isTableElement(element) {
return ['table', 'td', 'th'].includes(getNodeName(element));
}
function isContainingBlock(element) {
// TODO: Try to use feature detection here instead.
const isFirefox = /firefox/i.test(getUAString());
const css = getComputedStyle$1(element);
const backdropFilter = css.backdropFilter || css.WebkitBackdropFilter;
// This is non-exhaustive but covers the most common CSS properties that
// create a containing block.
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
return css.transform !== 'none' || css.perspective !== 'none' || (backdropFilter ? backdropFilter !== 'none' : false) || isFirefox && css.willChange === 'filter' || isFirefox && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective'].some(value => css.willChange.includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => {
// Add type check for old browsers.
const contain = css.contain;
return contain != null ? contain.includes(value) : false;
});
}
function isLayoutViewport() {
// TODO: Try to use feature detection here instead. Feature detection for
// this can fail in various ways, making the userAgent check the most:
// reliable:
// • Always-visible scrollbar or not
// • Width of <html>
// Not Safari.
return !/^((?!chrome|android).)*safari/i.test(getUAString());
}
function isLastTraversableNode(node) {
return ['html', 'body', '#document'].includes(getNodeName(node));
}
function unwrapElement(element) {
return !isElement(element) ? element.contextElement : element;
}
const FALLBACK_SCALE = {
x: 1,
y: 1
};
function getScale(element) {
const domElement = unwrapElement(element);
if (!isHTMLElement(domElement)) {
return FALLBACK_SCALE;
}
const rect = domElement.getBoundingClientRect();
const {
width,
height,
fallback
} = getCssDimensions(domElement);
let x = (fallback ? round(rect.width) : rect.width) / width;
let y = (fallback ? round(rect.height) : rect.height) / height;
// 0, NaN, or Infinity should always fallback to 1.
if (!x || !Number.isFinite(x)) {
x = 1;
}
if (!y || !Number.isFinite(y)) {
y = 1;
}
return {
x,
y
};
}
function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
var _win$visualViewport, _win$visualViewport2;
if (includeScale === void 0) {
includeScale = false;
}
if (isFixedStrategy === void 0) {
isFixedStrategy = false;
}
const clientRect = element.getBoundingClientRect();
const domElement = unwrapElement(element);
let scale = FALLBACK_SCALE;
if (includeScale) {
if (offsetParent) {
if (isElement(offsetParent)) {
scale = getScale(offsetParent);
}
} else {
scale = getScale(element);
}
}
const win = domElement ? getWindow(domElement) : window;
const addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
let x = (clientRect.left + (addVisualOffsets ? ((_win$visualViewport = win.visualViewport) == null ? void 0 : _win$visualViewport.offsetLeft) || 0 : 0)) / scale.x;
let y = (clientRect.top + (addVisualOffsets ? ((_win$visualViewport2 = win.visualViewport) == null ? void 0 : _win$visualViewport2.offsetTop) || 0 : 0)) / scale.y;
let width = clientRect.width / scale.x;
let height = clientRect.height / scale.y;
if (domElement) {
const win = getWindow(domElement);
const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
let currentIFrame = win.frameElement;
while (currentIFrame && offsetParent && offsetWin !== win) {
const iframeScale = getScale(currentIFrame);
const iframeRect = currentIFrame.getBoundingClientRect();
const css = getComputedStyle(currentIFrame);
iframeRect.x += (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
iframeRect.y += (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
x *= iframeScale.x;
y *= iframeScale.y;
width *= iframeScale.x;
height *= iframeScale.y;
x += iframeRect.x;
y += iframeRect.y;
currentIFrame = getWindow(currentIFrame).frameElement;
}
}
return {
width,
height,
top: y,
right: x + width,
bottom: y + height,
left: x,
x,
y
};
}
function getDocumentElement(node) {
return ((isNode(node) ? node.ownerDocument : node.document) || window.document).documentElement;
}
function getNodeScroll(element) {
if (isElement(element)) {
return {
scrollLeft: element.scrollLeft,
scrollTop: element.scrollTop
};
}
return {
scrollLeft: element.pageXOffset,
scrollTop: element.pageYOffset
};
}
function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
let {
rect,
offsetParent,
strategy
} = _ref;
const isOffsetParentAnElement = isHTMLElement(offsetParent);
const documentElement = getDocumentElement(offsetParent);
if (offsetParent === documentElement) {
return rect;
}
let scroll = {
scrollLeft: 0,
scrollTop: 0
};
let scale = {
x: 1,
y: 1
};
const offsets = {
x: 0,
y: 0
};
if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
scroll = getNodeScroll(offsetParent);
}
if (isHTMLElement(offsetParent)) {
const offsetRect = getBoundingClientRect(offsetParent);
scale = getScale(offsetParent);
offsets.x = offsetRect.x + offsetParent.clientLeft;
offsets.y = offsetRect.y + offsetParent.clientTop;
}
}
return {
width: rect.width * scale.x,
height: rect.height * scale.y,
x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x,
y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y
};
}
function getWindowScrollBarX(element) {
// If <html> has a CSS width greater than the viewport, then this will be
// incorrect for RTL.
return getBoundingClientRect(getDocumentElement(element)).left + getNodeScroll(element).scrollLeft;
}
// Gets the entire size of the scrollable document area, even extending outside
// of the `<html>` and `<body>` rect bounds if horizontally scrollable.
function getDocumentRect(element) {
const html = getDocumentElement(element);
const scroll = getNodeScroll(element);
const body = element.ownerDocument.body;
const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
let x = -scroll.scrollLeft + getWindowScrollBarX(element);
const y = -scroll.scrollTop;
if (getComputedStyle$1(body).direction === 'rtl') {
x += max(html.clientWidth, body.clientWidth) - width;
}
return {
width,
height,
x,
y
};
}
function getParentNode(node) {
if (getNodeName(node) === 'html') {
return node;
}
const result =
// Step into the shadow DOM of the parent of a slotted node.
node.assignedSlot ||
// DOM Element detected.
node.parentNode ||
// ShadowRoot detected.
isShadowRoot(node) && node.host ||
// Fallback.
getDocumentElement(node);
return isShadowRoot(result) ? result.host : result;
}
function getNearestOverflowAncestor(node) {
const parentNode = getParentNode(node);
if (isLastTraversableNode(parentNode)) {
// `getParentNode` will never return a `Document` due to the fallback
// check, so it's either the <html> or <body> element.
return parentNode.ownerDocument.body;
}
if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
return parentNode;
}
return getNearestOverflowAncestor(parentNode);
}
function getOverflowAncestors(node, list) {
var _node$ownerDocument;
if (list === void 0) {
list = [];
}
const scrollableAncestor = getNearestOverflowAncestor(node);
const isBody = scrollableAncestor === ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.body);
const win = getWindow(scrollableAncestor);
if (isBody) {
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []);
}
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor));
}
function getViewportRect(element, strategy) {
const win = getWindow(element);
const html = getDocumentElement(element);
const visualViewport = win.visualViewport;
let width = html.clientWidth;
let height = html.clientHeight;
let x = 0;
let y = 0;
if (visualViewport) {
width = visualViewport.width;
height = visualViewport.height;
const layoutViewport = isLayoutViewport();
if (layoutViewport || !layoutViewport && strategy === 'fixed') {
x = visualViewport.offsetLeft;
y = visualViewport.offsetTop;
}
}
return {
width,
height,
x,
y
};
}
// Returns the inner client rect, subtracting scrollbars if present.
function getInnerBoundingClientRect(element, strategy) {
const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
const top = clientRect.top + element.clientTop;
const left = clientRect.left + element.clientLeft;
const scale = isHTMLElement(element) ? getScale(element) : {
x: 1,
y: 1
};
const width = element.clientWidth * scale.x;
const height = element.clientHeight * scale.y;
const x = left * scale.x;
const y = top * scale.y;
return {
width,
height,
x,
y
};
}
function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
if (clippingAncestor === 'viewport') {
return core.rectToClientRect(getViewportRect(element, strategy));
}
if (isElement(clippingAncestor)) {
return core.rectToClientRect(getInnerBoundingClientRect(clippingAncestor, strategy));
}
return core.rectToClientRect(getDocumentRect(getDocumentElement(element)));
}
// A "clipping ancestor" is an `overflow` element with the characteristic of
// clipping (or hiding) child elements. This returns all clipping ancestors
// of the given element up the tree.
function getClippingElementAncestors(element, cache) {
const cachedResult = cache.get(element);
if (cachedResult) {
return cachedResult;
}
let result = getOverflowAncestors(element).filter(el => isElement(el) && getNodeName(el) !== 'body');
let currentContainingBlockComputedStyle = null;
const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
let currentNode = elementIsFixed ? getParentNode(element) : element;
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
const computedStyle = getComputedStyle$1(currentNode);
const containingBlock = isContainingBlock(currentNode);
const shouldDropCurrentNode = elementIsFixed ? !containingBlock && !currentContainingBlockComputedStyle : !containingBlock && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position);
if (shouldDropCurrentNode) {
// Drop non-containing blocks.
result = result.filter(ancestor => ancestor !== currentNode);
} else {
// Record last containing block for next iteration.
currentContainingBlockComputedStyle = computedStyle;
}
currentNode = getParentNode(currentNode);
}
cache.set(element, result);
return result;
}
// Gets the maximum area that the element is visible in due to any number of
// clipping ancestors.
function getClippingRect(_ref) {
let {
element,
boundary,
rootBoundary,
strategy
} = _ref;
const elementClippingAncestors = boundary === 'clippingAncestors' ? 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));
return {
width: clippingRect.right - clippingRect.left,
height: clippingRect.bottom - clippingRect.top,
x: clippingRect.left,
y: clippingRect.top
};
}
function getDimensions(element) {
if (isHTMLElement(element)) {
return getCssDimensions(element);
}
return element.getBoundingClientRect();
}
function getTrueOffsetParent(element) {
if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
return null;
}
return element.offsetParent;
}
function getContainingBlock(element) {
let currentNode = getParentNode(element);
while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
if (isContainingBlock(currentNode)) {
return currentNode;
} else {
currentNode = getParentNode(currentNode);
}
}
return null;
}
// Gets the closest ancestor positioned element. Handles some edge cases,
// such as table ancestors and cross browser bugs.
function getOffsetParent(element) {
const window = getWindow(element);
let offsetParent = getTrueOffsetParent(element);
while (offsetParent && isTableElement(offsetParent) && getComputedStyle$1(offsetParent).position === 'static') {
offsetParent = getTrueOffsetParent(offsetParent);
}
if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle$1(offsetParent).position === 'static' && !isContainingBlock(offsetParent))) {
return window;
}
return offsetParent || getContainingBlock(element) || window;
}
function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
const isOffsetParentAnElement = isHTMLElement(offsetParent);
const documentElement = getDocumentElement(offsetParent);
const rect = getBoundingClientRect(element, true, strategy === 'fixed', offsetParent);
let scroll = {
scrollLeft: 0,
scrollTop: 0
};
const offsets = {
x: 0,
y: 0
};
if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
scroll = getNodeScroll(offsetParent);
}
if (isHTMLElement(offsetParent)) {
const offsetRect = getBoundingClientRect(offsetParent, true);
offsets.x = offsetRect.x + offsetParent.clientLeft;
offsets.y = offsetRect.y + offsetParent.clientTop;
} else if (documentElement) {
offsets.x = getWindowScrollBarX(documentElement);
}
}
return {
x: rect.left + scroll.scrollLeft - offsets.x,
y: rect.top + scroll.scrollTop - offsets.y,
width: rect.width,
height: rect.height
};
}
const platform = {
getClippingRect,
convertOffsetParentRelativeRectToViewportRelativeRect,
isElement,
getDimensions,
getOffsetParent,
getDocumentElement,
getScale,
async getElementRects(_ref) {
let {
reference,
floating,
strategy
} = _ref;
const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
const getDimensionsFn = this.getDimensions;
return {
reference: getRectRelativeToOffsetParent(reference, await getOffsetParentFn(floating), strategy),
floating: {
x: 0,
y: 0,
...(await getDimensionsFn(floating))
}
};
},
getClientRects: element => Array.from(element.getClientRects()),
isRTL: element => getComputedStyle$1(element).direction === 'rtl'
};
/**
* Automatically updates the position of the floating element when necessary.
* @see https://floating-ui.com/docs/autoUpdate
*/
function autoUpdate(reference, floating, update, options) {
if (options === void 0) {
options = {};
}
const {
ancestorScroll: _ancestorScroll = true,
ancestorResize = true,
elementResize = true,
animationFrame = false
} = options;
const ancestorScroll = _ancestorScroll && !animationFrame;
const ancestors = ancestorScroll || ancestorResize ? [...(isElement(reference) ? getOverflowAncestors(reference) : reference.contextElement ? getOverflowAncestors(reference.contextElement) : []), ...getOverflowAncestors(floating)] : [];
ancestors.forEach(ancestor => {
ancestorScroll && ancestor.addEventListener('scroll', update, {
passive: true
});
ancestorResize && ancestor.addEventListener('resize', update);
});
let observer = null;
if (elementResize) {
let initialUpdate = true;
observer = new ResizeObserver(() => {
if (!initialUpdate) {
update();
}
initialUpdate = false;
});
isElement(reference) && !animationFrame && observer.observe(reference);
if (!isElement(reference) && reference.contextElement && !animationFrame) {
observer.observe(reference.contextElement);
}
observer.observe(floating);
}
let frameId;
let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
if (animationFrame) {
frameLoop();
}
function frameLoop() {
const nextRefRect = getBoundingClientRect(reference);
if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
update();
}
prevRefRect = nextRefRect;
frameId = requestAnimationFrame(frameLoop);
}
update();
return () => {
var _observer;
ancestors.forEach(ancestor => {
ancestorScroll && ancestor.removeEventListener('scroll', update);
ancestorResize && ancestor.removeEventListener('resize', update);
});
(_observer = observer) == null ? void 0 : _observer.disconnect();
observer = null;
if (animationFrame) {
cancelAnimationFrame(frameId);
}
};
}
/**
* Computes the `x` and `y` coordinates that will place the floating element
* next to a reference element when it is given a certain CSS positioning
* strategy.
*/
const computePosition = (reference, floating, options) => {
// This caches the expensive `getClippingElementAncestors` function so that
// multiple lifecycle resets re-use the same result. It only lives for a
// single call. If other functions become expensive, we can add them as well.
const cache = new Map();
const mergedOptions = {
platform,
...options
};
const platformWithCache = {
...mergedOptions.platform,
_c: cache
};
return core.computePosition(reference, floating, {
...mergedOptions,
platform: platformWithCache
});
};
Object.defineProperty(exports, 'arrow', {
enumerable: true,
get: function () { return core.arrow; }
});
Object.defineProperty(exports, 'autoPlacement', {
enumerable: true,
get: function () { return core.autoPlacement; }
});
Object.defineProperty(exports, 'detectOverflow', {
enumerable: true,
get: function () { return core.detectOverflow; }
});
Object.defineProperty(exports, 'flip', {
enumerable: true,
get: function () { return core.flip; }
});
Object.defineProperty(exports, 'hide', {
enumerable: true,
get: function () { return core.hide; }
});
Object.defineProperty(exports, 'inline', {
enumerable: true,
get: function () { return core.inline; }
});
Object.defineProperty(exports, 'limitShift', {
enumerable: true,
get: function () { return core.limitShift; }
});
Object.defineProperty(exports, 'offset', {
enumerable: true,
get: function () { return core.offset; }
});
Object.defineProperty(exports, 'shift', {
enumerable: true,
get: function () { return core.shift; }
});
Object.defineProperty(exports, 'size', {
enumerable: true,
get: function () { return core.size; }
});
exports.autoUpdate = autoUpdate;
exports.computePosition = computePosition;
exports.getOverflowAncestors = getOverflowAncestors;
exports.platform = platform;
Object.defineProperty(exports, '__esModule', { value: true });
}));
File diff suppressed because one or more lines are too long
+1
View File
@@ -0,0 +1 @@
export * from './src/types';
+74
View File
@@ -0,0 +1,74 @@
{
"name": "@floating-ui/dom",
"version": "1.1.1",
"@rollingversions": {
"baseVersion": [
0,
1,
0
]
},
"description": "Floating UI for the web",
"publishConfig": {
"access": "public"
},
"main": "./dist/floating-ui.dom.umd.js",
"module": "./dist/floating-ui.dom.esm.js",
"unpkg": "./dist/floating-ui.dom.umd.min.js",
"types": "./index.d.ts",
"exports": {
".": {
"types": "./index.d.ts",
"import": {
"browser": {
"development": "./dist/floating-ui.dom.browser.mjs",
"default": "./dist/floating-ui.dom.browser.min.mjs"
},
"default": "./dist/floating-ui.dom.mjs"
},
"module": "./dist/floating-ui.dom.esm.js",
"default": "./dist/floating-ui.dom.umd.js"
},
"./package.json": "./package.json"
},
"sideEffects": false,
"files": [
"dist/",
"index.d.ts",
"src/**/*.d.ts"
],
"scripts": {
"dev": "parcel test/visual/index.html",
"build": "NODE_ENV=build rollup -c",
"test": "jest test/unit"
},
"author": "atomiks",
"license": "MIT",
"bugs": "https://github.com/floating-ui/floating-ui",
"repository": {
"type": "git",
"url": "https://github.com/floating-ui/floating-ui.git",
"directory": "packages/dom"
},
"homepage": "https://floating-ui.com",
"keywords": [
"tooltip",
"popover",
"dropdown",
"menu",
"popup",
"positioning"
],
"dependencies": {
"@floating-ui/core": "^1.1.0"
},
"devDependencies": {
"@playwright/test": "^1.16.3",
"@types/react": "^18.0.1",
"concurrently": "^6.4.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-router-dom": "^6.1.1",
"serve": "^13.0.2"
}
}
+31
View File
@@ -0,0 +1,31 @@
import type { FloatingElement, ReferenceElement } from './types';
export interface Options {
/**
* Whether to update the position when an overflow ancestor is scrolled.
* @default true
*/
ancestorScroll: boolean;
/**
* Whether to update the position when an overflow ancestor is resized. This
* uses the native `resize` event.
* @default true
*/
ancestorResize: boolean;
/**
* Whether to update the position when either the reference or floating
* elements resized. This uses a `ResizeObserver`.
* @default true
*/
elementResize: boolean;
/**
* Whether to update on every animation frame if necessary. Optimized for
* performance so updates are only called when necessary, but use sparingly.
* @default false
*/
animationFrame: boolean;
}
/**
* Automatically updates the position of the floating element when necessary.
* @see https://floating-ui.com/docs/autoUpdate
*/
export declare function autoUpdate(reference: ReferenceElement, floating: FloatingElement, update: () => void, options?: Partial<Options>): () => void;
+11
View File
@@ -0,0 +1,11 @@
import type { ComputePositionConfig, FloatingElement, ReferenceElement } from './types';
/**
* Computes the `x` and `y` coordinates that will place the floating element
* next to a reference element when it is given a certain CSS positioning
* strategy.
*/
export declare const computePosition: (reference: ReferenceElement, floating: FloatingElement, options?: Partial<ComputePositionConfig>) => Promise<import("@floating-ui/core").ComputePositionReturn>;
export { autoUpdate } from './autoUpdate';
export { platform } from './platform';
export { getOverflowAncestors } from './utils/getOverflowAncestors';
export { arrow, autoPlacement, detectOverflow, flip, hide, inline, limitShift, offset, shift, size, } from '@floating-ui/core';
+2
View File
@@ -0,0 +1,2 @@
import type { Platform } from './types';
export declare const platform: Platform;
+128
View File
@@ -0,0 +1,128 @@
import type { AutoPlacementOptions, ClientRectObject, ComputePositionConfig as CoreComputePositionConfig, DetectOverflowOptions as CoreDetectOverflowOptions, Dimensions, ElementRects, FlipOptions, HideOptions, Middleware as CoreMiddleware, MiddlewareArguments as CoreMiddlewareArguments, MiddlewareReturn, Padding, Rect, RootBoundary, ShiftOptions, SideObject, SizeOptions as CoreSizeOptions, Strategy } from '@floating-ui/core';
type Promisable<T> = T | Promise<T>;
export interface Platform {
getElementRects: (args: {
reference: ReferenceElement;
floating: FloatingElement;
strategy: Strategy;
}) => Promisable<ElementRects>;
getClippingRect: (args: {
element: Element;
boundary: Boundary;
rootBoundary: RootBoundary;
strategy: Strategy;
}) => Promisable<Rect>;
getDimensions: (element: Element) => Promisable<Dimensions>;
convertOffsetParentRelativeRectToViewportRelativeRect?: (args: {
rect: Rect;
offsetParent: Element;
strategy: Strategy;
}) => Promisable<Rect>;
getOffsetParent?: (element: Element) => Promisable<Element | Window>;
isElement?: (value: unknown) => Promisable<boolean>;
getDocumentElement?: (element: Element) => Promisable<HTMLElement>;
getClientRects?: (element: Element) => Promisable<Array<ClientRectObject>>;
isRTL?: (element: Element) => Promisable<boolean>;
getScale?: (element: HTMLElement) => Promisable<{
x: number;
y: number;
}>;
}
export interface NodeScroll {
scrollLeft: number;
scrollTop: number;
}
export type Boundary = 'clippingAncestors' | Element | Array<Element>;
export type DetectOverflowOptions = Omit<CoreDetectOverflowOptions, 'boundary'> & {
boundary: Boundary;
};
export type SizeOptions = Omit<CoreSizeOptions, 'apply'> & {
/**
* Function that is called to perform style mutations to the floating element
* to change its size.
* @default undefined
*/
apply(args: MiddlewareArguments & {
availableWidth: number;
availableHeight: number;
}): Promisable<void>;
};
export type ComputePositionConfig = Omit<CoreComputePositionConfig, 'middleware' | 'platform'> & {
middleware?: Array<Middleware | null | undefined | false>;
platform?: Platform;
};
/**
* Custom positioning reference element.
* @see https://floating-ui.com/docs/virtual-elements
*/
export interface VirtualElement {
getBoundingClientRect(): ClientRectObject;
contextElement?: Element;
}
export type ReferenceElement = Element | VirtualElement;
export type FloatingElement = HTMLElement;
export interface Elements {
reference: ReferenceElement;
floating: FloatingElement;
}
export type MiddlewareArguments = Omit<CoreMiddlewareArguments, 'elements'> & {
elements: Elements;
};
export type Middleware = Omit<CoreMiddleware, 'fn'> & {
fn(args: MiddlewareArguments): Promisable<MiddlewareReturn>;
};
/**
* Automatically chooses the `placement` which has the most space available.
* @see https://floating-ui.com/docs/autoPlacement
*/
declare const autoPlacement: (options?: Partial<AutoPlacementOptions & DetectOverflowOptions>) => Middleware;
/**
* Shifts the floating element in order to keep it in view when it will overflow
* a clipping boundary.
* @see https://floating-ui.com/docs/shift
*/
declare const shift: (options?: Partial<ShiftOptions & DetectOverflowOptions>) => Middleware;
/**
* Changes the placement of the floating element to one that will fit if the
* initially specified `placement` does not.
* @see https://floating-ui.com/docs/flip
*/
declare const flip: (options?: Partial<FlipOptions & DetectOverflowOptions>) => Middleware;
/**
* Provides data to change the size of the floating element. For instance,
* prevent it from overflowing its clipping boundary or match the width of the
* reference element.
* @see https://floating-ui.com/docs/size
*/
declare const size: (options?: Partial<SizeOptions & DetectOverflowOptions>) => Middleware;
/**
* Positions an inner element of the floating element such that it is centered
* to the reference element.
* @see https://floating-ui.com/docs/arrow
*/
declare const arrow: (options: {
element: Element;
padding?: Padding;
}) => Middleware;
/**
* 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
*/
declare const hide: (options?: Partial<HideOptions & DetectOverflowOptions>) => Middleware;
/**
* Resolves with an object of overflow side offsets that determine how much the
* element is overflowing a given clipping boundary.
* - positive = overflowing the boundary by that number of pixels
* - negative = how many pixels left before it will overflow
* - 0 = lies flush with the boundary
* @see https://floating-ui.com/docs/detectOverflow
*/
declare const detectOverflow: (middlewareArguments: MiddlewareArguments, options?: Partial<DetectOverflowOptions>) => Promise<SideObject>;
export { arrow, autoPlacement, detectOverflow, flip, hide, shift, size };
export { computePosition } from './';
export { autoUpdate, Options as AutoUpdateOptions } from './autoUpdate';
export { platform } from './platform';
export { getOverflowAncestors } from './utils/getOverflowAncestors';
export type { AlignedPlacement, Alignment, Axis, ClientRectObject, ComputePositionReturn, Coords, Dimensions, ElementContext, ElementRects, Length, MiddlewareData, MiddlewareReturn, Padding, Placement, Rect, RootBoundary, Side, SideObject, Strategy, } from '@floating-ui/core';
export { inline, limitShift, offset } from '@floating-ui/core';
@@ -0,0 +1,6 @@
import type { Rect, Strategy } from '@floating-ui/core';
export declare function convertOffsetParentRelativeRectToViewportRelativeRect({ rect, offsetParent, strategy, }: {
rect: Rect;
offsetParent: Element | Window;
strategy: Strategy;
}): Rect;
@@ -0,0 +1,2 @@
import type { ClientRectObject, VirtualElement } from '@floating-ui/core';
export declare function getBoundingClientRect(element: Element | VirtualElement, includeScale?: boolean, isFixedStrategy?: boolean, offsetParent?: Element | Window): ClientRectObject;
@@ -0,0 +1,12 @@
import type { Boundary, Rect, RootBoundary, Strategy } from '@floating-ui/core';
import { Platform, ReferenceElement } from '../types';
type PlatformWithCache = Platform & {
_c: Map<ReferenceElement, Element[]>;
};
export declare function getClippingRect(this: PlatformWithCache, { element, boundary, rootBoundary, strategy, }: {
element: Element;
boundary: Boundary;
rootBoundary: RootBoundary;
strategy: Strategy;
}): Rect;
export {};
@@ -0,0 +1 @@
export declare function getComputedStyle(element: Element): CSSStyleDeclaration;
@@ -0,0 +1,4 @@
import type { Dimensions } from '@floating-ui/core';
export declare function getCssDimensions(element: HTMLElement): Dimensions & {
fallback: boolean;
};
@@ -0,0 +1,2 @@
import type { Dimensions } from '@floating-ui/core';
export declare function getDimensions(element: Element): Dimensions;
@@ -0,0 +1 @@
export declare function getDocumentElement(node: Node | Window): HTMLElement;
@@ -0,0 +1,2 @@
import type { Rect } from '@floating-ui/core';
export declare function getDocumentRect(element: HTMLElement): Rect;
@@ -0,0 +1 @@
export declare function getNearestOverflowAncestor(node: Node): HTMLElement;
@@ -0,0 +1 @@
export declare function getNodeName(node: Node | Window): string;
@@ -0,0 +1,2 @@
import { NodeScroll } from '../types';
export declare function getNodeScroll(element: Element | Window): NodeScroll;
@@ -0,0 +1 @@
export declare function getOffsetParent(element: Element): Element | Window;
@@ -0,0 +1,3 @@
type OverflowAncestors = Array<Element | Window | VisualViewport>;
export declare function getOverflowAncestors(node: Node, list?: OverflowAncestors): OverflowAncestors;
export {};
@@ -0,0 +1 @@
export declare function getParentNode(node: Node): Node;
@@ -0,0 +1,2 @@
import type { Rect, Strategy, VirtualElement } from '@floating-ui/core';
export declare function getRectRelativeToOffsetParent(element: Element | VirtualElement, offsetParent: Element | Window, strategy: Strategy): Rect;
+7
View File
@@ -0,0 +1,7 @@
import type { Coords } from '@floating-ui/core';
import type { VirtualElement } from '../types';
export declare const FALLBACK_SCALE: {
x: number;
y: number;
};
export declare function getScale(element: Element | VirtualElement): Coords;
@@ -0,0 +1,2 @@
import type { Rect, Strategy } from '@floating-ui/core';
export declare function getViewportRect(element: Element, strategy: Strategy): Rect;
@@ -0,0 +1 @@
export declare function getWindowScrollBarX(element: Element): number;
+17
View File
@@ -0,0 +1,17 @@
declare global {
interface Window {
HTMLElement: any;
Element: any;
Node: any;
ShadowRoot: any;
}
}
export declare function isHTMLElement(value: any): value is HTMLElement;
export declare function isElement(value: any): value is Element;
export declare function isNode(value: any): value is Node;
export declare function isShadowRoot(node: Node): node is ShadowRoot;
export declare function isOverflowElement(element: Element): boolean;
export declare function isTableElement(element: Element): boolean;
export declare function isContainingBlock(element: Element): boolean;
export declare function isLayoutViewport(): boolean;
export declare function isLastTraversableNode(node: Node): boolean;
+3
View File
@@ -0,0 +1,3 @@
export declare const min: (...values: number[]) => number;
export declare const max: (...values: number[]) => number;
export declare const round: (x: number) => number;
@@ -0,0 +1,2 @@
import type { VirtualElement } from '../types';
export declare function unwrapElement(element: Element | VirtualElement): Element | undefined;
+1
View File
@@ -0,0 +1 @@
export declare function getUAString(): string;
+1
View File
@@ -0,0 +1 @@
export declare function getWindow(node: Node): Window;
+20
View File
@@ -0,0 +1,20 @@
MIT License
Copyright (c) 2021-present Floating UI contributors
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+4
View File
@@ -0,0 +1,4 @@
# @floating-ui/utils
Utility functions shared across Floating UI packages. You may use these
functions in your own projects, but are subject to breaking changes.
@@ -0,0 +1,103 @@
export declare type AlignedPlacement = `${Side}-${Alignment}`;
export declare type Alignment = 'start' | 'end';
export declare const alignments: Alignment[];
export declare type Axis = 'x' | 'y';
export declare function clamp(start: number, value: number, end: number): number;
export declare type ClientRectObject = Prettify<Rect & SideObject>;
export declare type Coords = {
[key in Axis]: number;
};
export declare const createCoords: (v: number) => {
x: number;
y: number;
};
export declare type Dimensions = {
[key in Length]: number;
};
export declare interface ElementRects {
reference: Rect;
floating: Rect;
}
export declare function evaluate<T, P>(value: T | ((param: P) => T), param: P): T;
export declare function expandPaddingObject(padding: Partial<SideObject>): SideObject;
export declare const floor: (x: number) => number;
export declare function getAlignment(placement: Placement): Alignment | undefined;
export declare function getAlignmentAxis(placement: Placement): Axis;
export declare function getAlignmentSides(placement: Placement, rects: ElementRects, rtl?: boolean): [Side, Side];
export declare function getAxisLength(axis: Axis): Length;
export declare function getExpandedPlacements(placement: Placement): Array<Placement>;
export declare function getOppositeAlignmentPlacement<T extends string>(placement: T): T;
export declare function getOppositeAxis(axis: Axis): Axis;
export declare function getOppositeAxisPlacements(placement: Placement, flipAlignment: boolean, direction: 'none' | Alignment, rtl?: boolean): Placement[];
export declare function getOppositePlacement<T extends string>(placement: T): T;
export declare function getPaddingObject(padding: Padding): SideObject;
export declare function getSide(placement: Placement): Side;
export declare function getSideAxis(placement: Placement): Axis;
export declare type Length = 'width' | 'height';
export declare const max: (...values: number[]) => number;
export declare const min: (...values: number[]) => number;
export declare type Padding = number | Prettify<Partial<SideObject>>;
export declare type Placement = Prettify<Side | AlignedPlacement>;
export declare const placements: Placement[];
declare type Prettify<T> = {
[K in keyof T]: T[K];
} & {};
export declare type Rect = Prettify<Coords & Dimensions>;
export declare function rectToClientRect(rect: Rect): ClientRectObject;
export declare const round: (x: number) => number;
export declare type Side = 'top' | 'right' | 'bottom' | 'left';
export declare type SideObject = {
[key in Side]: number;
};
export declare const sides: Side[];
export declare type Strategy = 'absolute' | 'fixed';
/**
* Custom positioning reference element.
* @see https://floating-ui.com/docs/virtual-elements
*/
export declare interface VirtualElement {
getBoundingClientRect(): ClientRectObject;
getClientRects?(): Array<ClientRectObject>;
contextElement?: any;
}
export { }
@@ -0,0 +1,103 @@
export declare type AlignedPlacement = `${Side}-${Alignment}`;
export declare type Alignment = 'start' | 'end';
export declare const alignments: Alignment[];
export declare type Axis = 'x' | 'y';
export declare function clamp(start: number, value: number, end: number): number;
export declare type ClientRectObject = Prettify<Rect & SideObject>;
export declare type Coords = {
[key in Axis]: number;
};
export declare const createCoords: (v: number) => {
x: number;
y: number;
};
export declare type Dimensions = {
[key in Length]: number;
};
export declare interface ElementRects {
reference: Rect;
floating: Rect;
}
export declare function evaluate<T, P>(value: T | ((param: P) => T), param: P): T;
export declare function expandPaddingObject(padding: Partial<SideObject>): SideObject;
export declare const floor: (x: number) => number;
export declare function getAlignment(placement: Placement): Alignment | undefined;
export declare function getAlignmentAxis(placement: Placement): Axis;
export declare function getAlignmentSides(placement: Placement, rects: ElementRects, rtl?: boolean): [Side, Side];
export declare function getAxisLength(axis: Axis): Length;
export declare function getExpandedPlacements(placement: Placement): Array<Placement>;
export declare function getOppositeAlignmentPlacement<T extends string>(placement: T): T;
export declare function getOppositeAxis(axis: Axis): Axis;
export declare function getOppositeAxisPlacements(placement: Placement, flipAlignment: boolean, direction: 'none' | Alignment, rtl?: boolean): Placement[];
export declare function getOppositePlacement<T extends string>(placement: T): T;
export declare function getPaddingObject(padding: Padding): SideObject;
export declare function getSide(placement: Placement): Side;
export declare function getSideAxis(placement: Placement): Axis;
export declare type Length = 'width' | 'height';
export declare const max: (...values: number[]) => number;
export declare const min: (...values: number[]) => number;
export declare type Padding = number | Prettify<Partial<SideObject>>;
export declare type Placement = Prettify<Side | AlignedPlacement>;
export declare const placements: Placement[];
declare type Prettify<T> = {
[K in keyof T]: T[K];
} & {};
export declare type Rect = Prettify<Coords & Dimensions>;
export declare function rectToClientRect(rect: Rect): ClientRectObject;
export declare const round: (x: number) => number;
export declare type Side = 'top' | 'right' | 'bottom' | 'left';
export declare type SideObject = {
[key in Side]: number;
};
export declare const sides: Side[];
export declare type Strategy = 'absolute' | 'fixed';
/**
* Custom positioning reference element.
* @see https://floating-ui.com/docs/virtual-elements
*/
export declare interface VirtualElement {
getBoundingClientRect(): ClientRectObject;
getClientRects?(): Array<ClientRectObject>;
contextElement?: any;
}
export { }
@@ -0,0 +1,47 @@
declare function getComputedStyle_2(element: Element): CSSStyleDeclaration;
export { getComputedStyle_2 as getComputedStyle }
export declare function getContainingBlock(element: Element): HTMLElement | null;
export declare function getDocumentElement(node: Node | Window): HTMLElement;
export declare function getFrameElement(win: Window): Element | null;
export declare function getNearestOverflowAncestor(node: Node): HTMLElement;
export declare function getNodeName(node: Node | Window): string;
export declare function getNodeScroll(element: Element | Window): {
scrollLeft: number;
scrollTop: number;
};
export declare function getOverflowAncestors(node: Node, list?: OverflowAncestors, traverseIframes?: boolean): OverflowAncestors;
export declare function getParentNode(node: Node): Node;
export declare function getWindow(node: any): typeof window;
export declare function isContainingBlock(elementOrCss: Element | CSSStyleDeclaration): boolean;
export declare function isElement(value: unknown): value is Element;
export declare function isHTMLElement(value: unknown): value is HTMLElement;
export declare function isLastTraversableNode(node: Node): boolean;
export declare function isNode(value: unknown): value is Node;
export declare function isOverflowElement(element: Element): boolean;
export declare function isShadowRoot(value: unknown): value is ShadowRoot;
export declare function isTableElement(element: Element): boolean;
export declare function isTopLayer(element: Element): boolean;
export declare function isWebKit(): boolean;
declare type OverflowAncestors = Array<Element | Window | VisualViewport>;
export { }
@@ -0,0 +1,47 @@
declare function getComputedStyle_2(element: Element): CSSStyleDeclaration;
export { getComputedStyle_2 as getComputedStyle }
export declare function getContainingBlock(element: Element): HTMLElement | null;
export declare function getDocumentElement(node: Node | Window): HTMLElement;
export declare function getFrameElement(win: Window): Element | null;
export declare function getNearestOverflowAncestor(node: Node): HTMLElement;
export declare function getNodeName(node: Node | Window): string;
export declare function getNodeScroll(element: Element | Window): {
scrollLeft: number;
scrollTop: number;
};
export declare function getOverflowAncestors(node: Node, list?: OverflowAncestors, traverseIframes?: boolean): OverflowAncestors;
export declare function getParentNode(node: Node): Node;
export declare function getWindow(node: any): typeof window;
export declare function isContainingBlock(elementOrCss: Element | CSSStyleDeclaration): boolean;
export declare function isElement(value: unknown): value is Element;
export declare function isHTMLElement(value: unknown): value is HTMLElement;
export declare function isLastTraversableNode(node: Node): boolean;
export declare function isNode(value: unknown): value is Node;
export declare function isOverflowElement(element: Element): boolean;
export declare function isShadowRoot(value: unknown): value is ShadowRoot;
export declare function isTableElement(element: Element): boolean;
export declare function isTopLayer(element: Element): boolean;
export declare function isWebKit(): boolean;
declare type OverflowAncestors = Array<Element | Window | VisualViewport>;
export { }
@@ -0,0 +1,165 @@
function hasWindow() {
return typeof window !== 'undefined';
}
function getNodeName(node) {
if (isNode(node)) {
return (node.nodeName || '').toLowerCase();
}
// Mocked nodes in testing environments may not be instances of Node. By
// returning `#document` an infinite loop won't occur.
// https://github.com/floating-ui/floating-ui/issues/2317
return '#document';
}
function getWindow(node) {
var _node$ownerDocument;
return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
}
function getDocumentElement(node) {
var _ref;
return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
}
function isNode(value) {
if (!hasWindow()) {
return false;
}
return value instanceof Node || value instanceof getWindow(value).Node;
}
function isElement(value) {
if (!hasWindow()) {
return false;
}
return value instanceof Element || value instanceof getWindow(value).Element;
}
function isHTMLElement(value) {
if (!hasWindow()) {
return false;
}
return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
}
function isShadowRoot(value) {
if (!hasWindow() || typeof ShadowRoot === 'undefined') {
return false;
}
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
}
function isOverflowElement(element) {
const {
overflow,
overflowX,
overflowY,
display
} = getComputedStyle(element);
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && display !== 'inline' && display !== 'contents';
}
function isTableElement(element) {
return /^(table|td|th)$/.test(getNodeName(element));
}
function isTopLayer(element) {
try {
if (element.matches(':popover-open')) {
return true;
}
} catch (_e) {
// no-op
}
try {
return element.matches(':modal');
} catch (_e) {
return false;
}
}
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 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 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);
while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
if (isContainingBlock(currentNode)) {
return currentNode;
} else if (isTopLayer(currentNode)) {
return null;
}
currentNode = getParentNode(currentNode);
}
return null;
}
function isWebKit() {
if (isWebKitValue == null) {
isWebKitValue = typeof CSS !== 'undefined' && CSS.supports && CSS.supports('-webkit-backdrop-filter', 'none');
}
return isWebKitValue;
}
function isLastTraversableNode(node) {
return /^(html|body|#document)$/.test(getNodeName(node));
}
function getComputedStyle(element) {
return getWindow(element).getComputedStyle(element);
}
function getNodeScroll(element) {
if (isElement(element)) {
return {
scrollLeft: element.scrollLeft,
scrollTop: element.scrollTop
};
}
return {
scrollLeft: element.scrollX,
scrollTop: element.scrollY
};
}
function getParentNode(node) {
if (getNodeName(node) === 'html') {
return node;
}
const result =
// Step into the shadow DOM of the parent of a slotted node.
node.assignedSlot ||
// DOM Element detected.
node.parentNode ||
// ShadowRoot detected.
isShadowRoot(node) && node.host ||
// Fallback.
getDocumentElement(node);
return isShadowRoot(result) ? result.host : result;
}
function getNearestOverflowAncestor(node) {
const parentNode = getParentNode(node);
if (isLastTraversableNode(parentNode)) {
return node.ownerDocument ? node.ownerDocument.body : node.body;
}
if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
return parentNode;
}
return getNearestOverflowAncestor(parentNode);
}
function getOverflowAncestors(node, list, traverseIframes) {
var _node$ownerDocument2;
if (list === void 0) {
list = [];
}
if (traverseIframes === void 0) {
traverseIframes = true;
}
const scrollableAncestor = getNearestOverflowAncestor(node);
const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
const win = getWindow(scrollableAncestor);
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));
}
}
function getFrameElement(win) {
return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
}
export { getComputedStyle, getContainingBlock, getDocumentElement, getFrameElement, getNearestOverflowAncestor, getNodeName, getNodeScroll, getOverflowAncestors, getParentNode, getWindow, isContainingBlock, isElement, isHTMLElement, isLastTraversableNode, isNode, isOverflowElement, isShadowRoot, isTableElement, isTopLayer, isWebKit };
@@ -0,0 +1,165 @@
function hasWindow() {
return typeof window !== 'undefined';
}
function getNodeName(node) {
if (isNode(node)) {
return (node.nodeName || '').toLowerCase();
}
// Mocked nodes in testing environments may not be instances of Node. By
// returning `#document` an infinite loop won't occur.
// https://github.com/floating-ui/floating-ui/issues/2317
return '#document';
}
function getWindow(node) {
var _node$ownerDocument;
return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
}
function getDocumentElement(node) {
var _ref;
return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
}
function isNode(value) {
if (!hasWindow()) {
return false;
}
return value instanceof Node || value instanceof getWindow(value).Node;
}
function isElement(value) {
if (!hasWindow()) {
return false;
}
return value instanceof Element || value instanceof getWindow(value).Element;
}
function isHTMLElement(value) {
if (!hasWindow()) {
return false;
}
return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
}
function isShadowRoot(value) {
if (!hasWindow() || typeof ShadowRoot === 'undefined') {
return false;
}
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
}
function isOverflowElement(element) {
const {
overflow,
overflowX,
overflowY,
display
} = getComputedStyle(element);
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && display !== 'inline' && display !== 'contents';
}
function isTableElement(element) {
return /^(table|td|th)$/.test(getNodeName(element));
}
function isTopLayer(element) {
try {
if (element.matches(':popover-open')) {
return true;
}
} catch (_e) {
// no-op
}
try {
return element.matches(':modal');
} catch (_e) {
return false;
}
}
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 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 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);
while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
if (isContainingBlock(currentNode)) {
return currentNode;
} else if (isTopLayer(currentNode)) {
return null;
}
currentNode = getParentNode(currentNode);
}
return null;
}
function isWebKit() {
if (isWebKitValue == null) {
isWebKitValue = typeof CSS !== 'undefined' && CSS.supports && CSS.supports('-webkit-backdrop-filter', 'none');
}
return isWebKitValue;
}
function isLastTraversableNode(node) {
return /^(html|body|#document)$/.test(getNodeName(node));
}
function getComputedStyle(element) {
return getWindow(element).getComputedStyle(element);
}
function getNodeScroll(element) {
if (isElement(element)) {
return {
scrollLeft: element.scrollLeft,
scrollTop: element.scrollTop
};
}
return {
scrollLeft: element.scrollX,
scrollTop: element.scrollY
};
}
function getParentNode(node) {
if (getNodeName(node) === 'html') {
return node;
}
const result =
// Step into the shadow DOM of the parent of a slotted node.
node.assignedSlot ||
// DOM Element detected.
node.parentNode ||
// ShadowRoot detected.
isShadowRoot(node) && node.host ||
// Fallback.
getDocumentElement(node);
return isShadowRoot(result) ? result.host : result;
}
function getNearestOverflowAncestor(node) {
const parentNode = getParentNode(node);
if (isLastTraversableNode(parentNode)) {
return node.ownerDocument ? node.ownerDocument.body : node.body;
}
if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
return parentNode;
}
return getNearestOverflowAncestor(parentNode);
}
function getOverflowAncestors(node, list, traverseIframes) {
var _node$ownerDocument2;
if (list === void 0) {
list = [];
}
if (traverseIframes === void 0) {
traverseIframes = true;
}
const scrollableAncestor = getNearestOverflowAncestor(node);
const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
const win = getWindow(scrollableAncestor);
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));
}
}
function getFrameElement(win) {
return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
}
export { getComputedStyle, getContainingBlock, getDocumentElement, getFrameElement, getNearestOverflowAncestor, getNodeName, getNodeScroll, getOverflowAncestors, getParentNode, getWindow, isContainingBlock, isElement, isHTMLElement, isLastTraversableNode, isNode, isOverflowElement, isShadowRoot, isTableElement, isTopLayer, isWebKit };
@@ -0,0 +1,192 @@
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.FloatingUIUtilsDOM = {}));
})(this, (function (exports) { 'use strict';
function hasWindow() {
return typeof window !== 'undefined';
}
function getNodeName(node) {
if (isNode(node)) {
return (node.nodeName || '').toLowerCase();
}
// Mocked nodes in testing environments may not be instances of Node. By
// returning `#document` an infinite loop won't occur.
// https://github.com/floating-ui/floating-ui/issues/2317
return '#document';
}
function getWindow(node) {
var _node$ownerDocument;
return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
}
function getDocumentElement(node) {
var _ref;
return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
}
function isNode(value) {
if (!hasWindow()) {
return false;
}
return value instanceof Node || value instanceof getWindow(value).Node;
}
function isElement(value) {
if (!hasWindow()) {
return false;
}
return value instanceof Element || value instanceof getWindow(value).Element;
}
function isHTMLElement(value) {
if (!hasWindow()) {
return false;
}
return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
}
function isShadowRoot(value) {
if (!hasWindow() || typeof ShadowRoot === 'undefined') {
return false;
}
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
}
function isOverflowElement(element) {
const {
overflow,
overflowX,
overflowY,
display
} = getComputedStyle(element);
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && display !== 'inline' && display !== 'contents';
}
function isTableElement(element) {
return /^(table|td|th)$/.test(getNodeName(element));
}
function isTopLayer(element) {
try {
if (element.matches(':popover-open')) {
return true;
}
} catch (_e) {
// no-op
}
try {
return element.matches(':modal');
} catch (_e) {
return false;
}
}
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 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 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);
while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
if (isContainingBlock(currentNode)) {
return currentNode;
} else if (isTopLayer(currentNode)) {
return null;
}
currentNode = getParentNode(currentNode);
}
return null;
}
function isWebKit() {
if (isWebKitValue == null) {
isWebKitValue = typeof CSS !== 'undefined' && CSS.supports && CSS.supports('-webkit-backdrop-filter', 'none');
}
return isWebKitValue;
}
function isLastTraversableNode(node) {
return /^(html|body|#document)$/.test(getNodeName(node));
}
function getComputedStyle(element) {
return getWindow(element).getComputedStyle(element);
}
function getNodeScroll(element) {
if (isElement(element)) {
return {
scrollLeft: element.scrollLeft,
scrollTop: element.scrollTop
};
}
return {
scrollLeft: element.scrollX,
scrollTop: element.scrollY
};
}
function getParentNode(node) {
if (getNodeName(node) === 'html') {
return node;
}
const result =
// Step into the shadow DOM of the parent of a slotted node.
node.assignedSlot ||
// DOM Element detected.
node.parentNode ||
// ShadowRoot detected.
isShadowRoot(node) && node.host ||
// Fallback.
getDocumentElement(node);
return isShadowRoot(result) ? result.host : result;
}
function getNearestOverflowAncestor(node) {
const parentNode = getParentNode(node);
if (isLastTraversableNode(parentNode)) {
return node.ownerDocument ? node.ownerDocument.body : node.body;
}
if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
return parentNode;
}
return getNearestOverflowAncestor(parentNode);
}
function getOverflowAncestors(node, list, traverseIframes) {
var _node$ownerDocument2;
if (list === void 0) {
list = [];
}
if (traverseIframes === void 0) {
traverseIframes = true;
}
const scrollableAncestor = getNearestOverflowAncestor(node);
const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
const win = getWindow(scrollableAncestor);
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));
}
}
function getFrameElement(win) {
return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
}
exports.getComputedStyle = getComputedStyle;
exports.getContainingBlock = getContainingBlock;
exports.getDocumentElement = getDocumentElement;
exports.getFrameElement = getFrameElement;
exports.getNearestOverflowAncestor = getNearestOverflowAncestor;
exports.getNodeName = getNodeName;
exports.getNodeScroll = getNodeScroll;
exports.getOverflowAncestors = getOverflowAncestors;
exports.getParentNode = getParentNode;
exports.getWindow = getWindow;
exports.isContainingBlock = isContainingBlock;
exports.isElement = isElement;
exports.isHTMLElement = isHTMLElement;
exports.isLastTraversableNode = isLastTraversableNode;
exports.isNode = isNode;
exports.isOverflowElement = isOverflowElement;
exports.isShadowRoot = isShadowRoot;
exports.isTableElement = isTableElement;
exports.isTopLayer = isTopLayer;
exports.isWebKit = isWebKit;
}));
@@ -0,0 +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).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}));
@@ -0,0 +1,136 @@
/**
* Custom positioning reference element.
* @see https://floating-ui.com/docs/virtual-elements
*/
const sides = ['top', 'right', 'bottom', 'left'];
const alignments = ['start', 'end'];
const placements = /*#__PURE__*/sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
const min = Math.min;
const max = Math.max;
const round = Math.round;
const floor = Math.floor;
const createCoords = v => ({
x: v,
y: v
});
const oppositeSideMap = {
left: 'right',
right: 'left',
bottom: 'top',
top: 'bottom'
};
function clamp(start, value, end) {
return max(start, min(value, end));
}
function evaluate(value, param) {
return typeof value === 'function' ? value(param) : value;
}
function getSide(placement) {
return placement.split('-')[0];
}
function getAlignment(placement) {
return placement.split('-')[1];
}
function getOppositeAxis(axis) {
return axis === 'x' ? 'y' : 'x';
}
function getAxisLength(axis) {
return axis === 'y' ? 'height' : 'width';
}
function getSideAxis(placement) {
const firstChar = placement[0];
return firstChar === 't' || firstChar === 'b' ? 'y' : 'x';
}
function getAlignmentAxis(placement) {
return getOppositeAxis(getSideAxis(placement));
}
function getAlignmentSides(placement, rects, rtl) {
if (rtl === void 0) {
rtl = false;
}
const alignment = getAlignment(placement);
const alignmentAxis = getAlignmentAxis(placement);
const length = getAxisLength(alignmentAxis);
let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
if (rects.reference[length] > rects.floating[length]) {
mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
}
return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
}
function getExpandedPlacements(placement) {
const oppositePlacement = getOppositePlacement(placement);
return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
}
function getOppositeAlignmentPlacement(placement) {
return placement.includes('start') ? placement.replace('start', 'end') : placement.replace('end', 'start');
}
const lrPlacement = ['left', 'right'];
const rlPlacement = ['right', 'left'];
const tbPlacement = ['top', 'bottom'];
const btPlacement = ['bottom', 'top'];
function getSideList(side, isStart, rtl) {
switch (side) {
case 'top':
case 'bottom':
if (rtl) return isStart ? rlPlacement : lrPlacement;
return isStart ? lrPlacement : rlPlacement;
case 'left':
case 'right':
return isStart ? tbPlacement : btPlacement;
default:
return [];
}
}
function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
const alignment = getAlignment(placement);
let list = getSideList(getSide(placement), direction === 'start', rtl);
if (alignment) {
list = list.map(side => side + "-" + alignment);
if (flipAlignment) {
list = list.concat(list.map(getOppositeAlignmentPlacement));
}
}
return list;
}
function getOppositePlacement(placement) {
const side = getSide(placement);
return oppositeSideMap[side] + placement.slice(side.length);
}
function expandPaddingObject(padding) {
return {
top: 0,
right: 0,
bottom: 0,
left: 0,
...padding
};
}
function getPaddingObject(padding) {
return typeof padding !== 'number' ? expandPaddingObject(padding) : {
top: padding,
right: padding,
bottom: padding,
left: padding
};
}
function rectToClientRect(rect) {
const {
x,
y,
width,
height
} = rect;
return {
width,
height,
top: y,
left: x,
right: x + width,
bottom: y + height,
x,
y
};
}
export { alignments, clamp, createCoords, evaluate, expandPaddingObject, floor, getAlignment, getAlignmentAxis, getAlignmentSides, getAxisLength, getExpandedPlacements, getOppositeAlignmentPlacement, getOppositeAxis, getOppositeAxisPlacements, getOppositePlacement, getPaddingObject, getSide, getSideAxis, max, min, placements, rectToClientRect, round, sides };
@@ -0,0 +1,136 @@
/**
* Custom positioning reference element.
* @see https://floating-ui.com/docs/virtual-elements
*/
const sides = ['top', 'right', 'bottom', 'left'];
const alignments = ['start', 'end'];
const placements = /*#__PURE__*/sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
const min = Math.min;
const max = Math.max;
const round = Math.round;
const floor = Math.floor;
const createCoords = v => ({
x: v,
y: v
});
const oppositeSideMap = {
left: 'right',
right: 'left',
bottom: 'top',
top: 'bottom'
};
function clamp(start, value, end) {
return max(start, min(value, end));
}
function evaluate(value, param) {
return typeof value === 'function' ? value(param) : value;
}
function getSide(placement) {
return placement.split('-')[0];
}
function getAlignment(placement) {
return placement.split('-')[1];
}
function getOppositeAxis(axis) {
return axis === 'x' ? 'y' : 'x';
}
function getAxisLength(axis) {
return axis === 'y' ? 'height' : 'width';
}
function getSideAxis(placement) {
const firstChar = placement[0];
return firstChar === 't' || firstChar === 'b' ? 'y' : 'x';
}
function getAlignmentAxis(placement) {
return getOppositeAxis(getSideAxis(placement));
}
function getAlignmentSides(placement, rects, rtl) {
if (rtl === void 0) {
rtl = false;
}
const alignment = getAlignment(placement);
const alignmentAxis = getAlignmentAxis(placement);
const length = getAxisLength(alignmentAxis);
let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
if (rects.reference[length] > rects.floating[length]) {
mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
}
return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
}
function getExpandedPlacements(placement) {
const oppositePlacement = getOppositePlacement(placement);
return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
}
function getOppositeAlignmentPlacement(placement) {
return placement.includes('start') ? placement.replace('start', 'end') : placement.replace('end', 'start');
}
const lrPlacement = ['left', 'right'];
const rlPlacement = ['right', 'left'];
const tbPlacement = ['top', 'bottom'];
const btPlacement = ['bottom', 'top'];
function getSideList(side, isStart, rtl) {
switch (side) {
case 'top':
case 'bottom':
if (rtl) return isStart ? rlPlacement : lrPlacement;
return isStart ? lrPlacement : rlPlacement;
case 'left':
case 'right':
return isStart ? tbPlacement : btPlacement;
default:
return [];
}
}
function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
const alignment = getAlignment(placement);
let list = getSideList(getSide(placement), direction === 'start', rtl);
if (alignment) {
list = list.map(side => side + "-" + alignment);
if (flipAlignment) {
list = list.concat(list.map(getOppositeAlignmentPlacement));
}
}
return list;
}
function getOppositePlacement(placement) {
const side = getSide(placement);
return oppositeSideMap[side] + placement.slice(side.length);
}
function expandPaddingObject(padding) {
return {
top: 0,
right: 0,
bottom: 0,
left: 0,
...padding
};
}
function getPaddingObject(padding) {
return typeof padding !== 'number' ? expandPaddingObject(padding) : {
top: padding,
right: padding,
bottom: padding,
left: padding
};
}
function rectToClientRect(rect) {
const {
x,
y,
width,
height
} = rect;
return {
width,
height,
top: y,
left: x,
right: x + width,
bottom: y + height,
x,
y
};
}
export { alignments, clamp, createCoords, evaluate, expandPaddingObject, floor, getAlignment, getAlignmentAxis, getAlignmentSides, getAxisLength, getExpandedPlacements, getOppositeAlignmentPlacement, getOppositeAxis, getOppositeAxisPlacements, getOppositePlacement, getPaddingObject, getSide, getSideAxis, max, min, placements, rectToClientRect, round, sides };
@@ -0,0 +1,167 @@
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.FloatingUIUtils = {}));
})(this, (function (exports) { 'use strict';
/**
* Custom positioning reference element.
* @see https://floating-ui.com/docs/virtual-elements
*/
const sides = ['top', 'right', 'bottom', 'left'];
const alignments = ['start', 'end'];
const placements = /*#__PURE__*/sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
const min = Math.min;
const max = Math.max;
const round = Math.round;
const floor = Math.floor;
const createCoords = v => ({
x: v,
y: v
});
const oppositeSideMap = {
left: 'right',
right: 'left',
bottom: 'top',
top: 'bottom'
};
function clamp(start, value, end) {
return max(start, min(value, end));
}
function evaluate(value, param) {
return typeof value === 'function' ? value(param) : value;
}
function getSide(placement) {
return placement.split('-')[0];
}
function getAlignment(placement) {
return placement.split('-')[1];
}
function getOppositeAxis(axis) {
return axis === 'x' ? 'y' : 'x';
}
function getAxisLength(axis) {
return axis === 'y' ? 'height' : 'width';
}
function getSideAxis(placement) {
const firstChar = placement[0];
return firstChar === 't' || firstChar === 'b' ? 'y' : 'x';
}
function getAlignmentAxis(placement) {
return getOppositeAxis(getSideAxis(placement));
}
function getAlignmentSides(placement, rects, rtl) {
if (rtl === void 0) {
rtl = false;
}
const alignment = getAlignment(placement);
const alignmentAxis = getAlignmentAxis(placement);
const length = getAxisLength(alignmentAxis);
let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
if (rects.reference[length] > rects.floating[length]) {
mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
}
return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
}
function getExpandedPlacements(placement) {
const oppositePlacement = getOppositePlacement(placement);
return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
}
function getOppositeAlignmentPlacement(placement) {
return placement.includes('start') ? placement.replace('start', 'end') : placement.replace('end', 'start');
}
const lrPlacement = ['left', 'right'];
const rlPlacement = ['right', 'left'];
const tbPlacement = ['top', 'bottom'];
const btPlacement = ['bottom', 'top'];
function getSideList(side, isStart, rtl) {
switch (side) {
case 'top':
case 'bottom':
if (rtl) return isStart ? rlPlacement : lrPlacement;
return isStart ? lrPlacement : rlPlacement;
case 'left':
case 'right':
return isStart ? tbPlacement : btPlacement;
default:
return [];
}
}
function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
const alignment = getAlignment(placement);
let list = getSideList(getSide(placement), direction === 'start', rtl);
if (alignment) {
list = list.map(side => side + "-" + alignment);
if (flipAlignment) {
list = list.concat(list.map(getOppositeAlignmentPlacement));
}
}
return list;
}
function getOppositePlacement(placement) {
const side = getSide(placement);
return oppositeSideMap[side] + placement.slice(side.length);
}
function expandPaddingObject(padding) {
return {
top: 0,
right: 0,
bottom: 0,
left: 0,
...padding
};
}
function getPaddingObject(padding) {
return typeof padding !== 'number' ? expandPaddingObject(padding) : {
top: padding,
right: padding,
bottom: padding,
left: padding
};
}
function rectToClientRect(rect) {
const {
x,
y,
width,
height
} = rect;
return {
width,
height,
top: y,
left: x,
right: x + width,
bottom: y + height,
x,
y
};
}
exports.alignments = alignments;
exports.clamp = clamp;
exports.createCoords = createCoords;
exports.evaluate = evaluate;
exports.expandPaddingObject = expandPaddingObject;
exports.floor = floor;
exports.getAlignment = getAlignment;
exports.getAlignmentAxis = getAlignmentAxis;
exports.getAlignmentSides = getAlignmentSides;
exports.getAxisLength = getAxisLength;
exports.getExpandedPlacements = getExpandedPlacements;
exports.getOppositeAlignmentPlacement = getOppositeAlignmentPlacement;
exports.getOppositeAxis = getOppositeAxis;
exports.getOppositeAxisPlacements = getOppositeAxisPlacements;
exports.getOppositePlacement = getOppositePlacement;
exports.getPaddingObject = getPaddingObject;
exports.getSide = getSide;
exports.getSideAxis = getSideAxis;
exports.max = max;
exports.min = min;
exports.placements = placements;
exports.rectToClientRect = rectToClientRect;
exports.round = round;
exports.sides = sides;
}));
@@ -0,0 +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,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}));
@@ -0,0 +1,47 @@
declare function getComputedStyle_2(element: Element): CSSStyleDeclaration;
export { getComputedStyle_2 as getComputedStyle }
export declare function getContainingBlock(element: Element): HTMLElement | null;
export declare function getDocumentElement(node: Node | Window): HTMLElement;
export declare function getFrameElement(win: Window): Element | null;
export declare function getNearestOverflowAncestor(node: Node): HTMLElement;
export declare function getNodeName(node: Node | Window): string;
export declare function getNodeScroll(element: Element | Window): {
scrollLeft: number;
scrollTop: number;
};
export declare function getOverflowAncestors(node: Node, list?: OverflowAncestors, traverseIframes?: boolean): OverflowAncestors;
export declare function getParentNode(node: Node): Node;
export declare function getWindow(node: any): typeof window;
export declare function isContainingBlock(elementOrCss: Element | CSSStyleDeclaration): boolean;
export declare function isElement(value: unknown): value is Element;
export declare function isHTMLElement(value: unknown): value is HTMLElement;
export declare function isLastTraversableNode(node: Node): boolean;
export declare function isNode(value: unknown): value is Node;
export declare function isOverflowElement(element: Element): boolean;
export declare function isShadowRoot(value: unknown): value is ShadowRoot;
export declare function isTableElement(element: Element): boolean;
export declare function isTopLayer(element: Element): boolean;
export declare function isWebKit(): boolean;
declare type OverflowAncestors = Array<Element | Window | VisualViewport>;
export { }
@@ -0,0 +1,165 @@
function hasWindow() {
return typeof window !== 'undefined';
}
function getNodeName(node) {
if (isNode(node)) {
return (node.nodeName || '').toLowerCase();
}
// Mocked nodes in testing environments may not be instances of Node. By
// returning `#document` an infinite loop won't occur.
// https://github.com/floating-ui/floating-ui/issues/2317
return '#document';
}
function getWindow(node) {
var _node$ownerDocument;
return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
}
function getDocumentElement(node) {
var _ref;
return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
}
function isNode(value) {
if (!hasWindow()) {
return false;
}
return value instanceof Node || value instanceof getWindow(value).Node;
}
function isElement(value) {
if (!hasWindow()) {
return false;
}
return value instanceof Element || value instanceof getWindow(value).Element;
}
function isHTMLElement(value) {
if (!hasWindow()) {
return false;
}
return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
}
function isShadowRoot(value) {
if (!hasWindow() || typeof ShadowRoot === 'undefined') {
return false;
}
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
}
function isOverflowElement(element) {
const {
overflow,
overflowX,
overflowY,
display
} = getComputedStyle(element);
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && display !== 'inline' && display !== 'contents';
}
function isTableElement(element) {
return /^(table|td|th)$/.test(getNodeName(element));
}
function isTopLayer(element) {
try {
if (element.matches(':popover-open')) {
return true;
}
} catch (_e) {
// no-op
}
try {
return element.matches(':modal');
} catch (_e) {
return false;
}
}
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 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 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);
while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
if (isContainingBlock(currentNode)) {
return currentNode;
} else if (isTopLayer(currentNode)) {
return null;
}
currentNode = getParentNode(currentNode);
}
return null;
}
function isWebKit() {
if (isWebKitValue == null) {
isWebKitValue = typeof CSS !== 'undefined' && CSS.supports && CSS.supports('-webkit-backdrop-filter', 'none');
}
return isWebKitValue;
}
function isLastTraversableNode(node) {
return /^(html|body|#document)$/.test(getNodeName(node));
}
function getComputedStyle(element) {
return getWindow(element).getComputedStyle(element);
}
function getNodeScroll(element) {
if (isElement(element)) {
return {
scrollLeft: element.scrollLeft,
scrollTop: element.scrollTop
};
}
return {
scrollLeft: element.scrollX,
scrollTop: element.scrollY
};
}
function getParentNode(node) {
if (getNodeName(node) === 'html') {
return node;
}
const result =
// Step into the shadow DOM of the parent of a slotted node.
node.assignedSlot ||
// DOM Element detected.
node.parentNode ||
// ShadowRoot detected.
isShadowRoot(node) && node.host ||
// Fallback.
getDocumentElement(node);
return isShadowRoot(result) ? result.host : result;
}
function getNearestOverflowAncestor(node) {
const parentNode = getParentNode(node);
if (isLastTraversableNode(parentNode)) {
return node.ownerDocument ? node.ownerDocument.body : node.body;
}
if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
return parentNode;
}
return getNearestOverflowAncestor(parentNode);
}
function getOverflowAncestors(node, list, traverseIframes) {
var _node$ownerDocument2;
if (list === void 0) {
list = [];
}
if (traverseIframes === void 0) {
traverseIframes = true;
}
const scrollableAncestor = getNearestOverflowAncestor(node);
const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
const win = getWindow(scrollableAncestor);
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));
}
}
function getFrameElement(win) {
return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
}
export { getComputedStyle, getContainingBlock, getDocumentElement, getFrameElement, getNearestOverflowAncestor, getNodeName, getNodeScroll, getOverflowAncestors, getParentNode, getWindow, isContainingBlock, isElement, isHTMLElement, isLastTraversableNode, isNode, isOverflowElement, isShadowRoot, isTableElement, isTopLayer, isWebKit };
@@ -0,0 +1,192 @@
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
typeof define === 'function' && define.amd ? define(['exports'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.FloatingUIUtilsDOM = {}));
})(this, (function (exports) { 'use strict';
function hasWindow() {
return typeof window !== 'undefined';
}
function getNodeName(node) {
if (isNode(node)) {
return (node.nodeName || '').toLowerCase();
}
// Mocked nodes in testing environments may not be instances of Node. By
// returning `#document` an infinite loop won't occur.
// https://github.com/floating-ui/floating-ui/issues/2317
return '#document';
}
function getWindow(node) {
var _node$ownerDocument;
return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
}
function getDocumentElement(node) {
var _ref;
return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
}
function isNode(value) {
if (!hasWindow()) {
return false;
}
return value instanceof Node || value instanceof getWindow(value).Node;
}
function isElement(value) {
if (!hasWindow()) {
return false;
}
return value instanceof Element || value instanceof getWindow(value).Element;
}
function isHTMLElement(value) {
if (!hasWindow()) {
return false;
}
return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
}
function isShadowRoot(value) {
if (!hasWindow() || typeof ShadowRoot === 'undefined') {
return false;
}
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
}
function isOverflowElement(element) {
const {
overflow,
overflowX,
overflowY,
display
} = getComputedStyle(element);
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && display !== 'inline' && display !== 'contents';
}
function isTableElement(element) {
return /^(table|td|th)$/.test(getNodeName(element));
}
function isTopLayer(element) {
try {
if (element.matches(':popover-open')) {
return true;
}
} catch (_e) {
// no-op
}
try {
return element.matches(':modal');
} catch (_e) {
return false;
}
}
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 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 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);
while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
if (isContainingBlock(currentNode)) {
return currentNode;
} else if (isTopLayer(currentNode)) {
return null;
}
currentNode = getParentNode(currentNode);
}
return null;
}
function isWebKit() {
if (isWebKitValue == null) {
isWebKitValue = typeof CSS !== 'undefined' && CSS.supports && CSS.supports('-webkit-backdrop-filter', 'none');
}
return isWebKitValue;
}
function isLastTraversableNode(node) {
return /^(html|body|#document)$/.test(getNodeName(node));
}
function getComputedStyle(element) {
return getWindow(element).getComputedStyle(element);
}
function getNodeScroll(element) {
if (isElement(element)) {
return {
scrollLeft: element.scrollLeft,
scrollTop: element.scrollTop
};
}
return {
scrollLeft: element.scrollX,
scrollTop: element.scrollY
};
}
function getParentNode(node) {
if (getNodeName(node) === 'html') {
return node;
}
const result =
// Step into the shadow DOM of the parent of a slotted node.
node.assignedSlot ||
// DOM Element detected.
node.parentNode ||
// ShadowRoot detected.
isShadowRoot(node) && node.host ||
// Fallback.
getDocumentElement(node);
return isShadowRoot(result) ? result.host : result;
}
function getNearestOverflowAncestor(node) {
const parentNode = getParentNode(node);
if (isLastTraversableNode(parentNode)) {
return node.ownerDocument ? node.ownerDocument.body : node.body;
}
if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
return parentNode;
}
return getNearestOverflowAncestor(parentNode);
}
function getOverflowAncestors(node, list, traverseIframes) {
var _node$ownerDocument2;
if (list === void 0) {
list = [];
}
if (traverseIframes === void 0) {
traverseIframes = true;
}
const scrollableAncestor = getNearestOverflowAncestor(node);
const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
const win = getWindow(scrollableAncestor);
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));
}
}
function getFrameElement(win) {
return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
}
exports.getComputedStyle = getComputedStyle;
exports.getContainingBlock = getContainingBlock;
exports.getDocumentElement = getDocumentElement;
exports.getFrameElement = getFrameElement;
exports.getNearestOverflowAncestor = getNearestOverflowAncestor;
exports.getNodeName = getNodeName;
exports.getNodeScroll = getNodeScroll;
exports.getOverflowAncestors = getOverflowAncestors;
exports.getParentNode = getParentNode;
exports.getWindow = getWindow;
exports.isContainingBlock = isContainingBlock;
exports.isElement = isElement;
exports.isHTMLElement = isHTMLElement;
exports.isLastTraversableNode = isLastTraversableNode;
exports.isNode = isNode;
exports.isOverflowElement = isOverflowElement;
exports.isShadowRoot = isShadowRoot;
exports.isTableElement = isTableElement;
exports.isTopLayer = isTopLayer;
exports.isWebKit = isWebKit;
}));
+6
View File
@@ -0,0 +1,6 @@
{
"sideEffects": false,
"main": "floating-ui.utils.dom.umd.js",
"module": "floating-ui.utils.dom.esm.js",
"types": "floating-ui.utils.dom.d.ts"
}
+70
View File
@@ -0,0 +1,70 @@
{
"name": "@floating-ui/utils",
"version": "0.2.11",
"description": "Utilities for Floating UI",
"publishConfig": {
"access": "public"
},
"main": "./dist/floating-ui.utils.umd.js",
"module": "./dist/floating-ui.utils.esm.js",
"types": "./dist/floating-ui.utils.d.ts",
"sideEffects": false,
"files": [
"dist",
"dom"
],
"exports": {
"./package.json": "./package.json",
".": {
"import": {
"types": "./dist/floating-ui.utils.d.mts",
"default": "./dist/floating-ui.utils.mjs"
},
"types": "./dist/floating-ui.utils.d.ts",
"module": "./dist/floating-ui.utils.esm.js",
"default": "./dist/floating-ui.utils.umd.js"
},
"./dom": {
"import": {
"types": "./dist/floating-ui.utils.dom.d.mts",
"default": "./dist/floating-ui.utils.dom.mjs"
},
"types": "./dist/floating-ui.utils.dom.d.ts",
"module": "./dist/floating-ui.utils.dom.esm.js",
"default": "./dist/floating-ui.utils.dom.umd.js"
}
},
"author": "atomiks",
"license": "MIT",
"bugs": "https://github.com/floating-ui/floating-ui",
"repository": {
"type": "git",
"url": "https://github.com/floating-ui/floating-ui.git",
"directory": "packages/utils"
},
"homepage": "https://floating-ui.com",
"keywords": [
"tooltip",
"popover",
"dropdown",
"menu",
"popup",
"positioning"
],
"devDependencies": {
"@testing-library/jest-dom": "^6.1.6",
"config": "0.0.0"
},
"scripts": {
"lint": "eslint .",
"format": "prettier --write .",
"clean": "rimraf dist out-tsc dom react",
"test": "vitest run --globals",
"test:watch": "vitest watch --globals",
"dev": "rollup -c -w",
"build": "rollup -c",
"build:api": "build-api --tsc tsconfig.lib.json --aec api-extractor.json --aec api-extractor.dom.json --aec api-extractor.react.json",
"publint": "publint",
"typecheck": "tsc -b"
}
}