@radix-ui/react-popper - npm Package Compare versions

Comparing version 1.1.2-rc.9 to 1.1.2-rc.10

dist/index.js

@@ -93,8 +93,4 @@ var $50Iv9$babelruntimehelpersextends = require("@babel/runtime/helpers/extends");
 const [$34310caa050a8d63$var$PopperContentProvider, $34310caa050a8d63$var$useContentContext] = $34310caa050a8d63$var$createPopperContext($34310caa050a8d63$var$CONTENT_NAME);
-const [$34310caa050a8d63$var$PositionContextProvider, $34310caa050a8d63$var$usePositionContext] = $34310caa050a8d63$var$createPopperContext($34310caa050a8d63$var$CONTENT_NAME, {
-    hasParent: false,
-    positionUpdateFns: new Set()
-});
 const $34310caa050a8d63$export$bc4ae5855d3c4fc = /*#__PURE__*/ $50Iv9$react.forwardRef((props, forwardedRef)=>{
-    var _arrowSize$width, _arrowSize$height, _middlewareData$arrow, _middlewareData$arrow2, _middlewareData$arrow3, _middlewareData$hide, _middlewareData$trans, _middlewareData$trans2;
+    var _arrowSize$width, _arrowSize$height, _middlewareData$arrow, _middlewareData$arrow2, _middlewareData$arrow3, _middlewareData$trans, _middlewareData$trans2, _middlewareData$hide;
     const { __scopePopper: __scopePopper , side: side = 'bottom' , sideOffset: sideOffset = 0 , align: align = 'center' , alignOffset: alignOffset = 0 , arrowPadding: arrowPadding = 0 , collisionBoundary: collisionBoundary = [] , collisionPadding: collisionPaddingProp = 0 , sticky: sticky = 'partial' , hideWhenDetached: hideWhenDetached = false , avoidCollisions: avoidCollisions = true , onPlaced: onPlaced , ...contentProps } = props;
@@ -127,3 +123,3 @@ const context = $34310caa050a8d63$var$usePopperContext($34310caa050a8d63$var$CONTENT_NAME, __scopePopper);
     };
-    const { reference: reference , floating: floating , strategy: strategy , x: x , y: y , placement: placement , middlewareData: middlewareData , update: update  } = $50Iv9$floatinguireactdom.useFloating({
+    const { refs: refs , floatingStyles: floatingStyles , placement: placement , isPositioned: isPositioned , middlewareData: middlewareData  } = $50Iv9$floatinguireactdom.useFloating({
         // default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
@@ -133,2 +129,5 @@ strategy: 'fixed',
         whileElementsMounted: $50Iv9$floatinguireactdom.autoUpdate,
+        elements: {
+            reference: context.anchor
+        },
         middleware: [
@@ -139,3 +138,3 @@ $50Iv9$floatinguireactdom.offset({
             }),
-            avoidCollisions ? $50Iv9$floatinguireactdom.shift({
+            avoidCollisions && $50Iv9$floatinguireactdom.shift({
                 mainAxis: true,
@@ -145,6 +144,6 @@ crossAxis: false,
                 ...detectOverflowOptions
-            }) : undefined,
-            avoidCollisions ? $50Iv9$floatinguireactdom.flip({
+            }),
+            avoidCollisions && $50Iv9$floatinguireactdom.flip({
                 ...detectOverflowOptions
-            }) : undefined,
+            }),
             $50Iv9$floatinguireactdom.size({
@@ -161,6 +160,6 @@ ...detectOverflowOptions,
             }),
-            arrow ? $50Iv9$floatinguireactdom.arrow({
+            arrow && $50Iv9$floatinguireactdom.arrow({
                 element: arrow,
                 padding: arrowPadding
-            }) : undefined,
+            }),
             $34310caa050a8d63$var$transformOrigin({
@@ -170,20 +169,13 @@ arrowWidth: arrowWidth,
             }),
-            hideWhenDetached ? $50Iv9$floatinguireactdom.hide({
+            hideWhenDetached && $50Iv9$floatinguireactdom.hide({
                 strategy: 'referenceHidden'
-            }) : undefined
-        ].filter($34310caa050a8d63$var$isDefined)
-    }); // assign the reference dynamically once `Content` has mounted so we can collocate the logic
-    $50Iv9$radixuireactuselayouteffect.useLayoutEffect(()=>{
-        reference(context.anchor);
-    }, [
-        reference,
-        context.anchor
-    ]);
-    const isPlaced = x !== null && y !== null;
+            })
+        ]
+    });
     const [placedSide, placedAlign] = $34310caa050a8d63$var$getSideAndAlignFromPlacement(placement);
     const handlePlaced = $50Iv9$radixuireactusecallbackref.useCallbackRef(onPlaced);
     $50Iv9$radixuireactuselayouteffect.useLayoutEffect(()=>{
-        if (isPlaced) handlePlaced === null || handlePlaced === void 0 || handlePlaced();
+        if (isPositioned) handlePlaced === null || handlePlaced === void 0 || handlePlaced();
     }, [
-        isPlaced,
+        isPositioned,
         handlePlaced
@@ -200,49 +192,8 @@ ]);
     ]);
-    const { hasParent: hasParent , positionUpdateFns: positionUpdateFns  } = $34310caa050a8d63$var$usePositionContext($34310caa050a8d63$var$CONTENT_NAME, __scopePopper);
-    const isRoot = !hasParent;
-    $50Iv9$react.useLayoutEffect(()=>{
-        if (!isRoot) {
-            positionUpdateFns.add(update);
-            return ()=>{
-                positionUpdateFns.delete(update);
-            };
-        }
-    }, [
-        isRoot,
-        positionUpdateFns,
-        update
-    ]); // when nested contents are rendered in portals, they are appended out of order causing
-    // children to be positioned incorrectly if initially open.
-    // we need to re-compute the positioning once the parent has finally been placed.
-    // https://github.com/floating-ui/floating-ui/issues/1531
-    $50Iv9$radixuireactuselayouteffect.useLayoutEffect(()=>{
-        if (isRoot && isPlaced) Array.from(positionUpdateFns).reverse().forEach((fn)=>requestAnimationFrame(fn)
-        );
-    }, [
-        isRoot,
-        isPlaced,
-        positionUpdateFns
-    ]);
-    const commonProps = {
-        'data-side': placedSide,
-        'data-align': placedAlign,
-        ...contentProps,
-        ref: composedRefs,
-        style: {
-            ...contentProps.style,
-            // if the PopperContent hasn't been placed yet (not all measurements done)
-            // we prevent animations so that users's animation don't kick in too early referring wrong sides
-            animation: !isPlaced ? 'none' : undefined,
-            // hide the content if using the hide middleware and should be hidden
-            opacity: (_middlewareData$hide = middlewareData.hide) !== null && _middlewareData$hide !== void 0 && _middlewareData$hide.referenceHidden ? 0 : undefined
-        }
-    };
     return /*#__PURE__*/ $50Iv9$react.createElement("div", {
-        ref: floating,
+        ref: refs.setFloating,
         "data-radix-popper-content-wrapper": "",
         style: {
-            position: strategy,
-            left: 0,
-            top: 0,
-            transform: isPlaced ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)` : 'translate3d(0, -200%, 0)',
+            ...floatingStyles,
+            transform: isPositioned ? floatingStyles.transform : 'translate(0, -200%)',
             // keep off the page when measuring
@@ -265,7 +216,16 @@ minWidth: 'max-content',
         shouldHideArrow: cannotCenterArrow
-    }, isRoot ? /*#__PURE__*/ $50Iv9$react.createElement($34310caa050a8d63$var$PositionContextProvider, {
-        scope: __scopePopper,
-        hasParent: true,
-        positionUpdateFns: positionUpdateFns
-    }, /*#__PURE__*/ $50Iv9$react.createElement($50Iv9$radixuireactprimitive.Primitive.div, commonProps)) : /*#__PURE__*/ $50Iv9$react.createElement($50Iv9$radixuireactprimitive.Primitive.div, commonProps)));
+    }, /*#__PURE__*/ $50Iv9$react.createElement($50Iv9$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($50Iv9$babelruntimehelpersextends))({
+        "data-side": placedSide,
+        "data-align": placedAlign
+    }, contentProps, {
+        ref: composedRefs,
+        style: {
+            ...contentProps.style,
+            // if the PopperContent hasn't been placed yet (not all measurements done)
+            // we prevent animations so that users's animation don't kick in too early referring wrong sides
+            animation: !isPositioned ? 'none' : undefined,
+            // hide the content if using the hide middleware and should be hidden
+            opacity: (_middlewareData$hide = middlewareData.hide) !== null && _middlewareData$hide !== void 0 && _middlewareData$hide.referenceHidden ? 0 : undefined
+        }
+    }))));
 });
@@ -324,6 +284,3 @@ /*#__PURE__*/ Object.assign($34310caa050a8d63$export$bc4ae5855d3c4fc, {
 });
-/* -----------------------------------------------------------------------------------------------*/ function $34310caa050a8d63$var$isDefined(value) {
-    return value !== undefined;
-}
-function $34310caa050a8d63$var$isNotNull(value) {
+/* -----------------------------------------------------------------------------------------------*/ function $34310caa050a8d63$var$isNotNull(value) {
     return value !== null;
@@ -330,0 +287,0 @@ }

dist/index.module.js

 import $kY93V$babelruntimehelpersesmextends from "@babel/runtime/helpers/esm/extends";
-import {useState as $kY93V$useState, createElement as $kY93V$createElement, forwardRef as $kY93V$forwardRef, useRef as $kY93V$useRef, useEffect as $kY93V$useEffect, useLayoutEffect as $kY93V$useLayoutEffect} from "react";
+import {useState as $kY93V$useState, createElement as $kY93V$createElement, forwardRef as $kY93V$forwardRef, useRef as $kY93V$useRef, useEffect as $kY93V$useEffect} from "react";
 import {useFloating as $kY93V$useFloating, autoUpdate as $kY93V$autoUpdate, offset as $kY93V$offset, shift as $kY93V$shift, limitShift as $kY93V$limitShift, flip as $kY93V$flip, size as $kY93V$size, arrow as $kY93V$arrow, hide as $kY93V$hide} from "@floating-ui/react-dom";
@@ -9,3 +9,3 @@ import {Root as $kY93V$Root} from "@radix-ui/react-arrow";
 import {useCallbackRef as $kY93V$useCallbackRef} from "@radix-ui/react-use-callback-ref";
-import {useLayoutEffect as $kY93V$useLayoutEffect1} from "@radix-ui/react-use-layout-effect";
+import {useLayoutEffect as $kY93V$useLayoutEffect} from "@radix-ui/react-use-layout-effect";
 import {useSize as $kY93V$useSize} from "@radix-ui/react-use-size";
@@ -76,8 +76,4 @@
 const [$cf1ac5d9fe0e8206$var$PopperContentProvider, $cf1ac5d9fe0e8206$var$useContentContext] = $cf1ac5d9fe0e8206$var$createPopperContext($cf1ac5d9fe0e8206$var$CONTENT_NAME);
-const [$cf1ac5d9fe0e8206$var$PositionContextProvider, $cf1ac5d9fe0e8206$var$usePositionContext] = $cf1ac5d9fe0e8206$var$createPopperContext($cf1ac5d9fe0e8206$var$CONTENT_NAME, {
-    hasParent: false,
-    positionUpdateFns: new Set()
-});
 const $cf1ac5d9fe0e8206$export$bc4ae5855d3c4fc = /*#__PURE__*/ $kY93V$forwardRef((props, forwardedRef)=>{
-    var _arrowSize$width, _arrowSize$height, _middlewareData$arrow, _middlewareData$arrow2, _middlewareData$arrow3, _middlewareData$hide, _middlewareData$trans, _middlewareData$trans2;
+    var _arrowSize$width, _arrowSize$height, _middlewareData$arrow, _middlewareData$arrow2, _middlewareData$arrow3, _middlewareData$trans, _middlewareData$trans2, _middlewareData$hide;
     const { __scopePopper: __scopePopper , side: side = 'bottom' , sideOffset: sideOffset = 0 , align: align = 'center' , alignOffset: alignOffset = 0 , arrowPadding: arrowPadding = 0 , collisionBoundary: collisionBoundary = [] , collisionPadding: collisionPaddingProp = 0 , sticky: sticky = 'partial' , hideWhenDetached: hideWhenDetached = false , avoidCollisions: avoidCollisions = true , onPlaced: onPlaced , ...contentProps } = props;
@@ -110,3 +106,3 @@ const context = $cf1ac5d9fe0e8206$var$usePopperContext($cf1ac5d9fe0e8206$var$CONTENT_NAME, __scopePopper);
     };
-    const { reference: reference , floating: floating , strategy: strategy , x: x , y: y , placement: placement , middlewareData: middlewareData , update: update  } = $kY93V$useFloating({
+    const { refs: refs , floatingStyles: floatingStyles , placement: placement , isPositioned: isPositioned , middlewareData: middlewareData  } = $kY93V$useFloating({
         // default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
@@ -116,2 +112,5 @@ strategy: 'fixed',
         whileElementsMounted: $kY93V$autoUpdate,
+        elements: {
+            reference: context.anchor
+        },
         middleware: [
@@ -122,3 +121,3 @@ $kY93V$offset({
             }),
-            avoidCollisions ? $kY93V$shift({
+            avoidCollisions && $kY93V$shift({
                 mainAxis: true,
@@ -128,6 +127,6 @@ crossAxis: false,
                 ...detectOverflowOptions
-            }) : undefined,
-            avoidCollisions ? $kY93V$flip({
+            }),
+            avoidCollisions && $kY93V$flip({
                 ...detectOverflowOptions
-            }) : undefined,
+            }),
             $kY93V$size({
@@ -144,6 +143,6 @@ ...detectOverflowOptions,
             }),
-            arrow ? $kY93V$arrow({
+            arrow && $kY93V$arrow({
                 element: arrow,
                 padding: arrowPadding
-            }) : undefined,
+            }),
             $cf1ac5d9fe0e8206$var$transformOrigin({
@@ -153,20 +152,13 @@ arrowWidth: arrowWidth,
             }),
-            hideWhenDetached ? $kY93V$hide({
+            hideWhenDetached && $kY93V$hide({
                 strategy: 'referenceHidden'
-            }) : undefined
-        ].filter($cf1ac5d9fe0e8206$var$isDefined)
-    }); // assign the reference dynamically once `Content` has mounted so we can collocate the logic
-    $kY93V$useLayoutEffect1(()=>{
-        reference(context.anchor);
-    }, [
-        reference,
-        context.anchor
-    ]);
-    const isPlaced = x !== null && y !== null;
+            })
+        ]
+    });
     const [placedSide, placedAlign] = $cf1ac5d9fe0e8206$var$getSideAndAlignFromPlacement(placement);
     const handlePlaced = $kY93V$useCallbackRef(onPlaced);
-    $kY93V$useLayoutEffect1(()=>{
-        if (isPlaced) handlePlaced === null || handlePlaced === void 0 || handlePlaced();
+    $kY93V$useLayoutEffect(()=>{
+        if (isPositioned) handlePlaced === null || handlePlaced === void 0 || handlePlaced();
     }, [
-        isPlaced,
+        isPositioned,
         handlePlaced
@@ -178,3 +170,3 @@ ]);
     const [contentZIndex, setContentZIndex] = $kY93V$useState();
-    $kY93V$useLayoutEffect1(()=>{
+    $kY93V$useLayoutEffect(()=>{
         if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
@@ -184,49 +176,8 @@ }, [
     ]);
-    const { hasParent: hasParent , positionUpdateFns: positionUpdateFns  } = $cf1ac5d9fe0e8206$var$usePositionContext($cf1ac5d9fe0e8206$var$CONTENT_NAME, __scopePopper);
-    const isRoot = !hasParent;
-    $kY93V$useLayoutEffect(()=>{
-        if (!isRoot) {
-            positionUpdateFns.add(update);
-            return ()=>{
-                positionUpdateFns.delete(update);
-            };
-        }
-    }, [
-        isRoot,
-        positionUpdateFns,
-        update
-    ]); // when nested contents are rendered in portals, they are appended out of order causing
-    // children to be positioned incorrectly if initially open.
-    // we need to re-compute the positioning once the parent has finally been placed.
-    // https://github.com/floating-ui/floating-ui/issues/1531
-    $kY93V$useLayoutEffect1(()=>{
-        if (isRoot && isPlaced) Array.from(positionUpdateFns).reverse().forEach((fn)=>requestAnimationFrame(fn)
-        );
-    }, [
-        isRoot,
-        isPlaced,
-        positionUpdateFns
-    ]);
-    const commonProps = {
-        'data-side': placedSide,
-        'data-align': placedAlign,
-        ...contentProps,
-        ref: composedRefs,
-        style: {
-            ...contentProps.style,
-            // if the PopperContent hasn't been placed yet (not all measurements done)
-            // we prevent animations so that users's animation don't kick in too early referring wrong sides
-            animation: !isPlaced ? 'none' : undefined,
-            // hide the content if using the hide middleware and should be hidden
-            opacity: (_middlewareData$hide = middlewareData.hide) !== null && _middlewareData$hide !== void 0 && _middlewareData$hide.referenceHidden ? 0 : undefined
-        }
-    };
     return /*#__PURE__*/ $kY93V$createElement("div", {
-        ref: floating,
+        ref: refs.setFloating,
         "data-radix-popper-content-wrapper": "",
         style: {
-            position: strategy,
-            left: 0,
-            top: 0,
-            transform: isPlaced ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)` : 'translate3d(0, -200%, 0)',
+            ...floatingStyles,
+            transform: isPositioned ? floatingStyles.transform : 'translate(0, -200%)',
             // keep off the page when measuring
@@ -249,7 +200,16 @@ minWidth: 'max-content',
         shouldHideArrow: cannotCenterArrow
-    }, isRoot ? /*#__PURE__*/ $kY93V$createElement($cf1ac5d9fe0e8206$var$PositionContextProvider, {
-        scope: __scopePopper,
-        hasParent: true,
-        positionUpdateFns: positionUpdateFns
-    }, /*#__PURE__*/ $kY93V$createElement($kY93V$Primitive.div, commonProps)) : /*#__PURE__*/ $kY93V$createElement($kY93V$Primitive.div, commonProps)));
+    }, /*#__PURE__*/ $kY93V$createElement($kY93V$Primitive.div, $kY93V$babelruntimehelpersesmextends({
+        "data-side": placedSide,
+        "data-align": placedAlign
+    }, contentProps, {
+        ref: composedRefs,
+        style: {
+            ...contentProps.style,
+            // if the PopperContent hasn't been placed yet (not all measurements done)
+            // we prevent animations so that users's animation don't kick in too early referring wrong sides
+            animation: !isPositioned ? 'none' : undefined,
+            // hide the content if using the hide middleware and should be hidden
+            opacity: (_middlewareData$hide = middlewareData.hide) !== null && _middlewareData$hide !== void 0 && _middlewareData$hide.referenceHidden ? 0 : undefined
+        }
+    }))));
 });
@@ -308,6 +268,3 @@ /*#__PURE__*/ Object.assign($cf1ac5d9fe0e8206$export$bc4ae5855d3c4fc, {
 });
-/* -----------------------------------------------------------------------------------------------*/ function $cf1ac5d9fe0e8206$var$isDefined(value) {
-    return value !== undefined;
-}
-function $cf1ac5d9fe0e8206$var$isNotNull(value) {
+/* -----------------------------------------------------------------------------------------------*/ function $cf1ac5d9fe0e8206$var$isNotNull(value) {
     return value !== null;
@@ -314,0 +271,0 @@ }

package.json

 {
   "name": "@radix-ui/react-popper",
-  "version": "1.1.2-rc.9",
+  "version": "1.1.2-rc.10",
   "license": "MIT",
@@ -20,7 +20,7 @@ "source": "src/index.ts",
     "@babel/runtime": "^7.13.10",
-    "@floating-ui/react-dom": "0.7.2",
-    "@radix-ui/react-arrow": "1.0.3-rc.4",
+    "@floating-ui/react-dom": "^2.0.0",
+    "@radix-ui/react-arrow": "1.0.3-rc.5",
     "@radix-ui/react-compose-refs": "1.0.0",
     "@radix-ui/react-context": "1.0.0",
-    "@radix-ui/react-primitive": "1.0.3-rc.4",
+    "@radix-ui/react-primitive": "1.0.3-rc.5",
     "@radix-ui/react-use-callback-ref": "1.0.0",
@@ -27,0 +27,0 @@ "@radix-ui/react-use-layout-effect": "1.0.0",

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

Worsened metrics

Total package byte prevSize

100209

decreased by-10.04%

Lines of code

669

decreased by-11.39%

Dependency changes

• + Added@floating-ui/core@1.6.7(transitive)

• + Added@floating-ui/dom@1.6.10(transitive)

• + Added@floating-ui/react-dom@2.1.1(transitive)

• + Added@floating-ui/utils@0.2.7(transitive)

• + Added@radix-ui/react-arrow@1.0.3-rc.5(transitive)

• + Added@radix-ui/react-primitive@1.0.3-rc.5(transitive)

• + Added@radix-ui/react-slot@1.0.2-rc.5(transitive)

• - Removed@floating-ui/core@0.7.3(transitive)

• - Removed@floating-ui/dom@0.5.4(transitive)

• - Removed@floating-ui/react-dom@0.7.2(transitive)

• - Removed@radix-ui/react-arrow@1.0.3-rc.4(transitive)

• - Removed@radix-ui/react-primitive@1.0.3-rc.4(transitive)

• - Removed@radix-ui/react-slot@1.0.2-rc.4(transitive)

• - Removeduse-isomorphic-layout-effect@1.1.2(transitive)

• Updated@floating-ui/react-dom@^2.0.0

• Updated@radix-ui/react-arrow@1.0.3-rc.5

• Updated@radix-ui/react-primitive@1.0.3-rc.5