19c2ec43fe169645c1864c8d86a5dfcf89d87f8c7268115deaffb27006c55cc34ed26a3e69828827991b9166ab72177d46b64be60b825854f8befe83ccf7df 39 KB

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