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

Comparing version 0.1.3 to 0.2.0

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

@@ -7,9 +7,20 @@ import { computePosition } from '@floating-ui/dom';
 
-function useFloating(options) {
-  var _options$strategy;
+/**
+ * @see https://epicreact.dev/the-latest-ref-pattern-in-react/
+ */
 
-  if (options === void 0) {
-    options = {};
-  }
+function useLatestRef(value) {
+  const ref = useRef(value);
+  index(() => {
+    ref.current = value;
+  });
+  return ref;
+}
 
+function useFloating(_temp) {
+  let {
+    middleware,
+    placement,
+    strategy
+  } = _temp === void 0 ? {} : _temp;
   const reference = useRef(null);
@@ -22,10 +33,8 @@ const floating = useRef(null);
     y: null,
-    strategy: (_options$strategy = options.strategy) != null ? _options$strategy : 'absolute',
+    strategy: strategy != null ? strategy : 'absolute',
     placement: 'bottom',
     middlewareData: {}
-  });
-  const dependencies = [options.placement, options.strategy, // This requires the consumer to `useMemo()` the value to prevent infinite
-  // loops. We can't deep-check the array well since the API encourages
-  // users to call middleware fns inline, always generating a new object.
-  options.middleware];
+  }); // Memoize middleware internally, to remove the requirement of memoization by consumer
+
+  const latestMiddleware = useLatestRef(middleware);
   const update = useCallback(() => {
@@ -36,6 +45,9 @@ if (!reference.current || !floating.current) {
 
-    computePosition(reference.current, floating.current, options).then(setData);
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  dependencies);
-  index(update, dependencies);
+    computePosition(reference.current, floating.current, {
+      middleware: latestMiddleware.current,
+      placement,
+      strategy
+    }).then(setData);
+  }, [latestMiddleware, placement, strategy]);
+  index(update, [update]);
   const setReference = useCallback(node => {
@@ -42,0 +54,0 @@ reference.current = node;

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

@@ -1,1 +0,1 @@
-import{computePosition as e}from"@floating-ui/dom";export{arrow,autoPlacement,detectOverflow,flip,getScrollParents,hide,limitShift,offset,shift,size}from"@floating-ui/dom";import{useLayoutEffect as t,useEffect as r,useRef as n,useState as o,useCallback as l,useMemo as a}from"react";var i="undefined"!=typeof document?t:r;function u(t){var r;void 0===t&&(t={});const u=n(null),f=n(null),[c,m]=o({x:null,y:null,strategy:null!=(r=t.strategy)?r:"absolute",placement:"bottom",middlewareData:{}}),d=[t.placement,t.strategy,t.middleware],s=l((()=>{u.current&&f.current&&e(u.current,f.current,t).then(m)}),d);i(s,d);const p=l((e=>{u.current=e,s()}),[s]),g=l((e=>{f.current=e,s()}),[s]);return a((()=>({...c,update:s,reference:p,floating:g,refs:{reference:u,floating:f}})),[c,s,p,g])}export{u as useFloating};
+import{computePosition as e}from"@floating-ui/dom";export{arrow,autoPlacement,detectOverflow,flip,getScrollParents,hide,limitShift,offset,shift,size}from"@floating-ui/dom";import{useLayoutEffect as t,useEffect as r,useRef as n,useState as o,useCallback as l,useMemo as u}from"react";var a="undefined"!=typeof document?t:r;function c(t){let{middleware:r,placement:c,strategy:i}=void 0===t?{}:t;const f=n(null),m=n(null),[d,s]=o({x:null,y:null,strategy:null!=i?i:"absolute",placement:"bottom",middlewareData:{}}),p=function(e){const t=n(e);return a((()=>{t.current=e})),t}(r),g=l((()=>{f.current&&m.current&&e(f.current,m.current,{middleware:p.current,placement:c,strategy:i}).then(s)}),[p,c,i]);a(g,[g]);const w=l((e=>{f.current=e,g()}),[g]),y=l((e=>{m.current=e,g()}),[g]);return u((()=>({...d,update:g,reference:w,floating:y,refs:{reference:f,floating:m}})),[d,g,w,y])}export{c as useFloating};

dist/floating-ui.react-dom.js

@@ -9,9 +9,20 @@ (function (global, factory) {
 
-  function useFloating(options) {
-    var _options$strategy;
+  /**
+   * @see https://epicreact.dev/the-latest-ref-pattern-in-react/
+   */
 
-    if (options === void 0) {
-      options = {};
-    }
+  function useLatestRef(value) {
+    const ref = react.useRef(value);
+    index(() => {
+      ref.current = value;
+    });
+    return ref;
+  }
 
+  function useFloating(_temp) {
+    let {
+      middleware,
+      placement,
+      strategy
+    } = _temp === void 0 ? {} : _temp;
     const reference = react.useRef(null);
@@ -24,10 +35,8 @@ const floating = react.useRef(null);
       y: null,
-      strategy: (_options$strategy = options.strategy) != null ? _options$strategy : 'absolute',
+      strategy: strategy != null ? strategy : 'absolute',
       placement: 'bottom',
       middlewareData: {}
-    });
-    const dependencies = [options.placement, options.strategy, // This requires the consumer to `useMemo()` the value to prevent infinite
-    // loops. We can't deep-check the array well since the API encourages
-    // users to call middleware fns inline, always generating a new object.
-    options.middleware];
+    }); // Memoize middleware internally, to remove the requirement of memoization by consumer
+
+    const latestMiddleware = useLatestRef(middleware);
     const update = react.useCallback(() => {
@@ -38,6 +47,9 @@ if (!reference.current || !floating.current) {
 
-      dom.computePosition(reference.current, floating.current, options).then(setData);
-    }, // eslint-disable-next-line react-hooks/exhaustive-deps
-    dependencies);
-    index(update, dependencies);
+      dom.computePosition(reference.current, floating.current, {
+        middleware: latestMiddleware.current,
+        placement,
+        strategy
+      }).then(setData);
+    }, [latestMiddleware, placement, strategy]);
+    index(update, [update]);
     const setReference = react.useCallback(node => {
@@ -44,0 +56,0 @@ reference.current = node;

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,n){"use strict";var r="undefined"!=typeof document?n.useLayoutEffect:n.useEffect;Object.defineProperty(e,"arrow",{enumerable:!0,get:function(){return t.arrow}}),Object.defineProperty(e,"autoPlacement",{enumerable:!0,get:function(){return t.autoPlacement}}),Object.defineProperty(e,"detectOverflow",{enumerable:!0,get:function(){return t.detectOverflow}}),Object.defineProperty(e,"flip",{enumerable:!0,get:function(){return t.flip}}),Object.defineProperty(e,"getScrollParents",{enumerable:!0,get:function(){return t.getScrollParents}}),Object.defineProperty(e,"hide",{enumerable:!0,get:function(){return t.hide}}),Object.defineProperty(e,"limitShift",{enumerable:!0,get:function(){return t.limitShift}}),Object.defineProperty(e,"offset",{enumerable:!0,get:function(){return t.offset}}),Object.defineProperty(e,"shift",{enumerable:!0,get:function(){return t.shift}}),Object.defineProperty(e,"size",{enumerable:!0,get:function(){return t.size}}),e.useFloating=function(e){var u;void 0===e&&(e={});const o=n.useRef(null),i=n.useRef(null),[f,l]=n.useState({x:null,y:null,strategy:null!=(u=e.strategy)?u:"absolute",placement:"bottom",middlewareData:{}}),c=[e.placement,e.strategy,e.middleware],a=n.useCallback((()=>{o.current&&i.current&&t.computePosition(o.current,i.current,e).then(l)}),c);r(a,c);const d=n.useCallback((e=>{o.current=e,a()}),[a]),s=n.useCallback((e=>{i.current=e,a()}),[a]);return n.useMemo((()=>({...f,update:a,reference:d,floating:s,refs:{reference:o,floating:i}})),[f,a,d,s])},Object.defineProperty(e,"__esModule",{value:!0})}));
+!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,n){"use strict";var r="undefined"!=typeof document?n.useLayoutEffect:n.useEffect;Object.defineProperty(e,"arrow",{enumerable:!0,get:function(){return t.arrow}}),Object.defineProperty(e,"autoPlacement",{enumerable:!0,get:function(){return t.autoPlacement}}),Object.defineProperty(e,"detectOverflow",{enumerable:!0,get:function(){return t.detectOverflow}}),Object.defineProperty(e,"flip",{enumerable:!0,get:function(){return t.flip}}),Object.defineProperty(e,"getScrollParents",{enumerable:!0,get:function(){return t.getScrollParents}}),Object.defineProperty(e,"hide",{enumerable:!0,get:function(){return t.hide}}),Object.defineProperty(e,"limitShift",{enumerable:!0,get:function(){return t.limitShift}}),Object.defineProperty(e,"offset",{enumerable:!0,get:function(){return t.offset}}),Object.defineProperty(e,"shift",{enumerable:!0,get:function(){return t.shift}}),Object.defineProperty(e,"size",{enumerable:!0,get:function(){return t.size}}),e.useFloating=function(e){let{middleware:u,placement:o,strategy:i}=void 0===e?{}:e;const f=n.useRef(null),c=n.useRef(null),[l,a]=n.useState({x:null,y:null,strategy:null!=i?i:"absolute",placement:"bottom",middlewareData:{}}),d=function(e){const t=n.useRef(e);return r((()=>{t.current=e})),t}(u),s=n.useCallback((()=>{f.current&&c.current&&t.computePosition(f.current,c.current,{middleware:d.current,placement:o,strategy:i}).then(a)}),[d,o,i]);r(s,[s]);const b=n.useCallback((e=>{f.current=e,s()}),[s]),m=n.useCallback((e=>{c.current=e,s()}),[s]);return n.useMemo((()=>({...l,update:s,reference:b,floating:m,refs:{reference:f,floating:c}})),[l,s,b,m])},Object.defineProperty(e,"__esModule",{value:!0})}));

package.json

 {
   "name": "@floating-ui/react-dom",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Floating UI for React DOM",
@@ -23,2 +23,7 @@ "main": "dist/floating-ui.react-dom.js",
   "bugs": "https://github.com/atomiks/floating-ui",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/atomiks/floating-ui.git",
+    "directory": "packages/react-dom"
+  },
   "homepage": "https://floating-ui.com/docs/react-dom",
@@ -40,3 +45,3 @@ "keywords": [
   "dependencies": {
-    "@floating-ui/dom": "^0.1.2",
+    "@floating-ui/dom": "^0.1.3",
     "use-isomorphic-layout-effect": "^1.1.1"
@@ -46,2 +51,3 @@ },
     "@babel/preset-env": "^7.16.4",
+    "@babel/preset-react": "^7.16.0",
     "@babel/preset-typescript": "^7.16.0",
@@ -52,2 +58,3 @@ "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-replace": "^3.0.0",
+    "@testing-library/react": "^12.1.2",
     "@testing-library/react-hooks": "^7.0.2",
@@ -54,0 +61,0 @@ "@types/jest": "^27.0.3",

src/index.d.ts

@@ -1,2 +0,2 @@
-import type { ComputePositionConfig, ComputePositionReturn } from '@floating-ui/core';
+import type { ComputePositionConfig, ComputePositionReturn, VirtualElement } from '@floating-ui/core';
 import { MutableRefObject } from 'react';
@@ -10,3 +10,3 @@ export { arrow, autoPlacement, flip, hide, offset, shift, limitShift, size, getScrollParents, detectOverflow, } from '@floating-ui/dom';
     update: () => void;
-    reference: (node: Element | null) => void;
+    reference: (node: Element | VirtualElement | null) => void;
     floating: (node: HTMLElement | null) => void;
@@ -18,2 +18,2 @@ refs: {
 };
-export declare function useFloating(options?: Omit<Partial<ComputePositionConfig>, 'platform'>): UseFloatingReturn;
+export declare function useFloating({ middleware, placement, strategy, }?: Omit<Partial<ComputePositionConfig>, 'platform'>): UseFloatingReturn;

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

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

11603

increased by7.33%

Number of package files

10

increased by11.11%

Lines of code

205

increased by15.17%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

19

increased by11.76%

Dependency changes

• Updated@floating-ui/dom@^0.1.3