342 lines
18 KiB
JavaScript
342 lines
18 KiB
JavaScript
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
|