floating-ui.core.umd.js 40 KB

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