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

Comparing version 2.0.0 to 2.0.1

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

@@ -14,6 +14,2 @@ import { arrow as arrow$1, computePosition } from '@floating-ui/dom';
 const arrow = options => {
-  const {
-    element,
-    padding
-  } = options;
   function isRef(value) {
@@ -25,3 +21,7 @@ return {}.hasOwnProperty.call(value, 'current');
     options,
-    fn(args) {
+    fn(state) {
+      const {
+        element,
+        padding
+      } = typeof options === 'function' ? options(state) : options;
       if (element && isRef(element)) {
@@ -32,3 +32,3 @@ if (element.current != null) {
             padding
-          }).fn(args);
+          }).fn(state);
         }
@@ -40,3 +40,3 @@ return {};
           padding
-        }).fn(args);
+        }).fn(state);
       }
@@ -43,0 +43,0 @@ return {};

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

@@ -1,1 +0,1 @@
-import{arrow as e,computePosition as t}from"@floating-ui/dom";export{autoPlacement,autoUpdate,computePosition,detectOverflow,flip,getOverflowAncestors,hide,inline,limitShift,offset,platform,shift,size}from"@floating-ui/dom";import*as r from"react";import{useLayoutEffect as n,useEffect as o}from"react";import*as i from"react-dom";const u=t=>{const{element:r,padding:n}=t;return{name:"arrow",options:t,fn(t){return r&&(o=r,{}.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}}};var f="undefined"!=typeof document?n:o;function s(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(!s(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(!{}.hasOwnProperty.call(t,o[n]))return!1;for(n=r;0!=n--;){const r=o[n];if(("_owner"!==r||!e.$$typeof)&&!s(e[r],t[r]))return!1}return!0}return e!=e&&t!=t}function a(e){if("undefined"==typeof window)return 1;return(e.ownerDocument.defaultView||window).devicePixelRatio||1}function c(e,t){const r=a(e);return Math.round(t*r)/r}function l(e){const t=r.useRef(e);return f((()=>{t.current=e})),t}function m(e){void 0===e&&(e={});const{placement:n="bottom",strategy:o="absolute",middleware:u=[],platform:m,elements:{reference:d,floating:p}={},transform:g=!0,whileElementsMounted:y,open:w}=e,[h,P]=r.useState({x:0,y:0,strategy:o,placement:n,middlewareData:{},isPositioned:!1}),[S,b]=r.useState(u);s(S,u)||b(u);const[x,R]=r.useState(null),[v,M]=r.useState(null),O=r.useCallback((e=>{e!=A.current&&(A.current=e,R(e))}),[R]),k=r.useCallback((e=>{e!==D.current&&(D.current=e,M(e))}),[M]),C=d||x,j=p||v,A=r.useRef(null),D=r.useRef(null),$=r.useRef(h),z=l(y),E=l(m),F=r.useCallback((()=>{if(!A.current||!D.current)return;const e={placement:n,strategy:o,middleware:S};E.current&&(e.platform=E.current),t(A.current,D.current,e).then((e=>{const t={...e,isPositioned:!0};U.current&&!s($.current,t)&&($.current=t,i.flushSync((()=>{P(t)})))}))}),[S,n,o,E]);f((()=>{!1===w&&$.current.isPositioned&&($.current.isPositioned=!1,P((e=>({...e,isPositioned:!1}))))}),[w]);const U=r.useRef(!1);f((()=>(U.current=!0,()=>{U.current=!1})),[]),f((()=>{if(C&&(A.current=C),j&&(D.current=j),C&&j){if(z.current)return z.current(C,j,F);F()}}),[C,j,F,z]);const V=r.useMemo((()=>({reference:A,floating:D,setReference:O,setFloating:k})),[O,k]),_=r.useMemo((()=>({reference:C,floating:j})),[C,j]),q=r.useMemo((()=>{const e={position:o,left:0,top:0};if(!_.floating)return e;const t=c(_.floating,h.x),r=c(_.floating,h.y);return g?{...e,transform:"translate("+t+"px, "+r+"px)",...a(_.floating)>=1.5&&{willChange:"transform"}}:{position:o,left:t,top:r}}),[o,g,_.floating,h.x,h.y]);return r.useMemo((()=>({...h,update:F,refs:V,elements:_,floatingStyles:q})),[h,F,V,_,q])}export{u as arrow,m as useFloating};
+import{arrow as e,computePosition as t}from"@floating-ui/dom";export{autoPlacement,autoUpdate,computePosition,detectOverflow,flip,getOverflowAncestors,hide,inline,limitShift,offset,platform,shift,size}from"@floating-ui/dom";import*as r from"react";import{useLayoutEffect as n,useEffect as o}from"react";import*as i from"react-dom";const u=t=>({name:"arrow",options:t,fn(r){const{element:n,padding:o}="function"==typeof t?t(r):t;return n&&(i=n,{}.hasOwnProperty.call(i,"current"))?null!=n.current?e({element:n.current,padding:o}).fn(r):{}:n?e({element:n,padding:o}).fn(r):{};var i}});var f="undefined"!=typeof document?n:o;function s(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(!s(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(!{}.hasOwnProperty.call(t,o[n]))return!1;for(n=r;0!=n--;){const r=o[n];if(("_owner"!==r||!e.$$typeof)&&!s(e[r],t[r]))return!1}return!0}return e!=e&&t!=t}function a(e){if("undefined"==typeof window)return 1;return(e.ownerDocument.defaultView||window).devicePixelRatio||1}function c(e,t){const r=a(e);return Math.round(t*r)/r}function l(e){const t=r.useRef(e);return f((()=>{t.current=e})),t}function m(e){void 0===e&&(e={});const{placement:n="bottom",strategy:o="absolute",middleware:u=[],platform:m,elements:{reference:p,floating:d}={},transform:g=!0,whileElementsMounted:y,open:w}=e,[h,P]=r.useState({x:0,y:0,strategy:o,placement:n,middlewareData:{},isPositioned:!1}),[S,b]=r.useState(u);s(S,u)||b(u);const[x,R]=r.useState(null),[v,M]=r.useState(null),O=r.useCallback((e=>{e!=A.current&&(A.current=e,R(e))}),[R]),k=r.useCallback((e=>{e!==D.current&&(D.current=e,M(e))}),[M]),C=p||x,j=d||v,A=r.useRef(null),D=r.useRef(null),$=r.useRef(h),z=l(y),E=l(m),F=r.useCallback((()=>{if(!A.current||!D.current)return;const e={placement:n,strategy:o,middleware:S};E.current&&(e.platform=E.current),t(A.current,D.current,e).then((e=>{const t={...e,isPositioned:!0};U.current&&!s($.current,t)&&($.current=t,i.flushSync((()=>{P(t)})))}))}),[S,n,o,E]);f((()=>{!1===w&&$.current.isPositioned&&($.current.isPositioned=!1,P((e=>({...e,isPositioned:!1}))))}),[w]);const U=r.useRef(!1);f((()=>(U.current=!0,()=>{U.current=!1})),[]),f((()=>{if(C&&(A.current=C),j&&(D.current=j),C&&j){if(z.current)return z.current(C,j,F);F()}}),[C,j,F,z]);const V=r.useMemo((()=>({reference:A,floating:D,setReference:O,setFloating:k})),[O,k]),_=r.useMemo((()=>({reference:C,floating:j})),[C,j]),q=r.useMemo((()=>{const e={position:o,left:0,top:0};if(!_.floating)return e;const t=c(_.floating,h.x),r=c(_.floating,h.y);return g?{...e,transform:"translate("+t+"px, "+r+"px)",...a(_.floating)>=1.5&&{willChange:"transform"}}:{position:o,left:t,top:r}}),[o,g,_.floating,h.x,h.y]);return r.useMemo((()=>({...h,update:F,refs:V,elements:_,floatingStyles:q})),[h,F,V,_,q])}export{u as arrow,m as useFloating};

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

@@ -35,6 +35,2 @@ (function (global, factory) {
   const arrow = options => {
-    const {
-      element,
-      padding
-    } = options;
     function isRef(value) {
@@ -46,3 +42,7 @@ return {}.hasOwnProperty.call(value, 'current');
       options,
-      fn(args) {
+      fn(state) {
+        const {
+          element,
+          padding
+        } = typeof options === 'function' ? options(state) : options;
         if (element && isRef(element)) {
@@ -53,3 +53,3 @@ if (element.current != null) {
               padding
-            }).fn(args);
+            }).fn(state);
           }
@@ -61,3 +61,3 @@ return {};
             padding
-          }).fn(args);
+          }).fn(state);
         }
@@ -64,0 +64,0 @@ return {};

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 o(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 u=o(r),i=o(n);var f="undefined"!=typeof document?r.useLayoutEffect:r.useEffect;function c(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(!c(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(!{}.hasOwnProperty.call(t,o[n]))return!1;for(n=r;0!=n--;){const r=o[n];if(("_owner"!==r||!e.$$typeof)&&!c(e[r],t[r]))return!1}return!0}return e!=e&&t!=t}function a(e){if("undefined"==typeof window)return 1;return(e.ownerDocument.defaultView||window).devicePixelRatio||1}function l(e,t){const r=a(e);return Math.round(t*r)/r}function s(e){const t=u.useRef(e);return f((()=>{t.current=e})),t}Object.defineProperty(e,"autoPlacement",{enumerable:!0,get:function(){return t.autoPlacement}}),Object.defineProperty(e,"autoUpdate",{enumerable:!0,get:function(){return t.autoUpdate}}),Object.defineProperty(e,"computePosition",{enumerable:!0,get:function(){return t.computePosition}}),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,"getOverflowAncestors",{enumerable:!0,get:function(){return t.getOverflowAncestors}}),Object.defineProperty(e,"hide",{enumerable:!0,get:function(){return t.hide}}),Object.defineProperty(e,"inline",{enumerable:!0,get:function(){return t.inline}}),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,"platform",{enumerable:!0,get:function(){return t.platform}}),Object.defineProperty(e,"shift",{enumerable:!0,get:function(){return t.shift}}),Object.defineProperty(e,"size",{enumerable:!0,get:function(){return t.size}}),e.arrow=e=>{const{element:r,padding:n}=e;return{name:"arrow",options:e,fn(e){return r&&(o=r,{}.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){void 0===e&&(e={});const{placement:r="bottom",strategy:n="absolute",middleware:o=[],platform:d,elements:{reference:p,floating:m}={},transform:g=!0,whileElementsMounted:b,open:y}=e,[O,P]=u.useState({x:0,y:0,strategy:n,placement:r,middlewareData:{},isPositioned:!1}),[j,w]=u.useState(o);c(j,o)||w(o);const[h,v]=u.useState(null),[M,R]=u.useState(null),S=u.useCallback((e=>{e!=_.current&&(_.current=e,v(e))}),[v]),x=u.useCallback((e=>{e!==A.current&&(A.current=e,R(e))}),[R]),k=p||h,D=m||M,_=u.useRef(null),A=u.useRef(null),C=u.useRef(O),E=s(b),F=s(d),U=u.useCallback((()=>{if(!_.current||!A.current)return;const e={placement:r,strategy:n,middleware:j};F.current&&(e.platform=F.current),t.computePosition(_.current,A.current,e).then((e=>{const t={...e,isPositioned:!0};q.current&&!c(C.current,t)&&(C.current=t,i.flushSync((()=>{P(t)})))}))}),[j,r,n,F]);f((()=>{!1===y&&C.current.isPositioned&&(C.current.isPositioned=!1,P((e=>({...e,isPositioned:!1}))))}),[y]);const q=u.useRef(!1);f((()=>(q.current=!0,()=>{q.current=!1})),[]),f((()=>{if(k&&(_.current=k),D&&(A.current=D),k&&D){if(E.current)return E.current(k,D,U);U()}}),[k,D,U,E]);const z=u.useMemo((()=>({reference:_,floating:A,setReference:S,setFloating:x})),[S,x]),I=u.useMemo((()=>({reference:k,floating:D})),[k,D]),T=u.useMemo((()=>{const e={position:n,left:0,top:0};if(!I.floating)return e;const t=l(I.floating,O.x),r=l(I.floating,O.y);return g?{...e,transform:"translate("+t+"px, "+r+"px)",...a(I.floating)>=1.5&&{willChange:"transform"}}:{position:n,left:t,top:r}}),[n,g,I.floating,O.x,O.y]);return u.useMemo((()=>({...O,update:U,refs:z,elements:I,floatingStyles:T})),[O,U,z,I,T])},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,n,r){"use strict";function o(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}var u=o(n),i=o(r);var f="undefined"!=typeof document?n.useLayoutEffect:n.useEffect;function c(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 n,r,o;if(e&&t&&"object"==typeof e){if(Array.isArray(e)){if(n=e.length,n!=t.length)return!1;for(r=n;0!=r--;)if(!c(e[r],t[r]))return!1;return!0}if(o=Object.keys(e),n=o.length,n!==Object.keys(t).length)return!1;for(r=n;0!=r--;)if(!{}.hasOwnProperty.call(t,o[r]))return!1;for(r=n;0!=r--;){const n=o[r];if(("_owner"!==n||!e.$$typeof)&&!c(e[n],t[n]))return!1}return!0}return e!=e&&t!=t}function a(e){if("undefined"==typeof window)return 1;return(e.ownerDocument.defaultView||window).devicePixelRatio||1}function l(e,t){const n=a(e);return Math.round(t*n)/n}function s(e){const t=u.useRef(e);return f((()=>{t.current=e})),t}Object.defineProperty(e,"autoPlacement",{enumerable:!0,get:function(){return t.autoPlacement}}),Object.defineProperty(e,"autoUpdate",{enumerable:!0,get:function(){return t.autoUpdate}}),Object.defineProperty(e,"computePosition",{enumerable:!0,get:function(){return t.computePosition}}),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,"getOverflowAncestors",{enumerable:!0,get:function(){return t.getOverflowAncestors}}),Object.defineProperty(e,"hide",{enumerable:!0,get:function(){return t.hide}}),Object.defineProperty(e,"inline",{enumerable:!0,get:function(){return t.inline}}),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,"platform",{enumerable:!0,get:function(){return t.platform}}),Object.defineProperty(e,"shift",{enumerable:!0,get:function(){return t.shift}}),Object.defineProperty(e,"size",{enumerable:!0,get:function(){return t.size}}),e.arrow=e=>({name:"arrow",options:e,fn(n){const{element:r,padding:o}="function"==typeof e?e(n):e;return r&&(u=r,{}.hasOwnProperty.call(u,"current"))?null!=r.current?t.arrow({element:r.current,padding:o}).fn(n):{}:r?t.arrow({element:r,padding:o}).fn(n):{};var u}}),e.useFloating=function(e){void 0===e&&(e={});const{placement:n="bottom",strategy:r="absolute",middleware:o=[],platform:d,elements:{reference:p,floating:m}={},transform:g=!0,whileElementsMounted:b,open:y}=e,[O,P]=u.useState({x:0,y:0,strategy:r,placement:n,middlewareData:{},isPositioned:!1}),[j,w]=u.useState(o);c(j,o)||w(o);const[h,v]=u.useState(null),[M,R]=u.useState(null),S=u.useCallback((e=>{e!=_.current&&(_.current=e,v(e))}),[v]),x=u.useCallback((e=>{e!==A.current&&(A.current=e,R(e))}),[R]),k=p||h,D=m||M,_=u.useRef(null),A=u.useRef(null),C=u.useRef(O),E=s(b),F=s(d),U=u.useCallback((()=>{if(!_.current||!A.current)return;const e={placement:n,strategy:r,middleware:j};F.current&&(e.platform=F.current),t.computePosition(_.current,A.current,e).then((e=>{const t={...e,isPositioned:!0};q.current&&!c(C.current,t)&&(C.current=t,i.flushSync((()=>{P(t)})))}))}),[j,n,r,F]);f((()=>{!1===y&&C.current.isPositioned&&(C.current.isPositioned=!1,P((e=>({...e,isPositioned:!1}))))}),[y]);const q=u.useRef(!1);f((()=>(q.current=!0,()=>{q.current=!1})),[]),f((()=>{if(k&&(_.current=k),D&&(A.current=D),k&&D){if(E.current)return E.current(k,D,U);U()}}),[k,D,U,E]);const z=u.useMemo((()=>({reference:_,floating:A,setReference:S,setFloating:x})),[S,x]),I=u.useMemo((()=>({reference:k,floating:D})),[k,D]),T=u.useMemo((()=>{const e={position:r,left:0,top:0};if(!I.floating)return e;const t=l(I.floating,O.x),n=l(I.floating,O.y);return g?{...e,transform:"translate("+t+"px, "+n+"px)",...a(I.floating)>=1.5&&{willChange:"transform"}}:{position:r,left:t,top:n}}),[r,g,I.floating,O.x,O.y]);return u.useMemo((()=>({...O,update:U,refs:z,elements:I,floatingStyles:T})),[O,U,z,I,T])},Object.defineProperty(e,"__esModule",{value:!0})}));

package.json

 {
   "name": "@floating-ui/react-dom",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "@rollingversions": {
@@ -62,3 +62,3 @@ "baseVersion": [
   "dependencies": {
-    "@floating-ui/dom": "^1.2.7"
+    "@floating-ui/dom": "^1.3.0"
   },
@@ -65,0 +65,0 @@ "devDependencies": {

src/arrow.d.ts

@@ -1,6 +0,16 @@
-import type { Middleware, SideObject } from '@floating-ui/core';
+import type { Middleware, Padding } from '@floating-ui/core';
+import { MiddlewareState } from '@floating-ui/dom';
 import * as React from 'react';
 export interface Options {
+    /**
+     * The arrow element to be positioned.
+     * @default undefined
+     */
     element: React.MutableRefObject<Element | null> | Element | null;
-    padding?: number | SideObject;
+    /**
+     * The padding between the arrow element and the floating element edges.
+     * Useful when the floating element has rounded corners.
+     * @default 0
+     */
+    padding?: Padding;
 }
@@ -13,2 +23,2 @@ /**
  */
-export declare const arrow: (options: Options) => Middleware;
+export declare const arrow: (options: Options | ((state: MiddlewareState) => Options)) => Middleware;

src/types.d.ts

@@ -20,7 +20,25 @@ import type { ComputePositionConfig, ComputePositionReturn, VirtualElement } from '@floating-ui/dom';
     update: () => void;
+    /**
+     * Pre-configured positioning styles to apply to the floating element.
+     */
     floatingStyles: React.CSSProperties;
+    /**
+     * Object containing the reference and floating refs and reactive setters.
+     */
     refs: {
+        /**
+         * A React ref to the reference element.
+         */
         reference: React.MutableRefObject<RT | null>;
+        /**
+         * A React ref to the floating element.
+         */
         floating: React.MutableRefObject<HTMLElement | null>;
+        /**
+         * A callback to set the reference element (reactive).
+         */
         setReference: (node: RT | null) => void;
+        /**
+         * A callback to set the floating element (reactive).
+         */
         setFloating: (node: HTMLElement | null) => void;
@@ -34,2 +52,7 @@ };
 export type UseFloatingOptions<RT extends ReferenceType = ReferenceType> = Prettify<Partial<ComputePositionConfig> & {
+    /**
+     * A callback invoked when both the reference and floating elements are
+     * mounted, and cleaned up when either is unmounted. This is useful for
+     * setting up event listeners (e.g. pass `autoUpdate`).
+     */
     whileElementsMounted?: (reference: RT, floating: HTMLElement, update: () => void) => () => void;
@@ -40,4 +63,12 @@ elements?: {
     };
+    /**
+     * The `open` state of the floating element to synchronize with the
+     * `isPositioned` value.
+     */
     open?: boolean;
+    /**
+     * Whether to use `transform` for positioning instead of `top` and `left`
+     * (layout) in the `floatingStyles` object.
+     */
     transform?: boolean;
 }>;

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

40172

increased by4.06%

Lines of code

989

increased by4.32%

Dependency changes

• Updated@floating-ui/dom@^1.3.0