@radix-ui/react-popper
Advanced tools
Comparing version 1.1.4-rc.9 to 1.2.0-rc.1
@@ -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 }; |
@@ -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 |
{ | ||
"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": { |
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
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
Dynamic require
Supply chain riskDynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.
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
14
75511
8
664
3
+ 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/rect@1.1.0-rc.1