index.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341
  1. var $50Iv9$babelruntimehelpersextends = require("@babel/runtime/helpers/extends");
  2. var $50Iv9$react = require("react");
  3. var $50Iv9$floatinguireactdom = require("@floating-ui/react-dom");
  4. var $50Iv9$radixuireactarrow = require("@radix-ui/react-arrow");
  5. var $50Iv9$radixuireactcomposerefs = require("@radix-ui/react-compose-refs");
  6. var $50Iv9$radixuireactcontext = require("@radix-ui/react-context");
  7. var $50Iv9$radixuireactprimitive = require("@radix-ui/react-primitive");
  8. var $50Iv9$radixuireactusecallbackref = require("@radix-ui/react-use-callback-ref");
  9. var $50Iv9$radixuireactuselayouteffect = require("@radix-ui/react-use-layout-effect");
  10. var $50Iv9$radixuireactusesize = require("@radix-ui/react-use-size");
  11. function $parcel$export(e, n, v, s) {
  12. Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
  13. }
  14. function $parcel$interopDefault(a) {
  15. return a && a.__esModule ? a.default : a;
  16. }
  17. $parcel$export(module.exports, "createPopperScope", () => $34310caa050a8d63$export$722aac194ae923);
  18. $parcel$export(module.exports, "Popper", () => $34310caa050a8d63$export$badac9ada3a0bdf9);
  19. $parcel$export(module.exports, "PopperAnchor", () => $34310caa050a8d63$export$ecd4e1ccab6ed6d);
  20. $parcel$export(module.exports, "PopperContent", () => $34310caa050a8d63$export$bc4ae5855d3c4fc);
  21. $parcel$export(module.exports, "PopperArrow", () => $34310caa050a8d63$export$79d62cd4e10a3fd0);
  22. $parcel$export(module.exports, "Root", () => $34310caa050a8d63$export$be92b6f5f03c0fe9);
  23. $parcel$export(module.exports, "Anchor", () => $34310caa050a8d63$export$b688253958b8dfe7);
  24. $parcel$export(module.exports, "Content", () => $34310caa050a8d63$export$7c6e2c02157bb7d2);
  25. $parcel$export(module.exports, "Arrow", () => $34310caa050a8d63$export$21b07c8f274aebd5);
  26. $parcel$export(module.exports, "SIDE_OPTIONS", () => $34310caa050a8d63$export$36f0086da09c4b9f);
  27. $parcel$export(module.exports, "ALIGN_OPTIONS", () => $34310caa050a8d63$export$3671ffab7b302fc9);
  28. const $34310caa050a8d63$export$36f0086da09c4b9f = [
  29. 'top',
  30. 'right',
  31. 'bottom',
  32. 'left'
  33. ];
  34. const $34310caa050a8d63$export$3671ffab7b302fc9 = [
  35. 'start',
  36. 'center',
  37. 'end'
  38. ];
  39. /* -------------------------------------------------------------------------------------------------
  40. * Popper
  41. * -----------------------------------------------------------------------------------------------*/ const $34310caa050a8d63$var$POPPER_NAME = 'Popper';
  42. const [$34310caa050a8d63$var$createPopperContext, $34310caa050a8d63$export$722aac194ae923] = $50Iv9$radixuireactcontext.createContextScope($34310caa050a8d63$var$POPPER_NAME);
  43. const [$34310caa050a8d63$var$PopperProvider, $34310caa050a8d63$var$usePopperContext] = $34310caa050a8d63$var$createPopperContext($34310caa050a8d63$var$POPPER_NAME);
  44. const $34310caa050a8d63$export$badac9ada3a0bdf9 = (props)=>{
  45. const { __scopePopper: __scopePopper , children: children } = props;
  46. const [anchor, setAnchor] = $50Iv9$react.useState(null);
  47. return /*#__PURE__*/ $50Iv9$react.createElement($34310caa050a8d63$var$PopperProvider, {
  48. scope: __scopePopper,
  49. anchor: anchor,
  50. onAnchorChange: setAnchor
  51. }, children);
  52. };
  53. /*#__PURE__*/ Object.assign($34310caa050a8d63$export$badac9ada3a0bdf9, {
  54. displayName: $34310caa050a8d63$var$POPPER_NAME
  55. });
  56. /* -------------------------------------------------------------------------------------------------
  57. * PopperAnchor
  58. * -----------------------------------------------------------------------------------------------*/ const $34310caa050a8d63$var$ANCHOR_NAME = 'PopperAnchor';
  59. const $34310caa050a8d63$export$ecd4e1ccab6ed6d = /*#__PURE__*/ $50Iv9$react.forwardRef((props, forwardedRef)=>{
  60. const { __scopePopper: __scopePopper , virtualRef: virtualRef , ...anchorProps } = props;
  61. const context = $34310caa050a8d63$var$usePopperContext($34310caa050a8d63$var$ANCHOR_NAME, __scopePopper);
  62. const ref = $50Iv9$react.useRef(null);
  63. const composedRefs = $50Iv9$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref);
  64. $50Iv9$react.useEffect(()=>{
  65. // Consumer can anchor the popper to something that isn't
  66. // a DOM node e.g. pointer position, so we override the
  67. // `anchorRef` with their virtual ref in this case.
  68. context.onAnchorChange((virtualRef === null || virtualRef === void 0 ? void 0 : virtualRef.current) || ref.current);
  69. });
  70. return virtualRef ? null : /*#__PURE__*/ $50Iv9$react.createElement($50Iv9$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($50Iv9$babelruntimehelpersextends))({}, anchorProps, {
  71. ref: composedRefs
  72. }));
  73. });
  74. /*#__PURE__*/ Object.assign($34310caa050a8d63$export$ecd4e1ccab6ed6d, {
  75. displayName: $34310caa050a8d63$var$ANCHOR_NAME
  76. });
  77. /* -------------------------------------------------------------------------------------------------
  78. * PopperContent
  79. * -----------------------------------------------------------------------------------------------*/ const $34310caa050a8d63$var$CONTENT_NAME = 'PopperContent';
  80. const [$34310caa050a8d63$var$PopperContentProvider, $34310caa050a8d63$var$useContentContext] = $34310caa050a8d63$var$createPopperContext($34310caa050a8d63$var$CONTENT_NAME);
  81. const $34310caa050a8d63$export$bc4ae5855d3c4fc = /*#__PURE__*/ $50Iv9$react.forwardRef((props, forwardedRef)=>{
  82. var _arrowSize$width, _arrowSize$height, _middlewareData$arrow, _middlewareData$arrow2, _middlewareData$arrow3, _middlewareData$trans, _middlewareData$trans2, _middlewareData$hide;
  83. 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;
  84. const context = $34310caa050a8d63$var$usePopperContext($34310caa050a8d63$var$CONTENT_NAME, __scopePopper);
  85. const [content, setContent] = $50Iv9$react.useState(null);
  86. const composedRefs = $50Iv9$radixuireactcomposerefs.useComposedRefs(forwardedRef, (node)=>setContent(node)
  87. );
  88. const [arrow, setArrow] = $50Iv9$react.useState(null);
  89. const arrowSize = $50Iv9$radixuireactusesize.useSize(arrow);
  90. const arrowWidth = (_arrowSize$width = arrowSize === null || arrowSize === void 0 ? void 0 : arrowSize.width) !== null && _arrowSize$width !== void 0 ? _arrowSize$width : 0;
  91. const arrowHeight = (_arrowSize$height = arrowSize === null || arrowSize === void 0 ? void 0 : arrowSize.height) !== null && _arrowSize$height !== void 0 ? _arrowSize$height : 0;
  92. const desiredPlacement = side + (align !== 'center' ? '-' + align : '');
  93. const collisionPadding = typeof collisionPaddingProp === 'number' ? collisionPaddingProp : {
  94. top: 0,
  95. right: 0,
  96. bottom: 0,
  97. left: 0,
  98. ...collisionPaddingProp
  99. };
  100. const boundary = Array.isArray(collisionBoundary) ? collisionBoundary : [
  101. collisionBoundary
  102. ];
  103. const hasExplicitBoundaries = boundary.length > 0;
  104. const detectOverflowOptions = {
  105. padding: collisionPadding,
  106. boundary: boundary.filter($34310caa050a8d63$var$isNotNull),
  107. // with `strategy: 'fixed'`, this is the only way to get it to respect boundaries
  108. altBoundary: hasExplicitBoundaries
  109. };
  110. const { refs: refs , floatingStyles: floatingStyles , placement: placement , isPositioned: isPositioned , middlewareData: middlewareData } = $50Iv9$floatinguireactdom.useFloating({
  111. // default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
  112. strategy: 'fixed',
  113. placement: desiredPlacement,
  114. whileElementsMounted: (...args)=>{
  115. const cleanup = $50Iv9$floatinguireactdom.autoUpdate(...args, {
  116. animationFrame: updatePositionStrategy === 'always'
  117. });
  118. return cleanup;
  119. },
  120. elements: {
  121. reference: context.anchor
  122. },
  123. middleware: [
  124. $50Iv9$floatinguireactdom.offset({
  125. mainAxis: sideOffset + arrowHeight,
  126. alignmentAxis: alignOffset
  127. }),
  128. avoidCollisions && $50Iv9$floatinguireactdom.shift({
  129. mainAxis: true,
  130. crossAxis: false,
  131. limiter: sticky === 'partial' ? $50Iv9$floatinguireactdom.limitShift() : undefined,
  132. ...detectOverflowOptions
  133. }),
  134. avoidCollisions && $50Iv9$floatinguireactdom.flip({
  135. ...detectOverflowOptions
  136. }),
  137. $50Iv9$floatinguireactdom.size({
  138. ...detectOverflowOptions,
  139. apply: ({ elements: elements , rects: rects , availableWidth: availableWidth , availableHeight: availableHeight })=>{
  140. const { width: anchorWidth , height: anchorHeight } = rects.reference;
  141. const contentStyle = elements.floating.style;
  142. contentStyle.setProperty('--radix-popper-available-width', `${availableWidth}px`);
  143. contentStyle.setProperty('--radix-popper-available-height', `${availableHeight}px`);
  144. contentStyle.setProperty('--radix-popper-anchor-width', `${anchorWidth}px`);
  145. contentStyle.setProperty('--radix-popper-anchor-height', `${anchorHeight}px`);
  146. }
  147. }),
  148. arrow && $50Iv9$floatinguireactdom.arrow({
  149. element: arrow,
  150. padding: arrowPadding
  151. }),
  152. $34310caa050a8d63$var$transformOrigin({
  153. arrowWidth: arrowWidth,
  154. arrowHeight: arrowHeight
  155. }),
  156. hideWhenDetached && $50Iv9$floatinguireactdom.hide({
  157. strategy: 'referenceHidden',
  158. ...detectOverflowOptions
  159. })
  160. ]
  161. });
  162. const [placedSide, placedAlign] = $34310caa050a8d63$var$getSideAndAlignFromPlacement(placement);
  163. const handlePlaced = $50Iv9$radixuireactusecallbackref.useCallbackRef(onPlaced);
  164. $50Iv9$radixuireactuselayouteffect.useLayoutEffect(()=>{
  165. if (isPositioned) handlePlaced === null || handlePlaced === void 0 || handlePlaced();
  166. }, [
  167. isPositioned,
  168. handlePlaced
  169. ]);
  170. const arrowX = (_middlewareData$arrow = middlewareData.arrow) === null || _middlewareData$arrow === void 0 ? void 0 : _middlewareData$arrow.x;
  171. const arrowY = (_middlewareData$arrow2 = middlewareData.arrow) === null || _middlewareData$arrow2 === void 0 ? void 0 : _middlewareData$arrow2.y;
  172. const cannotCenterArrow = ((_middlewareData$arrow3 = middlewareData.arrow) === null || _middlewareData$arrow3 === void 0 ? void 0 : _middlewareData$arrow3.centerOffset) !== 0;
  173. const [contentZIndex, setContentZIndex] = $50Iv9$react.useState();
  174. $50Iv9$radixuireactuselayouteffect.useLayoutEffect(()=>{
  175. if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
  176. }, [
  177. content
  178. ]);
  179. return /*#__PURE__*/ $50Iv9$react.createElement("div", {
  180. ref: refs.setFloating,
  181. "data-radix-popper-content-wrapper": "",
  182. style: {
  183. ...floatingStyles,
  184. transform: isPositioned ? floatingStyles.transform : 'translate(0, -200%)',
  185. // keep off the page when measuring
  186. minWidth: 'max-content',
  187. zIndex: contentZIndex,
  188. ['--radix-popper-transform-origin']: [
  189. (_middlewareData$trans = middlewareData.transformOrigin) === null || _middlewareData$trans === void 0 ? void 0 : _middlewareData$trans.x,
  190. (_middlewareData$trans2 = middlewareData.transformOrigin) === null || _middlewareData$trans2 === void 0 ? void 0 : _middlewareData$trans2.y
  191. ].join(' ')
  192. } // Floating UI interally calculates logical alignment based the `dir` attribute on
  193. ,
  194. dir: props.dir
  195. }, /*#__PURE__*/ $50Iv9$react.createElement($34310caa050a8d63$var$PopperContentProvider, {
  196. scope: __scopePopper,
  197. placedSide: placedSide,
  198. onArrowChange: setArrow,
  199. arrowX: arrowX,
  200. arrowY: arrowY,
  201. shouldHideArrow: cannotCenterArrow
  202. }, /*#__PURE__*/ $50Iv9$react.createElement($50Iv9$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($50Iv9$babelruntimehelpersextends))({
  203. "data-side": placedSide,
  204. "data-align": placedAlign
  205. }, contentProps, {
  206. ref: composedRefs,
  207. style: {
  208. ...contentProps.style,
  209. // if the PopperContent hasn't been placed yet (not all measurements done)
  210. // we prevent animations so that users's animation don't kick in too early referring wrong sides
  211. animation: !isPositioned ? 'none' : undefined,
  212. // hide the content if using the hide middleware and should be hidden
  213. opacity: (_middlewareData$hide = middlewareData.hide) !== null && _middlewareData$hide !== void 0 && _middlewareData$hide.referenceHidden ? 0 : undefined
  214. }
  215. }))));
  216. });
  217. /*#__PURE__*/ Object.assign($34310caa050a8d63$export$bc4ae5855d3c4fc, {
  218. displayName: $34310caa050a8d63$var$CONTENT_NAME
  219. });
  220. /* -------------------------------------------------------------------------------------------------
  221. * PopperArrow
  222. * -----------------------------------------------------------------------------------------------*/ const $34310caa050a8d63$var$ARROW_NAME = 'PopperArrow';
  223. const $34310caa050a8d63$var$OPPOSITE_SIDE = {
  224. top: 'bottom',
  225. right: 'left',
  226. bottom: 'top',
  227. left: 'right'
  228. };
  229. const $34310caa050a8d63$export$79d62cd4e10a3fd0 = /*#__PURE__*/ $50Iv9$react.forwardRef(function $34310caa050a8d63$export$79d62cd4e10a3fd0(props, forwardedRef) {
  230. const { __scopePopper: __scopePopper , ...arrowProps } = props;
  231. const contentContext = $34310caa050a8d63$var$useContentContext($34310caa050a8d63$var$ARROW_NAME, __scopePopper);
  232. const baseSide = $34310caa050a8d63$var$OPPOSITE_SIDE[contentContext.placedSide];
  233. return(/*#__PURE__*/ // we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)
  234. // doesn't report size as we'd expect on SVG elements.
  235. // it reports their bounding box which is effectively the largest path inside the SVG.
  236. $50Iv9$react.createElement("span", {
  237. ref: contentContext.onArrowChange,
  238. style: {
  239. position: 'absolute',
  240. left: contentContext.arrowX,
  241. top: contentContext.arrowY,
  242. [baseSide]: 0,
  243. transformOrigin: {
  244. top: '',
  245. right: '0 0',
  246. bottom: 'center 0',
  247. left: '100% 0'
  248. }[contentContext.placedSide],
  249. transform: {
  250. top: 'translateY(100%)',
  251. right: 'translateY(50%) rotate(90deg) translateX(-50%)',
  252. bottom: `rotate(180deg)`,
  253. left: 'translateY(50%) rotate(-90deg) translateX(50%)'
  254. }[contentContext.placedSide],
  255. visibility: contentContext.shouldHideArrow ? 'hidden' : undefined
  256. }
  257. }, /*#__PURE__*/ $50Iv9$react.createElement($50Iv9$radixuireactarrow.Root, ($parcel$interopDefault($50Iv9$babelruntimehelpersextends))({}, arrowProps, {
  258. ref: forwardedRef,
  259. style: {
  260. ...arrowProps.style,
  261. // ensures the element can be measured correctly (mostly for if SVG)
  262. display: 'block'
  263. }
  264. }))));
  265. });
  266. /*#__PURE__*/ Object.assign($34310caa050a8d63$export$79d62cd4e10a3fd0, {
  267. displayName: $34310caa050a8d63$var$ARROW_NAME
  268. });
  269. /* -----------------------------------------------------------------------------------------------*/ function $34310caa050a8d63$var$isNotNull(value) {
  270. return value !== null;
  271. }
  272. const $34310caa050a8d63$var$transformOrigin = (options)=>({
  273. name: 'transformOrigin',
  274. options: options,
  275. fn (data) {
  276. var _middlewareData$arrow4, _middlewareData$arrow5, _middlewareData$arrow6, _middlewareData$arrow7, _middlewareData$arrow8;
  277. const { placement: placement , rects: rects , middlewareData: middlewareData } = data;
  278. const cannotCenterArrow = ((_middlewareData$arrow4 = middlewareData.arrow) === null || _middlewareData$arrow4 === void 0 ? void 0 : _middlewareData$arrow4.centerOffset) !== 0;
  279. const isArrowHidden = cannotCenterArrow;
  280. const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
  281. const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
  282. const [placedSide, placedAlign] = $34310caa050a8d63$var$getSideAndAlignFromPlacement(placement);
  283. const noArrowAlign = {
  284. start: '0%',
  285. center: '50%',
  286. end: '100%'
  287. }[placedAlign];
  288. 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;
  289. 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;
  290. let x = '';
  291. let y = '';
  292. if (placedSide === 'bottom') {
  293. x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
  294. y = `${-arrowHeight}px`;
  295. } else if (placedSide === 'top') {
  296. x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
  297. y = `${rects.floating.height + arrowHeight}px`;
  298. } else if (placedSide === 'right') {
  299. x = `${-arrowHeight}px`;
  300. y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
  301. } else if (placedSide === 'left') {
  302. x = `${rects.floating.width + arrowHeight}px`;
  303. y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
  304. }
  305. return {
  306. data: {
  307. x: x,
  308. y: y
  309. }
  310. };
  311. }
  312. })
  313. ;
  314. function $34310caa050a8d63$var$getSideAndAlignFromPlacement(placement) {
  315. const [side, align = 'center'] = placement.split('-');
  316. return [
  317. side,
  318. align
  319. ];
  320. }
  321. const $34310caa050a8d63$export$be92b6f5f03c0fe9 = $34310caa050a8d63$export$badac9ada3a0bdf9;
  322. const $34310caa050a8d63$export$b688253958b8dfe7 = $34310caa050a8d63$export$ecd4e1ccab6ed6d;
  323. const $34310caa050a8d63$export$7c6e2c02157bb7d2 = $34310caa050a8d63$export$bc4ae5855d3c4fc;
  324. const $34310caa050a8d63$export$21b07c8f274aebd5 = $34310caa050a8d63$export$79d62cd4e10a3fd0;
  325. //# sourceMappingURL=index.js.map