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

Comparing version 0.1.5-rc.44 to 0.1.5-rc.45

dist/index.d.ts

@@ -5,4 +5,7 @@ import * as React from "react";
 import { Primitive } from "@radix-ui/react-primitive";
-import { Side, Align } from "@radix-ui/popper";
 import { Measurable } from "@radix-ui/rect";
+export const SIDE_OPTIONS: readonly ["top", "right", "bottom", "left"];
+export const ALIGN_OPTIONS: readonly ["start", "center", "end"];
+type Side = typeof SIDE_OPTIONS[number];
+type Align = typeof ALIGN_OPTIONS[number];
 export const createPopperScope: import("@radix-ui/react-context").CreateScope;
@@ -23,3 +26,6 @@ export interface PopperProps {
     alignOffset?: number;
-    collisionTolerance?: number;
+    arrowPadding?: number;
+    collisionPadding?: number | Partial<Record<Side, number>>;
+    sticky?: 'partial' | 'always';
+    hideWhenDetached?: boolean;
     avoidCollisions?: boolean;
@@ -26,0 +32,0 @@ }

dist/index.js

 var $50Iv9$babelruntimehelpersextends = require("@babel/runtime/helpers/extends");
 var $50Iv9$react = require("react");
+var $50Iv9$floatinguireactdom = require("@floating-ui/react-dom");
 var $50Iv9$radixuireactarrow = require("@radix-ui/react-arrow");
 var $50Iv9$radixuireactcomposerefs = require("@radix-ui/react-compose-refs");
 var $50Iv9$radixuireactcontext = require("@radix-ui/react-context");
-var $50Iv9$radixuipopper = require("@radix-ui/popper");
 var $50Iv9$radixuireactprimitive = require("@radix-ui/react-primitive");
 var $50Iv9$radixuireactuselayouteffect = require("@radix-ui/react-use-layout-effect");
-var $50Iv9$radixuireactuserect = require("@radix-ui/react-use-rect");
 var $50Iv9$radixuireactusesize = require("@radix-ui/react-use-size");
@@ -28,2 +27,4 @@
 $parcel$export(module.exports, "Arrow", () => $34310caa050a8d63$export$21b07c8f274aebd5);
+$parcel$export(module.exports, "SIDE_OPTIONS", () => $34310caa050a8d63$export$36f0086da09c4b9f);
+$parcel$export(module.exports, "ALIGN_OPTIONS", () => $34310caa050a8d63$export$3671ffab7b302fc9);
 
@@ -38,3 +39,13 @@
 
-
+const $34310caa050a8d63$export$36f0086da09c4b9f = [
+    'top',
+    'right',
+    'bottom',
+    'left'
+];
+const $34310caa050a8d63$export$3671ffab7b302fc9 = [
+    'start',
+    'center',
+    'end'
+];
 /* -------------------------------------------------------------------------------------------------
@@ -82,34 +93,70 @@ * Popper
 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)=>{
-    const { __scopePopper: __scopePopper , side: side = 'bottom' , sideOffset: sideOffset , align: align = 'center' , alignOffset: alignOffset , collisionTolerance: collisionTolerance , avoidCollisions: avoidCollisions = true , ...contentProps } = props;
+    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 , collisionPadding: collisionPaddingProp = 0 , sticky: sticky = 'partial' , hideWhenDetached: hideWhenDetached = false , avoidCollisions: avoidCollisions = true , ...contentProps } = props;
     const context = $34310caa050a8d63$var$usePopperContext($34310caa050a8d63$var$CONTENT_NAME, __scopePopper);
-    const [arrowOffset, setArrowOffset] = $50Iv9$react.useState();
-    const anchorRect = $50Iv9$radixuireactuserect.useRect(context.anchor);
     const [content, setContent] = $50Iv9$react.useState(null);
-    const contentSize = $50Iv9$radixuireactusesize.useSize(content);
+    const composedRefs = $50Iv9$radixuireactcomposerefs.useComposedRefs(forwardedRef, (node)=>setContent(node)
+    );
     const [arrow, setArrow] = $50Iv9$react.useState(null);
     const arrowSize = $50Iv9$radixuireactusesize.useSize(arrow);
-    const composedRefs = $50Iv9$radixuireactcomposerefs.useComposedRefs(forwardedRef, (node)=>setContent(node)
-    );
-    const windowSize = $34310caa050a8d63$var$useWindowSize();
-    const collisionBoundariesRect = windowSize ? DOMRect.fromRect({
-        ...windowSize,
-        x: 0,
-        y: 0
-    }) : undefined;
-    const { popperStyles: popperStyles , arrowStyles: arrowStyles , placedSide: placedSide , placedAlign: placedAlign  } = $50Iv9$radixuipopper.getPlacementData({
-        anchorRect: anchorRect,
-        popperSize: contentSize,
-        arrowSize: arrowSize,
-        arrowOffset: // config
-        arrowOffset,
-        side: side,
-        sideOffset: sideOffset,
-        align: align,
-        alignOffset: alignOffset,
-        shouldAvoidCollisions: avoidCollisions,
-        collisionBoundariesRect: collisionBoundariesRect,
-        collisionTolerance: collisionTolerance
-    });
-    const isPlaced = placedSide !== undefined;
+    const arrowWidth = (_arrowSize$width = arrowSize === null || arrowSize === void 0 ? void 0 : arrowSize.width) !== null && _arrowSize$width !== void 0 ? _arrowSize$width : 0;
+    const arrowHeight = (_arrowSize$height = arrowSize === null || arrowSize === void 0 ? void 0 : arrowSize.height) !== null && _arrowSize$height !== void 0 ? _arrowSize$height : 0;
+    const desiredPlacement = side + (align !== 'center' ? '-' + align : '');
+    const collisionPadding = typeof collisionPaddingProp === 'number' ? collisionPaddingProp : {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        ...collisionPaddingProp
+    };
+    const { reference: reference , floating: floating , strategy: strategy , x: x , y: y , placement: placement , middlewareData: middlewareData , update: update  } = $50Iv9$floatinguireactdom.useFloating({
+        // default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
+        strategy: 'fixed',
+        placement: desiredPlacement,
+        whileElementsMounted: $50Iv9$floatinguireactdom.autoUpdate,
+        middleware: [
+            $50Iv9$floatinguireactdom.offset({
+                mainAxis: sideOffset + arrowHeight,
+                alignmentAxis: alignOffset
+            }),
+            avoidCollisions ? $50Iv9$floatinguireactdom.shift({
+                mainAxis: true,
+                crossAxis: false,
+                padding: collisionPadding,
+                limiter: sticky === 'partial' ? $50Iv9$floatinguireactdom.limitShift() : undefined,
+                altBoundary: true
+            }) : undefined,
+            arrow ? $50Iv9$floatinguireactdom.arrow({
+                element: arrow,
+                padding: arrowPadding
+            }) : undefined,
+            avoidCollisions ? $50Iv9$floatinguireactdom.flip({
+                padding: collisionPadding,
+                altBoundary: true
+            }) : undefined,
+            $34310caa050a8d63$var$transformOrigin({
+                arrowWidth: arrowWidth,
+                arrowHeight: arrowHeight
+            }),
+            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 arrowX = (_middlewareData$arrow = middlewareData.arrow) === null || _middlewareData$arrow === void 0 ? void 0 : _middlewareData$arrow.x;
+    const arrowY = (_middlewareData$arrow2 = middlewareData.arrow) === null || _middlewareData$arrow2 === void 0 ? void 0 : _middlewareData$arrow2.y;
+    const cannotCenterArrow = ((_middlewareData$arrow3 = middlewareData.arrow) === null || _middlewareData$arrow3 === void 0 ? void 0 : _middlewareData$arrow3.centerOffset) !== 0;
     const [contentZIndex, setContentZIndex] = $50Iv9$react.useState();
@@ -121,17 +168,31 @@ $50Iv9$radixuireactuselayouteffect.useLayoutEffect(()=>{
     ]);
-    return /*#__PURE__*/ $50Iv9$react.createElement("div", {
-        style: {
-            ...popperStyles,
-            zIndex: contentZIndex
-        },
-        "data-radix-popper-content-wrapper": ""
-    }, /*#__PURE__*/ $50Iv9$react.createElement($34310caa050a8d63$var$PopperContentProvider, {
-        scope: __scopePopper,
-        arrowStyles: arrowStyles,
-        onArrowChange: setArrow,
-        onArrowOffsetChange: setArrowOffset
-    }, /*#__PURE__*/ $50Iv9$react.createElement($50Iv9$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($50Iv9$babelruntimehelpersextends))({
-        "data-side": placedSide,
-        "data-align": placedAlign
-    }, contentProps, {
+    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$react.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,
@@ -142,5 +203,35 @@ style: {
             // we prevent animations so that users's animation don't kick in too early referring wrong sides
-            animation: !isPlaced ? 'none' : undefined
+            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,
+        "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)',
+            // keep off the page when measuring
+            minWidth: 'max-content',
+            zIndex: contentZIndex,
+            ['--radix-popper-transform-origin']: [
+                (_middlewareData$trans = middlewareData.transformOrigin) === null || _middlewareData$trans === void 0 ? void 0 : _middlewareData$trans.x,
+                (_middlewareData$trans2 = middlewareData.transformOrigin) === null || _middlewareData$trans2 === void 0 ? void 0 : _middlewareData$trans2.y
+            ].join(' ')
+        }
+    }, /*#__PURE__*/ $50Iv9$react.createElement($34310caa050a8d63$var$PopperContentProvider, {
+        scope: __scopePopper,
+        placedSide: placedSide,
+        onArrowChange: setArrow,
+        arrowX: arrowX,
+        arrowY: arrowY,
+        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)));
 });
@@ -153,26 +244,36 @@ /*#__PURE__*/ Object.assign($34310caa050a8d63$export$bc4ae5855d3c4fc, {
  * -----------------------------------------------------------------------------------------------*/ const $34310caa050a8d63$var$ARROW_NAME = 'PopperArrow';
+const $34310caa050a8d63$var$OPPOSITE_SIDE = {
+    top: 'bottom',
+    right: 'left',
+    bottom: 'top',
+    left: 'right'
+};
 const $34310caa050a8d63$export$79d62cd4e10a3fd0 = /*#__PURE__*/ $50Iv9$react.forwardRef(function $34310caa050a8d63$export$79d62cd4e10a3fd0(props, forwardedRef) {
     const { __scopePopper: __scopePopper , offset: offset , ...arrowProps } = props;
-    const context = $34310caa050a8d63$var$useContentContext($34310caa050a8d63$var$ARROW_NAME, __scopePopper);
-    const { onArrowOffsetChange: onArrowOffsetChange  } = context; // send the Arrow's offset up to Popper
-    $50Iv9$react.useEffect(()=>onArrowOffsetChange(offset)
-    , [
-        onArrowOffsetChange,
-        offset
-    ]);
-    return /*#__PURE__*/ $50Iv9$react.createElement("span", {
+    const contentContext = $34310caa050a8d63$var$useContentContext($34310caa050a8d63$var$ARROW_NAME, __scopePopper);
+    const baseSide = $34310caa050a8d63$var$OPPOSITE_SIDE[contentContext.placedSide];
+    return(/*#__PURE__*/ // we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)
+    // doesn't report size as we'd expect on SVG elements.
+    // it reports their bounding box which is effectively the largest path inside the SVG.
+    $50Iv9$react.createElement("span", {
+        ref: contentContext.onArrowChange,
         style: {
-            ...context.arrowStyles,
-            pointerEvents: 'none'
+            position: 'absolute',
+            left: contentContext.arrowX,
+            top: contentContext.arrowY,
+            [baseSide]: 0,
+            transformOrigin: {
+                top: '',
+                right: '0 0',
+                bottom: 'center 0',
+                left: '100% 0'
+            }[contentContext.placedSide],
+            transform: {
+                top: 'translateY(100%)',
+                right: 'translateY(50%) rotate(90deg) translateX(-50%)',
+                bottom: `rotate(180deg)`,
+                left: 'translateY(50%) rotate(-90deg) translateX(50%)'
+            }[contentContext.placedSide],
+            visibility: contentContext.shouldHideArrow ? 'hidden' : undefined
         }
-    }, /*#__PURE__*/ $50Iv9$react.createElement("span", {
-        // we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)
-        // doesn't report size as we'd expect on SVG elements.
-        // it reports their bounding box which is effectively the largest path inside the SVG.
-        ref: context.onArrowChange,
-        style: {
-            display: 'inline-block',
-            verticalAlign: 'top',
-            pointerEvents: 'auto'
-        }
     }, /*#__PURE__*/ $50Iv9$react.createElement($50Iv9$radixuireactarrow.Root, ($parcel$interopDefault($50Iv9$babelruntimehelpersextends))({}, arrowProps, {
@@ -190,23 +291,53 @@ ref: forwardedRef,
 });
-/* -----------------------------------------------------------------------------------------------*/ const $34310caa050a8d63$var$WINDOW_RESIZE_DEBOUNCE_WAIT_IN_MS = 100;
-function $34310caa050a8d63$var$useWindowSize() {
-    const [windowSize, setWindowSize] = $50Iv9$react.useState(undefined);
-    $50Iv9$react.useEffect(()=>{
-        let debounceTimerId;
-        function updateWindowSize() {
-            setWindowSize({
-                width: window.innerWidth,
-                height: window.innerHeight
-            });
+/* -----------------------------------------------------------------------------------------------*/ function $34310caa050a8d63$var$isDefined(value) {
+    return value !== undefined;
+}
+const $34310caa050a8d63$var$transformOrigin = (options)=>({
+        name: 'transformOrigin',
+        options: options,
+        fn (data) {
+            var _middlewareData$arrow4, _middlewareData$arrow5, _middlewareData$arrow6, _middlewareData$arrow7, _middlewareData$arrow8;
+            const { placement: placement , rects: rects , middlewareData: middlewareData  } = data;
+            const cannotCenterArrow = ((_middlewareData$arrow4 = middlewareData.arrow) === null || _middlewareData$arrow4 === void 0 ? void 0 : _middlewareData$arrow4.centerOffset) !== 0;
+            const isArrowHidden = cannotCenterArrow;
+            const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
+            const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
+            const [placedSide, placedAlign] = $34310caa050a8d63$var$getSideAndAlignFromPlacement(placement);
+            const noArrowAlign = {
+                start: '0%',
+                center: '50%',
+                end: '100%'
+            }[placedAlign];
+            const arrowXCenter = ((_middlewareData$arrow5 = (_middlewareData$arrow6 = middlewareData.arrow) === null || _middlewareData$arrow6 === void 0 ? void 0 : _middlewareData$arrow6.x) !== null && _middlewareData$arrow5 !== void 0 ? _middlewareData$arrow5 : 0) + arrowWidth / 2;
+            const arrowYCenter = ((_middlewareData$arrow7 = (_middlewareData$arrow8 = middlewareData.arrow) === null || _middlewareData$arrow8 === void 0 ? void 0 : _middlewareData$arrow8.y) !== null && _middlewareData$arrow7 !== void 0 ? _middlewareData$arrow7 : 0) + arrowHeight / 2;
+            let x = '';
+            let y = '';
+            if (placedSide === 'bottom') {
+                x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
+                y = `${-arrowHeight}px`;
+            } else if (placedSide === 'top') {
+                x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
+                y = `${rects.floating.height + arrowHeight}px`;
+            } else if (placedSide === 'right') {
+                x = `${-arrowHeight}px`;
+                y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
+            } else if (placedSide === 'left') {
+                x = `${rects.floating.width + arrowHeight}px`;
+                y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
+            }
+            return {
+                data: {
+                    x: x,
+                    y: y
+                }
+            };
         }
-        function handleResize() {
-            window.clearTimeout(debounceTimerId);
-            debounceTimerId = window.setTimeout(updateWindowSize, $34310caa050a8d63$var$WINDOW_RESIZE_DEBOUNCE_WAIT_IN_MS);
-        }
-        updateWindowSize();
-        window.addEventListener('resize', handleResize);
-        return ()=>window.removeEventListener('resize', handleResize)
-        ;
-    }, []);
-    return windowSize;
+    })
+;
+function $34310caa050a8d63$var$getSideAndAlignFromPlacement(placement) {
+    const [side, align = 'center'] = placement.split('-');
+    return [
+        side,
+        align
+    ];
 }
@@ -213,0 +344,0 @@ const $34310caa050a8d63$export$be92b6f5f03c0fe9 = $34310caa050a8d63$export$badac9ada3a0bdf9;

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} from "react";
+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 {Root as $kY93V$Root} from "@radix-ui/react-arrow";
 import {useComposedRefs as $kY93V$useComposedRefs} from "@radix-ui/react-compose-refs";
 import {createContextScope as $kY93V$createContextScope} from "@radix-ui/react-context";
-import {getPlacementData as $kY93V$getPlacementData} from "@radix-ui/popper";
 import {Primitive as $kY93V$Primitive} from "@radix-ui/react-primitive";
-import {useLayoutEffect as $kY93V$useLayoutEffect} from "@radix-ui/react-use-layout-effect";
-import {useRect as $kY93V$useRect} from "@radix-ui/react-use-rect";
+import {useLayoutEffect as $kY93V$useLayoutEffect1} from "@radix-ui/react-use-layout-effect";
 import {useSize as $kY93V$useSize} from "@radix-ui/react-use-size";
@@ -21,3 +20,13 @@
 
-
+const $cf1ac5d9fe0e8206$export$36f0086da09c4b9f = [
+    'top',
+    'right',
+    'bottom',
+    'left'
+];
+const $cf1ac5d9fe0e8206$export$3671ffab7b302fc9 = [
+    'start',
+    'center',
+    'end'
+];
 /* -------------------------------------------------------------------------------------------------
@@ -65,36 +74,72 @@ * Popper
 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)=>{
-    const { __scopePopper: __scopePopper , side: side = 'bottom' , sideOffset: sideOffset , align: align = 'center' , alignOffset: alignOffset , collisionTolerance: collisionTolerance , avoidCollisions: avoidCollisions = true , ...contentProps } = props;
+    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 , collisionPadding: collisionPaddingProp = 0 , sticky: sticky = 'partial' , hideWhenDetached: hideWhenDetached = false , avoidCollisions: avoidCollisions = true , ...contentProps } = props;
     const context = $cf1ac5d9fe0e8206$var$usePopperContext($cf1ac5d9fe0e8206$var$CONTENT_NAME, __scopePopper);
-    const [arrowOffset, setArrowOffset] = $kY93V$useState();
-    const anchorRect = $kY93V$useRect(context.anchor);
     const [content, setContent] = $kY93V$useState(null);
-    const contentSize = $kY93V$useSize(content);
+    const composedRefs = $kY93V$useComposedRefs(forwardedRef, (node)=>setContent(node)
+    );
     const [arrow, setArrow] = $kY93V$useState(null);
     const arrowSize = $kY93V$useSize(arrow);
-    const composedRefs = $kY93V$useComposedRefs(forwardedRef, (node)=>setContent(node)
-    );
-    const windowSize = $cf1ac5d9fe0e8206$var$useWindowSize();
-    const collisionBoundariesRect = windowSize ? DOMRect.fromRect({
-        ...windowSize,
-        x: 0,
-        y: 0
-    }) : undefined;
-    const { popperStyles: popperStyles , arrowStyles: arrowStyles , placedSide: placedSide , placedAlign: placedAlign  } = $kY93V$getPlacementData({
-        anchorRect: anchorRect,
-        popperSize: contentSize,
-        arrowSize: arrowSize,
-        arrowOffset: // config
-        arrowOffset,
-        side: side,
-        sideOffset: sideOffset,
-        align: align,
-        alignOffset: alignOffset,
-        shouldAvoidCollisions: avoidCollisions,
-        collisionBoundariesRect: collisionBoundariesRect,
-        collisionTolerance: collisionTolerance
-    });
-    const isPlaced = placedSide !== undefined;
+    const arrowWidth = (_arrowSize$width = arrowSize === null || arrowSize === void 0 ? void 0 : arrowSize.width) !== null && _arrowSize$width !== void 0 ? _arrowSize$width : 0;
+    const arrowHeight = (_arrowSize$height = arrowSize === null || arrowSize === void 0 ? void 0 : arrowSize.height) !== null && _arrowSize$height !== void 0 ? _arrowSize$height : 0;
+    const desiredPlacement = side + (align !== 'center' ? '-' + align : '');
+    const collisionPadding = typeof collisionPaddingProp === 'number' ? collisionPaddingProp : {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        ...collisionPaddingProp
+    };
+    const { reference: reference , floating: floating , strategy: strategy , x: x , y: y , placement: placement , middlewareData: middlewareData , update: update  } = $kY93V$useFloating({
+        // default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
+        strategy: 'fixed',
+        placement: desiredPlacement,
+        whileElementsMounted: $kY93V$autoUpdate,
+        middleware: [
+            $kY93V$offset({
+                mainAxis: sideOffset + arrowHeight,
+                alignmentAxis: alignOffset
+            }),
+            avoidCollisions ? $kY93V$shift({
+                mainAxis: true,
+                crossAxis: false,
+                padding: collisionPadding,
+                limiter: sticky === 'partial' ? $kY93V$limitShift() : undefined,
+                altBoundary: true
+            }) : undefined,
+            arrow ? $kY93V$arrow({
+                element: arrow,
+                padding: arrowPadding
+            }) : undefined,
+            avoidCollisions ? $kY93V$flip({
+                padding: collisionPadding,
+                altBoundary: true
+            }) : undefined,
+            $cf1ac5d9fe0e8206$var$transformOrigin({
+                arrowWidth: arrowWidth,
+                arrowHeight: arrowHeight
+            }),
+            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 arrowX = (_middlewareData$arrow = middlewareData.arrow) === null || _middlewareData$arrow === void 0 ? void 0 : _middlewareData$arrow.x;
+    const arrowY = (_middlewareData$arrow2 = middlewareData.arrow) === null || _middlewareData$arrow2 === void 0 ? void 0 : _middlewareData$arrow2.y;
+    const cannotCenterArrow = ((_middlewareData$arrow3 = middlewareData.arrow) === null || _middlewareData$arrow3 === void 0 ? void 0 : _middlewareData$arrow3.centerOffset) !== 0;
     const [contentZIndex, setContentZIndex] = $kY93V$useState();
-    $kY93V$useLayoutEffect(()=>{
+    $kY93V$useLayoutEffect1(()=>{
         if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
@@ -104,17 +149,31 @@ }, [
     ]);
-    return /*#__PURE__*/ $kY93V$createElement("div", {
-        style: {
-            ...popperStyles,
-            zIndex: contentZIndex
-        },
-        "data-radix-popper-content-wrapper": ""
-    }, /*#__PURE__*/ $kY93V$createElement($cf1ac5d9fe0e8206$var$PopperContentProvider, {
-        scope: __scopePopper,
-        arrowStyles: arrowStyles,
-        onArrowChange: setArrow,
-        onArrowOffsetChange: setArrowOffset
-    }, /*#__PURE__*/ $kY93V$createElement($kY93V$Primitive.div, $kY93V$babelruntimehelpersesmextends({
-        "data-side": placedSide,
-        "data-align": placedAlign
-    }, contentProps, {
+    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$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,
@@ -125,5 +184,35 @@ style: {
             // we prevent animations so that users's animation don't kick in too early referring wrong sides
-            animation: !isPlaced ? 'none' : undefined
+            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,
+        "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)',
+            // keep off the page when measuring
+            minWidth: 'max-content',
+            zIndex: contentZIndex,
+            ['--radix-popper-transform-origin']: [
+                (_middlewareData$trans = middlewareData.transformOrigin) === null || _middlewareData$trans === void 0 ? void 0 : _middlewareData$trans.x,
+                (_middlewareData$trans2 = middlewareData.transformOrigin) === null || _middlewareData$trans2 === void 0 ? void 0 : _middlewareData$trans2.y
+            ].join(' ')
+        }
+    }, /*#__PURE__*/ $kY93V$createElement($cf1ac5d9fe0e8206$var$PopperContentProvider, {
+        scope: __scopePopper,
+        placedSide: placedSide,
+        onArrowChange: setArrow,
+        arrowX: arrowX,
+        arrowY: arrowY,
+        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)));
 });
@@ -136,26 +225,36 @@ /*#__PURE__*/ Object.assign($cf1ac5d9fe0e8206$export$bc4ae5855d3c4fc, {
  * -----------------------------------------------------------------------------------------------*/ const $cf1ac5d9fe0e8206$var$ARROW_NAME = 'PopperArrow';
+const $cf1ac5d9fe0e8206$var$OPPOSITE_SIDE = {
+    top: 'bottom',
+    right: 'left',
+    bottom: 'top',
+    left: 'right'
+};
 const $cf1ac5d9fe0e8206$export$79d62cd4e10a3fd0 = /*#__PURE__*/ $kY93V$forwardRef(function $cf1ac5d9fe0e8206$export$79d62cd4e10a3fd0(props, forwardedRef) {
     const { __scopePopper: __scopePopper , offset: offset , ...arrowProps } = props;
-    const context = $cf1ac5d9fe0e8206$var$useContentContext($cf1ac5d9fe0e8206$var$ARROW_NAME, __scopePopper);
-    const { onArrowOffsetChange: onArrowOffsetChange  } = context; // send the Arrow's offset up to Popper
-    $kY93V$useEffect(()=>onArrowOffsetChange(offset)
-    , [
-        onArrowOffsetChange,
-        offset
-    ]);
-    return /*#__PURE__*/ $kY93V$createElement("span", {
+    const contentContext = $cf1ac5d9fe0e8206$var$useContentContext($cf1ac5d9fe0e8206$var$ARROW_NAME, __scopePopper);
+    const baseSide = $cf1ac5d9fe0e8206$var$OPPOSITE_SIDE[contentContext.placedSide];
+    return(/*#__PURE__*/ // we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)
+    // doesn't report size as we'd expect on SVG elements.
+    // it reports their bounding box which is effectively the largest path inside the SVG.
+    $kY93V$createElement("span", {
+        ref: contentContext.onArrowChange,
         style: {
-            ...context.arrowStyles,
-            pointerEvents: 'none'
+            position: 'absolute',
+            left: contentContext.arrowX,
+            top: contentContext.arrowY,
+            [baseSide]: 0,
+            transformOrigin: {
+                top: '',
+                right: '0 0',
+                bottom: 'center 0',
+                left: '100% 0'
+            }[contentContext.placedSide],
+            transform: {
+                top: 'translateY(100%)',
+                right: 'translateY(50%) rotate(90deg) translateX(-50%)',
+                bottom: `rotate(180deg)`,
+                left: 'translateY(50%) rotate(-90deg) translateX(50%)'
+            }[contentContext.placedSide],
+            visibility: contentContext.shouldHideArrow ? 'hidden' : undefined
         }
-    }, /*#__PURE__*/ $kY93V$createElement("span", {
-        // we have to use an extra wrapper because `ResizeObserver` (used by `useSize`)
-        // doesn't report size as we'd expect on SVG elements.
-        // it reports their bounding box which is effectively the largest path inside the SVG.
-        ref: context.onArrowChange,
-        style: {
-            display: 'inline-block',
-            verticalAlign: 'top',
-            pointerEvents: 'auto'
-        }
     }, /*#__PURE__*/ $kY93V$createElement($kY93V$Root, $kY93V$babelruntimehelpersesmextends({}, arrowProps, {
@@ -173,23 +272,53 @@ ref: forwardedRef,
 });
-/* -----------------------------------------------------------------------------------------------*/ const $cf1ac5d9fe0e8206$var$WINDOW_RESIZE_DEBOUNCE_WAIT_IN_MS = 100;
-function $cf1ac5d9fe0e8206$var$useWindowSize() {
-    const [windowSize, setWindowSize] = $kY93V$useState(undefined);
-    $kY93V$useEffect(()=>{
-        let debounceTimerId;
-        function updateWindowSize() {
-            setWindowSize({
-                width: window.innerWidth,
-                height: window.innerHeight
-            });
+/* -----------------------------------------------------------------------------------------------*/ function $cf1ac5d9fe0e8206$var$isDefined(value) {
+    return value !== undefined;
+}
+const $cf1ac5d9fe0e8206$var$transformOrigin = (options)=>({
+        name: 'transformOrigin',
+        options: options,
+        fn (data) {
+            var _middlewareData$arrow4, _middlewareData$arrow5, _middlewareData$arrow6, _middlewareData$arrow7, _middlewareData$arrow8;
+            const { placement: placement , rects: rects , middlewareData: middlewareData  } = data;
+            const cannotCenterArrow = ((_middlewareData$arrow4 = middlewareData.arrow) === null || _middlewareData$arrow4 === void 0 ? void 0 : _middlewareData$arrow4.centerOffset) !== 0;
+            const isArrowHidden = cannotCenterArrow;
+            const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
+            const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
+            const [placedSide, placedAlign] = $cf1ac5d9fe0e8206$var$getSideAndAlignFromPlacement(placement);
+            const noArrowAlign = {
+                start: '0%',
+                center: '50%',
+                end: '100%'
+            }[placedAlign];
+            const arrowXCenter = ((_middlewareData$arrow5 = (_middlewareData$arrow6 = middlewareData.arrow) === null || _middlewareData$arrow6 === void 0 ? void 0 : _middlewareData$arrow6.x) !== null && _middlewareData$arrow5 !== void 0 ? _middlewareData$arrow5 : 0) + arrowWidth / 2;
+            const arrowYCenter = ((_middlewareData$arrow7 = (_middlewareData$arrow8 = middlewareData.arrow) === null || _middlewareData$arrow8 === void 0 ? void 0 : _middlewareData$arrow8.y) !== null && _middlewareData$arrow7 !== void 0 ? _middlewareData$arrow7 : 0) + arrowHeight / 2;
+            let x = '';
+            let y = '';
+            if (placedSide === 'bottom') {
+                x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
+                y = `${-arrowHeight}px`;
+            } else if (placedSide === 'top') {
+                x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
+                y = `${rects.floating.height + arrowHeight}px`;
+            } else if (placedSide === 'right') {
+                x = `${-arrowHeight}px`;
+                y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
+            } else if (placedSide === 'left') {
+                x = `${rects.floating.width + arrowHeight}px`;
+                y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
+            }
+            return {
+                data: {
+                    x: x,
+                    y: y
+                }
+            };
         }
-        function handleResize() {
-            window.clearTimeout(debounceTimerId);
-            debounceTimerId = window.setTimeout(updateWindowSize, $cf1ac5d9fe0e8206$var$WINDOW_RESIZE_DEBOUNCE_WAIT_IN_MS);
-        }
-        updateWindowSize();
-        window.addEventListener('resize', handleResize);
-        return ()=>window.removeEventListener('resize', handleResize)
-        ;
-    }, []);
-    return windowSize;
+    })
+;
+function $cf1ac5d9fe0e8206$var$getSideAndAlignFromPlacement(placement) {
+    const [side, align = 'center'] = placement.split('-');
+    return [
+        side,
+        align
+    ];
 }
@@ -204,3 +333,3 @@ const $cf1ac5d9fe0e8206$export$be92b6f5f03c0fe9 = $cf1ac5d9fe0e8206$export$badac9ada3a0bdf9;
 
-export {$cf1ac5d9fe0e8206$export$722aac194ae923 as createPopperScope, $cf1ac5d9fe0e8206$export$badac9ada3a0bdf9 as Popper, $cf1ac5d9fe0e8206$export$ecd4e1ccab6ed6d as PopperAnchor, $cf1ac5d9fe0e8206$export$bc4ae5855d3c4fc as PopperContent, $cf1ac5d9fe0e8206$export$79d62cd4e10a3fd0 as PopperArrow, $cf1ac5d9fe0e8206$export$be92b6f5f03c0fe9 as Root, $cf1ac5d9fe0e8206$export$b688253958b8dfe7 as Anchor, $cf1ac5d9fe0e8206$export$7c6e2c02157bb7d2 as Content, $cf1ac5d9fe0e8206$export$21b07c8f274aebd5 as Arrow};
+export {$cf1ac5d9fe0e8206$export$722aac194ae923 as createPopperScope, $cf1ac5d9fe0e8206$export$badac9ada3a0bdf9 as Popper, $cf1ac5d9fe0e8206$export$ecd4e1ccab6ed6d as PopperAnchor, $cf1ac5d9fe0e8206$export$bc4ae5855d3c4fc as PopperContent, $cf1ac5d9fe0e8206$export$79d62cd4e10a3fd0 as PopperArrow, $cf1ac5d9fe0e8206$export$be92b6f5f03c0fe9 as Root, $cf1ac5d9fe0e8206$export$b688253958b8dfe7 as Anchor, $cf1ac5d9fe0e8206$export$7c6e2c02157bb7d2 as Content, $cf1ac5d9fe0e8206$export$21b07c8f274aebd5 as Arrow, $cf1ac5d9fe0e8206$export$36f0086da09c4b9f as SIDE_OPTIONS, $cf1ac5d9fe0e8206$export$3671ffab7b302fc9 as ALIGN_OPTIONS};
 //# sourceMappingURL=index.module.js.map

package.json

 {
   "name": "@radix-ui/react-popper",
-  "version": "0.1.5-rc.44",
+  "version": "0.1.5-rc.45",
   "license": "MIT",
@@ -20,11 +20,11 @@ "source": "src/index.ts",
     "@babel/runtime": "^7.13.10",
-    "@radix-ui/popper": "0.1.1-rc.4",
-    "@radix-ui/react-arrow": "0.1.5-rc.44",
-    "@radix-ui/react-compose-refs": "0.1.1-rc.44",
-    "@radix-ui/react-context": "0.1.2-rc.44",
-    "@radix-ui/react-primitive": "0.1.5-rc.44",
-    "@radix-ui/react-use-layout-effect": "0.1.1-rc.44",
-    "@radix-ui/react-use-rect": "0.1.2-rc.44",
-    "@radix-ui/react-use-size": "0.1.2-rc.44",
-    "@radix-ui/rect": "0.1.2-rc.4"
+    "@floating-ui/react-dom": "0.7.2",
+    "@radix-ui/react-arrow": "0.1.5-rc.45",
+    "@radix-ui/react-compose-refs": "0.1.1-rc.45",
+    "@radix-ui/react-context": "0.1.2-rc.45",
+    "@radix-ui/react-primitive": "0.1.5-rc.45",
+    "@radix-ui/react-use-layout-effect": "0.1.1-rc.45",
+    "@radix-ui/react-use-rect": "0.1.2-rc.45",
+    "@radix-ui/react-use-size": "0.1.2-rc.45",
+    "@radix-ui/rect": "0.1.2-rc.5"
   },
@@ -31,0 +31,0 @@ "peerDependencies": {

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

100875

64.89%

Lines of code

689

64.83%

Worsened metrics

Number of medium supply chain risk alerts

1

Infinity%

Dependency changes

• + Added

  @floating-ui/react-dom@0.7.2

• + Added

  @floating-ui/core@0.7.3
  (transitive)

• + Added

  @floating-ui/dom@0.5.4
  (transitive)

• + Added

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

• + Added

  @radix-ui/react-arrow@0.1.5-rc.45
  (transitive)

• + Added

  @radix-ui/react-compose-refs@0.1.1-rc.45
  (transitive)

• + Added

  @radix-ui/react-context@0.1.2-rc.45
  (transitive)

• + Added

  @radix-ui/react-primitive@0.1.5-rc.45
  (transitive)

• + Added

  @radix-ui/react-slot@0.1.3-rc.45
  (transitive)

• + Added

  @radix-ui/react-use-layout-effect@0.1.1-rc.45
  (transitive)

• + Added

  @radix-ui/react-use-rect@0.1.2-rc.45
  (transitive)

• + Added

  @radix-ui/react-use-size@0.1.2-rc.45
  (transitive)

• + Added

  @radix-ui/rect@0.1.2-rc.5
  (transitive)

• + Added

  use-isomorphic-layout-effect@1.2.1
  (transitive)

• - Removed

  @radix-ui/popper@0.1.1-rc.4

• - Removed

  @radix-ui/popper@0.1.1-rc.4
  (transitive)

• - Removed

  @radix-ui/react-arrow@0.1.5-rc.44
  (transitive)

• - Removed

  @radix-ui/react-compose-refs@0.1.1-rc.44
  (transitive)

• - Removed

  @radix-ui/react-context@0.1.2-rc.44
  (transitive)

• - Removed

  @radix-ui/react-primitive@0.1.5-rc.44
  (transitive)

• - Removed

  @radix-ui/react-slot@0.1.3-rc.44
  (transitive)

• - Removed

  @radix-ui/react-use-layout-effect@0.1.1-rc.44
  (transitive)

• - Removed

  @radix-ui/react-use-rect@0.1.2-rc.44
  (transitive)

• - Removed

  @radix-ui/react-use-size@0.1.2-rc.44
  (transitive)

• - Removed

  @radix-ui/rect@0.1.2-rc.4
  (transitive)

• - Removed

  csstype@3.1.3
  (transitive)

• Updated

  @radix-ui/react-arrow@0.1.5-rc.45

• Updated

  @radix-ui/react-compose-refs@0.1.1-rc.45

• Updated

  @radix-ui/react-context@0.1.2-rc.45

• Updated

  @radix-ui/react-primitive@0.1.5-rc.45

• Updated

  @radix-ui/react-use-layout-effect@0.1.1-rc.45

• Updated

  @radix-ui/react-use-rect@0.1.2-rc.45

• Updated

  @radix-ui/react-use-size@0.1.2-rc.45

• Updated

  @radix-ui/rect@0.1.2-rc.5