floating-ui.core.umd.js 41 KB

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