Socket
Socket
Sign inDemoInstall

@radix-ui/react-popover

Package Overview
Dependencies
43
Maintainers
6
Versions
232
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.0.8-rc.9 to 1.1.0-rc.1

86

dist/index.d.ts

@@ -1,10 +0,22 @@

import * as React from "react";
import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
import { FocusScope } from "@radix-ui/react-focus-scope";
import * as PopperPrimitive from "@radix-ui/react-popper";
import { Portal as _Portal1 } from "@radix-ui/react-portal";
import * as Radix from "@radix-ui/react-primitive";
import { Primitive } from "@radix-ui/react-primitive";
export const createPopoverScope: import("@radix-ui/react-context").CreateScope;
export interface PopoverProps {
import * as React from 'react';
import { DismissableLayer } from '@radix-ui/react-dismissable-layer';
import { FocusScope } from '@radix-ui/react-focus-scope';
import * as PopperPrimitive from '@radix-ui/react-popper';
import { Portal as Portal$1 } from '@radix-ui/react-portal';
import * as Radix from '@radix-ui/react-primitive';
import { Primitive } from '@radix-ui/react-primitive';
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 createPopoverScope: CreateScope;
interface PopoverProps {
children?: React.ReactNode;

@@ -16,13 +28,13 @@ open?: boolean;

}
export const Popover: React.FC<PopoverProps>;
type PopperAnchorProps = Radix.ComponentPropsWithoutRef<typeof PopperPrimitive.Anchor>;
export interface PopoverAnchorProps extends PopperAnchorProps {
declare const Popover: React.FC<PopoverProps>;
declare type PopperAnchorProps = Radix.ComponentPropsWithoutRef<typeof PopperPrimitive.Anchor>;
interface PopoverAnchorProps extends PopperAnchorProps {
}
export const PopoverAnchor: React.ForwardRefExoticComponent<PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
type PrimitiveButtonProps = Radix.ComponentPropsWithoutRef<typeof Primitive.button>;
export interface PopoverTriggerProps extends PrimitiveButtonProps {
declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
declare type PrimitiveButtonProps = Radix.ComponentPropsWithoutRef<typeof Primitive.button>;
interface PopoverTriggerProps extends PrimitiveButtonProps {
}
export const PopoverTrigger: React.ForwardRefExoticComponent<PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
type PortalProps = React.ComponentPropsWithoutRef<typeof _Portal1>;
export interface PopoverPortalProps {
declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
declare type PortalProps = React.ComponentPropsWithoutRef<typeof Portal$1>;
interface PopoverPortalProps {
children?: React.ReactNode;

@@ -39,4 +51,4 @@ /**

}
export const PopoverPortal: React.FC<PopoverPortalProps>;
export interface PopoverContentProps extends PopoverContentTypeProps {
declare const PopoverPortal: React.FC<PopoverPortalProps>;
interface PopoverContentProps extends PopoverContentTypeProps {
/**

@@ -48,8 +60,8 @@ * Used to force mounting when more control is needed. Useful when

}
export const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
interface PopoverContentTypeProps extends Omit<PopoverContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {
}
type FocusScopeProps = Radix.ComponentPropsWithoutRef<typeof FocusScope>;
type DismissableLayerProps = Radix.ComponentPropsWithoutRef<typeof DismissableLayer>;
type PopperContentProps = Radix.ComponentPropsWithoutRef<typeof PopperPrimitive.Content>;
declare type FocusScopeProps = Radix.ComponentPropsWithoutRef<typeof FocusScope>;
declare type DismissableLayerProps = Radix.ComponentPropsWithoutRef<typeof DismissableLayer>;
declare type PopperContentProps = Radix.ComponentPropsWithoutRef<typeof PopperPrimitive.Content>;
interface PopoverContentImplProps extends Omit<PopperContentProps, 'onPlaced'>, Omit<DismissableLayerProps, 'onDismiss'> {

@@ -72,17 +84,17 @@ /**

}
export interface PopoverCloseProps extends PrimitiveButtonProps {
interface PopoverCloseProps extends PrimitiveButtonProps {
}
export const PopoverClose: React.ForwardRefExoticComponent<PopoverCloseProps & React.RefAttributes<HTMLButtonElement>>;
type PopperArrowProps = Radix.ComponentPropsWithoutRef<typeof PopperPrimitive.Arrow>;
export interface PopoverArrowProps extends PopperArrowProps {
declare const PopoverClose: React.ForwardRefExoticComponent<PopoverCloseProps & React.RefAttributes<HTMLButtonElement>>;
declare type PopperArrowProps = Radix.ComponentPropsWithoutRef<typeof PopperPrimitive.Arrow>;
interface PopoverArrowProps extends PopperArrowProps {
}
export const PopoverArrow: React.ForwardRefExoticComponent<PopoverArrowProps & React.RefAttributes<SVGSVGElement>>;
export const Root: React.FC<PopoverProps>;
export const Anchor: React.ForwardRefExoticComponent<PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
export const Trigger: React.ForwardRefExoticComponent<PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
export const Portal: React.FC<PopoverPortalProps>;
export const Content: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
export const Close: React.ForwardRefExoticComponent<PopoverCloseProps & React.RefAttributes<HTMLButtonElement>>;
export const Arrow: React.ForwardRefExoticComponent<PopoverArrowProps & React.RefAttributes<SVGSVGElement>>;
declare const PopoverArrow: React.ForwardRefExoticComponent<PopoverArrowProps & React.RefAttributes<SVGSVGElement>>;
declare const Root: React.FC<PopoverProps>;
declare const Anchor: React.ForwardRefExoticComponent<PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
declare const Trigger: React.ForwardRefExoticComponent<PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
declare const Portal: React.FC<PopoverPortalProps>;
declare const Content: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
declare const Close: React.ForwardRefExoticComponent<PopoverCloseProps & React.RefAttributes<HTMLButtonElement>>;
declare const Arrow: React.ForwardRefExoticComponent<PopoverArrowProps & React.RefAttributes<SVGSVGElement>>;
//# sourceMappingURL=index.d.ts.map
export { Anchor, Arrow, Close, Content, Popover, PopoverAnchor, type PopoverAnchorProps, PopoverArrow, type PopoverArrowProps, PopoverClose, type PopoverCloseProps, PopoverContent, type PopoverContentProps, PopoverPortal, type PopoverPortalProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, Portal, Root, Trigger, createPopoverScope };

641

dist/index.js

@@ -1,342 +0,331 @@

var $aJPOC$babelruntimehelpersextends = require("@babel/runtime/helpers/extends");
var $aJPOC$react = require("react");
var $aJPOC$radixuiprimitive = require("@radix-ui/primitive");
var $aJPOC$radixuireactcomposerefs = require("@radix-ui/react-compose-refs");
var $aJPOC$radixuireactcontext = require("@radix-ui/react-context");
var $aJPOC$radixuireactdismissablelayer = require("@radix-ui/react-dismissable-layer");
var $aJPOC$radixuireactfocusguards = require("@radix-ui/react-focus-guards");
var $aJPOC$radixuireactfocusscope = require("@radix-ui/react-focus-scope");
var $aJPOC$radixuireactid = require("@radix-ui/react-id");
var $aJPOC$radixuireactpopper = require("@radix-ui/react-popper");
var $aJPOC$radixuireactportal = require("@radix-ui/react-portal");
var $aJPOC$radixuireactpresence = require("@radix-ui/react-presence");
var $aJPOC$radixuireactprimitive = require("@radix-ui/react-primitive");
var $aJPOC$radixuireactslot = require("@radix-ui/react-slot");
var $aJPOC$radixuireactusecontrollablestate = require("@radix-ui/react-use-controllable-state");
var $aJPOC$ariahidden = require("aria-hidden");
var $aJPOC$reactremovescroll = require("react-remove-scroll");
"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, "createPopoverScope", () => $7d632c09314cddaf$export$c8393c9e73286932);
$parcel$export(module.exports, "Popover", () => $7d632c09314cddaf$export$5b6b19405a83ff9d);
$parcel$export(module.exports, "PopoverAnchor", () => $7d632c09314cddaf$export$96e5381f42521a79);
$parcel$export(module.exports, "PopoverTrigger", () => $7d632c09314cddaf$export$7dacb05d26466c3);
$parcel$export(module.exports, "PopoverPortal", () => $7d632c09314cddaf$export$dd679ffb4362d2d4);
$parcel$export(module.exports, "PopoverContent", () => $7d632c09314cddaf$export$d7e1f420b25549ff);
$parcel$export(module.exports, "PopoverClose", () => $7d632c09314cddaf$export$d6ac43ebaa40d53e);
$parcel$export(module.exports, "PopoverArrow", () => $7d632c09314cddaf$export$3152841115e061b2);
$parcel$export(module.exports, "Root", () => $7d632c09314cddaf$export$be92b6f5f03c0fe9);
$parcel$export(module.exports, "Anchor", () => $7d632c09314cddaf$export$b688253958b8dfe7);
$parcel$export(module.exports, "Trigger", () => $7d632c09314cddaf$export$41fb9f06171c75f4);
$parcel$export(module.exports, "Portal", () => $7d632c09314cddaf$export$602eac185826482c);
$parcel$export(module.exports, "Content", () => $7d632c09314cddaf$export$7c6e2c02157bb7d2);
$parcel$export(module.exports, "Close", () => $7d632c09314cddaf$export$f39c2d165cd861fe);
$parcel$export(module.exports, "Arrow", () => $7d632c09314cddaf$export$21b07c8f274aebd5);
/* -------------------------------------------------------------------------------------------------
* Popover
* -----------------------------------------------------------------------------------------------*/ const $7d632c09314cddaf$var$POPOVER_NAME = 'Popover';
const [$7d632c09314cddaf$var$createPopoverContext, $7d632c09314cddaf$export$c8393c9e73286932] = $aJPOC$radixuireactcontext.createContextScope($7d632c09314cddaf$var$POPOVER_NAME, [
$aJPOC$radixuireactpopper.createPopperScope
]);
const $7d632c09314cddaf$var$usePopperScope = $aJPOC$radixuireactpopper.createPopperScope();
const [$7d632c09314cddaf$var$PopoverProvider, $7d632c09314cddaf$var$usePopoverContext] = $7d632c09314cddaf$var$createPopoverContext($7d632c09314cddaf$var$POPOVER_NAME);
const $7d632c09314cddaf$export$5b6b19405a83ff9d = (props)=>{
const { __scopePopover: __scopePopover , children: children , open: openProp , defaultOpen: defaultOpen , onOpenChange: onOpenChange , modal: modal = false } = props;
const popperScope = $7d632c09314cddaf$var$usePopperScope(__scopePopover);
const triggerRef = $aJPOC$react.useRef(null);
const [hasCustomAnchor, setHasCustomAnchor] = $aJPOC$react.useState(false);
const [open = false, setOpen] = $aJPOC$radixuireactusecontrollablestate.useControllableState({
prop: openProp,
defaultProp: defaultOpen,
onChange: onOpenChange
// packages/react/popover/src/Popover.tsx
var React = __toESM(__require("react"));
var import_primitive = __require("@radix-ui/primitive");
var import_react_compose_refs = __require("@radix-ui/react-compose-refs");
var import_react_context = __require("@radix-ui/react-context");
var import_react_dismissable_layer = __require("@radix-ui/react-dismissable-layer");
var import_react_focus_guards = __require("@radix-ui/react-focus-guards");
var import_react_focus_scope = __require("@radix-ui/react-focus-scope");
var import_react_id = __require("@radix-ui/react-id");
var PopperPrimitive = __toESM(__require("@radix-ui/react-popper"));
var import_react_popper = __require("@radix-ui/react-popper");
var import_react_portal = __require("@radix-ui/react-portal");
var import_react_presence = __require("@radix-ui/react-presence");
var import_react_primitive = __require("@radix-ui/react-primitive");
var import_react_slot = __require("@radix-ui/react-slot");
var import_react_use_controllable_state = __require("@radix-ui/react-use-controllable-state");
var import_aria_hidden = __require("aria-hidden");
var import_react_remove_scroll = __require("react-remove-scroll");
var import_jsx_runtime = __require("react/jsx-runtime");
var POPOVER_NAME = "Popover";
var [createPopoverContext, createPopoverScope] = (0, import_react_context.createContextScope)(POPOVER_NAME, [
import_react_popper.createPopperScope
]);
var usePopperScope = (0, import_react_popper.createPopperScope)();
var [PopoverProvider, usePopoverContext] = createPopoverContext(POPOVER_NAME);
var Popover = (props) => {
const {
__scopePopover,
children,
open: openProp,
defaultOpen,
onOpenChange,
modal = false
} = props;
const popperScope = usePopperScope(__scopePopover);
const triggerRef = React.useRef(null);
const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false);
const [open = false, setOpen] = (0, import_react_use_controllable_state.useControllableState)({
prop: openProp,
defaultProp: defaultOpen,
onChange: onOpenChange
});
return /*#__PURE__*/ $aJPOC$react.createElement($aJPOC$radixuireactpopper.Root, popperScope, /*#__PURE__*/ $aJPOC$react.createElement($7d632c09314cddaf$var$PopoverProvider, {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperPrimitive.Root, { ...popperScope, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
PopoverProvider,
{
scope: __scopePopover,
contentId: $aJPOC$radixuireactid.useId(),
triggerRef: triggerRef,
open: open,
contentId: (0, import_react_id.useId)(),
triggerRef,
open,
onOpenChange: setOpen,
onOpenToggle: $aJPOC$react.useCallback(()=>setOpen((prevOpen)=>!prevOpen
)
, [
setOpen
]),
hasCustomAnchor: hasCustomAnchor,
onCustomAnchorAdd: $aJPOC$react.useCallback(()=>setHasCustomAnchor(true)
, []),
onCustomAnchorRemove: $aJPOC$react.useCallback(()=>setHasCustomAnchor(false)
, []),
modal: modal
}, children));
};
/*#__PURE__*/ Object.assign($7d632c09314cddaf$export$5b6b19405a83ff9d, {
displayName: $7d632c09314cddaf$var$POPOVER_NAME
});
/* -------------------------------------------------------------------------------------------------
* PopoverAnchor
* -----------------------------------------------------------------------------------------------*/ const $7d632c09314cddaf$var$ANCHOR_NAME = 'PopoverAnchor';
const $7d632c09314cddaf$export$96e5381f42521a79 = /*#__PURE__*/ $aJPOC$react.forwardRef((props, forwardedRef)=>{
const { __scopePopover: __scopePopover , ...anchorProps } = props;
const context = $7d632c09314cddaf$var$usePopoverContext($7d632c09314cddaf$var$ANCHOR_NAME, __scopePopover);
const popperScope = $7d632c09314cddaf$var$usePopperScope(__scopePopover);
const { onCustomAnchorAdd: onCustomAnchorAdd , onCustomAnchorRemove: onCustomAnchorRemove } = context;
$aJPOC$react.useEffect(()=>{
onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
hasCustomAnchor,
onCustomAnchorAdd: React.useCallback(() => setHasCustomAnchor(true), []),
onCustomAnchorRemove: React.useCallback(() => setHasCustomAnchor(false), []),
modal,
children
}
) });
};
Popover.displayName = POPOVER_NAME;
var ANCHOR_NAME = "PopoverAnchor";
var PopoverAnchor = React.forwardRef(
(props, forwardedRef) => {
const { __scopePopover, ...anchorProps } = props;
const context = usePopoverContext(ANCHOR_NAME, __scopePopover);
const popperScope = usePopperScope(__scopePopover);
const { onCustomAnchorAdd, onCustomAnchorRemove } = context;
React.useEffect(() => {
onCustomAnchorAdd();
return ()=>onCustomAnchorRemove()
;
}, [
onCustomAnchorAdd,
onCustomAnchorRemove
]);
return /*#__PURE__*/ $aJPOC$react.createElement($aJPOC$radixuireactpopper.Anchor, ($parcel$interopDefault($aJPOC$babelruntimehelpersextends))({}, popperScope, anchorProps, {
ref: forwardedRef
}));
});
/*#__PURE__*/ Object.assign($7d632c09314cddaf$export$96e5381f42521a79, {
displayName: $7d632c09314cddaf$var$ANCHOR_NAME
});
/* -------------------------------------------------------------------------------------------------
* PopoverTrigger
* -----------------------------------------------------------------------------------------------*/ const $7d632c09314cddaf$var$TRIGGER_NAME = 'PopoverTrigger';
const $7d632c09314cddaf$export$7dacb05d26466c3 = /*#__PURE__*/ $aJPOC$react.forwardRef((props, forwardedRef)=>{
const { __scopePopover: __scopePopover , ...triggerProps } = props;
const context = $7d632c09314cddaf$var$usePopoverContext($7d632c09314cddaf$var$TRIGGER_NAME, __scopePopover);
const popperScope = $7d632c09314cddaf$var$usePopperScope(__scopePopover);
const composedTriggerRef = $aJPOC$radixuireactcomposerefs.useComposedRefs(forwardedRef, context.triggerRef);
const trigger = /*#__PURE__*/ $aJPOC$react.createElement($aJPOC$radixuireactprimitive.Primitive.button, ($parcel$interopDefault($aJPOC$babelruntimehelpersextends))({
type: "button",
"aria-haspopup": "dialog",
"aria-expanded": context.open,
"aria-controls": context.contentId,
"data-state": $7d632c09314cddaf$var$getState(context.open)
}, triggerProps, {
ref: composedTriggerRef,
onClick: $aJPOC$radixuiprimitive.composeEventHandlers(props.onClick, context.onOpenToggle)
}));
return context.hasCustomAnchor ? trigger : /*#__PURE__*/ $aJPOC$react.createElement($aJPOC$radixuireactpopper.Anchor, ($parcel$interopDefault($aJPOC$babelruntimehelpersextends))({
asChild: true
}, popperScope), trigger);
});
/*#__PURE__*/ Object.assign($7d632c09314cddaf$export$7dacb05d26466c3, {
displayName: $7d632c09314cddaf$var$TRIGGER_NAME
});
/* -------------------------------------------------------------------------------------------------
* PopoverPortal
* -----------------------------------------------------------------------------------------------*/ const $7d632c09314cddaf$var$PORTAL_NAME = 'PopoverPortal';
const [$7d632c09314cddaf$var$PortalProvider, $7d632c09314cddaf$var$usePortalContext] = $7d632c09314cddaf$var$createPopoverContext($7d632c09314cddaf$var$PORTAL_NAME, {
forceMount: undefined
});
const $7d632c09314cddaf$export$dd679ffb4362d2d4 = (props)=>{
const { __scopePopover: __scopePopover , forceMount: forceMount , children: children , container: container } = props;
const context = $7d632c09314cddaf$var$usePopoverContext($7d632c09314cddaf$var$PORTAL_NAME, __scopePopover);
return /*#__PURE__*/ $aJPOC$react.createElement($7d632c09314cddaf$var$PortalProvider, {
scope: __scopePopover,
forceMount: forceMount
}, /*#__PURE__*/ $aJPOC$react.createElement($aJPOC$radixuireactpresence.Presence, {
present: forceMount || context.open
}, /*#__PURE__*/ $aJPOC$react.createElement($aJPOC$radixuireactportal.Portal, {
asChild: true,
container: container
}, children)));
};
/*#__PURE__*/ Object.assign($7d632c09314cddaf$export$dd679ffb4362d2d4, {
displayName: $7d632c09314cddaf$var$PORTAL_NAME
});
/* -------------------------------------------------------------------------------------------------
* PopoverContent
* -----------------------------------------------------------------------------------------------*/ const $7d632c09314cddaf$var$CONTENT_NAME = 'PopoverContent';
const $7d632c09314cddaf$export$d7e1f420b25549ff = /*#__PURE__*/ $aJPOC$react.forwardRef((props, forwardedRef)=>{
const portalContext = $7d632c09314cddaf$var$usePortalContext($7d632c09314cddaf$var$CONTENT_NAME, props.__scopePopover);
const { forceMount: forceMount = portalContext.forceMount , ...contentProps } = props;
const context = $7d632c09314cddaf$var$usePopoverContext($7d632c09314cddaf$var$CONTENT_NAME, props.__scopePopover);
return /*#__PURE__*/ $aJPOC$react.createElement($aJPOC$radixuireactpresence.Presence, {
present: forceMount || context.open
}, context.modal ? /*#__PURE__*/ $aJPOC$react.createElement($7d632c09314cddaf$var$PopoverContentModal, ($parcel$interopDefault($aJPOC$babelruntimehelpersextends))({}, contentProps, {
ref: forwardedRef
})) : /*#__PURE__*/ $aJPOC$react.createElement($7d632c09314cddaf$var$PopoverContentNonModal, ($parcel$interopDefault($aJPOC$babelruntimehelpersextends))({}, contentProps, {
ref: forwardedRef
})));
});
/*#__PURE__*/ Object.assign($7d632c09314cddaf$export$d7e1f420b25549ff, {
displayName: $7d632c09314cddaf$var$CONTENT_NAME
});
/* -----------------------------------------------------------------------------------------------*/ const $7d632c09314cddaf$var$PopoverContentModal = /*#__PURE__*/ $aJPOC$react.forwardRef((props, forwardedRef)=>{
const context = $7d632c09314cddaf$var$usePopoverContext($7d632c09314cddaf$var$CONTENT_NAME, props.__scopePopover);
const contentRef = $aJPOC$react.useRef(null);
const composedRefs = $aJPOC$radixuireactcomposerefs.useComposedRefs(forwardedRef, contentRef);
const isRightClickOutsideRef = $aJPOC$react.useRef(false); // aria-hide everything except the content (better supported equivalent to setting aria-modal)
$aJPOC$react.useEffect(()=>{
return () => onCustomAnchorRemove();
}, [onCustomAnchorAdd, onCustomAnchorRemove]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperPrimitive.Anchor, { ...popperScope, ...anchorProps, ref: forwardedRef });
}
);
PopoverAnchor.displayName = ANCHOR_NAME;
var TRIGGER_NAME = "PopoverTrigger";
var PopoverTrigger = React.forwardRef(
(props, forwardedRef) => {
const { __scopePopover, ...triggerProps } = props;
const context = usePopoverContext(TRIGGER_NAME, __scopePopover);
const popperScope = usePopperScope(__scopePopover);
const composedTriggerRef = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, context.triggerRef);
const trigger = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_primitive.Primitive.button,
{
type: "button",
"aria-haspopup": "dialog",
"aria-expanded": context.open,
"aria-controls": context.contentId,
"data-state": getState(context.open),
...triggerProps,
ref: composedTriggerRef,
onClick: (0, import_primitive.composeEventHandlers)(props.onClick, context.onOpenToggle)
}
);
return context.hasCustomAnchor ? trigger : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperPrimitive.Anchor, { asChild: true, ...popperScope, children: trigger });
}
);
PopoverTrigger.displayName = TRIGGER_NAME;
var PORTAL_NAME = "PopoverPortal";
var [PortalProvider, usePortalContext] = createPopoverContext(PORTAL_NAME, {
forceMount: void 0
});
var PopoverPortal = (props) => {
const { __scopePopover, forceMount, children, container } = props;
const context = usePopoverContext(PORTAL_NAME, __scopePopover);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PortalProvider, { scope: __scopePopover, forceMount, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || context.open, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_portal.Portal, { asChild: true, container, children }) }) });
};
PopoverPortal.displayName = PORTAL_NAME;
var CONTENT_NAME = "PopoverContent";
var PopoverContent = React.forwardRef(
(props, forwardedRef) => {
const portalContext = usePortalContext(CONTENT_NAME, props.__scopePopover);
const { forceMount = portalContext.forceMount, ...contentProps } = props;
const context = usePopoverContext(CONTENT_NAME, props.__scopePopover);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || context.open, children: context.modal ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverContentNonModal, { ...contentProps, ref: forwardedRef }) });
}
);
PopoverContent.displayName = CONTENT_NAME;
var PopoverContentModal = React.forwardRef(
(props, forwardedRef) => {
const context = usePopoverContext(CONTENT_NAME, props.__scopePopover);
const contentRef = React.useRef(null);
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, contentRef);
const isRightClickOutsideRef = React.useRef(false);
React.useEffect(() => {
const content = contentRef.current;
if (content) return $aJPOC$ariahidden.hideOthers(content);
}, []);
return /*#__PURE__*/ $aJPOC$react.createElement($aJPOC$reactremovescroll.RemoveScroll, {
as: $aJPOC$radixuireactslot.Slot,
allowPinchZoom: true
}, /*#__PURE__*/ $aJPOC$react.createElement($7d632c09314cddaf$var$PopoverContentImpl, ($parcel$interopDefault($aJPOC$babelruntimehelpersextends))({}, props, {
ref: composedRefs // we make sure we're not trapping once it's been closed
,
trapFocus: context.open,
disableOutsidePointerEvents: true,
onCloseAutoFocus: $aJPOC$radixuiprimitive.composeEventHandlers(props.onCloseAutoFocus, (event)=>{
var _context$triggerRef$c;
if (content) return (0, import_aria_hidden.hideOthers)(content);
}, []);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_remove_scroll.RemoveScroll, { as: import_react_slot.Slot, allowPinchZoom: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
PopoverContentImpl,
{
...props,
ref: composedRefs,
trapFocus: context.open,
disableOutsidePointerEvents: true,
onCloseAutoFocus: (0, import_primitive.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
event.preventDefault();
if (!isRightClickOutsideRef.current) (_context$triggerRef$c = context.triggerRef.current) === null || _context$triggerRef$c === void 0 || _context$triggerRef$c.focus();
}),
onPointerDownOutside: $aJPOC$radixuiprimitive.composeEventHandlers(props.onPointerDownOutside, (event)=>{
const originalEvent = event.detail.originalEvent;
const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
isRightClickOutsideRef.current = isRightClick;
}, {
checkForDefaultPrevented: false
}) // When focus is trapped, a `focusout` event may still happen.
,
onFocusOutside: $aJPOC$radixuiprimitive.composeEventHandlers(props.onFocusOutside, (event)=>event.preventDefault()
, {
checkForDefaultPrevented: false
})
})));
});
const $7d632c09314cddaf$var$PopoverContentNonModal = /*#__PURE__*/ $aJPOC$react.forwardRef((props, forwardedRef)=>{
const context = $7d632c09314cddaf$var$usePopoverContext($7d632c09314cddaf$var$CONTENT_NAME, props.__scopePopover);
const hasInteractedOutsideRef = $aJPOC$react.useRef(false);
const hasPointerDownOutsideRef = $aJPOC$react.useRef(false);
return /*#__PURE__*/ $aJPOC$react.createElement($7d632c09314cddaf$var$PopoverContentImpl, ($parcel$interopDefault($aJPOC$babelruntimehelpersextends))({}, props, {
ref: forwardedRef,
trapFocus: false,
disableOutsidePointerEvents: false,
onCloseAutoFocus: (event)=>{
var _props$onCloseAutoFoc;
(_props$onCloseAutoFoc = props.onCloseAutoFocus) === null || _props$onCloseAutoFoc === void 0 || _props$onCloseAutoFoc.call(props, event);
if (!isRightClickOutsideRef.current) context.triggerRef.current?.focus();
}),
onPointerDownOutside: (0, import_primitive.composeEventHandlers)(
props.onPointerDownOutside,
(event) => {
const originalEvent = event.detail.originalEvent;
const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
isRightClickOutsideRef.current = isRightClick;
},
{ checkForDefaultPrevented: false }
),
onFocusOutside: (0, import_primitive.composeEventHandlers)(
props.onFocusOutside,
(event) => event.preventDefault(),
{ checkForDefaultPrevented: false }
)
}
) });
}
);
var PopoverContentNonModal = React.forwardRef(
(props, forwardedRef) => {
const context = usePopoverContext(CONTENT_NAME, props.__scopePopover);
const hasInteractedOutsideRef = React.useRef(false);
const hasPointerDownOutsideRef = React.useRef(false);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
PopoverContentImpl,
{
...props,
ref: forwardedRef,
trapFocus: false,
disableOutsidePointerEvents: false,
onCloseAutoFocus: (event) => {
props.onCloseAutoFocus?.(event);
if (!event.defaultPrevented) {
var _context$triggerRef$c2;
if (!hasInteractedOutsideRef.current) (_context$triggerRef$c2 = context.triggerRef.current) === null || _context$triggerRef$c2 === void 0 || _context$triggerRef$c2.focus(); // Always prevent auto focus because we either focus manually or want user agent focus
event.preventDefault();
if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();
event.preventDefault();
}
hasInteractedOutsideRef.current = false;
hasPointerDownOutsideRef.current = false;
},
onInteractOutside: (event)=>{
var _props$onInteractOuts, _context$triggerRef$c3;
(_props$onInteractOuts = props.onInteractOutside) === null || _props$onInteractOuts === void 0 || _props$onInteractOuts.call(props, event);
},
onInteractOutside: (event) => {
props.onInteractOutside?.(event);
if (!event.defaultPrevented) {
hasInteractedOutsideRef.current = true;
if (event.detail.originalEvent.type === 'pointerdown') hasPointerDownOutsideRef.current = true;
} // Prevent dismissing when clicking the trigger.
// As the trigger is already setup to close, without doing so would
// cause it to close and immediately open.
hasInteractedOutsideRef.current = true;
if (event.detail.originalEvent.type === "pointerdown") {
hasPointerDownOutsideRef.current = true;
}
}
const target = event.target;
const targetIsTrigger = (_context$triggerRef$c3 = context.triggerRef.current) === null || _context$triggerRef$c3 === void 0 ? void 0 : _context$triggerRef$c3.contains(target);
if (targetIsTrigger) event.preventDefault(); // On Safari if the trigger is inside a container with tabIndex={0}, when clicked
// we will get the pointer down outside event on the trigger, but then a subsequent
// focus outside event on the container, we ignore any focus outside event when we've
// already had a pointer down outside event.
if (event.detail.originalEvent.type === 'focusin' && hasPointerDownOutsideRef.current) event.preventDefault();
const targetIsTrigger = context.triggerRef.current?.contains(target);
if (targetIsTrigger) event.preventDefault();
if (event.detail.originalEvent.type === "focusin" && hasPointerDownOutsideRef.current) {
event.preventDefault();
}
}
}
}));
});
/* -----------------------------------------------------------------------------------------------*/ const $7d632c09314cddaf$var$PopoverContentImpl = /*#__PURE__*/ $aJPOC$react.forwardRef((props, forwardedRef)=>{
const { __scopePopover: __scopePopover , trapFocus: trapFocus , onOpenAutoFocus: onOpenAutoFocus , onCloseAutoFocus: onCloseAutoFocus , disableOutsidePointerEvents: disableOutsidePointerEvents , onEscapeKeyDown: onEscapeKeyDown , onPointerDownOutside: onPointerDownOutside , onFocusOutside: onFocusOutside , onInteractOutside: onInteractOutside , ...contentProps } = props;
const context = $7d632c09314cddaf$var$usePopoverContext($7d632c09314cddaf$var$CONTENT_NAME, __scopePopover);
const popperScope = $7d632c09314cddaf$var$usePopperScope(__scopePopover); // Make sure the whole tree has focus guards as our `Popover` may be
// the last element in the DOM (beacuse of the `Portal`)
$aJPOC$radixuireactfocusguards.useFocusGuards();
return /*#__PURE__*/ $aJPOC$react.createElement($aJPOC$radixuireactfocusscope.FocusScope, {
asChild: true,
loop: true,
trapped: trapFocus,
onMountAutoFocus: onOpenAutoFocus,
onUnmountAutoFocus: onCloseAutoFocus
}, /*#__PURE__*/ $aJPOC$react.createElement($aJPOC$radixuireactdismissablelayer.DismissableLayer, {
asChild: true,
disableOutsidePointerEvents: disableOutsidePointerEvents,
onInteractOutside: onInteractOutside,
onEscapeKeyDown: onEscapeKeyDown,
onPointerDownOutside: onPointerDownOutside,
onFocusOutside: onFocusOutside,
onDismiss: ()=>context.onOpenChange(false)
}, /*#__PURE__*/ $aJPOC$react.createElement($aJPOC$radixuireactpopper.Content, ($parcel$interopDefault($aJPOC$babelruntimehelpersextends))({
"data-state": $7d632c09314cddaf$var$getState(context.open),
role: "dialog",
id: context.contentId
}, popperScope, contentProps, {
ref: forwardedRef,
style: {
...contentProps.style,
'--radix-popover-content-transform-origin': 'var(--radix-popper-transform-origin)',
'--radix-popover-content-available-width': 'var(--radix-popper-available-width)',
'--radix-popover-content-available-height': 'var(--radix-popper-available-height)',
'--radix-popover-trigger-width': 'var(--radix-popper-anchor-width)',
'--radix-popover-trigger-height': 'var(--radix-popper-anchor-height)'
);
}
);
var PopoverContentImpl = React.forwardRef(
(props, forwardedRef) => {
const {
__scopePopover,
trapFocus,
onOpenAutoFocus,
onCloseAutoFocus,
disableOutsidePointerEvents,
onEscapeKeyDown,
onPointerDownOutside,
onFocusOutside,
onInteractOutside,
...contentProps
} = props;
const context = usePopoverContext(CONTENT_NAME, __scopePopover);
const popperScope = usePopperScope(__scopePopover);
(0, import_react_focus_guards.useFocusGuards)();
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_focus_scope.FocusScope,
{
asChild: true,
loop: true,
trapped: trapFocus,
onMountAutoFocus: onOpenAutoFocus,
onUnmountAutoFocus: onCloseAutoFocus,
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_dismissable_layer.DismissableLayer,
{
asChild: true,
disableOutsidePointerEvents,
onInteractOutside,
onEscapeKeyDown,
onPointerDownOutside,
onFocusOutside,
onDismiss: () => context.onOpenChange(false),
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
PopperPrimitive.Content,
{
"data-state": getState(context.open),
role: "dialog",
id: context.contentId,
...popperScope,
...contentProps,
ref: forwardedRef,
style: {
...contentProps.style,
// re-namespace exposed content custom properties
...{
"--radix-popover-content-transform-origin": "var(--radix-popper-transform-origin)",
"--radix-popover-content-available-width": "var(--radix-popper-available-width)",
"--radix-popover-content-available-height": "var(--radix-popper-available-height)",
"--radix-popover-trigger-width": "var(--radix-popper-anchor-width)",
"--radix-popover-trigger-height": "var(--radix-popper-anchor-height)"
}
}
}
)
}
)
}
}))));
});
/* -------------------------------------------------------------------------------------------------
* PopoverClose
* -----------------------------------------------------------------------------------------------*/ const $7d632c09314cddaf$var$CLOSE_NAME = 'PopoverClose';
const $7d632c09314cddaf$export$d6ac43ebaa40d53e = /*#__PURE__*/ $aJPOC$react.forwardRef((props, forwardedRef)=>{
const { __scopePopover: __scopePopover , ...closeProps } = props;
const context = $7d632c09314cddaf$var$usePopoverContext($7d632c09314cddaf$var$CLOSE_NAME, __scopePopover);
return /*#__PURE__*/ $aJPOC$react.createElement($aJPOC$radixuireactprimitive.Primitive.button, ($parcel$interopDefault($aJPOC$babelruntimehelpersextends))({
type: "button"
}, closeProps, {
ref: forwardedRef,
onClick: $aJPOC$radixuiprimitive.composeEventHandlers(props.onClick, ()=>context.onOpenChange(false)
)
}));
});
/*#__PURE__*/ Object.assign($7d632c09314cddaf$export$d6ac43ebaa40d53e, {
displayName: $7d632c09314cddaf$var$CLOSE_NAME
});
/* -------------------------------------------------------------------------------------------------
* PopoverArrow
* -----------------------------------------------------------------------------------------------*/ const $7d632c09314cddaf$var$ARROW_NAME = 'PopoverArrow';
const $7d632c09314cddaf$export$3152841115e061b2 = /*#__PURE__*/ $aJPOC$react.forwardRef((props, forwardedRef)=>{
const { __scopePopover: __scopePopover , ...arrowProps } = props;
const popperScope = $7d632c09314cddaf$var$usePopperScope(__scopePopover);
return /*#__PURE__*/ $aJPOC$react.createElement($aJPOC$radixuireactpopper.Arrow, ($parcel$interopDefault($aJPOC$babelruntimehelpersextends))({}, popperScope, arrowProps, {
ref: forwardedRef
}));
});
/*#__PURE__*/ Object.assign($7d632c09314cddaf$export$3152841115e061b2, {
displayName: $7d632c09314cddaf$var$ARROW_NAME
});
/* -----------------------------------------------------------------------------------------------*/ function $7d632c09314cddaf$var$getState(open) {
return open ? 'open' : 'closed';
}
const $7d632c09314cddaf$export$be92b6f5f03c0fe9 = $7d632c09314cddaf$export$5b6b19405a83ff9d;
const $7d632c09314cddaf$export$b688253958b8dfe7 = $7d632c09314cddaf$export$96e5381f42521a79;
const $7d632c09314cddaf$export$41fb9f06171c75f4 = $7d632c09314cddaf$export$7dacb05d26466c3;
const $7d632c09314cddaf$export$602eac185826482c = $7d632c09314cddaf$export$dd679ffb4362d2d4;
const $7d632c09314cddaf$export$7c6e2c02157bb7d2 = $7d632c09314cddaf$export$d7e1f420b25549ff;
const $7d632c09314cddaf$export$f39c2d165cd861fe = $7d632c09314cddaf$export$d6ac43ebaa40d53e;
const $7d632c09314cddaf$export$21b07c8f274aebd5 = $7d632c09314cddaf$export$3152841115e061b2;
);
}
);
var CLOSE_NAME = "PopoverClose";
var PopoverClose = React.forwardRef(
(props, forwardedRef) => {
const { __scopePopover, ...closeProps } = props;
const context = usePopoverContext(CLOSE_NAME, __scopePopover);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_primitive.Primitive.button,
{
type: "button",
...closeProps,
ref: forwardedRef,
onClick: (0, import_primitive.composeEventHandlers)(props.onClick, () => context.onOpenChange(false))
}
);
}
);
PopoverClose.displayName = CLOSE_NAME;
var ARROW_NAME = "PopoverArrow";
var PopoverArrow = React.forwardRef(
(props, forwardedRef) => {
const { __scopePopover, ...arrowProps } = props;
const popperScope = usePopperScope(__scopePopover);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperPrimitive.Arrow, { ...popperScope, ...arrowProps, ref: forwardedRef });
}
);
PopoverArrow.displayName = ARROW_NAME;
function getState(open) {
return open ? "open" : "closed";
}
var Root2 = Popover;
var Anchor2 = PopoverAnchor;
var Trigger = PopoverTrigger;
var Portal = PopoverPortal;
var Content2 = PopoverContent;
var Close = PopoverClose;
var Arrow2 = PopoverArrow;
})();
//# sourceMappingURL=index.js.map

29

package.json
{
"name": "@radix-ui/react-popover",
"version": "1.0.8-rc.9",
"version": "1.1.0-rc.1",
"license": "MIT",

@@ -31,16 +31,15 @@ "exports": {

"dependencies": {
"@babel/runtime": "^7.13.10",
"@radix-ui/primitive": "1.0.1",
"@radix-ui/react-compose-refs": "1.0.1",
"@radix-ui/react-context": "1.0.1",
"@radix-ui/react-dismissable-layer": "1.0.6-rc.6",
"@radix-ui/react-focus-guards": "1.0.1",
"@radix-ui/react-focus-scope": "1.0.4",
"@radix-ui/react-id": "1.0.1",
"@radix-ui/react-popper": "1.1.4-rc.9",
"@radix-ui/react-portal": "1.0.4",
"@radix-ui/react-presence": "1.0.1",
"@radix-ui/react-primitive": "1.0.3",
"@radix-ui/react-slot": "1.0.2",
"@radix-ui/react-use-controllable-state": "1.0.1",
"@radix-ui/primitive": "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-dismissable-layer": "1.1.0-rc.1",
"@radix-ui/react-focus-guards": "1.1.0-rc.1",
"@radix-ui/react-focus-scope": "1.1.0-rc.1",
"@radix-ui/react-id": "1.1.0-rc.1",
"@radix-ui/react-popper": "1.2.0-rc.1",
"@radix-ui/react-portal": "1.1.0-rc.1",
"@radix-ui/react-presence": "1.1.0-rc.1",
"@radix-ui/react-primitive": "1.1.0-rc.1",
"@radix-ui/react-slot": "1.1.0-rc.1",
"@radix-ui/react-use-controllable-state": "1.1.0-rc.1",
"aria-hidden": "^1.1.1",

@@ -47,0 +46,0 @@ "react-remove-scroll": "2.5.7"

dist/index.d.ts.map
dist/index.d.mts

Sorry, the diff of this file is not supported yet

dist/index.js.map

Sorry, the diff of this file is not supported yet

dist/index.mjs

Sorry, the diff of this file is not supported yet

dist/index.mjs.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc