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

Comparing version 0.6.3 to 0.7.0

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

@@ -71,2 +71,10 @@ import { computePosition, arrow as arrow$1 } from '@floating-ui/dom';
 
+function useLatestRef(value) {
+  const ref = useRef(value);
+  index(() => {
+    ref.current = value;
+  });
+  return ref;
+}
+
 function useFloating(_temp) {
@@ -76,6 +84,9 @@ let {
     placement = 'bottom',
-    strategy = 'absolute'
+    strategy = 'absolute',
+    whileElementsMounted
   } = _temp === void 0 ? {} : _temp;
   const reference = useRef(null);
   const floating = useRef(null);
+  const whileElementsMountedRef = useLatestRef(whileElementsMounted);
+  const cleanupRef = useRef(null);
   const [data, setData] = useState({
@@ -131,10 +142,22 @@ // Setting these to `null` will allow the consumer to determine if
   index(update, [update]);
+  const runElementMountCallback = useCallback(() => {
+    if (typeof cleanupRef.current === 'function') {
+      cleanupRef.current();
+      cleanupRef.current = null;
+    }
+
+    if (reference.current && floating.current && whileElementsMountedRef.current) {
+      cleanupRef.current = whileElementsMountedRef.current(reference.current, floating.current, update);
+    }
+  }, [update, whileElementsMountedRef]);
   const setReference = useCallback(node => {
     reference.current = node;
+    runElementMountCallback();
     update();
-  }, [update]);
+  }, [update, runElementMountCallback]);
   const setFloating = useCallback(node => {
     floating.current = node;
+    runElementMountCallback();
     update();
-  }, [update]);
+  }, [update, runElementMountCallback]);
   const refs = useMemo(() => ({
@@ -141,0 +164,0 @@ reference,

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

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

dist/floating-ui.react-dom.js

@@ -72,2 +72,10 @@ (function (global, factory) {
 
+  function useLatestRef(value) {
+    const ref = react.useRef(value);
+    index(() => {
+      ref.current = value;
+    });
+    return ref;
+  }
+
   function useFloating(_temp) {
@@ -77,6 +85,9 @@ let {
       placement = 'bottom',
-      strategy = 'absolute'
+      strategy = 'absolute',
+      whileElementsMounted
     } = _temp === void 0 ? {} : _temp;
     const reference = react.useRef(null);
     const floating = react.useRef(null);
+    const whileElementsMountedRef = useLatestRef(whileElementsMounted);
+    const cleanupRef = react.useRef(null);
     const [data, setData] = react.useState({
@@ -132,10 +143,22 @@ // Setting these to `null` will allow the consumer to determine if
     index(update, [update]);
+    const runElementMountCallback = react.useCallback(() => {
+      if (typeof cleanupRef.current === 'function') {
+        cleanupRef.current();
+        cleanupRef.current = null;
+      }
+
+      if (reference.current && floating.current && whileElementsMountedRef.current) {
+        cleanupRef.current = whileElementsMountedRef.current(reference.current, floating.current, update);
+      }
+    }, [update, whileElementsMountedRef]);
     const setReference = react.useCallback(node => {
       reference.current = node;
+      runElementMountCallback();
       update();
-    }, [update]);
+    }, [update, runElementMountCallback]);
     const setFloating = react.useCallback(node => {
       floating.current = node;
+      runElementMountCallback();
       update();
-    }, [update]);
+    }, [update, runElementMountCallback]);
     const refs = react.useMemo(() => ({
@@ -142,0 +165,0 @@ reference,

dist/floating-ui.react-dom.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";var o="undefined"!=typeof document?r.useLayoutEffect:r.useEffect;function u(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(!u(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)&&!u(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 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){let{middleware:a,placement:f="bottom",strategy:l="absolute"}=void 0===e?{}:e;const c=r.useRef(null),i=r.useRef(null),[s,d]=r.useState({x:null,y:null,strategy:l,placement:f,middlewareData:{}}),[p,y]=r.useState(a);u(null==p?void 0:p.map((e=>{let{options:t}=e;return t})),null==a?void 0:a.map((e=>{let{options:t}=e;return t})))||y(a);const m=r.useRef(!0);o((()=>(m.current=!0,()=>{m.current=!1})),[]);const g=r.useCallback((()=>{c.current&&i.current&&t.computePosition(c.current,i.current,{middleware:p,placement:f,strategy:l}).then((e=>{m.current&&n.flushSync((()=>{d(e)}))}))}),[p,f,l]);o(g,[g]);const b=r.useCallback((e=>{c.current=e,g()}),[g]),h=r.useCallback((e=>{i.current=e,g()}),[g]),O=r.useMemo((()=>({reference:c,floating:i})),[]);return r.useMemo((()=>({...s,update:g,refs:O,reference:b,floating:h})),[s,g,O,b,h])},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";var u="undefined"!=typeof document?r.useLayoutEffect:r.useEffect;function o(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(!o(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)&&!o(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:c,placement:l="bottom",strategy:f="absolute",whileElementsMounted:a}=void 0===e?{}:e;const i=r.useRef(null),s=r.useRef(null),d=function(e){const t=r.useRef(e);return u((()=>{t.current=e})),t}(a),p=r.useRef(null),[y,m]=r.useState({x:null,y:null,strategy:f,placement:l,middlewareData:{}}),[g,b]=r.useState(c);o(null==g?void 0:g.map((e=>{let{options:t}=e;return t})),null==c?void 0:c.map((e=>{let{options:t}=e;return t})))||b(c);const h=r.useRef(!0);u((()=>(h.current=!0,()=>{h.current=!1})),[]);const O=r.useCallback((()=>{i.current&&s.current&&t.computePosition(i.current,s.current,{middleware:g,placement:l,strategy:f}).then((e=>{h.current&&n.flushSync((()=>{m(e)}))}))}),[g,l,f]);u(O,[O]);const w=r.useCallback((()=>{"function"==typeof p.current&&(p.current(),p.current=null),i.current&&s.current&&d.current&&(p.current=d.current(i.current,s.current,O))}),[O,d]),j=r.useCallback((e=>{i.current=e,w(),O()}),[O,w]),R=r.useCallback((e=>{s.current=e,w(),O()}),[O,w]),k=r.useMemo((()=>({reference:i,floating:s})),[]);return r.useMemo((()=>({...y,update:O,refs:k,reference:j,floating:R})),[y,O,k,j,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": "0.6.3",
+  "version": "0.7.0",
   "@rollingversions": {
@@ -15,13 +15,14 @@ "baseVersion": [
   },
-  "main": "dist/floating-ui.react-dom.js",
-  "module": "dist/floating-ui.react-dom.esm.js",
-  "unpkg": "dist/floating-ui.react-dom.min.js",
-  "type": "module",
+  "main": "./dist/floating-ui.react-dom.js",
+  "module": "./dist/floating-ui.react-dom.esm.js",
+  "unpkg": "./dist/floating-ui.react-dom.min.js",
+  "types": "./index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/floating-ui.react-dom.esm.js",
-      "require": "./dist/floating-ui.react-dom.cjs"
+      "types": "./index.d.ts",
+      "module": "./dist/floating-ui.react-dom.esm.js",
+      "import": "./dist/floating-ui.react-dom.mjs",
+      "default": "./dist/floating-ui.react-dom.js"
     },
-    "./package.json": "./package.json",
-    "./src/index.ts": "./src/index.ts"
+    "./package.json": "./package.json"
   },
@@ -63,3 +64,3 @@ "sideEffects": false,
   "dependencies": {
-    "@floating-ui/dom": "^0.4.5",
+    "@floating-ui/dom": "^0.5.0",
     "use-isomorphic-layout-effect": "^1.1.1"
@@ -75,4 +76,3 @@ },
     "@rollup/plugin-replace": "^3.0.0",
-    "@testing-library/react": "^12.1.2",
-    "@testing-library/react-hooks": "^7.0.2",
+    "@testing-library/react": "^13.2.0",
     "@types/jest": "^27.0.3",
@@ -79,0 +79,0 @@ "@types/react": "^18.0.1",

src/index.d.ts

@@ -18,3 +18,6 @@ import type { ComputePositionConfig, ComputePositionReturn, Middleware, SideObject, VirtualElement } from '@floating-ui/core';
 };
-export declare function useFloating<RT extends ReferenceType = ReferenceType>({ middleware, placement, strategy, }?: Omit<Partial<ComputePositionConfig>, 'platform'>): UseFloatingReturn<RT>;
+export declare type UseFloatingProps<RT extends ReferenceType = ReferenceType> = Omit<Partial<ComputePositionConfig>, 'platform'> & {
+    whileElementsMounted?: (reference: RT, floating: HTMLElement, update: () => void) => void | (() => void);
+};
+export declare function useFloating<RT extends ReferenceType = ReferenceType>({ middleware, placement, strategy, whileElementsMounted, }?: UseFloatingProps): UseFloatingReturn<RT>;
 export declare const arrow: (options: {
@@ -21,0 +24,0 @@ element: MutableRefObject<HTMLElement | null> | HTMLElement;

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

25134

increased by13.17%

Dev dependency count

17

decreased by-5.56%

Lines of code

598

increased by11.15%

Worsened metrics

Is type module

No

Dependency changes

• + Added@floating-ui/core@0.7.3(transitive)

• + Added@floating-ui/dom@0.5.4(transitive)

• - Removed@floating-ui/core@0.6.2(transitive)

• - Removed@floating-ui/dom@0.4.5(transitive)

• Updated@floating-ui/dom@^0.5.0