index.mjs 18 KB

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