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

Completely unstyled, headless and accessible React UI components.

"use strict";var __assign=this&&this.__assign||function(){return __assign=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},__assign.apply(this,arguments)},__createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,n){void 0===n&&(n=r);var o=Object.getOwnPropertyDescriptor(t,r);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,n,o)}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t},__rest=this&&this.__rest||function(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]])}return r},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});var jsx_runtime_1=require("react/jsx-runtime"),React=__importStar(require("react")),Portal_1=__importDefault(require("../Portal")),utils_1=require("../utils"),helpers_1=require("./helpers"),Slots=__importStar(require("./slots")),translate=function(e){var t=e.x,r=e.y,n="undefined"!=typeof window?window.devicePixelRatio:1,o={x:Math.round(Math.round(t*n)/n),y:Math.round(Math.round(r*n)/n)},i=o.y,a="translate(".concat(o.x,"px, ").concat(i,"px)");return{transform:a,WebkitTransform:a,MozTransform:a,msTransform:a}},getAnchor=function(e){return"string"==typeof e?"undefined"!=typeof document?document.querySelector(e):null:"current"in e?e.current:e},PopperBase=function(e,t){var r=e.open,n=e.actions,o=e.style,i=e.id,a=e.className,s=e.children,u=e.computationMiddleware,l=e.anchorElement,c=e.offset,d=void 0===c?8:c,p=e.side,f=void 0===p?"top":p,_=e.keepMounted,m=void 0!==_&&_,h=e.autoPlacement,y=void 0!==h&&h,g=e.alignment,v=void 0===g?"middle":g,b=e.positioningStrategy,O=void 0===b?"absolute":b,P=e.computationMiddlewareOrder,j=void 0===P?"afterAutoPlacement":P,x=__rest(e,["open","actions","style","id","className","children","computationMiddleware","anchorElement","offset","side","keepMounted","autoPlacement","alignment","positioningStrategy","computationMiddlewareOrder"]);if(!l)throw new Error(["[StylelessUI][Popper]: Invalid `anchorElement` property.","The `anchorElement` property must be either a `query selector (string)`, `HTMLElement`, `RefObject<HTMLElement>`, or in shape of `{ getBoundingClientRect(): ClientRect }`"].join("\n"));var M="rtl"===(0,utils_1.useDirection)(),w=(0,utils_1.useDeterministicId)(i,"styleless-ui__popper"),R=React.useRef(null),S=(0,utils_1.useForkedRefs)(t,R),E=React.useState({x:0,y:0}),D=E[0],q=E[1],I=React.useRef("middle"===v?f:"".concat(f,"-").concat(v)).current,T=React.useState(I),B=T[0],A=T[1],k={computationMiddleware:u,computationMiddlewareOrder:j,placement:I,autoPlacement:y,offset:d,strategy:O,isRtl:M},H=function(){var e=getAnchor(l);if(e&&R.current){var t=(0,helpers_1.computePosition)(e,R.current,k);return A(t.placement),q({x:t.x,y:t.y}),!0}return!1};React.useImperativeHandle(n,(function(){return{recompute:function(){H()}}})),(0,utils_1.useIsomorphicLayoutEffect)((function(){var e=getAnchor(l);e&&w&&e instanceof HTMLElement&&e.setAttribute("aria-describedby",w)}));var L={placement:B,openState:r},N="function"==typeof s?s(L):s,C="function"==typeof a?a(L):a,F=(0,utils_1.useRegisterNodeRef)((function(e){S(e),H()}),[]);return m||!m&&r?(0,jsx_runtime_1.jsx)(Portal_1.default,{children:(0,jsx_runtime_1.jsx)("div",__assign({"data-slot":"Portal:Root",role:"presentation",tabIndex:-1,"aria-hidden":!r,style:{position:"absolute",top:0,left:0,right:0}},{children:(0,jsx_runtime_1.jsx)("div",__assign({},x,{tabIndex:-1,"data-slot":Slots.Root,id:w,className:C,ref:F,style:__assign(__assign(__assign({},null!=o?o:{}),translate(D)),{position:O,left:0,top:0}),"data-open":r?"":void 0},{children:N}))}))}):null},Popper=(0,utils_1.componentWithForwardedRef)(PopperBase);exports.default=Popper;