326 lines
13 KiB
JavaScript
326 lines
13 KiB
JavaScript
"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 __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/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"
|
|
}
|
|
},
|
|
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`;
|
|
}
|
|
return { data: { x, y } };
|
|
}
|
|
});
|
|
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
|