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

Comparing version 1.0.1 to 1.1.0

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

@@ -15,13 +15,9 @@ import { computePosition, arrow as arrow$1 } from '@floating-ui/dom';
   }
-
   if (typeof a !== typeof b) {
     return false;
   }
-
   if (typeof a === 'function' && a.toString() === b.toString()) {
     return true;
   }
-
   let length, i, keys;
-
   if (a && b && typeof a == 'object') {
@@ -31,3 +27,2 @@ if (Array.isArray(a)) {
       if (length != b.length) return false;
-
       for (i = length; i-- !== 0;) {
@@ -38,13 +33,9 @@ if (!deepEqual(a[i], b[i])) {
       }
-
       return true;
     }
-
     keys = Object.keys(a);
     length = keys.length;
-
     if (length !== Object.keys(b).length) {
       return false;
     }
-
     for (i = length; i-- !== 0;) {
@@ -55,10 +46,7 @@ if (!Object.prototype.hasOwnProperty.call(b, keys[i])) {
     }
-
     for (i = length; i-- !== 0;) {
       const key = keys[i];
-
       if (key === '_owner' && a.$$typeof) {
         continue;
       }
-
       if (!deepEqual(a[key], b[key])) {
@@ -68,6 +56,4 @@ return false;
     }
-
     return true;
   }
-
   return a !== a && b !== b;
@@ -89,7 +75,6 @@ }
     strategy = 'absolute',
-    whileElementsMounted
+    whileElementsMounted,
+    open
   } = _temp === void 0 ? {} : _temp;
   const [data, setData] = React.useState({
-    // Setting these to `null` will allow the consumer to determine if
-    // `computePosition()` has run yet
     x: null,
@@ -99,10 +84,9 @@ y: null,
     placement,
-    middlewareData: {}
+    middlewareData: {},
+    isPositioned: false
   });
   const [latestMiddleware, setLatestMiddleware] = React.useState(middleware);
-
   if (!deepEqual(latestMiddleware, middleware)) {
     setLatestMiddleware(middleware);
   }
-
   const reference = React.useRef(null);
@@ -117,3 +101,2 @@ const floating = React.useRef(null);
     }
-
     computePosition(reference.current, floating.current, {
@@ -125,5 +108,9 @@ middleware: latestMiddleware,
       if (isMountedRef.current && !deepEqual(dataRef.current, data)) {
-        dataRef.current = data;
+        const value = {
+          ...data,
+          isPositioned: true
+        };
+        dataRef.current = value;
         ReactDOM.flushSync(() => {
-          setData(data);
+          setData(value);
         });
@@ -134,7 +121,9 @@ }
   index(() => {
-    // Skip first update
-    if (isMountedRef.current) {
-      update();
+    if (open === false && dataRef.current.isPositioned) {
+      setData(data => ({
+        ...data,
+        isPositioned: false
+      }));
     }
-  }, [update]);
+  }, [open]);
   const isMountedRef = React.useRef(false);
@@ -152,3 +141,2 @@ index(() => {
     }
-
     if (reference.current && floating.current) {
@@ -175,3 +163,4 @@ if (whileElementsMountedRef.current) {
   }), []);
-  return React.useMemo(() => ({ ...data,
+  return React.useMemo(() => ({
+    ...data,
     update,
@@ -190,3 +179,2 @@ refs,
  */
-
 const arrow = options => {
@@ -197,11 +185,8 @@ const {
   } = options;
-
   function isRef(value) {
     return Object.prototype.hasOwnProperty.call(value, 'current');
   }
-
   return {
     name: 'arrow',
     options,
-
     fn(args) {
@@ -215,3 +200,2 @@ if (isRef(element)) {
         }
-
         return {};
@@ -224,6 +208,4 @@ } else if (element) {
       }
-
       return {};
     }
-
   };
@@ -230,0 +212,0 @@ };

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

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

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

@@ -36,13 +36,9 @@ (function (global, factory) {
     }
-
     if (typeof a !== typeof b) {
       return false;
     }
-
     if (typeof a === 'function' && a.toString() === b.toString()) {
       return true;
     }
-
     let length, i, keys;
-
     if (a && b && typeof a == 'object') {
@@ -52,3 +48,2 @@ if (Array.isArray(a)) {
         if (length != b.length) return false;
-
         for (i = length; i-- !== 0;) {
@@ -59,13 +54,9 @@ if (!deepEqual(a[i], b[i])) {
         }
-
         return true;
       }
-
       keys = Object.keys(a);
       length = keys.length;
-
       if (length !== Object.keys(b).length) {
         return false;
       }
-
       for (i = length; i-- !== 0;) {
@@ -76,10 +67,7 @@ if (!Object.prototype.hasOwnProperty.call(b, keys[i])) {
       }
-
       for (i = length; i-- !== 0;) {
         const key = keys[i];
-
         if (key === '_owner' && a.$$typeof) {
           continue;
         }
-
         if (!deepEqual(a[key], b[key])) {
@@ -89,6 +77,4 @@ return false;
       }
-
       return true;
     }
-
     return a !== a && b !== b;
@@ -110,7 +96,6 @@ }
       strategy = 'absolute',
-      whileElementsMounted
+      whileElementsMounted,
+      open
     } = _temp === void 0 ? {} : _temp;
     const [data, setData] = React__namespace.useState({
-      // Setting these to `null` will allow the consumer to determine if
-      // `computePosition()` has run yet
       x: null,
@@ -120,10 +105,9 @@ y: null,
       placement,
-      middlewareData: {}
+      middlewareData: {},
+      isPositioned: false
     });
     const [latestMiddleware, setLatestMiddleware] = React__namespace.useState(middleware);
-
     if (!deepEqual(latestMiddleware, middleware)) {
       setLatestMiddleware(middleware);
     }
-
     const reference = React__namespace.useRef(null);
@@ -138,3 +122,2 @@ const floating = React__namespace.useRef(null);
       }
-
       dom.computePosition(reference.current, floating.current, {
@@ -146,5 +129,9 @@ middleware: latestMiddleware,
         if (isMountedRef.current && !deepEqual(dataRef.current, data)) {
-          dataRef.current = data;
+          const value = {
+            ...data,
+            isPositioned: true
+          };
+          dataRef.current = value;
           ReactDOM__namespace.flushSync(() => {
-            setData(data);
+            setData(value);
           });
@@ -155,7 +142,9 @@ }
     index(() => {
-      // Skip first update
-      if (isMountedRef.current) {
-        update();
+      if (open === false && dataRef.current.isPositioned) {
+        setData(data => ({
+          ...data,
+          isPositioned: false
+        }));
       }
-    }, [update]);
+    }, [open]);
     const isMountedRef = React__namespace.useRef(false);
@@ -173,3 +162,2 @@ index(() => {
       }
-
       if (reference.current && floating.current) {
@@ -196,3 +184,4 @@ if (whileElementsMountedRef.current) {
     }), []);
-    return React__namespace.useMemo(() => ({ ...data,
+    return React__namespace.useMemo(() => ({
+      ...data,
       update,
@@ -211,3 +200,2 @@ refs,
    */
-
   const arrow = options => {
@@ -218,11 +206,8 @@ const {
     } = options;
-
     function isRef(value) {
       return Object.prototype.hasOwnProperty.call(value, 'current');
     }
-
     return {
       name: 'arrow',
       options,
-
       fn(args) {
@@ -236,3 +221,2 @@ if (isRef(element)) {
           }
-
           return {};
@@ -245,6 +229,4 @@ } else if (element) {
         }
-
         return {};
       }
-
     };
@@ -251,0 +233,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),f="undefined"!=typeof document?r.useLayoutEffect:r.useEffect;function a(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(!a(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)&&!a(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:l}=void 0===e?{}:e;const[i,s]=o.useState({x:null,y:null,strategy:u,placement:n,middlewareData:{}}),[d,p]=o.useState(r);a(d,r)||p(r);const y=o.useRef(null),g=o.useRef(null),b=o.useRef(null),m=o.useRef(i),O=function(e){const t=o.useRef(e);return f((()=>{t.current=e})),t}(l),h=o.useCallback((()=>{y.current&&g.current&&t.computePosition(y.current,g.current,{middleware:d,placement:n,strategy:u}).then((e=>{j.current&&!a(m.current,e)&&(m.current=e,c.flushSync((()=>{s(e)})))}))}),[d,n,u]);f((()=>{j.current&&h()}),[h]);const j=o.useRef(!1);f((()=>(j.current=!0,()=>{j.current=!1})),[]);const w=o.useCallback((()=>{if("function"==typeof b.current&&(b.current(),b.current=null),y.current&&g.current)if(O.current){const e=O.current(y.current,g.current,h);b.current=e}else h()}),[h,O]),R=o.useCallback((e=>{y.current=e,w()}),[w]),k=o.useCallback((e=>{g.current=e,w()}),[w]),M=o.useMemo((()=>({reference:y,floating:g})),[]);return o.useMemo((()=>({...i,update:h,refs:M,reference:R,floating:k})),[i,h,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),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=>{if(w.current&&!f(O.current,e)){const t={...e,isPositioned:!0};O.current=t,c.flushSync((()=>{d(t)}))}}))}),[p,n,u]);i((()=>{!1===l&&O.current.isPositioned&&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,P()}),[P]),k=o.useCallback((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})}));

package.json

 {
   "name": "@floating-ui/react-dom",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "@rollingversions": {
     "baseVersion": [
       0,
-      0,
+      1,
       0
@@ -34,3 +34,2 @@ ]
   ],
-  "browserslist": "> 0.5%, not dead, not IE 11",
   "scripts": {
@@ -64,24 +63,13 @@ "test": "jest test",
   "dependencies": {
-    "@floating-ui/dom": "^1.0.5"
+    "@floating-ui/dom": "^1.1.0"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.16.4",
     "@babel/preset-react": "^7.16.0",
-    "@babel/preset-typescript": "^7.16.0",
-    "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^21.0.1",
-    "@rollup/plugin-node-resolve": "^13.0.6",
-    "@rollup/plugin-replace": "^3.0.0",
     "@testing-library/react": "^13.2.0",
-    "@types/jest": "^27.0.3",
     "@types/react": "^18.0.1",
-    "babel-plugin-annotate-pure-calls": "^0.4.0",
-    "jest": "^27.3.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "rollup": "^2.60.1",
-    "rollup-plugin-terser": "^7.0.2",
-    "ts-jest": "^27.0.7",
     "use-isomorphic-layout-effect": "^1.1.1"
   }
 }

src/types.d.ts

@@ -6,8 +6,9 @@ import * as React from 'react';
 export { arrow } from './';
-export declare type UseFloatingData = Omit<ComputePositionReturn, 'x' | 'y'> & {
+export type UseFloatingData = Omit<ComputePositionReturn, 'x' | 'y'> & {
     x: number | null;
     y: number | null;
+    isPositioned: boolean;
 };
-export declare type ReferenceType = Element | VirtualElement;
-export declare type UseFloatingReturn<RT extends ReferenceType = ReferenceType> = UseFloatingData & {
+export type ReferenceType = Element | VirtualElement;
+export type UseFloatingReturn<RT extends ReferenceType = ReferenceType> = UseFloatingData & {
     update: () => void;
@@ -21,4 +22,5 @@ reference: (node: RT | null) => void;
 };
-export declare type UseFloatingProps<RT extends ReferenceType = ReferenceType> = Omit<Partial<ComputePositionConfig>, 'platform'> & {
+export type UseFloatingProps<RT extends ReferenceType = ReferenceType> = Omit<Partial<ComputePositionConfig>, 'platform'> & {
     whileElementsMounted?: (reference: RT, floating: HTMLElement, update: () => void) => void | (() => void);
+    open?: boolean;
 };

src/useFloating.d.ts

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

Dev dependency count

7

decreased by-61.11%

Lines of code

670

increased by3.72%

Worsened metrics

Total package byte prevSize

27334

decreased by-0.14%

Dependency changes

• Updated@floating-ui/dom@^1.1.0