@floating-ui/react-dom - npm Package Compare versions

Comparing version 1.3.0 to 2.0.0

dist/floating-ui.react-dom.esm.js

@@ -8,5 +8,4 @@ import { arrow as arrow$1, computePosition } from '@floating-ui/dom';
 /**
- * A data provider that provides data to position an inner element of the
- * floating element (usually a triangle or caret) so that it is centered to the
- * reference element.
+ * Provides data to position an inner element of the floating element so that it
+ * appears centered to the reference element.
  * This wraps the core `arrow` middleware to allow React refs as the element.
@@ -21,3 +20,3 @@ * @see https://floating-ui.com/docs/arrow
   function isRef(value) {
-    return Object.prototype.hasOwnProperty.call(value, 'current');
+    return {}.hasOwnProperty.call(value, 'current');
   }
@@ -28,3 +27,3 @@ return {
     fn(args) {
-      if (isRef(element)) {
+      if (element && isRef(element)) {
         if (element.current != null) {
@@ -80,3 +79,3 @@ return arrow$1({
     for (i = length; i-- !== 0;) {
-      if (!Object.prototype.hasOwnProperty.call(b, keys[i])) {
+      if (!{}.hasOwnProperty.call(b, keys[i])) {
         return false;
@@ -99,2 +98,15 @@ }
 
+function getDPR(element) {
+  if (typeof window === 'undefined') {
+    return 1;
+  }
+  const win = element.ownerDocument.defaultView || window;
+  return win.devicePixelRatio || 1;
+}
+
+function roundByDPR(element, value) {
+  const dpr = getDPR(element);
+  return Math.round(value * dpr) / dpr;
+}
+
 function useLatestRef(value) {
@@ -121,2 +133,7 @@ const ref = React.useRef(value);
     platform,
+    elements: {
+      reference: externalReference,
+      floating: externalFloating
+    } = {},
+    transform = true,
     whileElementsMounted,
@@ -126,4 +143,4 @@ open
   const [data, setData] = React.useState({
-    x: null,
-    y: null,
+    x: 0,
+    y: 0,
     strategy,
@@ -138,21 +155,23 @@ placement,
   }
-  const referenceRef = React.useRef(null);
-  const floatingRef = React.useRef(null);
-  const dataRef = React.useRef(data);
-  const whileElementsMountedRef = useLatestRef(whileElementsMounted);
-  const platformRef = useLatestRef(platform);
-  const [reference, _setReference] = React.useState(null);
-  const [floating, _setFloating] = React.useState(null);
+  const [_reference, _setReference] = React.useState(null);
+  const [_floating, _setFloating] = React.useState(null);
   const setReference = React.useCallback(node => {
-    if (referenceRef.current !== node) {
+    if (node != referenceRef.current) {
       referenceRef.current = node;
       _setReference(node);
     }
-  }, []);
+  }, [_setReference]);
   const setFloating = React.useCallback(node => {
-    if (floatingRef.current !== node) {
+    if (node !== floatingRef.current) {
       floatingRef.current = node;
       _setFloating(node);
     }
-  }, []);
+  }, [_setFloating]);
+  const referenceEl = externalReference || _reference;
+  const floatingEl = externalFloating || _floating;
+  const referenceRef = React.useRef(null);
+  const floatingRef = React.useRef(null);
+  const dataRef = React.useRef(data);
+  const whileElementsMountedRef = useLatestRef(whileElementsMounted);
+  const platformRef = useLatestRef(platform);
   const update = React.useCallback(() => {
@@ -200,5 +219,7 @@ if (!referenceRef.current || !floatingRef.current) {
   index(() => {
-    if (reference && floating) {
+    if (referenceEl) referenceRef.current = referenceEl;
+    if (floatingEl) floatingRef.current = floatingEl;
+    if (referenceEl && floatingEl) {
       if (whileElementsMountedRef.current) {
-        return whileElementsMountedRef.current(reference, floating, update);
+        return whileElementsMountedRef.current(referenceEl, floatingEl, update);
       } else {
@@ -208,3 +229,3 @@ update();
     }
-  }, [reference, floating, update, whileElementsMountedRef]);
+  }, [referenceEl, floatingEl, update, whileElementsMountedRef]);
   const refs = React.useMemo(() => ({
@@ -217,5 +238,31 @@ reference: referenceRef,
   const elements = React.useMemo(() => ({
-    reference,
-    floating
-  }), [reference, floating]);
+    reference: referenceEl,
+    floating: floatingEl
+  }), [referenceEl, floatingEl]);
+  const floatingStyles = React.useMemo(() => {
+    const initialStyles = {
+      position: strategy,
+      left: 0,
+      top: 0
+    };
+    if (!elements.floating) {
+      return initialStyles;
+    }
+    const x = roundByDPR(elements.floating, data.x);
+    const y = roundByDPR(elements.floating, data.y);
+    if (transform) {
+      return {
+        ...initialStyles,
+        transform: "translate(" + x + "px, " + y + "px)",
+        ...(getDPR(elements.floating) >= 1.5 && {
+          willChange: 'transform'
+        })
+      };
+    }
+    return {
+      position: strategy,
+      left: x,
+      top: y
+    };
+  }, [strategy, transform, elements.floating, data.x, data.y]);
   return React.useMemo(() => ({
@@ -226,7 +273,6 @@ ...data,
     elements,
-    reference: setReference,
-    floating: setFloating
-  }), [data, update, refs, elements, setReference, setFloating]);
+    floatingStyles
+  }), [data, update, refs, elements, floatingStyles]);
 }
 
 export { arrow, useFloating };

dist/floating-ui.react-dom.esm.min.js

@@ -1,1 +0,1 @@
-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 u from"react-dom";const i=t=>{const{element:r,padding:n}=t;return{name:"arrow",options:t,fn(t){return o=r,Object.prototype.hasOwnProperty.call(o,"current")?null!=r.current?e({element:r.current,padding:n}).fn(t):{}:r?e({element:r,padding:n}).fn(t):{};var o}}};var c="undefined"!=typeof document?n:o;function f(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(!f(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(!Object.prototype.hasOwnProperty.call(t,o[n]))return!1;for(n=r;0!=n--;){const r=o[n];if(("_owner"!==r||!e.$$typeof)&&!f(e[r],t[r]))return!1}return!0}return e!=e&&t!=t}function s(e){const t=r.useRef(e);return c((()=>{t.current=e})),t}function l(e){void 0===e&&(e={});const{placement:n="bottom",strategy:o="absolute",middleware:i=[],platform:l,whileElementsMounted:a,open:m}=e,[p,d]=r.useState({x:null,y:null,strategy:o,placement:n,middlewareData:{},isPositioned:!1}),[g,y]=r.useState(i);f(g,i)||y(i);const h=r.useRef(null),w=r.useRef(null),b=r.useRef(p),P=s(a),O=s(l),[S,R]=r.useState(null),[j,k]=r.useState(null),v=r.useCallback((e=>{h.current!==e&&(h.current=e,R(e))}),[]),M=r.useCallback((e=>{w.current!==e&&(w.current=e,k(e))}),[]),x=r.useCallback((()=>{if(!h.current||!w.current)return;const e={placement:n,strategy:o,middleware:g};O.current&&(e.platform=O.current),t(h.current,w.current,e).then((e=>{const t={...e,isPositioned:!0};A.current&&!f(b.current,t)&&(b.current=t,u.flushSync((()=>{d(t)})))}))}),[g,n,o,O]);c((()=>{!1===m&&b.current.isPositioned&&(b.current.isPositioned=!1,d((e=>({...e,isPositioned:!1}))))}),[m]);const A=r.useRef(!1);c((()=>(A.current=!0,()=>{A.current=!1})),[]),c((()=>{if(S&&j){if(P.current)return P.current(S,j,x);x()}}),[S,j,x,P]);const C=r.useMemo((()=>({reference:h,floating:w,setReference:v,setFloating:M})),[v,M]),$=r.useMemo((()=>({reference:S,floating:j})),[S,j]);return r.useMemo((()=>({...p,update:x,refs:C,elements:$,reference:v,floating:M})),[p,x,C,$,v,M])}export{i as arrow,l as useFloating};
+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=>{const{element:r,padding:n}=t;return{name:"arrow",options:t,fn(t){return r&&(o=r,{}.hasOwnProperty.call(o,"current"))?null!=r.current?e({element:r.current,padding:n}).fn(t):{}:r?e({element:r,padding:n}).fn(t):{};var o}}};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:d,floating:p}={},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=d||x,j=p||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};

dist/floating-ui.react-dom.umd.js

@@ -29,5 +29,4 @@ (function (global, factory) {
   /**
-   * A data provider that provides data to position an inner element of the
-   * floating element (usually a triangle or caret) so that it is centered to the
-   * reference element.
+   * Provides data to position an inner element of the floating element so that it
+   * appears centered to the reference element.
    * This wraps the core `arrow` middleware to allow React refs as the element.
@@ -42,3 +41,3 @@ * @see https://floating-ui.com/docs/arrow
     function isRef(value) {
-      return Object.prototype.hasOwnProperty.call(value, 'current');
+      return {}.hasOwnProperty.call(value, 'current');
     }
@@ -49,3 +48,3 @@ return {
       fn(args) {
-        if (isRef(element)) {
+        if (element && isRef(element)) {
           if (element.current != null) {
@@ -101,3 +100,3 @@ return dom.arrow({
       for (i = length; i-- !== 0;) {
-        if (!Object.prototype.hasOwnProperty.call(b, keys[i])) {
+        if (!{}.hasOwnProperty.call(b, keys[i])) {
           return false;
@@ -120,2 +119,15 @@ }
 
+  function getDPR(element) {
+    if (typeof window === 'undefined') {
+      return 1;
+    }
+    const win = element.ownerDocument.defaultView || window;
+    return win.devicePixelRatio || 1;
+  }
+
+  function roundByDPR(element, value) {
+    const dpr = getDPR(element);
+    return Math.round(value * dpr) / dpr;
+  }
+
   function useLatestRef(value) {
@@ -142,2 +154,7 @@ const ref = React__namespace.useRef(value);
       platform,
+      elements: {
+        reference: externalReference,
+        floating: externalFloating
+      } = {},
+      transform = true,
       whileElementsMounted,
@@ -147,4 +164,4 @@ open
     const [data, setData] = React__namespace.useState({
-      x: null,
-      y: null,
+      x: 0,
+      y: 0,
       strategy,
@@ -159,21 +176,23 @@ placement,
     }
-    const referenceRef = React__namespace.useRef(null);
-    const floatingRef = React__namespace.useRef(null);
-    const dataRef = React__namespace.useRef(data);
-    const whileElementsMountedRef = useLatestRef(whileElementsMounted);
-    const platformRef = useLatestRef(platform);
-    const [reference, _setReference] = React__namespace.useState(null);
-    const [floating, _setFloating] = React__namespace.useState(null);
+    const [_reference, _setReference] = React__namespace.useState(null);
+    const [_floating, _setFloating] = React__namespace.useState(null);
     const setReference = React__namespace.useCallback(node => {
-      if (referenceRef.current !== node) {
+      if (node != referenceRef.current) {
         referenceRef.current = node;
         _setReference(node);
       }
-    }, []);
+    }, [_setReference]);
     const setFloating = React__namespace.useCallback(node => {
-      if (floatingRef.current !== node) {
+      if (node !== floatingRef.current) {
         floatingRef.current = node;
         _setFloating(node);
       }
-    }, []);
+    }, [_setFloating]);
+    const referenceEl = externalReference || _reference;
+    const floatingEl = externalFloating || _floating;
+    const referenceRef = React__namespace.useRef(null);
+    const floatingRef = React__namespace.useRef(null);
+    const dataRef = React__namespace.useRef(data);
+    const whileElementsMountedRef = useLatestRef(whileElementsMounted);
+    const platformRef = useLatestRef(platform);
     const update = React__namespace.useCallback(() => {
@@ -221,5 +240,7 @@ if (!referenceRef.current || !floatingRef.current) {
     index(() => {
-      if (reference && floating) {
+      if (referenceEl) referenceRef.current = referenceEl;
+      if (floatingEl) floatingRef.current = floatingEl;
+      if (referenceEl && floatingEl) {
         if (whileElementsMountedRef.current) {
-          return whileElementsMountedRef.current(reference, floating, update);
+          return whileElementsMountedRef.current(referenceEl, floatingEl, update);
         } else {
@@ -229,3 +250,3 @@ update();
       }
-    }, [reference, floating, update, whileElementsMountedRef]);
+    }, [referenceEl, floatingEl, update, whileElementsMountedRef]);
     const refs = React__namespace.useMemo(() => ({
@@ -238,5 +259,31 @@ reference: referenceRef,
     const elements = React__namespace.useMemo(() => ({
-      reference,
-      floating
-    }), [reference, floating]);
+      reference: referenceEl,
+      floating: floatingEl
+    }), [referenceEl, floatingEl]);
+    const floatingStyles = React__namespace.useMemo(() => {
+      const initialStyles = {
+        position: strategy,
+        left: 0,
+        top: 0
+      };
+      if (!elements.floating) {
+        return initialStyles;
+      }
+      const x = roundByDPR(elements.floating, data.x);
+      const y = roundByDPR(elements.floating, data.y);
+      if (transform) {
+        return {
+          ...initialStyles,
+          transform: "translate(" + x + "px, " + y + "px)",
+          ...(getDPR(elements.floating) >= 1.5 && {
+            willChange: 'transform'
+          })
+        };
+      }
+      return {
+        position: strategy,
+        left: x,
+        top: y
+      };
+    }, [strategy, transform, elements.floating, data.x, data.y]);
     return React__namespace.useMemo(() => ({
@@ -247,5 +294,4 @@ ...data,
       elements,
-      reference: setReference,
-      floating: setFloating
-    }), [data, update, refs, elements, setReference, setFloating]);
+      floatingStyles
+    }), [data, update, refs, elements, floatingStyles]);
   }
@@ -252,0 +298,0 @@

dist/floating-ui.react-dom.umd.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@floating-ui/dom"),require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","@floating-ui/dom","react","react-dom"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).FloatingUIReactDOM={},e.FloatingUIDOM,e.React,e.ReactDOM)}(this,(function(e,t,r,n){"use strict";function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var u=o(r),i=o(n);var f="undefined"!=typeof document?r.useLayoutEffect:r.useEffect;function c(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(!c(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(!Object.prototype.hasOwnProperty.call(t,o[n]))return!1;for(n=r;0!=n--;){const r=o[n];if(("_owner"!==r||!e.$$typeof)&&!c(e[r],t[r]))return!1}return!0}return e!=e&&t!=t}function l(e){const t=u.useRef(e);return f((()=>{t.current=e})),t}Object.defineProperty(e,"autoPlacement",{enumerable:!0,get:function(){return t.autoPlacement}}),Object.defineProperty(e,"autoUpdate",{enumerable:!0,get:function(){return t.autoUpdate}}),Object.defineProperty(e,"computePosition",{enumerable:!0,get:function(){return t.computePosition}}),Object.defineProperty(e,"detectOverflow",{enumerable:!0,get:function(){return t.detectOverflow}}),Object.defineProperty(e,"flip",{enumerable:!0,get:function(){return t.flip}}),Object.defineProperty(e,"getOverflowAncestors",{enumerable:!0,get:function(){return t.getOverflowAncestors}}),Object.defineProperty(e,"hide",{enumerable:!0,get:function(){return t.hide}}),Object.defineProperty(e,"inline",{enumerable:!0,get:function(){return t.inline}}),Object.defineProperty(e,"limitShift",{enumerable:!0,get:function(){return t.limitShift}}),Object.defineProperty(e,"offset",{enumerable:!0,get:function(){return t.offset}}),Object.defineProperty(e,"platform",{enumerable:!0,get:function(){return t.platform}}),Object.defineProperty(e,"shift",{enumerable:!0,get:function(){return t.shift}}),Object.defineProperty(e,"size",{enumerable:!0,get:function(){return t.size}}),e.arrow=e=>{const{element:r,padding:n}=e;return{name:"arrow",options:e,fn(e){return o=r,Object.prototype.hasOwnProperty.call(o,"current")?null!=r.current?t.arrow({element:r.current,padding:n}).fn(e):{}:r?t.arrow({element:r,padding:n}).fn(e):{};var o}}},e.useFloating=function(e){void 0===e&&(e={});const{placement:r="bottom",strategy:n="absolute",middleware:o=[],platform:a,whileElementsMounted:s,open:d}=e,[p,m]=u.useState({x:null,y:null,strategy:n,placement:r,middlewareData:{},isPositioned:!1}),[b,g]=u.useState(o);c(b,o)||g(o);const y=u.useRef(null),O=u.useRef(null),P=u.useRef(p),j=l(s),h=l(a),[w,v]=u.useState(null),[M,R]=u.useState(null),S=u.useCallback((e=>{y.current!==e&&(y.current=e,v(e))}),[]),k=u.useCallback((e=>{O.current!==e&&(O.current=e,R(e))}),[]),D=u.useCallback((()=>{if(!y.current||!O.current)return;const e={placement:r,strategy:n,middleware:b};h.current&&(e.platform=h.current),t.computePosition(y.current,O.current,e).then((e=>{const t={...e,isPositioned:!0};_.current&&!c(P.current,t)&&(P.current=t,i.flushSync((()=>{m(t)})))}))}),[b,r,n,h]);f((()=>{!1===d&&P.current.isPositioned&&(P.current.isPositioned=!1,m((e=>({...e,isPositioned:!1}))))}),[d]);const _=u.useRef(!1);f((()=>(_.current=!0,()=>{_.current=!1})),[]),f((()=>{if(w&&M){if(j.current)return j.current(w,M,D);D()}}),[w,M,D,j]);const x=u.useMemo((()=>({reference:y,floating:O,setReference:S,setFloating:k})),[S,k]),A=u.useMemo((()=>({reference:w,floating:M})),[w,M]);return u.useMemo((()=>({...p,update:D,refs:x,elements:A,reference:S,floating:k})),[p,D,x,A,S,k])},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@floating-ui/dom"),require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","@floating-ui/dom","react","react-dom"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).FloatingUIReactDOM={},e.FloatingUIDOM,e.React,e.ReactDOM)}(this,(function(e,t,r,n){"use strict";function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var u=o(r),i=o(n);var f="undefined"!=typeof document?r.useLayoutEffect:r.useEffect;function c(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(!c(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)&&!c(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 l(e,t){const r=a(e);return Math.round(t*r)/r}function s(e){const t=u.useRef(e);return f((()=>{t.current=e})),t}Object.defineProperty(e,"autoPlacement",{enumerable:!0,get:function(){return t.autoPlacement}}),Object.defineProperty(e,"autoUpdate",{enumerable:!0,get:function(){return t.autoUpdate}}),Object.defineProperty(e,"computePosition",{enumerable:!0,get:function(){return t.computePosition}}),Object.defineProperty(e,"detectOverflow",{enumerable:!0,get:function(){return t.detectOverflow}}),Object.defineProperty(e,"flip",{enumerable:!0,get:function(){return t.flip}}),Object.defineProperty(e,"getOverflowAncestors",{enumerable:!0,get:function(){return t.getOverflowAncestors}}),Object.defineProperty(e,"hide",{enumerable:!0,get:function(){return t.hide}}),Object.defineProperty(e,"inline",{enumerable:!0,get:function(){return t.inline}}),Object.defineProperty(e,"limitShift",{enumerable:!0,get:function(){return t.limitShift}}),Object.defineProperty(e,"offset",{enumerable:!0,get:function(){return t.offset}}),Object.defineProperty(e,"platform",{enumerable:!0,get:function(){return t.platform}}),Object.defineProperty(e,"shift",{enumerable:!0,get:function(){return t.shift}}),Object.defineProperty(e,"size",{enumerable:!0,get:function(){return t.size}}),e.arrow=e=>{const{element:r,padding:n}=e;return{name:"arrow",options:e,fn(e){return r&&(o=r,{}.hasOwnProperty.call(o,"current"))?null!=r.current?t.arrow({element:r.current,padding:n}).fn(e):{}:r?t.arrow({element:r,padding:n}).fn(e):{};var o}}},e.useFloating=function(e){void 0===e&&(e={});const{placement:r="bottom",strategy:n="absolute",middleware:o=[],platform:d,elements:{reference:p,floating:m}={},transform:g=!0,whileElementsMounted:b,open:y}=e,[O,P]=u.useState({x:0,y:0,strategy:n,placement:r,middlewareData:{},isPositioned:!1}),[j,w]=u.useState(o);c(j,o)||w(o);const[h,v]=u.useState(null),[M,R]=u.useState(null),S=u.useCallback((e=>{e!=_.current&&(_.current=e,v(e))}),[v]),x=u.useCallback((e=>{e!==A.current&&(A.current=e,R(e))}),[R]),k=p||h,D=m||M,_=u.useRef(null),A=u.useRef(null),C=u.useRef(O),E=s(b),F=s(d),U=u.useCallback((()=>{if(!_.current||!A.current)return;const e={placement:r,strategy:n,middleware:j};F.current&&(e.platform=F.current),t.computePosition(_.current,A.current,e).then((e=>{const t={...e,isPositioned:!0};q.current&&!c(C.current,t)&&(C.current=t,i.flushSync((()=>{P(t)})))}))}),[j,r,n,F]);f((()=>{!1===y&&C.current.isPositioned&&(C.current.isPositioned=!1,P((e=>({...e,isPositioned:!1}))))}),[y]);const q=u.useRef(!1);f((()=>(q.current=!0,()=>{q.current=!1})),[]),f((()=>{if(k&&(_.current=k),D&&(A.current=D),k&&D){if(E.current)return E.current(k,D,U);U()}}),[k,D,U,E]);const z=u.useMemo((()=>({reference:_,floating:A,setReference:S,setFloating:x})),[S,x]),I=u.useMemo((()=>({reference:k,floating:D})),[k,D]),T=u.useMemo((()=>{const e={position:n,left:0,top:0};if(!I.floating)return e;const t=l(I.floating,O.x),r=l(I.floating,O.y);return g?{...e,transform:"translate("+t+"px, "+r+"px)",...a(I.floating)>=1.5&&{willChange:"transform"}}:{position:n,left:t,top:r}}),[n,g,I.floating,O.x,O.y]);return u.useMemo((()=>({...O,update:U,refs:z,elements:I,floatingStyles:T})),[O,U,z,I,T])},Object.defineProperty(e,"__esModule",{value:!0})}));

package.json

 {
   "name": "@floating-ui/react-dom",
-  "version": "1.3.0",
+  "version": "2.0.0",
   "@rollingversions": {
@@ -62,3 +62,3 @@ "baseVersion": [
   "dependencies": {
-    "@floating-ui/dom": "^1.2.1"
+    "@floating-ui/dom": "^1.2.7"
   },
@@ -69,3 +69,3 @@ "devDependencies": {
     "@testing-library/react": "^13.2.0",
-    "@types/react": "^18.0.1",
+    "@types/react": "^18.0.28",
     "react": "^18.0.0",
@@ -72,0 +72,0 @@ "react-dom": "^18.0.0",

src/arrow.d.ts

 import type { Middleware, SideObject } from '@floating-ui/core';
 import * as React from 'react';
 export interface Options {
-    element: React.MutableRefObject<Element | null> | Element;
+    element: React.MutableRefObject<Element | null> | Element | null;
     padding?: number | SideObject;
 }
 /**
- * A data provider that provides data to position an inner element of the
- * floating element (usually a triangle or caret) so that it is centered to the
- * reference element.
+ * Provides data to position an inner element of the floating element so that it
+ * appears centered to the reference element.
  * This wraps the core `arrow` middleware to allow React refs as the element.
@@ -12,0 +11,0 @@ * @see https://floating-ui.com/docs/arrow

src/types.d.ts

@@ -10,5 +10,3 @@ import type { ComputePositionConfig, ComputePositionReturn, VirtualElement } from '@floating-ui/dom';
 } & {};
-export type UseFloatingData = Prettify<Omit<ComputePositionReturn, 'x' | 'y'> & {
-    x: number | null;
-    y: number | null;
+export type UseFloatingData = Prettify<ComputePositionReturn & {
     isPositioned: boolean;
@@ -23,10 +21,3 @@ }>;
     update: () => void;
-    /**
-     * @deprecated use `refs.setReference` instead.
-     */
-    reference: (node: RT | null) => void;
-    /**
-     * @deprecated use `refs.setFloating` instead.
-     */
-    floating: (node: HTMLElement | null) => void;
+    floatingStyles: React.CSSProperties;
     refs: {
@@ -43,5 +34,10 @@ reference: React.MutableRefObject<RT | null>;
 }>;
-export type UseFloatingProps<RT extends ReferenceType = ReferenceType> = Prettify<Partial<ComputePositionConfig> & {
-    whileElementsMounted?: (reference: RT, floating: HTMLElement, update: () => void) => void | (() => void);
+export type UseFloatingOptions<RT extends ReferenceType = ReferenceType> = Prettify<Partial<ComputePositionConfig> & {
+    whileElementsMounted?: (reference: RT, floating: HTMLElement, update: () => void) => () => void;
+    elements?: {
+        reference?: RT | null;
+        floating?: HTMLElement | null;
+    };
     open?: boolean;
+    transform?: boolean;
 }>;

src/useFloating.d.ts

@@ -1,2 +0,2 @@
-import type { ReferenceType, UseFloatingProps, UseFloatingReturn } from './types';
+import type { ReferenceType, UseFloatingOptions, UseFloatingReturn } from './types';
 /**
@@ -6,2 +6,2 @@ * Provides data to position a floating element.
  */
-export declare function useFloating<RT extends ReferenceType = ReferenceType>(options?: UseFloatingProps): UseFloatingReturn<RT>;
+export declare function useFloating<RT extends ReferenceType = ReferenceType>(options?: UseFloatingOptions): UseFloatingReturn<RT>;

Fixed alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38603

14.37%

Number of package files

17

13.33%

Lines of code

948

16.32%

Number of low quality alerts

1

-50%

Dependency changes

• Updated

  @floating-ui/dom@^1.2.7