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

@radix-ui/react-popper

Package Overview
Dependencies
Maintainers
6
Versions
191
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@radix-ui/react-popper - npm Package Compare versions

Comparing version 1.2.0-rc.2 to 1.2.0-rc.3

612

dist/index.js
"use strict";
"use client";
(() => {
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
}) : x)(function(x) {
if (typeof require !== "undefined") return require.apply(this, arguments);
throw Error('Dynamic require of "' + x + '" is not supported');
});
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// packages/react/popper/src/Popper.tsx
var React = __toESM(__require("react"));
var import_react_dom = __require("@floating-ui/react-dom");
var ArrowPrimitive = __toESM(__require("@radix-ui/react-arrow"));
var import_react_compose_refs = __require("@radix-ui/react-compose-refs");
var import_react_context = __require("@radix-ui/react-context");
var import_react_primitive = __require("@radix-ui/react-primitive");
var import_react_use_callback_ref = __require("@radix-ui/react-use-callback-ref");
var import_react_use_layout_effect = __require("@radix-ui/react-use-layout-effect");
var import_react_use_size = __require("@radix-ui/react-use-size");
var import_jsx_runtime = __require("react/jsx-runtime");
var SIDE_OPTIONS = ["top", "right", "bottom", "left"];
var ALIGN_OPTIONS = ["start", "center", "end"];
var POPPER_NAME = "Popper";
var [createPopperContext, createPopperScope] = (0, import_react_context.createContextScope)(POPPER_NAME);
var [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
var Popper = (props) => {
const { __scopePopper, children } = props;
const [anchor, setAnchor] = React.useState(null);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperProvider, { scope: __scopePopper, anchor, onAnchorChange: setAnchor, children });
};
Popper.displayName = POPPER_NAME;
var ANCHOR_NAME = "PopperAnchor";
var PopperAnchor = React.forwardRef(
(props, forwardedRef) => {
const { __scopePopper, virtualRef, ...anchorProps } = props;
const context = usePopperContext(ANCHOR_NAME, __scopePopper);
const ref = React.useRef(null);
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref);
React.useEffect(() => {
context.onAnchorChange(virtualRef?.current || ref.current);
});
return virtualRef ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { ...anchorProps, ref: composedRefs });
}
);
PopperAnchor.displayName = ANCHOR_NAME;
var CONTENT_NAME = "PopperContent";
var [PopperContentProvider, useContentContext] = createPopperContext(CONTENT_NAME);
var PopperContent = React.forwardRef(
(props, forwardedRef) => {
const {
__scopePopper,
side = "bottom",
sideOffset = 0,
align = "center",
alignOffset = 0,
arrowPadding = 0,
avoidCollisions = true,
collisionBoundary = [],
collisionPadding: collisionPaddingProp = 0,
sticky = "partial",
hideWhenDetached = false,
updatePositionStrategy = "optimized",
onPlaced,
...contentProps
} = props;
const context = usePopperContext(CONTENT_NAME, __scopePopper);
const [content, setContent] = React.useState(null);
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, (node) => setContent(node));
const [arrow, setArrow] = React.useState(null);
const arrowSize = (0, import_react_use_size.useSize)(arrow);
const arrowWidth = arrowSize?.width ?? 0;
const arrowHeight = arrowSize?.height ?? 0;
const desiredPlacement = side + (align !== "center" ? "-" + align : "");
const collisionPadding = typeof collisionPaddingProp === "number" ? collisionPaddingProp : { top: 0, right: 0, bottom: 0, left: 0, ...collisionPaddingProp };
const boundary = Array.isArray(collisionBoundary) ? collisionBoundary : [collisionBoundary];
const hasExplicitBoundaries = boundary.length > 0;
const detectOverflowOptions = {
padding: collisionPadding,
boundary: boundary.filter(isNotNull),
// with `strategy: 'fixed'`, this is the only way to get it to respect boundaries
altBoundary: hasExplicitBoundaries
};
const { refs, floatingStyles, placement, isPositioned, middlewareData } = (0, import_react_dom.useFloating)({
// default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
strategy: "fixed",
placement: desiredPlacement,
whileElementsMounted: (...args) => {
const cleanup = (0, import_react_dom.autoUpdate)(...args, {
animationFrame: updatePositionStrategy === "always"
});
return cleanup;
// packages/react/popper/src/index.ts
var src_exports = {};
__export(src_exports, {
ALIGN_OPTIONS: () => ALIGN_OPTIONS,
Anchor: () => Anchor,
Arrow: () => Arrow,
Content: () => Content,
Popper: () => Popper,
PopperAnchor: () => PopperAnchor,
PopperArrow: () => PopperArrow,
PopperContent: () => PopperContent,
Root: () => Root2,
SIDE_OPTIONS: () => SIDE_OPTIONS,
createPopperScope: () => createPopperScope
});
module.exports = __toCommonJS(src_exports);
// packages/react/popper/src/Popper.tsx
var React = __toESM(require("react"));
var import_react_dom = require("@floating-ui/react-dom");
var ArrowPrimitive = __toESM(require("@radix-ui/react-arrow"));
var import_react_compose_refs = require("@radix-ui/react-compose-refs");
var import_react_context = require("@radix-ui/react-context");
var import_react_primitive = require("@radix-ui/react-primitive");
var import_react_use_callback_ref = require("@radix-ui/react-use-callback-ref");
var import_react_use_layout_effect = require("@radix-ui/react-use-layout-effect");
var import_react_use_size = require("@radix-ui/react-use-size");
var import_jsx_runtime = require("react/jsx-runtime");
var SIDE_OPTIONS = ["top", "right", "bottom", "left"];
var ALIGN_OPTIONS = ["start", "center", "end"];
var POPPER_NAME = "Popper";
var [createPopperContext, createPopperScope] = (0, import_react_context.createContextScope)(POPPER_NAME);
var [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
var Popper = (props) => {
const { __scopePopper, children } = props;
const [anchor, setAnchor] = React.useState(null);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperProvider, { scope: __scopePopper, anchor, onAnchorChange: setAnchor, children });
};
Popper.displayName = POPPER_NAME;
var ANCHOR_NAME = "PopperAnchor";
var PopperAnchor = React.forwardRef(
(props, forwardedRef) => {
const { __scopePopper, virtualRef, ...anchorProps } = props;
const context = usePopperContext(ANCHOR_NAME, __scopePopper);
const ref = React.useRef(null);
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref);
React.useEffect(() => {
context.onAnchorChange(virtualRef?.current || ref.current);
});
return virtualRef ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { ...anchorProps, ref: composedRefs });
}
);
PopperAnchor.displayName = ANCHOR_NAME;
var CONTENT_NAME = "PopperContent";
var [PopperContentProvider, useContentContext] = createPopperContext(CONTENT_NAME);
var PopperContent = React.forwardRef(
(props, forwardedRef) => {
const {
__scopePopper,
side = "bottom",
sideOffset = 0,
align = "center",
alignOffset = 0,
arrowPadding = 0,
avoidCollisions = true,
collisionBoundary = [],
collisionPadding: collisionPaddingProp = 0,
sticky = "partial",
hideWhenDetached = false,
updatePositionStrategy = "optimized",
onPlaced,
...contentProps
} = props;
const context = usePopperContext(CONTENT_NAME, __scopePopper);
const [content, setContent] = React.useState(null);
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, (node) => setContent(node));
const [arrow, setArrow] = React.useState(null);
const arrowSize = (0, import_react_use_size.useSize)(arrow);
const arrowWidth = arrowSize?.width ?? 0;
const arrowHeight = arrowSize?.height ?? 0;
const desiredPlacement = side + (align !== "center" ? "-" + align : "");
const collisionPadding = typeof collisionPaddingProp === "number" ? collisionPaddingProp : { top: 0, right: 0, bottom: 0, left: 0, ...collisionPaddingProp };
const boundary = Array.isArray(collisionBoundary) ? collisionBoundary : [collisionBoundary];
const hasExplicitBoundaries = boundary.length > 0;
const detectOverflowOptions = {
padding: collisionPadding,
boundary: boundary.filter(isNotNull),
// with `strategy: 'fixed'`, this is the only way to get it to respect boundaries
altBoundary: hasExplicitBoundaries
};
const { refs, floatingStyles, placement, isPositioned, middlewareData } = (0, import_react_dom.useFloating)({
// default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
strategy: "fixed",
placement: desiredPlacement,
whileElementsMounted: (...args) => {
const cleanup = (0, import_react_dom.autoUpdate)(...args, {
animationFrame: updatePositionStrategy === "always"
});
return cleanup;
},
elements: {
reference: context.anchor
},
middleware: [
(0, import_react_dom.offset)({ mainAxis: sideOffset + arrowHeight, alignmentAxis: alignOffset }),
avoidCollisions && (0, import_react_dom.shift)({
mainAxis: true,
crossAxis: false,
limiter: sticky === "partial" ? (0, import_react_dom.limitShift)() : void 0,
...detectOverflowOptions
}),
avoidCollisions && (0, import_react_dom.flip)({ ...detectOverflowOptions }),
(0, import_react_dom.size)({
...detectOverflowOptions,
apply: ({ elements, rects, availableWidth, availableHeight }) => {
const { width: anchorWidth, height: anchorHeight } = rects.reference;
const contentStyle = elements.floating.style;
contentStyle.setProperty("--radix-popper-available-width", `${availableWidth}px`);
contentStyle.setProperty("--radix-popper-available-height", `${availableHeight}px`);
contentStyle.setProperty("--radix-popper-anchor-width", `${anchorWidth}px`);
contentStyle.setProperty("--radix-popper-anchor-height", `${anchorHeight}px`);
}
}),
arrow && (0, import_react_dom.arrow)({ element: arrow, padding: arrowPadding }),
transformOrigin({ arrowWidth, arrowHeight }),
hideWhenDetached && (0, import_react_dom.hide)({ strategy: "referenceHidden", ...detectOverflowOptions })
]
});
const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
const handlePlaced = (0, import_react_use_callback_ref.useCallbackRef)(onPlaced);
(0, import_react_use_layout_effect.useLayoutEffect)(() => {
if (isPositioned) {
handlePlaced?.();
}
}, [isPositioned, handlePlaced]);
const arrowX = middlewareData.arrow?.x;
const arrowY = middlewareData.arrow?.y;
const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
const [contentZIndex, setContentZIndex] = React.useState();
(0, import_react_use_layout_effect.useLayoutEffect)(() => {
if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
}, [content]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
ref: refs.setFloating,
"data-radix-popper-content-wrapper": "",
style: {
...floatingStyles,
transform: isPositioned ? floatingStyles.transform : "translate(0, -200%)",
// keep off the page when measuring
minWidth: "max-content",
zIndex: contentZIndex,
["--radix-popper-transform-origin"]: [
middlewareData.transformOrigin?.x,
middlewareData.transformOrigin?.y
].join(" "),
// hide the content if using the hide middleware and should be hidden
// set visibility to hidden and disable pointer events so the UI behaves
// as if the PopperContent isn't there at all
...middlewareData.hide?.referenceHidden && {
visibility: "hidden",
pointerEvents: "none"
}
},
elements: {
reference: context.anchor
},
middleware: [
(0, import_react_dom.offset)({ mainAxis: sideOffset + arrowHeight, alignmentAxis: alignOffset }),
avoidCollisions && (0, import_react_dom.shift)({
mainAxis: true,
crossAxis: false,
limiter: sticky === "partial" ? (0, import_react_dom.limitShift)() : void 0,
...detectOverflowOptions
}),
avoidCollisions && (0, import_react_dom.flip)({ ...detectOverflowOptions }),
(0, import_react_dom.size)({
...detectOverflowOptions,
apply: ({ elements, rects, availableWidth, availableHeight }) => {
const { width: anchorWidth, height: anchorHeight } = rects.reference;
const contentStyle = elements.floating.style;
contentStyle.setProperty("--radix-popper-available-width", `${availableWidth}px`);
contentStyle.setProperty("--radix-popper-available-height", `${availableHeight}px`);
contentStyle.setProperty("--radix-popper-anchor-width", `${anchorWidth}px`);
contentStyle.setProperty("--radix-popper-anchor-height", `${anchorHeight}px`);
}
}),
arrow && (0, import_react_dom.arrow)({ element: arrow, padding: arrowPadding }),
transformOrigin({ arrowWidth, arrowHeight }),
hideWhenDetached && (0, import_react_dom.hide)({ strategy: "referenceHidden", ...detectOverflowOptions })
]
});
const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
const handlePlaced = (0, import_react_use_callback_ref.useCallbackRef)(onPlaced);
(0, import_react_use_layout_effect.useLayoutEffect)(() => {
if (isPositioned) {
handlePlaced?.();
}
}, [isPositioned, handlePlaced]);
const arrowX = middlewareData.arrow?.x;
const arrowY = middlewareData.arrow?.y;
const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
const [contentZIndex, setContentZIndex] = React.useState();
(0, import_react_use_layout_effect.useLayoutEffect)(() => {
if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
}, [content]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
ref: refs.setFloating,
"data-radix-popper-content-wrapper": "",
style: {
...floatingStyles,
transform: isPositioned ? floatingStyles.transform : "translate(0, -200%)",
// keep off the page when measuring
minWidth: "max-content",
zIndex: contentZIndex,
["--radix-popper-transform-origin"]: [
middlewareData.transformOrigin?.x,
middlewareData.transformOrigin?.y
].join(" "),
// hide the content if using the hide middleware and should be hidden
// set visibility to hidden and disable pointer events so the UI behaves
// as if the PopperContent isn't there at all
...middlewareData.hide?.referenceHidden && {
visibility: "hidden",
pointerEvents: "none"
}
},
dir: props.dir,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
PopperContentProvider,
{
scope: __scopePopper,
placedSide,
onArrowChange: setArrow,
arrowX,
arrowY,
shouldHideArrow: cannotCenterArrow,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_primitive.Primitive.div,
{
"data-side": placedSide,
"data-align": placedAlign,
...contentProps,
ref: composedRefs,
style: {
...contentProps.style,
// if the PopperContent hasn't been placed yet (not all measurements done)
// we prevent animations so that users's animation don't kick in too early referring wrong sides
animation: !isPositioned ? "none" : void 0
}
dir: props.dir,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
PopperContentProvider,
{
scope: __scopePopper,
placedSide,
onArrowChange: setArrow,
arrowX,
arrowY,
shouldHideArrow: cannotCenterArrow,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_primitive.Primitive.div,
{
"data-side": placedSide,
"data-align": placedAlign,
...contentProps,
ref: composedRefs,
style: {
...contentProps.style,
// if the PopperContent hasn't been placed yet (not all measurements done)
// we prevent animations so that users's animation don't kick in too early referring wrong sides
animation: !isPositioned ? "none" : void 0
}
)
}
)
}
);
}
);
PopperContent.displayName = CONTENT_NAME;
var ARROW_NAME = "PopperArrow";
var OPPOSITE_SIDE = {
top: "bottom",
right: "left",
bottom: "top",
left: "right"
};
var PopperArrow = React.forwardRef(function PopperArrow2(props, forwardedRef) {
const { __scopePopper, ...arrowProps } = props;
const contentContext = useContentContext(ARROW_NAME, __scopePopper);
const baseSide = OPPOSITE_SIDE[contentContext.placedSide];
return (
// we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)
// doesn't report size as we'd expect on SVG elements.
// it reports their bounding box which is effectively the largest path inside the SVG.
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"span",
{
ref: contentContext.onArrowChange,
style: {
position: "absolute",
left: contentContext.arrowX,
top: contentContext.arrowY,
[baseSide]: 0,
transformOrigin: {
top: "",
right: "0 0",
bottom: "center 0",
left: "100% 0"
}[contentContext.placedSide],
transform: {
top: "translateY(100%)",
right: "translateY(50%) rotate(90deg) translateX(-50%)",
bottom: `rotate(180deg)`,
left: "translateY(50%) rotate(-90deg) translateX(50%)"
}[contentContext.placedSide],
visibility: contentContext.shouldHideArrow ? "hidden" : void 0
},
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
ArrowPrimitive.Root,
{
...arrowProps,
ref: forwardedRef,
style: {
...arrowProps.style,
// ensures the element can be measured correctly (mostly for if SVG)
display: "block"
}
}
)
}
)
)
}
)
}
);
});
PopperArrow.displayName = ARROW_NAME;
function isNotNull(value) {
return value !== null;
}
var transformOrigin = (options) => ({
name: "transformOrigin",
options,
fn(data) {
const { placement, rects, middlewareData } = data;
const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
const isArrowHidden = cannotCenterArrow;
const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
const noArrowAlign = { start: "0%", center: "50%", end: "100%" }[placedAlign];
const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2;
const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2;
let x = "";
let y = "";
if (placedSide === "bottom") {
x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
y = `${-arrowHeight}px`;
} else if (placedSide === "top") {
x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
y = `${rects.floating.height + arrowHeight}px`;
} else if (placedSide === "right") {
x = `${-arrowHeight}px`;
y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
} else if (placedSide === "left") {
x = `${rects.floating.width + arrowHeight}px`;
y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
);
PopperContent.displayName = CONTENT_NAME;
var ARROW_NAME = "PopperArrow";
var OPPOSITE_SIDE = {
top: "bottom",
right: "left",
bottom: "top",
left: "right"
};
var PopperArrow = React.forwardRef(function PopperArrow2(props, forwardedRef) {
const { __scopePopper, ...arrowProps } = props;
const contentContext = useContentContext(ARROW_NAME, __scopePopper);
const baseSide = OPPOSITE_SIDE[contentContext.placedSide];
return (
// we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)
// doesn't report size as we'd expect on SVG elements.
// it reports their bounding box which is effectively the largest path inside the SVG.
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"span",
{
ref: contentContext.onArrowChange,
style: {
position: "absolute",
left: contentContext.arrowX,
top: contentContext.arrowY,
[baseSide]: 0,
transformOrigin: {
top: "",
right: "0 0",
bottom: "center 0",
left: "100% 0"
}[contentContext.placedSide],
transform: {
top: "translateY(100%)",
right: "translateY(50%) rotate(90deg) translateX(-50%)",
bottom: `rotate(180deg)`,
left: "translateY(50%) rotate(-90deg) translateX(50%)"
}[contentContext.placedSide],
visibility: contentContext.shouldHideArrow ? "hidden" : void 0
},
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
ArrowPrimitive.Root,
{
...arrowProps,
ref: forwardedRef,
style: {
...arrowProps.style,
// ensures the element can be measured correctly (mostly for if SVG)
display: "block"
}
}
)
}
return { data: { x, y } };
)
);
});
PopperArrow.displayName = ARROW_NAME;
function isNotNull(value) {
return value !== null;
}
var transformOrigin = (options) => ({
name: "transformOrigin",
options,
fn(data) {
const { placement, rects, middlewareData } = data;
const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
const isArrowHidden = cannotCenterArrow;
const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
const noArrowAlign = { start: "0%", center: "50%", end: "100%" }[placedAlign];
const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2;
const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2;
let x = "";
let y = "";
if (placedSide === "bottom") {
x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
y = `${-arrowHeight}px`;
} else if (placedSide === "top") {
x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
y = `${rects.floating.height + arrowHeight}px`;
} else if (placedSide === "right") {
x = `${-arrowHeight}px`;
y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
} else if (placedSide === "left") {
x = `${rects.floating.width + arrowHeight}px`;
y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
}
});
function getSideAndAlignFromPlacement(placement) {
const [side, align = "center"] = placement.split("-");
return [side, align];
return { data: { x, y } };
}
var Root2 = Popper;
var Anchor = PopperAnchor;
var Content = PopperContent;
var Arrow = PopperArrow;
})();
});
function getSideAndAlignFromPlacement(placement) {
const [side, align = "center"] = placement.split("-");
return [side, align];
}
var Root2 = Popper;
var Anchor = PopperAnchor;
var Content = PopperContent;
var Arrow = PopperArrow;
//# sourceMappingURL=index.js.map

20

package.json
{
"name": "@radix-ui/react-popper",
"version": "1.2.0-rc.2",
"version": "1.2.0-rc.3",
"license": "MIT",

@@ -32,11 +32,11 @@ "exports": {

"@floating-ui/react-dom": "^2.0.0",
"@radix-ui/react-arrow": "1.1.0-rc.2",
"@radix-ui/react-compose-refs": "1.1.0-rc.2",
"@radix-ui/react-context": "1.1.0-rc.2",
"@radix-ui/react-primitive": "1.1.0-rc.2",
"@radix-ui/react-use-callback-ref": "1.1.0-rc.2",
"@radix-ui/react-use-layout-effect": "1.1.0-rc.2",
"@radix-ui/react-use-rect": "1.1.0-rc.2",
"@radix-ui/react-use-size": "1.1.0-rc.2",
"@radix-ui/rect": "1.1.0-rc.2"
"@radix-ui/react-arrow": "1.1.0-rc.3",
"@radix-ui/react-compose-refs": "1.1.0-rc.3",
"@radix-ui/react-context": "1.1.0-rc.3",
"@radix-ui/react-primitive": "1.1.0-rc.3",
"@radix-ui/react-use-callback-ref": "1.1.0-rc.3",
"@radix-ui/react-use-layout-effect": "1.1.0-rc.3",
"@radix-ui/react-use-rect": "1.1.0-rc.3",
"@radix-ui/react-use-size": "1.1.0-rc.3",
"@radix-ui/rect": "1.1.0-rc.3"
},

@@ -43,0 +43,0 @@ "peerDependencies": {

dist/index.js.map

Sorry, the diff of this file is not supported yet

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