83c56512b2ba68d2869b35f721e0d9abe644489a25ca416d24e810930f9039492ddfbe20276fee8b6b375c7d11e0796964b9b4f011b4352f0e352e3f7dda90 41 KB

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