floating-ui.core.browser.mjs 38 KB

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