var $50Iv9$babelruntimehelpersextends = require("@babel/runtime/helpers/extends"); var $50Iv9$react = require("react"); var $50Iv9$floatinguireactdom = require("@floating-ui/react-dom"); var $50Iv9$radixuireactarrow = require("@radix-ui/react-arrow"); var $50Iv9$radixuireactcomposerefs = require("@radix-ui/react-compose-refs"); var $50Iv9$radixuireactcontext = require("@radix-ui/react-context"); var $50Iv9$radixuireactprimitive = require("@radix-ui/react-primitive"); var $50Iv9$radixuireactusecallbackref = require("@radix-ui/react-use-callback-ref"); var $50Iv9$radixuireactuselayouteffect = require("@radix-ui/react-use-layout-effect"); var $50Iv9$radixuireactusesize = require("@radix-ui/react-use-size"); function $parcel$export(e, n, v, s) { Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true}); } function $parcel$interopDefault(a) { return a && a.__esModule ? a.default : a; } $parcel$export(module.exports, "createPopperScope", () => $34310caa050a8d63$export$722aac194ae923); $parcel$export(module.exports, "Popper", () => $34310caa050a8d63$export$badac9ada3a0bdf9); $parcel$export(module.exports, "PopperAnchor", () => $34310caa050a8d63$export$ecd4e1ccab6ed6d); $parcel$export(module.exports, "PopperContent", () => $34310caa050a8d63$export$bc4ae5855d3c4fc); $parcel$export(module.exports, "PopperArrow", () => $34310caa050a8d63$export$79d62cd4e10a3fd0); $parcel$export(module.exports, "Root", () => $34310caa050a8d63$export$be92b6f5f03c0fe9); $parcel$export(module.exports, "Anchor", () => $34310caa050a8d63$export$b688253958b8dfe7); $parcel$export(module.exports, "Content", () => $34310caa050a8d63$export$7c6e2c02157bb7d2); $parcel$export(module.exports, "Arrow", () => $34310caa050a8d63$export$21b07c8f274aebd5); $parcel$export(module.exports, "SIDE_OPTIONS", () => $34310caa050a8d63$export$36f0086da09c4b9f); $parcel$export(module.exports, "ALIGN_OPTIONS", () => $34310caa050a8d63$export$3671ffab7b302fc9); const $34310caa050a8d63$export$36f0086da09c4b9f = [ 'top', 'right', 'bottom', 'left' ]; const $34310caa050a8d63$export$3671ffab7b302fc9 = [ 'start', 'center', 'end' ]; /* ------------------------------------------------------------------------------------------------- * Popper * -----------------------------------------------------------------------------------------------*/ const $34310caa050a8d63$var$POPPER_NAME = 'Popper'; const [$34310caa050a8d63$var$createPopperContext, $34310caa050a8d63$export$722aac194ae923] = $50Iv9$radixuireactcontext.createContextScope($34310caa050a8d63$var$POPPER_NAME); const [$34310caa050a8d63$var$PopperProvider, $34310caa050a8d63$var$usePopperContext] = $34310caa050a8d63$var$createPopperContext($34310caa050a8d63$var$POPPER_NAME); const $34310caa050a8d63$export$badac9ada3a0bdf9 = (props)=>{ const { __scopePopper: __scopePopper , children: children } = props; const [anchor, setAnchor] = $50Iv9$react.useState(null); return /*#__PURE__*/ $50Iv9$react.createElement($34310caa050a8d63$var$PopperProvider, { scope: __scopePopper, anchor: anchor, onAnchorChange: setAnchor }, children); }; /*#__PURE__*/ Object.assign($34310caa050a8d63$export$badac9ada3a0bdf9, { displayName: $34310caa050a8d63$var$POPPER_NAME }); /* ------------------------------------------------------------------------------------------------- * PopperAnchor * -----------------------------------------------------------------------------------------------*/ const $34310caa050a8d63$var$ANCHOR_NAME = 'PopperAnchor'; const $34310caa050a8d63$export$ecd4e1ccab6ed6d = /*#__PURE__*/ $50Iv9$react.forwardRef((props, forwardedRef)=>{ const { __scopePopper: __scopePopper , virtualRef: virtualRef , ...anchorProps } = props; const context = $34310caa050a8d63$var$usePopperContext($34310caa050a8d63$var$ANCHOR_NAME, __scopePopper); const ref = $50Iv9$react.useRef(null); const composedRefs = $50Iv9$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref); $50Iv9$react.useEffect(()=>{ // Consumer can anchor the popper to something that isn't // a DOM node e.g. pointer position, so we override the // `anchorRef` with their virtual ref in this case. context.onAnchorChange((virtualRef === null || virtualRef === void 0 ? void 0 : virtualRef.current) || ref.current); }); return virtualRef ? null : /*#__PURE__*/ $50Iv9$react.createElement($50Iv9$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($50Iv9$babelruntimehelpersextends))({}, anchorProps, { ref: composedRefs })); }); /*#__PURE__*/ Object.assign($34310caa050a8d63$export$ecd4e1ccab6ed6d, { displayName: $34310caa050a8d63$var$ANCHOR_NAME }); /* ------------------------------------------------------------------------------------------------- * PopperContent * -----------------------------------------------------------------------------------------------*/ const $34310caa050a8d63$var$CONTENT_NAME = 'PopperContent'; const [$34310caa050a8d63$var$PopperContentProvider, $34310caa050a8d63$var$useContentContext] = $34310caa050a8d63$var$createPopperContext($34310caa050a8d63$var$CONTENT_NAME); const $34310caa050a8d63$export$bc4ae5855d3c4fc = /*#__PURE__*/ $50Iv9$react.forwardRef((props, forwardedRef)=>{ var _arrowSize$width, _arrowSize$height, _middlewareData$arrow, _middlewareData$arrow2, _middlewareData$arrow3, _middlewareData$trans, _middlewareData$trans2, _middlewareData$hide; const { __scopePopper: __scopePopper , side: side = 'bottom' , sideOffset: sideOffset = 0 , align: align = 'center' , alignOffset: alignOffset = 0 , arrowPadding: arrowPadding = 0 , avoidCollisions: avoidCollisions = true , collisionBoundary: collisionBoundary = [] , collisionPadding: collisionPaddingProp = 0 , sticky: sticky = 'partial' , hideWhenDetached: hideWhenDetached = false , updatePositionStrategy: updatePositionStrategy = 'optimized' , onPlaced: onPlaced , ...contentProps } = props; const context = $34310caa050a8d63$var$usePopperContext($34310caa050a8d63$var$CONTENT_NAME, __scopePopper); const [content, setContent] = $50Iv9$react.useState(null); const composedRefs = $50Iv9$radixuireactcomposerefs.useComposedRefs(forwardedRef, (node)=>setContent(node) ); const [arrow, setArrow] = $50Iv9$react.useState(null); const arrowSize = $50Iv9$radixuireactusesize.useSize(arrow); const arrowWidth = (_arrowSize$width = arrowSize === null || arrowSize === void 0 ? void 0 : arrowSize.width) !== null && _arrowSize$width !== void 0 ? _arrowSize$width : 0; const arrowHeight = (_arrowSize$height = arrowSize === null || arrowSize === void 0 ? void 0 : arrowSize.height) !== null && _arrowSize$height !== void 0 ? _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($34310caa050a8d63$var$isNotNull), // with `strategy: 'fixed'`, this is the only way to get it to respect boundaries altBoundary: hasExplicitBoundaries }; const { refs: refs , floatingStyles: floatingStyles , placement: placement , isPositioned: isPositioned , middlewareData: middlewareData } = $50Iv9$floatinguireactdom.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 = $50Iv9$floatinguireactdom.autoUpdate(...args, { animationFrame: updatePositionStrategy === 'always' }); return cleanup; }, elements: { reference: context.anchor }, middleware: [ $50Iv9$floatinguireactdom.offset({ mainAxis: sideOffset + arrowHeight, alignmentAxis: alignOffset }), avoidCollisions && $50Iv9$floatinguireactdom.shift({ mainAxis: true, crossAxis: false, limiter: sticky === 'partial' ? $50Iv9$floatinguireactdom.limitShift() : undefined, ...detectOverflowOptions }), avoidCollisions && $50Iv9$floatinguireactdom.flip({ ...detectOverflowOptions }), $50Iv9$floatinguireactdom.size({ ...detectOverflowOptions, apply: ({ elements: elements , rects: rects , availableWidth: availableWidth , availableHeight: 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 && $50Iv9$floatinguireactdom.arrow({ element: arrow, padding: arrowPadding }), $34310caa050a8d63$var$transformOrigin({ arrowWidth: arrowWidth, arrowHeight: arrowHeight }), hideWhenDetached && $50Iv9$floatinguireactdom.hide({ strategy: 'referenceHidden', ...detectOverflowOptions }) ] }); const [placedSide, placedAlign] = $34310caa050a8d63$var$getSideAndAlignFromPlacement(placement); const handlePlaced = $50Iv9$radixuireactusecallbackref.useCallbackRef(onPlaced); $50Iv9$radixuireactuselayouteffect.useLayoutEffect(()=>{ if (isPositioned) handlePlaced === null || handlePlaced === void 0 || handlePlaced(); }, [ isPositioned, handlePlaced ]); const arrowX = (_middlewareData$arrow = middlewareData.arrow) === null || _middlewareData$arrow === void 0 ? void 0 : _middlewareData$arrow.x; const arrowY = (_middlewareData$arrow2 = middlewareData.arrow) === null || _middlewareData$arrow2 === void 0 ? void 0 : _middlewareData$arrow2.y; const cannotCenterArrow = ((_middlewareData$arrow3 = middlewareData.arrow) === null || _middlewareData$arrow3 === void 0 ? void 0 : _middlewareData$arrow3.centerOffset) !== 0; const [contentZIndex, setContentZIndex] = $50Iv9$react.useState(); $50Iv9$radixuireactuselayouteffect.useLayoutEffect(()=>{ if (content) setContentZIndex(window.getComputedStyle(content).zIndex); }, [ content ]); return /*#__PURE__*/ $50Iv9$react.createElement("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$trans = middlewareData.transformOrigin) === null || _middlewareData$trans === void 0 ? void 0 : _middlewareData$trans.x, (_middlewareData$trans2 = middlewareData.transformOrigin) === null || _middlewareData$trans2 === void 0 ? void 0 : _middlewareData$trans2.y ].join(' ') } // Floating UI interally calculates logical alignment based the `dir` attribute on , dir: props.dir }, /*#__PURE__*/ $50Iv9$react.createElement($34310caa050a8d63$var$PopperContentProvider, { scope: __scopePopper, placedSide: placedSide, onArrowChange: setArrow, arrowX: arrowX, arrowY: arrowY, shouldHideArrow: cannotCenterArrow }, /*#__PURE__*/ $50Iv9$react.createElement($50Iv9$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($50Iv9$babelruntimehelpersextends))({ "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' : undefined, // hide the content if using the hide middleware and should be hidden opacity: (_middlewareData$hide = middlewareData.hide) !== null && _middlewareData$hide !== void 0 && _middlewareData$hide.referenceHidden ? 0 : undefined } })))); }); /*#__PURE__*/ Object.assign($34310caa050a8d63$export$bc4ae5855d3c4fc, { displayName: $34310caa050a8d63$var$CONTENT_NAME }); /* ------------------------------------------------------------------------------------------------- * PopperArrow * -----------------------------------------------------------------------------------------------*/ const $34310caa050a8d63$var$ARROW_NAME = 'PopperArrow'; const $34310caa050a8d63$var$OPPOSITE_SIDE = { top: 'bottom', right: 'left', bottom: 'top', left: 'right' }; const $34310caa050a8d63$export$79d62cd4e10a3fd0 = /*#__PURE__*/ $50Iv9$react.forwardRef(function $34310caa050a8d63$export$79d62cd4e10a3fd0(props, forwardedRef) { const { __scopePopper: __scopePopper , ...arrowProps } = props; const contentContext = $34310caa050a8d63$var$useContentContext($34310caa050a8d63$var$ARROW_NAME, __scopePopper); const baseSide = $34310caa050a8d63$var$OPPOSITE_SIDE[contentContext.placedSide]; return(/*#__PURE__*/ // 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. $50Iv9$react.createElement("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' : undefined } }, /*#__PURE__*/ $50Iv9$react.createElement($50Iv9$radixuireactarrow.Root, ($parcel$interopDefault($50Iv9$babelruntimehelpersextends))({}, arrowProps, { ref: forwardedRef, style: { ...arrowProps.style, // ensures the element can be measured correctly (mostly for if SVG) display: 'block' } })))); }); /*#__PURE__*/ Object.assign($34310caa050a8d63$export$79d62cd4e10a3fd0, { displayName: $34310caa050a8d63$var$ARROW_NAME }); /* -----------------------------------------------------------------------------------------------*/ function $34310caa050a8d63$var$isNotNull(value) { return value !== null; } const $34310caa050a8d63$var$transformOrigin = (options)=>({ name: 'transformOrigin', options: options, fn (data) { var _middlewareData$arrow4, _middlewareData$arrow5, _middlewareData$arrow6, _middlewareData$arrow7, _middlewareData$arrow8; const { placement: placement , rects: rects , middlewareData: middlewareData } = data; const cannotCenterArrow = ((_middlewareData$arrow4 = middlewareData.arrow) === null || _middlewareData$arrow4 === void 0 ? void 0 : _middlewareData$arrow4.centerOffset) !== 0; const isArrowHidden = cannotCenterArrow; const arrowWidth = isArrowHidden ? 0 : options.arrowWidth; const arrowHeight = isArrowHidden ? 0 : options.arrowHeight; const [placedSide, placedAlign] = $34310caa050a8d63$var$getSideAndAlignFromPlacement(placement); const noArrowAlign = { start: '0%', center: '50%', end: '100%' }[placedAlign]; const arrowXCenter = ((_middlewareData$arrow5 = (_middlewareData$arrow6 = middlewareData.arrow) === null || _middlewareData$arrow6 === void 0 ? void 0 : _middlewareData$arrow6.x) !== null && _middlewareData$arrow5 !== void 0 ? _middlewareData$arrow5 : 0) + arrowWidth / 2; const arrowYCenter = ((_middlewareData$arrow7 = (_middlewareData$arrow8 = middlewareData.arrow) === null || _middlewareData$arrow8 === void 0 ? void 0 : _middlewareData$arrow8.y) !== null && _middlewareData$arrow7 !== void 0 ? _middlewareData$arrow7 : 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: x, y: y } }; } }) ; function $34310caa050a8d63$var$getSideAndAlignFromPlacement(placement) { const [side, align = 'center'] = placement.split('-'); return [ side, align ]; } const $34310caa050a8d63$export$be92b6f5f03c0fe9 = $34310caa050a8d63$export$badac9ada3a0bdf9; const $34310caa050a8d63$export$b688253958b8dfe7 = $34310caa050a8d63$export$ecd4e1ccab6ed6d; const $34310caa050a8d63$export$7c6e2c02157bb7d2 = $34310caa050a8d63$export$bc4ae5855d3c4fc; const $34310caa050a8d63$export$21b07c8f274aebd5 = $34310caa050a8d63$export$79d62cd4e10a3fd0; //# sourceMappingURL=index.js.map