Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@aria-ui/overlay

Package Overview
Dependencies
Maintainers
0
Versions
21
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@aria-ui/overlay - npm Package Compare versions

Comparing version 0.0.19 to 0.0.20

dist/chunk-ITJBE75A.js
dist/elements.d.ts
dist/elements.js

119

dist/index.d.ts

@@ -1,4 +0,3 @@

import * as _aria_ui_core from '@aria-ui/core';
import { EmptyObject, ConnectableElement, SignalState, ReadonlySignal } from '@aria-ui/core';
import { Placement, AutoUpdateOptions, OffsetOptions, Boundary, RootBoundary, ElementContext, ReferenceElement } from '@floating-ui/dom';
import { PropDeclarations, EventDeclarations } from '@aria-ui/core';
import { Placement, AutoUpdateOptions, OffsetOptions, Boundary, RootBoundary, ElementContext } from '@floating-ui/dom';

@@ -9,22 +8,20 @@ /**

*/
interface OverlayAnchorProps extends EmptyObject {
interface OverlayAnchorProps {
}
declare const OverlayAnchorElement_base: {
new (): _aria_ui_core.BaseElement & OverlayAnchorProps;
prototype: HTMLElement;
};
/**
* A custom OverlayAnchor element.
*
* @group OverlayAnchor
* @internal
*/
declare class OverlayAnchorElement extends OverlayAnchorElement_base {
declare const overlayAnchorProps: PropDeclarations<OverlayAnchorProps>;
/**
* @group OverlayAnchor
* @internal
*/
interface OverlayAnchorEvents {
}
/**
* @group OverlayAnchor
* @hidden
* @internal
*/
declare function useOverlayAnchor(element: ConnectableElement): void;
declare const overlayAnchorEvents: EventDeclarations<OverlayAnchorEvents>;

@@ -74,5 +71,5 @@ /**

*
* @default null
* @default undefined
*/
offset: OffsetOptions | null;
offset?: OffsetOptions;
/**

@@ -136,3 +133,4 @@ * Whether to flip the `placement` in order to keep it in view when the

/**
* @see https://floating-ui.com/docs/detectoverflow
* Describes the clipping element(s) or area that overflow will be checked relative to.
* Please see https://floating-ui.com/docs/detectoverflow#boundary for more information.
*

@@ -143,3 +141,4 @@ * @default 'clippingAncestors'

/**
* @see https://floating-ui.com/docs/detectoverflow
* Describes the root boundary that the element will be checked for overflow relative to.
* Please see https://floating-ui.com/docs/detectoverflow#rootboundary for more information.
*

@@ -150,3 +149,4 @@ * @default 'viewport'

/**
* @see https://floating-ui.com/docs/detectoverflow
* Describes the virtual padding around the boundary to check for overflow.
* Please see https://floating-ui.com/docs/detectoverflow#padding for more information.
*

@@ -157,5 +157,6 @@ * @default 0

/**
* The element that will be used to check for overflow. Please see
* https://floating-ui.com/docs/detectoverflow#elementcontext for more
* information.
*
* @see https://floating-ui.com/docs/detectoverflow
*
* @default 'floating'

@@ -165,3 +166,5 @@ */

/**
* @see https://floating-ui.com/docs/detectoverflow
* Whether to check the alternate elementContext’s boundary. Please see
* https://floating-ui.com/docs/detectoverflow#altboundary for more
* information.
*

@@ -175,23 +178,3 @@ * @default true

*/
declare const defaultOverlayPositionerProps: Readonly<{
strategy: "absolute";
placement: "top";
autoUpdate: true;
hoist: false;
transform: false;
offset: null;
flip: false;
shift: false;
overlap: false;
fitViewport: false;
sameWidth: false;
sameHeight: false;
inline: false;
hide: false;
boundary: "clippingAncestors";
rootBoundary: "viewport";
overflowPadding: 0;
elementContext: "floating";
altBoundary: true;
}>;
declare const overlayPositionerProps: PropDeclarations<OverlayPositionerProps>;
/**

@@ -203,29 +186,13 @@ * @group OverlayPositioner

"data-align": "start" | "center" | "end";
"data-mounted": "";
}
declare const OverlayPositionerElement_base: {
new (): _aria_ui_core.BaseElement & OverlayPositionerProps;
prototype: HTMLElement;
};
/**
* A custom OverlayPositioner element.
*
* @group OverlayPositioner
* @internal
*/
declare class OverlayPositionerElement extends OverlayPositionerElement_base {
interface OverlayPositionerEvents {
}
/**
* @group OverlayPositioner
* @hidden
*/
declare function useOverlayPositioner(element: ConnectableElement, state: SignalState<OverlayPositionerProps>): void;
/**
* @group OverlayPositioner
*
* @internal
*/
declare function useOverlayPositionerState(element: ConnectableElement, state: SignalState<OverlayPositionerProps>, context: {
reference: ReadonlySignal<ReferenceElement | null>;
}): void;
declare const overlayPositionerEvents: EventDeclarations<OverlayPositionerEvents>;

@@ -236,23 +203,19 @@ /**

*/
interface OverlayRootProps extends EmptyObject {
interface OverlayRootProps {
}
declare const OverlayRootElement_base: {
new (): _aria_ui_core.BaseElement & OverlayRootProps;
prototype: HTMLElement;
};
/**
* A custom OverlayRoot element.
*
* @group OverlayRoot
* @internal
*/
declare class OverlayRootElement extends OverlayRootElement_base {
declare const overlayRootProps: PropDeclarations<OverlayRootProps>;
/**
* @internal
*/
interface OverlayRootEvents {
}
/**
* @group OverlayRoot
* @hidden
* @internal
*/
declare function useOverlayRoot(element: ConnectableElement): void;
declare const overlayRootEvents: EventDeclarations<OverlayRootEvents>;
export { OverlayAnchorElement, type OverlayPositionerDataAttributes, OverlayPositionerElement, type OverlayPositionerProps, OverlayRootElement, defaultOverlayPositionerProps, useOverlayAnchor, useOverlayPositioner, useOverlayPositionerState, useOverlayRoot };
export { type OverlayAnchorEvents, type OverlayAnchorProps, type OverlayPositionerDataAttributes, type OverlayPositionerEvents, type OverlayPositionerProps, type OverlayRootEvents, type OverlayRootProps, overlayAnchorEvents, overlayAnchorProps, overlayPositionerEvents, overlayPositionerProps, overlayRootEvents, overlayRootProps };

290

dist/index.js

@@ -1,275 +0,25 @@

// src/overlay-anchor.element.gen.ts
import { ElementBuilder } from "@aria-ui/core";
// src/overlay-anchor.props.ts
var defaultOverlayAnchorProps = Object.freeze(
{}
);
// src/overlay-anchor.state.ts
import { useEffect } from "@aria-ui/core";
// src/contexts.ts
import { createContext } from "@aria-ui/core";
var referenceContext = createContext(
"overlay/reference",
null
);
// src/overlay-anchor.state.ts
function useOverlayAnchor(element) {
const reference = referenceContext.consume(element);
useEffect(element, () => {
reference.set(element);
});
}
// src/overlay-anchor.element.gen.ts
var OverlayAnchorElement = class extends ElementBuilder(
useOverlayAnchor,
defaultOverlayAnchorProps
) {
};
// src/overlay-positioner.element.gen.ts
import { ElementBuilder as ElementBuilder2 } from "@aria-ui/core";
// src/overlay-positioner.props.ts
var defaultOverlayPositionerProps = Object.freeze({
strategy: "absolute",
placement: "top",
autoUpdate: true,
hoist: false,
transform: false,
offset: null,
flip: false,
shift: false,
overlap: false,
fitViewport: false,
sameWidth: false,
sameHeight: false,
inline: false,
hide: false,
boundary: "clippingAncestors",
rootBoundary: "viewport",
overflowPadding: 0,
elementContext: "floating",
altBoundary: true
});
// src/overlay-positioner.state.ts
import {
mapValues,
useAnimationFrame
} from "@aria-ui/core";
// src/positioning.ts
import {
autoUpdate,
computePosition,
flip,
hide,
inline,
offset,
shift,
size
} from "@floating-ui/dom";
import { getWindow } from "@zag-js/dom-query";
function updatePlacement(floating, reference, options) {
if (!floating || !reference) return;
const middleware = [
setupOffset(options),
setupFlip(options),
setupShift(options),
setupSize(options),
setupInline(options),
setupHide(options)
];
const { placement, strategy } = options;
let canceled = false;
const update = async () => {
var _a, _b, _c;
if (!reference || !floating || canceled) {
return;
}
if (options.hoist && popoverAvailable) {
floating.style.margin = "unset";
floating.setAttribute("popover", "manual");
(_a = floating.showPopover) == null ? void 0 : _a.call(floating);
}
const pos = await computePosition(reference, floating, {
placement,
middleware,
strategy
});
if (canceled) {
return;
}
if (options.hide) {
const hidden = (
// Whether the floating element is fully clipped
((_b = pos.middlewareData.hide) == null ? void 0 : _b.escaped) || // Whether the reference element is fully clipped
((_c = pos.middlewareData.hide) == null ? void 0 : _c.referenceHidden)
);
floating.style.visibility = hidden ? "hidden" : "visible";
}
const x = roundByDPR(floating, pos.x);
const y = roundByDPR(floating, pos.y);
floating.style.position = pos.strategy;
if (options.transform) {
floating.style.left = "0";
floating.style.top = "0";
floating.style.transform = `translate3d(${x}px,${y}px,0)`;
if (getDPR(floating) >= 1.5) {
floating.style.willChange = "transform";
}
} else {
floating.style.left = `${x}px`;
floating.style.top = `${y}px`;
floating.style.removeProperty("transform");
}
const [side, align] = getSideAndAlignFromPlacement(pos.placement);
const attributes = {
"data-side": side,
"data-align": align
};
for (const [key, value] of Object.entries(attributes)) {
floating.setAttribute(key, value);
}
};
const autoUpdateOptions = typeof options.autoUpdate === "boolean" ? void 0 : options.autoUpdate;
const cancelAutoUpdate = options.autoUpdate ? autoUpdate(reference, floating, update, autoUpdateOptions) : void 0;
if (!options.autoUpdate) {
void update();
}
return () => {
canceled = true;
cancelAutoUpdate == null ? void 0 : cancelAutoUpdate();
};
}
function getOverflowOptions(props) {
return {
boundary: props.boundary,
rootBoundary: props.rootBoundary,
elementContext: props.elementContext,
altBoundary: props.altBoundary,
padding: props.overflowPadding
};
}
function setupOffset(props) {
if (props.offset == null) return;
return offset(props.offset);
}
function setupFlip(props) {
if (!props.flip) return;
return flip({
...getOverflowOptions(props),
fallbackPlacements: props.flip === true ? void 0 : props.flip,
// Disable the cross axis check so that `flip()` can work with `shift()`.
// See also https://floating-ui.com/docs/flip#combining-with-shift
crossAxis: false
});
}
function setupShift(props) {
if (!props.shift) return;
return shift({
...getOverflowOptions(props),
mainAxis: props.shift,
crossAxis: props.overlap
});
}
function setupSize(props) {
if (!props.fitViewport && !props.sameWidth && !props.sameHeight) return;
return size({
...getOverflowOptions(props),
apply({ elements, rects, availableHeight, availableWidth }) {
const floating = elements.floating;
if (props.sameWidth) {
floating.style.width = `${Math.round(rects.reference.width)}px`;
}
if (props.sameHeight) {
floating.style.height = `${Math.round(rects.reference.height)}px`;
}
if (props.fitViewport) {
floating.style.maxWidth = `${Math.floor(availableWidth)}px`;
floating.style.maxHeight = `${Math.floor(availableHeight)}px`;
}
}
});
}
function setupInline(props) {
if (!props.inline) return;
return inline();
}
function setupHide(props) {
if (!props.hide) return;
return hide({
padding: props.overflowPadding,
elementContext: "reference"
});
}
function roundByDPR(element, value) {
const dpr = getDPR(element);
return Math.round(value * dpr) / dpr;
}
function getDPR(element) {
const win = getWindow(element);
return win.devicePixelRatio || 1;
}
function getSideAndAlignFromPlacement(placement) {
const [side, align = "center"] = placement.split("-");
return [side, align];
}
var popoverAvailable = typeof HTMLElement !== "undefined" && Object.hasOwn(HTMLElement.prototype, "popover");
// src/overlay-positioner.state.ts
function useOverlayPositioner(element, state) {
const reference = referenceContext.consume(element);
useOverlayPositionerState(element, state, { reference });
}
function useOverlayPositionerState(element, state, context) {
useAnimationFrame(element, () => {
const stateValues = mapValues(state);
const referenceValue = context.reference.get();
return () => updatePlacement(element, referenceValue, stateValues);
});
}
// src/overlay-positioner.element.gen.ts
var OverlayPositionerElement = class extends ElementBuilder2(
useOverlayPositioner,
defaultOverlayPositionerProps
) {
};
// src/overlay-root.element.gen.ts
import { ElementBuilder as ElementBuilder3 } from "@aria-ui/core";
// src/overlay-root.props.ts
var defaultOverlayRootProps = Object.freeze(
{}
);
// src/overlay-root.state.ts
import { createSignal } from "@aria-ui/core";
function useOverlayRoot(element) {
const reference = createSignal(null);
referenceContext.provide(element, reference);
}
// src/overlay-root.element.gen.ts
var OverlayRootElement = class extends ElementBuilder3(
useOverlayRoot,
defaultOverlayRootProps
) {
};
export {
OverlayAnchorElement,
OverlayPositionerElement,
OverlayRootElement,
defaultOverlayPositionerProps,
useOverlayAnchor,
useOverlayPositioner,
useOverlayPositionerState,
useOverlayRoot
overlayAnchorEvents,
overlayAnchorProps,
overlayPositionerEvents,
overlayPositionerProps,
overlayRootEvents,
overlayRootProps
} from "./chunk-ITJBE75A.js";
// src/index.ts
import { registerCustomElement } from "@aria-ui/core";
registerCustomElement("aria-ui-overlay-anchor", OverlayAnchorElement);
registerCustomElement("aria-ui-overlay-positioner", OverlayPositionerElement);
registerCustomElement("aria-ui-overlay-root", OverlayRootElement);
export {
overlayAnchorEvents,
overlayAnchorProps,
overlayPositionerEvents,
overlayPositionerProps,
overlayRootEvents,
overlayRootProps
};

22

package.json
{
"name": "@aria-ui/overlay",
"type": "module",
"version": "0.0.19",
"version": "0.0.20",
"private": false,
"sideEffects": false,
"main": "dist/index.js",
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/index.js"
},
"./elements": {
"types": "./dist/elements.d.ts",
"import": "./dist/elements.js"
}
},
"files": [

@@ -12,9 +22,9 @@ "dist"

"dependencies": {
"@floating-ui/dom": "^1.6.8",
"@zag-js/dom-query": "^0.63.0",
"@aria-ui/core": "^0.0.18"
"@floating-ui/dom": "^1.6.11",
"@zag-js/dom-query": "^0.74.2",
"@aria-ui/core": "^0.0.19"
},
"devDependencies": {
"tsup": "^8.2.3",
"typescript": "^5.5.4"
"tsup": "^8.3.0",
"typescript": "^5.6.3"
},

@@ -21,0 +31,0 @@ "publishConfig": {

405

README.md
# @aria-ui/overlay
A collection of low-level utilities for creating custom elements that display floating content.
## OverlayPositionerDataAttributes <a id="overlay-positioner-data-attributes" href="#overlay-positioner-data-attributes">#</a>
You probably won't need to use this module directly.
<dl>
## OverlayAnchor
<dt>
### OverlayAnchorElement
`data-align`
A custom OverlayAnchor element.
</dt>
#### Constructors
<dd>
```ts
new OverlayAnchorElement(): OverlayAnchorElement
```
**Type**: `"center" | "start" | "end"`
## OverlayPositioner
</dd>
### OverlayPositionerElement
<dt>
A custom OverlayPositioner element.
`data-mounted`
#### Constructors
</dt>
```ts
new OverlayPositionerElement(): OverlayPositionerElement
```
<dd>
#### Properties
**Type**: `""`
| Property | Type | Description |
| --- | --- | --- |
| `altBoundary` | `boolean` | **See** https://floating-ui.com/docs/detectoverflow **Default** `true` |
| `autoUpdate` | `boolean` \| `AutoUpdateOptions` | Options to activate auto-update listeners **See** https://floating-ui.com/docs/autoUpdate **Default** `true` |
| `boundary` | `Boundary` | **See** https://floating-ui.com/docs/detectoverflow **Default** `'clippingAncestors'` |
| `elementContext` | `ElementContext` | **See** https://floating-ui.com/docs/detectoverflow **Default** `'floating'` |
| `fitViewport` | `boolean` | Whether to constrain the floating element's width and height to not exceed the viewport. **Default** `false` |
| `flip` | `boolean` \| `Placement`[] | Whether to flip the `placement` in order to keep it in view when the preferred placement(s) will overflow the clipping boundary. You can also provide an array of placements to try sequentially if the preferred `placement` does not fit. **Default** `false` |
| `hide` | `boolean` | Whether to hide the floating element when the reference element or the floating element is fully clipped. **Default** `false` |
| `hoist` | `boolean` | Whether to use the browser [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) to place the floating element on top of other page content. When enabled, the floating element won't be clipped by an ancestor. This provides a similar result to React's `<Portals>` or Vue's `<Teleport>`. **Default** `false` |
| `inline` | `boolean` | Whether to improve positioning for inline reference elements that span over multiple lines. **Default** `false` |
| `offset` | `null` \| `OffsetOptions` | The distance between the reference and floating element. **Default** `null` |
| `overflowPadding` | `number` | **See** https://floating-ui.com/docs/detectoverflow **Default** `0` |
| `overlap` | `boolean` | Whether the floating element can overlap the reference element to keep it in view. **Default** `false` |
| `placement` | `Placement` | The initial placement of the floating element **Default** `"top"` |
| `rootBoundary` | `RootBoundary` | **See** https://floating-ui.com/docs/detectoverflow **Default** `'viewport'` |
| `sameHeight` | `boolean` | Whether to constrain the floating element's height so that it matches the reference element. **Default** `false` |
| `sameWidth` | `boolean` | Whether to constrain the floating element's width so that it matches the reference element. **Default** `false` |
| `shift` | `boolean` | Whether the floating element should shift to keep it in view. **Default** `false` |
| `strategy` | `"absolute"` \| `"fixed"` | The strategy to use for positioning **Default** `"absolute"` |
| `transform` | `boolean` | Whether to use `transform: translate3d()` for positioning instead of `top` and `left` (layout) to place the floating element. **Default** `false` |
</dd>
### OverlayPositionerDataAttributes
<dt>
#### Properties
`data-side`
| Property | Type |
| ------------ | ---------------------------------------------- |
| `data-align` | `"center"` \| `"start"` \| `"end"` |
| `data-side` | `"bottom"` \| `"left"` \| `"right"` \| `"top"` |
</dt>
### OverlayPositionerProps
<dd>
#### Properties
**Type**: `"bottom" | "left" | "right" | "top"`
| Property | Type | Description |
| --- | --- | --- |
| `altBoundary` | `boolean` | **See** https://floating-ui.com/docs/detectoverflow **Default** `true` |
| `autoUpdate` | `boolean` \| `AutoUpdateOptions` | Options to activate auto-update listeners **See** https://floating-ui.com/docs/autoUpdate **Default** `true` |
| `boundary` | `Boundary` | **See** https://floating-ui.com/docs/detectoverflow **Default** `'clippingAncestors'` |
| `elementContext` | `ElementContext` | **See** https://floating-ui.com/docs/detectoverflow **Default** `'floating'` |
| `fitViewport` | `boolean` | Whether to constrain the floating element's width and height to not exceed the viewport. **Default** `false` |
| `flip` | `boolean` \| `Placement`[] | Whether to flip the `placement` in order to keep it in view when the preferred placement(s) will overflow the clipping boundary. You can also provide an array of placements to try sequentially if the preferred `placement` does not fit. **Default** `false` |
| `hide` | `boolean` | Whether to hide the floating element when the reference element or the floating element is fully clipped. **Default** `false` |
| `hoist` | `boolean` | Whether to use the browser [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) to place the floating element on top of other page content. When enabled, the floating element won't be clipped by an ancestor. This provides a similar result to React's `<Portals>` or Vue's `<Teleport>`. **Default** `false` |
| `inline` | `boolean` | Whether to improve positioning for inline reference elements that span over multiple lines. **Default** `false` |
| `offset` | `null` \| `OffsetOptions` | The distance between the reference and floating element. **Default** `null` |
| `overflowPadding` | `number` | **See** https://floating-ui.com/docs/detectoverflow **Default** `0` |
| `overlap` | `boolean` | Whether the floating element can overlap the reference element to keep it in view. **Default** `false` |
| `placement` | `Placement` | The initial placement of the floating element **Default** `"top"` |
| `rootBoundary` | `RootBoundary` | **See** https://floating-ui.com/docs/detectoverflow **Default** `'viewport'` |
| `sameHeight` | `boolean` | Whether to constrain the floating element's height so that it matches the reference element. **Default** `false` |
| `sameWidth` | `boolean` | Whether to constrain the floating element's width so that it matches the reference element. **Default** `false` |
| `shift` | `boolean` | Whether the floating element should shift to keep it in view. **Default** `false` |
| `strategy` | `"absolute"` \| `"fixed"` | The strategy to use for positioning **Default** `"absolute"` |
| `transform` | `boolean` | Whether to use `transform: translate3d()` for positioning instead of `top` and `left` (layout) to place the floating element. **Default** `false` |
</dd>
## OverlayRoot
</dl>
### OverlayRootElement
## OverlayPositionerProps <a id="overlay-positioner-props" href="#overlay-positioner-props">#</a>
A custom OverlayRoot element.
<dl>
#### Constructors
<dt>
```ts
new OverlayRootElement(): OverlayRootElement
```
`altBoundary`
</dt>
<dd>
Whether to check the alternate elementContext’s boundary. Please see https://floating-ui.com/docs/detectoverflow#altboundary for more information.
**Type**: `boolean`
**Default**: `true`
</dd>
<dt>
`autoUpdate`
</dt>
<dd>
Options to activate auto-update listeners
**Type**: `boolean | AutoUpdateOptions`
**See**
https://floating-ui.com/docs/autoUpdate
**Default**: `true`
</dd>
<dt>
`boundary`
</dt>
<dd>
Describes the clipping element(s) or area that overflow will be checked relative to. Please see https://floating-ui.com/docs/detectoverflow#boundary for more information.
**Type**: `Boundary`
**Default**: `'clippingAncestors'`
</dd>
<dt>
`elementContext`
</dt>
<dd>
The element that will be used to check for overflow. Please see https://floating-ui.com/docs/detectoverflow#elementcontext for more information.
**Type**: `ElementContext`
**Default**: `'floating'`
</dd>
<dt>
`fitViewport`
</dt>
<dd>
Whether to constrain the floating element's width and height to not exceed the viewport.
**Type**: `boolean`
**Default**: `false`
</dd>
<dt>
`flip`
</dt>
<dd>
Whether to flip the `placement` in order to keep it in view when the preferred placement(s) will overflow the clipping boundary. You can also provide an array of placements to try sequentially if the preferred `placement` does not fit.
**Type**: `boolean | Placement[]`
**Default**: `false`
</dd>
<dt>
`hide`
</dt>
<dd>
Whether to hide the floating element when the reference element or the floating element is fully clipped.
**Type**: `boolean`
**Default**: `false`
</dd>
<dt>
`hoist`
</dt>
<dd>
Whether to use the browser [Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API) to place the floating element on top of other page content. When enabled, the floating element won't be clipped by an ancestor. This provides a similar result to React's `<Portals>` or Vue's `<Teleport>`.
**Type**: `boolean`
**Default**: `false`
</dd>
<dt>
`inline`
</dt>
<dd>
Whether to improve positioning for inline reference elements that span over multiple lines.
**Type**: `boolean`
**Default**: `false`
</dd>
<dt>
`offset`
</dt>
<dd>
The distance between the reference and floating element.
**Type**: `OffsetOptions`
**Default**: `undefined`
</dd>
<dt>
`overflowPadding`
</dt>
<dd>
Describes the virtual padding around the boundary to check for overflow. Please see https://floating-ui.com/docs/detectoverflow#padding for more information.
**Type**: `number`
**Default**: `0`
</dd>
<dt>
`overlap`
</dt>
<dd>
Whether the floating element can overlap the reference element to keep it in view.
**Type**: `boolean`
**Default**: `false`
</dd>
<dt>
`placement`
</dt>
<dd>
The initial placement of the floating element
**Type**: `Placement`
**Default**: `"top"`
</dd>
<dt>
`rootBoundary`
</dt>
<dd>
Describes the root boundary that the element will be checked for overflow relative to. Please see https://floating-ui.com/docs/detectoverflow#rootboundary for more information.
**Type**: `RootBoundary`
**Default**: `'viewport'`
</dd>
<dt>
`sameHeight`
</dt>
<dd>
Whether to constrain the floating element's height so that it matches the reference element.
**Type**: `boolean`
**Default**: `false`
</dd>
<dt>
`sameWidth`
</dt>
<dd>
Whether to constrain the floating element's width so that it matches the reference element.
**Type**: `boolean`
**Default**: `false`
</dd>
<dt>
`shift`
</dt>
<dd>
Whether the floating element should shift to keep it in view.
**Type**: `boolean`
**Default**: `false`
</dd>
<dt>
`strategy`
</dt>
<dd>
The strategy to use for positioning
**Type**: `"fixed" | "absolute"`
**Default**: `"absolute"`
</dd>
<dt>
`transform`
</dt>
<dd>
Whether to use `transform: translate3d()` for positioning instead of `top` and `left` (layout) to place the floating element.
**Type**: `boolean`
**Default**: `false`
</dd>
</dl>
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc