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

Comparing version 1.1.4-rc.9 to 1.2.0-rc.1

dist/index.d.ts

@@ -1,22 +0,34 @@
-import * as React from "react";
-import * as ArrowPrimitive from "@radix-ui/react-arrow";
-import * as Radix from "@radix-ui/react-primitive";
-import { Primitive } from "@radix-ui/react-primitive";
-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;
-export interface PopperProps {
+import * as React from 'react';
+import * as ArrowPrimitive from '@radix-ui/react-arrow';
+import * as Radix from '@radix-ui/react-primitive';
+import { Primitive } from '@radix-ui/react-primitive';
+import { Measurable } from '@radix-ui/rect';
+
+declare type Scope<C = any> = {
+    [scopeName: string]: React.Context<C>[];
+} | undefined;
+declare type ScopeHook = (scope: Scope) => {
+    [__scopeProp: string]: Scope;
+};
+interface CreateScope {
+    scopeName: string;
+    (): ScopeHook;
+}
+
+declare const SIDE_OPTIONS: readonly ["top", "right", "bottom", "left"];
+declare const ALIGN_OPTIONS: readonly ["start", "center", "end"];
+declare type Side = typeof SIDE_OPTIONS[number];
+declare type Align = typeof ALIGN_OPTIONS[number];
+declare const createPopperScope: CreateScope;
+interface PopperProps {
     children?: React.ReactNode;
 }
-export const Popper: React.FC<PopperProps>;
-type PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;
-export interface PopperAnchorProps extends PrimitiveDivProps {
+declare const Popper: React.FC<PopperProps>;
+declare type PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;
+interface PopperAnchorProps extends PrimitiveDivProps {
     virtualRef?: React.RefObject<Measurable>;
 }
-export const PopperAnchor: React.ForwardRefExoticComponent<PopperAnchorProps & React.RefAttributes<HTMLDivElement>>;
-type Boundary = Element | null;
-export interface PopperContentProps extends PrimitiveDivProps {
+declare const PopperAnchor: React.ForwardRefExoticComponent<PopperAnchorProps & React.RefAttributes<HTMLDivElement>>;
+declare type Boundary = Element | null;
+interface PopperContentProps extends PrimitiveDivProps {
     side?: Side;
@@ -35,12 +47,12 @@ sideOffset?: number;
 }
-export const PopperContent: React.ForwardRefExoticComponent<PopperContentProps & React.RefAttributes<HTMLDivElement>>;
-type ArrowProps = Radix.ComponentPropsWithoutRef<typeof ArrowPrimitive.Root>;
-export interface PopperArrowProps extends ArrowProps {
+declare const PopperContent: React.ForwardRefExoticComponent<PopperContentProps & React.RefAttributes<HTMLDivElement>>;
+declare type ArrowProps = Radix.ComponentPropsWithoutRef<typeof ArrowPrimitive.Root>;
+interface PopperArrowProps extends ArrowProps {
 }
-export const PopperArrow: React.ForwardRefExoticComponent<PopperArrowProps & React.RefAttributes<SVGSVGElement>>;
-export const Root: React.FC<PopperProps>;
-export const Anchor: React.ForwardRefExoticComponent<PopperAnchorProps & React.RefAttributes<HTMLDivElement>>;
-export const Content: React.ForwardRefExoticComponent<PopperContentProps & React.RefAttributes<HTMLDivElement>>;
-export const Arrow: React.ForwardRefExoticComponent<PopperArrowProps & React.RefAttributes<SVGSVGElement>>;
+declare const PopperArrow: React.ForwardRefExoticComponent<PopperArrowProps & React.RefAttributes<SVGSVGElement>>;
+declare const Root: React.FC<PopperProps>;
+declare const Anchor: React.ForwardRefExoticComponent<PopperAnchorProps & React.RefAttributes<HTMLDivElement>>;
+declare const Content: React.ForwardRefExoticComponent<PopperContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const Arrow: React.ForwardRefExoticComponent<PopperArrowProps & React.RefAttributes<SVGSVGElement>>;
 
-//# sourceMappingURL=index.d.ts.map
+export { ALIGN_OPTIONS, Anchor, Arrow, Content, Popper, PopperAnchor, type PopperAnchorProps, PopperArrow, type PopperArrowProps, PopperContent, type PopperContentProps, type PopperProps, Root, SIDE_OPTIONS, createPopperScope };

dist/index.js

@@ -1,257 +0,233 @@
-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$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");
-var $50Iv9$radixuireactusesize = require("@radix-ui/react-use-size");
+"use strict";
+(() => {
+  var __create = Object.create;
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __getProtoOf = Object.getPrototypeOf;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+    get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+  }) : x)(function(x) {
+    if (typeof require !== "undefined") return require.apply(this, arguments);
+    throw Error('Dynamic require of "' + x + '" is not supported');
+  });
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+    // If the importer is in node compatibility mode or this is not an ESM
+    // file that has been converted to a CommonJS file using a Babel-
+    // compatible transform (i.e. "__esModule" has not been set), then set
+    // "default" to the CommonJS "module.exports" for node compatibility.
+    isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+    mod
+  ));
 
-function $parcel$export(e, n, v, s) {
-  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
-}
-function $parcel$interopDefault(a) {
-  return a && a.__esModule ? a.default : a;
-}
-
-$parcel$export(module.exports, "createPopperScope", () => $34310caa050a8d63$export$722aac194ae923);
-$parcel$export(module.exports, "Popper", () => $34310caa050a8d63$export$badac9ada3a0bdf9);
-$parcel$export(module.exports, "PopperAnchor", () => $34310caa050a8d63$export$ecd4e1ccab6ed6d);
-$parcel$export(module.exports, "PopperContent", () => $34310caa050a8d63$export$bc4ae5855d3c4fc);
-$parcel$export(module.exports, "PopperArrow", () => $34310caa050a8d63$export$79d62cd4e10a3fd0);
-$parcel$export(module.exports, "Root", () => $34310caa050a8d63$export$be92b6f5f03c0fe9);
-$parcel$export(module.exports, "Anchor", () => $34310caa050a8d63$export$b688253958b8dfe7);
-$parcel$export(module.exports, "Content", () => $34310caa050a8d63$export$7c6e2c02157bb7d2);
-$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);
-
-
-
-
-
-
-
-
-
-
-const $34310caa050a8d63$export$36f0086da09c4b9f = [
-    'top',
-    'right',
-    'bottom',
-    'left'
-];
-const $34310caa050a8d63$export$3671ffab7b302fc9 = [
-    'start',
-    'center',
-    'end'
-];
-/* -------------------------------------------------------------------------------------------------
- * Popper
- * -----------------------------------------------------------------------------------------------*/ const $34310caa050a8d63$var$POPPER_NAME = 'Popper';
-const [$34310caa050a8d63$var$createPopperContext, $34310caa050a8d63$export$722aac194ae923] = $50Iv9$radixuireactcontext.createContextScope($34310caa050a8d63$var$POPPER_NAME);
-const [$34310caa050a8d63$var$PopperProvider, $34310caa050a8d63$var$usePopperContext] = $34310caa050a8d63$var$createPopperContext($34310caa050a8d63$var$POPPER_NAME);
-const $34310caa050a8d63$export$badac9ada3a0bdf9 = (props)=>{
-    const { __scopePopper: __scopePopper , children: children  } = props;
-    const [anchor, setAnchor] = $50Iv9$react.useState(null);
-    return /*#__PURE__*/ $50Iv9$react.createElement($34310caa050a8d63$var$PopperProvider, {
-        scope: __scopePopper,
-        anchor: anchor,
-        onAnchorChange: setAnchor
-    }, children);
-};
-/*#__PURE__*/ Object.assign($34310caa050a8d63$export$badac9ada3a0bdf9, {
-    displayName: $34310caa050a8d63$var$POPPER_NAME
-});
-/* -------------------------------------------------------------------------------------------------
- * PopperAnchor
- * -----------------------------------------------------------------------------------------------*/ const $34310caa050a8d63$var$ANCHOR_NAME = 'PopperAnchor';
-const $34310caa050a8d63$export$ecd4e1ccab6ed6d = /*#__PURE__*/ $50Iv9$react.forwardRef((props, forwardedRef)=>{
-    const { __scopePopper: __scopePopper , virtualRef: virtualRef , ...anchorProps } = props;
-    const context = $34310caa050a8d63$var$usePopperContext($34310caa050a8d63$var$ANCHOR_NAME, __scopePopper);
-    const ref = $50Iv9$react.useRef(null);
-    const composedRefs = $50Iv9$radixuireactcomposerefs.useComposedRefs(forwardedRef, ref);
-    $50Iv9$react.useEffect(()=>{
-        // Consumer can anchor the popper to something that isn't
-        // a DOM node e.g. pointer position, so we override the
-        // `anchorRef` with their virtual ref in this case.
-        context.onAnchorChange((virtualRef === null || virtualRef === void 0 ? void 0 : virtualRef.current) || ref.current);
-    });
-    return virtualRef ? null : /*#__PURE__*/ $50Iv9$react.createElement($50Iv9$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($50Iv9$babelruntimehelpersextends))({}, anchorProps, {
-        ref: composedRefs
-    }));
-});
-/*#__PURE__*/ Object.assign($34310caa050a8d63$export$ecd4e1ccab6ed6d, {
-    displayName: $34310caa050a8d63$var$ANCHOR_NAME
-});
-/* -------------------------------------------------------------------------------------------------
- * PopperContent
- * -----------------------------------------------------------------------------------------------*/ const $34310caa050a8d63$var$CONTENT_NAME = 'PopperContent';
-const [$34310caa050a8d63$var$PopperContentProvider, $34310caa050a8d63$var$useContentContext] = $34310caa050a8d63$var$createPopperContext($34310caa050a8d63$var$CONTENT_NAME);
-const $34310caa050a8d63$export$bc4ae5855d3c4fc = /*#__PURE__*/ $50Iv9$react.forwardRef((props, forwardedRef)=>{
-    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 , avoidCollisions: avoidCollisions = true , collisionBoundary: collisionBoundary = [] , collisionPadding: collisionPaddingProp = 0 , sticky: sticky = 'partial' , hideWhenDetached: hideWhenDetached = false , updatePositionStrategy: updatePositionStrategy = 'optimized' , onPlaced: onPlaced , ...contentProps } = props;
-    const context = $34310caa050a8d63$var$usePopperContext($34310caa050a8d63$var$CONTENT_NAME, __scopePopper);
-    const [content, setContent] = $50Iv9$react.useState(null);
-    const composedRefs = $50Iv9$radixuireactcomposerefs.useComposedRefs(forwardedRef, (node)=>setContent(node)
-    );
-    const [arrow, setArrow] = $50Iv9$react.useState(null);
-    const arrowSize = $50Iv9$radixuireactusesize.useSize(arrow);
-    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 boundary = Array.isArray(collisionBoundary) ? collisionBoundary : [
-        collisionBoundary
-    ];
-    const hasExplicitBoundaries = boundary.length > 0;
-    const detectOverflowOptions = {
+  // packages/react/popper/src/Popper.tsx
+  var React = __toESM(__require("react"));
+  var import_react_dom = __require("@floating-ui/react-dom");
+  var ArrowPrimitive = __toESM(__require("@radix-ui/react-arrow"));
+  var import_react_compose_refs = __require("@radix-ui/react-compose-refs");
+  var import_react_context = __require("@radix-ui/react-context");
+  var import_react_primitive = __require("@radix-ui/react-primitive");
+  var import_react_use_callback_ref = __require("@radix-ui/react-use-callback-ref");
+  var import_react_use_layout_effect = __require("@radix-ui/react-use-layout-effect");
+  var import_react_use_size = __require("@radix-ui/react-use-size");
+  var import_jsx_runtime = __require("react/jsx-runtime");
+  var SIDE_OPTIONS = ["top", "right", "bottom", "left"];
+  var ALIGN_OPTIONS = ["start", "center", "end"];
+  var POPPER_NAME = "Popper";
+  var [createPopperContext, createPopperScope] = (0, import_react_context.createContextScope)(POPPER_NAME);
+  var [PopperProvider, usePopperContext] = createPopperContext(POPPER_NAME);
+  var Popper = (props) => {
+    const { __scopePopper, children } = props;
+    const [anchor, setAnchor] = React.useState(null);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperProvider, { scope: __scopePopper, anchor, onAnchorChange: setAnchor, children });
+  };
+  Popper.displayName = POPPER_NAME;
+  var ANCHOR_NAME = "PopperAnchor";
+  var PopperAnchor = React.forwardRef(
+    (props, forwardedRef) => {
+      const { __scopePopper, virtualRef, ...anchorProps } = props;
+      const context = usePopperContext(ANCHOR_NAME, __scopePopper);
+      const ref = React.useRef(null);
+      const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref);
+      React.useEffect(() => {
+        context.onAnchorChange(virtualRef?.current || ref.current);
+      });
+      return virtualRef ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.div, { ...anchorProps, ref: composedRefs });
+    }
+  );
+  PopperAnchor.displayName = ANCHOR_NAME;
+  var CONTENT_NAME = "PopperContent";
+  var [PopperContentProvider, useContentContext] = createPopperContext(CONTENT_NAME);
+  var PopperContent = React.forwardRef(
+    (props, forwardedRef) => {
+      const {
+        __scopePopper,
+        side = "bottom",
+        sideOffset = 0,
+        align = "center",
+        alignOffset = 0,
+        arrowPadding = 0,
+        avoidCollisions = true,
+        collisionBoundary = [],
+        collisionPadding: collisionPaddingProp = 0,
+        sticky = "partial",
+        hideWhenDetached = false,
+        updatePositionStrategy = "optimized",
+        onPlaced,
+        ...contentProps
+      } = props;
+      const context = usePopperContext(CONTENT_NAME, __scopePopper);
+      const [content, setContent] = React.useState(null);
+      const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, (node) => setContent(node));
+      const [arrow, setArrow] = React.useState(null);
+      const arrowSize = (0, import_react_use_size.useSize)(arrow);
+      const arrowWidth = arrowSize?.width ?? 0;
+      const arrowHeight = 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 boundary = Array.isArray(collisionBoundary) ? collisionBoundary : [collisionBoundary];
+      const hasExplicitBoundaries = boundary.length > 0;
+      const detectOverflowOptions = {
         padding: collisionPadding,
-        boundary: boundary.filter($34310caa050a8d63$var$isNotNull),
+        boundary: boundary.filter(isNotNull),
         // with `strategy: 'fixed'`, this is the only way to get it to respect boundaries
         altBoundary: hasExplicitBoundaries
-    };
-    const { refs: refs , floatingStyles: floatingStyles , placement: placement , isPositioned: isPositioned , middlewareData: middlewareData  } = $50Iv9$floatinguireactdom.useFloating({
+      };
+      const { refs, floatingStyles, placement, isPositioned, middlewareData } = (0, import_react_dom.useFloating)({
         // default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues
-        strategy: 'fixed',
+        strategy: "fixed",
         placement: desiredPlacement,
-        whileElementsMounted: (...args)=>{
-            const cleanup = $50Iv9$floatinguireactdom.autoUpdate(...args, {
-                animationFrame: updatePositionStrategy === 'always'
-            });
-            return cleanup;
+        whileElementsMounted: (...args) => {
+          const cleanup = (0, import_react_dom.autoUpdate)(...args, {
+            animationFrame: updatePositionStrategy === "always"
+          });
+          return cleanup;
         },
         elements: {
-            reference: context.anchor
+          reference: context.anchor
         },
         middleware: [
-            $50Iv9$floatinguireactdom.offset({
-                mainAxis: sideOffset + arrowHeight,
-                alignmentAxis: alignOffset
-            }),
-            avoidCollisions && $50Iv9$floatinguireactdom.shift({
-                mainAxis: true,
-                crossAxis: false,
-                limiter: sticky === 'partial' ? $50Iv9$floatinguireactdom.limitShift() : undefined,
-                ...detectOverflowOptions
-            }),
-            avoidCollisions && $50Iv9$floatinguireactdom.flip({
-                ...detectOverflowOptions
-            }),
-            $50Iv9$floatinguireactdom.size({
-                ...detectOverflowOptions,
-                apply: ({ elements: elements , rects: rects , availableWidth: availableWidth , availableHeight: availableHeight  })=>{
-                    const { width: anchorWidth , height: anchorHeight  } = rects.reference;
-                    const contentStyle = elements.floating.style;
-                    contentStyle.setProperty('--radix-popper-available-width', `${availableWidth}px`);
-                    contentStyle.setProperty('--radix-popper-available-height', `${availableHeight}px`);
-                    contentStyle.setProperty('--radix-popper-anchor-width', `${anchorWidth}px`);
-                    contentStyle.setProperty('--radix-popper-anchor-height', `${anchorHeight}px`);
-                }
-            }),
-            arrow && $50Iv9$floatinguireactdom.arrow({
-                element: arrow,
-                padding: arrowPadding
-            }),
-            $34310caa050a8d63$var$transformOrigin({
-                arrowWidth: arrowWidth,
-                arrowHeight: arrowHeight
-            }),
-            hideWhenDetached && $50Iv9$floatinguireactdom.hide({
-                strategy: 'referenceHidden',
-                ...detectOverflowOptions
-            })
+          (0, import_react_dom.offset)({ mainAxis: sideOffset + arrowHeight, alignmentAxis: alignOffset }),
+          avoidCollisions && (0, import_react_dom.shift)({
+            mainAxis: true,
+            crossAxis: false,
+            limiter: sticky === "partial" ? (0, import_react_dom.limitShift)() : void 0,
+            ...detectOverflowOptions
+          }),
+          avoidCollisions && (0, import_react_dom.flip)({ ...detectOverflowOptions }),
+          (0, import_react_dom.size)({
+            ...detectOverflowOptions,
+            apply: ({ elements, rects, availableWidth, availableHeight }) => {
+              const { width: anchorWidth, height: anchorHeight } = rects.reference;
+              const contentStyle = elements.floating.style;
+              contentStyle.setProperty("--radix-popper-available-width", `${availableWidth}px`);
+              contentStyle.setProperty("--radix-popper-available-height", `${availableHeight}px`);
+              contentStyle.setProperty("--radix-popper-anchor-width", `${anchorWidth}px`);
+              contentStyle.setProperty("--radix-popper-anchor-height", `${anchorHeight}px`);
+            }
+          }),
+          arrow && (0, import_react_dom.arrow)({ element: arrow, padding: arrowPadding }),
+          transformOrigin({ arrowWidth, arrowHeight }),
+          hideWhenDetached && (0, import_react_dom.hide)({ strategy: "referenceHidden", ...detectOverflowOptions })
         ]
-    });
-    const [placedSide, placedAlign] = $34310caa050a8d63$var$getSideAndAlignFromPlacement(placement);
-    const handlePlaced = $50Iv9$radixuireactusecallbackref.useCallbackRef(onPlaced);
-    $50Iv9$radixuireactuselayouteffect.useLayoutEffect(()=>{
-        if (isPositioned) handlePlaced === null || handlePlaced === void 0 || handlePlaced();
-    }, [
-        isPositioned,
-        handlePlaced
-    ]);
-    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();
-    $50Iv9$radixuireactuselayouteffect.useLayoutEffect(()=>{
+      });
+      const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
+      const handlePlaced = (0, import_react_use_callback_ref.useCallbackRef)(onPlaced);
+      (0, import_react_use_layout_effect.useLayoutEffect)(() => {
+        if (isPositioned) {
+          handlePlaced?.();
+        }
+      }, [isPositioned, handlePlaced]);
+      const arrowX = middlewareData.arrow?.x;
+      const arrowY = middlewareData.arrow?.y;
+      const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
+      const [contentZIndex, setContentZIndex] = React.useState();
+      (0, import_react_use_layout_effect.useLayoutEffect)(() => {
         if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
-    }, [
-        content
-    ]);
-    return /*#__PURE__*/ $50Iv9$react.createElement("div", {
-        ref: refs.setFloating,
-        "data-radix-popper-content-wrapper": "",
-        style: {
+      }, [content]);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          ref: refs.setFloating,
+          "data-radix-popper-content-wrapper": "",
+          style: {
             ...floatingStyles,
-            transform: isPositioned ? floatingStyles.transform : 'translate(0, -200%)',
+            transform: isPositioned ? floatingStyles.transform : "translate(0, -200%)",
             // keep off the page when measuring
-            minWidth: 'max-content',
+            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(' '),
+            ["--radix-popper-transform-origin"]: [
+              middlewareData.transformOrigin?.x,
+              middlewareData.transformOrigin?.y
+            ].join(" "),
             // hide the content if using the hide middleware and should be hidden
             // set visibility to hidden and disable pointer events so the UI behaves
             // as if the PopperContent isn't there at all
-            ...((_middlewareData$hide = middlewareData.hide) === null || _middlewareData$hide === void 0 ? void 0 : _middlewareData$hide.referenceHidden) && {
-                visibility: 'hidden',
-                pointerEvents: 'none'
+            ...middlewareData.hide?.referenceHidden && {
+              visibility: "hidden",
+              pointerEvents: "none"
             }
-        } // Floating UI interally calculates logical alignment based the `dir` attribute on
-        ,
-        dir: props.dir
-    }, /*#__PURE__*/ $50Iv9$react.createElement($34310caa050a8d63$var$PopperContentProvider, {
-        scope: __scopePopper,
-        placedSide: placedSide,
-        onArrowChange: setArrow,
-        arrowX: arrowX,
-        arrowY: arrowY,
-        shouldHideArrow: cannotCenterArrow
-    }, /*#__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
+          },
+          dir: props.dir,
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            PopperContentProvider,
+            {
+              scope: __scopePopper,
+              placedSide,
+              onArrowChange: setArrow,
+              arrowX,
+              arrowY,
+              shouldHideArrow: cannotCenterArrow,
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_react_primitive.Primitive.div,
+                {
+                  "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" : void 0
+                  }
+                }
+              )
+            }
+          )
         }
-    }))));
-});
-/*#__PURE__*/ Object.assign($34310caa050a8d63$export$bc4ae5855d3c4fc, {
-    displayName: $34310caa050a8d63$var$CONTENT_NAME
-});
-/* -------------------------------------------------------------------------------------------------
- * PopperArrow
- * -----------------------------------------------------------------------------------------------*/ 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 , ...arrowProps } = props;
-    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: {
-            position: 'absolute',
+      );
+    }
+  );
+  PopperContent.displayName = CONTENT_NAME;
+  var ARROW_NAME = "PopperArrow";
+  var OPPOSITE_SIDE = {
+    top: "bottom",
+    right: "left",
+    bottom: "top",
+    left: "right"
+  };
+  var PopperArrow = React.forwardRef(function PopperArrow2(props, forwardedRef) {
+    const { __scopePopper, ...arrowProps } = props;
+    const contentContext = useContentContext(ARROW_NAME, __scopePopper);
+    const baseSide = OPPOSITE_SIDE[contentContext.placedSide];
+    return (
+      // 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.
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "span",
+        {
+          ref: contentContext.onArrowChange,
+          style: {
+            position: "absolute",
             left: contentContext.arrowX,
@@ -261,87 +237,75 @@ top: contentContext.arrowY,
             transformOrigin: {
-                top: '',
-                right: '0 0',
-                bottom: 'center 0',
-                left: '100% 0'
+              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%)'
+              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
+            visibility: contentContext.shouldHideArrow ? "hidden" : void 0
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            ArrowPrimitive.Root,
+            {
+              ...arrowProps,
+              ref: forwardedRef,
+              style: {
+                ...arrowProps.style,
+                // ensures the element can be measured correctly (mostly for if SVG)
+                display: "block"
+              }
+            }
+          )
         }
-    }, /*#__PURE__*/ $50Iv9$react.createElement($50Iv9$radixuireactarrow.Root, ($parcel$interopDefault($50Iv9$babelruntimehelpersextends))({}, arrowProps, {
-        ref: forwardedRef,
-        style: {
-            ...arrowProps.style,
-            // ensures the element can be measured correctly (mostly for if SVG)
-            display: 'block'
-        }
-    }))));
-});
-/*#__PURE__*/ Object.assign($34310caa050a8d63$export$79d62cd4e10a3fd0, {
-    displayName: $34310caa050a8d63$var$ARROW_NAME
-});
-/* -----------------------------------------------------------------------------------------------*/ function $34310caa050a8d63$var$isNotNull(value) {
+      )
+    );
+  });
+  PopperArrow.displayName = ARROW_NAME;
+  function isNotNull(value) {
     return value !== null;
-}
-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 $34310caa050a8d63$var$getSideAndAlignFromPlacement(placement) {
-    const [side, align = 'center'] = placement.split('-');
-    return [
-        side,
-        align
-    ];
-}
-const $34310caa050a8d63$export$be92b6f5f03c0fe9 = $34310caa050a8d63$export$badac9ada3a0bdf9;
-const $34310caa050a8d63$export$b688253958b8dfe7 = $34310caa050a8d63$export$ecd4e1ccab6ed6d;
-const $34310caa050a8d63$export$7c6e2c02157bb7d2 = $34310caa050a8d63$export$bc4ae5855d3c4fc;
-const $34310caa050a8d63$export$21b07c8f274aebd5 = $34310caa050a8d63$export$79d62cd4e10a3fd0;
-
-
-
-
+  }
+  var transformOrigin = (options) => ({
+    name: "transformOrigin",
+    options,
+    fn(data) {
+      const { placement, rects, middlewareData } = data;
+      const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
+      const isArrowHidden = cannotCenterArrow;
+      const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
+      const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
+      const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
+      const noArrowAlign = { start: "0%", center: "50%", end: "100%" }[placedAlign];
+      const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2;
+      const arrowYCenter = (middlewareData.arrow?.y ?? 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, y } };
+    }
+  });
+  function getSideAndAlignFromPlacement(placement) {
+    const [side, align = "center"] = placement.split("-");
+    return [side, align];
+  }
+  var Root2 = Popper;
+  var Anchor = PopperAnchor;
+  var Content = PopperContent;
+  var Arrow = PopperArrow;
+})();
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@radix-ui/react-popper",
-  "version": "1.1.4-rc.9",
+  "version": "1.2.0-rc.1",
   "license": "MIT",
@@ -31,13 +31,12 @@ "exports": {
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
     "@floating-ui/react-dom": "^2.0.0",
-    "@radix-ui/react-arrow": "1.0.3",
-    "@radix-ui/react-compose-refs": "1.0.1",
-    "@radix-ui/react-context": "1.0.1",
-    "@radix-ui/react-primitive": "1.0.3",
-    "@radix-ui/react-use-callback-ref": "1.0.1",
-    "@radix-ui/react-use-layout-effect": "1.0.1",
-    "@radix-ui/react-use-rect": "1.0.1",
-    "@radix-ui/react-use-size": "1.0.1",
-    "@radix-ui/rect": "1.0.1"
+    "@radix-ui/react-arrow": "1.1.0-rc.1",
+    "@radix-ui/react-compose-refs": "1.1.0-rc.1",
+    "@radix-ui/react-context": "1.1.0-rc.1",
+    "@radix-ui/react-primitive": "1.1.0-rc.1",
+    "@radix-ui/react-use-callback-ref": "1.1.0-rc.1",
+    "@radix-ui/react-use-layout-effect": "1.1.0-rc.1",
+    "@radix-ui/react-use-rect": "1.1.0-rc.1",
+    "@radix-ui/react-use-size": "1.1.0-rc.1",
+    "@radix-ui/rect": "1.1.0-rc.1"
   },
@@ -44,0 +43,0 @@ "peerDependencies": {

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

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

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

Dependency count

14

decreased by-6.67%

Worsened metrics

Total package byte prevSize

75511

decreased by-28.5%

Number of package files

8

decreased by-11.11%

Lines of code

664

decreased by-4.05%

Number of low supply chain risk alerts

3

increased byInfinity%

Dependency changes

• + Added@radix-ui/react-arrow@1.1.0-rc.1(transitive)

• + Added@radix-ui/react-compose-refs@1.1.0-rc.1(transitive)

• + Added@radix-ui/react-context@1.1.0-rc.1(transitive)

• + Added@radix-ui/react-primitive@1.1.0-rc.1(transitive)

• + Added@radix-ui/react-slot@1.1.0-rc.1(transitive)

• + Added@radix-ui/react-use-callback-ref@1.1.0-rc.1(transitive)

• + Added@radix-ui/react-use-layout-effect@1.1.0-rc.1(transitive)

• + Added@radix-ui/react-use-rect@1.1.0-rc.1(transitive)

• + Added@radix-ui/react-use-size@1.1.0-rc.1(transitive)

• + Added@radix-ui/rect@1.1.0-rc.1(transitive)

• - Removed@babel/runtime@^7.13.10

• - Removed@babel/runtime@7.25.0(transitive)

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

• - Removed@radix-ui/react-compose-refs@1.0.1(transitive)

• - Removed@radix-ui/react-context@1.0.1(transitive)

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

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

• - Removed@radix-ui/react-use-callback-ref@1.0.1(transitive)

• - Removed@radix-ui/react-use-layout-effect@1.0.1(transitive)

• - Removed@radix-ui/react-use-rect@1.0.1(transitive)

• - Removed@radix-ui/react-use-size@1.0.1(transitive)

• - Removed@radix-ui/rect@1.0.1(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)

• Updated@radix-ui/react-arrow@1.1.0-rc.1

• Updated@radix-ui/react-compose-refs@1.1.0-rc.1

• Updated@radix-ui/react-context@1.1.0-rc.1

• Updated@radix-ui/react-primitive@1.1.0-rc.1

• Updated@radix-ui/react-use-callback-ref@1.1.0-rc.1

• Updated@radix-ui/react-use-layout-effect@1.1.0-rc.1

• Updated@radix-ui/react-use-rect@1.1.0-rc.1

• Updated@radix-ui/react-use-size@1.1.0-rc.1

• Updated@radix-ui/rect@1.1.0-rc.1