| "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( |
| |
| |
| |
| |
| isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, |
| mod |
| )); |
| var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod); |
|
|
| |
| 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); |
|
|
| |
| 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 (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 : (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), |
| |
| altBoundary: hasExplicitBoundaries |
| }; |
| const { refs, floatingStyles, placement, isPositioned, middlewareData } = (0, import_react_dom.useFloating)({ |
| |
| 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 (0, import_jsx_runtime.jsx)( |
| "div", |
| { |
| ref: refs.setFloating, |
| "data-radix-popper-content-wrapper": "", |
| style: { |
| ...floatingStyles, |
| transform: isPositioned ? floatingStyles.transform : "translate(0, -200%)", |
| |
| minWidth: "max-content", |
| zIndex: contentZIndex, |
| ["--radix-popper-transform-origin"]: [ |
| middlewareData.transformOrigin?.x, |
| middlewareData.transformOrigin?.y |
| ].join(" "), |
| |
| |
| |
| ...middlewareData.hide?.referenceHidden && { |
| visibility: "hidden", |
| pointerEvents: "none" |
| } |
| }, |
| dir: props.dir, |
| children: (0, import_jsx_runtime.jsx)( |
| PopperContentProvider, |
| { |
| scope: __scopePopper, |
| placedSide, |
| onArrowChange: setArrow, |
| arrowX, |
| arrowY, |
| shouldHideArrow: cannotCenterArrow, |
| children: (0, import_jsx_runtime.jsx)( |
| import_react_primitive.Primitive.div, |
| { |
| "data-side": placedSide, |
| "data-align": placedAlign, |
| ...contentProps, |
| ref: composedRefs, |
| style: { |
| ...contentProps.style, |
| |
| |
| 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 ( |
| |
| |
| |
| (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: (0, import_jsx_runtime.jsx)( |
| ArrowPrimitive.Root, |
| { |
| ...arrowProps, |
| ref: forwardedRef, |
| style: { |
| ...arrowProps.style, |
| |
| 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; |
| |
|
|