@radix-ui/react-dialog 1.0.6-rc.6 → 1.1.0-rc.2
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.d.mts +52 -40
- package/dist/index.d.ts +52 -40
- package/dist/index.js +325 -363
- package/dist/index.js.map +7 -1
- package/dist/index.mjs +310 -335
- package/dist/index.mjs.map +7 -1
- package/package.json +13 -14
- package/dist/index.d.ts.map +0 -1
package/dist/index.js
CHANGED
|
@@ -1,389 +1,351 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
var
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
var
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
var
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
(() => {
|
|
4
|
+
var __create = Object.create;
|
|
5
|
+
var __defProp = Object.defineProperty;
|
|
6
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
7
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
8
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
9
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
10
|
+
var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
|
|
11
|
+
get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
|
|
12
|
+
}) : x)(function(x) {
|
|
13
|
+
if (typeof require !== "undefined") return require.apply(this, arguments);
|
|
14
|
+
throw Error('Dynamic require of "' + x + '" is not supported');
|
|
15
|
+
});
|
|
16
|
+
var __copyProps = (to, from, except, desc) => {
|
|
17
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
18
|
+
for (let key of __getOwnPropNames(from))
|
|
19
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
20
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
21
|
+
}
|
|
22
|
+
return to;
|
|
23
|
+
};
|
|
24
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
25
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
26
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
27
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
28
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
29
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
30
|
+
mod
|
|
31
|
+
));
|
|
17
32
|
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
/* -------------------------------------------------------------------------------------------------
|
|
60
|
-
* Dialog
|
|
61
|
-
* -----------------------------------------------------------------------------------------------*/ const $f4833395aa1bca1a$var$DIALOG_NAME = 'Dialog';
|
|
62
|
-
const [$f4833395aa1bca1a$var$createDialogContext, $f4833395aa1bca1a$export$cc702773b8ea3e41] = $aJCrN$radixuireactcontext.createContextScope($f4833395aa1bca1a$var$DIALOG_NAME);
|
|
63
|
-
const [$f4833395aa1bca1a$var$DialogProvider, $f4833395aa1bca1a$var$useDialogContext] = $f4833395aa1bca1a$var$createDialogContext($f4833395aa1bca1a$var$DIALOG_NAME);
|
|
64
|
-
const $f4833395aa1bca1a$export$3ddf2d174ce01153 = (props)=>{
|
|
65
|
-
const { __scopeDialog: __scopeDialog , children: children , open: openProp , defaultOpen: defaultOpen , onOpenChange: onOpenChange , modal: modal = true } = props;
|
|
66
|
-
const triggerRef = $aJCrN$react.useRef(null);
|
|
67
|
-
const contentRef = $aJCrN$react.useRef(null);
|
|
68
|
-
const [open = false, setOpen] = $aJCrN$radixuireactusecontrollablestate.useControllableState({
|
|
69
|
-
prop: openProp,
|
|
70
|
-
defaultProp: defaultOpen,
|
|
71
|
-
onChange: onOpenChange
|
|
33
|
+
// packages/react/dialog/src/Dialog.tsx
|
|
34
|
+
var React = __toESM(__require("react"));
|
|
35
|
+
var import_primitive = __require("@radix-ui/primitive");
|
|
36
|
+
var import_react_compose_refs = __require("@radix-ui/react-compose-refs");
|
|
37
|
+
var import_react_context = __require("@radix-ui/react-context");
|
|
38
|
+
var import_react_id = __require("@radix-ui/react-id");
|
|
39
|
+
var import_react_use_controllable_state = __require("@radix-ui/react-use-controllable-state");
|
|
40
|
+
var import_react_dismissable_layer = __require("@radix-ui/react-dismissable-layer");
|
|
41
|
+
var import_react_focus_scope = __require("@radix-ui/react-focus-scope");
|
|
42
|
+
var import_react_portal = __require("@radix-ui/react-portal");
|
|
43
|
+
var import_react_presence = __require("@radix-ui/react-presence");
|
|
44
|
+
var import_react_primitive = __require("@radix-ui/react-primitive");
|
|
45
|
+
var import_react_focus_guards = __require("@radix-ui/react-focus-guards");
|
|
46
|
+
var import_react_remove_scroll = __require("react-remove-scroll");
|
|
47
|
+
var import_aria_hidden = __require("aria-hidden");
|
|
48
|
+
var import_react_slot = __require("@radix-ui/react-slot");
|
|
49
|
+
var import_jsx_runtime = __require("react/jsx-runtime");
|
|
50
|
+
var DIALOG_NAME = "Dialog";
|
|
51
|
+
var [createDialogContext, createDialogScope] = (0, import_react_context.createContextScope)(DIALOG_NAME);
|
|
52
|
+
var [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME);
|
|
53
|
+
var Dialog = (props) => {
|
|
54
|
+
const {
|
|
55
|
+
__scopeDialog,
|
|
56
|
+
children,
|
|
57
|
+
open: openProp,
|
|
58
|
+
defaultOpen,
|
|
59
|
+
onOpenChange,
|
|
60
|
+
modal = true
|
|
61
|
+
} = props;
|
|
62
|
+
const triggerRef = React.useRef(null);
|
|
63
|
+
const contentRef = React.useRef(null);
|
|
64
|
+
const [open = false, setOpen] = (0, import_react_use_controllable_state.useControllableState)({
|
|
65
|
+
prop: openProp,
|
|
66
|
+
defaultProp: defaultOpen,
|
|
67
|
+
onChange: onOpenChange
|
|
72
68
|
});
|
|
73
|
-
return
|
|
69
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
70
|
+
DialogProvider,
|
|
71
|
+
{
|
|
74
72
|
scope: __scopeDialog,
|
|
75
|
-
triggerRef
|
|
76
|
-
contentRef
|
|
77
|
-
contentId:
|
|
78
|
-
titleId:
|
|
79
|
-
descriptionId:
|
|
80
|
-
open
|
|
73
|
+
triggerRef,
|
|
74
|
+
contentRef,
|
|
75
|
+
contentId: (0, import_react_id.useId)(),
|
|
76
|
+
titleId: (0, import_react_id.useId)(),
|
|
77
|
+
descriptionId: (0, import_react_id.useId)(),
|
|
78
|
+
open,
|
|
81
79
|
onOpenChange: setOpen,
|
|
82
|
-
onOpenToggle:
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
}, triggerProps, {
|
|
107
|
-
ref: composedTriggerRef,
|
|
108
|
-
onClick: $aJCrN$radixuiprimitive.composeEventHandlers(props.onClick, context.onOpenToggle)
|
|
109
|
-
}));
|
|
110
|
-
});
|
|
111
|
-
/*#__PURE__*/ Object.assign($f4833395aa1bca1a$export$2e1e1122cf0cba88, {
|
|
112
|
-
displayName: $f4833395aa1bca1a$var$TRIGGER_NAME
|
|
113
|
-
});
|
|
114
|
-
/* -------------------------------------------------------------------------------------------------
|
|
115
|
-
* DialogPortal
|
|
116
|
-
* -----------------------------------------------------------------------------------------------*/ const $f4833395aa1bca1a$var$PORTAL_NAME = 'DialogPortal';
|
|
117
|
-
const [$f4833395aa1bca1a$var$PortalProvider, $f4833395aa1bca1a$var$usePortalContext] = $f4833395aa1bca1a$var$createDialogContext($f4833395aa1bca1a$var$PORTAL_NAME, {
|
|
118
|
-
forceMount: undefined
|
|
119
|
-
});
|
|
120
|
-
const $f4833395aa1bca1a$export$dad7c95542bacce0 = (props)=>{
|
|
121
|
-
const { __scopeDialog: __scopeDialog , forceMount: forceMount , children: children , container: container } = props;
|
|
122
|
-
const context = $f4833395aa1bca1a$var$useDialogContext($f4833395aa1bca1a$var$PORTAL_NAME, __scopeDialog);
|
|
123
|
-
return /*#__PURE__*/ $aJCrN$react.createElement($f4833395aa1bca1a$var$PortalProvider, {
|
|
124
|
-
scope: __scopeDialog,
|
|
125
|
-
forceMount: forceMount
|
|
126
|
-
}, $aJCrN$react.Children.map(children, (child)=>/*#__PURE__*/ $aJCrN$react.createElement($aJCrN$radixuireactpresence.Presence, {
|
|
127
|
-
present: forceMount || context.open
|
|
128
|
-
}, /*#__PURE__*/ $aJCrN$react.createElement($aJCrN$radixuireactportal.Portal, {
|
|
129
|
-
asChild: true,
|
|
130
|
-
container: container
|
|
131
|
-
}, child))
|
|
132
|
-
));
|
|
133
|
-
};
|
|
134
|
-
/*#__PURE__*/ Object.assign($f4833395aa1bca1a$export$dad7c95542bacce0, {
|
|
135
|
-
displayName: $f4833395aa1bca1a$var$PORTAL_NAME
|
|
136
|
-
});
|
|
137
|
-
/* -------------------------------------------------------------------------------------------------
|
|
138
|
-
* DialogOverlay
|
|
139
|
-
* -----------------------------------------------------------------------------------------------*/ const $f4833395aa1bca1a$var$OVERLAY_NAME = 'DialogOverlay';
|
|
140
|
-
const $f4833395aa1bca1a$export$bd1d06c79be19e17 = /*#__PURE__*/ $aJCrN$react.forwardRef((props, forwardedRef)=>{
|
|
141
|
-
const portalContext = $f4833395aa1bca1a$var$usePortalContext($f4833395aa1bca1a$var$OVERLAY_NAME, props.__scopeDialog);
|
|
142
|
-
const { forceMount: forceMount = portalContext.forceMount , ...overlayProps } = props;
|
|
143
|
-
const context = $f4833395aa1bca1a$var$useDialogContext($f4833395aa1bca1a$var$OVERLAY_NAME, props.__scopeDialog);
|
|
144
|
-
return context.modal ? /*#__PURE__*/ $aJCrN$react.createElement($aJCrN$radixuireactpresence.Presence, {
|
|
145
|
-
present: forceMount || context.open
|
|
146
|
-
}, /*#__PURE__*/ $aJCrN$react.createElement($f4833395aa1bca1a$var$DialogOverlayImpl, ($parcel$interopDefault($aJCrN$babelruntimehelpersextends))({}, overlayProps, {
|
|
147
|
-
ref: forwardedRef
|
|
148
|
-
}))) : null;
|
|
149
|
-
});
|
|
150
|
-
/*#__PURE__*/ Object.assign($f4833395aa1bca1a$export$bd1d06c79be19e17, {
|
|
151
|
-
displayName: $f4833395aa1bca1a$var$OVERLAY_NAME
|
|
152
|
-
});
|
|
153
|
-
const $f4833395aa1bca1a$var$DialogOverlayImpl = /*#__PURE__*/ $aJCrN$react.forwardRef((props, forwardedRef)=>{
|
|
154
|
-
const { __scopeDialog: __scopeDialog , ...overlayProps } = props;
|
|
155
|
-
const context = $f4833395aa1bca1a$var$useDialogContext($f4833395aa1bca1a$var$OVERLAY_NAME, __scopeDialog);
|
|
156
|
-
return(/*#__PURE__*/ // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
|
|
157
|
-
// ie. when `Overlay` and `Content` are siblings
|
|
158
|
-
$aJCrN$react.createElement($aJCrN$reactremovescroll.RemoveScroll, {
|
|
159
|
-
as: $aJCrN$radixuireactslot.Slot,
|
|
160
|
-
allowPinchZoom: true,
|
|
161
|
-
shards: [
|
|
162
|
-
context.contentRef
|
|
163
|
-
]
|
|
164
|
-
}, /*#__PURE__*/ $aJCrN$react.createElement($aJCrN$radixuireactprimitive.Primitive.div, ($parcel$interopDefault($aJCrN$babelruntimehelpersextends))({
|
|
165
|
-
"data-state": $f4833395aa1bca1a$var$getState(context.open)
|
|
166
|
-
}, overlayProps, {
|
|
167
|
-
ref: forwardedRef // We re-enable pointer-events prevented by `Dialog.Content` to allow scrolling the overlay.
|
|
168
|
-
,
|
|
169
|
-
style: {
|
|
170
|
-
pointerEvents: 'auto',
|
|
171
|
-
...overlayProps.style
|
|
80
|
+
onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
|
|
81
|
+
modal,
|
|
82
|
+
children
|
|
83
|
+
}
|
|
84
|
+
);
|
|
85
|
+
};
|
|
86
|
+
Dialog.displayName = DIALOG_NAME;
|
|
87
|
+
var TRIGGER_NAME = "DialogTrigger";
|
|
88
|
+
var DialogTrigger = React.forwardRef(
|
|
89
|
+
(props, forwardedRef) => {
|
|
90
|
+
const { __scopeDialog, ...triggerProps } = props;
|
|
91
|
+
const context = useDialogContext(TRIGGER_NAME, __scopeDialog);
|
|
92
|
+
const composedTriggerRef = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, context.triggerRef);
|
|
93
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
94
|
+
import_react_primitive.Primitive.button,
|
|
95
|
+
{
|
|
96
|
+
type: "button",
|
|
97
|
+
"aria-haspopup": "dialog",
|
|
98
|
+
"aria-expanded": context.open,
|
|
99
|
+
"aria-controls": context.contentId,
|
|
100
|
+
"data-state": getState(context.open),
|
|
101
|
+
...triggerProps,
|
|
102
|
+
ref: composedTriggerRef,
|
|
103
|
+
onClick: (0, import_primitive.composeEventHandlers)(props.onClick, context.onOpenToggle)
|
|
172
104
|
}
|
|
173
|
-
|
|
174
|
-
}
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
/*
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
105
|
+
);
|
|
106
|
+
}
|
|
107
|
+
);
|
|
108
|
+
DialogTrigger.displayName = TRIGGER_NAME;
|
|
109
|
+
var PORTAL_NAME = "DialogPortal";
|
|
110
|
+
var [PortalProvider, usePortalContext] = createDialogContext(PORTAL_NAME, {
|
|
111
|
+
forceMount: void 0
|
|
112
|
+
});
|
|
113
|
+
var DialogPortal = (props) => {
|
|
114
|
+
const { __scopeDialog, forceMount, children, container } = props;
|
|
115
|
+
const context = useDialogContext(PORTAL_NAME, __scopeDialog);
|
|
116
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PortalProvider, { scope: __scopeDialog, forceMount, children: React.Children.map(children, (child) => /* @__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: child }) })) });
|
|
117
|
+
};
|
|
118
|
+
DialogPortal.displayName = PORTAL_NAME;
|
|
119
|
+
var OVERLAY_NAME = "DialogOverlay";
|
|
120
|
+
var DialogOverlay = React.forwardRef(
|
|
121
|
+
(props, forwardedRef) => {
|
|
122
|
+
const portalContext = usePortalContext(OVERLAY_NAME, props.__scopeDialog);
|
|
123
|
+
const { forceMount = portalContext.forceMount, ...overlayProps } = props;
|
|
124
|
+
const context = useDialogContext(OVERLAY_NAME, props.__scopeDialog);
|
|
125
|
+
return context.modal ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || context.open, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogOverlayImpl, { ...overlayProps, ref: forwardedRef }) }) : null;
|
|
126
|
+
}
|
|
127
|
+
);
|
|
128
|
+
DialogOverlay.displayName = OVERLAY_NAME;
|
|
129
|
+
var DialogOverlayImpl = React.forwardRef(
|
|
130
|
+
(props, forwardedRef) => {
|
|
131
|
+
const { __scopeDialog, ...overlayProps } = props;
|
|
132
|
+
const context = useDialogContext(OVERLAY_NAME, __scopeDialog);
|
|
133
|
+
return (
|
|
134
|
+
// Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
|
|
135
|
+
// ie. when `Overlay` and `Content` are siblings
|
|
136
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_remove_scroll.RemoveScroll, { as: import_react_slot.Slot, allowPinchZoom: true, shards: [context.contentRef], children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
137
|
+
import_react_primitive.Primitive.div,
|
|
138
|
+
{
|
|
139
|
+
"data-state": getState(context.open),
|
|
140
|
+
...overlayProps,
|
|
141
|
+
ref: forwardedRef,
|
|
142
|
+
style: { pointerEvents: "auto", ...overlayProps.style }
|
|
143
|
+
}
|
|
144
|
+
) })
|
|
145
|
+
);
|
|
146
|
+
}
|
|
147
|
+
);
|
|
148
|
+
var CONTENT_NAME = "DialogContent";
|
|
149
|
+
var DialogContent = React.forwardRef(
|
|
150
|
+
(props, forwardedRef) => {
|
|
151
|
+
const portalContext = usePortalContext(CONTENT_NAME, props.__scopeDialog);
|
|
152
|
+
const { forceMount = portalContext.forceMount, ...contentProps } = props;
|
|
153
|
+
const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
|
|
154
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_presence.Presence, { present: forceMount || context.open, children: context.modal ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogContentNonModal, { ...contentProps, ref: forwardedRef }) });
|
|
155
|
+
}
|
|
156
|
+
);
|
|
157
|
+
DialogContent.displayName = CONTENT_NAME;
|
|
158
|
+
var DialogContentModal = React.forwardRef(
|
|
159
|
+
(props, forwardedRef) => {
|
|
160
|
+
const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
|
|
161
|
+
const contentRef = React.useRef(null);
|
|
162
|
+
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, context.contentRef, contentRef);
|
|
163
|
+
React.useEffect(() => {
|
|
198
164
|
const content = contentRef.current;
|
|
199
|
-
if (content) return
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
165
|
+
if (content) return (0, import_aria_hidden.hideOthers)(content);
|
|
166
|
+
}, []);
|
|
167
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
168
|
+
DialogContentImpl,
|
|
169
|
+
{
|
|
170
|
+
...props,
|
|
171
|
+
ref: composedRefs,
|
|
172
|
+
trapFocus: context.open,
|
|
173
|
+
disableOutsidePointerEvents: true,
|
|
174
|
+
onCloseAutoFocus: (0, import_primitive.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
|
|
208
175
|
event.preventDefault();
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
176
|
+
context.triggerRef.current?.focus();
|
|
177
|
+
}),
|
|
178
|
+
onPointerDownOutside: (0, import_primitive.composeEventHandlers)(props.onPointerDownOutside, (event) => {
|
|
212
179
|
const originalEvent = event.detail.originalEvent;
|
|
213
180
|
const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
|
|
214
|
-
const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
|
|
215
|
-
// it is effectively as if we right-clicked the `Overlay`.
|
|
181
|
+
const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
|
|
216
182
|
if (isRightClick) event.preventDefault();
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
}
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
183
|
+
}),
|
|
184
|
+
onFocusOutside: (0, import_primitive.composeEventHandlers)(
|
|
185
|
+
props.onFocusOutside,
|
|
186
|
+
(event) => event.preventDefault()
|
|
187
|
+
)
|
|
188
|
+
}
|
|
189
|
+
);
|
|
190
|
+
}
|
|
191
|
+
);
|
|
192
|
+
var DialogContentNonModal = React.forwardRef(
|
|
193
|
+
(props, forwardedRef) => {
|
|
194
|
+
const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
|
|
195
|
+
const hasInteractedOutsideRef = React.useRef(false);
|
|
196
|
+
const hasPointerDownOutsideRef = React.useRef(false);
|
|
197
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
198
|
+
DialogContentImpl,
|
|
199
|
+
{
|
|
200
|
+
...props,
|
|
201
|
+
ref: forwardedRef,
|
|
202
|
+
trapFocus: false,
|
|
203
|
+
disableOutsidePointerEvents: false,
|
|
204
|
+
onCloseAutoFocus: (event) => {
|
|
205
|
+
props.onCloseAutoFocus?.(event);
|
|
234
206
|
if (!event.defaultPrevented) {
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
event.preventDefault();
|
|
207
|
+
if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();
|
|
208
|
+
event.preventDefault();
|
|
238
209
|
}
|
|
239
210
|
hasInteractedOutsideRef.current = false;
|
|
240
211
|
hasPointerDownOutsideRef.current = false;
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
(_props$onInteractOuts = props.onInteractOutside) === null || _props$onInteractOuts === void 0 || _props$onInteractOuts.call(props, event);
|
|
212
|
+
},
|
|
213
|
+
onInteractOutside: (event) => {
|
|
214
|
+
props.onInteractOutside?.(event);
|
|
245
215
|
if (!event.defaultPrevented) {
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
216
|
+
hasInteractedOutsideRef.current = true;
|
|
217
|
+
if (event.detail.originalEvent.type === "pointerdown") {
|
|
218
|
+
hasPointerDownOutsideRef.current = true;
|
|
219
|
+
}
|
|
220
|
+
}
|
|
251
221
|
const target = event.target;
|
|
252
|
-
const targetIsTrigger =
|
|
253
|
-
if (targetIsTrigger) event.preventDefault();
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
222
|
+
const targetIsTrigger = context.triggerRef.current?.contains(target);
|
|
223
|
+
if (targetIsTrigger) event.preventDefault();
|
|
224
|
+
if (event.detail.originalEvent.type === "focusin" && hasPointerDownOutsideRef.current) {
|
|
225
|
+
event.preventDefault();
|
|
226
|
+
}
|
|
227
|
+
}
|
|
258
228
|
}
|
|
259
|
-
|
|
260
|
-
}
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
})
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
const
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
});
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
229
|
+
);
|
|
230
|
+
}
|
|
231
|
+
);
|
|
232
|
+
var DialogContentImpl = React.forwardRef(
|
|
233
|
+
(props, forwardedRef) => {
|
|
234
|
+
const { __scopeDialog, trapFocus, onOpenAutoFocus, onCloseAutoFocus, ...contentProps } = props;
|
|
235
|
+
const context = useDialogContext(CONTENT_NAME, __scopeDialog);
|
|
236
|
+
const contentRef = React.useRef(null);
|
|
237
|
+
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, contentRef);
|
|
238
|
+
(0, import_react_focus_guards.useFocusGuards)();
|
|
239
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
240
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
241
|
+
import_react_focus_scope.FocusScope,
|
|
242
|
+
{
|
|
243
|
+
asChild: true,
|
|
244
|
+
loop: true,
|
|
245
|
+
trapped: trapFocus,
|
|
246
|
+
onMountAutoFocus: onOpenAutoFocus,
|
|
247
|
+
onUnmountAutoFocus: onCloseAutoFocus,
|
|
248
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
249
|
+
import_react_dismissable_layer.DismissableLayer,
|
|
250
|
+
{
|
|
251
|
+
role: "dialog",
|
|
252
|
+
id: context.contentId,
|
|
253
|
+
"aria-describedby": context.descriptionId,
|
|
254
|
+
"aria-labelledby": context.titleId,
|
|
255
|
+
"data-state": getState(context.open),
|
|
256
|
+
...contentProps,
|
|
257
|
+
ref: composedRefs,
|
|
258
|
+
onDismiss: () => context.onOpenChange(false)
|
|
259
|
+
}
|
|
260
|
+
)
|
|
261
|
+
}
|
|
262
|
+
),
|
|
263
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
264
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TitleWarning, { titleId: context.titleId }),
|
|
265
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescriptionWarning, { contentRef, descriptionId: context.descriptionId })
|
|
266
|
+
] })
|
|
267
|
+
] });
|
|
268
|
+
}
|
|
269
|
+
);
|
|
270
|
+
var TITLE_NAME = "DialogTitle";
|
|
271
|
+
var DialogTitle = React.forwardRef(
|
|
272
|
+
(props, forwardedRef) => {
|
|
273
|
+
const { __scopeDialog, ...titleProps } = props;
|
|
274
|
+
const context = useDialogContext(TITLE_NAME, __scopeDialog);
|
|
275
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.h2, { id: context.titleId, ...titleProps, ref: forwardedRef });
|
|
276
|
+
}
|
|
277
|
+
);
|
|
278
|
+
DialogTitle.displayName = TITLE_NAME;
|
|
279
|
+
var DESCRIPTION_NAME = "DialogDescription";
|
|
280
|
+
var DialogDescription = React.forwardRef(
|
|
281
|
+
(props, forwardedRef) => {
|
|
282
|
+
const { __scopeDialog, ...descriptionProps } = props;
|
|
283
|
+
const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
|
|
284
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.p, { id: context.descriptionId, ...descriptionProps, ref: forwardedRef });
|
|
285
|
+
}
|
|
286
|
+
);
|
|
287
|
+
DialogDescription.displayName = DESCRIPTION_NAME;
|
|
288
|
+
var CLOSE_NAME = "DialogClose";
|
|
289
|
+
var DialogClose = React.forwardRef(
|
|
290
|
+
(props, forwardedRef) => {
|
|
291
|
+
const { __scopeDialog, ...closeProps } = props;
|
|
292
|
+
const context = useDialogContext(CLOSE_NAME, __scopeDialog);
|
|
293
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
294
|
+
import_react_primitive.Primitive.button,
|
|
295
|
+
{
|
|
296
|
+
type: "button",
|
|
297
|
+
...closeProps,
|
|
298
|
+
ref: forwardedRef,
|
|
299
|
+
onClick: (0, import_primitive.composeEventHandlers)(props.onClick, () => context.onOpenChange(false))
|
|
300
|
+
}
|
|
301
|
+
);
|
|
302
|
+
}
|
|
303
|
+
);
|
|
304
|
+
DialogClose.displayName = CLOSE_NAME;
|
|
305
|
+
function getState(open) {
|
|
306
|
+
return open ? "open" : "closed";
|
|
307
|
+
}
|
|
308
|
+
var TITLE_WARNING_NAME = "DialogTitleWarning";
|
|
309
|
+
var [WarningProvider, useWarningContext] = (0, import_react_context.createContext)(TITLE_WARNING_NAME, {
|
|
310
|
+
contentName: CONTENT_NAME,
|
|
311
|
+
titleName: TITLE_NAME,
|
|
312
|
+
docsSlug: "dialog"
|
|
313
|
+
});
|
|
314
|
+
var TitleWarning = ({ titleId }) => {
|
|
315
|
+
const titleWarningContext = useWarningContext(TITLE_WARNING_NAME);
|
|
343
316
|
const MESSAGE = `\`${titleWarningContext.contentName}\` requires a \`${titleWarningContext.titleName}\` for the component to be accessible for screen reader users.
|
|
344
317
|
|
|
345
318
|
If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it with our VisuallyHidden component.
|
|
346
319
|
|
|
347
320
|
For more information, see https://radix-ui.com/primitives/docs/components/${titleWarningContext.docsSlug}`;
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
}, [
|
|
354
|
-
MESSAGE,
|
|
355
|
-
titleId
|
|
356
|
-
]);
|
|
321
|
+
React.useEffect(() => {
|
|
322
|
+
if (titleId) {
|
|
323
|
+
const hasTitle = document.getElementById(titleId);
|
|
324
|
+
if (!hasTitle) throw new Error(MESSAGE);
|
|
325
|
+
}
|
|
326
|
+
}, [MESSAGE, titleId]);
|
|
357
327
|
return null;
|
|
358
|
-
};
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
const descriptionWarningContext =
|
|
328
|
+
};
|
|
329
|
+
var DESCRIPTION_WARNING_NAME = "DialogDescriptionWarning";
|
|
330
|
+
var DescriptionWarning = ({ contentRef, descriptionId }) => {
|
|
331
|
+
const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME);
|
|
362
332
|
const MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${descriptionWarningContext.contentName}}.`;
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
}, [
|
|
371
|
-
MESSAGE,
|
|
372
|
-
contentRef,
|
|
373
|
-
descriptionId
|
|
374
|
-
]);
|
|
333
|
+
React.useEffect(() => {
|
|
334
|
+
const describedById = contentRef.current?.getAttribute("aria-describedby");
|
|
335
|
+
if (descriptionId && describedById) {
|
|
336
|
+
const hasDescription = document.getElementById(descriptionId);
|
|
337
|
+
if (!hasDescription) console.warn(MESSAGE);
|
|
338
|
+
}
|
|
339
|
+
}, [MESSAGE, contentRef, descriptionId]);
|
|
375
340
|
return null;
|
|
376
|
-
};
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
341
|
+
};
|
|
342
|
+
var Root = Dialog;
|
|
343
|
+
var Trigger = DialogTrigger;
|
|
344
|
+
var Portal = DialogPortal;
|
|
345
|
+
var Overlay = DialogOverlay;
|
|
346
|
+
var Content = DialogContent;
|
|
347
|
+
var Title = DialogTitle;
|
|
348
|
+
var Description = DialogDescription;
|
|
349
|
+
var Close = DialogClose;
|
|
350
|
+
})();
|
|
389
351
|
//# sourceMappingURL=index.js.map
|