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

Comparing version 1.0.2-rc.1 to 1.1.0-rc.1

dist/index.d.ts

@@ -32,2 +32,3 @@ import * as React from "react";
     avoidCollisions?: boolean;
+    onPlaced?: () => void;
 }
@@ -34,0 +35,0 @@ export const PopperContent: React.ForwardRefExoticComponent<PopperContentProps & React.RefAttributes<HTMLDivElement>>;

dist/index.js

@@ -8,2 +8,3 @@ var $50Iv9$babelruntimehelpersextends = require("@babel/runtime/helpers/extends");
 var $50Iv9$radixuireactprimitive = require("@radix-ui/react-primitive");
+var $50Iv9$radixuireactusecallbackref = require("@radix-ui/react-use-callback-ref");
 var $50Iv9$radixuireactuselayouteffect = require("@radix-ui/react-use-layout-effect");
@@ -39,2 +40,3 @@ var $50Iv9$radixuireactusesize = require("@radix-ui/react-use-size");
 
+
 const $34310caa050a8d63$export$36f0086da09c4b9f = [
@@ -99,3 +101,3 @@ 'top',
     var _arrowSize$width, _arrowSize$height, _middlewareData$arrow, _middlewareData$arrow2, _middlewareData$arrow3, _middlewareData$hide, _middlewareData$trans, _middlewareData$trans2;
-    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 , ...contentProps } = props;
+    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;
     const context = $34310caa050a8d63$var$usePopperContext($34310caa050a8d63$var$CONTENT_NAME, __scopePopper);
@@ -133,2 +135,3 @@ const [content, setContent] = $50Iv9$react.useState(null);
         middleware: [
+            $34310caa050a8d63$var$anchorCssProperties(),
             $50Iv9$floatinguireactdom.offset({
@@ -151,2 +154,9 @@ mainAxis: sideOffset + arrowHeight,
             }) : undefined,
+            $50Iv9$floatinguireactdom.size({
+                ...detectOverflowOptions,
+                apply: ({ elements: elements , availableWidth: width , availableHeight: height  })=>{
+                    elements.floating.style.setProperty('--radix-popper-available-width', `${width}px`);
+                    elements.floating.style.setProperty('--radix-popper-available-height', `${height}px`);
+                }
+            }),
             $34310caa050a8d63$var$transformOrigin({
@@ -169,2 +179,9 @@ arrowWidth: arrowWidth,
     const [placedSide, placedAlign] = $34310caa050a8d63$var$getSideAndAlignFromPlacement(placement);
+    const handlePlaced = $50Iv9$radixuireactusecallbackref.useCallbackRef(onPlaced);
+    $50Iv9$radixuireactuselayouteffect.useLayoutEffect(()=>{
+        if (isPlaced) handlePlaced === null || handlePlaced === void 0 || handlePlaced();
+    }, [
+        isPlaced,
+        handlePlaced
+    ]);
     const arrowX = (_middlewareData$arrow = middlewareData.arrow) === null || _middlewareData$arrow === void 0 ? void 0 : _middlewareData$arrow.x;
@@ -196,3 +213,3 @@ const arrowY = (_middlewareData$arrow2 = middlewareData.arrow) === null || _middlewareData$arrow2 === void 0 ? void 0 : _middlewareData$arrow2.y;
     // https://github.com/floating-ui/floating-ui/issues/1531
-    $50Iv9$react.useLayoutEffect(()=>{
+    $50Iv9$radixuireactuselayouteffect.useLayoutEffect(()=>{
         if (isRoot && isPlaced) Array.from(positionUpdateFns).reverse().forEach((fn)=>requestAnimationFrame(fn)
@@ -308,2 +325,13 @@ );
 }
+const $34310caa050a8d63$var$anchorCssProperties = ()=>({
+        name: 'anchorCssProperties',
+        fn (data) {
+            const { rects: rects , elements: elements  } = data;
+            const { width: width , height: height  } = rects.reference;
+            elements.floating.style.setProperty('--radix-popper-anchor-width', `${width}px`);
+            elements.floating.style.setProperty('--radix-popper-anchor-height', `${height}px`);
+            return {};
+        }
+    })
+;
 const $34310caa050a8d63$var$transformOrigin = (options)=>({
@@ -310,0 +338,0 @@ name: 'transformOrigin',

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 {useFloating as $kY93V$useFloating, autoUpdate as $kY93V$autoUpdate, offset as $kY93V$offset, shift as $kY93V$shift, limitShift as $kY93V$limitShift, arrow as $kY93V$arrow, flip as $kY93V$flip, hide as $kY93V$hide} from "@floating-ui/react-dom";
+import {useFloating as $kY93V$useFloating, autoUpdate as $kY93V$autoUpdate, offset as $kY93V$offset, shift as $kY93V$shift, limitShift as $kY93V$limitShift, arrow as $kY93V$arrow, flip as $kY93V$flip, size as $kY93V$size, hide as $kY93V$hide} from "@floating-ui/react-dom";
 import {Root as $kY93V$Root} from "@radix-ui/react-arrow";
@@ -8,2 +8,3 @@ import {useComposedRefs as $kY93V$useComposedRefs} from "@radix-ui/react-compose-refs";
 import {Primitive as $kY93V$Primitive} from "@radix-ui/react-primitive";
+import {useCallbackRef as $kY93V$useCallbackRef} from "@radix-ui/react-use-callback-ref";
 import {useLayoutEffect as $kY93V$useLayoutEffect1} from "@radix-ui/react-use-layout-effect";
@@ -21,2 +22,3 @@ import {useSize as $kY93V$useSize} from "@radix-ui/react-use-size";
 
+
 const $cf1ac5d9fe0e8206$export$36f0086da09c4b9f = [
@@ -81,3 +83,3 @@ 'top',
     var _arrowSize$width, _arrowSize$height, _middlewareData$arrow, _middlewareData$arrow2, _middlewareData$arrow3, _middlewareData$hide, _middlewareData$trans, _middlewareData$trans2;
-    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 , ...contentProps } = props;
+    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;
     const context = $cf1ac5d9fe0e8206$var$usePopperContext($cf1ac5d9fe0e8206$var$CONTENT_NAME, __scopePopper);
@@ -115,2 +117,3 @@ const [content, setContent] = $kY93V$useState(null);
         middleware: [
+            $cf1ac5d9fe0e8206$var$anchorCssProperties(),
             $kY93V$offset({
@@ -133,2 +136,9 @@ mainAxis: sideOffset + arrowHeight,
             }) : undefined,
+            $kY93V$size({
+                ...detectOverflowOptions,
+                apply: ({ elements: elements , availableWidth: width , availableHeight: height  })=>{
+                    elements.floating.style.setProperty('--radix-popper-available-width', `${width}px`);
+                    elements.floating.style.setProperty('--radix-popper-available-height', `${height}px`);
+                }
+            }),
             $cf1ac5d9fe0e8206$var$transformOrigin({
@@ -151,2 +161,9 @@ arrowWidth: arrowWidth,
     const [placedSide, placedAlign] = $cf1ac5d9fe0e8206$var$getSideAndAlignFromPlacement(placement);
+    const handlePlaced = $kY93V$useCallbackRef(onPlaced);
+    $kY93V$useLayoutEffect1(()=>{
+        if (isPlaced) handlePlaced === null || handlePlaced === void 0 || handlePlaced();
+    }, [
+        isPlaced,
+        handlePlaced
+    ]);
     const arrowX = (_middlewareData$arrow = middlewareData.arrow) === null || _middlewareData$arrow === void 0 ? void 0 : _middlewareData$arrow.x;
@@ -178,3 +195,3 @@ const arrowY = (_middlewareData$arrow2 = middlewareData.arrow) === null || _middlewareData$arrow2 === void 0 ? void 0 : _middlewareData$arrow2.y;
     // https://github.com/floating-ui/floating-ui/issues/1531
-    $kY93V$useLayoutEffect(()=>{
+    $kY93V$useLayoutEffect1(()=>{
         if (isRoot && isPlaced) Array.from(positionUpdateFns).reverse().forEach((fn)=>requestAnimationFrame(fn)
@@ -290,2 +307,13 @@ );
 }
+const $cf1ac5d9fe0e8206$var$anchorCssProperties = ()=>({
+        name: 'anchorCssProperties',
+        fn (data) {
+            const { rects: rects , elements: elements  } = data;
+            const { width: width , height: height  } = rects.reference;
+            elements.floating.style.setProperty('--radix-popper-anchor-width', `${width}px`);
+            elements.floating.style.setProperty('--radix-popper-anchor-height', `${height}px`);
+            return {};
+        }
+    })
+;
 const $cf1ac5d9fe0e8206$var$transformOrigin = (options)=>({
@@ -292,0 +320,0 @@ name: 'transformOrigin',

package.json

 {
   "name": "@radix-ui/react-popper",
-  "version": "1.0.2-rc.1",
+  "version": "1.1.0-rc.1",
   "license": "MIT",
@@ -25,2 +25,3 @@ "source": "src/index.ts",
     "@radix-ui/react-primitive": "1.0.1",
+    "@radix-ui/react-use-callback-ref": "1.0.0",
     "@radix-ui/react-use-layout-effect": "1.0.0",
@@ -27,0 +28,0 @@ "@radix-ui/react-use-rect": "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

Improved metrics

Total package byte prevSize

112384

increased by7.31%

Lines of code

771

increased by7.68%

Worsened metrics

Dependency count

13

increased by8.33%

Dependency changes

• + Added@radix-ui/react-use-callback-ref@1.0.0

• + Added@radix-ui/react-use-callback-ref@1.0.0(transitive)