@radix-ui/react-popper
Advanced tools
Comparing version 1.1.2-rc.9 to 1.1.2-rc.10
@@ -93,8 +93,4 @@ var $50Iv9$babelruntimehelpersextends = require("@babel/runtime/helpers/extends"); | ||
const [$34310caa050a8d63$var$PopperContentProvider, $34310caa050a8d63$var$useContentContext] = $34310caa050a8d63$var$createPopperContext($34310caa050a8d63$var$CONTENT_NAME); | ||
const [$34310caa050a8d63$var$PositionContextProvider, $34310caa050a8d63$var$usePositionContext] = $34310caa050a8d63$var$createPopperContext($34310caa050a8d63$var$CONTENT_NAME, { | ||
hasParent: false, | ||
positionUpdateFns: new Set() | ||
}); | ||
const $34310caa050a8d63$export$bc4ae5855d3c4fc = /*#__PURE__*/ $50Iv9$react.forwardRef((props, forwardedRef)=>{ | ||
var _arrowSize$width, _arrowSize$height, _middlewareData$arrow, _middlewareData$arrow2, _middlewareData$arrow3, _middlewareData$hide, _middlewareData$trans, _middlewareData$trans2; | ||
var _arrowSize$width, _arrowSize$height, _middlewareData$arrow, _middlewareData$arrow2, _middlewareData$arrow3, _middlewareData$trans, _middlewareData$trans2, _middlewareData$hide; | ||
const { __scopePopper: __scopePopper , side: side = 'bottom' , sideOffset: sideOffset = 0 , align: align = 'center' , alignOffset: alignOffset = 0 , arrowPadding: arrowPadding = 0 , collisionBoundary: collisionBoundary = [] , collisionPadding: collisionPaddingProp = 0 , sticky: sticky = 'partial' , hideWhenDetached: hideWhenDetached = false , avoidCollisions: avoidCollisions = true , onPlaced: onPlaced , ...contentProps } = props; | ||
@@ -127,3 +123,3 @@ const context = $34310caa050a8d63$var$usePopperContext($34310caa050a8d63$var$CONTENT_NAME, __scopePopper); | ||
}; | ||
const { reference: reference , floating: floating , strategy: strategy , x: x , y: y , placement: placement , middlewareData: middlewareData , update: update } = $50Iv9$floatinguireactdom.useFloating({ | ||
const { refs: refs , floatingStyles: floatingStyles , placement: placement , isPositioned: isPositioned , middlewareData: middlewareData } = $50Iv9$floatinguireactdom.useFloating({ | ||
// default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues | ||
@@ -133,2 +129,5 @@ strategy: 'fixed', | ||
whileElementsMounted: $50Iv9$floatinguireactdom.autoUpdate, | ||
elements: { | ||
reference: context.anchor | ||
}, | ||
middleware: [ | ||
@@ -139,3 +138,3 @@ $50Iv9$floatinguireactdom.offset({ | ||
}), | ||
avoidCollisions ? $50Iv9$floatinguireactdom.shift({ | ||
avoidCollisions && $50Iv9$floatinguireactdom.shift({ | ||
mainAxis: true, | ||
@@ -145,6 +144,6 @@ crossAxis: false, | ||
...detectOverflowOptions | ||
}) : undefined, | ||
avoidCollisions ? $50Iv9$floatinguireactdom.flip({ | ||
}), | ||
avoidCollisions && $50Iv9$floatinguireactdom.flip({ | ||
...detectOverflowOptions | ||
}) : undefined, | ||
}), | ||
$50Iv9$floatinguireactdom.size({ | ||
@@ -161,6 +160,6 @@ ...detectOverflowOptions, | ||
}), | ||
arrow ? $50Iv9$floatinguireactdom.arrow({ | ||
arrow && $50Iv9$floatinguireactdom.arrow({ | ||
element: arrow, | ||
padding: arrowPadding | ||
}) : undefined, | ||
}), | ||
$34310caa050a8d63$var$transformOrigin({ | ||
@@ -170,20 +169,13 @@ arrowWidth: arrowWidth, | ||
}), | ||
hideWhenDetached ? $50Iv9$floatinguireactdom.hide({ | ||
hideWhenDetached && $50Iv9$floatinguireactdom.hide({ | ||
strategy: 'referenceHidden' | ||
}) : undefined | ||
].filter($34310caa050a8d63$var$isDefined) | ||
}); // assign the reference dynamically once `Content` has mounted so we can collocate the logic | ||
$50Iv9$radixuireactuselayouteffect.useLayoutEffect(()=>{ | ||
reference(context.anchor); | ||
}, [ | ||
reference, | ||
context.anchor | ||
]); | ||
const isPlaced = x !== null && y !== null; | ||
}) | ||
] | ||
}); | ||
const [placedSide, placedAlign] = $34310caa050a8d63$var$getSideAndAlignFromPlacement(placement); | ||
const handlePlaced = $50Iv9$radixuireactusecallbackref.useCallbackRef(onPlaced); | ||
$50Iv9$radixuireactuselayouteffect.useLayoutEffect(()=>{ | ||
if (isPlaced) handlePlaced === null || handlePlaced === void 0 || handlePlaced(); | ||
if (isPositioned) handlePlaced === null || handlePlaced === void 0 || handlePlaced(); | ||
}, [ | ||
isPlaced, | ||
isPositioned, | ||
handlePlaced | ||
@@ -200,49 +192,8 @@ ]); | ||
]); | ||
const { hasParent: hasParent , positionUpdateFns: positionUpdateFns } = $34310caa050a8d63$var$usePositionContext($34310caa050a8d63$var$CONTENT_NAME, __scopePopper); | ||
const isRoot = !hasParent; | ||
$50Iv9$react.useLayoutEffect(()=>{ | ||
if (!isRoot) { | ||
positionUpdateFns.add(update); | ||
return ()=>{ | ||
positionUpdateFns.delete(update); | ||
}; | ||
} | ||
}, [ | ||
isRoot, | ||
positionUpdateFns, | ||
update | ||
]); // when nested contents are rendered in portals, they are appended out of order causing | ||
// children to be positioned incorrectly if initially open. | ||
// we need to re-compute the positioning once the parent has finally been placed. | ||
// https://github.com/floating-ui/floating-ui/issues/1531 | ||
$50Iv9$radixuireactuselayouteffect.useLayoutEffect(()=>{ | ||
if (isRoot && isPlaced) Array.from(positionUpdateFns).reverse().forEach((fn)=>requestAnimationFrame(fn) | ||
); | ||
}, [ | ||
isRoot, | ||
isPlaced, | ||
positionUpdateFns | ||
]); | ||
const commonProps = { | ||
'data-side': placedSide, | ||
'data-align': placedAlign, | ||
...contentProps, | ||
ref: composedRefs, | ||
style: { | ||
...contentProps.style, | ||
// if the PopperContent hasn't been placed yet (not all measurements done) | ||
// we prevent animations so that users's animation don't kick in too early referring wrong sides | ||
animation: !isPlaced ? 'none' : undefined, | ||
// hide the content if using the hide middleware and should be hidden | ||
opacity: (_middlewareData$hide = middlewareData.hide) !== null && _middlewareData$hide !== void 0 && _middlewareData$hide.referenceHidden ? 0 : undefined | ||
} | ||
}; | ||
return /*#__PURE__*/ $50Iv9$react.createElement("div", { | ||
ref: floating, | ||
ref: refs.setFloating, | ||
"data-radix-popper-content-wrapper": "", | ||
style: { | ||
position: strategy, | ||
left: 0, | ||
top: 0, | ||
transform: isPlaced ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)` : 'translate3d(0, -200%, 0)', | ||
...floatingStyles, | ||
transform: isPositioned ? floatingStyles.transform : 'translate(0, -200%)', | ||
// keep off the page when measuring | ||
@@ -265,7 +216,16 @@ minWidth: 'max-content', | ||
shouldHideArrow: cannotCenterArrow | ||
}, isRoot ? /*#__PURE__*/ $50Iv9$react.createElement($34310caa050a8d63$var$PositionContextProvider, { | ||
scope: __scopePopper, | ||
hasParent: true, | ||
positionUpdateFns: positionUpdateFns | ||
}, /*#__PURE__*/ $50Iv9$react.createElement($50Iv9$radixuireactprimitive.Primitive.div, commonProps)) : /*#__PURE__*/ $50Iv9$react.createElement($50Iv9$radixuireactprimitive.Primitive.div, commonProps))); | ||
}, /*#__PURE__*/ $50Iv9$react.createElement($50Iv9$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($50Iv9$babelruntimehelpersextends))({ | ||
"data-side": placedSide, | ||
"data-align": placedAlign | ||
}, contentProps, { | ||
ref: composedRefs, | ||
style: { | ||
...contentProps.style, | ||
// if the PopperContent hasn't been placed yet (not all measurements done) | ||
// we prevent animations so that users's animation don't kick in too early referring wrong sides | ||
animation: !isPositioned ? 'none' : undefined, | ||
// hide the content if using the hide middleware and should be hidden | ||
opacity: (_middlewareData$hide = middlewareData.hide) !== null && _middlewareData$hide !== void 0 && _middlewareData$hide.referenceHidden ? 0 : undefined | ||
} | ||
})))); | ||
}); | ||
@@ -324,6 +284,3 @@ /*#__PURE__*/ Object.assign($34310caa050a8d63$export$bc4ae5855d3c4fc, { | ||
}); | ||
/* -----------------------------------------------------------------------------------------------*/ function $34310caa050a8d63$var$isDefined(value) { | ||
return value !== undefined; | ||
} | ||
function $34310caa050a8d63$var$isNotNull(value) { | ||
/* -----------------------------------------------------------------------------------------------*/ function $34310caa050a8d63$var$isNotNull(value) { | ||
return value !== null; | ||
@@ -330,0 +287,0 @@ } |
import $kY93V$babelruntimehelpersesmextends from "@babel/runtime/helpers/esm/extends"; | ||
import {useState as $kY93V$useState, createElement as $kY93V$createElement, forwardRef as $kY93V$forwardRef, useRef as $kY93V$useRef, useEffect as $kY93V$useEffect, useLayoutEffect as $kY93V$useLayoutEffect} from "react"; | ||
import {useState as $kY93V$useState, createElement as $kY93V$createElement, forwardRef as $kY93V$forwardRef, useRef as $kY93V$useRef, useEffect as $kY93V$useEffect} from "react"; | ||
import {useFloating as $kY93V$useFloating, autoUpdate as $kY93V$autoUpdate, offset as $kY93V$offset, shift as $kY93V$shift, limitShift as $kY93V$limitShift, flip as $kY93V$flip, size as $kY93V$size, arrow as $kY93V$arrow, hide as $kY93V$hide} from "@floating-ui/react-dom"; | ||
@@ -9,3 +9,3 @@ import {Root as $kY93V$Root} from "@radix-ui/react-arrow"; | ||
import {useCallbackRef as $kY93V$useCallbackRef} from "@radix-ui/react-use-callback-ref"; | ||
import {useLayoutEffect as $kY93V$useLayoutEffect1} from "@radix-ui/react-use-layout-effect"; | ||
import {useLayoutEffect as $kY93V$useLayoutEffect} from "@radix-ui/react-use-layout-effect"; | ||
import {useSize as $kY93V$useSize} from "@radix-ui/react-use-size"; | ||
@@ -76,8 +76,4 @@ | ||
const [$cf1ac5d9fe0e8206$var$PopperContentProvider, $cf1ac5d9fe0e8206$var$useContentContext] = $cf1ac5d9fe0e8206$var$createPopperContext($cf1ac5d9fe0e8206$var$CONTENT_NAME); | ||
const [$cf1ac5d9fe0e8206$var$PositionContextProvider, $cf1ac5d9fe0e8206$var$usePositionContext] = $cf1ac5d9fe0e8206$var$createPopperContext($cf1ac5d9fe0e8206$var$CONTENT_NAME, { | ||
hasParent: false, | ||
positionUpdateFns: new Set() | ||
}); | ||
const $cf1ac5d9fe0e8206$export$bc4ae5855d3c4fc = /*#__PURE__*/ $kY93V$forwardRef((props, forwardedRef)=>{ | ||
var _arrowSize$width, _arrowSize$height, _middlewareData$arrow, _middlewareData$arrow2, _middlewareData$arrow3, _middlewareData$hide, _middlewareData$trans, _middlewareData$trans2; | ||
var _arrowSize$width, _arrowSize$height, _middlewareData$arrow, _middlewareData$arrow2, _middlewareData$arrow3, _middlewareData$trans, _middlewareData$trans2, _middlewareData$hide; | ||
const { __scopePopper: __scopePopper , side: side = 'bottom' , sideOffset: sideOffset = 0 , align: align = 'center' , alignOffset: alignOffset = 0 , arrowPadding: arrowPadding = 0 , collisionBoundary: collisionBoundary = [] , collisionPadding: collisionPaddingProp = 0 , sticky: sticky = 'partial' , hideWhenDetached: hideWhenDetached = false , avoidCollisions: avoidCollisions = true , onPlaced: onPlaced , ...contentProps } = props; | ||
@@ -110,3 +106,3 @@ const context = $cf1ac5d9fe0e8206$var$usePopperContext($cf1ac5d9fe0e8206$var$CONTENT_NAME, __scopePopper); | ||
}; | ||
const { reference: reference , floating: floating , strategy: strategy , x: x , y: y , placement: placement , middlewareData: middlewareData , update: update } = $kY93V$useFloating({ | ||
const { refs: refs , floatingStyles: floatingStyles , placement: placement , isPositioned: isPositioned , middlewareData: middlewareData } = $kY93V$useFloating({ | ||
// default to `fixed` strategy so users don't have to pick and we also avoid focus scroll issues | ||
@@ -116,2 +112,5 @@ strategy: 'fixed', | ||
whileElementsMounted: $kY93V$autoUpdate, | ||
elements: { | ||
reference: context.anchor | ||
}, | ||
middleware: [ | ||
@@ -122,3 +121,3 @@ $kY93V$offset({ | ||
}), | ||
avoidCollisions ? $kY93V$shift({ | ||
avoidCollisions && $kY93V$shift({ | ||
mainAxis: true, | ||
@@ -128,6 +127,6 @@ crossAxis: false, | ||
...detectOverflowOptions | ||
}) : undefined, | ||
avoidCollisions ? $kY93V$flip({ | ||
}), | ||
avoidCollisions && $kY93V$flip({ | ||
...detectOverflowOptions | ||
}) : undefined, | ||
}), | ||
$kY93V$size({ | ||
@@ -144,6 +143,6 @@ ...detectOverflowOptions, | ||
}), | ||
arrow ? $kY93V$arrow({ | ||
arrow && $kY93V$arrow({ | ||
element: arrow, | ||
padding: arrowPadding | ||
}) : undefined, | ||
}), | ||
$cf1ac5d9fe0e8206$var$transformOrigin({ | ||
@@ -153,20 +152,13 @@ arrowWidth: arrowWidth, | ||
}), | ||
hideWhenDetached ? $kY93V$hide({ | ||
hideWhenDetached && $kY93V$hide({ | ||
strategy: 'referenceHidden' | ||
}) : undefined | ||
].filter($cf1ac5d9fe0e8206$var$isDefined) | ||
}); // assign the reference dynamically once `Content` has mounted so we can collocate the logic | ||
$kY93V$useLayoutEffect1(()=>{ | ||
reference(context.anchor); | ||
}, [ | ||
reference, | ||
context.anchor | ||
]); | ||
const isPlaced = x !== null && y !== null; | ||
}) | ||
] | ||
}); | ||
const [placedSide, placedAlign] = $cf1ac5d9fe0e8206$var$getSideAndAlignFromPlacement(placement); | ||
const handlePlaced = $kY93V$useCallbackRef(onPlaced); | ||
$kY93V$useLayoutEffect1(()=>{ | ||
if (isPlaced) handlePlaced === null || handlePlaced === void 0 || handlePlaced(); | ||
$kY93V$useLayoutEffect(()=>{ | ||
if (isPositioned) handlePlaced === null || handlePlaced === void 0 || handlePlaced(); | ||
}, [ | ||
isPlaced, | ||
isPositioned, | ||
handlePlaced | ||
@@ -178,3 +170,3 @@ ]); | ||
const [contentZIndex, setContentZIndex] = $kY93V$useState(); | ||
$kY93V$useLayoutEffect1(()=>{ | ||
$kY93V$useLayoutEffect(()=>{ | ||
if (content) setContentZIndex(window.getComputedStyle(content).zIndex); | ||
@@ -184,49 +176,8 @@ }, [ | ||
]); | ||
const { hasParent: hasParent , positionUpdateFns: positionUpdateFns } = $cf1ac5d9fe0e8206$var$usePositionContext($cf1ac5d9fe0e8206$var$CONTENT_NAME, __scopePopper); | ||
const isRoot = !hasParent; | ||
$kY93V$useLayoutEffect(()=>{ | ||
if (!isRoot) { | ||
positionUpdateFns.add(update); | ||
return ()=>{ | ||
positionUpdateFns.delete(update); | ||
}; | ||
} | ||
}, [ | ||
isRoot, | ||
positionUpdateFns, | ||
update | ||
]); // when nested contents are rendered in portals, they are appended out of order causing | ||
// children to be positioned incorrectly if initially open. | ||
// we need to re-compute the positioning once the parent has finally been placed. | ||
// https://github.com/floating-ui/floating-ui/issues/1531 | ||
$kY93V$useLayoutEffect1(()=>{ | ||
if (isRoot && isPlaced) Array.from(positionUpdateFns).reverse().forEach((fn)=>requestAnimationFrame(fn) | ||
); | ||
}, [ | ||
isRoot, | ||
isPlaced, | ||
positionUpdateFns | ||
]); | ||
const commonProps = { | ||
'data-side': placedSide, | ||
'data-align': placedAlign, | ||
...contentProps, | ||
ref: composedRefs, | ||
style: { | ||
...contentProps.style, | ||
// if the PopperContent hasn't been placed yet (not all measurements done) | ||
// we prevent animations so that users's animation don't kick in too early referring wrong sides | ||
animation: !isPlaced ? 'none' : undefined, | ||
// hide the content if using the hide middleware and should be hidden | ||
opacity: (_middlewareData$hide = middlewareData.hide) !== null && _middlewareData$hide !== void 0 && _middlewareData$hide.referenceHidden ? 0 : undefined | ||
} | ||
}; | ||
return /*#__PURE__*/ $kY93V$createElement("div", { | ||
ref: floating, | ||
ref: refs.setFloating, | ||
"data-radix-popper-content-wrapper": "", | ||
style: { | ||
position: strategy, | ||
left: 0, | ||
top: 0, | ||
transform: isPlaced ? `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)` : 'translate3d(0, -200%, 0)', | ||
...floatingStyles, | ||
transform: isPositioned ? floatingStyles.transform : 'translate(0, -200%)', | ||
// keep off the page when measuring | ||
@@ -249,7 +200,16 @@ minWidth: 'max-content', | ||
shouldHideArrow: cannotCenterArrow | ||
}, isRoot ? /*#__PURE__*/ $kY93V$createElement($cf1ac5d9fe0e8206$var$PositionContextProvider, { | ||
scope: __scopePopper, | ||
hasParent: true, | ||
positionUpdateFns: positionUpdateFns | ||
}, /*#__PURE__*/ $kY93V$createElement($kY93V$Primitive.div, commonProps)) : /*#__PURE__*/ $kY93V$createElement($kY93V$Primitive.div, commonProps))); | ||
}, /*#__PURE__*/ $kY93V$createElement($kY93V$Primitive.div, $kY93V$babelruntimehelpersesmextends({ | ||
"data-side": placedSide, | ||
"data-align": placedAlign | ||
}, contentProps, { | ||
ref: composedRefs, | ||
style: { | ||
...contentProps.style, | ||
// if the PopperContent hasn't been placed yet (not all measurements done) | ||
// we prevent animations so that users's animation don't kick in too early referring wrong sides | ||
animation: !isPositioned ? 'none' : undefined, | ||
// hide the content if using the hide middleware and should be hidden | ||
opacity: (_middlewareData$hide = middlewareData.hide) !== null && _middlewareData$hide !== void 0 && _middlewareData$hide.referenceHidden ? 0 : undefined | ||
} | ||
})))); | ||
}); | ||
@@ -308,6 +268,3 @@ /*#__PURE__*/ Object.assign($cf1ac5d9fe0e8206$export$bc4ae5855d3c4fc, { | ||
}); | ||
/* -----------------------------------------------------------------------------------------------*/ function $cf1ac5d9fe0e8206$var$isDefined(value) { | ||
return value !== undefined; | ||
} | ||
function $cf1ac5d9fe0e8206$var$isNotNull(value) { | ||
/* -----------------------------------------------------------------------------------------------*/ function $cf1ac5d9fe0e8206$var$isNotNull(value) { | ||
return value !== null; | ||
@@ -314,0 +271,0 @@ } |
{ | ||
"name": "@radix-ui/react-popper", | ||
"version": "1.1.2-rc.9", | ||
"version": "1.1.2-rc.10", | ||
"license": "MIT", | ||
@@ -20,7 +20,7 @@ "source": "src/index.ts", | ||
"@babel/runtime": "^7.13.10", | ||
"@floating-ui/react-dom": "0.7.2", | ||
"@radix-ui/react-arrow": "1.0.3-rc.4", | ||
"@floating-ui/react-dom": "^2.0.0", | ||
"@radix-ui/react-arrow": "1.0.3-rc.5", | ||
"@radix-ui/react-compose-refs": "1.0.0", | ||
"@radix-ui/react-context": "1.0.0", | ||
"@radix-ui/react-primitive": "1.0.3-rc.4", | ||
"@radix-ui/react-primitive": "1.0.3-rc.5", | ||
"@radix-ui/react-use-callback-ref": "1.0.0", | ||
@@ -27,0 +27,0 @@ "@radix-ui/react-use-layout-effect": "1.0.0", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
100209
669
+ Added@floating-ui/core@1.6.7(transitive)
+ Added@floating-ui/dom@1.6.10(transitive)
+ Added@floating-ui/react-dom@2.1.1(transitive)
+ Added@floating-ui/utils@0.2.7(transitive)
+ Added@radix-ui/react-arrow@1.0.3-rc.5(transitive)
+ Added@radix-ui/react-primitive@1.0.3-rc.5(transitive)
+ Added@radix-ui/react-slot@1.0.2-rc.5(transitive)
- Removed@floating-ui/core@0.7.3(transitive)
- Removed@floating-ui/dom@0.5.4(transitive)
- Removed@floating-ui/react-dom@0.7.2(transitive)
- Removed@radix-ui/react-arrow@1.0.3-rc.4(transitive)
- Removed@radix-ui/react-primitive@1.0.3-rc.4(transitive)
- Removed@radix-ui/react-slot@1.0.2-rc.4(transitive)
- Removeduse-isomorphic-layout-effect@1.1.2(transitive)