@floating-ui/react-dom
Version:
Floating UI for React DOM
2 lines (1 loc) • 3.04 kB
JavaScript
import{arrow as e,computePosition as t}from"@floating-ui/dom";export{autoPlacement,autoUpdate,computePosition,detectOverflow,flip,getOverflowAncestors,hide,inline,limitShift,offset,platform,shift,size}from"@floating-ui/dom";import*as r from"react";import{useLayoutEffect as n,useEffect as o}from"react";import*as i from"react-dom";const u=t=>({name:"arrow",options:t,fn(r){const{element:n,padding:o}="function"==typeof t?t(r):t;return n&&(i=n,{}.hasOwnProperty.call(i,"current"))?null!=n.current?e({element:n.current,padding:o}).fn(r):{}:n?e({element:n,padding:o}).fn(r):{};var i}});var f="undefined"!=typeof document?n:o;function s(e,t){if(e===t)return!0;if(typeof e!=typeof t)return!1;if("function"==typeof e&&e.toString()===t.toString())return!0;let r,n,o;if(e&&t&&"object"==typeof e){if(Array.isArray(e)){if(r=e.length,r!=t.length)return!1;for(n=r;0!=n--;)if(!s(e[n],t[n]))return!1;return!0}if(o=Object.keys(e),r=o.length,r!==Object.keys(t).length)return!1;for(n=r;0!=n--;)if(!{}.hasOwnProperty.call(t,o[n]))return!1;for(n=r;0!=n--;){const r=o[n];if(("_owner"!==r||!e.$$typeof)&&!s(e[r],t[r]))return!1}return!0}return e!=e&&t!=t}function a(e){if("undefined"==typeof window)return 1;return(e.ownerDocument.defaultView||window).devicePixelRatio||1}function c(e,t){const r=a(e);return Math.round(t*r)/r}function l(e){const t=r.useRef(e);return f((()=>{t.current=e})),t}function m(e){void 0===e&&(e={});const{placement:n="bottom",strategy:o="absolute",middleware:u=[],platform:m,elements:{reference:p,floating:d}={},transform:g=!0,whileElementsMounted:y,open:w}=e,[h,P]=r.useState({x:0,y:0,strategy:o,placement:n,middlewareData:{},isPositioned:!1}),[S,b]=r.useState(u);s(S,u)||b(u);const[x,R]=r.useState(null),[v,M]=r.useState(null),O=r.useCallback((e=>{e!=A.current&&(A.current=e,R(e))}),[R]),k=r.useCallback((e=>{e!==D.current&&(D.current=e,M(e))}),[M]),C=p||x,j=d||v,A=r.useRef(null),D=r.useRef(null),$=r.useRef(h),z=l(y),E=l(m),F=r.useCallback((()=>{if(!A.current||!D.current)return;const e={placement:n,strategy:o,middleware:S};E.current&&(e.platform=E.current),t(A.current,D.current,e).then((e=>{const t={...e,isPositioned:!0};U.current&&!s($.current,t)&&($.current=t,i.flushSync((()=>{P(t)})))}))}),[S,n,o,E]);f((()=>{!1===w&&$.current.isPositioned&&($.current.isPositioned=!1,P((e=>({...e,isPositioned:!1}))))}),[w]);const U=r.useRef(!1);f((()=>(U.current=!0,()=>{U.current=!1})),[]),f((()=>{if(C&&(A.current=C),j&&(D.current=j),C&&j){if(z.current)return z.current(C,j,F);F()}}),[C,j,F,z]);const V=r.useMemo((()=>({reference:A,floating:D,setReference:O,setFloating:k})),[O,k]),_=r.useMemo((()=>({reference:C,floating:j})),[C,j]),q=r.useMemo((()=>{const e={position:o,left:0,top:0};if(!_.floating)return e;const t=c(_.floating,h.x),r=c(_.floating,h.y);return g?{...e,transform:"translate("+t+"px, "+r+"px)",...a(_.floating)>=1.5&&{willChange:"transform"}}:{position:o,left:t,top:r}}),[o,g,_.floating,h.x,h.y]);return r.useMemo((()=>({...h,update:F,refs:V,elements:_,floatingStyles:q})),[h,F,V,_,q])}export{u as arrow,m as useFloating};