floating-ui.core.umd.js 35 KB

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