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

Comparing version 1.1.2 to 1.2.0

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

@@ -102,10 +102,13 @@ import { arrow as arrow$1, computePosition } from '@floating-ui/dom';
 
-function useFloating(_temp) {
-  let {
-    middleware = [],
+function useFloating(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  const {
     placement = 'bottom',
     strategy = 'absolute',
+    middleware = [],
     whileElementsMounted,
     open
-  } = _temp === void 0 ? {} : _temp;
+  } = options;
   const [data, setData] = React.useState({
@@ -123,12 +126,25 @@ x: null,
   }
-  const reference = React.useRef(null);
-  const floating = React.useRef(null);
-  const cleanupRef = React.useRef(null);
+  const referenceRef = React.useRef(null);
+  const floatingRef = React.useRef(null);
   const dataRef = React.useRef(data);
   const whileElementsMountedRef = useLatestRef(whileElementsMounted);
+  const [reference, _setReference] = React.useState(null);
+  const [floating, _setFloating] = React.useState(null);
+  const setReference = React.useCallback(node => {
+    if (referenceRef.current !== node) {
+      referenceRef.current = node;
+      _setReference(node);
+    }
+  }, []);
+  const setFloating = React.useCallback(node => {
+    if (floatingRef.current !== node) {
+      floatingRef.current = node;
+      _setFloating(node);
+    }
+  }, []);
   const update = React.useCallback(() => {
-    if (!reference.current || !floating.current) {
+    if (!referenceRef.current || !floatingRef.current) {
       return;
     }
-    computePosition(reference.current, floating.current, {
+    computePosition(referenceRef.current, floatingRef.current, {
       middleware: latestMiddleware,
@@ -138,10 +154,10 @@ placement,
     }).then(data => {
-      const value = {
+      const fullData = {
         ...data,
         isPositioned: true
       };
-      if (isMountedRef.current && !deepEqual(dataRef.current, value)) {
-        dataRef.current = value;
+      if (isMountedRef.current && !deepEqual(dataRef.current, fullData)) {
+        dataRef.current = fullData;
         ReactDOM.flushSync(() => {
-          setData(value);
+          setData(fullData);
         });
@@ -167,11 +183,6 @@ }
   }, []);
-  const runElementMountCallback = React.useCallback(() => {
-    if (typeof cleanupRef.current === 'function') {
-      cleanupRef.current();
-      cleanupRef.current = null;
-    }
-    if (reference.current && floating.current) {
+  index(() => {
+    if (reference && floating) {
       if (whileElementsMountedRef.current) {
-        const cleanupFn = whileElementsMountedRef.current(reference.current, floating.current, update);
-        cleanupRef.current = cleanupFn;
+        return whileElementsMountedRef.current(reference, floating, update);
       } else {
@@ -181,19 +192,13 @@ update();
     }
-  }, [update, whileElementsMountedRef]);
-  const setReference = React.useCallback(node => {
-    if (reference.current !== node) {
-      reference.current = node;
-      runElementMountCallback();
-    }
-  }, [runElementMountCallback]);
-  const setFloating = React.useCallback(node => {
-    if (floating.current !== node) {
-      floating.current = node;
-      runElementMountCallback();
-    }
-  }, [runElementMountCallback]);
+  }, [reference, floating, update, whileElementsMountedRef]);
   const refs = React.useMemo(() => ({
+    reference: referenceRef,
+    floating: floatingRef,
+    setReference,
+    setFloating
+  }), [setReference, setFloating]);
+  const elements = React.useMemo(() => ({
     reference,
     floating
-  }), []);
+  }), [reference, floating]);
   return React.useMemo(() => ({
@@ -203,7 +208,8 @@ ...data,
     refs,
+    elements,
     reference: setReference,
     floating: setFloating
-  }), [data, update, refs, setReference, setFloating]);
+  }), [data, update, refs, elements, setReference, setFloating]);
 }
 
 export { arrow, useFloating };

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

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

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

@@ -123,10 +123,13 @@ (function (global, factory) {
 
-  function useFloating(_temp) {
-    let {
-      middleware = [],
+  function useFloating(options) {
+    if (options === void 0) {
+      options = {};
+    }
+    const {
       placement = 'bottom',
       strategy = 'absolute',
+      middleware = [],
       whileElementsMounted,
       open
-    } = _temp === void 0 ? {} : _temp;
+    } = options;
     const [data, setData] = React__namespace.useState({
@@ -144,12 +147,25 @@ x: null,
     }
-    const reference = React__namespace.useRef(null);
-    const floating = React__namespace.useRef(null);
-    const cleanupRef = React__namespace.useRef(null);
+    const referenceRef = React__namespace.useRef(null);
+    const floatingRef = React__namespace.useRef(null);
     const dataRef = React__namespace.useRef(data);
     const whileElementsMountedRef = useLatestRef(whileElementsMounted);
+    const [reference, _setReference] = React__namespace.useState(null);
+    const [floating, _setFloating] = React__namespace.useState(null);
+    const setReference = React__namespace.useCallback(node => {
+      if (referenceRef.current !== node) {
+        referenceRef.current = node;
+        _setReference(node);
+      }
+    }, []);
+    const setFloating = React__namespace.useCallback(node => {
+      if (floatingRef.current !== node) {
+        floatingRef.current = node;
+        _setFloating(node);
+      }
+    }, []);
     const update = React__namespace.useCallback(() => {
-      if (!reference.current || !floating.current) {
+      if (!referenceRef.current || !floatingRef.current) {
         return;
       }
-      dom.computePosition(reference.current, floating.current, {
+      dom.computePosition(referenceRef.current, floatingRef.current, {
         middleware: latestMiddleware,
@@ -159,10 +175,10 @@ placement,
       }).then(data => {
-        const value = {
+        const fullData = {
           ...data,
           isPositioned: true
         };
-        if (isMountedRef.current && !deepEqual(dataRef.current, value)) {
-          dataRef.current = value;
+        if (isMountedRef.current && !deepEqual(dataRef.current, fullData)) {
+          dataRef.current = fullData;
           ReactDOM__namespace.flushSync(() => {
-            setData(value);
+            setData(fullData);
           });
@@ -188,11 +204,6 @@ }
     }, []);
-    const runElementMountCallback = React__namespace.useCallback(() => {
-      if (typeof cleanupRef.current === 'function') {
-        cleanupRef.current();
-        cleanupRef.current = null;
-      }
-      if (reference.current && floating.current) {
+    index(() => {
+      if (reference && floating) {
         if (whileElementsMountedRef.current) {
-          const cleanupFn = whileElementsMountedRef.current(reference.current, floating.current, update);
-          cleanupRef.current = cleanupFn;
+          return whileElementsMountedRef.current(reference, floating, update);
         } else {
@@ -202,19 +213,13 @@ update();
       }
-    }, [update, whileElementsMountedRef]);
-    const setReference = React__namespace.useCallback(node => {
-      if (reference.current !== node) {
-        reference.current = node;
-        runElementMountCallback();
-      }
-    }, [runElementMountCallback]);
-    const setFloating = React__namespace.useCallback(node => {
-      if (floating.current !== node) {
-        floating.current = node;
-        runElementMountCallback();
-      }
-    }, [runElementMountCallback]);
+    }, [reference, floating, update, whileElementsMountedRef]);
     const refs = React__namespace.useMemo(() => ({
+      reference: referenceRef,
+      floating: floatingRef,
+      setReference,
+      setFloating
+    }), [setReference, setFloating]);
+    const elements = React__namespace.useMemo(() => ({
       reference,
       floating
-    }), []);
+    }), [reference, floating]);
     return React__namespace.useMemo(() => ({
@@ -224,5 +229,6 @@ ...data,
       refs,
+      elements,
       reference: setReference,
       floating: setFloating
-    }), [data, update, refs, setReference, setFloating]);
+    }), [data, update, refs, elements, setReference, setFloating]);
   }
@@ -229,0 +235,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 u(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 o=u(r),c=u(n);var i="undefined"!=typeof document?r.useLayoutEffect:r.useEffect;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,u;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(u=Object.keys(e),r=u.length,r!==Object.keys(t).length)return!1;for(n=r;0!=n--;)if(!Object.prototype.hasOwnProperty.call(t,u[n]))return!1;for(n=r;0!=n--;){const r=u[n];if(("_owner"!==r||!e.$$typeof)&&!f(e[r],t[r]))return!1}return!0}return e!=e&&t!=t}e.arrow=e=>{const{element:r,padding:n}=e;return{name:"arrow",options:e,fn(e){return u=r,Object.prototype.hasOwnProperty.call(u,"current")?null!=r.current?t.arrow({element:r.current,padding:n}).fn(e):{}:r?t.arrow({element:r,padding:n}).fn(e):{};var u}}},e.useFloating=function(e){let{middleware:r=[],placement:n="bottom",strategy:u="absolute",whileElementsMounted:a,open:l}=void 0===e?{}:e;const[s,d]=o.useState({x:null,y:null,strategy:u,placement:n,middlewareData:{},isPositioned:!1}),[p,y]=o.useState(r);f(p,r)||y(r);const g=o.useRef(null),b=o.useRef(null),m=o.useRef(null),O=o.useRef(s),h=function(e){const t=o.useRef(e);return i((()=>{t.current=e})),t}(a),j=o.useCallback((()=>{g.current&&b.current&&t.computePosition(g.current,b.current,{middleware:p,placement:n,strategy:u}).then((e=>{const t={...e,isPositioned:!0};w.current&&!f(O.current,t)&&(O.current=t,c.flushSync((()=>{d(t)})))}))}),[p,n,u]);i((()=>{!1===l&&O.current.isPositioned&&(O.current.isPositioned=!1,d((e=>({...e,isPositioned:!1}))))}),[l]);const w=o.useRef(!1);i((()=>(w.current=!0,()=>{w.current=!1})),[]);const P=o.useCallback((()=>{if("function"==typeof m.current&&(m.current(),m.current=null),g.current&&b.current)if(h.current){const e=h.current(g.current,b.current,j);m.current=e}else j()}),[j,h]),R=o.useCallback((e=>{g.current!==e&&(g.current=e,P())}),[P]),k=o.useCallback((e=>{b.current!==e&&(b.current=e,P())}),[P]),M=o.useMemo((()=>({reference:g,floating:b})),[]);return o.useMemo((()=>({...s,update:j,refs:M,reference:R,floating:k})),[s,j,M,R,k])},Object.keys(t).forEach((function(r){"default"===r||e.hasOwnProperty(r)||Object.defineProperty(e,r,{enumerable:!0,get:function(){return t[r]}})})),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 u(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 o=u(r),c=u(n);var i="undefined"!=typeof document?r.useLayoutEffect:r.useEffect;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,u;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(u=Object.keys(e),r=u.length,r!==Object.keys(t).length)return!1;for(n=r;0!=n--;)if(!Object.prototype.hasOwnProperty.call(t,u[n]))return!1;for(n=r;0!=n--;){const r=u[n];if(("_owner"!==r||!e.$$typeof)&&!f(e[r],t[r]))return!1}return!0}return e!=e&&t!=t}e.arrow=e=>{const{element:r,padding:n}=e;return{name:"arrow",options:e,fn(e){return u=r,Object.prototype.hasOwnProperty.call(u,"current")?null!=r.current?t.arrow({element:r.current,padding:n}).fn(e):{}:r?t.arrow({element:r,padding:n}).fn(e):{};var u}}},e.useFloating=function(e){void 0===e&&(e={});const{placement:r="bottom",strategy:n="absolute",middleware:u=[],whileElementsMounted:a,open:l}=e,[s,d]=o.useState({x:null,y:null,strategy:n,placement:r,middlewareData:{},isPositioned:!1}),[p,y]=o.useState(u);f(p,u)||y(u);const g=o.useRef(null),m=o.useRef(null),b=o.useRef(s),O=function(e){const t=o.useRef(e);return i((()=>{t.current=e})),t}(a),[h,j]=o.useState(null),[w,P]=o.useState(null),M=o.useCallback((e=>{g.current!==e&&(g.current=e,j(e))}),[]),R=o.useCallback((e=>{m.current!==e&&(m.current=e,P(e))}),[]),k=o.useCallback((()=>{g.current&&m.current&&t.computePosition(g.current,m.current,{middleware:p,placement:r,strategy:n}).then((e=>{const t={...e,isPositioned:!0};v.current&&!f(b.current,t)&&(b.current=t,c.flushSync((()=>{d(t)})))}))}),[p,r,n]);i((()=>{!1===l&&b.current.isPositioned&&(b.current.isPositioned=!1,d((e=>({...e,isPositioned:!1}))))}),[l]);const v=o.useRef(!1);i((()=>(v.current=!0,()=>{v.current=!1})),[]),i((()=>{if(h&&w){if(O.current)return O.current(h,w,k);k()}}),[h,w,k,O]);const S=o.useMemo((()=>({reference:g,floating:m,setReference:M,setFloating:R})),[M,R]),D=o.useMemo((()=>({reference:h,floating:w})),[h,w]);return o.useMemo((()=>({...s,update:k,refs:S,elements:D,reference:M,floating:R})),[s,k,S,D,M,R])},Object.keys(t).forEach((function(r){"default"===r||e.hasOwnProperty(r)||Object.defineProperty(e,r,{enumerable:!0,get:function(){return t[r]}})})),Object.defineProperty(e,"__esModule",{value:!0})}));

package.json

 {
   "name": "@floating-ui/react-dom",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "@rollingversions": {
@@ -5,0 +5,0 @@ "baseVersion": [

src/types.d.ts

@@ -19,3 +19,9 @@ import type { ComputePositionConfig, ComputePositionReturn, VirtualElement } from '@floating-ui/dom';
         floating: React.MutableRefObject<HTMLElement | null>;
+        setReference: (node: RT | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
     };
+    elements: {
+        reference: RT | null;
+        floating: HTMLElement | null;
+    };
 };
@@ -22,0 +28,0 @@ export type UseFloatingProps<RT extends ReferenceType = ReferenceType> = Omit<Partial<ComputePositionConfig>, 'platform'> & {

src/useFloating.d.ts

 import type { ReferenceType, UseFloatingProps, UseFloatingReturn } from './types';
-export declare function useFloating<RT extends ReferenceType = ReferenceType>({ middleware, placement, strategy, whileElementsMounted, open, }?: UseFloatingProps): UseFloatingReturn<RT>;
+export declare function useFloating<RT extends ReferenceType = ReferenceType>(options?: UseFloatingProps): UseFloatingReturn<RT>;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

28275

increased by1.48%

Lines of code

709

increased by3.5%

No dependency changes