Socket
Socket
Sign inDemoInstall

@leafygreen-ui/popover

Package Overview
Dependencies
Maintainers
3
Versions
90
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@leafygreen-ui/popover - npm Package Compare versions

Comparing version 1.1.6 to 1.2.0

CHANGELOG.md
dist/types.d.ts
src/types.ts
tsconfig.tsbuildinfo

6

dist/index.d.ts
import Popover from './Popover';
import Align from './Align';
import Justify from './Justify';
export { PopoverProps } from './Popover';
import { Align, Justify, Justification, ElementPosition, PopoverProps } from './types';
export default Popover;
export { Align, Justify };
export { Align, Justify, Justification, ElementPosition, PopoverProps };

2

dist/index.js

@@ -1,2 +0,2 @@

!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"),require("prop-types"),require("@leafygreen-ui/portal"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/hooks"));else if("function"==typeof define&&define.amd)define(["react","prop-types","@leafygreen-ui/portal","@leafygreen-ui/emotion","@leafygreen-ui/hooks"],t);else{var n="object"==typeof exports?t(require("react"),require("prop-types"),require("@leafygreen-ui/portal"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/hooks")):t(e.react,e["prop-types"],e["@leafygreen-ui/portal"],e["@leafygreen-ui/emotion"],e["@leafygreen-ui/hooks"]);for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(window,function(e,t,n,r,o){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=2)}([function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r={Top:"top",Bottom:"bottom",Left:"left",Right:"right"};t.default=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r={Start:"start",Middle:"middle",End:"end"};t.default=r},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"PopoverProps",{enumerable:!0,get:function(){return r.PopoverProps}}),Object.defineProperty(t,"Align",{enumerable:!0,get:function(){return o.default}}),Object.defineProperty(t,"Justify",{enumerable:!0,get:function(){return i.default}}),t.default=void 0;var r=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)if(Object.prototype.hasOwnProperty.call(e,n)){var r=Object.defineProperty&&Object.getOwnPropertyDescriptor?Object.getOwnPropertyDescriptor(e,n):{};r.get||r.set?Object.defineProperty(t,n,r):t[n]=e[n]}return t.default=e,t}(n(3)),o=a(n(0)),i=a(n(1));function a(e){return e&&e.__esModule?e:{default:e}}var u=r.default;t.default=u},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)if(Object.prototype.hasOwnProperty.call(e,n)){var r=Object.defineProperty&&Object.getOwnPropertyDescriptor?Object.getOwnPropertyDescriptor(e,n):{};r.get||r.set?Object.defineProperty(t,n,r):t[n]=e[n]}return t.default=e,t}(n(4)),o=s(n(5)),i=s(n(6)),a=n(7),u=n(8),l=s(n(0)),c=s(n(1)),f=n(9);function s(e){return e&&e.__esModule?e:{default:e}}function d(){return(d=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function p(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=[],r=!0,o=!1,i=void 0;try{for(var a,u=e[Symbol.iterator]();!(r=(a=u.next()).done)&&(n.push(a.value),!t||n.length!==t);r=!0);}catch(e){o=!0,i=e}finally{try{r||null==u.return||u.return()}finally{if(o)throw i}}return n}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function g(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}var h=(0,a.css)("transition:transform 150ms ease-in-out,opacity 150ms ease-in-out;position:absolute;pointer-events:none;opacity:0;"),b={attributes:!0,characterData:!0,childList:!0,subtree:!0};function v(e){var t=e.active,n=void 0!==t&&t,o=e.usePortal,s=void 0===o||o,v=e.spacing,m=void 0===v?10:v,y=e.align,P=void 0===y?l.default.Bottom:y,w=e.justify,O=void 0===w?c.default.Start:w,j=e.adjustOnMutation,E=void 0!==j&&j,x=e.children,M=e.className,_=e.refEl,k=g(e,["active","usePortal","spacing","align","justify","adjustOnMutation","children","className","refEl"]),T=p((0,u.useElementNode)(),2),H=T[0],B=T[1],R=p((0,u.useElementNode)(),2),L=R[0],C=R[1],S=null;if(_&&_.current)S=_.current;else if(H){var W=H.parentNode;W&&W instanceof HTMLElement&&(S=W)}var q,z,N,V=(0,u.useViewportSize)(),D=(0,u.useMutationObserver)(S,b,function(){return Date.now()},E),A=(0,u.useMutationObserver)(L,b,function(){return Date.now()},E),F=(0,r.useMemo)(function(){return(0,f.getElementPosition)(S)},[S,V,D]),I=(0,r.useMemo)(function(){return(0,f.getElementPosition)(L)},[L,V,A]),J=(0,a.css)((0,f.calculatePosition)({useRelativePositioning:!s,spacing:m,align:P,justify:O,referenceElPos:F,contentElPos:I})),G=(0,a.css)("transform:translate3d(0,0,0) scale(1);opacity:1;position:",s?"":"absolute",";pointer-events:initial;"),K=s?i.default:r.Fragment;return r.default.createElement(r.default.Fragment,null,r.default.createElement("div",{ref:B,className:(0,a.css)("display:none;")}),r.default.createElement(K,null,r.default.createElement("div",d({},k,{ref:C,className:(0,a.cx)(h,J,(q={},z=G,N=n,z in q?Object.defineProperty(q,z,{value:N,enumerable:!0,configurable:!0,writable:!0}):q[z]=N,q),M)}),x)))}v.displayName="Popover",v.propTypes={children:o.default.node,active:o.default.bool,className:o.default.string,align:o.default.oneOf(Object.values(l.default)),justify:o.default.oneOf(Object.values(c.default)),refEl:o.default.shape({current:o.default.instanceOf(Element)}),usePortal:o.default.bool,spacing:o.default.number,adjustOnMutation:o.default.bool},v.defaultProps={children:void 0,align:l.default.Bottom,justify:c.default.Start,active:!1,usePortal:!0,spacing:10,adjustOnMutation:!1};var m=v;t.default=m},function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t){e.exports=r},function(e,t){e.exports=o},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.calculatePosition=function(e){var t=e.useRelativePositioning,n=e.spacing,i=e.align,p=e.justify,g=e.referenceElPos,h=void 0===g?u:g,b=e.contentElPos,v=void 0===b?u:b,m=e.windowHeight,y=void 0===m?window.innerHeight:m,P=e.windowWidth,w={windowWidth:void 0===P?window.innerWidth:P,windowHeight:y,referenceElPos:h,contentElPos:v,spacing:n},O=function(e,t){var n=t.spacing,o=t.contentElPos,i=t.windowWidth,a=t.windowHeight,u=t.referenceElPos;return{top:[r.default.Top,r.default.Bottom],bottom:[r.default.Bottom,r.default.Top],left:[r.default.Left,r.default.Right],right:[r.default.Right,r.default.Left]}[e].find(function(e){if([r.default.Top,r.default.Bottom].includes(e)){var t=c({alignment:e,contentElPos:o,referenceElPos:u,spacing:n});return d({top:t,windowHeight:a,contentHeight:o.height})}if([r.default.Left,r.default.Right].includes(e)){var l=f({alignment:e,contentElPos:o,referenceElPos:u,spacing:n});return s({left:l,windowWidth:i,contentWidth:o.width})}return!1})||e}(i,w),j=function(e,t,n){var i,u=n.spacing,p=n.contentElPos,g=n.windowWidth,h=n.windowHeight,b=n.referenceElPos;switch(t){case r.default.Left:case r.default.Right:var v;a(v={},o.default.Start,[l.Top,l.Bottom,l.CenterVertical]),a(v,o.default.Middle,[l.CenterVertical,l.Bottom,l.Top]),a(v,o.default.End,[l.Bottom,l.Top,l.CenterVertical]),i=v;break;case r.default.Top:case r.default.Bottom:default:var m;a(m={},o.default.Start,[l.Left,l.Right,l.CenterHorizontal]),a(m,o.default.Middle,[l.CenterHorizontal,l.Right,l.Left]),a(m,o.default.End,[l.Right,l.Left,l.CenterHorizontal]),i=m}return i[e].find(function(e){if([l.Top,l.Bottom,l.CenterVertical].includes(e)){var t=c({justification:e,contentElPos:p,referenceElPos:b,spacing:u});return d({top:t,windowHeight:h,contentHeight:p.height})}if([l.Left,l.Right,l.CenterHorizontal].includes(e)){var n=f({justification:e,contentElPos:p,referenceElPos:b,spacing:u});return s({left:n,windowWidth:g,contentWidth:p.width})}return!1})||i[e][0]}(p,O,w),E=function(e){var t=e.alignment,n=e.justification,o="",i="";switch(t){case r.default.Left:o="right";break;case r.default.Right:o="left";break;case r.default.Bottom:i="top";break;case r.default.Top:i="bottom"}switch(n){case l.Left:o="left";break;case l.Right:o="right";break;case l.Bottom:i="bottom";break;case l.Top:i="top";break;case l.CenterHorizontal:o="center";break;case l.CenterVertical:i="center"}return"".concat(o," ").concat(i)}({alignment:O,justification:j}),x=function(e,t){switch(e){case r.default.Top:return"translate3d(0, ".concat(t,"px, 0) scale(").concat(.8,")");case r.default.Bottom:return"translate3d(0, -".concat(t,"px, 0) scale(").concat(.8,")");case r.default.Left:return"translate3d(".concat(t,"px, 0, 0) scale(").concat(.8,")");case r.default.Right:return"translate3d(-".concat(t,"px, 0, 0) scale(").concat(.8,")")}}(O,n);if(t)return function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{},r=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(r=r.concat(Object.getOwnPropertySymbols(n).filter(function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable}))),r.forEach(function(t){a(e,t,n[t])})}return e}({},function(e){var t=e.alignment,n=e.justification,o=e.referenceElPos,i=e.contentElPos,a=e.spacing,u={};switch(t){case r.default.Top:u.bottom="calc(100% + ".concat(a,"px)");break;case r.default.Bottom:u.top="calc(100% + ".concat(a,"px)");break;case r.default.Left:u.right="calc(100% + ".concat(a,"px)");break;case r.default.Right:u.left="calc(100% + ".concat(a,"px)")}switch(n){case l.Top:u.top=0;break;case l.Bottom:u.bottom=0;break;case l.Left:u.left=0;break;case l.Right:u.right=0;break;case l.CenterHorizontal:u.left="".concat(o.width/2-i.width/2,"px");break;case l.CenterVertical:u.top="".concat(o.height/2-i.height/2,"px")}return u}({alignment:O,justification:j,referenceElPos:h,contentElPos:v,spacing:n}),{transformOrigin:E,transform:x});return{top:c({alignment:O,justification:j,contentElPos:v,referenceElPos:h,spacing:n}),left:f({alignment:O,justification:j,contentElPos:v,referenceElPos:h,spacing:n}),transformOrigin:E,transform:x}},t.getElementPosition=function(e){if(!e)return u;var t=e.getBoundingClientRect(),n=t.top,r=t.bottom,o=t.left,i=t.right,a=e.offsetHeight,l=e.offsetWidth;return{top:n,bottom:r,left:o,right:i,height:a,width:l}};var r=i(n(0)),o=i(n(1));function i(e){return e&&e.__esModule?e:{default:e}}function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var u={top:0,bottom:0,left:0,right:0,height:0,width:0};var l={Top:"top",Bottom:"bottom",Left:"left",Right:"right",CenterVertical:"center-vertical",CenterHorizontal:"center-horizontal"};function c(e){var t=e.alignment,n=e.justification,o=e.contentElPos,i=e.referenceElPos,a=e.spacing;switch(n){case l.Top:return i.top;case l.Bottom:return i.top+i.height-o.height;case l.CenterVertical:return i.top+i.height/2-o.height/2}switch(t){case r.default.Top:return i.top-o.height-a;case r.default.Bottom:default:return i.top+i.height+a}}function f(e){var t=e.alignment,n=e.justification,o=e.contentElPos,i=e.referenceElPos,a=e.spacing;switch(t){case r.default.Left:return i.left-o.width-a;case r.default.Right:return i.left+i.width+a}switch(n){case l.Right:return i.left+i.width-o.width;case l.CenterHorizontal:return i.left+i.width/2-o.width/2;case l.Left:default:return i.left}}function s(e){var t=e.left,n=e.windowWidth,r=e.contentWidth;return t>=0&&!(t+r>n)}function d(e){var t=e.top,n=e.windowHeight,r=e.contentHeight;return t>=0&&!(t+r>n)}}])});
!function(t,e){if("object"==typeof exports&&"object"==typeof module)module.exports=e(require("react"),require("prop-types"),require("@leafygreen-ui/portal"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/hooks"));else if("function"==typeof define&&define.amd)define(["react","prop-types","@leafygreen-ui/portal","@leafygreen-ui/emotion","@leafygreen-ui/hooks"],e);else{var n="object"==typeof exports?e(require("react"),require("prop-types"),require("@leafygreen-ui/portal"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/hooks")):e(t.react,t["prop-types"],t["@leafygreen-ui/portal"],t["@leafygreen-ui/emotion"],t["@leafygreen-ui/hooks"]);for(var i in n)("object"==typeof exports?exports:t)[i]=n[i]}}(window,function(t,e,n,i,o){return function(t){var e={};function n(i){if(e[i])return e[i].exports;var o=e[i]={i:i,l:!1,exports:{}};return t[i].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,i){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(i,o,function(e){return t[e]}.bind(null,o));return i},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=1)}([function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.Justify=e.Justification=e.Align=void 0;e.Align={Top:"top",Bottom:"bottom",Left:"left",Right:"right"};e.Justification={Top:"top",Bottom:"bottom",Left:"left",Right:"right",CenterVertical:"center-vertical",CenterHorizontal:"center-horizontal"};e.Justify={Start:"start",Middle:"middle",End:"end"}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),Object.defineProperty(e,"Align",{enumerable:!0,get:function(){return r.Align}}),Object.defineProperty(e,"Justify",{enumerable:!0,get:function(){return r.Justify}}),Object.defineProperty(e,"Justification",{enumerable:!0,get:function(){return r.Justification}}),Object.defineProperty(e,"ElementPosition",{enumerable:!0,get:function(){return r.ElementPosition}}),Object.defineProperty(e,"PopoverProps",{enumerable:!0,get:function(){return r.PopoverProps}}),e.default=void 0;var i,o=(i=n(2))&&i.__esModule?i:{default:i},r=n(0);var a=o.default;e.default=a},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=void 0;var i=function(t){if(t&&t.__esModule)return t;var e={};if(null!=t)for(var n in t)if(Object.prototype.hasOwnProperty.call(t,n)){var i=Object.defineProperty&&Object.getOwnPropertyDescriptor?Object.getOwnPropertyDescriptor(t,n):{};i.get||i.set?Object.defineProperty(e,n,i):e[n]=t[n]}return e.default=t,e}(n(3)),o=l(n(4)),r=l(n(5)),a=n(6),c=n(7),u=n(0),s=n(8);function l(t){return t&&t.__esModule?t:{default:t}}function f(){return(f=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(t[i]=n[i])}return t}).apply(this,arguments)}function g(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=[],i=!0,o=!1,r=void 0;try{for(var a,c=t[Symbol.iterator]();!(i=(a=c.next()).done)&&(n.push(a.value),!e||n.length!==e);i=!0);}catch(t){o=!0,r=t}finally{try{i||null==c.return||c.return()}finally{if(o)throw r}}return n}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function p(t,e){if(null==t)return{};var n,i,o=function(t,e){if(null==t)return{};var n,i,o={},r=Object.keys(t);for(i=0;i<r.length;i++)n=r[i],e.indexOf(n)>=0||(o[n]=t[n]);return o}(t,e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);for(i=0;i<r.length;i++)n=r[i],e.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(o[n]=t[n])}return o}var d=(0,a.css)("transition:transform 150ms ease-in-out,opacity 150ms ease-in-out;position:absolute;pointer-events:none;opacity:0;"),h={attributes:!0,characterData:!0,childList:!0,subtree:!0};function m(t){var e=t.active,n=void 0!==e&&e,o=t.usePortal,l=void 0===o||o,m=t.spacing,y=void 0===m?10:m,b=t.align,v=void 0===b?u.Align.Bottom:b,P=t.justify,w=void 0===P?u.Justify.Start:P,j=t.adjustOnMutation,J=void 0!==j&&j,O=t.children,E=t.className,A=t.refEl,x=p(t,["active","usePortal","spacing","align","justify","adjustOnMutation","children","className","refEl"]),k=g((0,c.useElementNode)(),2),M=k[0],T=k[1],S=g((0,c.useElementNode)(),2),H=S[0],B=S[1],C=null;if(A&&A.current)C=A.current;else if(M){var R=M.parentNode;R&&R instanceof HTMLElement&&(C=R)}var _,L,W,q=(0,c.useViewportSize)(),z=(0,c.useMutationObserver)(C,h,function(){return Date.now()},J),N=(0,c.useMutationObserver)(H,h,function(){return Date.now()},J),V=(0,i.useMemo)(function(){return(0,s.getElementPosition)(C)},[C,q,z,n,v,w]),D=(0,i.useMemo)(function(){return(0,s.getElementPosition)(H)},[H,q,N,n,v,w]),F=(0,s.calculatePosition)({useRelativePositioning:!l,spacing:y,align:v,justify:w,referenceElPos:V,contentElPos:D}),I=F.alignment,G=F.justification,K=F.positionCSS,Q=(0,a.css)("transform:translate3d(0,0,0) scale(1);opacity:1;position:",l?"":"absolute",";pointer-events:initial;"),U=l?r.default:i.Fragment,X=O?"function"==typeof O?O({alignment:I,justification:G,referenceElPos:V}):O:null;return i.default.createElement(i.default.Fragment,null,i.default.createElement("div",{ref:T,className:(0,a.css)("display:none;")}),i.default.createElement(U,null,i.default.createElement("div",f({},x,{ref:B,className:(0,a.cx)(d,(0,a.css)(K),(_={},L=Q,W=n,L in _?Object.defineProperty(_,L,{value:W,enumerable:!0,configurable:!0,writable:!0}):_[L]=W,_),E)}),X)))}m.displayName="Popover",m.propTypes={children:o.default.oneOfType([o.default.node,o.default.func]),active:o.default.bool,className:o.default.string,align:o.default.oneOf(Object.values(u.Align)),justify:o.default.oneOf(Object.values(u.Justify)),refEl:o.default.shape({current:o.default.instanceOf(Element)}),usePortal:o.default.bool,spacing:o.default.number,adjustOnMutation:o.default.bool},m.defaultProps={children:void 0,align:u.Align.Bottom,justify:u.Justify.Start,active:!1,usePortal:!0,spacing:10,adjustOnMutation:!1};var y=m;e.default=y},function(e,n){e.exports=t},function(t,n){t.exports=e},function(t,e){t.exports=n},function(t,e){t.exports=i},function(t,e){t.exports=o},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.calculatePosition=function(t){var e=t.useRelativePositioning,n=t.spacing,g=t.align,p=t.justify,d=t.referenceElPos,h=void 0===d?a:d,m=t.contentElPos,y=void 0===m?a:m,b=t.windowHeight,v=void 0===b?window.innerHeight:b,P=t.windowWidth,w={windowWidth:void 0===P?window.innerWidth:P,windowHeight:v,referenceElPos:h,contentElPos:y,spacing:n},j=function(t,e){var n=e.spacing,o=e.contentElPos,r=e.windowWidth,a=e.windowHeight,c=e.referenceElPos;return{top:[i.Align.Top,i.Align.Bottom],bottom:[i.Align.Bottom,i.Align.Top],left:[i.Align.Left,i.Align.Right],right:[i.Align.Right,i.Align.Left]}[t].find(function(t){if([i.Align.Top,i.Align.Bottom].includes(t)){var e=u({alignment:t,contentElPos:o,referenceElPos:c,spacing:n});return f({top:e,windowHeight:a,contentHeight:o.height})}if([i.Align.Left,i.Align.Right].includes(t)){var g=s({alignment:t,contentElPos:o,referenceElPos:c,spacing:n});return l({left:g,windowWidth:r,contentWidth:o.width})}return!1})||t}(g,w),J=function(t,e,n){var o,a=n.spacing,c=n.contentElPos,g=n.windowWidth,p=n.windowHeight,d=n.referenceElPos;switch(e){case i.Align.Left:case i.Align.Right:var h;r(h={},i.Justify.Start,[i.Justification.Top,i.Justification.Bottom,i.Justification.CenterVertical]),r(h,i.Justify.Middle,[i.Justification.CenterVertical,i.Justification.Bottom,i.Justification.Top]),r(h,i.Justify.End,[i.Justification.Bottom,i.Justification.Top,i.Justification.CenterVertical]),o=h;break;case i.Align.Top:case i.Align.Bottom:default:var m;r(m={},i.Justify.Start,[i.Justification.Left,i.Justification.Right,i.Justification.CenterHorizontal]),r(m,i.Justify.Middle,[i.Justification.CenterHorizontal,i.Justification.Right,i.Justification.Left]),r(m,i.Justify.End,[i.Justification.Right,i.Justification.Left,i.Justification.CenterHorizontal]),o=m}return o[t].find(function(t){if([i.Justification.Top,i.Justification.Bottom,i.Justification.CenterVertical].includes(t)){var e=u({justification:t,contentElPos:c,referenceElPos:d,spacing:a});return f({top:e,windowHeight:p,contentHeight:c.height})}if([i.Justification.Left,i.Justification.Right,i.Justification.CenterHorizontal].includes(t)){var n=s({justification:t,contentElPos:c,referenceElPos:d,spacing:a});return l({left:n,windowWidth:g,contentWidth:c.width})}return!1})||o[t][0]}(p,j,w),O=function(t){var e=t.alignment,n=t.justification,o="",r="";switch(e){case i.Align.Left:o="right";break;case i.Align.Right:o="left";break;case i.Align.Bottom:r="top";break;case i.Align.Top:r="bottom"}switch(n){case i.Justification.Left:o="left";break;case i.Justification.Right:o="right";break;case i.Justification.Bottom:r="bottom";break;case i.Justification.Top:r="top";break;case i.Justification.CenterHorizontal:o="center";break;case i.Justification.CenterVertical:r="center"}return"".concat(o," ").concat(r)}({alignment:j,justification:J}),E=function(t,e){switch(t){case i.Align.Top:return"translate3d(0, ".concat(e,"px, 0) scale(").concat(.8,")");case i.Align.Bottom:return"translate3d(0, -".concat(e,"px, 0) scale(").concat(.8,")");case i.Align.Left:return"translate3d(".concat(e,"px, 0, 0) scale(").concat(.8,")");case i.Align.Right:return"translate3d(-".concat(e,"px, 0, 0) scale(").concat(.8,")")}}(j,n);if(e)return{alignment:j,justification:J,positionCSS:o({},c({alignment:j,justification:J,referenceElPos:h,contentElPos:y,spacing:n}),{transformOrigin:O,transform:E})};return{alignment:j,justification:J,positionCSS:{top:u({alignment:j,justification:J,contentElPos:y,referenceElPos:h,spacing:n}),left:s({alignment:j,justification:J,contentElPos:y,referenceElPos:h,spacing:n}),transformOrigin:O,transform:E}}},e.getElementPosition=function(t){if(!t)return a;var e=t.getBoundingClientRect(),n=e.top,i=e.bottom,o=e.left,r=e.right,c=t.offsetHeight,u=t.offsetWidth;return{top:n,bottom:i,left:o,right:r,height:c,width:u}};var i=n(0);function o(t){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{},i=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(n).filter(function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),i.forEach(function(e){r(t,e,n[e])})}return t}function r(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}var a={top:0,bottom:0,left:0,right:0,height:0,width:0};function c(t){var e=t.alignment,n=t.justification,o=t.referenceElPos,r=t.contentElPos,a=t.spacing,c={};switch(e){case i.Align.Top:c.bottom="calc(100% + ".concat(a,"px)");break;case i.Align.Bottom:c.top="calc(100% + ".concat(a,"px)");break;case i.Align.Left:c.right="calc(100% + ".concat(a,"px)");break;case i.Align.Right:c.left="calc(100% + ".concat(a,"px)")}switch(n){case i.Justification.Top:c.top=0;break;case i.Justification.Bottom:c.bottom=0;break;case i.Justification.Left:c.left=0;break;case i.Justification.Right:c.right=0;break;case i.Justification.CenterHorizontal:c.left="".concat(o.width/2-r.width/2,"px");break;case i.Justification.CenterVertical:c.top="".concat(o.height/2-r.height/2,"px")}return c}function u(t){var e=t.alignment,n=t.justification,o=t.contentElPos,r=t.referenceElPos,a=t.spacing;switch(n){case i.Justification.Top:return r.top;case i.Justification.Bottom:return r.top+r.height-o.height;case i.Justification.CenterVertical:return r.top-(o.height-r.height)/2}switch(e){case i.Align.Top:return r.top-o.height-a;case i.Align.Bottom:default:return r.top+r.height+a}}function s(t){var e=t.alignment,n=t.justification,o=t.contentElPos,r=t.referenceElPos,a=t.spacing;switch(e){case i.Align.Left:return r.left-o.width-a;case i.Align.Right:return r.left+r.width+a}switch(n){case i.Justification.Right:return r.left+r.width-o.width;case i.Justification.CenterHorizontal:return r.left-(o.width-r.width)/2;case i.Justification.Left:default:return r.left}}function l(t){var e=t.left,n=t.windowWidth,i=t.contentWidth;return e>=0&&!(e+i>n)}function f(t){var e=t.top,n=t.windowHeight,i=t.contentHeight;return e>=0&&!(e+i>n)}}])});
//# sourceMappingURL=index.js.map

64

dist/Popover.d.ts

@@ -1,56 +0,4 @@

import { ReactNode, RefObject, ReactElement } from 'react';
/// <reference types="react" />
import PropTypes from 'prop-types';
import Align from './Align';
import Justify from './Justify';
export interface PopoverProps {
/**
* Content that will appear inside of the popover component.
*/
children: ReactNode;
/**
* Determines the active state of the popover component
*
* default: `false`
*/
active: boolean;
/**
* Class name applied to popover content container.
*/
className?: string;
/**
* Determines the alignment of the popover content relative to the trigger element
*
* default: `bottom`
*/
align?: Align;
/**
* Determines the justification of the popover content relative to the trigger element
*
* default: `start`
*/
justify?: Justify;
/**
* A reference to the element against which the popover component will be positioned.
*/
refEl?: RefObject<HTMLElement>;
/**
* Specifies that the popover content will appear portaled to the end of the DOM,
* rather than in the DOM tree.
*
* default: `true`
*/
usePortal?: boolean;
/**
* Specifies the amount of spacing (in pixels) between the trigger element and the Popover content.
*
* default: `10`
*/
spacing?: number;
/**
* Should the Popover auto adjust its content when the DOM changes (using MutationObserver).
*
* default: false
*/
adjustOnMutation?: boolean;
}
import { PopoverProps } from './types';
/**

@@ -75,11 +23,11 @@ * # Popover

*/
declare function Popover({ active, usePortal, spacing, align, justify, adjustOnMutation, children, className, refEl, ...rest }: PopoverProps): ReactElement;
declare function Popover({ active, usePortal, spacing, align, justify, adjustOnMutation, children, className, refEl, ...rest }: PopoverProps): JSX.Element;
declare namespace Popover {
var displayName: string;
var propTypes: {
children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
children: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
active: PropTypes.Requireable<boolean>;
className: PropTypes.Requireable<string>;
align: PropTypes.Requireable<"left" | "right" | "top" | "bottom">;
justify: PropTypes.Requireable<"start" | "end" | "middle">;
align: PropTypes.Requireable<"top" | "right" | "bottom" | "left">;
justify: PropTypes.Requireable<"start" | "middle" | "end">;
refEl: PropTypes.Requireable<PropTypes.InferProps<{

@@ -86,0 +34,0 @@ current: PropTypes.Requireable<Element>;

25

dist/positionUtils.d.ts

@@ -1,11 +0,2 @@

import Align from './Align';
import Justify from './Justify';
interface ElementPosition {
top: number;
bottom: number;
left: number;
right: number;
height: number;
width: number;
}
import { Align, Justification, Justify, ElementPosition } from './types';
declare type ReferencePosition = ElementPosition;

@@ -28,15 +19,7 @@ declare type ContentPosition = ElementPosition;

export declare function calculatePosition({ useRelativePositioning, spacing, align, justify, referenceElPos, contentElPos, windowHeight, windowWidth, }: CalculatePosition): {
transformOrigin: string;
transform: string;
top?: string | 0 | undefined;
bottom?: string | 0 | undefined;
left?: string | 0 | undefined;
right?: string | 0 | undefined;
} | {
top: number;
left: number;
transformOrigin: string;
transform: string;
alignment: Align;
justification: Justification | Justify;
positionCSS: any;
};
export declare function getElementPosition(element: HTMLElement | null): ElementPosition;
export {};

9

package.json
{
"name": "@leafygreen-ui/popover",
"version": "1.1.6",
"version": "1.2.0",
"description": "LeafyGreen UI Kit Popover",

@@ -8,4 +8,3 @@ "main": "./dist/index.js",

"scripts": {
"build": "../../node_modules/.bin/webpack --config ../../webpack.config.js",
"ts:emit": "tsc --project ./tsconfig.json"
"build": "../../node_modules/.bin/webpack --config ../../webpack.config.js"
},

@@ -19,3 +18,3 @@ "license": "Apache-2.0",

"@leafygreen-ui/lib": "^3.0.6",
"@leafygreen-ui/portal": "^1.1.6",
"@leafygreen-ui/portal": "^1.1.7",
"@leafygreen-ui/theme": "^1.2.6",

@@ -25,2 +24,2 @@ "lodash": "^4.17.11"

"gitHead": "dd71a2d404218ccec2e657df9c0263dc1c15b9e0"
}
}

12

src/index.ts
import Popover from './Popover';
import Align from './Align';
import Justify from './Justify';
export { PopoverProps } from './Popover';
import {
Align,
Justify,
Justification,
ElementPosition,
PopoverProps,
} from './types';
export default Popover;
export { Align, Justify };
export { Align, Justify, Justification, ElementPosition, PopoverProps };

805

src/positionUtils.spec.js

@@ -1,3 +0,2 @@

import Align from './Align';
import Justify from './Justify';
import { Align, Justify } from './types';
import { calculatePosition, getElementPosition } from './positionUtils';

@@ -68,6 +67,23 @@

describe('calculatePosition', () => {
describe('returns an object with three key-value pairs', () => {
const calcPositionObject = calculatePosition({
spacing: SPACING,
windowHeight: WINDOW_HEIGHT,
windowWidth: WINDOW_WIDTH,
useRelativePositioning: false,
align: Align.Top,
justify: Justify.Start,
referenceElPos: refElPos.top,
contentElPos: contentElPos,
});
expect(calcPositionObject.alignment).toBeTruthy();
expect(calcPositionObject.justification).toBeTruthy();
expect(calcPositionObject.positionCSS).toBeTruthy();
});
describe('when the reference element is on the top', () => {
describe('Align.Top', () => {
test('Align.Top respositions to Align.Bottom based on available space', () => {
const pos = calculatePosition({
const { alignment, justification, positionCSS } = calculatePosition({
spacing: SPACING,

@@ -83,6 +99,10 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(15);
expect(pos.left).toBe(45);
expect(pos.transformOrigin).toBe('left top');
expect(pos.transform).toBe('translate3d(0, -5px, 0) scale(0.8)');
expect(alignment).toBe('bottom');
expect(justification).toBe('left');
expect(positionCSS.top).toBe(15);
expect(positionCSS.left).toBe(45);
expect(positionCSS.transformOrigin).toBe('left top');
expect(positionCSS.transform).toBe(
'translate3d(0, -5px, 0) scale(0.8)',
);
});

@@ -93,3 +113,3 @@ });

test('Justify.Start works', () => {
const pos = calculatePosition({
const { alignment, justification, positionCSS } = calculatePosition({
spacing: SPACING,

@@ -105,10 +125,14 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(0);
expect(pos.left).toBe(60);
expect(pos.transformOrigin).toBe('left top');
expect(pos.transform).toBe('translate3d(-5px, 0, 0) scale(0.8)');
expect(alignment).toBe('right');
expect(justification).toBe('top');
expect(positionCSS.top).toBe(0);
expect(positionCSS.left).toBe(60);
expect(positionCSS.transformOrigin).toBe('left top');
expect(positionCSS.transform).toBe(
'translate3d(-5px, 0, 0) scale(0.8)',
);
});
test('Justify.Middle respoistions to Justify.Start based on available space', () => {
const pos = calculatePosition({
test('Justify.Middle repositions to Justify.Start based on available space', () => {
const { alignment, justification, positionCSS } = calculatePosition({
spacing: SPACING,

@@ -124,10 +148,14 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(0);
expect(pos.left).toBe(60);
expect(pos.transformOrigin).toBe('left top');
expect(pos.transform).toBe('translate3d(-5px, 0, 0) scale(0.8)');
expect(alignment).toBe('right');
expect(justification).toBe('top');
expect(positionCSS.top).toBe(0);
expect(positionCSS.left).toBe(60);
expect(positionCSS.transformOrigin).toBe('left top');
expect(positionCSS.transform).toBe(
'translate3d(-5px, 0, 0) scale(0.8)',
);
});
test('Justify.Bottom repositions to Justify.Start based on available space', () => {
const pos = calculatePosition({
const { alignment, justification, positionCSS } = calculatePosition({
spacing: SPACING,

@@ -143,6 +171,10 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(0);
expect(pos.left).toBe(60);
expect(pos.transformOrigin).toBe('left top');
expect(pos.transform).toBe('translate3d(-5px, 0, 0) scale(0.8)');
expect(alignment).toBe('right');
expect(justification).toBe('top');
expect(positionCSS.top).toBe(0);
expect(positionCSS.left).toBe(60);
expect(positionCSS.transformOrigin).toBe('left top');
expect(positionCSS.transform).toBe(
'translate3d(-5px, 0, 0) scale(0.8)',
);
});

@@ -153,3 +185,3 @@ });

test('Justify.Start works', () => {
const pos = calculatePosition({
const { alignment, justification, positionCSS } = calculatePosition({
spacing: SPACING,

@@ -165,9 +197,13 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(15);
expect(pos.left).toBe(45);
expect(pos.transformOrigin).toBe('left top');
expect(pos.transform).toBe('translate3d(0, -5px, 0) scale(0.8)');
expect(alignment).toBe('bottom');
expect(justification).toBe('left');
expect(positionCSS.top).toBe(15);
expect(positionCSS.left).toBe(45);
expect(positionCSS.transformOrigin).toBe('left top');
expect(positionCSS.transform).toBe(
'translate3d(0, -5px, 0) scale(0.8)',
);
});
test('Justify.Middle works', () => {
const pos = calculatePosition({
const { alignment, justification, positionCSS } = calculatePosition({
spacing: SPACING,

@@ -183,9 +219,13 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(15);
expect(pos.left).toBe(40);
expect(pos.transformOrigin).toBe('center top');
expect(pos.transform).toBe('translate3d(0, -5px, 0) scale(0.8)');
expect(alignment).toBe('bottom');
expect(justification).toBe('center-horizontal');
expect(positionCSS.top).toBe(15);
expect(positionCSS.left).toBe(40);
expect(positionCSS.transformOrigin).toBe('center top');
expect(positionCSS.transform).toBe(
'translate3d(0, -5px, 0) scale(0.8)',
);
});
test('Justify.End works', () => {
const pos = calculatePosition({
const { alignment, justification, positionCSS } = calculatePosition({
spacing: SPACING,

@@ -201,6 +241,10 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(15);
expect(pos.left).toBe(35);
expect(pos.transformOrigin).toBe('right top');
expect(pos.transform).toBe('translate3d(0, -5px, 0) scale(0.8)');
expect(alignment).toBe('bottom');
expect(justification).toBe('right');
expect(positionCSS.top).toBe(15);
expect(positionCSS.left).toBe(35);
expect(positionCSS.transformOrigin).toBe('right top');
expect(positionCSS.transform).toBe(
'translate3d(0, -5px, 0) scale(0.8)',
);
});

@@ -212,3 +256,3 @@ });

test('Justify.Start', () => {
const pos = calculatePosition({
const { alignment, justification, positionCSS } = calculatePosition({
spacing: SPACING,

@@ -224,9 +268,11 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(0);
expect(pos.left).toBe(20);
expect(pos.transformOrigin).toBe('right top');
expect(pos.transform).toBe('translate3d(5px, 0, 0) scale(0.8)');
expect(alignment).toBe('left');
expect(justification).toBe('top');
expect(positionCSS.top).toBe(0);
expect(positionCSS.left).toBe(20);
expect(positionCSS.transformOrigin).toBe('right top');
expect(positionCSS.transform).toBe('translate3d(5px, 0, 0) scale(0.8)');
});
test('Justify.Center respositions to Justify.Start based on available space', () => {
const pos = calculatePosition({
const { alignment, justification, positionCSS } = calculatePosition({
spacing: SPACING,

@@ -242,10 +288,12 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(0);
expect(pos.left).toBe(20);
expect(pos.transformOrigin).toBe('right top');
expect(pos.transform).toBe('translate3d(5px, 0, 0) scale(0.8)');
expect(alignment).toBe('left');
expect(justification).toBe('top');
expect(positionCSS.top).toBe(0);
expect(positionCSS.left).toBe(20);
expect(positionCSS.transformOrigin).toBe('right top');
expect(positionCSS.transform).toBe('translate3d(5px, 0, 0) scale(0.8)');
});
test('Justify.End respositions to Justify.Start based on available space', () => {
const pos = calculatePosition({
const { alignment, justification, positionCSS } = calculatePosition({
spacing: SPACING,

@@ -261,6 +309,8 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(0);
expect(pos.left).toBe(20);
expect(pos.transformOrigin).toBe('right top');
expect(pos.transform).toBe('translate3d(5px, 0, 0) scale(0.8)');
expect(alignment).toBe('left');
expect(justification).toBe('top');
expect(positionCSS.top).toBe(0);
expect(positionCSS.left).toBe(20);
expect(positionCSS.transformOrigin).toBe('right top');
expect(positionCSS.transform).toBe('translate3d(5px, 0, 0) scale(0.8)');
});

@@ -272,3 +322,3 @@ });

test('Justify.Start repositions to Justify.End based on available space', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -284,9 +334,12 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(20);
expect(pos.left).toBe(80);
expect(pos.transformOrigin).toBe('right bottom');
expect(pos.transform).toBe('translate3d(0, 5px, 0) scale(0.8)');
expect(positionCSS.top).toBe(20);
expect(positionCSS.left).toBe(80);
expect(positionCSS.transformOrigin).toBe('right bottom');
expect(positionCSS.transform).toBe(
'translate3d(0, 5px, 0) scale(0.8)',
);
});
test('Justify.Middle repositions to Justify.Start based on available space', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -302,9 +355,11 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(20);
expect(pos.left).toBe(80);
expect(pos.transformOrigin).toBe('right bottom');
expect(pos.transform).toBe('translate3d(0, 5px, 0) scale(0.8)');
expect(positionCSS.top).toBe(20);
expect(positionCSS.left).toBe(80);
expect(positionCSS.transformOrigin).toBe('right bottom');
expect(positionCSS.transform).toBe(
'translate3d(0, 5px, 0) scale(0.8)',
);
});
test('Justify.End works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -320,6 +375,8 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(20);
expect(pos.left).toBe(80);
expect(pos.transformOrigin).toBe('right bottom');
expect(pos.transform).toBe('translate3d(0, 5px, 0) scale(0.8)');
expect(positionCSS.top).toBe(20);
expect(positionCSS.left).toBe(80);
expect(positionCSS.transformOrigin).toBe('right bottom');
expect(positionCSS.transform).toBe(
'translate3d(0, 5px, 0) scale(0.8)',
);
});

@@ -329,3 +386,3 @@ });

test('Align.Right respositions to Align.Left based on available space', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -341,6 +398,8 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(45);
expect(pos.left).toBe(65);
expect(pos.transformOrigin).toBe('right top');
expect(pos.transform).toBe('translate3d(5px, 0, 0) scale(0.8)');
expect(positionCSS.top).toBe(45);
expect(positionCSS.left).toBe(65);
expect(positionCSS.transformOrigin).toBe('right top');
expect(positionCSS.transform).toBe(
'translate3d(5px, 0, 0) scale(0.8)',
);
});

@@ -350,3 +409,3 @@ });

test('Justify.Start repositions to Justify.End based on available space', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -362,9 +421,11 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(60);
expect(pos.left).toBe(80);
expect(pos.transformOrigin).toBe('right top');
expect(pos.transform).toBe('translate3d(0, -5px, 0) scale(0.8)');
expect(positionCSS.top).toBe(60);
expect(positionCSS.left).toBe(80);
expect(positionCSS.transformOrigin).toBe('right top');
expect(positionCSS.transform).toBe(
'translate3d(0, -5px, 0) scale(0.8)',
);
});
test('Justify.Middle repositions to Justify.End based on available space', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -380,9 +441,11 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(60);
expect(pos.left).toBe(80);
expect(pos.transformOrigin).toBe('right top');
expect(pos.transform).toBe('translate3d(0, -5px, 0) scale(0.8)');
expect(positionCSS.top).toBe(60);
expect(positionCSS.left).toBe(80);
expect(positionCSS.transformOrigin).toBe('right top');
expect(positionCSS.transform).toBe(
'translate3d(0, -5px, 0) scale(0.8)',
);
});
test('Justify.End works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -398,6 +461,8 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(60);
expect(pos.left).toBe(80);
expect(pos.transformOrigin).toBe('right top');
expect(pos.transform).toBe('translate3d(0, -5px, 0) scale(0.8)');
expect(positionCSS.top).toBe(60);
expect(positionCSS.left).toBe(80);
expect(positionCSS.transformOrigin).toBe('right top');
expect(positionCSS.transform).toBe(
'translate3d(0, -5px, 0) scale(0.8)',
);
});

@@ -407,3 +472,3 @@ });

test('Justify.Start works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -419,9 +484,11 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(45);
expect(pos.left).toBe(65);
expect(pos.transformOrigin).toBe('right top');
expect(pos.transform).toBe('translate3d(5px, 0, 0) scale(0.8)');
expect(positionCSS.top).toBe(45);
expect(positionCSS.left).toBe(65);
expect(positionCSS.transformOrigin).toBe('right top');
expect(positionCSS.transform).toBe(
'translate3d(5px, 0, 0) scale(0.8)',
);
});
test('Justify.Middle works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -437,10 +504,12 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(40);
expect(pos.left).toBe(65);
expect(pos.transformOrigin).toBe('right center');
expect(pos.transform).toBe('translate3d(5px, 0, 0) scale(0.8)');
expect(positionCSS.top).toBe(40);
expect(positionCSS.left).toBe(65);
expect(positionCSS.transformOrigin).toBe('right center');
expect(positionCSS.transform).toBe(
'translate3d(5px, 0, 0) scale(0.8)',
);
});
test('Justify.End works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -456,6 +525,8 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(35);
expect(pos.left).toBe(65);
expect(pos.transformOrigin).toBe('right bottom');
expect(pos.transform).toBe('translate3d(5px, 0, 0) scale(0.8)');
expect(positionCSS.top).toBe(35);
expect(positionCSS.left).toBe(65);
expect(positionCSS.transformOrigin).toBe('right bottom');
expect(positionCSS.transform).toBe(
'translate3d(5px, 0, 0) scale(0.8)',
);
});

@@ -468,3 +539,3 @@ });

test('Justify.Start works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -480,10 +551,12 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(65);
expect(pos.left).toBe(45);
expect(pos.transformOrigin).toBe('left bottom');
expect(pos.transform).toBe('translate3d(0, 5px, 0) scale(0.8)');
expect(positionCSS.top).toBe(65);
expect(positionCSS.left).toBe(45);
expect(positionCSS.transformOrigin).toBe('left bottom');
expect(positionCSS.transform).toBe(
'translate3d(0, 5px, 0) scale(0.8)',
);
});
test('Justify.Middle works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -499,10 +572,12 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(65);
expect(pos.left).toBe(40);
expect(pos.transformOrigin).toBe('center bottom');
expect(pos.transform).toBe('translate3d(0, 5px, 0) scale(0.8)');
expect(positionCSS.top).toBe(65);
expect(positionCSS.left).toBe(40);
expect(positionCSS.transformOrigin).toBe('center bottom');
expect(positionCSS.transform).toBe(
'translate3d(0, 5px, 0) scale(0.8)',
);
});
test('Justify.End works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -518,6 +593,8 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(65);
expect(pos.left).toBe(35);
expect(pos.transformOrigin).toBe('right bottom');
expect(pos.transform).toBe('translate3d(0, 5px, 0) scale(0.8)');
expect(positionCSS.top).toBe(65);
expect(positionCSS.left).toBe(35);
expect(positionCSS.transformOrigin).toBe('right bottom');
expect(positionCSS.transform).toBe(
'translate3d(0, 5px, 0) scale(0.8)',
);
});

@@ -528,3 +605,3 @@ });

test('Justify.Start repositions to Justify.End based on available space', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -540,9 +617,11 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(80);
expect(pos.left).toBe(60);
expect(pos.transformOrigin).toBe('left bottom');
expect(pos.transform).toBe('translate3d(-5px, 0, 0) scale(0.8)');
expect(positionCSS.top).toBe(80);
expect(positionCSS.left).toBe(60);
expect(positionCSS.transformOrigin).toBe('left bottom');
expect(positionCSS.transform).toBe(
'translate3d(-5px, 0, 0) scale(0.8)',
);
});
test('Justify.Middle repositions to Justify.End based on available space', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -558,10 +637,12 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(80);
expect(pos.left).toBe(60);
expect(pos.transformOrigin).toBe('left bottom');
expect(pos.transform).toBe('translate3d(-5px, 0, 0) scale(0.8)');
expect(positionCSS.top).toBe(80);
expect(positionCSS.left).toBe(60);
expect(positionCSS.transformOrigin).toBe('left bottom');
expect(positionCSS.transform).toBe(
'translate3d(-5px, 0, 0) scale(0.8)',
);
});
test('Justify.End works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -577,6 +658,8 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(80);
expect(pos.left).toBe(60);
expect(pos.transformOrigin).toBe('left bottom');
expect(pos.transform).toBe('translate3d(-5px, 0, 0) scale(0.8)');
expect(positionCSS.top).toBe(80);
expect(positionCSS.left).toBe(60);
expect(positionCSS.transformOrigin).toBe('left bottom');
expect(positionCSS.transform).toBe(
'translate3d(-5px, 0, 0) scale(0.8)',
);
});

@@ -586,3 +669,3 @@ });

test('Align.Bottom repositions to Align.Start based on available space', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -598,6 +681,8 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(65);
expect(pos.left).toBe(45);
expect(pos.transformOrigin).toBe('left bottom');
expect(pos.transform).toBe('translate3d(0, 5px, 0) scale(0.8)');
expect(positionCSS.top).toBe(65);
expect(positionCSS.left).toBe(45);
expect(positionCSS.transformOrigin).toBe('left bottom');
expect(positionCSS.transform).toBe(
'translate3d(0, 5px, 0) scale(0.8)',
);
});

@@ -608,3 +693,3 @@ });

test('Justify.Start repositions to Justify.End based on available space', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -620,10 +705,12 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(80);
expect(pos.left).toBe(20);
expect(pos.transformOrigin).toBe('right bottom');
expect(pos.transform).toBe('translate3d(5px, 0, 0) scale(0.8)');
expect(positionCSS.top).toBe(80);
expect(positionCSS.left).toBe(20);
expect(positionCSS.transformOrigin).toBe('right bottom');
expect(positionCSS.transform).toBe(
'translate3d(5px, 0, 0) scale(0.8)',
);
});
test('Justify.Middle repositions to Justify.End based on available space', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -639,10 +726,12 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(80);
expect(pos.left).toBe(20);
expect(pos.transformOrigin).toBe('right bottom');
expect(pos.transform).toBe('translate3d(5px, 0, 0) scale(0.8)');
expect(positionCSS.top).toBe(80);
expect(positionCSS.left).toBe(20);
expect(positionCSS.transformOrigin).toBe('right bottom');
expect(positionCSS.transform).toBe(
'translate3d(5px, 0, 0) scale(0.8)',
);
});
test('Justify.End works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -658,6 +747,8 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(80);
expect(pos.left).toBe(20);
expect(pos.transformOrigin).toBe('right bottom');
expect(pos.transform).toBe('translate3d(5px, 0, 0) scale(0.8)');
expect(positionCSS.top).toBe(80);
expect(positionCSS.left).toBe(20);
expect(positionCSS.transformOrigin).toBe('right bottom');
expect(positionCSS.transform).toBe(
'translate3d(5px, 0, 0) scale(0.8)',
);
});

@@ -670,3 +761,3 @@ });

test('Justify.Start works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -682,9 +773,11 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(20);
expect(pos.left).toBe(0);
expect(pos.transformOrigin).toBe('left bottom');
expect(pos.transform).toBe('translate3d(0, 5px, 0) scale(0.8)');
expect(positionCSS.top).toBe(20);
expect(positionCSS.left).toBe(0);
expect(positionCSS.transformOrigin).toBe('left bottom');
expect(positionCSS.transform).toBe(
'translate3d(0, 5px, 0) scale(0.8)',
);
});
test('Justify.Middle repositions to Justify.Start based on available space', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -700,9 +793,11 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(20);
expect(pos.left).toBe(0);
expect(pos.transformOrigin).toBe('left bottom');
expect(pos.transform).toBe('translate3d(0, 5px, 0) scale(0.8)');
expect(positionCSS.top).toBe(20);
expect(positionCSS.left).toBe(0);
expect(positionCSS.transformOrigin).toBe('left bottom');
expect(positionCSS.transform).toBe(
'translate3d(0, 5px, 0) scale(0.8)',
);
});
test('Justify.End repositions to Justify.Start based on available space', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -718,6 +813,8 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(20);
expect(pos.left).toBe(0);
expect(pos.transformOrigin).toBe('left bottom');
expect(pos.transform).toBe('translate3d(0, 5px, 0) scale(0.8)');
expect(positionCSS.top).toBe(20);
expect(positionCSS.left).toBe(0);
expect(positionCSS.transformOrigin).toBe('left bottom');
expect(positionCSS.transform).toBe(
'translate3d(0, 5px, 0) scale(0.8)',
);
});

@@ -728,3 +825,3 @@ });

test('Justify.Start works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -740,9 +837,11 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(45);
expect(pos.left).toBe(15);
expect(pos.transformOrigin).toBe('left top');
expect(pos.transform).toBe('translate3d(-5px, 0, 0) scale(0.8)');
expect(positionCSS.top).toBe(45);
expect(positionCSS.left).toBe(15);
expect(positionCSS.transformOrigin).toBe('left top');
expect(positionCSS.transform).toBe(
'translate3d(-5px, 0, 0) scale(0.8)',
);
});
test('Justify.Middle works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -758,9 +857,11 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(40);
expect(pos.left).toBe(15);
expect(pos.transformOrigin).toBe('left center');
expect(pos.transform).toBe('translate3d(-5px, 0, 0) scale(0.8)');
expect(positionCSS.top).toBe(40);
expect(positionCSS.left).toBe(15);
expect(positionCSS.transformOrigin).toBe('left center');
expect(positionCSS.transform).toBe(
'translate3d(-5px, 0, 0) scale(0.8)',
);
});
test('Justify.End works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -776,6 +877,8 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(35);
expect(pos.left).toBe(15);
expect(pos.transformOrigin).toBe('left bottom');
expect(pos.transform).toBe('translate3d(-5px, 0, 0) scale(0.8)');
expect(positionCSS.top).toBe(35);
expect(positionCSS.left).toBe(15);
expect(positionCSS.transformOrigin).toBe('left bottom');
expect(positionCSS.transform).toBe(
'translate3d(-5px, 0, 0) scale(0.8)',
);
});

@@ -785,3 +888,3 @@ });

test('Justify.Start works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -797,10 +900,12 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(60);
expect(pos.left).toBe(0);
expect(pos.transformOrigin).toBe('left top');
expect(pos.transform).toBe('translate3d(0, -5px, 0) scale(0.8)');
expect(positionCSS.top).toBe(60);
expect(positionCSS.left).toBe(0);
expect(positionCSS.transformOrigin).toBe('left top');
expect(positionCSS.transform).toBe(
'translate3d(0, -5px, 0) scale(0.8)',
);
});
test('Justify.Middle repositions to Justify.Start based on available space', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -816,10 +921,12 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(60);
expect(pos.left).toBe(0);
expect(pos.transformOrigin).toBe('left top');
expect(pos.transform).toBe('translate3d(0, -5px, 0) scale(0.8)');
expect(positionCSS.top).toBe(60);
expect(positionCSS.left).toBe(0);
expect(positionCSS.transformOrigin).toBe('left top');
expect(positionCSS.transform).toBe(
'translate3d(0, -5px, 0) scale(0.8)',
);
});
test('Justify.End repositions to Justify.Start based on available space', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -835,6 +942,8 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(60);
expect(pos.left).toBe(0);
expect(pos.transformOrigin).toBe('left top');
expect(pos.transform).toBe('translate3d(0, -5px, 0) scale(0.8)');
expect(positionCSS.top).toBe(60);
expect(positionCSS.left).toBe(0);
expect(positionCSS.transformOrigin).toBe('left top');
expect(positionCSS.transform).toBe(
'translate3d(0, -5px, 0) scale(0.8)',
);
});

@@ -845,3 +954,3 @@ });

test('Align.Left repositions to Align.Right based on available space', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -857,6 +966,8 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(45);
expect(pos.left).toBe(15);
expect(pos.transformOrigin).toBe('left top');
expect(pos.transform).toBe('translate3d(-5px, 0, 0) scale(0.8)');
expect(positionCSS.top).toBe(45);
expect(positionCSS.left).toBe(15);
expect(positionCSS.transformOrigin).toBe('left top');
expect(positionCSS.transform).toBe(
'translate3d(-5px, 0, 0) scale(0.8)',
);
});

@@ -869,3 +980,3 @@ });

test('Justification.Start works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -881,10 +992,12 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(20);
expect(pos.left).toBe(45);
expect(pos.transformOrigin).toBe('left bottom');
expect(pos.transform).toBe('translate3d(0, 5px, 0) scale(0.8)');
expect(positionCSS.top).toBe(20);
expect(positionCSS.left).toBe(45);
expect(positionCSS.transformOrigin).toBe('left bottom');
expect(positionCSS.transform).toBe(
'translate3d(0, 5px, 0) scale(0.8)',
);
});
test('Justification.Middle works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -900,10 +1013,12 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(20);
expect(pos.left).toBe(40);
expect(pos.transformOrigin).toBe('center bottom');
expect(pos.transform).toBe('translate3d(0, 5px, 0) scale(0.8)');
expect(positionCSS.top).toBe(20);
expect(positionCSS.left).toBe(40);
expect(positionCSS.transformOrigin).toBe('center bottom');
expect(positionCSS.transform).toBe(
'translate3d(0, 5px, 0) scale(0.8)',
);
});
test('Justification.End works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -919,6 +1034,8 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(20);
expect(pos.left).toBe(35);
expect(pos.transformOrigin).toBe('right bottom');
expect(pos.transform).toBe('translate3d(0, 5px, 0) scale(0.8)');
expect(positionCSS.top).toBe(20);
expect(positionCSS.left).toBe(35);
expect(positionCSS.transformOrigin).toBe('right bottom');
expect(positionCSS.transform).toBe(
'translate3d(0, 5px, 0) scale(0.8)',
);
});

@@ -929,3 +1046,3 @@ });

test('Justification.Start works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -941,10 +1058,12 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(45);
expect(pos.left).toBe(60);
expect(pos.transformOrigin).toBe('left top');
expect(pos.transform).toBe('translate3d(-5px, 0, 0) scale(0.8)');
expect(positionCSS.top).toBe(45);
expect(positionCSS.left).toBe(60);
expect(positionCSS.transformOrigin).toBe('left top');
expect(positionCSS.transform).toBe(
'translate3d(-5px, 0, 0) scale(0.8)',
);
});
test('Justification.Middle works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -960,10 +1079,12 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(40);
expect(pos.left).toBe(60);
expect(pos.transformOrigin).toBe('left center');
expect(pos.transform).toBe('translate3d(-5px, 0, 0) scale(0.8)');
expect(positionCSS.top).toBe(40);
expect(positionCSS.left).toBe(60);
expect(positionCSS.transformOrigin).toBe('left center');
expect(positionCSS.transform).toBe(
'translate3d(-5px, 0, 0) scale(0.8)',
);
});
test('Justification.End works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -979,6 +1100,8 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(35);
expect(pos.left).toBe(60);
expect(pos.transformOrigin).toBe('left bottom');
expect(pos.transform).toBe('translate3d(-5px, 0, 0) scale(0.8)');
expect(positionCSS.top).toBe(35);
expect(positionCSS.left).toBe(60);
expect(positionCSS.transformOrigin).toBe('left bottom');
expect(positionCSS.transform).toBe(
'translate3d(-5px, 0, 0) scale(0.8)',
);
});

@@ -989,3 +1112,3 @@ });

test('Justification.Start works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -1001,10 +1124,12 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(60);
expect(pos.left).toBe(45);
expect(pos.transformOrigin).toBe('left top');
expect(pos.transform).toBe('translate3d(0, -5px, 0) scale(0.8)');
expect(positionCSS.top).toBe(60);
expect(positionCSS.left).toBe(45);
expect(positionCSS.transformOrigin).toBe('left top');
expect(positionCSS.transform).toBe(
'translate3d(0, -5px, 0) scale(0.8)',
);
});
test('Justification.Middle works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -1020,10 +1145,12 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(60);
expect(pos.left).toBe(40);
expect(pos.transformOrigin).toBe('center top');
expect(pos.transform).toBe('translate3d(0, -5px, 0) scale(0.8)');
expect(positionCSS.top).toBe(60);
expect(positionCSS.left).toBe(40);
expect(positionCSS.transformOrigin).toBe('center top');
expect(positionCSS.transform).toBe(
'translate3d(0, -5px, 0) scale(0.8)',
);
});
test('Justification.End works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -1039,6 +1166,8 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(60);
expect(pos.left).toBe(35);
expect(pos.transformOrigin).toBe('right top');
expect(pos.transform).toBe('translate3d(0, -5px, 0) scale(0.8)');
expect(positionCSS.top).toBe(60);
expect(positionCSS.left).toBe(35);
expect(positionCSS.transformOrigin).toBe('right top');
expect(positionCSS.transform).toBe(
'translate3d(0, -5px, 0) scale(0.8)',
);
});

@@ -1049,3 +1178,3 @@ });

test('Justification.Start works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -1061,10 +1190,12 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(45);
expect(pos.left).toBe(20);
expect(pos.transformOrigin).toBe('right top');
expect(pos.transform).toBe('translate3d(5px, 0, 0) scale(0.8)');
expect(positionCSS.top).toBe(45);
expect(positionCSS.left).toBe(20);
expect(positionCSS.transformOrigin).toBe('right top');
expect(positionCSS.transform).toBe(
'translate3d(5px, 0, 0) scale(0.8)',
);
});
test('Justification.Middle works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -1080,10 +1211,12 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(40);
expect(pos.left).toBe(20);
expect(pos.transformOrigin).toBe('right center');
expect(pos.transform).toBe('translate3d(5px, 0, 0) scale(0.8)');
expect(positionCSS.top).toBe(40);
expect(positionCSS.left).toBe(20);
expect(positionCSS.transformOrigin).toBe('right center');
expect(positionCSS.transform).toBe(
'translate3d(5px, 0, 0) scale(0.8)',
);
});
test('Justification.End works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -1099,6 +1232,8 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(35);
expect(pos.left).toBe(20);
expect(pos.transformOrigin).toBe('right bottom');
expect(pos.transform).toBe('translate3d(5px, 0, 0) scale(0.8)');
expect(positionCSS.top).toBe(35);
expect(positionCSS.left).toBe(20);
expect(positionCSS.transformOrigin).toBe('right bottom');
expect(positionCSS.transform).toBe(
'translate3d(5px, 0, 0) scale(0.8)',
);
});

@@ -1111,3 +1246,3 @@ });

test('Justification.Start works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -1123,10 +1258,12 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.bottom).toBe('calc(100% + 5px)');
expect(pos.left).toBe(0);
expect(pos.transformOrigin).toBe('left bottom');
expect(pos.transform).toBe('translate3d(0, 5px, 0) scale(0.8)');
expect(positionCSS.bottom).toBe('calc(100% + 5px)');
expect(positionCSS.left).toBe(0);
expect(positionCSS.transformOrigin).toBe('left bottom');
expect(positionCSS.transform).toBe(
'translate3d(0, 5px, 0) scale(0.8)',
);
});
test('Justification.Middle works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -1142,10 +1279,12 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.bottom).toBe('calc(100% + 5px)');
expect(pos.left).toBe('-5px');
expect(pos.transformOrigin).toBe('center bottom');
expect(pos.transform).toBe('translate3d(0, 5px, 0) scale(0.8)');
expect(positionCSS.bottom).toBe('calc(100% + 5px)');
expect(positionCSS.left).toBe('-5px');
expect(positionCSS.transformOrigin).toBe('center bottom');
expect(positionCSS.transform).toBe(
'translate3d(0, 5px, 0) scale(0.8)',
);
});
test('Justification.End works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -1161,6 +1300,8 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.bottom).toBe('calc(100% + 5px)');
expect(pos.right).toBe(0);
expect(pos.transformOrigin).toBe('right bottom');
expect(pos.transform).toBe('translate3d(0, 5px, 0) scale(0.8)');
expect(positionCSS.bottom).toBe('calc(100% + 5px)');
expect(positionCSS.right).toBe(0);
expect(positionCSS.transformOrigin).toBe('right bottom');
expect(positionCSS.transform).toBe(
'translate3d(0, 5px, 0) scale(0.8)',
);
});

@@ -1171,3 +1312,3 @@ });

test('Justification.Start works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -1183,10 +1324,12 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(0);
expect(pos.left).toBe('calc(100% + 5px)');
expect(pos.transformOrigin).toBe('left top');
expect(pos.transform).toBe('translate3d(-5px, 0, 0) scale(0.8)');
expect(positionCSS.top).toBe(0);
expect(positionCSS.left).toBe('calc(100% + 5px)');
expect(positionCSS.transformOrigin).toBe('left top');
expect(positionCSS.transform).toBe(
'translate3d(-5px, 0, 0) scale(0.8)',
);
});
test('Justification.Middle works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -1202,10 +1345,12 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe('-5px');
expect(pos.left).toBe('calc(100% + 5px)');
expect(pos.transformOrigin).toBe('left center');
expect(pos.transform).toBe('translate3d(-5px, 0, 0) scale(0.8)');
expect(positionCSS.top).toBe('-5px');
expect(positionCSS.left).toBe('calc(100% + 5px)');
expect(positionCSS.transformOrigin).toBe('left center');
expect(positionCSS.transform).toBe(
'translate3d(-5px, 0, 0) scale(0.8)',
);
});
test('Justification.End works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -1221,6 +1366,8 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.bottom).toBe(0);
expect(pos.left).toBe('calc(100% + 5px)');
expect(pos.transformOrigin).toBe('left bottom');
expect(pos.transform).toBe('translate3d(-5px, 0, 0) scale(0.8)');
expect(positionCSS.bottom).toBe(0);
expect(positionCSS.left).toBe('calc(100% + 5px)');
expect(positionCSS.transformOrigin).toBe('left bottom');
expect(positionCSS.transform).toBe(
'translate3d(-5px, 0, 0) scale(0.8)',
);
});

@@ -1231,3 +1378,3 @@ });

test('Justification.Start works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -1243,10 +1390,12 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe('calc(100% + 5px)');
expect(pos.left).toBe(0);
expect(pos.transformOrigin).toBe('left top');
expect(pos.transform).toBe('translate3d(0, -5px, 0) scale(0.8)');
expect(positionCSS.top).toBe('calc(100% + 5px)');
expect(positionCSS.left).toBe(0);
expect(positionCSS.transformOrigin).toBe('left top');
expect(positionCSS.transform).toBe(
'translate3d(0, -5px, 0) scale(0.8)',
);
});
test('Justification.Middle works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -1262,10 +1411,12 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe('calc(100% + 5px)');
expect(pos.left).toBe('-5px');
expect(pos.transformOrigin).toBe('center top');
expect(pos.transform).toBe('translate3d(0, -5px, 0) scale(0.8)');
expect(positionCSS.top).toBe('calc(100% + 5px)');
expect(positionCSS.left).toBe('-5px');
expect(positionCSS.transformOrigin).toBe('center top');
expect(positionCSS.transform).toBe(
'translate3d(0, -5px, 0) scale(0.8)',
);
});
test('Justification.End works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -1281,6 +1432,8 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe('calc(100% + 5px)');
expect(pos.right).toBe(0);
expect(pos.transformOrigin).toBe('right top');
expect(pos.transform).toBe('translate3d(0, -5px, 0) scale(0.8)');
expect(positionCSS.top).toBe('calc(100% + 5px)');
expect(positionCSS.right).toBe(0);
expect(positionCSS.transformOrigin).toBe('right top');
expect(positionCSS.transform).toBe(
'translate3d(0, -5px, 0) scale(0.8)',
);
});

@@ -1291,3 +1444,3 @@ });

test('Justification.Start works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -1303,10 +1456,12 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe(0);
expect(pos.right).toBe('calc(100% + 5px)');
expect(pos.transformOrigin).toBe('right top');
expect(pos.transform).toBe('translate3d(5px, 0, 0) scale(0.8)');
expect(positionCSS.top).toBe(0);
expect(positionCSS.right).toBe('calc(100% + 5px)');
expect(positionCSS.transformOrigin).toBe('right top');
expect(positionCSS.transform).toBe(
'translate3d(5px, 0, 0) scale(0.8)',
);
});
test('Justification.Middle works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -1322,10 +1477,12 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.top).toBe('-5px');
expect(pos.right).toBe('calc(100% + 5px)');
expect(pos.transformOrigin).toBe('right center');
expect(pos.transform).toBe('translate3d(5px, 0, 0) scale(0.8)');
expect(positionCSS.top).toBe('-5px');
expect(positionCSS.right).toBe('calc(100% + 5px)');
expect(positionCSS.transformOrigin).toBe('right center');
expect(positionCSS.transform).toBe(
'translate3d(5px, 0, 0) scale(0.8)',
);
});
test('Justification.End works', () => {
const pos = calculatePosition({
const { positionCSS } = calculatePosition({
spacing: SPACING,

@@ -1341,6 +1498,8 @@ windowHeight: WINDOW_HEIGHT,

expect(pos.bottom).toBe(0);
expect(pos.right).toBe('calc(100% + 5px)');
expect(pos.transformOrigin).toBe('right bottom');
expect(pos.transform).toBe('translate3d(5px, 0, 0) scale(0.8)');
expect(positionCSS.bottom).toBe(0);
expect(positionCSS.right).toBe('calc(100% + 5px)');
expect(positionCSS.transformOrigin).toBe('right bottom');
expect(positionCSS.transform).toBe(
'translate3d(5px, 0, 0) scale(0.8)',
);
});

@@ -1347,0 +1506,0 @@ });

85

src/positionUtils.ts

@@ -1,13 +0,3 @@

import Align from './Align';
import Justify from './Justify';
import { Align, Justification, Justify, ElementPosition } from './types';
interface ElementPosition {
top: number;
bottom: number;
left: number;
right: number;
height: number;
width: number;
}
type ReferencePosition = ElementPosition;

@@ -43,3 +33,7 @@ type ContentPosition = ElementPosition;

windowWidth = window.innerWidth,
}: CalculatePosition) {
}: CalculatePosition): {
alignment: Align;
justification: Justification | Justify;
positionCSS: any;
} {
const windowSafeCommonArgs = {

@@ -69,7 +63,34 @@ windowWidth,

return {
...calcRelativePosition({
alignment,
justification,
positionCSS: {
...calcRelativePosition({
alignment,
justification,
referenceElPos,
contentElPos,
spacing,
}),
transformOrigin,
transform,
},
};
}
return {
alignment,
justification,
positionCSS: {
top: calcTop({
alignment,
justification,
contentElPos,
referenceElPos,
spacing,
}),
left: calcLeft({
alignment,
justification,
contentElPos,
referenceElPos,
spacing,

@@ -79,22 +100,3 @@ }),

transform,
};
}
return {
top: calcTop({
alignment,
justification,
contentElPos,
referenceElPos,
spacing,
}),
left: calcLeft({
alignment,
justification,
contentElPos,
referenceElPos,
spacing,
}),
transformOrigin,
transform,
},
};

@@ -126,15 +128,2 @@ }

// We transform 'middle' into 'center-vertical' or 'center-horizontal' for internal use,
// So both Justify and Justification are needed, where the same is not true for Alignment.
const Justification = {
Top: 'top',
Bottom: 'bottom',
Left: 'left',
Right: 'right',
CenterVertical: 'center-vertical',
CenterHorizontal: 'center-horizontal',
} as const;
type Justification = typeof Justification[keyof typeof Justification];
interface TransformOriginArgs {

@@ -312,3 +301,3 @@ alignment: Align;

return (
referenceElPos.top + referenceElPos.height / 2 - contentElPos.height / 2
referenceElPos.top - (contentElPos.height - referenceElPos.height) / 2
);

@@ -349,3 +338,3 @@ }

return (
referenceElPos.left + referenceElPos.width / 2 - contentElPos.width / 2
referenceElPos.left - (contentElPos.width - referenceElPos.width) / 2
);

@@ -352,0 +341,0 @@

22

tsconfig.json
{
"extends": "../../package.tsconfig.json",
"compilerOptions": {
"declarationDir": "dist"
"declarationDir": "dist",
"rootDir": "src"
},
"include": ["src/**/*"]
"include": ["src/**/*"],
"references": [
{
"path": "../emotion"
},
{
"path": "../hooks"
},
{
"path": "../lib"
},
{
"path": "../portal"
},
{
"path": "../theme"
}
]
}
dist/Align.d.ts
dist/Justify.d.ts
src/Align.ts
src/Justify.ts
dist/index.js.map

Sorry, the diff of this file is not supported yet

src/Popover.spec.tsx

Sorry, the diff of this file is not supported yet

src/Popover.tsx

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc