@styleless-ui/react/Popper/helpers.js

Completely unstyled, headless and accessible React UI components.

"use strict";var __assign=this&&this.__assign||function(){return __assign=Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++)for(var o in e=arguments[n])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t},__assign.apply(this,arguments)},__spreadArray=this&&this.__spreadArray||function(t,e,n){if(n||2===arguments.length)for(var r,o=0,i=e.length;o<i;o++)!r&&o in e||(r||(r=Array.prototype.slice.call(e,0,o)),r[o]=e[o]);return t.concat(r||Array.prototype.slice.call(e))};Object.defineProperty(exports,"__esModule",{value:!0}),exports.computePosition=exports.strategies=exports.alignments=exports.sides=void 0;var utils_1=require("../utils");exports.sides=["top","right","bottom","left"],exports.alignments=["end","start"],exports.strategies=["absolute","fixed"];var allPlacements=exports.sides.reduce((function(t,e){return __spreadArray(__spreadArray([],t,!0),[e,"".concat(e,"-start"),"".concat(e,"-end")],!1)}),[]),getSideFromPlacement=function(t){return t.split("-")[0]},getMainAxisFromPlacement=function(t){return["top","bottom"].includes(getSideFromPlacement(t))?"x":"y"},getLengthFromAxis=function(t){return"y"===t?"height":"width"},getAlignmentFromPlacement=function(t){return t.split("-")[1]},getAlignmentSidesFromPlacement=function(t,e,n){var r=getAlignmentFromPlacement(t),o=getMainAxisFromPlacement(t),i=getLengthFromAxis(o),l=function(t){return t.replace(/left|right|bottom|top/g,(function(t){var e;return null!==(e={left:"right",right:"left",top:"bottom",bottom:"top"}[t])&&void 0!==e?e:""}))},s="x"===o?r===(n?"end":"start")?"right":"left":"start"===r?"bottom":"top";return e.anchorRect[i]>e.popperRect[i]&&(s=l(s)),{mainSide:s,crossSide:l(s)}},getDocumentRect=function(t){var e,n=(0,utils_1.getWindow)(t),r=(0,utils_1.getDocumentElement)(t),o=getScrollProps(t),i=null===(e=t.ownerDocument)||void 0===e?void 0:e.body,l=Math.max(r.scrollWidth,r.clientWidth,i?i.scrollWidth:0,i?i.clientWidth:0),s=Math.max(r.scrollHeight,r.clientHeight,i?i.scrollHeight:0,i?i.clientHeight:0),c=-o.scrollLeft+getWindowScrollBarX(t),a=-o.scrollTop;return"rtl"===n.getComputedStyle(i||r).direction&&(c+=Math.max(r.clientWidth,i?i.clientWidth:0)-l),{width:l,height:s,x:c,y:a}},getClippingRect=function(t){var e=function(t){var n=(0,utils_1.getParentNode)(t);return["html","body","#document"].includes((0,utils_1.getNodeName)(n))?t.ownerDocument?t.ownerDocument.body:null:(0,utils_1.isHTMLElement)(n)&&(0,utils_1.isOverflowElement)(n)?n:e(n)},n=function(t,r){var o,i;void 0===r&&(r=[]);var l=e(t),s=l===(null===(o=t.ownerDocument)||void 0===o?void 0:o.body),c=(0,utils_1.getWindow)(l),a=s?[c].concat(null!==(i=c.visualViewport)&&void 0!==i?i:[],(0,utils_1.isOverflowElement)(l)?l:[]):null!=l?l:[],u=r.concat(a);return s?u:u.concat(n((0,utils_1.getParentNode)(a)))},r=function(t,e){return"viewport"===e?rectToClientRect((0,utils_1.getViewportRect)(t)):(0,utils_1.isElement)(e)?function(t){var e=(0,utils_1.getBoundingClientRect)(t),n=e.top+t.clientTop,r=e.left+t.clientLeft;return{top:n,left:r,x:r,y:n,right:r+t.clientWidth,bottom:n+t.clientHeight,width:t.clientWidth,height:t.clientHeight}}(e):rectToClientRect(getDocumentRect((0,utils_1.getDocumentElement)(t)))},o=__spreadArray(__spreadArray([],function(t){var e=n(t),r=(0,utils_1.getWindow)(t),o=["absolute","fixed"].includes(r.getComputedStyle(t).position)&&(0,utils_1.isHTMLElement)(t)?(0,utils_1.getOffsetParent)(t):t;return(0,utils_1.isElement)(o)?e.filter((function(t){return(0,utils_1.isElement)(t)&&(0,utils_1.contains)(t,o)&&"body"!==(0,utils_1.getNodeName)(t)})):[]}(t),!0),["viewport"],!1),i=o[0],l=o.reduce((function(e,n){var o=r(t,n);return e.top=Math.max(o.top,e.top),e.right=Math.min(o.right,e.right),e.bottom=Math.min(o.bottom,e.bottom),e.left=Math.max(o.left,e.left),e}),r(t,i));return{width:l.right-l.left,height:l.bottom-l.top,x:l.left,y:l.top}},rectToClientRect=function(t){return __assign(__assign({},t),{top:t.y,left:t.x,right:t.x+t.width,bottom:t.y+t.height})},getOffsetParentRectRelativeToViewport=function(t){var e=t.popperRect,n=t.offsetParent,r=t.strategy,o=(0,utils_1.getDocumentElement)(n);if(n===o)return e;var i=(0,utils_1.isHTMLElement)(n),l={scrollLeft:0,scrollTop:0},s={x:0,y:0};if(i||!i&&"fixed"!==r)if(("body"!==(0,utils_1.getNodeName)(n)||(0,utils_1.isOverflowElement)(o))&&(l=getScrollProps(n)),(0,utils_1.isHTMLElement)(n)){var c=(0,utils_1.getBoundingClientRect)(n,!0);s.x=c.x+n.clientLeft,s.y=c.y+n.clientTop}else o&&(s.x=getWindowScrollBarX(o));return __assign(__assign({},e),{x:e.x-l.scrollLeft+s.x,y:e.y-l.scrollTop+s.y})},getScrollProps=function(t){return(0,utils_1.isWindow)(t)?{scrollLeft:t.scrollX||t.pageXOffset,scrollTop:t.scrollY||t.pageYOffset}:{scrollLeft:t.scrollLeft,scrollTop:t.scrollTop}},getWindowScrollBarX=function(t){return(0,utils_1.getBoundingClientRect)((0,utils_1.getDocumentElement)(t)).left+getScrollProps(t).scrollLeft},getRectRelativeToOffsetParent=function(t,e,n){var r=(0,utils_1.isHTMLElement)(e),o=(0,utils_1.getDocumentElement)(e),i=(0,utils_1.getBoundingClientRect)(t,r&&function(t){var e=(0,utils_1.getBoundingClientRect)(t);return Math.round(e.width)!==t.offsetWidth||Math.round(e.height)!==t.offsetHeight}(e)),l={scrollLeft:0,scrollTop:0},s={x:0,y:0};if(r||!r&&"fixed"!==n)if(("body"!==(0,utils_1.getNodeName)(e)||(0,utils_1.isOverflowElement)(o))&&(l=getScrollProps(e)),(0,utils_1.isHTMLElement)(e)){var c=(0,utils_1.getBoundingClientRect)(e,!0);s.x=c.x+e.clientLeft,s.y=c.y+e.clientTop}else o&&(s.x=getWindowScrollBarX(o));return{x:i.left+l.scrollLeft-s.x,y:i.top+l.scrollTop-s.y,width:i.width,height:i.height}},getElementRects=function(t,e){return{anchorRect:getRectRelativeToOffsetParent(t.anchorElement,(0,utils_1.getOffsetParent)(t.popperElement),e),popperRect:{x:0,y:0,width:t.popperElement.offsetWidth,height:t.popperElement.offsetHeight}}},detectBoundaryOverflow=function(t){var e=t.elements.popperElement,n=getClippingRect(e),r=rectToClientRect(n),o=rectToClientRect(getOffsetParentRectRelativeToViewport({popperRect:__assign(__assign({},t.elementRects.popperRect),{x:t.coordinates.x,y:t.coordinates.y}),offsetParent:(0,utils_1.getOffsetParent)(e),strategy:t.strategy}));return{top:r.top-o.top+0,bottom:o.bottom-r.bottom+0,left:r.left-o.left+0,right:o.right-r.right+0}},calcCoordinatesFromPlacement=function(t){var e,n,r=t.placement,o=t.offset,i=t.elementRects,l=t.elements,s=t.strategy,c=t.isRtl,a=i.anchorRect,u=i.popperRect,m=a.x+(a.width-u.width)/2,f=a.y+(a.height-u.height)/2,p=getMainAxisFromPlacement(r),d=getLengthFromAxis(p),g=(a[d]-u[d])/2,h=getSideFromPlacement(r),_=getAlignmentFromPlacement(r),y="x"===p;switch(h){case"top":n={x:m,y:a.y-u.height};break;case"bottom":n={x:m,y:a.y+a.height};break;case"left":n={x:a.x-u.width,y:f};break;case"right":n={x:a.x+a.width,y:f};break;default:n={x:a.x,y:a.y}}switch(_){case"start":n[p]-=g*(c&&y?-1:1);break;case"end":n[p]+=g*(c&&y?-1:1)}var v=n.x,x=n.y;v=(e=function(){var t,e=detectBoundaryOverflow({coordinates:n,elementRects:i,elements:l,strategy:s}),r="x"===p?"y":"x",o=n[p],c="y"===p?"bottom":"right",a=o+e["y"===p?"top":"left"],u=o-e[c];return(t={})[r]=n[r],t[p]=(0,utils_1.clamp)(o,a,u),t}()).x,x=e.y;var w=function(){var t=["left","top"].includes(h)?-1:1,e=1;"end"===_&&(e=-1),c&&y&&(e*=-1);var n=0,r=0;if("number"==typeof o)n=o;else if("object"==typeof o){var i=o.crossAxis,l=void 0===i?0:i,s=o.mainAxis;n=void 0===s?0:s,r=l}return y?{x:r*e,y:n*t}:{x:n*t,y:r*e}}();return{x:v+=w.x,y:x+=w.y}},suppressViewportOverflow=function(t,e){var n=e.overflow,r=e.placement,o=e.elementRects,i=e.isRtl,l=getAlignmentFromPlacement(r),s=function(t){return getAlignmentFromPlacement(t)===l},c=allPlacements.filter((function(e){return!t.includes(getSideFromPlacement(e))})),a=l?__spreadArray(__spreadArray([],c.filter(s),!0),c.filter((function(t){return getAlignmentFromPlacement(t)!==l})),!0).filter((function(t){return s(t)||function(t){return function(t){return t.replace(/start|end/g,(function(t){var e;return null!==(e={start:"end",end:"start"}[t])&&void 0!==e?e:""}))}(t)!==t}(t)})):c.filter((function(t){return getSideFromPlacement(t)===t})),u=function(t){var e,r=t.placementIndex,l=t.overflows,s=a[r],c=getAlignmentSidesFromPlacement(s,o,i),m=c.mainSide,f=c.crossSide,p=[n[getSideFromPlacement(s)],n[m],n[f]],d=__spreadArray(__spreadArray([],l,!0),[{placement:s,overflows:p}],!1),g=r+1;if(a[g])return u({overflows:d,placementIndex:g});var h=d.slice().sort((function(t,e){var n,r;return(null!==(n=t.overflows[0])&&void 0!==n?n:0)-(null!==(r=e.overflows[0])&&void 0!==r?r:0)})),_=null===(e=h.find((function(t){return t.overflows.every((function(t){return t<=0}))})))||void 0===e?void 0:e.placement;return{placement:null!=_?_:h[0].placement}};return u({placementIndex:0,overflows:[]})},computePosition=function(t,e,n){var r=n.strategy,o=n.isRtl,i=n.autoPlacement,l=n.offset,s=n.placement,c=n.computationMiddleware,a=n.computationMiddlewareOrder,u=s,m={anchorElement:t,popperElement:e},f=getElementRects(m,r),p=calcCoordinatesFromPlacement({isRtl:o,offset:l,strategy:r,elements:m,placement:u,elementRects:f}),d=p.x,g=p.y;return("afterAutoPlacement"===a?["auto_placement","custom_middleware"]:["custom_middleware","auto_placement"]).forEach((function(t){var e,n,s,a,p={coordinates:{x:d,y:g},placement:u,elements:m,elementRects:f,strategy:r},h=detectBoundaryOverflow(p);switch(t){case"auto_placement":if(i){var _="object"==typeof i?i.excludeSides:[];a=suppressViewportOverflow(_,{elementRects:f,placement:u,overflow:h,isRtl:o})}break;case"custom_middleware":a=null==c?void 0:c(__assign(__assign({},p),{overflow:h}))}if(a)if(a.placement){u=null!==(e=a.placement)&&void 0!==e?e:u;var y=calcCoordinatesFromPlacement({isRtl:o,offset:l,strategy:r,elements:m,placement:u,elementRects:f});d=y.x,g=y.y}else d=null!==(n=a.coordinates.x)&&void 0!==n?n:d,g=null!==(s=a.coordinates.y)&&void 0!==s?s:g})),{x:d,y:g,placement:u}};exports.computePosition=computePosition;