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

Comparing version 1.1.0 to 1.1.1

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

@@ -1,2 +0,2 @@
-import { computePosition, arrow as arrow$1 } from '@floating-ui/dom';
+import { arrow as arrow$1, computePosition } from '@floating-ui/dom';
 export * from '@floating-ui/dom';
@@ -7,2 +7,39 @@ import * as React from 'react';
 
+/**
+ * Positions an inner element of the floating element such that it is centered
+ * to the reference element.
+ * This wraps the core `arrow` middleware to allow React refs as the element.
+ * @see https://floating-ui.com/docs/arrow
+ */
+const arrow = options => {
+  const {
+    element,
+    padding
+  } = options;
+  function isRef(value) {
+    return Object.prototype.hasOwnProperty.call(value, 'current');
+  }
+  return {
+    name: 'arrow',
+    options,
+    fn(args) {
+      if (isRef(element)) {
+        if (element.current != null) {
+          return arrow$1({
+            element: element.current,
+            padding
+          }).fn(args);
+        }
+        return {};
+      } else if (element) {
+        return arrow$1({
+          element,
+          padding
+        }).fn(args);
+      }
+      return {};
+    }
+  };
+};
+
 var index = typeof document !== 'undefined' ? useLayoutEffect : useEffect;
@@ -100,7 +137,7 @@
     }).then(data => {
-      if (isMountedRef.current && !deepEqual(dataRef.current, data)) {
-        const value = {
-          ...data,
-          isPositioned: true
-        };
+      const value = {
+        ...data,
+        isPositioned: true
+      };
+      if (isMountedRef.current && !deepEqual(dataRef.current, value)) {
         dataRef.current = value;
@@ -143,8 +180,12 @@ ReactDOM.flushSync(() => {
   const setReference = React.useCallback(node => {
-    reference.current = node;
-    runElementMountCallback();
+    if (reference.current !== node) {
+      reference.current = node;
+      runElementMountCallback();
+    }
   }, [runElementMountCallback]);
   const setFloating = React.useCallback(node => {
-    floating.current = node;
-    runElementMountCallback();
+    if (floating.current !== node) {
+      floating.current = node;
+      runElementMountCallback();
+    }
   }, [runElementMountCallback]);
@@ -164,39 +205,2 @@ const refs = React.useMemo(() => ({
 
-/**
- * Positions an inner element of the floating element such that it is centered
- * to the reference element.
- * This wraps the core `arrow` middleware to allow React refs as the element.
- * @see https://floating-ui.com/docs/arrow
- */
-const arrow = options => {
-  const {
-    element,
-    padding
-  } = options;
-  function isRef(value) {
-    return Object.prototype.hasOwnProperty.call(value, 'current');
-  }
-  return {
-    name: 'arrow',
-    options,
-    fn(args) {
-      if (isRef(element)) {
-        if (element.current != null) {
-          return arrow$1({
-            element: element.current,
-            padding
-          }).fn(args);
-        }
-        return {};
-      } else if (element) {
-        return arrow$1({
-          element,
-          padding
-        }).fn(args);
-      }
-      return {};
-    }
-  };
-};
-
 export { arrow, useFloating };

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 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};
+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 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(e){let{middleware:n=[],placement:u="bottom",strategy:c="absolute",whileElementsMounted:l,open:s}=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);f(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}(l),k=t.useCallback((()=>{y.current&&g.current&&r(y.current,g.current,{middleware:m,placement:u,strategy:c}).then((e=>{const r={...e,isPositioned:!0};O.current&&!f(h.current,r)&&(h.current=r,o.flushSync((()=>{p(r)})))}))}),[m,u,c]);i((()=>{!1===s&&h.current.isPositioned&&p((e=>({...e,isPositioned:!1})))}),[s]);const O=t.useRef(!1);i((()=>(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&&(y.current=e,P())}),[P]),j=t.useCallback((e=>{g.current!==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])}export{c as arrow,l as useFloating};

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

@@ -28,2 +28,39 @@ (function (global, factory) {
 
+  /**
+   * Positions an inner element of the floating element such that it is centered
+   * to the reference element.
+   * This wraps the core `arrow` middleware to allow React refs as the element.
+   * @see https://floating-ui.com/docs/arrow
+   */
+  const arrow = options => {
+    const {
+      element,
+      padding
+    } = options;
+    function isRef(value) {
+      return Object.prototype.hasOwnProperty.call(value, 'current');
+    }
+    return {
+      name: 'arrow',
+      options,
+      fn(args) {
+        if (isRef(element)) {
+          if (element.current != null) {
+            return dom.arrow({
+              element: element.current,
+              padding
+            }).fn(args);
+          }
+          return {};
+        } else if (element) {
+          return dom.arrow({
+            element,
+            padding
+          }).fn(args);
+        }
+        return {};
+      }
+    };
+  };
+
   var index = typeof document !== 'undefined' ? React.useLayoutEffect : React.useEffect;
@@ -121,7 +158,7 @@
       }).then(data => {
-        if (isMountedRef.current && !deepEqual(dataRef.current, data)) {
-          const value = {
-            ...data,
-            isPositioned: true
-          };
+        const value = {
+          ...data,
+          isPositioned: true
+        };
+        if (isMountedRef.current && !deepEqual(dataRef.current, value)) {
           dataRef.current = value;
@@ -164,8 +201,12 @@ ReactDOM__namespace.flushSync(() => {
     const setReference = React__namespace.useCallback(node => {
-      reference.current = node;
-      runElementMountCallback();
+      if (reference.current !== node) {
+        reference.current = node;
+        runElementMountCallback();
+      }
     }, [runElementMountCallback]);
     const setFloating = React__namespace.useCallback(node => {
-      floating.current = node;
-      runElementMountCallback();
+      if (floating.current !== node) {
+        floating.current = node;
+        runElementMountCallback();
+      }
     }, [runElementMountCallback]);
@@ -185,39 +226,2 @@ const refs = React__namespace.useMemo(() => ({
 
-  /**
-   * Positions an inner element of the floating element such that it is centered
-   * to the reference element.
-   * This wraps the core `arrow` middleware to allow React refs as the element.
-   * @see https://floating-ui.com/docs/arrow
-   */
-  const arrow = options => {
-    const {
-      element,
-      padding
-    } = options;
-    function isRef(value) {
-      return Object.prototype.hasOwnProperty.call(value, 'current');
-    }
-    return {
-      name: 'arrow',
-      options,
-      fn(args) {
-        if (isRef(element)) {
-          if (element.current != null) {
-            return dom.arrow({
-              element: element.current,
-              padding
-            }).fn(args);
-          }
-          return {};
-        } else if (element) {
-          return dom.arrow({
-            element,
-            padding
-          }).fn(args);
-        }
-        return {};
-      }
-    };
-  };
-
   exports.arrow = arrow;
@@ -224,0 +228,0 @@ exports.useFloating = useFloating;

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),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})}));
+!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&&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})}));

package.json

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

src/arrow.d.ts

@@ -0,3 +1,3 @@
+import type { Middleware, SideObject } from '@floating-ui/core';
 import * as React from 'react';
-import type { Middleware, SideObject } from '@floating-ui/core';
 /**
@@ -4,0 +4,0 @@ * Positions an inner element of the floating element such that it is centered

src/index.d.ts

@@ -0,3 +1,3 @@
+export { arrow } from './arrow';
+export { useFloating } from './useFloating';
 export * from '@floating-ui/dom';
-export { useFloating } from './useFloating';
-export { arrow } from './arrow';

src/types.d.ts

@@ -0,6 +1,6 @@
+import type { ComputePositionConfig, ComputePositionReturn, VirtualElement } from '@floating-ui/dom';
 import * as React from 'react';
-import type { ComputePositionReturn, ComputePositionConfig, VirtualElement } from '@floating-ui/dom';
-export * from '@floating-ui/dom';
 export { useFloating } from './';
 export { arrow } from './';
+export * from '@floating-ui/dom';
 export type UseFloatingData = Omit<ComputePositionReturn, 'x' | 'y'> & {
@@ -7,0 +7,0 @@ x: number | null;

src/useFloating.d.ts

@@ -1,2 +0,2 @@
-import type { UseFloatingProps, UseFloatingReturn, ReferenceType } from './types';
+import type { ReferenceType, UseFloatingProps, UseFloatingReturn } from './types';
 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

Total package byte prevSize

27674

increased by1.24%

Lines of code

682

increased by1.79%

No dependency changes