floating-ui.core.browser.mjs 37 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141
  1. /**
  2. * Custom positioning reference element.
  3. * @see https://floating-ui.com/docs/virtual-elements
  4. */
  5. const sides = ['top', 'right', 'bottom', 'left'];
  6. const alignments = ['start', 'end'];
  7. const placements = /*#__PURE__*/sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
  8. const min = Math.min;
  9. const max = Math.max;
  10. const oppositeSideMap = {
  11. left: 'right',
  12. right: 'left',
  13. bottom: 'top',
  14. top: 'bottom'
  15. };
  16. const oppositeAlignmentMap = {
  17. start: 'end',
  18. end: 'start'
  19. };
  20. function clamp(start, value, end) {
  21. return max(start, min(value, end));
  22. }
  23. function evaluate(value, param) {
  24. return typeof value === 'function' ? value(param) : value;
  25. }
  26. function getSide(placement) {
  27. return placement.split('-')[0];
  28. }
  29. function getAlignment(placement) {
  30. return placement.split('-')[1];
  31. }
  32. function getOppositeAxis(axis) {
  33. return axis === 'x' ? 'y' : 'x';
  34. }
  35. function getAxisLength(axis) {
  36. return axis === 'y' ? 'height' : 'width';
  37. }
  38. function getSideAxis(placement) {
  39. return ['top', 'bottom'].includes(getSide(placement)) ? 'y' : 'x';
  40. }
  41. function getAlignmentAxis(placement) {
  42. return getOppositeAxis(getSideAxis(placement));
  43. }
  44. function getAlignmentSides(placement, rects, rtl) {
  45. if (rtl === void 0) {
  46. rtl = false;
  47. }
  48. const alignment = getAlignment(placement);
  49. const alignmentAxis = getAlignmentAxis(placement);
  50. const length = getAxisLength(alignmentAxis);
  51. let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
  52. if (rects.reference[length] > rects.floating[length]) {
  53. mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
  54. }
  55. return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
  56. }
  57. function getExpandedPlacements(placement) {
  58. const oppositePlacement = getOppositePlacement(placement);
  59. return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
  60. }
  61. function getOppositeAlignmentPlacement(placement) {
  62. return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
  63. }
  64. function getSideList(side, isStart, rtl) {
  65. const lr = ['left', 'right'];
  66. const rl = ['right', 'left'];
  67. const tb = ['top', 'bottom'];
  68. const bt = ['bottom', 'top'];
  69. switch (side) {
  70. case 'top':
  71. case 'bottom':
  72. if (rtl) return isStart ? rl : lr;
  73. return isStart ? lr : rl;
  74. case 'left':
  75. case 'right':
  76. return isStart ? tb : bt;
  77. default:
  78. return [];
  79. }
  80. }
  81. function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
  82. const alignment = getAlignment(placement);
  83. let list = getSideList(getSide(placement), direction === 'start', rtl);
  84. if (alignment) {
  85. list = list.map(side => side + "-" + alignment);
  86. if (flipAlignment) {
  87. list = list.concat(list.map(getOppositeAlignmentPlacement));
  88. }
  89. }
  90. return list;
  91. }
  92. function getOppositePlacement(placement) {
  93. return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
  94. }
  95. function expandPaddingObject(padding) {
  96. return {
  97. top: 0,
  98. right: 0,
  99. bottom: 0,
  100. left: 0,
  101. ...padding
  102. };
  103. }
  104. function getPaddingObject(padding) {
  105. return typeof padding !== 'number' ? expandPaddingObject(padding) : {
  106. top: padding,
  107. right: padding,
  108. bottom: padding,
  109. left: padding
  110. };
  111. }
  112. function rectToClientRect(rect) {
  113. return {
  114. ...rect,
  115. top: rect.y,
  116. left: rect.x,
  117. right: rect.x + rect.width,
  118. bottom: rect.y + rect.height
  119. };
  120. }
  121. function computeCoordsFromPlacement(_ref, placement, rtl) {
  122. let {
  123. reference,
  124. floating
  125. } = _ref;
  126. const sideAxis = getSideAxis(placement);
  127. const alignmentAxis = getAlignmentAxis(placement);
  128. const alignLength = getAxisLength(alignmentAxis);
  129. const side = getSide(placement);
  130. const isVertical = sideAxis === 'y';
  131. const commonX = reference.x + reference.width / 2 - floating.width / 2;
  132. const commonY = reference.y + reference.height / 2 - floating.height / 2;
  133. const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
  134. let coords;
  135. switch (side) {
  136. case 'top':
  137. coords = {
  138. x: commonX,
  139. y: reference.y - floating.height
  140. };
  141. break;
  142. case 'bottom':
  143. coords = {
  144. x: commonX,
  145. y: reference.y + reference.height
  146. };
  147. break;
  148. case 'right':
  149. coords = {
  150. x: reference.x + reference.width,
  151. y: commonY
  152. };
  153. break;
  154. case 'left':
  155. coords = {
  156. x: reference.x - floating.width,
  157. y: commonY
  158. };
  159. break;
  160. default:
  161. coords = {
  162. x: reference.x,
  163. y: reference.y
  164. };
  165. }
  166. switch (getAlignment(placement)) {
  167. case 'start':
  168. coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
  169. break;
  170. case 'end':
  171. coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
  172. break;
  173. }
  174. return coords;
  175. }
  176. /**
  177. * Computes the `x` and `y` coordinates that will place the floating element
  178. * next to a given reference element.
  179. *
  180. * This export does not have any `platform` interface logic. You will need to
  181. * write one for the platform you are using Floating UI with.
  182. */
  183. const computePosition = async (reference, floating, config) => {
  184. const {
  185. placement = 'bottom',
  186. strategy = 'absolute',
  187. middleware = [],
  188. platform
  189. } = config;
  190. const validMiddleware = middleware.filter(Boolean);
  191. const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
  192. let rects = await platform.getElementRects({
  193. reference,
  194. floating,
  195. strategy
  196. });
  197. let {
  198. x,
  199. y
  200. } = computeCoordsFromPlacement(rects, placement, rtl);
  201. let statefulPlacement = placement;
  202. let middlewareData = {};
  203. let resetCount = 0;
  204. for (let i = 0; i < validMiddleware.length; i++) {
  205. const {
  206. name,
  207. fn
  208. } = validMiddleware[i];
  209. const {
  210. x: nextX,
  211. y: nextY,
  212. data,
  213. reset
  214. } = await fn({
  215. x,
  216. y,
  217. initialPlacement: placement,
  218. placement: statefulPlacement,
  219. strategy,
  220. middlewareData,
  221. rects,
  222. platform,
  223. elements: {
  224. reference,
  225. floating
  226. }
  227. });
  228. x = nextX != null ? nextX : x;
  229. y = nextY != null ? nextY : y;
  230. middlewareData = {
  231. ...middlewareData,
  232. [name]: {
  233. ...middlewareData[name],
  234. ...data
  235. }
  236. };
  237. if (reset && resetCount <= 50) {
  238. resetCount++;
  239. if (typeof reset === 'object') {
  240. if (reset.placement) {
  241. statefulPlacement = reset.placement;
  242. }
  243. if (reset.rects) {
  244. rects = reset.rects === true ? await platform.getElementRects({
  245. reference,
  246. floating,
  247. strategy
  248. }) : reset.rects;
  249. }
  250. ({
  251. x,
  252. y
  253. } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
  254. }
  255. i = -1;
  256. }
  257. }
  258. return {
  259. x,
  260. y,
  261. placement: statefulPlacement,
  262. strategy,
  263. middlewareData
  264. };
  265. };
  266. /**
  267. * Resolves with an object of overflow side offsets that determine how much the
  268. * element is overflowing a given clipping boundary on each side.
  269. * - positive = overflowing the boundary by that number of pixels
  270. * - negative = how many pixels left before it will overflow
  271. * - 0 = lies flush with the boundary
  272. * @see https://floating-ui.com/docs/detectOverflow
  273. */
  274. async function detectOverflow(state, options) {
  275. var _await$platform$isEle;
  276. if (options === void 0) {
  277. options = {};
  278. }
  279. const {
  280. x,
  281. y,
  282. platform,
  283. rects,
  284. elements,
  285. strategy
  286. } = state;
  287. const {
  288. boundary = 'clippingAncestors',
  289. rootBoundary = 'viewport',
  290. elementContext = 'floating',
  291. altBoundary = false,
  292. padding = 0
  293. } = evaluate(options, state);
  294. const paddingObject = getPaddingObject(padding);
  295. const altContext = elementContext === 'floating' ? 'reference' : 'floating';
  296. const element = elements[altBoundary ? altContext : elementContext];
  297. const clippingClientRect = rectToClientRect(await platform.getClippingRect({
  298. element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
  299. boundary,
  300. rootBoundary,
  301. strategy
  302. }));
  303. const rect = elementContext === 'floating' ? {
  304. ...rects.floating,
  305. x,
  306. y
  307. } : rects.reference;
  308. const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
  309. const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
  310. x: 1,
  311. y: 1
  312. } : {
  313. x: 1,
  314. y: 1
  315. };
  316. const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
  317. elements,
  318. rect,
  319. offsetParent,
  320. strategy
  321. }) : rect);
  322. return {
  323. top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
  324. bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
  325. left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
  326. right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
  327. };
  328. }
  329. /**
  330. * Provides data to position an inner element of the floating element so that it
  331. * appears centered to the reference element.
  332. * @see https://floating-ui.com/docs/arrow
  333. */
  334. const arrow = options => ({
  335. name: 'arrow',
  336. options,
  337. async fn(state) {
  338. const {
  339. x,
  340. y,
  341. placement,
  342. rects,
  343. platform,
  344. elements,
  345. middlewareData
  346. } = state;
  347. // Since `element` is required, we don't Partial<> the type.
  348. const {
  349. element,
  350. padding = 0
  351. } = evaluate(options, state) || {};
  352. if (element == null) {
  353. return {};
  354. }
  355. const paddingObject = getPaddingObject(padding);
  356. const coords = {
  357. x,
  358. y
  359. };
  360. const axis = getAlignmentAxis(placement);
  361. const length = getAxisLength(axis);
  362. const arrowDimensions = await platform.getDimensions(element);
  363. const isYAxis = axis === 'y';
  364. const minProp = isYAxis ? 'top' : 'left';
  365. const maxProp = isYAxis ? 'bottom' : 'right';
  366. const clientProp = isYAxis ? 'clientHeight' : 'clientWidth';
  367. const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
  368. const startDiff = coords[axis] - rects.reference[axis];
  369. const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
  370. let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
  371. // DOM platform can return `window` as the `offsetParent`.
  372. if (!clientSize || !(await (platform.isElement == null ? void 0 : platform.isElement(arrowOffsetParent)))) {
  373. clientSize = elements.floating[clientProp] || rects.floating[length];
  374. }
  375. const centerToReference = endDiff / 2 - startDiff / 2;
  376. // If the padding is large enough that it causes the arrow to no longer be
  377. // centered, modify the padding so that it is centered.
  378. const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
  379. const minPadding = min(paddingObject[minProp], largestPossiblePadding);
  380. const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);
  381. // Make sure the arrow doesn't overflow the floating element if the center
  382. // point is outside the floating element's bounds.
  383. const min$1 = minPadding;
  384. const max = clientSize - arrowDimensions[length] - maxPadding;
  385. const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
  386. const offset = clamp(min$1, center, max);
  387. // If the reference is small enough that the arrow's padding causes it to
  388. // to point to nothing for an aligned placement, adjust the offset of the
  389. // floating element itself. To ensure `shift()` continues to take action,
  390. // a single reset is performed when this is true.
  391. const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
  392. const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max : 0;
  393. return {
  394. [axis]: coords[axis] + alignmentOffset,
  395. data: {
  396. [axis]: offset,
  397. centerOffset: center - offset - alignmentOffset,
  398. ...(shouldAddOffset && {
  399. alignmentOffset
  400. })
  401. },
  402. reset: shouldAddOffset
  403. };
  404. }
  405. });
  406. function getPlacementList(alignment, autoAlignment, allowedPlacements) {
  407. const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter(placement => getAlignment(placement) === alignment), ...allowedPlacements.filter(placement => getAlignment(placement) !== alignment)] : allowedPlacements.filter(placement => getSide(placement) === placement);
  408. return allowedPlacementsSortedByAlignment.filter(placement => {
  409. if (alignment) {
  410. return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false);
  411. }
  412. return true;
  413. });
  414. }
  415. /**
  416. * Optimizes the visibility of the floating element by choosing the placement
  417. * that has the most space available automatically, without needing to specify a
  418. * preferred placement. Alternative to `flip`.
  419. * @see https://floating-ui.com/docs/autoPlacement
  420. */
  421. const autoPlacement = function (options) {
  422. if (options === void 0) {
  423. options = {};
  424. }
  425. return {
  426. name: 'autoPlacement',
  427. options,
  428. async fn(state) {
  429. var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE;
  430. const {
  431. rects,
  432. middlewareData,
  433. placement,
  434. platform,
  435. elements
  436. } = state;
  437. const {
  438. crossAxis = false,
  439. alignment,
  440. allowedPlacements = placements,
  441. autoAlignment = true,
  442. ...detectOverflowOptions
  443. } = evaluate(options, state);
  444. const placements$1 = alignment !== undefined || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
  445. const overflow = await detectOverflow(state, detectOverflowOptions);
  446. const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0;
  447. const currentPlacement = placements$1[currentIndex];
  448. if (currentPlacement == null) {
  449. return {};
  450. }
  451. const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
  452. // Make `computeCoords` start from the right place.
  453. if (placement !== currentPlacement) {
  454. return {
  455. reset: {
  456. placement: placements$1[0]
  457. }
  458. };
  459. }
  460. const currentOverflows = [overflow[getSide(currentPlacement)], overflow[alignmentSides[0]], overflow[alignmentSides[1]]];
  461. const allOverflows = [...(((_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.overflows) || []), {
  462. placement: currentPlacement,
  463. overflows: currentOverflows
  464. }];
  465. const nextPlacement = placements$1[currentIndex + 1];
  466. // There are more placements to check.
  467. if (nextPlacement) {
  468. return {
  469. data: {
  470. index: currentIndex + 1,
  471. overflows: allOverflows
  472. },
  473. reset: {
  474. placement: nextPlacement
  475. }
  476. };
  477. }
  478. const placementsSortedByMostSpace = allOverflows.map(d => {
  479. const alignment = getAlignment(d.placement);
  480. return [d.placement, alignment && crossAxis ?
  481. // Check along the mainAxis and main crossAxis side.
  482. d.overflows.slice(0, 2).reduce((acc, v) => acc + v, 0) :
  483. // Check only the mainAxis.
  484. d.overflows[0], d.overflows];
  485. }).sort((a, b) => a[1] - b[1]);
  486. const placementsThatFitOnEachSide = placementsSortedByMostSpace.filter(d => d[2].slice(0,
  487. // Aligned placements should not check their opposite crossAxis
  488. // side.
  489. getAlignment(d[0]) ? 2 : 3).every(v => v <= 0));
  490. const resetPlacement = ((_placementsThatFitOnE = placementsThatFitOnEachSide[0]) == null ? void 0 : _placementsThatFitOnE[0]) || placementsSortedByMostSpace[0][0];
  491. if (resetPlacement !== placement) {
  492. return {
  493. data: {
  494. index: currentIndex + 1,
  495. overflows: allOverflows
  496. },
  497. reset: {
  498. placement: resetPlacement
  499. }
  500. };
  501. }
  502. return {};
  503. }
  504. };
  505. };
  506. /**
  507. * Optimizes the visibility of the floating element by flipping the `placement`
  508. * in order to keep it in view when the preferred placement(s) will overflow the
  509. * clipping boundary. Alternative to `autoPlacement`.
  510. * @see https://floating-ui.com/docs/flip
  511. */
  512. const flip = function (options) {
  513. if (options === void 0) {
  514. options = {};
  515. }
  516. return {
  517. name: 'flip',
  518. options,
  519. async fn(state) {
  520. var _middlewareData$arrow, _middlewareData$flip;
  521. const {
  522. placement,
  523. middlewareData,
  524. rects,
  525. initialPlacement,
  526. platform,
  527. elements
  528. } = state;
  529. const {
  530. mainAxis: checkMainAxis = true,
  531. crossAxis: checkCrossAxis = true,
  532. fallbackPlacements: specifiedFallbackPlacements,
  533. fallbackStrategy = 'bestFit',
  534. fallbackAxisSideDirection = 'none',
  535. flipAlignment = true,
  536. ...detectOverflowOptions
  537. } = evaluate(options, state);
  538. // If a reset by the arrow was caused due to an alignment offset being
  539. // added, we should skip any logic now since `flip()` has already done its
  540. // work.
  541. // https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
  542. if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
  543. return {};
  544. }
  545. const side = getSide(placement);
  546. const isBasePlacement = getSide(initialPlacement) === initialPlacement;
  547. const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
  548. const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
  549. if (!specifiedFallbackPlacements && fallbackAxisSideDirection !== 'none') {
  550. fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
  551. }
  552. const placements = [initialPlacement, ...fallbackPlacements];
  553. const overflow = await detectOverflow(state, detectOverflowOptions);
  554. const overflows = [];
  555. let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
  556. if (checkMainAxis) {
  557. overflows.push(overflow[side]);
  558. }
  559. if (checkCrossAxis) {
  560. const sides = getAlignmentSides(placement, rects, rtl);
  561. overflows.push(overflow[sides[0]], overflow[sides[1]]);
  562. }
  563. overflowsData = [...overflowsData, {
  564. placement,
  565. overflows
  566. }];
  567. // One or more sides is overflowing.
  568. if (!overflows.every(side => side <= 0)) {
  569. var _middlewareData$flip2, _overflowsData$filter;
  570. const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
  571. const nextPlacement = placements[nextIndex];
  572. if (nextPlacement) {
  573. // Try next placement and re-run the lifecycle.
  574. return {
  575. data: {
  576. index: nextIndex,
  577. overflows: overflowsData
  578. },
  579. reset: {
  580. placement: nextPlacement
  581. }
  582. };
  583. }
  584. // First, find the candidates that fit on the mainAxis side of overflow,
  585. // then find the placement that fits the best on the main crossAxis side.
  586. let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
  587. // Otherwise fallback.
  588. if (!resetPlacement) {
  589. switch (fallbackStrategy) {
  590. case 'bestFit':
  591. {
  592. var _overflowsData$map$so;
  593. const placement = (_overflowsData$map$so = overflowsData.map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$map$so[0];
  594. if (placement) {
  595. resetPlacement = placement;
  596. }
  597. break;
  598. }
  599. case 'initialPlacement':
  600. resetPlacement = initialPlacement;
  601. break;
  602. }
  603. }
  604. if (placement !== resetPlacement) {
  605. return {
  606. reset: {
  607. placement: resetPlacement
  608. }
  609. };
  610. }
  611. }
  612. return {};
  613. }
  614. };
  615. };
  616. function getSideOffsets(overflow, rect) {
  617. return {
  618. top: overflow.top - rect.height,
  619. right: overflow.right - rect.width,
  620. bottom: overflow.bottom - rect.height,
  621. left: overflow.left - rect.width
  622. };
  623. }
  624. function isAnySideFullyClipped(overflow) {
  625. return sides.some(side => overflow[side] >= 0);
  626. }
  627. /**
  628. * Provides data to hide the floating element in applicable situations, such as
  629. * when it is not in the same clipping context as the reference element.
  630. * @see https://floating-ui.com/docs/hide
  631. */
  632. const hide = function (options) {
  633. if (options === void 0) {
  634. options = {};
  635. }
  636. return {
  637. name: 'hide',
  638. options,
  639. async fn(state) {
  640. const {
  641. rects
  642. } = state;
  643. const {
  644. strategy = 'referenceHidden',
  645. ...detectOverflowOptions
  646. } = evaluate(options, state);
  647. switch (strategy) {
  648. case 'referenceHidden':
  649. {
  650. const overflow = await detectOverflow(state, {
  651. ...detectOverflowOptions,
  652. elementContext: 'reference'
  653. });
  654. const offsets = getSideOffsets(overflow, rects.reference);
  655. return {
  656. data: {
  657. referenceHiddenOffsets: offsets,
  658. referenceHidden: isAnySideFullyClipped(offsets)
  659. }
  660. };
  661. }
  662. case 'escaped':
  663. {
  664. const overflow = await detectOverflow(state, {
  665. ...detectOverflowOptions,
  666. altBoundary: true
  667. });
  668. const offsets = getSideOffsets(overflow, rects.floating);
  669. return {
  670. data: {
  671. escapedOffsets: offsets,
  672. escaped: isAnySideFullyClipped(offsets)
  673. }
  674. };
  675. }
  676. default:
  677. {
  678. return {};
  679. }
  680. }
  681. }
  682. };
  683. };
  684. function getBoundingRect(rects) {
  685. const minX = min(...rects.map(rect => rect.left));
  686. const minY = min(...rects.map(rect => rect.top));
  687. const maxX = max(...rects.map(rect => rect.right));
  688. const maxY = max(...rects.map(rect => rect.bottom));
  689. return {
  690. x: minX,
  691. y: minY,
  692. width: maxX - minX,
  693. height: maxY - minY
  694. };
  695. }
  696. function getRectsByLine(rects) {
  697. const sortedRects = rects.slice().sort((a, b) => a.y - b.y);
  698. const groups = [];
  699. let prevRect = null;
  700. for (let i = 0; i < sortedRects.length; i++) {
  701. const rect = sortedRects[i];
  702. if (!prevRect || rect.y - prevRect.y > prevRect.height / 2) {
  703. groups.push([rect]);
  704. } else {
  705. groups[groups.length - 1].push(rect);
  706. }
  707. prevRect = rect;
  708. }
  709. return groups.map(rect => rectToClientRect(getBoundingRect(rect)));
  710. }
  711. /**
  712. * Provides improved positioning for inline reference elements that can span
  713. * over multiple lines, such as hyperlinks or range selections.
  714. * @see https://floating-ui.com/docs/inline
  715. */
  716. const inline = function (options) {
  717. if (options === void 0) {
  718. options = {};
  719. }
  720. return {
  721. name: 'inline',
  722. options,
  723. async fn(state) {
  724. const {
  725. placement,
  726. elements,
  727. rects,
  728. platform,
  729. strategy
  730. } = state;
  731. // A MouseEvent's client{X,Y} coords can be up to 2 pixels off a
  732. // ClientRect's bounds, despite the event listener being triggered. A
  733. // padding of 2 seems to handle this issue.
  734. const {
  735. padding = 2,
  736. x,
  737. y
  738. } = evaluate(options, state);
  739. const nativeClientRects = Array.from((await (platform.getClientRects == null ? void 0 : platform.getClientRects(elements.reference))) || []);
  740. const clientRects = getRectsByLine(nativeClientRects);
  741. const fallback = rectToClientRect(getBoundingRect(nativeClientRects));
  742. const paddingObject = getPaddingObject(padding);
  743. function getBoundingClientRect() {
  744. // There are two rects and they are disjoined.
  745. if (clientRects.length === 2 && clientRects[0].left > clientRects[1].right && x != null && y != null) {
  746. // Find the first rect in which the point is fully inside.
  747. return clientRects.find(rect => x > rect.left - paddingObject.left && x < rect.right + paddingObject.right && y > rect.top - paddingObject.top && y < rect.bottom + paddingObject.bottom) || fallback;
  748. }
  749. // There are 2 or more connected rects.
  750. if (clientRects.length >= 2) {
  751. if (getSideAxis(placement) === 'y') {
  752. const firstRect = clientRects[0];
  753. const lastRect = clientRects[clientRects.length - 1];
  754. const isTop = getSide(placement) === 'top';
  755. const top = firstRect.top;
  756. const bottom = lastRect.bottom;
  757. const left = isTop ? firstRect.left : lastRect.left;
  758. const right = isTop ? firstRect.right : lastRect.right;
  759. const width = right - left;
  760. const height = bottom - top;
  761. return {
  762. top,
  763. bottom,
  764. left,
  765. right,
  766. width,
  767. height,
  768. x: left,
  769. y: top
  770. };
  771. }
  772. const isLeftSide = getSide(placement) === 'left';
  773. const maxRight = max(...clientRects.map(rect => rect.right));
  774. const minLeft = min(...clientRects.map(rect => rect.left));
  775. const measureRects = clientRects.filter(rect => isLeftSide ? rect.left === minLeft : rect.right === maxRight);
  776. const top = measureRects[0].top;
  777. const bottom = measureRects[measureRects.length - 1].bottom;
  778. const left = minLeft;
  779. const right = maxRight;
  780. const width = right - left;
  781. const height = bottom - top;
  782. return {
  783. top,
  784. bottom,
  785. left,
  786. right,
  787. width,
  788. height,
  789. x: left,
  790. y: top
  791. };
  792. }
  793. return fallback;
  794. }
  795. const resetRects = await platform.getElementRects({
  796. reference: {
  797. getBoundingClientRect
  798. },
  799. floating: elements.floating,
  800. strategy
  801. });
  802. if (rects.reference.x !== resetRects.reference.x || rects.reference.y !== resetRects.reference.y || rects.reference.width !== resetRects.reference.width || rects.reference.height !== resetRects.reference.height) {
  803. return {
  804. reset: {
  805. rects: resetRects
  806. }
  807. };
  808. }
  809. return {};
  810. }
  811. };
  812. };
  813. // For type backwards-compatibility, the `OffsetOptions` type was also
  814. // Derivable.
  815. async function convertValueToCoords(state, options) {
  816. const {
  817. placement,
  818. platform,
  819. elements
  820. } = state;
  821. const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
  822. const side = getSide(placement);
  823. const alignment = getAlignment(placement);
  824. const isVertical = getSideAxis(placement) === 'y';
  825. const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
  826. const crossAxisMulti = rtl && isVertical ? -1 : 1;
  827. const rawValue = evaluate(options, state);
  828. let {
  829. mainAxis,
  830. crossAxis,
  831. alignmentAxis
  832. } = typeof rawValue === 'number' ? {
  833. mainAxis: rawValue,
  834. crossAxis: 0,
  835. alignmentAxis: null
  836. } : {
  837. mainAxis: 0,
  838. crossAxis: 0,
  839. alignmentAxis: null,
  840. ...rawValue
  841. };
  842. if (alignment && typeof alignmentAxis === 'number') {
  843. crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
  844. }
  845. return isVertical ? {
  846. x: crossAxis * crossAxisMulti,
  847. y: mainAxis * mainAxisMulti
  848. } : {
  849. x: mainAxis * mainAxisMulti,
  850. y: crossAxis * crossAxisMulti
  851. };
  852. }
  853. /**
  854. * Modifies the placement by translating the floating element along the
  855. * specified axes.
  856. * A number (shorthand for `mainAxis` or distance), or an axes configuration
  857. * object may be passed.
  858. * @see https://floating-ui.com/docs/offset
  859. */
  860. const offset = function (options) {
  861. if (options === void 0) {
  862. options = 0;
  863. }
  864. return {
  865. name: 'offset',
  866. options,
  867. async fn(state) {
  868. var _middlewareData$offse, _middlewareData$arrow;
  869. const {
  870. x,
  871. y,
  872. placement,
  873. middlewareData
  874. } = state;
  875. const diffCoords = await convertValueToCoords(state, options);
  876. // If the placement is the same and the arrow caused an alignment offset
  877. // then we don't need to change the positioning coordinates.
  878. if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
  879. return {};
  880. }
  881. return {
  882. x: x + diffCoords.x,
  883. y: y + diffCoords.y,
  884. data: {
  885. ...diffCoords,
  886. placement
  887. }
  888. };
  889. }
  890. };
  891. };
  892. /**
  893. * Optimizes the visibility of the floating element by shifting it in order to
  894. * keep it in view when it will overflow the clipping boundary.
  895. * @see https://floating-ui.com/docs/shift
  896. */
  897. const shift = function (options) {
  898. if (options === void 0) {
  899. options = {};
  900. }
  901. return {
  902. name: 'shift',
  903. options,
  904. async fn(state) {
  905. const {
  906. x,
  907. y,
  908. placement
  909. } = state;
  910. const {
  911. mainAxis: checkMainAxis = true,
  912. crossAxis: checkCrossAxis = false,
  913. limiter = {
  914. fn: _ref => {
  915. let {
  916. x,
  917. y
  918. } = _ref;
  919. return {
  920. x,
  921. y
  922. };
  923. }
  924. },
  925. ...detectOverflowOptions
  926. } = evaluate(options, state);
  927. const coords = {
  928. x,
  929. y
  930. };
  931. const overflow = await detectOverflow(state, detectOverflowOptions);
  932. const crossAxis = getSideAxis(getSide(placement));
  933. const mainAxis = getOppositeAxis(crossAxis);
  934. let mainAxisCoord = coords[mainAxis];
  935. let crossAxisCoord = coords[crossAxis];
  936. if (checkMainAxis) {
  937. const minSide = mainAxis === 'y' ? 'top' : 'left';
  938. const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
  939. const min = mainAxisCoord + overflow[minSide];
  940. const max = mainAxisCoord - overflow[maxSide];
  941. mainAxisCoord = clamp(min, mainAxisCoord, max);
  942. }
  943. if (checkCrossAxis) {
  944. const minSide = crossAxis === 'y' ? 'top' : 'left';
  945. const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
  946. const min = crossAxisCoord + overflow[minSide];
  947. const max = crossAxisCoord - overflow[maxSide];
  948. crossAxisCoord = clamp(min, crossAxisCoord, max);
  949. }
  950. const limitedCoords = limiter.fn({
  951. ...state,
  952. [mainAxis]: mainAxisCoord,
  953. [crossAxis]: crossAxisCoord
  954. });
  955. return {
  956. ...limitedCoords,
  957. data: {
  958. x: limitedCoords.x - x,
  959. y: limitedCoords.y - y
  960. }
  961. };
  962. }
  963. };
  964. };
  965. /**
  966. * Built-in `limiter` that will stop `shift()` at a certain point.
  967. */
  968. const limitShift = function (options) {
  969. if (options === void 0) {
  970. options = {};
  971. }
  972. return {
  973. options,
  974. fn(state) {
  975. const {
  976. x,
  977. y,
  978. placement,
  979. rects,
  980. middlewareData
  981. } = state;
  982. const {
  983. offset = 0,
  984. mainAxis: checkMainAxis = true,
  985. crossAxis: checkCrossAxis = true
  986. } = evaluate(options, state);
  987. const coords = {
  988. x,
  989. y
  990. };
  991. const crossAxis = getSideAxis(placement);
  992. const mainAxis = getOppositeAxis(crossAxis);
  993. let mainAxisCoord = coords[mainAxis];
  994. let crossAxisCoord = coords[crossAxis];
  995. const rawOffset = evaluate(offset, state);
  996. const computedOffset = typeof rawOffset === 'number' ? {
  997. mainAxis: rawOffset,
  998. crossAxis: 0
  999. } : {
  1000. mainAxis: 0,
  1001. crossAxis: 0,
  1002. ...rawOffset
  1003. };
  1004. if (checkMainAxis) {
  1005. const len = mainAxis === 'y' ? 'height' : 'width';
  1006. const limitMin = rects.reference[mainAxis] - rects.floating[len] + computedOffset.mainAxis;
  1007. const limitMax = rects.reference[mainAxis] + rects.reference[len] - computedOffset.mainAxis;
  1008. if (mainAxisCoord < limitMin) {
  1009. mainAxisCoord = limitMin;
  1010. } else if (mainAxisCoord > limitMax) {
  1011. mainAxisCoord = limitMax;
  1012. }
  1013. }
  1014. if (checkCrossAxis) {
  1015. var _middlewareData$offse, _middlewareData$offse2;
  1016. const len = mainAxis === 'y' ? 'width' : 'height';
  1017. const isOriginSide = ['top', 'left'].includes(getSide(placement));
  1018. const limitMin = rects.reference[crossAxis] - rects.floating[len] + (isOriginSide ? ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse[crossAxis]) || 0 : 0) + (isOriginSide ? 0 : computedOffset.crossAxis);
  1019. const limitMax = rects.reference[crossAxis] + rects.reference[len] + (isOriginSide ? 0 : ((_middlewareData$offse2 = middlewareData.offset) == null ? void 0 : _middlewareData$offse2[crossAxis]) || 0) - (isOriginSide ? computedOffset.crossAxis : 0);
  1020. if (crossAxisCoord < limitMin) {
  1021. crossAxisCoord = limitMin;
  1022. } else if (crossAxisCoord > limitMax) {
  1023. crossAxisCoord = limitMax;
  1024. }
  1025. }
  1026. return {
  1027. [mainAxis]: mainAxisCoord,
  1028. [crossAxis]: crossAxisCoord
  1029. };
  1030. }
  1031. };
  1032. };
  1033. /**
  1034. * Provides data that allows you to change the size of the floating element —
  1035. * for instance, prevent it from overflowing the clipping boundary or match the
  1036. * width of the reference element.
  1037. * @see https://floating-ui.com/docs/size
  1038. */
  1039. const size = function (options) {
  1040. if (options === void 0) {
  1041. options = {};
  1042. }
  1043. return {
  1044. name: 'size',
  1045. options,
  1046. async fn(state) {
  1047. const {
  1048. placement,
  1049. rects,
  1050. platform,
  1051. elements
  1052. } = state;
  1053. const {
  1054. apply = () => {},
  1055. ...detectOverflowOptions
  1056. } = evaluate(options, state);
  1057. const overflow = await detectOverflow(state, detectOverflowOptions);
  1058. const side = getSide(placement);
  1059. const alignment = getAlignment(placement);
  1060. const isYAxis = getSideAxis(placement) === 'y';
  1061. const {
  1062. width,
  1063. height
  1064. } = rects.floating;
  1065. let heightSide;
  1066. let widthSide;
  1067. if (side === 'top' || side === 'bottom') {
  1068. heightSide = side;
  1069. widthSide = alignment === ((await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating))) ? 'start' : 'end') ? 'left' : 'right';
  1070. } else {
  1071. widthSide = side;
  1072. heightSide = alignment === 'end' ? 'top' : 'bottom';
  1073. }
  1074. const overflowAvailableHeight = height - overflow[heightSide];
  1075. const overflowAvailableWidth = width - overflow[widthSide];
  1076. const noShift = !state.middlewareData.shift;
  1077. let availableHeight = overflowAvailableHeight;
  1078. let availableWidth = overflowAvailableWidth;
  1079. if (isYAxis) {
  1080. const maximumClippingWidth = width - overflow.left - overflow.right;
  1081. availableWidth = alignment || noShift ? min(overflowAvailableWidth, maximumClippingWidth) : maximumClippingWidth;
  1082. } else {
  1083. const maximumClippingHeight = height - overflow.top - overflow.bottom;
  1084. availableHeight = alignment || noShift ? min(overflowAvailableHeight, maximumClippingHeight) : maximumClippingHeight;
  1085. }
  1086. if (noShift && !alignment) {
  1087. const xMin = max(overflow.left, 0);
  1088. const xMax = max(overflow.right, 0);
  1089. const yMin = max(overflow.top, 0);
  1090. const yMax = max(overflow.bottom, 0);
  1091. if (isYAxis) {
  1092. availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
  1093. } else {
  1094. availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
  1095. }
  1096. }
  1097. await apply({
  1098. ...state,
  1099. availableWidth,
  1100. availableHeight
  1101. });
  1102. const nextDimensions = await platform.getDimensions(elements.floating);
  1103. if (width !== nextDimensions.width || height !== nextDimensions.height) {
  1104. return {
  1105. reset: {
  1106. rects: true
  1107. }
  1108. };
  1109. }
  1110. return {};
  1111. }
  1112. };
  1113. };
  1114. export { arrow, autoPlacement, computePosition, detectOverflow, flip, hide, inline, limitShift, offset, rectToClientRect, shift, size };