@radix-ui/react-popover 1.0.8-rc.9 → 1.1.0-rc.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -1,342 +1,331 @@
1
- var $aJPOC$babelruntimehelpersextends = require("@babel/runtime/helpers/extends");
2
- var $aJPOC$react = require("react");
3
- var $aJPOC$radixuiprimitive = require("@radix-ui/primitive");
4
- var $aJPOC$radixuireactcomposerefs = require("@radix-ui/react-compose-refs");
5
- var $aJPOC$radixuireactcontext = require("@radix-ui/react-context");
6
- var $aJPOC$radixuireactdismissablelayer = require("@radix-ui/react-dismissable-layer");
7
- var $aJPOC$radixuireactfocusguards = require("@radix-ui/react-focus-guards");
8
- var $aJPOC$radixuireactfocusscope = require("@radix-ui/react-focus-scope");
9
- var $aJPOC$radixuireactid = require("@radix-ui/react-id");
10
- var $aJPOC$radixuireactpopper = require("@radix-ui/react-popper");
11
- var $aJPOC$radixuireactportal = require("@radix-ui/react-portal");
12
- var $aJPOC$radixuireactpresence = require("@radix-ui/react-presence");
13
- var $aJPOC$radixuireactprimitive = require("@radix-ui/react-primitive");
14
- var $aJPOC$radixuireactslot = require("@radix-ui/react-slot");
15
- var $aJPOC$radixuireactusecontrollablestate = require("@radix-ui/react-use-controllable-state");
16
- var $aJPOC$ariahidden = require("aria-hidden");
17
- var $aJPOC$reactremovescroll = require("react-remove-scroll");
1
+ "use strict";
2
+ (() => {
3
+ var __create = Object.create;
4
+ var __defProp = Object.defineProperty;
5
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
+ var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __getProtoOf = Object.getPrototypeOf;
8
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
9
+ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
10
+ get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
11
+ }) : x)(function(x) {
12
+ if (typeof require !== "undefined") return require.apply(this, arguments);
13
+ throw Error('Dynamic require of "' + x + '" is not supported');
14
+ });
15
+ var __copyProps = (to, from, except, desc) => {
16
+ if (from && typeof from === "object" || typeof from === "function") {
17
+ for (let key of __getOwnPropNames(from))
18
+ if (!__hasOwnProp.call(to, key) && key !== except)
19
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
20
+ }
21
+ return to;
22
+ };
23
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
24
+ // If the importer is in node compatibility mode or this is not an ESM
25
+ // file that has been converted to a CommonJS file using a Babel-
26
+ // compatible transform (i.e. "__esModule" has not been set), then set
27
+ // "default" to the CommonJS "module.exports" for node compatibility.
28
+ isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
29
+ mod
30
+ ));
18
31
 
19
- function $parcel$export(e, n, v, s) {
20
- Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
21
- }
22
- function $parcel$interopDefault(a) {
23
- return a && a.__esModule ? a.default : a;
24
- }
25
-
26
- $parcel$export(module.exports, "createPopoverScope", () => $7d632c09314cddaf$export$c8393c9e73286932);
27
- $parcel$export(module.exports, "Popover", () => $7d632c09314cddaf$export$5b6b19405a83ff9d);
28
- $parcel$export(module.exports, "PopoverAnchor", () => $7d632c09314cddaf$export$96e5381f42521a79);
29
- $parcel$export(module.exports, "PopoverTrigger", () => $7d632c09314cddaf$export$7dacb05d26466c3);
30
- $parcel$export(module.exports, "PopoverPortal", () => $7d632c09314cddaf$export$dd679ffb4362d2d4);
31
- $parcel$export(module.exports, "PopoverContent", () => $7d632c09314cddaf$export$d7e1f420b25549ff);
32
- $parcel$export(module.exports, "PopoverClose", () => $7d632c09314cddaf$export$d6ac43ebaa40d53e);
33
- $parcel$export(module.exports, "PopoverArrow", () => $7d632c09314cddaf$export$3152841115e061b2);
34
- $parcel$export(module.exports, "Root", () => $7d632c09314cddaf$export$be92b6f5f03c0fe9);
35
- $parcel$export(module.exports, "Anchor", () => $7d632c09314cddaf$export$b688253958b8dfe7);
36
- $parcel$export(module.exports, "Trigger", () => $7d632c09314cddaf$export$41fb9f06171c75f4);
37
- $parcel$export(module.exports, "Portal", () => $7d632c09314cddaf$export$602eac185826482c);
38
- $parcel$export(module.exports, "Content", () => $7d632c09314cddaf$export$7c6e2c02157bb7d2);
39
- $parcel$export(module.exports, "Close", () => $7d632c09314cddaf$export$f39c2d165cd861fe);
40
- $parcel$export(module.exports, "Arrow", () => $7d632c09314cddaf$export$21b07c8f274aebd5);
41
-
42
-
43
-
44
-
45
-
46
-
47
-
48
-
49
-
50
-
51
-
52
-
53
-
54
-
55
-
56
-
57
-
58
-
59
- /* -------------------------------------------------------------------------------------------------
60
- * Popover
61
- * -----------------------------------------------------------------------------------------------*/ const $7d632c09314cddaf$var$POPOVER_NAME = 'Popover';
62
- const [$7d632c09314cddaf$var$createPopoverContext, $7d632c09314cddaf$export$c8393c9e73286932] = $aJPOC$radixuireactcontext.createContextScope($7d632c09314cddaf$var$POPOVER_NAME, [
63
- $aJPOC$radixuireactpopper.createPopperScope
64
- ]);
65
- const $7d632c09314cddaf$var$usePopperScope = $aJPOC$radixuireactpopper.createPopperScope();
66
- const [$7d632c09314cddaf$var$PopoverProvider, $7d632c09314cddaf$var$usePopoverContext] = $7d632c09314cddaf$var$createPopoverContext($7d632c09314cddaf$var$POPOVER_NAME);
67
- const $7d632c09314cddaf$export$5b6b19405a83ff9d = (props)=>{
68
- const { __scopePopover: __scopePopover , children: children , open: openProp , defaultOpen: defaultOpen , onOpenChange: onOpenChange , modal: modal = false } = props;
69
- const popperScope = $7d632c09314cddaf$var$usePopperScope(__scopePopover);
70
- const triggerRef = $aJPOC$react.useRef(null);
71
- const [hasCustomAnchor, setHasCustomAnchor] = $aJPOC$react.useState(false);
72
- const [open = false, setOpen] = $aJPOC$radixuireactusecontrollablestate.useControllableState({
73
- prop: openProp,
74
- defaultProp: defaultOpen,
75
- onChange: onOpenChange
32
+ // packages/react/popover/src/Popover.tsx
33
+ var React = __toESM(__require("react"));
34
+ var import_primitive = __require("@radix-ui/primitive");
35
+ var import_react_compose_refs = __require("@radix-ui/react-compose-refs");
36
+ var import_react_context = __require("@radix-ui/react-context");
37
+ var import_react_dismissable_layer = __require("@radix-ui/react-dismissable-layer");
38
+ var import_react_focus_guards = __require("@radix-ui/react-focus-guards");
39
+ var import_react_focus_scope = __require("@radix-ui/react-focus-scope");
40
+ var import_react_id = __require("@radix-ui/react-id");
41
+ var PopperPrimitive = __toESM(__require("@radix-ui/react-popper"));
42
+ var import_react_popper = __require("@radix-ui/react-popper");
43
+ var import_react_portal = __require("@radix-ui/react-portal");
44
+ var import_react_presence = __require("@radix-ui/react-presence");
45
+ var import_react_primitive = __require("@radix-ui/react-primitive");
46
+ var import_react_slot = __require("@radix-ui/react-slot");
47
+ var import_react_use_controllable_state = __require("@radix-ui/react-use-controllable-state");
48
+ var import_aria_hidden = __require("aria-hidden");
49
+ var import_react_remove_scroll = __require("react-remove-scroll");
50
+ var import_jsx_runtime = __require("react/jsx-runtime");
51
+ var POPOVER_NAME = "Popover";
52
+ var [createPopoverContext, createPopoverScope] = (0, import_react_context.createContextScope)(POPOVER_NAME, [
53
+ import_react_popper.createPopperScope
54
+ ]);
55
+ var usePopperScope = (0, import_react_popper.createPopperScope)();
56
+ var [PopoverProvider, usePopoverContext] = createPopoverContext(POPOVER_NAME);
57
+ var Popover = (props) => {
58
+ const {
59
+ __scopePopover,
60
+ children,
61
+ open: openProp,
62
+ defaultOpen,
63
+ onOpenChange,
64
+ modal = false
65
+ } = props;
66
+ const popperScope = usePopperScope(__scopePopover);
67
+ const triggerRef = React.useRef(null);
68
+ const [hasCustomAnchor, setHasCustomAnchor] = React.useState(false);
69
+ const [open = false, setOpen] = (0, import_react_use_controllable_state.useControllableState)({
70
+ prop: openProp,
71
+ defaultProp: defaultOpen,
72
+ onChange: onOpenChange
76
73
  });
77
- return /*#__PURE__*/ $aJPOC$react.createElement($aJPOC$radixuireactpopper.Root, popperScope, /*#__PURE__*/ $aJPOC$react.createElement($7d632c09314cddaf$var$PopoverProvider, {
74
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperPrimitive.Root, { ...popperScope, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
75
+ PopoverProvider,
76
+ {
78
77
  scope: __scopePopover,
79
- contentId: $aJPOC$radixuireactid.useId(),
80
- triggerRef: triggerRef,
81
- open: open,
78
+ contentId: (0, import_react_id.useId)(),
79
+ triggerRef,
80
+ open,
82
81
  onOpenChange: setOpen,
83
- onOpenToggle: $aJPOC$react.useCallback(()=>setOpen((prevOpen)=>!prevOpen
84
- )
85
- , [
86
- setOpen
87
- ]),
88
- hasCustomAnchor: hasCustomAnchor,
89
- onCustomAnchorAdd: $aJPOC$react.useCallback(()=>setHasCustomAnchor(true)
90
- , []),
91
- onCustomAnchorRemove: $aJPOC$react.useCallback(()=>setHasCustomAnchor(false)
92
- , []),
93
- modal: modal
94
- }, children));
95
- };
96
- /*#__PURE__*/ Object.assign($7d632c09314cddaf$export$5b6b19405a83ff9d, {
97
- displayName: $7d632c09314cddaf$var$POPOVER_NAME
98
- });
99
- /* -------------------------------------------------------------------------------------------------
100
- * PopoverAnchor
101
- * -----------------------------------------------------------------------------------------------*/ const $7d632c09314cddaf$var$ANCHOR_NAME = 'PopoverAnchor';
102
- const $7d632c09314cddaf$export$96e5381f42521a79 = /*#__PURE__*/ $aJPOC$react.forwardRef((props, forwardedRef)=>{
103
- const { __scopePopover: __scopePopover , ...anchorProps } = props;
104
- const context = $7d632c09314cddaf$var$usePopoverContext($7d632c09314cddaf$var$ANCHOR_NAME, __scopePopover);
105
- const popperScope = $7d632c09314cddaf$var$usePopperScope(__scopePopover);
106
- const { onCustomAnchorAdd: onCustomAnchorAdd , onCustomAnchorRemove: onCustomAnchorRemove } = context;
107
- $aJPOC$react.useEffect(()=>{
82
+ onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
83
+ hasCustomAnchor,
84
+ onCustomAnchorAdd: React.useCallback(() => setHasCustomAnchor(true), []),
85
+ onCustomAnchorRemove: React.useCallback(() => setHasCustomAnchor(false), []),
86
+ modal,
87
+ children
88
+ }
89
+ ) });
90
+ };
91
+ Popover.displayName = POPOVER_NAME;
92
+ var ANCHOR_NAME = "PopoverAnchor";
93
+ var PopoverAnchor = React.forwardRef(
94
+ (props, forwardedRef) => {
95
+ const { __scopePopover, ...anchorProps } = props;
96
+ const context = usePopoverContext(ANCHOR_NAME, __scopePopover);
97
+ const popperScope = usePopperScope(__scopePopover);
98
+ const { onCustomAnchorAdd, onCustomAnchorRemove } = context;
99
+ React.useEffect(() => {
108
100
  onCustomAnchorAdd();
109
- return ()=>onCustomAnchorRemove()
110
- ;
111
- }, [
112
- onCustomAnchorAdd,
113
- onCustomAnchorRemove
114
- ]);
115
- return /*#__PURE__*/ $aJPOC$react.createElement($aJPOC$radixuireactpopper.Anchor, ($parcel$interopDefault($aJPOC$babelruntimehelpersextends))({}, popperScope, anchorProps, {
116
- ref: forwardedRef
117
- }));
118
- });
119
- /*#__PURE__*/ Object.assign($7d632c09314cddaf$export$96e5381f42521a79, {
120
- displayName: $7d632c09314cddaf$var$ANCHOR_NAME
121
- });
122
- /* -------------------------------------------------------------------------------------------------
123
- * PopoverTrigger
124
- * -----------------------------------------------------------------------------------------------*/ const $7d632c09314cddaf$var$TRIGGER_NAME = 'PopoverTrigger';
125
- const $7d632c09314cddaf$export$7dacb05d26466c3 = /*#__PURE__*/ $aJPOC$react.forwardRef((props, forwardedRef)=>{
126
- const { __scopePopover: __scopePopover , ...triggerProps } = props;
127
- const context = $7d632c09314cddaf$var$usePopoverContext($7d632c09314cddaf$var$TRIGGER_NAME, __scopePopover);
128
- const popperScope = $7d632c09314cddaf$var$usePopperScope(__scopePopover);
129
- const composedTriggerRef = $aJPOC$radixuireactcomposerefs.useComposedRefs(forwardedRef, context.triggerRef);
130
- const trigger = /*#__PURE__*/ $aJPOC$react.createElement($aJPOC$radixuireactprimitive.Primitive.button, ($parcel$interopDefault($aJPOC$babelruntimehelpersextends))({
131
- type: "button",
132
- "aria-haspopup": "dialog",
133
- "aria-expanded": context.open,
134
- "aria-controls": context.contentId,
135
- "data-state": $7d632c09314cddaf$var$getState(context.open)
136
- }, triggerProps, {
137
- ref: composedTriggerRef,
138
- onClick: $aJPOC$radixuiprimitive.composeEventHandlers(props.onClick, context.onOpenToggle)
139
- }));
140
- return context.hasCustomAnchor ? trigger : /*#__PURE__*/ $aJPOC$react.createElement($aJPOC$radixuireactpopper.Anchor, ($parcel$interopDefault($aJPOC$babelruntimehelpersextends))({
141
- asChild: true
142
- }, popperScope), trigger);
143
- });
144
- /*#__PURE__*/ Object.assign($7d632c09314cddaf$export$7dacb05d26466c3, {
145
- displayName: $7d632c09314cddaf$var$TRIGGER_NAME
146
- });
147
- /* -------------------------------------------------------------------------------------------------
148
- * PopoverPortal
149
- * -----------------------------------------------------------------------------------------------*/ const $7d632c09314cddaf$var$PORTAL_NAME = 'PopoverPortal';
150
- const [$7d632c09314cddaf$var$PortalProvider, $7d632c09314cddaf$var$usePortalContext] = $7d632c09314cddaf$var$createPopoverContext($7d632c09314cddaf$var$PORTAL_NAME, {
151
- forceMount: undefined
152
- });
153
- const $7d632c09314cddaf$export$dd679ffb4362d2d4 = (props)=>{
154
- const { __scopePopover: __scopePopover , forceMount: forceMount , children: children , container: container } = props;
155
- const context = $7d632c09314cddaf$var$usePopoverContext($7d632c09314cddaf$var$PORTAL_NAME, __scopePopover);
156
- return /*#__PURE__*/ $aJPOC$react.createElement($7d632c09314cddaf$var$PortalProvider, {
157
- scope: __scopePopover,
158
- forceMount: forceMount
159
- }, /*#__PURE__*/ $aJPOC$react.createElement($aJPOC$radixuireactpresence.Presence, {
160
- present: forceMount || context.open
161
- }, /*#__PURE__*/ $aJPOC$react.createElement($aJPOC$radixuireactportal.Portal, {
162
- asChild: true,
163
- container: container
164
- }, children)));
165
- };
166
- /*#__PURE__*/ Object.assign($7d632c09314cddaf$export$dd679ffb4362d2d4, {
167
- displayName: $7d632c09314cddaf$var$PORTAL_NAME
168
- });
169
- /* -------------------------------------------------------------------------------------------------
170
- * PopoverContent
171
- * -----------------------------------------------------------------------------------------------*/ const $7d632c09314cddaf$var$CONTENT_NAME = 'PopoverContent';
172
- const $7d632c09314cddaf$export$d7e1f420b25549ff = /*#__PURE__*/ $aJPOC$react.forwardRef((props, forwardedRef)=>{
173
- const portalContext = $7d632c09314cddaf$var$usePortalContext($7d632c09314cddaf$var$CONTENT_NAME, props.__scopePopover);
174
- const { forceMount: forceMount = portalContext.forceMount , ...contentProps } = props;
175
- const context = $7d632c09314cddaf$var$usePopoverContext($7d632c09314cddaf$var$CONTENT_NAME, props.__scopePopover);
176
- return /*#__PURE__*/ $aJPOC$react.createElement($aJPOC$radixuireactpresence.Presence, {
177
- present: forceMount || context.open
178
- }, context.modal ? /*#__PURE__*/ $aJPOC$react.createElement($7d632c09314cddaf$var$PopoverContentModal, ($parcel$interopDefault($aJPOC$babelruntimehelpersextends))({}, contentProps, {
179
- ref: forwardedRef
180
- })) : /*#__PURE__*/ $aJPOC$react.createElement($7d632c09314cddaf$var$PopoverContentNonModal, ($parcel$interopDefault($aJPOC$babelruntimehelpersextends))({}, contentProps, {
181
- ref: forwardedRef
182
- })));
183
- });
184
- /*#__PURE__*/ Object.assign($7d632c09314cddaf$export$d7e1f420b25549ff, {
185
- displayName: $7d632c09314cddaf$var$CONTENT_NAME
186
- });
187
- /* -----------------------------------------------------------------------------------------------*/ const $7d632c09314cddaf$var$PopoverContentModal = /*#__PURE__*/ $aJPOC$react.forwardRef((props, forwardedRef)=>{
188
- const context = $7d632c09314cddaf$var$usePopoverContext($7d632c09314cddaf$var$CONTENT_NAME, props.__scopePopover);
189
- const contentRef = $aJPOC$react.useRef(null);
190
- const composedRefs = $aJPOC$radixuireactcomposerefs.useComposedRefs(forwardedRef, contentRef);
191
- const isRightClickOutsideRef = $aJPOC$react.useRef(false); // aria-hide everything except the content (better supported equivalent to setting aria-modal)
192
- $aJPOC$react.useEffect(()=>{
101
+ return () => onCustomAnchorRemove();
102
+ }, [onCustomAnchorAdd, onCustomAnchorRemove]);
103
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperPrimitive.Anchor, { ...popperScope, ...anchorProps, ref: forwardedRef });
104
+ }
105
+ );
106
+ PopoverAnchor.displayName = ANCHOR_NAME;
107
+ var TRIGGER_NAME = "PopoverTrigger";
108
+ var PopoverTrigger = React.forwardRef(
109
+ (props, forwardedRef) => {
110
+ const { __scopePopover, ...triggerProps } = props;
111
+ const context = usePopoverContext(TRIGGER_NAME, __scopePopover);
112
+ const popperScope = usePopperScope(__scopePopover);
113
+ const composedTriggerRef = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, context.triggerRef);
114
+ const trigger = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
115
+ import_react_primitive.Primitive.button,
116
+ {
117
+ type: "button",
118
+ "aria-haspopup": "dialog",
119
+ "aria-expanded": context.open,
120
+ "aria-controls": context.contentId,
121
+ "data-state": getState(context.open),
122
+ ...triggerProps,
123
+ ref: composedTriggerRef,
124
+ onClick: (0, import_primitive.composeEventHandlers)(props.onClick, context.onOpenToggle)
125
+ }
126
+ );
127
+ return context.hasCustomAnchor ? trigger : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperPrimitive.Anchor, { asChild: true, ...popperScope, children: trigger });
128
+ }
129
+ );
130
+ PopoverTrigger.displayName = TRIGGER_NAME;
131
+ var PORTAL_NAME = "PopoverPortal";
132
+ var [PortalProvider, usePortalContext] = createPopoverContext(PORTAL_NAME, {
133
+ forceMount: void 0
134
+ });
135
+ var PopoverPortal = (props) => {
136
+ const { __scopePopover, forceMount, children, container } = props;
137
+ const context = usePopoverContext(PORTAL_NAME, __scopePopover);
138
+ 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 }) }) });
139
+ };
140
+ PopoverPortal.displayName = PORTAL_NAME;
141
+ var CONTENT_NAME = "PopoverContent";
142
+ var PopoverContent = React.forwardRef(
143
+ (props, forwardedRef) => {
144
+ const portalContext = usePortalContext(CONTENT_NAME, props.__scopePopover);
145
+ const { forceMount = portalContext.forceMount, ...contentProps } = props;
146
+ const context = usePopoverContext(CONTENT_NAME, props.__scopePopover);
147
+ 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 }) });
148
+ }
149
+ );
150
+ PopoverContent.displayName = CONTENT_NAME;
151
+ var PopoverContentModal = React.forwardRef(
152
+ (props, forwardedRef) => {
153
+ const context = usePopoverContext(CONTENT_NAME, props.__scopePopover);
154
+ const contentRef = React.useRef(null);
155
+ const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, contentRef);
156
+ const isRightClickOutsideRef = React.useRef(false);
157
+ React.useEffect(() => {
193
158
  const content = contentRef.current;
194
- if (content) return $aJPOC$ariahidden.hideOthers(content);
195
- }, []);
196
- return /*#__PURE__*/ $aJPOC$react.createElement($aJPOC$reactremovescroll.RemoveScroll, {
197
- as: $aJPOC$radixuireactslot.Slot,
198
- allowPinchZoom: true
199
- }, /*#__PURE__*/ $aJPOC$react.createElement($7d632c09314cddaf$var$PopoverContentImpl, ($parcel$interopDefault($aJPOC$babelruntimehelpersextends))({}, props, {
200
- ref: composedRefs // we make sure we're not trapping once it's been closed
201
- ,
202
- trapFocus: context.open,
203
- disableOutsidePointerEvents: true,
204
- onCloseAutoFocus: $aJPOC$radixuiprimitive.composeEventHandlers(props.onCloseAutoFocus, (event)=>{
205
- var _context$triggerRef$c;
159
+ if (content) return (0, import_aria_hidden.hideOthers)(content);
160
+ }, []);
161
+ 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)(
162
+ PopoverContentImpl,
163
+ {
164
+ ...props,
165
+ ref: composedRefs,
166
+ trapFocus: context.open,
167
+ disableOutsidePointerEvents: true,
168
+ onCloseAutoFocus: (0, import_primitive.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
206
169
  event.preventDefault();
207
- if (!isRightClickOutsideRef.current) (_context$triggerRef$c = context.triggerRef.current) === null || _context$triggerRef$c === void 0 || _context$triggerRef$c.focus();
208
- }),
209
- onPointerDownOutside: $aJPOC$radixuiprimitive.composeEventHandlers(props.onPointerDownOutside, (event)=>{
210
- const originalEvent = event.detail.originalEvent;
211
- const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
212
- const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
213
- isRightClickOutsideRef.current = isRightClick;
214
- }, {
215
- checkForDefaultPrevented: false
216
- }) // When focus is trapped, a `focusout` event may still happen.
217
- ,
218
- onFocusOutside: $aJPOC$radixuiprimitive.composeEventHandlers(props.onFocusOutside, (event)=>event.preventDefault()
219
- , {
220
- checkForDefaultPrevented: false
221
- })
222
- })));
223
- });
224
- const $7d632c09314cddaf$var$PopoverContentNonModal = /*#__PURE__*/ $aJPOC$react.forwardRef((props, forwardedRef)=>{
225
- const context = $7d632c09314cddaf$var$usePopoverContext($7d632c09314cddaf$var$CONTENT_NAME, props.__scopePopover);
226
- const hasInteractedOutsideRef = $aJPOC$react.useRef(false);
227
- const hasPointerDownOutsideRef = $aJPOC$react.useRef(false);
228
- return /*#__PURE__*/ $aJPOC$react.createElement($7d632c09314cddaf$var$PopoverContentImpl, ($parcel$interopDefault($aJPOC$babelruntimehelpersextends))({}, props, {
229
- ref: forwardedRef,
230
- trapFocus: false,
231
- disableOutsidePointerEvents: false,
232
- onCloseAutoFocus: (event)=>{
233
- var _props$onCloseAutoFoc;
234
- (_props$onCloseAutoFoc = props.onCloseAutoFocus) === null || _props$onCloseAutoFoc === void 0 || _props$onCloseAutoFoc.call(props, event);
170
+ if (!isRightClickOutsideRef.current) context.triggerRef.current?.focus();
171
+ }),
172
+ onPointerDownOutside: (0, import_primitive.composeEventHandlers)(
173
+ props.onPointerDownOutside,
174
+ (event) => {
175
+ const originalEvent = event.detail.originalEvent;
176
+ const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
177
+ const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
178
+ isRightClickOutsideRef.current = isRightClick;
179
+ },
180
+ { checkForDefaultPrevented: false }
181
+ ),
182
+ onFocusOutside: (0, import_primitive.composeEventHandlers)(
183
+ props.onFocusOutside,
184
+ (event) => event.preventDefault(),
185
+ { checkForDefaultPrevented: false }
186
+ )
187
+ }
188
+ ) });
189
+ }
190
+ );
191
+ var PopoverContentNonModal = React.forwardRef(
192
+ (props, forwardedRef) => {
193
+ const context = usePopoverContext(CONTENT_NAME, props.__scopePopover);
194
+ const hasInteractedOutsideRef = React.useRef(false);
195
+ const hasPointerDownOutsideRef = React.useRef(false);
196
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
197
+ PopoverContentImpl,
198
+ {
199
+ ...props,
200
+ ref: forwardedRef,
201
+ trapFocus: false,
202
+ disableOutsidePointerEvents: false,
203
+ onCloseAutoFocus: (event) => {
204
+ props.onCloseAutoFocus?.(event);
235
205
  if (!event.defaultPrevented) {
236
- var _context$triggerRef$c2;
237
- 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
238
- event.preventDefault();
206
+ if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();
207
+ event.preventDefault();
239
208
  }
240
209
  hasInteractedOutsideRef.current = false;
241
210
  hasPointerDownOutsideRef.current = false;
242
- },
243
- onInteractOutside: (event)=>{
244
- var _props$onInteractOuts, _context$triggerRef$c3;
245
- (_props$onInteractOuts = props.onInteractOutside) === null || _props$onInteractOuts === void 0 || _props$onInteractOuts.call(props, event);
211
+ },
212
+ onInteractOutside: (event) => {
213
+ props.onInteractOutside?.(event);
246
214
  if (!event.defaultPrevented) {
247
- hasInteractedOutsideRef.current = true;
248
- if (event.detail.originalEvent.type === 'pointerdown') hasPointerDownOutsideRef.current = true;
249
- } // Prevent dismissing when clicking the trigger.
250
- // As the trigger is already setup to close, without doing so would
251
- // cause it to close and immediately open.
215
+ hasInteractedOutsideRef.current = true;
216
+ if (event.detail.originalEvent.type === "pointerdown") {
217
+ hasPointerDownOutsideRef.current = true;
218
+ }
219
+ }
252
220
  const target = event.target;
253
- const targetIsTrigger = (_context$triggerRef$c3 = context.triggerRef.current) === null || _context$triggerRef$c3 === void 0 ? void 0 : _context$triggerRef$c3.contains(target);
254
- if (targetIsTrigger) event.preventDefault(); // On Safari if the trigger is inside a container with tabIndex={0}, when clicked
255
- // we will get the pointer down outside event on the trigger, but then a subsequent
256
- // focus outside event on the container, we ignore any focus outside event when we've
257
- // already had a pointer down outside event.
258
- if (event.detail.originalEvent.type === 'focusin' && hasPointerDownOutsideRef.current) event.preventDefault();
221
+ const targetIsTrigger = context.triggerRef.current?.contains(target);
222
+ if (targetIsTrigger) event.preventDefault();
223
+ if (event.detail.originalEvent.type === "focusin" && hasPointerDownOutsideRef.current) {
224
+ event.preventDefault();
225
+ }
226
+ }
259
227
  }
260
- }));
261
- });
262
- /* -----------------------------------------------------------------------------------------------*/ const $7d632c09314cddaf$var$PopoverContentImpl = /*#__PURE__*/ $aJPOC$react.forwardRef((props, forwardedRef)=>{
263
- const { __scopePopover: __scopePopover , trapFocus: trapFocus , onOpenAutoFocus: onOpenAutoFocus , onCloseAutoFocus: onCloseAutoFocus , disableOutsidePointerEvents: disableOutsidePointerEvents , onEscapeKeyDown: onEscapeKeyDown , onPointerDownOutside: onPointerDownOutside , onFocusOutside: onFocusOutside , onInteractOutside: onInteractOutside , ...contentProps } = props;
264
- const context = $7d632c09314cddaf$var$usePopoverContext($7d632c09314cddaf$var$CONTENT_NAME, __scopePopover);
265
- const popperScope = $7d632c09314cddaf$var$usePopperScope(__scopePopover); // Make sure the whole tree has focus guards as our `Popover` may be
266
- // the last element in the DOM (beacuse of the `Portal`)
267
- $aJPOC$radixuireactfocusguards.useFocusGuards();
268
- return /*#__PURE__*/ $aJPOC$react.createElement($aJPOC$radixuireactfocusscope.FocusScope, {
269
- asChild: true,
270
- loop: true,
271
- trapped: trapFocus,
272
- onMountAutoFocus: onOpenAutoFocus,
273
- onUnmountAutoFocus: onCloseAutoFocus
274
- }, /*#__PURE__*/ $aJPOC$react.createElement($aJPOC$radixuireactdismissablelayer.DismissableLayer, {
275
- asChild: true,
276
- disableOutsidePointerEvents: disableOutsidePointerEvents,
277
- onInteractOutside: onInteractOutside,
278
- onEscapeKeyDown: onEscapeKeyDown,
279
- onPointerDownOutside: onPointerDownOutside,
280
- onFocusOutside: onFocusOutside,
281
- onDismiss: ()=>context.onOpenChange(false)
282
- }, /*#__PURE__*/ $aJPOC$react.createElement($aJPOC$radixuireactpopper.Content, ($parcel$interopDefault($aJPOC$babelruntimehelpersextends))({
283
- "data-state": $7d632c09314cddaf$var$getState(context.open),
284
- role: "dialog",
285
- id: context.contentId
286
- }, popperScope, contentProps, {
287
- ref: forwardedRef,
288
- style: {
289
- ...contentProps.style,
290
- '--radix-popover-content-transform-origin': 'var(--radix-popper-transform-origin)',
291
- '--radix-popover-content-available-width': 'var(--radix-popper-available-width)',
292
- '--radix-popover-content-available-height': 'var(--radix-popper-available-height)',
293
- '--radix-popover-trigger-width': 'var(--radix-popper-anchor-width)',
294
- '--radix-popover-trigger-height': 'var(--radix-popper-anchor-height)'
228
+ );
229
+ }
230
+ );
231
+ var PopoverContentImpl = React.forwardRef(
232
+ (props, forwardedRef) => {
233
+ const {
234
+ __scopePopover,
235
+ trapFocus,
236
+ onOpenAutoFocus,
237
+ onCloseAutoFocus,
238
+ disableOutsidePointerEvents,
239
+ onEscapeKeyDown,
240
+ onPointerDownOutside,
241
+ onFocusOutside,
242
+ onInteractOutside,
243
+ ...contentProps
244
+ } = props;
245
+ const context = usePopoverContext(CONTENT_NAME, __scopePopover);
246
+ const popperScope = usePopperScope(__scopePopover);
247
+ (0, import_react_focus_guards.useFocusGuards)();
248
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
249
+ import_react_focus_scope.FocusScope,
250
+ {
251
+ asChild: true,
252
+ loop: true,
253
+ trapped: trapFocus,
254
+ onMountAutoFocus: onOpenAutoFocus,
255
+ onUnmountAutoFocus: onCloseAutoFocus,
256
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
257
+ import_react_dismissable_layer.DismissableLayer,
258
+ {
259
+ asChild: true,
260
+ disableOutsidePointerEvents,
261
+ onInteractOutside,
262
+ onEscapeKeyDown,
263
+ onPointerDownOutside,
264
+ onFocusOutside,
265
+ onDismiss: () => context.onOpenChange(false),
266
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
267
+ PopperPrimitive.Content,
268
+ {
269
+ "data-state": getState(context.open),
270
+ role: "dialog",
271
+ id: context.contentId,
272
+ ...popperScope,
273
+ ...contentProps,
274
+ ref: forwardedRef,
275
+ style: {
276
+ ...contentProps.style,
277
+ // re-namespace exposed content custom properties
278
+ ...{
279
+ "--radix-popover-content-transform-origin": "var(--radix-popper-transform-origin)",
280
+ "--radix-popover-content-available-width": "var(--radix-popper-available-width)",
281
+ "--radix-popover-content-available-height": "var(--radix-popper-available-height)",
282
+ "--radix-popover-trigger-width": "var(--radix-popper-anchor-width)",
283
+ "--radix-popover-trigger-height": "var(--radix-popper-anchor-height)"
284
+ }
285
+ }
286
+ }
287
+ )
288
+ }
289
+ )
295
290
  }
296
- }))));
297
- });
298
- /* -------------------------------------------------------------------------------------------------
299
- * PopoverClose
300
- * -----------------------------------------------------------------------------------------------*/ const $7d632c09314cddaf$var$CLOSE_NAME = 'PopoverClose';
301
- const $7d632c09314cddaf$export$d6ac43ebaa40d53e = /*#__PURE__*/ $aJPOC$react.forwardRef((props, forwardedRef)=>{
302
- const { __scopePopover: __scopePopover , ...closeProps } = props;
303
- const context = $7d632c09314cddaf$var$usePopoverContext($7d632c09314cddaf$var$CLOSE_NAME, __scopePopover);
304
- return /*#__PURE__*/ $aJPOC$react.createElement($aJPOC$radixuireactprimitive.Primitive.button, ($parcel$interopDefault($aJPOC$babelruntimehelpersextends))({
305
- type: "button"
306
- }, closeProps, {
307
- ref: forwardedRef,
308
- onClick: $aJPOC$radixuiprimitive.composeEventHandlers(props.onClick, ()=>context.onOpenChange(false)
309
- )
310
- }));
311
- });
312
- /*#__PURE__*/ Object.assign($7d632c09314cddaf$export$d6ac43ebaa40d53e, {
313
- displayName: $7d632c09314cddaf$var$CLOSE_NAME
314
- });
315
- /* -------------------------------------------------------------------------------------------------
316
- * PopoverArrow
317
- * -----------------------------------------------------------------------------------------------*/ const $7d632c09314cddaf$var$ARROW_NAME = 'PopoverArrow';
318
- const $7d632c09314cddaf$export$3152841115e061b2 = /*#__PURE__*/ $aJPOC$react.forwardRef((props, forwardedRef)=>{
319
- const { __scopePopover: __scopePopover , ...arrowProps } = props;
320
- const popperScope = $7d632c09314cddaf$var$usePopperScope(__scopePopover);
321
- return /*#__PURE__*/ $aJPOC$react.createElement($aJPOC$radixuireactpopper.Arrow, ($parcel$interopDefault($aJPOC$babelruntimehelpersextends))({}, popperScope, arrowProps, {
322
- ref: forwardedRef
323
- }));
324
- });
325
- /*#__PURE__*/ Object.assign($7d632c09314cddaf$export$3152841115e061b2, {
326
- displayName: $7d632c09314cddaf$var$ARROW_NAME
327
- });
328
- /* -----------------------------------------------------------------------------------------------*/ function $7d632c09314cddaf$var$getState(open) {
329
- return open ? 'open' : 'closed';
330
- }
331
- const $7d632c09314cddaf$export$be92b6f5f03c0fe9 = $7d632c09314cddaf$export$5b6b19405a83ff9d;
332
- const $7d632c09314cddaf$export$b688253958b8dfe7 = $7d632c09314cddaf$export$96e5381f42521a79;
333
- const $7d632c09314cddaf$export$41fb9f06171c75f4 = $7d632c09314cddaf$export$7dacb05d26466c3;
334
- const $7d632c09314cddaf$export$602eac185826482c = $7d632c09314cddaf$export$dd679ffb4362d2d4;
335
- const $7d632c09314cddaf$export$7c6e2c02157bb7d2 = $7d632c09314cddaf$export$d7e1f420b25549ff;
336
- const $7d632c09314cddaf$export$f39c2d165cd861fe = $7d632c09314cddaf$export$d6ac43ebaa40d53e;
337
- const $7d632c09314cddaf$export$21b07c8f274aebd5 = $7d632c09314cddaf$export$3152841115e061b2;
338
-
339
-
340
-
341
-
291
+ );
292
+ }
293
+ );
294
+ var CLOSE_NAME = "PopoverClose";
295
+ var PopoverClose = React.forwardRef(
296
+ (props, forwardedRef) => {
297
+ const { __scopePopover, ...closeProps } = props;
298
+ const context = usePopoverContext(CLOSE_NAME, __scopePopover);
299
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
300
+ import_react_primitive.Primitive.button,
301
+ {
302
+ type: "button",
303
+ ...closeProps,
304
+ ref: forwardedRef,
305
+ onClick: (0, import_primitive.composeEventHandlers)(props.onClick, () => context.onOpenChange(false))
306
+ }
307
+ );
308
+ }
309
+ );
310
+ PopoverClose.displayName = CLOSE_NAME;
311
+ var ARROW_NAME = "PopoverArrow";
312
+ var PopoverArrow = React.forwardRef(
313
+ (props, forwardedRef) => {
314
+ const { __scopePopover, ...arrowProps } = props;
315
+ const popperScope = usePopperScope(__scopePopover);
316
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopperPrimitive.Arrow, { ...popperScope, ...arrowProps, ref: forwardedRef });
317
+ }
318
+ );
319
+ PopoverArrow.displayName = ARROW_NAME;
320
+ function getState(open) {
321
+ return open ? "open" : "closed";
322
+ }
323
+ var Root2 = Popover;
324
+ var Anchor2 = PopoverAnchor;
325
+ var Trigger = PopoverTrigger;
326
+ var Portal = PopoverPortal;
327
+ var Content2 = PopoverContent;
328
+ var Close = PopoverClose;
329
+ var Arrow2 = PopoverArrow;
330
+ })();
342
331
  //# sourceMappingURL=index.js.map