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

Comparing version 1.3.0 to 2.0.0

src/utils/getDPR.d.ts

+export declare function getDPR(element: Element): number;

src/utils/roundByDPR.d.ts

+export declare function roundByDPR(element: Element, value: number): number;

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.mjs

@@ -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.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>;

No alert changes

Improved metrics

Total package byte prevSize

38603

14.37%

Number of package files

17

13.33%

Lines of code

948

16.32%

Dependency changes

• Updated

  @floating-ui/dom@^1.2.7