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

Comparing version 0.6.1 to 0.6.2

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

 import { computePosition, arrow as arrow$1 } from '@floating-ui/dom';
 export * from '@floating-ui/dom';
 import { useLayoutEffect, useEffect, useRef, useState, useCallback, useMemo } from 'react';
+import { flushSync } from 'react-dom';
 
@@ -121,3 +122,5 @@ var index = typeof document !== 'undefined' ? useLayoutEffect : useEffect;
       if (isMountedRef.current) {
-        setData(data);
+        flushSync(() => {
+          setData(data);
+        });
       }
@@ -124,0 +127,0 @@ });

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

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

dist/floating-ui.react-dom.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@floating-ui/dom'), require('react')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@floating-ui/dom', 'react'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.FloatingUIReactDOM = {}, global.FloatingUIDOM, global.React));
-})(this, (function (exports, dom, react) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@floating-ui/dom'), require('react'), require('react-dom')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@floating-ui/dom', 'react', 'react-dom'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.FloatingUIReactDOM = {}, global.FloatingUIDOM, global.React, global.ReactDOM));
+})(this, (function (exports, dom, react, reactDom) { 'use strict';
 
@@ -123,3 +123,5 @@ var index = typeof document !== 'undefined' ? react.useLayoutEffect : react.useEffect;
         if (isMountedRef.current) {
-          setData(data);
+          reactDom.flushSync(() => {
+            setData(data);
+          });
         }
@@ -126,0 +128,0 @@ });

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")):"function"==typeof define&&define.amd?define(["exports","@floating-ui/dom","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).FloatingUIReactDOM={},e.FloatingUIDOM,e.React)}(this,(function(e,t,r){"use strict";var n="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 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:u,placement:a="bottom",strategy:f="absolute"}=void 0===e?{}:e;const l=r.useRef(null),i=r.useRef(null),[c,s]=r.useState({x:null,y:null,strategy:f,placement:a,middlewareData:{}}),[p,d]=r.useState(u);o(null==p?void 0:p.map((e=>{let{options:t}=e;return t})),null==u?void 0:u.map((e=>{let{options:t}=e;return t})))||d(u);const y=r.useRef(!0);n((()=>(y.current=!0,()=>{y.current=!1})),[]);const g=r.useCallback((()=>{l.current&&i.current&&t.computePosition(l.current,i.current,{middleware:p,placement:a,strategy:f}).then((e=>{y.current&&s(e)}))}),[p,a,f]);n(g,[g]);const m=r.useCallback((e=>{l.current=e,g()}),[g]),b=r.useCallback((e=>{i.current=e,g()}),[g]),h=r.useMemo((()=>({reference:l,floating:i})),[]);return r.useMemo((()=>({...c,update:g,refs:h,reference:m,floating:b})),[c,g,h,m,b])},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 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})}));

package.json

 {
   "name": "@floating-ui/react-dom",
-  "version": "0.6.1",
+  "version": "0.6.2",
   "@rollingversions": {
@@ -62,3 +62,3 @@ "baseVersion": [
   "dependencies": {
-    "@floating-ui/dom": "^0.4.2",
+    "@floating-ui/dom": "^0.4.4",
     "use-isomorphic-layout-effect": "^1.1.1"
@@ -77,12 +77,11 @@ },
     "@types/jest": "^27.0.3",
-    "@types/react": "^17.0.37",
+    "@types/react": "^18.0.1",
     "babel-plugin-annotate-pure-calls": "^0.4.0",
     "jest": "^27.3.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "rollup": "^2.60.1",
     "rollup-plugin-terser": "^7.0.2",
-    "ts-jest": "^27.0.7",
-    "typescript": "^4.5.2"
+    "ts-jest": "^27.0.7"
   }
 }

src/index.d.ts

@@ -8,12 +8,13 @@ import type { ComputePositionConfig, ComputePositionReturn, Middleware, SideObject, VirtualElement } from '@floating-ui/core';
 };
-export declare type UseFloatingReturn = Data & {
+declare type ReferenceType = Element | VirtualElement;
+export declare type UseFloatingReturn<RT extends ReferenceType = ReferenceType> = Data & {
     update: () => void;
-    reference: (node: Element | VirtualElement | null) => void;
+    reference: (node: RT | null) => void;
     floating: (node: HTMLElement | null) => void;
     refs: {
-        reference: MutableRefObject<Element | VirtualElement | null>;
+        reference: MutableRefObject<RT | null>;
         floating: MutableRefObject<HTMLElement | null>;
     };
 };
-export declare function useFloating({ middleware, placement, strategy, }?: Omit<Partial<ComputePositionConfig>, 'platform'>): UseFloatingReturn;
+export declare function useFloating<RT extends ReferenceType = ReferenceType>({ middleware, placement, strategy, }?: Omit<Partial<ComputePositionConfig>, 'platform'>): UseFloatingReturn<RT>;
 export declare const arrow: (options: {
@@ -20,0 +21,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

21129

increased by2.26%

Dev dependency count

18

decreased by-5.26%

Lines of code

538

increased by1.7%

Dependency changes

• Updated@floating-ui/dom@^0.4.4