@radix-ui/react-dialog 1.1.0-rc.2 → 1.1.0-rc.3
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 +349 -328
- package/dist/index.js.map +3 -3
- package/package.json +13 -13
package/dist/index.js
CHANGED
|
@@ -1,351 +1,372 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
"use client";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
var
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
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 __export = (target, all) => {
|
|
10
|
+
for (var name in all)
|
|
11
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
|
+
};
|
|
13
|
+
var __copyProps = (to, from, except, desc) => {
|
|
14
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
15
|
+
for (let key of __getOwnPropNames(from))
|
|
16
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
17
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
18
|
+
}
|
|
19
|
+
return to;
|
|
20
|
+
};
|
|
21
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
23
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
24
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
25
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
26
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
27
|
+
mod
|
|
28
|
+
));
|
|
29
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
30
|
+
|
|
31
|
+
// packages/react/dialog/src/index.ts
|
|
32
|
+
var src_exports = {};
|
|
33
|
+
__export(src_exports, {
|
|
34
|
+
Close: () => Close,
|
|
35
|
+
Content: () => Content,
|
|
36
|
+
Description: () => Description,
|
|
37
|
+
Dialog: () => Dialog,
|
|
38
|
+
DialogClose: () => DialogClose,
|
|
39
|
+
DialogContent: () => DialogContent,
|
|
40
|
+
DialogDescription: () => DialogDescription,
|
|
41
|
+
DialogOverlay: () => DialogOverlay,
|
|
42
|
+
DialogPortal: () => DialogPortal,
|
|
43
|
+
DialogTitle: () => DialogTitle,
|
|
44
|
+
DialogTrigger: () => DialogTrigger,
|
|
45
|
+
Overlay: () => Overlay,
|
|
46
|
+
Portal: () => Portal,
|
|
47
|
+
Root: () => Root,
|
|
48
|
+
Title: () => Title,
|
|
49
|
+
Trigger: () => Trigger,
|
|
50
|
+
WarningProvider: () => WarningProvider,
|
|
51
|
+
createDialogScope: () => createDialogScope
|
|
52
|
+
});
|
|
53
|
+
module.exports = __toCommonJS(src_exports);
|
|
54
|
+
|
|
55
|
+
// packages/react/dialog/src/Dialog.tsx
|
|
56
|
+
var React = __toESM(require("react"));
|
|
57
|
+
var import_primitive = require("@radix-ui/primitive");
|
|
58
|
+
var import_react_compose_refs = require("@radix-ui/react-compose-refs");
|
|
59
|
+
var import_react_context = require("@radix-ui/react-context");
|
|
60
|
+
var import_react_id = require("@radix-ui/react-id");
|
|
61
|
+
var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
|
|
62
|
+
var import_react_dismissable_layer = require("@radix-ui/react-dismissable-layer");
|
|
63
|
+
var import_react_focus_scope = require("@radix-ui/react-focus-scope");
|
|
64
|
+
var import_react_portal = require("@radix-ui/react-portal");
|
|
65
|
+
var import_react_presence = require("@radix-ui/react-presence");
|
|
66
|
+
var import_react_primitive = require("@radix-ui/react-primitive");
|
|
67
|
+
var import_react_focus_guards = require("@radix-ui/react-focus-guards");
|
|
68
|
+
var import_react_remove_scroll = require("react-remove-scroll");
|
|
69
|
+
var import_aria_hidden = require("aria-hidden");
|
|
70
|
+
var import_react_slot = require("@radix-ui/react-slot");
|
|
71
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
72
|
+
var DIALOG_NAME = "Dialog";
|
|
73
|
+
var [createDialogContext, createDialogScope] = (0, import_react_context.createContextScope)(DIALOG_NAME);
|
|
74
|
+
var [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME);
|
|
75
|
+
var Dialog = (props) => {
|
|
76
|
+
const {
|
|
77
|
+
__scopeDialog,
|
|
78
|
+
children,
|
|
79
|
+
open: openProp,
|
|
80
|
+
defaultOpen,
|
|
81
|
+
onOpenChange,
|
|
82
|
+
modal = true
|
|
83
|
+
} = props;
|
|
84
|
+
const triggerRef = React.useRef(null);
|
|
85
|
+
const contentRef = React.useRef(null);
|
|
86
|
+
const [open = false, setOpen] = (0, import_react_use_controllable_state.useControllableState)({
|
|
87
|
+
prop: openProp,
|
|
88
|
+
defaultProp: defaultOpen,
|
|
89
|
+
onChange: onOpenChange
|
|
15
90
|
});
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
91
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
92
|
+
DialogProvider,
|
|
93
|
+
{
|
|
94
|
+
scope: __scopeDialog,
|
|
95
|
+
triggerRef,
|
|
96
|
+
contentRef,
|
|
97
|
+
contentId: (0, import_react_id.useId)(),
|
|
98
|
+
titleId: (0, import_react_id.useId)(),
|
|
99
|
+
descriptionId: (0, import_react_id.useId)(),
|
|
100
|
+
open,
|
|
101
|
+
onOpenChange: setOpen,
|
|
102
|
+
onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
|
|
103
|
+
modal,
|
|
104
|
+
children
|
|
21
105
|
}
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
));
|
|
32
|
-
|
|
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
|
|
68
|
-
});
|
|
106
|
+
);
|
|
107
|
+
};
|
|
108
|
+
Dialog.displayName = DIALOG_NAME;
|
|
109
|
+
var TRIGGER_NAME = "DialogTrigger";
|
|
110
|
+
var DialogTrigger = React.forwardRef(
|
|
111
|
+
(props, forwardedRef) => {
|
|
112
|
+
const { __scopeDialog, ...triggerProps } = props;
|
|
113
|
+
const context = useDialogContext(TRIGGER_NAME, __scopeDialog);
|
|
114
|
+
const composedTriggerRef = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, context.triggerRef);
|
|
69
115
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
70
|
-
|
|
116
|
+
import_react_primitive.Primitive.button,
|
|
71
117
|
{
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
|
|
81
|
-
modal,
|
|
82
|
-
children
|
|
118
|
+
type: "button",
|
|
119
|
+
"aria-haspopup": "dialog",
|
|
120
|
+
"aria-expanded": context.open,
|
|
121
|
+
"aria-controls": context.contentId,
|
|
122
|
+
"data-state": getState(context.open),
|
|
123
|
+
...triggerProps,
|
|
124
|
+
ref: composedTriggerRef,
|
|
125
|
+
onClick: (0, import_primitive.composeEventHandlers)(props.onClick, context.onOpenToggle)
|
|
83
126
|
}
|
|
84
127
|
);
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
128
|
+
}
|
|
129
|
+
);
|
|
130
|
+
DialogTrigger.displayName = TRIGGER_NAME;
|
|
131
|
+
var PORTAL_NAME = "DialogPortal";
|
|
132
|
+
var [PortalProvider, usePortalContext] = createDialogContext(PORTAL_NAME, {
|
|
133
|
+
forceMount: void 0
|
|
134
|
+
});
|
|
135
|
+
var DialogPortal = (props) => {
|
|
136
|
+
const { __scopeDialog, forceMount, children, container } = props;
|
|
137
|
+
const context = useDialogContext(PORTAL_NAME, __scopeDialog);
|
|
138
|
+
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 }) })) });
|
|
139
|
+
};
|
|
140
|
+
DialogPortal.displayName = PORTAL_NAME;
|
|
141
|
+
var OVERLAY_NAME = "DialogOverlay";
|
|
142
|
+
var DialogOverlay = React.forwardRef(
|
|
143
|
+
(props, forwardedRef) => {
|
|
144
|
+
const portalContext = usePortalContext(OVERLAY_NAME, props.__scopeDialog);
|
|
145
|
+
const { forceMount = portalContext.forceMount, ...overlayProps } = props;
|
|
146
|
+
const context = useDialogContext(OVERLAY_NAME, props.__scopeDialog);
|
|
147
|
+
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;
|
|
148
|
+
}
|
|
149
|
+
);
|
|
150
|
+
DialogOverlay.displayName = OVERLAY_NAME;
|
|
151
|
+
var DialogOverlayImpl = React.forwardRef(
|
|
152
|
+
(props, forwardedRef) => {
|
|
153
|
+
const { __scopeDialog, ...overlayProps } = props;
|
|
154
|
+
const context = useDialogContext(OVERLAY_NAME, __scopeDialog);
|
|
155
|
+
return (
|
|
156
|
+
// Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
|
|
157
|
+
// ie. when `Overlay` and `Content` are siblings
|
|
158
|
+
/* @__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)(
|
|
159
|
+
import_react_primitive.Primitive.div,
|
|
95
160
|
{
|
|
96
|
-
type: "button",
|
|
97
|
-
"aria-haspopup": "dialog",
|
|
98
|
-
"aria-expanded": context.open,
|
|
99
|
-
"aria-controls": context.contentId,
|
|
100
161
|
"data-state": getState(context.open),
|
|
101
|
-
...
|
|
102
|
-
ref:
|
|
103
|
-
|
|
162
|
+
...overlayProps,
|
|
163
|
+
ref: forwardedRef,
|
|
164
|
+
style: { pointerEvents: "auto", ...overlayProps.style }
|
|
104
165
|
}
|
|
105
|
-
)
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
const
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
(
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
{
|
|
170
|
-
...props,
|
|
171
|
-
ref: composedRefs,
|
|
172
|
-
trapFocus: context.open,
|
|
173
|
-
disableOutsidePointerEvents: true,
|
|
174
|
-
onCloseAutoFocus: (0, import_primitive.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
|
|
166
|
+
) })
|
|
167
|
+
);
|
|
168
|
+
}
|
|
169
|
+
);
|
|
170
|
+
var CONTENT_NAME = "DialogContent";
|
|
171
|
+
var DialogContent = React.forwardRef(
|
|
172
|
+
(props, forwardedRef) => {
|
|
173
|
+
const portalContext = usePortalContext(CONTENT_NAME, props.__scopeDialog);
|
|
174
|
+
const { forceMount = portalContext.forceMount, ...contentProps } = props;
|
|
175
|
+
const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
|
|
176
|
+
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 }) });
|
|
177
|
+
}
|
|
178
|
+
);
|
|
179
|
+
DialogContent.displayName = CONTENT_NAME;
|
|
180
|
+
var DialogContentModal = React.forwardRef(
|
|
181
|
+
(props, forwardedRef) => {
|
|
182
|
+
const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
|
|
183
|
+
const contentRef = React.useRef(null);
|
|
184
|
+
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, context.contentRef, contentRef);
|
|
185
|
+
React.useEffect(() => {
|
|
186
|
+
const content = contentRef.current;
|
|
187
|
+
if (content) return (0, import_aria_hidden.hideOthers)(content);
|
|
188
|
+
}, []);
|
|
189
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
190
|
+
DialogContentImpl,
|
|
191
|
+
{
|
|
192
|
+
...props,
|
|
193
|
+
ref: composedRefs,
|
|
194
|
+
trapFocus: context.open,
|
|
195
|
+
disableOutsidePointerEvents: true,
|
|
196
|
+
onCloseAutoFocus: (0, import_primitive.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
|
|
197
|
+
event.preventDefault();
|
|
198
|
+
context.triggerRef.current?.focus();
|
|
199
|
+
}),
|
|
200
|
+
onPointerDownOutside: (0, import_primitive.composeEventHandlers)(props.onPointerDownOutside, (event) => {
|
|
201
|
+
const originalEvent = event.detail.originalEvent;
|
|
202
|
+
const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
|
|
203
|
+
const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
|
|
204
|
+
if (isRightClick) event.preventDefault();
|
|
205
|
+
}),
|
|
206
|
+
onFocusOutside: (0, import_primitive.composeEventHandlers)(
|
|
207
|
+
props.onFocusOutside,
|
|
208
|
+
(event) => event.preventDefault()
|
|
209
|
+
)
|
|
210
|
+
}
|
|
211
|
+
);
|
|
212
|
+
}
|
|
213
|
+
);
|
|
214
|
+
var DialogContentNonModal = React.forwardRef(
|
|
215
|
+
(props, forwardedRef) => {
|
|
216
|
+
const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);
|
|
217
|
+
const hasInteractedOutsideRef = React.useRef(false);
|
|
218
|
+
const hasPointerDownOutsideRef = React.useRef(false);
|
|
219
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
220
|
+
DialogContentImpl,
|
|
221
|
+
{
|
|
222
|
+
...props,
|
|
223
|
+
ref: forwardedRef,
|
|
224
|
+
trapFocus: false,
|
|
225
|
+
disableOutsidePointerEvents: false,
|
|
226
|
+
onCloseAutoFocus: (event) => {
|
|
227
|
+
props.onCloseAutoFocus?.(event);
|
|
228
|
+
if (!event.defaultPrevented) {
|
|
229
|
+
if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();
|
|
175
230
|
event.preventDefault();
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
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);
|
|
206
|
-
if (!event.defaultPrevented) {
|
|
207
|
-
if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();
|
|
208
|
-
event.preventDefault();
|
|
209
|
-
}
|
|
210
|
-
hasInteractedOutsideRef.current = false;
|
|
211
|
-
hasPointerDownOutsideRef.current = false;
|
|
212
|
-
},
|
|
213
|
-
onInteractOutside: (event) => {
|
|
214
|
-
props.onInteractOutside?.(event);
|
|
215
|
-
if (!event.defaultPrevented) {
|
|
216
|
-
hasInteractedOutsideRef.current = true;
|
|
217
|
-
if (event.detail.originalEvent.type === "pointerdown") {
|
|
218
|
-
hasPointerDownOutsideRef.current = true;
|
|
219
|
-
}
|
|
220
|
-
}
|
|
221
|
-
const target = event.target;
|
|
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();
|
|
231
|
+
}
|
|
232
|
+
hasInteractedOutsideRef.current = false;
|
|
233
|
+
hasPointerDownOutsideRef.current = false;
|
|
234
|
+
},
|
|
235
|
+
onInteractOutside: (event) => {
|
|
236
|
+
props.onInteractOutside?.(event);
|
|
237
|
+
if (!event.defaultPrevented) {
|
|
238
|
+
hasInteractedOutsideRef.current = true;
|
|
239
|
+
if (event.detail.originalEvent.type === "pointerdown") {
|
|
240
|
+
hasPointerDownOutsideRef.current = true;
|
|
226
241
|
}
|
|
227
242
|
}
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
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
|
-
)
|
|
243
|
+
const target = event.target;
|
|
244
|
+
const targetIsTrigger = context.triggerRef.current?.contains(target);
|
|
245
|
+
if (targetIsTrigger) event.preventDefault();
|
|
246
|
+
if (event.detail.originalEvent.type === "focusin" && hasPointerDownOutsideRef.current) {
|
|
247
|
+
event.preventDefault();
|
|
261
248
|
}
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
(
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
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,
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
);
|
|
252
|
+
}
|
|
253
|
+
);
|
|
254
|
+
var DialogContentImpl = React.forwardRef(
|
|
255
|
+
(props, forwardedRef) => {
|
|
256
|
+
const { __scopeDialog, trapFocus, onOpenAutoFocus, onCloseAutoFocus, ...contentProps } = props;
|
|
257
|
+
const context = useDialogContext(CONTENT_NAME, __scopeDialog);
|
|
258
|
+
const contentRef = React.useRef(null);
|
|
259
|
+
const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, contentRef);
|
|
260
|
+
(0, import_react_focus_guards.useFocusGuards)();
|
|
261
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
262
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
263
|
+
import_react_focus_scope.FocusScope,
|
|
295
264
|
{
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
265
|
+
asChild: true,
|
|
266
|
+
loop: true,
|
|
267
|
+
trapped: trapFocus,
|
|
268
|
+
onMountAutoFocus: onOpenAutoFocus,
|
|
269
|
+
onUnmountAutoFocus: onCloseAutoFocus,
|
|
270
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
271
|
+
import_react_dismissable_layer.DismissableLayer,
|
|
272
|
+
{
|
|
273
|
+
role: "dialog",
|
|
274
|
+
id: context.contentId,
|
|
275
|
+
"aria-describedby": context.descriptionId,
|
|
276
|
+
"aria-labelledby": context.titleId,
|
|
277
|
+
"data-state": getState(context.open),
|
|
278
|
+
...contentProps,
|
|
279
|
+
ref: composedRefs,
|
|
280
|
+
onDismiss: () => context.onOpenChange(false)
|
|
281
|
+
}
|
|
282
|
+
)
|
|
300
283
|
}
|
|
301
|
-
)
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
284
|
+
),
|
|
285
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
286
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TitleWarning, { titleId: context.titleId }),
|
|
287
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescriptionWarning, { contentRef, descriptionId: context.descriptionId })
|
|
288
|
+
] })
|
|
289
|
+
] });
|
|
307
290
|
}
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
291
|
+
);
|
|
292
|
+
var TITLE_NAME = "DialogTitle";
|
|
293
|
+
var DialogTitle = React.forwardRef(
|
|
294
|
+
(props, forwardedRef) => {
|
|
295
|
+
const { __scopeDialog, ...titleProps } = props;
|
|
296
|
+
const context = useDialogContext(TITLE_NAME, __scopeDialog);
|
|
297
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.h2, { id: context.titleId, ...titleProps, ref: forwardedRef });
|
|
298
|
+
}
|
|
299
|
+
);
|
|
300
|
+
DialogTitle.displayName = TITLE_NAME;
|
|
301
|
+
var DESCRIPTION_NAME = "DialogDescription";
|
|
302
|
+
var DialogDescription = React.forwardRef(
|
|
303
|
+
(props, forwardedRef) => {
|
|
304
|
+
const { __scopeDialog, ...descriptionProps } = props;
|
|
305
|
+
const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
|
|
306
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_primitive.Primitive.p, { id: context.descriptionId, ...descriptionProps, ref: forwardedRef });
|
|
307
|
+
}
|
|
308
|
+
);
|
|
309
|
+
DialogDescription.displayName = DESCRIPTION_NAME;
|
|
310
|
+
var CLOSE_NAME = "DialogClose";
|
|
311
|
+
var DialogClose = React.forwardRef(
|
|
312
|
+
(props, forwardedRef) => {
|
|
313
|
+
const { __scopeDialog, ...closeProps } = props;
|
|
314
|
+
const context = useDialogContext(CLOSE_NAME, __scopeDialog);
|
|
315
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
316
|
+
import_react_primitive.Primitive.button,
|
|
317
|
+
{
|
|
318
|
+
type: "button",
|
|
319
|
+
...closeProps,
|
|
320
|
+
ref: forwardedRef,
|
|
321
|
+
onClick: (0, import_primitive.composeEventHandlers)(props.onClick, () => context.onOpenChange(false))
|
|
322
|
+
}
|
|
323
|
+
);
|
|
324
|
+
}
|
|
325
|
+
);
|
|
326
|
+
DialogClose.displayName = CLOSE_NAME;
|
|
327
|
+
function getState(open) {
|
|
328
|
+
return open ? "open" : "closed";
|
|
329
|
+
}
|
|
330
|
+
var TITLE_WARNING_NAME = "DialogTitleWarning";
|
|
331
|
+
var [WarningProvider, useWarningContext] = (0, import_react_context.createContext)(TITLE_WARNING_NAME, {
|
|
332
|
+
contentName: CONTENT_NAME,
|
|
333
|
+
titleName: TITLE_NAME,
|
|
334
|
+
docsSlug: "dialog"
|
|
335
|
+
});
|
|
336
|
+
var TitleWarning = ({ titleId }) => {
|
|
337
|
+
const titleWarningContext = useWarningContext(TITLE_WARNING_NAME);
|
|
338
|
+
const MESSAGE = `\`${titleWarningContext.contentName}\` requires a \`${titleWarningContext.titleName}\` for the component to be accessible for screen reader users.
|
|
317
339
|
|
|
318
340
|
If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it with our VisuallyHidden component.
|
|
319
341
|
|
|
320
342
|
For more information, see https://radix-ui.com/primitives/docs/components/${titleWarningContext.docsSlug}`;
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
})();
|
|
343
|
+
React.useEffect(() => {
|
|
344
|
+
if (titleId) {
|
|
345
|
+
const hasTitle = document.getElementById(titleId);
|
|
346
|
+
if (!hasTitle) throw new Error(MESSAGE);
|
|
347
|
+
}
|
|
348
|
+
}, [MESSAGE, titleId]);
|
|
349
|
+
return null;
|
|
350
|
+
};
|
|
351
|
+
var DESCRIPTION_WARNING_NAME = "DialogDescriptionWarning";
|
|
352
|
+
var DescriptionWarning = ({ contentRef, descriptionId }) => {
|
|
353
|
+
const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME);
|
|
354
|
+
const MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${descriptionWarningContext.contentName}}.`;
|
|
355
|
+
React.useEffect(() => {
|
|
356
|
+
const describedById = contentRef.current?.getAttribute("aria-describedby");
|
|
357
|
+
if (descriptionId && describedById) {
|
|
358
|
+
const hasDescription = document.getElementById(descriptionId);
|
|
359
|
+
if (!hasDescription) console.warn(MESSAGE);
|
|
360
|
+
}
|
|
361
|
+
}, [MESSAGE, contentRef, descriptionId]);
|
|
362
|
+
return null;
|
|
363
|
+
};
|
|
364
|
+
var Root = Dialog;
|
|
365
|
+
var Trigger = DialogTrigger;
|
|
366
|
+
var Portal = DialogPortal;
|
|
367
|
+
var Overlay = DialogOverlay;
|
|
368
|
+
var Content = DialogContent;
|
|
369
|
+
var Title = DialogTitle;
|
|
370
|
+
var Description = DialogDescription;
|
|
371
|
+
var Close = DialogClose;
|
|
351
372
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../src/Dialog.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContext, createContextScope } from '@radix-ui/react-context';\nimport { useId } from '@radix-ui/react-id';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { DismissableLayer } from '@radix-ui/react-dismissable-layer';\nimport { FocusScope } from '@radix-ui/react-focus-scope';\nimport { Portal as PortalPrimitive } from '@radix-ui/react-portal';\nimport { Presence } from '@radix-ui/react-presence';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { useFocusGuards } from '@radix-ui/react-focus-guards';\nimport { RemoveScroll } from 'react-remove-scroll';\nimport { hideOthers } from 'aria-hidden';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport type * as Radix from '@radix-ui/react-primitive';\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Dialog\n * -----------------------------------------------------------------------------------------------*/\n\nconst DIALOG_NAME = 'Dialog';\n\ntype ScopedProps<P> = P & { __scopeDialog?: Scope };\nconst [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME);\n\ntype DialogContextValue = {\n triggerRef: React.RefObject<HTMLButtonElement>;\n contentRef: React.RefObject<DialogContentElement>;\n contentId: string;\n titleId: string;\n descriptionId: string;\n open: boolean;\n onOpenChange(open: boolean): void;\n onOpenToggle(): void;\n modal: boolean;\n};\n\nconst [DialogProvider, useDialogContext] = createDialogContext<DialogContextValue>(DIALOG_NAME);\n\ninterface DialogProps {\n children?: React.ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?(open: boolean): void;\n modal?: boolean;\n}\n\nconst Dialog: React.FC<DialogProps> = (props: ScopedProps<DialogProps>) => {\n const {\n __scopeDialog,\n children,\n open: openProp,\n defaultOpen,\n onOpenChange,\n modal = true,\n } = props;\n const triggerRef = React.useRef<HTMLButtonElement>(null);\n const contentRef = React.useRef<DialogContentElement>(null);\n const [open = false, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n });\n\n return (\n <DialogProvider\n scope={__scopeDialog}\n triggerRef={triggerRef}\n contentRef={contentRef}\n contentId={useId()}\n titleId={useId()}\n descriptionId={useId()}\n open={open}\n onOpenChange={setOpen}\n onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n modal={modal}\n >\n {children}\n </DialogProvider>\n );\n};\n\nDialog.displayName = DIALOG_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DialogTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'DialogTrigger';\n\ntype DialogTriggerElement = React.ElementRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = Radix.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface DialogTriggerProps extends PrimitiveButtonProps {}\n\nconst DialogTrigger = React.forwardRef<DialogTriggerElement, DialogTriggerProps>(\n (props: ScopedProps<DialogTriggerProps>, forwardedRef) => {\n const { __scopeDialog, ...triggerProps } = props;\n const context = useDialogContext(TRIGGER_NAME, __scopeDialog);\n const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);\n return (\n <Primitive.button\n type=\"button\"\n aria-haspopup=\"dialog\"\n aria-expanded={context.open}\n aria-controls={context.contentId}\n data-state={getState(context.open)}\n {...triggerProps}\n ref={composedTriggerRef}\n onClick={composeEventHandlers(props.onClick, context.onOpenToggle)}\n />\n );\n }\n);\n\nDialogTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DialogPortal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'DialogPortal';\n\ntype PortalContextValue = { forceMount?: true };\nconst [PortalProvider, usePortalContext] = createDialogContext<PortalContextValue>(PORTAL_NAME, {\n forceMount: undefined,\n});\n\ntype PortalProps = React.ComponentPropsWithoutRef<typeof PortalPrimitive>;\ninterface DialogPortalProps {\n children?: React.ReactNode;\n /**\n * Specify a container element to portal the content into.\n */\n container?: PortalProps['container'];\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst DialogPortal: React.FC<DialogPortalProps> = (props: ScopedProps<DialogPortalProps>) => {\n const { __scopeDialog, forceMount, children, container } = props;\n const context = useDialogContext(PORTAL_NAME, __scopeDialog);\n return (\n <PortalProvider scope={__scopeDialog} forceMount={forceMount}>\n {React.Children.map(children, (child) => (\n <Presence present={forceMount || context.open}>\n <PortalPrimitive asChild container={container}>\n {child}\n </PortalPrimitive>\n </Presence>\n ))}\n </PortalProvider>\n );\n};\n\nDialogPortal.displayName = PORTAL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DialogOverlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst OVERLAY_NAME = 'DialogOverlay';\n\ntype DialogOverlayElement = DialogOverlayImplElement;\ninterface DialogOverlayProps extends DialogOverlayImplProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst DialogOverlay = React.forwardRef<DialogOverlayElement, DialogOverlayProps>(\n (props: ScopedProps<DialogOverlayProps>, forwardedRef) => {\n const portalContext = usePortalContext(OVERLAY_NAME, props.__scopeDialog);\n const { forceMount = portalContext.forceMount, ...overlayProps } = props;\n const context = useDialogContext(OVERLAY_NAME, props.__scopeDialog);\n return context.modal ? (\n <Presence present={forceMount || context.open}>\n <DialogOverlayImpl {...overlayProps} ref={forwardedRef} />\n </Presence>\n ) : null;\n }\n);\n\nDialogOverlay.displayName = OVERLAY_NAME;\n\ntype DialogOverlayImplElement = React.ElementRef<typeof Primitive.div>;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface DialogOverlayImplProps extends PrimitiveDivProps {}\n\nconst DialogOverlayImpl = React.forwardRef<DialogOverlayImplElement, DialogOverlayImplProps>(\n (props: ScopedProps<DialogOverlayImplProps>, forwardedRef) => {\n const { __scopeDialog, ...overlayProps } = props;\n const context = useDialogContext(OVERLAY_NAME, __scopeDialog);\n return (\n // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`\n // ie. when `Overlay` and `Content` are siblings\n <RemoveScroll as={Slot} allowPinchZoom shards={[context.contentRef]}>\n <Primitive.div\n data-state={getState(context.open)}\n {...overlayProps}\n ref={forwardedRef}\n // We re-enable pointer-events prevented by `Dialog.Content` to allow scrolling the overlay.\n style={{ pointerEvents: 'auto', ...overlayProps.style }}\n />\n </RemoveScroll>\n );\n }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * DialogContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'DialogContent';\n\ntype DialogContentElement = DialogContentTypeElement;\ninterface DialogContentProps extends DialogContentTypeProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>(\n (props: ScopedProps<DialogContentProps>, forwardedRef) => {\n const portalContext = usePortalContext(CONTENT_NAME, props.__scopeDialog);\n const { forceMount = portalContext.forceMount, ...contentProps } = props;\n const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);\n return (\n <Presence present={forceMount || context.open}>\n {context.modal ? (\n <DialogContentModal {...contentProps} ref={forwardedRef} />\n ) : (\n <DialogContentNonModal {...contentProps} ref={forwardedRef} />\n )}\n </Presence>\n );\n }\n);\n\nDialogContent.displayName = CONTENT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype DialogContentTypeElement = DialogContentImplElement;\ninterface DialogContentTypeProps\n extends Omit<DialogContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {}\n\nconst DialogContentModal = React.forwardRef<DialogContentTypeElement, DialogContentTypeProps>(\n (props: ScopedProps<DialogContentTypeProps>, forwardedRef) => {\n const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);\n const contentRef = React.useRef<HTMLDivElement>(null);\n const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef);\n\n // aria-hide everything except the content (better supported equivalent to setting aria-modal)\n React.useEffect(() => {\n const content = contentRef.current;\n if (content) return hideOthers(content);\n }, []);\n\n return (\n <DialogContentImpl\n {...props}\n ref={composedRefs}\n // we make sure focus isn't trapped once `DialogContent` has been closed\n // (closed !== unmounted when animating out)\n trapFocus={context.open}\n disableOutsidePointerEvents\n onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {\n event.preventDefault();\n context.triggerRef.current?.focus();\n })}\n onPointerDownOutside={composeEventHandlers(props.onPointerDownOutside, (event) => {\n const originalEvent = event.detail.originalEvent;\n const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;\n const isRightClick = originalEvent.button === 2 || ctrlLeftClick;\n\n // If the event is a right-click, we shouldn't close because\n // it is effectively as if we right-clicked the `Overlay`.\n if (isRightClick) event.preventDefault();\n })}\n // When focus is trapped, a `focusout` event may still happen.\n // We make sure we don't trigger our `onDismiss` in such case.\n onFocusOutside={composeEventHandlers(props.onFocusOutside, (event) =>\n event.preventDefault()\n )}\n />\n );\n }\n);\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst DialogContentNonModal = React.forwardRef<DialogContentTypeElement, DialogContentTypeProps>(\n (props: ScopedProps<DialogContentTypeProps>, forwardedRef) => {\n const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);\n const hasInteractedOutsideRef = React.useRef(false);\n const hasPointerDownOutsideRef = React.useRef(false);\n\n return (\n <DialogContentImpl\n {...props}\n ref={forwardedRef}\n trapFocus={false}\n disableOutsidePointerEvents={false}\n onCloseAutoFocus={(event) => {\n props.onCloseAutoFocus?.(event);\n\n if (!event.defaultPrevented) {\n if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();\n // Always prevent auto focus because we either focus manually or want user agent focus\n event.preventDefault();\n }\n\n hasInteractedOutsideRef.current = false;\n hasPointerDownOutsideRef.current = false;\n }}\n onInteractOutside={(event) => {\n props.onInteractOutside?.(event);\n\n if (!event.defaultPrevented) {\n hasInteractedOutsideRef.current = true;\n if (event.detail.originalEvent.type === 'pointerdown') {\n hasPointerDownOutsideRef.current = true;\n }\n }\n\n // Prevent dismissing when clicking the trigger.\n // As the trigger is already setup to close, without doing so would\n // cause it to close and immediately open.\n const target = event.target as HTMLElement;\n const targetIsTrigger = context.triggerRef.current?.contains(target);\n if (targetIsTrigger) event.preventDefault();\n\n // On Safari if the trigger is inside a container with tabIndex={0}, when clicked\n // we will get the pointer down outside event on the trigger, but then a subsequent\n // focus outside event on the container, we ignore any focus outside event when we've\n // already had a pointer down outside event.\n if (event.detail.originalEvent.type === 'focusin' && hasPointerDownOutsideRef.current) {\n event.preventDefault();\n }\n }}\n />\n );\n }\n);\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype DialogContentImplElement = React.ElementRef<typeof DismissableLayer>;\ntype DismissableLayerProps = Radix.ComponentPropsWithoutRef<typeof DismissableLayer>;\ntype FocusScopeProps = Radix.ComponentPropsWithoutRef<typeof FocusScope>;\ninterface DialogContentImplProps extends Omit<DismissableLayerProps, 'onDismiss'> {\n /**\n * When `true`, focus cannot escape the `Content` via keyboard,\n * pointer, or a programmatic focus.\n * @defaultValue false\n */\n trapFocus?: FocusScopeProps['trapped'];\n\n /**\n * Event handler called when auto-focusing on open.\n * Can be prevented.\n */\n onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus'];\n\n /**\n * Event handler called when auto-focusing on close.\n * Can be prevented.\n */\n onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus'];\n}\n\nconst DialogContentImpl = React.forwardRef<DialogContentImplElement, DialogContentImplProps>(\n (props: ScopedProps<DialogContentImplProps>, forwardedRef) => {\n const { __scopeDialog, trapFocus, onOpenAutoFocus, onCloseAutoFocus, ...contentProps } = props;\n const context = useDialogContext(CONTENT_NAME, __scopeDialog);\n const contentRef = React.useRef<HTMLDivElement>(null);\n const composedRefs = useComposedRefs(forwardedRef, contentRef);\n\n // Make sure the whole tree has focus guards as our `Dialog` will be\n // the last element in the DOM (beacuse of the `Portal`)\n useFocusGuards();\n\n return (\n <>\n <FocusScope\n asChild\n loop\n trapped={trapFocus}\n onMountAutoFocus={onOpenAutoFocus}\n onUnmountAutoFocus={onCloseAutoFocus}\n >\n <DismissableLayer\n role=\"dialog\"\n id={context.contentId}\n aria-describedby={context.descriptionId}\n aria-labelledby={context.titleId}\n data-state={getState(context.open)}\n {...contentProps}\n ref={composedRefs}\n onDismiss={() => context.onOpenChange(false)}\n />\n </FocusScope>\n {process.env.NODE_ENV !== 'production' && (\n <>\n <TitleWarning titleId={context.titleId} />\n <DescriptionWarning contentRef={contentRef} descriptionId={context.descriptionId} />\n </>\n )}\n </>\n );\n }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * DialogTitle\n * -----------------------------------------------------------------------------------------------*/\n\nconst TITLE_NAME = 'DialogTitle';\n\ntype DialogTitleElement = React.ElementRef<typeof Primitive.h2>;\ntype PrimitiveHeading2Props = Radix.ComponentPropsWithoutRef<typeof Primitive.h2>;\ninterface DialogTitleProps extends PrimitiveHeading2Props {}\n\nconst DialogTitle = React.forwardRef<DialogTitleElement, DialogTitleProps>(\n (props: ScopedProps<DialogTitleProps>, forwardedRef) => {\n const { __scopeDialog, ...titleProps } = props;\n const context = useDialogContext(TITLE_NAME, __scopeDialog);\n return <Primitive.h2 id={context.titleId} {...titleProps} ref={forwardedRef} />;\n }\n);\n\nDialogTitle.displayName = TITLE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DialogDescription\n * -----------------------------------------------------------------------------------------------*/\n\nconst DESCRIPTION_NAME = 'DialogDescription';\n\ntype DialogDescriptionElement = React.ElementRef<typeof Primitive.p>;\ntype PrimitiveParagraphProps = Radix.ComponentPropsWithoutRef<typeof Primitive.p>;\ninterface DialogDescriptionProps extends PrimitiveParagraphProps {}\n\nconst DialogDescription = React.forwardRef<DialogDescriptionElement, DialogDescriptionProps>(\n (props: ScopedProps<DialogDescriptionProps>, forwardedRef) => {\n const { __scopeDialog, ...descriptionProps } = props;\n const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);\n return <Primitive.p id={context.descriptionId} {...descriptionProps} ref={forwardedRef} />;\n }\n);\n\nDialogDescription.displayName = DESCRIPTION_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DialogClose\n * -----------------------------------------------------------------------------------------------*/\n\nconst CLOSE_NAME = 'DialogClose';\n\ntype DialogCloseElement = React.ElementRef<typeof Primitive.button>;\ninterface DialogCloseProps extends PrimitiveButtonProps {}\n\nconst DialogClose = React.forwardRef<DialogCloseElement, DialogCloseProps>(\n (props: ScopedProps<DialogCloseProps>, forwardedRef) => {\n const { __scopeDialog, ...closeProps } = props;\n const context = useDialogContext(CLOSE_NAME, __scopeDialog);\n return (\n <Primitive.button\n type=\"button\"\n {...closeProps}\n ref={forwardedRef}\n onClick={composeEventHandlers(props.onClick, () => context.onOpenChange(false))}\n />\n );\n }\n);\n\nDialogClose.displayName = CLOSE_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open: boolean) {\n return open ? 'open' : 'closed';\n}\n\nconst TITLE_WARNING_NAME = 'DialogTitleWarning';\n\nconst [WarningProvider, useWarningContext] = createContext(TITLE_WARNING_NAME, {\n contentName: CONTENT_NAME,\n titleName: TITLE_NAME,\n docsSlug: 'dialog',\n});\n\ntype TitleWarningProps = { titleId?: string };\n\nconst TitleWarning: React.FC<TitleWarningProps> = ({ titleId }) => {\n const titleWarningContext = useWarningContext(TITLE_WARNING_NAME);\n\n const MESSAGE = `\\`${titleWarningContext.contentName}\\` requires a \\`${titleWarningContext.titleName}\\` for the component to be accessible for screen reader users.\n\nIf you want to hide the \\`${titleWarningContext.titleName}\\`, you can wrap it with our VisuallyHidden component.\n\nFor more information, see https://radix-ui.com/primitives/docs/components/${titleWarningContext.docsSlug}`;\n\n React.useEffect(() => {\n if (titleId) {\n const hasTitle = document.getElementById(titleId);\n if (!hasTitle) throw new Error(MESSAGE);\n }\n }, [MESSAGE, titleId]);\n\n return null;\n};\n\nconst DESCRIPTION_WARNING_NAME = 'DialogDescriptionWarning';\n\ntype DescriptionWarningProps = {\n contentRef: React.RefObject<DialogContentElement>;\n descriptionId?: string;\n};\n\nconst DescriptionWarning: React.FC<DescriptionWarningProps> = ({ contentRef, descriptionId }) => {\n const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME);\n const MESSAGE = `Warning: Missing \\`Description\\` or \\`aria-describedby={undefined}\\` for {${descriptionWarningContext.contentName}}.`;\n\n React.useEffect(() => {\n const describedById = contentRef.current?.getAttribute('aria-describedby');\n // if we have an id and the user hasn't set aria-describedby={undefined}\n if (descriptionId && describedById) {\n const hasDescription = document.getElementById(descriptionId);\n if (!hasDescription) console.warn(MESSAGE);\n }\n }, [MESSAGE, contentRef, descriptionId]);\n\n return null;\n};\n\nconst Root = Dialog;\nconst Trigger = DialogTrigger;\nconst Portal = DialogPortal;\nconst Overlay = DialogOverlay;\nconst Content = DialogContent;\nconst Title = DialogTitle;\nconst Description = DialogDescription;\nconst Close = DialogClose;\n\nexport {\n createDialogScope,\n //\n Dialog,\n DialogTrigger,\n DialogPortal,\n DialogOverlay,\n DialogContent,\n DialogTitle,\n DialogDescription,\n DialogClose,\n //\n Root,\n Trigger,\n Portal,\n Overlay,\n Content,\n Title,\n Description,\n Close,\n //\n WarningProvider,\n};\nexport type {\n DialogProps,\n DialogTriggerProps,\n DialogPortalProps,\n DialogOverlayProps,\n DialogContentProps,\n DialogTitleProps,\n DialogDescriptionProps,\n DialogCloseProps,\n};\n"],
|
|
5
|
-
"mappings": "
|
|
3
|
+
"sources": ["../src/index.ts", "../src/Dialog.tsx"],
|
|
4
|
+
"sourcesContent": ["'use client';\nexport {\n createDialogScope,\n //\n Dialog,\n DialogTrigger,\n DialogPortal,\n DialogOverlay,\n DialogContent,\n DialogTitle,\n DialogDescription,\n DialogClose,\n //\n Root,\n Trigger,\n Portal,\n Overlay,\n Content,\n Title,\n Description,\n Close,\n //\n WarningProvider,\n} from './Dialog';\nexport type {\n DialogProps,\n DialogTriggerProps,\n DialogPortalProps,\n DialogOverlayProps,\n DialogContentProps,\n DialogTitleProps,\n DialogDescriptionProps,\n DialogCloseProps,\n} from './Dialog';\n", "import * as React from 'react';\nimport { composeEventHandlers } from '@radix-ui/primitive';\nimport { useComposedRefs } from '@radix-ui/react-compose-refs';\nimport { createContext, createContextScope } from '@radix-ui/react-context';\nimport { useId } from '@radix-ui/react-id';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport { DismissableLayer } from '@radix-ui/react-dismissable-layer';\nimport { FocusScope } from '@radix-ui/react-focus-scope';\nimport { Portal as PortalPrimitive } from '@radix-ui/react-portal';\nimport { Presence } from '@radix-ui/react-presence';\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { useFocusGuards } from '@radix-ui/react-focus-guards';\nimport { RemoveScroll } from 'react-remove-scroll';\nimport { hideOthers } from 'aria-hidden';\nimport { Slot } from '@radix-ui/react-slot';\n\nimport type * as Radix from '@radix-ui/react-primitive';\nimport type { Scope } from '@radix-ui/react-context';\n\n/* -------------------------------------------------------------------------------------------------\n * Dialog\n * -----------------------------------------------------------------------------------------------*/\n\nconst DIALOG_NAME = 'Dialog';\n\ntype ScopedProps<P> = P & { __scopeDialog?: Scope };\nconst [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME);\n\ntype DialogContextValue = {\n triggerRef: React.RefObject<HTMLButtonElement>;\n contentRef: React.RefObject<DialogContentElement>;\n contentId: string;\n titleId: string;\n descriptionId: string;\n open: boolean;\n onOpenChange(open: boolean): void;\n onOpenToggle(): void;\n modal: boolean;\n};\n\nconst [DialogProvider, useDialogContext] = createDialogContext<DialogContextValue>(DIALOG_NAME);\n\ninterface DialogProps {\n children?: React.ReactNode;\n open?: boolean;\n defaultOpen?: boolean;\n onOpenChange?(open: boolean): void;\n modal?: boolean;\n}\n\nconst Dialog: React.FC<DialogProps> = (props: ScopedProps<DialogProps>) => {\n const {\n __scopeDialog,\n children,\n open: openProp,\n defaultOpen,\n onOpenChange,\n modal = true,\n } = props;\n const triggerRef = React.useRef<HTMLButtonElement>(null);\n const contentRef = React.useRef<DialogContentElement>(null);\n const [open = false, setOpen] = useControllableState({\n prop: openProp,\n defaultProp: defaultOpen,\n onChange: onOpenChange,\n });\n\n return (\n <DialogProvider\n scope={__scopeDialog}\n triggerRef={triggerRef}\n contentRef={contentRef}\n contentId={useId()}\n titleId={useId()}\n descriptionId={useId()}\n open={open}\n onOpenChange={setOpen}\n onOpenToggle={React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}\n modal={modal}\n >\n {children}\n </DialogProvider>\n );\n};\n\nDialog.displayName = DIALOG_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DialogTrigger\n * -----------------------------------------------------------------------------------------------*/\n\nconst TRIGGER_NAME = 'DialogTrigger';\n\ntype DialogTriggerElement = React.ElementRef<typeof Primitive.button>;\ntype PrimitiveButtonProps = Radix.ComponentPropsWithoutRef<typeof Primitive.button>;\ninterface DialogTriggerProps extends PrimitiveButtonProps {}\n\nconst DialogTrigger = React.forwardRef<DialogTriggerElement, DialogTriggerProps>(\n (props: ScopedProps<DialogTriggerProps>, forwardedRef) => {\n const { __scopeDialog, ...triggerProps } = props;\n const context = useDialogContext(TRIGGER_NAME, __scopeDialog);\n const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);\n return (\n <Primitive.button\n type=\"button\"\n aria-haspopup=\"dialog\"\n aria-expanded={context.open}\n aria-controls={context.contentId}\n data-state={getState(context.open)}\n {...triggerProps}\n ref={composedTriggerRef}\n onClick={composeEventHandlers(props.onClick, context.onOpenToggle)}\n />\n );\n }\n);\n\nDialogTrigger.displayName = TRIGGER_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DialogPortal\n * -----------------------------------------------------------------------------------------------*/\n\nconst PORTAL_NAME = 'DialogPortal';\n\ntype PortalContextValue = { forceMount?: true };\nconst [PortalProvider, usePortalContext] = createDialogContext<PortalContextValue>(PORTAL_NAME, {\n forceMount: undefined,\n});\n\ntype PortalProps = React.ComponentPropsWithoutRef<typeof PortalPrimitive>;\ninterface DialogPortalProps {\n children?: React.ReactNode;\n /**\n * Specify a container element to portal the content into.\n */\n container?: PortalProps['container'];\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst DialogPortal: React.FC<DialogPortalProps> = (props: ScopedProps<DialogPortalProps>) => {\n const { __scopeDialog, forceMount, children, container } = props;\n const context = useDialogContext(PORTAL_NAME, __scopeDialog);\n return (\n <PortalProvider scope={__scopeDialog} forceMount={forceMount}>\n {React.Children.map(children, (child) => (\n <Presence present={forceMount || context.open}>\n <PortalPrimitive asChild container={container}>\n {child}\n </PortalPrimitive>\n </Presence>\n ))}\n </PortalProvider>\n );\n};\n\nDialogPortal.displayName = PORTAL_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DialogOverlay\n * -----------------------------------------------------------------------------------------------*/\n\nconst OVERLAY_NAME = 'DialogOverlay';\n\ntype DialogOverlayElement = DialogOverlayImplElement;\ninterface DialogOverlayProps extends DialogOverlayImplProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst DialogOverlay = React.forwardRef<DialogOverlayElement, DialogOverlayProps>(\n (props: ScopedProps<DialogOverlayProps>, forwardedRef) => {\n const portalContext = usePortalContext(OVERLAY_NAME, props.__scopeDialog);\n const { forceMount = portalContext.forceMount, ...overlayProps } = props;\n const context = useDialogContext(OVERLAY_NAME, props.__scopeDialog);\n return context.modal ? (\n <Presence present={forceMount || context.open}>\n <DialogOverlayImpl {...overlayProps} ref={forwardedRef} />\n </Presence>\n ) : null;\n }\n);\n\nDialogOverlay.displayName = OVERLAY_NAME;\n\ntype DialogOverlayImplElement = React.ElementRef<typeof Primitive.div>;\ntype PrimitiveDivProps = Radix.ComponentPropsWithoutRef<typeof Primitive.div>;\ninterface DialogOverlayImplProps extends PrimitiveDivProps {}\n\nconst DialogOverlayImpl = React.forwardRef<DialogOverlayImplElement, DialogOverlayImplProps>(\n (props: ScopedProps<DialogOverlayImplProps>, forwardedRef) => {\n const { __scopeDialog, ...overlayProps } = props;\n const context = useDialogContext(OVERLAY_NAME, __scopeDialog);\n return (\n // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`\n // ie. when `Overlay` and `Content` are siblings\n <RemoveScroll as={Slot} allowPinchZoom shards={[context.contentRef]}>\n <Primitive.div\n data-state={getState(context.open)}\n {...overlayProps}\n ref={forwardedRef}\n // We re-enable pointer-events prevented by `Dialog.Content` to allow scrolling the overlay.\n style={{ pointerEvents: 'auto', ...overlayProps.style }}\n />\n </RemoveScroll>\n );\n }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * DialogContent\n * -----------------------------------------------------------------------------------------------*/\n\nconst CONTENT_NAME = 'DialogContent';\n\ntype DialogContentElement = DialogContentTypeElement;\ninterface DialogContentProps extends DialogContentTypeProps {\n /**\n * Used to force mounting when more control is needed. Useful when\n * controlling animation with React animation libraries.\n */\n forceMount?: true;\n}\n\nconst DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>(\n (props: ScopedProps<DialogContentProps>, forwardedRef) => {\n const portalContext = usePortalContext(CONTENT_NAME, props.__scopeDialog);\n const { forceMount = portalContext.forceMount, ...contentProps } = props;\n const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);\n return (\n <Presence present={forceMount || context.open}>\n {context.modal ? (\n <DialogContentModal {...contentProps} ref={forwardedRef} />\n ) : (\n <DialogContentNonModal {...contentProps} ref={forwardedRef} />\n )}\n </Presence>\n );\n }\n);\n\nDialogContent.displayName = CONTENT_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype DialogContentTypeElement = DialogContentImplElement;\ninterface DialogContentTypeProps\n extends Omit<DialogContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {}\n\nconst DialogContentModal = React.forwardRef<DialogContentTypeElement, DialogContentTypeProps>(\n (props: ScopedProps<DialogContentTypeProps>, forwardedRef) => {\n const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);\n const contentRef = React.useRef<HTMLDivElement>(null);\n const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef);\n\n // aria-hide everything except the content (better supported equivalent to setting aria-modal)\n React.useEffect(() => {\n const content = contentRef.current;\n if (content) return hideOthers(content);\n }, []);\n\n return (\n <DialogContentImpl\n {...props}\n ref={composedRefs}\n // we make sure focus isn't trapped once `DialogContent` has been closed\n // (closed !== unmounted when animating out)\n trapFocus={context.open}\n disableOutsidePointerEvents\n onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {\n event.preventDefault();\n context.triggerRef.current?.focus();\n })}\n onPointerDownOutside={composeEventHandlers(props.onPointerDownOutside, (event) => {\n const originalEvent = event.detail.originalEvent;\n const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;\n const isRightClick = originalEvent.button === 2 || ctrlLeftClick;\n\n // If the event is a right-click, we shouldn't close because\n // it is effectively as if we right-clicked the `Overlay`.\n if (isRightClick) event.preventDefault();\n })}\n // When focus is trapped, a `focusout` event may still happen.\n // We make sure we don't trigger our `onDismiss` in such case.\n onFocusOutside={composeEventHandlers(props.onFocusOutside, (event) =>\n event.preventDefault()\n )}\n />\n );\n }\n);\n\n/* -----------------------------------------------------------------------------------------------*/\n\nconst DialogContentNonModal = React.forwardRef<DialogContentTypeElement, DialogContentTypeProps>(\n (props: ScopedProps<DialogContentTypeProps>, forwardedRef) => {\n const context = useDialogContext(CONTENT_NAME, props.__scopeDialog);\n const hasInteractedOutsideRef = React.useRef(false);\n const hasPointerDownOutsideRef = React.useRef(false);\n\n return (\n <DialogContentImpl\n {...props}\n ref={forwardedRef}\n trapFocus={false}\n disableOutsidePointerEvents={false}\n onCloseAutoFocus={(event) => {\n props.onCloseAutoFocus?.(event);\n\n if (!event.defaultPrevented) {\n if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();\n // Always prevent auto focus because we either focus manually or want user agent focus\n event.preventDefault();\n }\n\n hasInteractedOutsideRef.current = false;\n hasPointerDownOutsideRef.current = false;\n }}\n onInteractOutside={(event) => {\n props.onInteractOutside?.(event);\n\n if (!event.defaultPrevented) {\n hasInteractedOutsideRef.current = true;\n if (event.detail.originalEvent.type === 'pointerdown') {\n hasPointerDownOutsideRef.current = true;\n }\n }\n\n // Prevent dismissing when clicking the trigger.\n // As the trigger is already setup to close, without doing so would\n // cause it to close and immediately open.\n const target = event.target as HTMLElement;\n const targetIsTrigger = context.triggerRef.current?.contains(target);\n if (targetIsTrigger) event.preventDefault();\n\n // On Safari if the trigger is inside a container with tabIndex={0}, when clicked\n // we will get the pointer down outside event on the trigger, but then a subsequent\n // focus outside event on the container, we ignore any focus outside event when we've\n // already had a pointer down outside event.\n if (event.detail.originalEvent.type === 'focusin' && hasPointerDownOutsideRef.current) {\n event.preventDefault();\n }\n }}\n />\n );\n }\n);\n\n/* -----------------------------------------------------------------------------------------------*/\n\ntype DialogContentImplElement = React.ElementRef<typeof DismissableLayer>;\ntype DismissableLayerProps = Radix.ComponentPropsWithoutRef<typeof DismissableLayer>;\ntype FocusScopeProps = Radix.ComponentPropsWithoutRef<typeof FocusScope>;\ninterface DialogContentImplProps extends Omit<DismissableLayerProps, 'onDismiss'> {\n /**\n * When `true`, focus cannot escape the `Content` via keyboard,\n * pointer, or a programmatic focus.\n * @defaultValue false\n */\n trapFocus?: FocusScopeProps['trapped'];\n\n /**\n * Event handler called when auto-focusing on open.\n * Can be prevented.\n */\n onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus'];\n\n /**\n * Event handler called when auto-focusing on close.\n * Can be prevented.\n */\n onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus'];\n}\n\nconst DialogContentImpl = React.forwardRef<DialogContentImplElement, DialogContentImplProps>(\n (props: ScopedProps<DialogContentImplProps>, forwardedRef) => {\n const { __scopeDialog, trapFocus, onOpenAutoFocus, onCloseAutoFocus, ...contentProps } = props;\n const context = useDialogContext(CONTENT_NAME, __scopeDialog);\n const contentRef = React.useRef<HTMLDivElement>(null);\n const composedRefs = useComposedRefs(forwardedRef, contentRef);\n\n // Make sure the whole tree has focus guards as our `Dialog` will be\n // the last element in the DOM (beacuse of the `Portal`)\n useFocusGuards();\n\n return (\n <>\n <FocusScope\n asChild\n loop\n trapped={trapFocus}\n onMountAutoFocus={onOpenAutoFocus}\n onUnmountAutoFocus={onCloseAutoFocus}\n >\n <DismissableLayer\n role=\"dialog\"\n id={context.contentId}\n aria-describedby={context.descriptionId}\n aria-labelledby={context.titleId}\n data-state={getState(context.open)}\n {...contentProps}\n ref={composedRefs}\n onDismiss={() => context.onOpenChange(false)}\n />\n </FocusScope>\n {process.env.NODE_ENV !== 'production' && (\n <>\n <TitleWarning titleId={context.titleId} />\n <DescriptionWarning contentRef={contentRef} descriptionId={context.descriptionId} />\n </>\n )}\n </>\n );\n }\n);\n\n/* -------------------------------------------------------------------------------------------------\n * DialogTitle\n * -----------------------------------------------------------------------------------------------*/\n\nconst TITLE_NAME = 'DialogTitle';\n\ntype DialogTitleElement = React.ElementRef<typeof Primitive.h2>;\ntype PrimitiveHeading2Props = Radix.ComponentPropsWithoutRef<typeof Primitive.h2>;\ninterface DialogTitleProps extends PrimitiveHeading2Props {}\n\nconst DialogTitle = React.forwardRef<DialogTitleElement, DialogTitleProps>(\n (props: ScopedProps<DialogTitleProps>, forwardedRef) => {\n const { __scopeDialog, ...titleProps } = props;\n const context = useDialogContext(TITLE_NAME, __scopeDialog);\n return <Primitive.h2 id={context.titleId} {...titleProps} ref={forwardedRef} />;\n }\n);\n\nDialogTitle.displayName = TITLE_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DialogDescription\n * -----------------------------------------------------------------------------------------------*/\n\nconst DESCRIPTION_NAME = 'DialogDescription';\n\ntype DialogDescriptionElement = React.ElementRef<typeof Primitive.p>;\ntype PrimitiveParagraphProps = Radix.ComponentPropsWithoutRef<typeof Primitive.p>;\ninterface DialogDescriptionProps extends PrimitiveParagraphProps {}\n\nconst DialogDescription = React.forwardRef<DialogDescriptionElement, DialogDescriptionProps>(\n (props: ScopedProps<DialogDescriptionProps>, forwardedRef) => {\n const { __scopeDialog, ...descriptionProps } = props;\n const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);\n return <Primitive.p id={context.descriptionId} {...descriptionProps} ref={forwardedRef} />;\n }\n);\n\nDialogDescription.displayName = DESCRIPTION_NAME;\n\n/* -------------------------------------------------------------------------------------------------\n * DialogClose\n * -----------------------------------------------------------------------------------------------*/\n\nconst CLOSE_NAME = 'DialogClose';\n\ntype DialogCloseElement = React.ElementRef<typeof Primitive.button>;\ninterface DialogCloseProps extends PrimitiveButtonProps {}\n\nconst DialogClose = React.forwardRef<DialogCloseElement, DialogCloseProps>(\n (props: ScopedProps<DialogCloseProps>, forwardedRef) => {\n const { __scopeDialog, ...closeProps } = props;\n const context = useDialogContext(CLOSE_NAME, __scopeDialog);\n return (\n <Primitive.button\n type=\"button\"\n {...closeProps}\n ref={forwardedRef}\n onClick={composeEventHandlers(props.onClick, () => context.onOpenChange(false))}\n />\n );\n }\n);\n\nDialogClose.displayName = CLOSE_NAME;\n\n/* -----------------------------------------------------------------------------------------------*/\n\nfunction getState(open: boolean) {\n return open ? 'open' : 'closed';\n}\n\nconst TITLE_WARNING_NAME = 'DialogTitleWarning';\n\nconst [WarningProvider, useWarningContext] = createContext(TITLE_WARNING_NAME, {\n contentName: CONTENT_NAME,\n titleName: TITLE_NAME,\n docsSlug: 'dialog',\n});\n\ntype TitleWarningProps = { titleId?: string };\n\nconst TitleWarning: React.FC<TitleWarningProps> = ({ titleId }) => {\n const titleWarningContext = useWarningContext(TITLE_WARNING_NAME);\n\n const MESSAGE = `\\`${titleWarningContext.contentName}\\` requires a \\`${titleWarningContext.titleName}\\` for the component to be accessible for screen reader users.\n\nIf you want to hide the \\`${titleWarningContext.titleName}\\`, you can wrap it with our VisuallyHidden component.\n\nFor more information, see https://radix-ui.com/primitives/docs/components/${titleWarningContext.docsSlug}`;\n\n React.useEffect(() => {\n if (titleId) {\n const hasTitle = document.getElementById(titleId);\n if (!hasTitle) throw new Error(MESSAGE);\n }\n }, [MESSAGE, titleId]);\n\n return null;\n};\n\nconst DESCRIPTION_WARNING_NAME = 'DialogDescriptionWarning';\n\ntype DescriptionWarningProps = {\n contentRef: React.RefObject<DialogContentElement>;\n descriptionId?: string;\n};\n\nconst DescriptionWarning: React.FC<DescriptionWarningProps> = ({ contentRef, descriptionId }) => {\n const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME);\n const MESSAGE = `Warning: Missing \\`Description\\` or \\`aria-describedby={undefined}\\` for {${descriptionWarningContext.contentName}}.`;\n\n React.useEffect(() => {\n const describedById = contentRef.current?.getAttribute('aria-describedby');\n // if we have an id and the user hasn't set aria-describedby={undefined}\n if (descriptionId && describedById) {\n const hasDescription = document.getElementById(descriptionId);\n if (!hasDescription) console.warn(MESSAGE);\n }\n }, [MESSAGE, contentRef, descriptionId]);\n\n return null;\n};\n\nconst Root = Dialog;\nconst Trigger = DialogTrigger;\nconst Portal = DialogPortal;\nconst Overlay = DialogOverlay;\nconst Content = DialogContent;\nconst Title = DialogTitle;\nconst Description = DialogDescription;\nconst Close = DialogClose;\n\nexport {\n createDialogScope,\n //\n Dialog,\n DialogTrigger,\n DialogPortal,\n DialogOverlay,\n DialogContent,\n DialogTitle,\n DialogDescription,\n DialogClose,\n //\n Root,\n Trigger,\n Portal,\n Overlay,\n Content,\n Title,\n Description,\n Close,\n //\n WarningProvider,\n};\nexport type {\n DialogProps,\n DialogTriggerProps,\n DialogPortalProps,\n DialogOverlayProps,\n DialogContentProps,\n DialogTitleProps,\n DialogDescriptionProps,\n DialogCloseProps,\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["PortalPrimitive"]
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@radix-ui/react-dialog",
|
|
3
|
-
"version": "1.1.0-rc.
|
|
3
|
+
"version": "1.1.0-rc.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
@@ -28,18 +28,18 @@
|
|
|
28
28
|
"version": "yarn version"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@radix-ui/primitive": "1.1.0-rc.
|
|
32
|
-
"@radix-ui/react-compose-refs": "1.1.0-rc.
|
|
33
|
-
"@radix-ui/react-context": "1.1.0-rc.
|
|
34
|
-
"@radix-ui/react-dismissable-layer": "1.1.0-rc.
|
|
35
|
-
"@radix-ui/react-focus-guards": "1.1.0-rc.
|
|
36
|
-
"@radix-ui/react-focus-scope": "1.1.0-rc.
|
|
37
|
-
"@radix-ui/react-id": "1.1.0-rc.
|
|
38
|
-
"@radix-ui/react-portal": "1.1.0-rc.
|
|
39
|
-
"@radix-ui/react-presence": "1.1.0-rc.
|
|
40
|
-
"@radix-ui/react-primitive": "1.1.0-rc.
|
|
41
|
-
"@radix-ui/react-slot": "1.1.0-rc.
|
|
42
|
-
"@radix-ui/react-use-controllable-state": "1.1.0-rc.
|
|
31
|
+
"@radix-ui/primitive": "1.1.0-rc.3",
|
|
32
|
+
"@radix-ui/react-compose-refs": "1.1.0-rc.3",
|
|
33
|
+
"@radix-ui/react-context": "1.1.0-rc.3",
|
|
34
|
+
"@radix-ui/react-dismissable-layer": "1.1.0-rc.3",
|
|
35
|
+
"@radix-ui/react-focus-guards": "1.1.0-rc.3",
|
|
36
|
+
"@radix-ui/react-focus-scope": "1.1.0-rc.3",
|
|
37
|
+
"@radix-ui/react-id": "1.1.0-rc.3",
|
|
38
|
+
"@radix-ui/react-portal": "1.1.0-rc.3",
|
|
39
|
+
"@radix-ui/react-presence": "1.1.0-rc.3",
|
|
40
|
+
"@radix-ui/react-primitive": "1.1.0-rc.3",
|
|
41
|
+
"@radix-ui/react-slot": "1.1.0-rc.3",
|
|
42
|
+
"@radix-ui/react-use-controllable-state": "1.1.0-rc.3",
|
|
43
43
|
"aria-hidden": "^1.1.1",
|
|
44
44
|
"react-remove-scroll": "2.5.7"
|
|
45
45
|
},
|