@octanejs/radix 0.1.32 → 0.1.34
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/cjs/AccessibleIcon.cjs +56 -0
- package/dist/cjs/Accordion.cjs +272 -0
- package/dist/cjs/AlertDialog.cjs +144 -0
- package/dist/cjs/Arrow.cjs +43 -0
- package/dist/cjs/AspectRatio.cjs +56 -0
- package/dist/cjs/Avatar.cjs +150 -0
- package/dist/cjs/Checkbox.cjs +281 -0
- package/dist/cjs/Collapsible.cjs +176 -0
- package/dist/cjs/ContextMenu.cjs +315 -0
- package/dist/cjs/Dialog.cjs +291 -0
- package/dist/cjs/DismissableLayer.cjs +382 -0
- package/dist/cjs/DropdownMenu.cjs +296 -0
- package/dist/cjs/FocusScope.cjs +257 -0
- package/dist/cjs/Form.cjs +537 -0
- package/dist/cjs/HoverCard.cjs +309 -0
- package/dist/cjs/Label.cjs +42 -0
- package/dist/cjs/Menu.cjs +925 -0
- package/dist/cjs/Menubar.cjs +475 -0
- package/dist/cjs/NavigationMenu.cjs +942 -0
- package/dist/cjs/OneTimePasswordField.cjs +729 -0
- package/dist/cjs/PasswordToggleField.cjs +377 -0
- package/dist/cjs/Popover.cjs +340 -0
- package/dist/cjs/Popper.cjs +368 -0
- package/dist/cjs/Portal.cjs +40 -0
- package/dist/cjs/Presence.cjs +183 -0
- package/dist/cjs/Primitive.cjs +63 -0
- package/dist/cjs/Progress.cjs +111 -0
- package/dist/cjs/Radio.cjs +240 -0
- package/dist/cjs/RadioGroup.cjs +216 -0
- package/dist/cjs/RovingFocusGroup.cjs +253 -0
- package/dist/cjs/ScrollArea.cjs +828 -0
- package/dist/cjs/Select.cjs +1429 -0
- package/dist/cjs/Separator.cjs +51 -0
- package/dist/cjs/Slider.cjs +634 -0
- package/dist/cjs/Slot.cjs +97 -0
- package/dist/cjs/Switch.cjs +253 -0
- package/dist/cjs/Tabs.cjs +195 -0
- package/dist/cjs/Toast.cjs +733 -0
- package/dist/cjs/Toggle.cjs +54 -0
- package/dist/cjs/ToggleGroup.cjs +174 -0
- package/dist/cjs/Toolbar.cjs +165 -0
- package/dist/cjs/Tooltip.cjs +628 -0
- package/dist/cjs/VisuallyHidden.cjs +52 -0
- package/dist/cjs/collection.cjs +95 -0
- package/dist/cjs/compose-event-handlers.cjs +35 -0
- package/dist/cjs/compose-refs.cjs +68 -0
- package/dist/cjs/context.cjs +96 -0
- package/dist/cjs/direction.cjs +41 -0
- package/dist/cjs/focus-guards.cjs +76 -0
- package/dist/cjs/index.cjs +174 -0
- package/dist/cjs/internal.cjs +51 -0
- package/dist/cjs/scroll-lock.cjs +67 -0
- package/dist/cjs/use-callback-ref.cjs +47 -0
- package/dist/cjs/use-effect-event.cjs +52 -0
- package/dist/cjs/use-is-hydrated.cjs +43 -0
- package/dist/cjs/use-previous.cjs +47 -0
- package/dist/cjs/use-size.cjs +69 -0
- package/dist/cjs/useControllableState.cjs +80 -0
- package/dist/cjs/useId.cjs +36 -0
- package/package.json +14 -7
|
@@ -0,0 +1,315 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var ContextMenu_exports = {};
|
|
30
|
+
__export(ContextMenu_exports, {
|
|
31
|
+
Arrow: () => Arrow,
|
|
32
|
+
CheckboxItem: () => CheckboxItem,
|
|
33
|
+
Content: () => Content,
|
|
34
|
+
ContextMenu: () => Root,
|
|
35
|
+
ContextMenuContent: () => Content,
|
|
36
|
+
ContextMenuItem: () => Item,
|
|
37
|
+
ContextMenuTrigger: () => Trigger,
|
|
38
|
+
Group: () => Group,
|
|
39
|
+
Item: () => Item,
|
|
40
|
+
ItemIndicator: () => ItemIndicator,
|
|
41
|
+
Label: () => Label,
|
|
42
|
+
Portal: () => Portal,
|
|
43
|
+
RadioGroup: () => RadioGroup,
|
|
44
|
+
RadioItem: () => RadioItem,
|
|
45
|
+
Root: () => Root,
|
|
46
|
+
Separator: () => Separator,
|
|
47
|
+
Sub: () => Sub,
|
|
48
|
+
SubContent: () => SubContent,
|
|
49
|
+
SubTrigger: () => SubTrigger,
|
|
50
|
+
Trigger: () => Trigger,
|
|
51
|
+
createContextMenuScope: () => createContextMenuScope
|
|
52
|
+
});
|
|
53
|
+
module.exports = __toCommonJS(ContextMenu_exports);
|
|
54
|
+
var import_octane = require("octane");
|
|
55
|
+
var import_compose_event_handlers = require("./compose-event-handlers.cjs");
|
|
56
|
+
var import_context = require("./context.cjs");
|
|
57
|
+
var import_internal = require("./internal.cjs");
|
|
58
|
+
var MenuPrimitive = __toESM(require("./Menu.cjs"), 1);
|
|
59
|
+
var import_Menu = require("./Menu.cjs");
|
|
60
|
+
var import_Primitive = require("./Primitive.cjs");
|
|
61
|
+
var import_useControllableState = require("./useControllableState.cjs");
|
|
62
|
+
const CONTEXT_MENU_NAME = "ContextMenu";
|
|
63
|
+
const [createContextMenuContext, createContextMenuScope] = (0, import_context.createContextScope)(CONTEXT_MENU_NAME, [
|
|
64
|
+
import_Menu.createMenuScope
|
|
65
|
+
]);
|
|
66
|
+
const useMenuScope = (0, import_Menu.createMenuScope)();
|
|
67
|
+
const [ContextMenuProvider, useContextMenuContext] = createContextMenuContext(CONTEXT_MENU_NAME);
|
|
68
|
+
function Root(props) {
|
|
69
|
+
const slot = (0, import_internal.S)("ContextMenu.Root");
|
|
70
|
+
const {
|
|
71
|
+
__scopeContextMenu,
|
|
72
|
+
children,
|
|
73
|
+
onOpenChange,
|
|
74
|
+
open: openProp,
|
|
75
|
+
dir,
|
|
76
|
+
modal = true
|
|
77
|
+
} = props ?? {};
|
|
78
|
+
const hasInteractedRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "interacted"));
|
|
79
|
+
const [open, setOpen] = (0, import_useControllableState.useControllableState)(
|
|
80
|
+
{ prop: openProp, defaultProp: false, onChange: onOpenChange },
|
|
81
|
+
(0, import_internal.subSlot)(slot, "open")
|
|
82
|
+
);
|
|
83
|
+
const menuScope = useMenuScope(__scopeContextMenu, (0, import_internal.subSlot)(slot, "menu"));
|
|
84
|
+
return (0, import_octane.createElement)(ContextMenuProvider, {
|
|
85
|
+
scope: __scopeContextMenu,
|
|
86
|
+
open,
|
|
87
|
+
onOpenChange: setOpen,
|
|
88
|
+
modal,
|
|
89
|
+
hasInteractedRef,
|
|
90
|
+
children: (0, import_octane.createElement)(MenuPrimitive.Root, {
|
|
91
|
+
...menuScope,
|
|
92
|
+
dir,
|
|
93
|
+
open,
|
|
94
|
+
onOpenChange: setOpen,
|
|
95
|
+
modal,
|
|
96
|
+
children
|
|
97
|
+
})
|
|
98
|
+
});
|
|
99
|
+
}
|
|
100
|
+
function Trigger(props) {
|
|
101
|
+
const slot = (0, import_internal.S)("ContextMenu.Trigger");
|
|
102
|
+
const { __scopeContextMenu, disabled = false, ref: forwardedRef, ...triggerProps } = props ?? {};
|
|
103
|
+
const context = useContextMenuContext("ContextMenuTrigger", __scopeContextMenu);
|
|
104
|
+
const menuScope = useMenuScope(__scopeContextMenu, (0, import_internal.subSlot)(slot, "menu"));
|
|
105
|
+
const pointRef = (0, import_octane.useRef)({ x: 0, y: 0 }, (0, import_internal.subSlot)(slot, "point"));
|
|
106
|
+
const virtualRef = (0, import_octane.useRef)(
|
|
107
|
+
{
|
|
108
|
+
getBoundingClientRect: () => DOMRect.fromRect({ width: 0, height: 0, ...pointRef.current })
|
|
109
|
+
},
|
|
110
|
+
(0, import_internal.subSlot)(slot, "virtual")
|
|
111
|
+
);
|
|
112
|
+
const longPressTimerRef = (0, import_octane.useRef)(0, (0, import_internal.subSlot)(slot, "timer"));
|
|
113
|
+
const clearLongPress = (0, import_octane.useCallback)(
|
|
114
|
+
() => window.clearTimeout(longPressTimerRef.current),
|
|
115
|
+
[],
|
|
116
|
+
(0, import_internal.subSlot)(slot, "clear")
|
|
117
|
+
);
|
|
118
|
+
const handleOpen = (event) => {
|
|
119
|
+
context.hasInteractedRef.current = true;
|
|
120
|
+
pointRef.current = { x: event.clientX, y: event.clientY };
|
|
121
|
+
context.onOpenChange(true);
|
|
122
|
+
};
|
|
123
|
+
(0, import_octane.useEffect)(() => clearLongPress, [clearLongPress], (0, import_internal.subSlot)(slot, "e:clear"));
|
|
124
|
+
(0, import_octane.useEffect)(
|
|
125
|
+
() => void (disabled && clearLongPress()),
|
|
126
|
+
[disabled, clearLongPress],
|
|
127
|
+
(0, import_internal.subSlot)(slot, "e:disabled")
|
|
128
|
+
);
|
|
129
|
+
return [
|
|
130
|
+
(0, import_octane.createElement)(MenuPrimitive.Anchor, { key: "anchor", ...menuScope, virtualRef }),
|
|
131
|
+
(0, import_octane.createElement)(import_Primitive.Primitive.span, {
|
|
132
|
+
key: "trigger",
|
|
133
|
+
"data-state": context.open ? "open" : "closed",
|
|
134
|
+
"data-disabled": disabled ? "" : void 0,
|
|
135
|
+
...triggerProps,
|
|
136
|
+
ref: forwardedRef,
|
|
137
|
+
// prevent iOS context menu from appearing
|
|
138
|
+
style: { WebkitTouchCallout: "none", ...props?.style },
|
|
139
|
+
// if trigger is disabled, enable the native Context Menu
|
|
140
|
+
onContextMenu: disabled ? props?.onContextMenu : (0, import_compose_event_handlers.composeEventHandlers)(props?.onContextMenu, (event) => {
|
|
141
|
+
clearLongPress();
|
|
142
|
+
handleOpen(event);
|
|
143
|
+
event.preventDefault();
|
|
144
|
+
}),
|
|
145
|
+
onPointerDown: disabled ? props?.onPointerDown : (0, import_compose_event_handlers.composeEventHandlers)(
|
|
146
|
+
props?.onPointerDown,
|
|
147
|
+
whenTouchOrPen((event) => {
|
|
148
|
+
clearLongPress();
|
|
149
|
+
if (context.open) {
|
|
150
|
+
context.onOpenChange(false);
|
|
151
|
+
}
|
|
152
|
+
longPressTimerRef.current = window.setTimeout(() => handleOpen(event), 700);
|
|
153
|
+
})
|
|
154
|
+
),
|
|
155
|
+
onPointerMove: disabled ? props?.onPointerMove : (0, import_compose_event_handlers.composeEventHandlers)(props?.onPointerMove, whenTouchOrPen(clearLongPress)),
|
|
156
|
+
onPointerCancel: disabled ? props?.onPointerCancel : (0, import_compose_event_handlers.composeEventHandlers)(props?.onPointerCancel, whenTouchOrPen(clearLongPress)),
|
|
157
|
+
onPointerUp: disabled ? props?.onPointerUp : (0, import_compose_event_handlers.composeEventHandlers)(props?.onPointerUp, whenTouchOrPen(clearLongPress))
|
|
158
|
+
})
|
|
159
|
+
];
|
|
160
|
+
}
|
|
161
|
+
function Portal(props) {
|
|
162
|
+
const slot = (0, import_internal.S)("ContextMenu.Portal");
|
|
163
|
+
const { __scopeContextMenu, ...portalProps } = props ?? {};
|
|
164
|
+
const menuScope = useMenuScope(__scopeContextMenu, (0, import_internal.subSlot)(slot, "menu"));
|
|
165
|
+
return (0, import_octane.createElement)(MenuPrimitive.Portal, { ...menuScope, ...portalProps });
|
|
166
|
+
}
|
|
167
|
+
function Content(props) {
|
|
168
|
+
const slot = (0, import_internal.S)("ContextMenu.Content");
|
|
169
|
+
const { __scopeContextMenu, ...contentProps } = props ?? {};
|
|
170
|
+
const context = useContextMenuContext("ContextMenuContent", __scopeContextMenu);
|
|
171
|
+
const menuScope = useMenuScope(__scopeContextMenu, (0, import_internal.subSlot)(slot, "menu"));
|
|
172
|
+
const hasInteractedOutsideRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "outside"));
|
|
173
|
+
return (0, import_octane.createElement)(MenuPrimitive.Content, {
|
|
174
|
+
...menuScope,
|
|
175
|
+
...contentProps,
|
|
176
|
+
side: "right",
|
|
177
|
+
sideOffset: 2,
|
|
178
|
+
align: "start",
|
|
179
|
+
onCloseAutoFocus: (event) => {
|
|
180
|
+
props?.onCloseAutoFocus?.(event);
|
|
181
|
+
if (!event.defaultPrevented && hasInteractedOutsideRef.current) {
|
|
182
|
+
event.preventDefault();
|
|
183
|
+
}
|
|
184
|
+
hasInteractedOutsideRef.current = false;
|
|
185
|
+
},
|
|
186
|
+
onInteractOutside: (event) => {
|
|
187
|
+
props?.onInteractOutside?.(event);
|
|
188
|
+
if (!event.defaultPrevented && !context.modal) hasInteractedOutsideRef.current = true;
|
|
189
|
+
},
|
|
190
|
+
style: {
|
|
191
|
+
...props?.style,
|
|
192
|
+
// re-namespace exposed content custom properties
|
|
193
|
+
"--radix-context-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
|
|
194
|
+
"--radix-context-menu-content-available-width": "var(--radix-popper-available-width)",
|
|
195
|
+
"--radix-context-menu-content-available-height": "var(--radix-popper-available-height)",
|
|
196
|
+
"--radix-context-menu-trigger-width": "var(--radix-popper-anchor-width)",
|
|
197
|
+
"--radix-context-menu-trigger-height": "var(--radix-popper-anchor-height)"
|
|
198
|
+
}
|
|
199
|
+
});
|
|
200
|
+
}
|
|
201
|
+
function Group(props) {
|
|
202
|
+
const slot = (0, import_internal.S)("ContextMenu.Group");
|
|
203
|
+
const { __scopeContextMenu, ...groupProps } = props ?? {};
|
|
204
|
+
const menuScope = useMenuScope(__scopeContextMenu, (0, import_internal.subSlot)(slot, "menu"));
|
|
205
|
+
return (0, import_octane.createElement)(MenuPrimitive.Group, { ...menuScope, ...groupProps });
|
|
206
|
+
}
|
|
207
|
+
function Label(props) {
|
|
208
|
+
const slot = (0, import_internal.S)("ContextMenu.Label");
|
|
209
|
+
const { __scopeContextMenu, ...labelProps } = props ?? {};
|
|
210
|
+
const menuScope = useMenuScope(__scopeContextMenu, (0, import_internal.subSlot)(slot, "menu"));
|
|
211
|
+
return (0, import_octane.createElement)(MenuPrimitive.Label, { ...menuScope, ...labelProps });
|
|
212
|
+
}
|
|
213
|
+
function Item(props) {
|
|
214
|
+
const slot = (0, import_internal.S)("ContextMenu.Item");
|
|
215
|
+
const { __scopeContextMenu, ...itemProps } = props ?? {};
|
|
216
|
+
const menuScope = useMenuScope(__scopeContextMenu, (0, import_internal.subSlot)(slot, "menu"));
|
|
217
|
+
return (0, import_octane.createElement)(MenuPrimitive.Item, { ...menuScope, ...itemProps });
|
|
218
|
+
}
|
|
219
|
+
function CheckboxItem(props) {
|
|
220
|
+
const slot = (0, import_internal.S)("ContextMenu.CheckboxItem");
|
|
221
|
+
const { __scopeContextMenu, ...checkboxItemProps } = props ?? {};
|
|
222
|
+
const menuScope = useMenuScope(__scopeContextMenu, (0, import_internal.subSlot)(slot, "menu"));
|
|
223
|
+
return (0, import_octane.createElement)(MenuPrimitive.CheckboxItem, { ...menuScope, ...checkboxItemProps });
|
|
224
|
+
}
|
|
225
|
+
function RadioGroup(props) {
|
|
226
|
+
const slot = (0, import_internal.S)("ContextMenu.RadioGroup");
|
|
227
|
+
const { __scopeContextMenu, ...radioGroupProps } = props ?? {};
|
|
228
|
+
const menuScope = useMenuScope(__scopeContextMenu, (0, import_internal.subSlot)(slot, "menu"));
|
|
229
|
+
return (0, import_octane.createElement)(MenuPrimitive.RadioGroup, { ...menuScope, ...radioGroupProps });
|
|
230
|
+
}
|
|
231
|
+
function RadioItem(props) {
|
|
232
|
+
const slot = (0, import_internal.S)("ContextMenu.RadioItem");
|
|
233
|
+
const { __scopeContextMenu, ...radioItemProps } = props ?? {};
|
|
234
|
+
const menuScope = useMenuScope(__scopeContextMenu, (0, import_internal.subSlot)(slot, "menu"));
|
|
235
|
+
return (0, import_octane.createElement)(MenuPrimitive.RadioItem, { ...menuScope, ...radioItemProps });
|
|
236
|
+
}
|
|
237
|
+
function ItemIndicator(props) {
|
|
238
|
+
const slot = (0, import_internal.S)("ContextMenu.ItemIndicator");
|
|
239
|
+
const { __scopeContextMenu, ...itemIndicatorProps } = props ?? {};
|
|
240
|
+
const menuScope = useMenuScope(__scopeContextMenu, (0, import_internal.subSlot)(slot, "menu"));
|
|
241
|
+
return (0, import_octane.createElement)(MenuPrimitive.ItemIndicator, { ...menuScope, ...itemIndicatorProps });
|
|
242
|
+
}
|
|
243
|
+
function Separator(props) {
|
|
244
|
+
const slot = (0, import_internal.S)("ContextMenu.Separator");
|
|
245
|
+
const { __scopeContextMenu, ...separatorProps } = props ?? {};
|
|
246
|
+
const menuScope = useMenuScope(__scopeContextMenu, (0, import_internal.subSlot)(slot, "menu"));
|
|
247
|
+
return (0, import_octane.createElement)(MenuPrimitive.Separator, { ...menuScope, ...separatorProps });
|
|
248
|
+
}
|
|
249
|
+
function Arrow(props) {
|
|
250
|
+
const slot = (0, import_internal.S)("ContextMenu.Arrow");
|
|
251
|
+
const { __scopeContextMenu, ...arrowProps } = props ?? {};
|
|
252
|
+
const menuScope = useMenuScope(__scopeContextMenu, (0, import_internal.subSlot)(slot, "menu"));
|
|
253
|
+
return (0, import_octane.createElement)(MenuPrimitive.Arrow, { ...menuScope, ...arrowProps });
|
|
254
|
+
}
|
|
255
|
+
function Sub(props) {
|
|
256
|
+
const slot = (0, import_internal.S)("ContextMenu.Sub");
|
|
257
|
+
const { __scopeContextMenu, children, onOpenChange, open: openProp, defaultOpen } = props ?? {};
|
|
258
|
+
const menuScope = useMenuScope(__scopeContextMenu, (0, import_internal.subSlot)(slot, "menu"));
|
|
259
|
+
const [open, setOpen] = (0, import_useControllableState.useControllableState)(
|
|
260
|
+
{ prop: openProp, defaultProp: defaultOpen ?? false, onChange: onOpenChange },
|
|
261
|
+
(0, import_internal.subSlot)(slot, "open")
|
|
262
|
+
);
|
|
263
|
+
return (0, import_octane.createElement)(MenuPrimitive.Sub, { ...menuScope, open, onOpenChange: setOpen, children });
|
|
264
|
+
}
|
|
265
|
+
function SubTrigger(props) {
|
|
266
|
+
const slot = (0, import_internal.S)("ContextMenu.SubTrigger");
|
|
267
|
+
const { __scopeContextMenu, ...triggerItemProps } = props ?? {};
|
|
268
|
+
const menuScope = useMenuScope(__scopeContextMenu, (0, import_internal.subSlot)(slot, "menu"));
|
|
269
|
+
return (0, import_octane.createElement)(MenuPrimitive.SubTrigger, { ...menuScope, ...triggerItemProps });
|
|
270
|
+
}
|
|
271
|
+
function SubContent(props) {
|
|
272
|
+
const slot = (0, import_internal.S)("ContextMenu.SubContent");
|
|
273
|
+
const { __scopeContextMenu, ...subContentProps } = props ?? {};
|
|
274
|
+
const menuScope = useMenuScope(__scopeContextMenu, (0, import_internal.subSlot)(slot, "menu"));
|
|
275
|
+
return (0, import_octane.createElement)(MenuPrimitive.SubContent, {
|
|
276
|
+
...menuScope,
|
|
277
|
+
...subContentProps,
|
|
278
|
+
style: {
|
|
279
|
+
...props?.style,
|
|
280
|
+
// re-namespace exposed content custom properties
|
|
281
|
+
"--radix-context-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
|
|
282
|
+
"--radix-context-menu-content-available-width": "var(--radix-popper-available-width)",
|
|
283
|
+
"--radix-context-menu-content-available-height": "var(--radix-popper-available-height)",
|
|
284
|
+
"--radix-context-menu-trigger-width": "var(--radix-popper-anchor-width)",
|
|
285
|
+
"--radix-context-menu-trigger-height": "var(--radix-popper-anchor-height)"
|
|
286
|
+
}
|
|
287
|
+
});
|
|
288
|
+
}
|
|
289
|
+
function whenTouchOrPen(handler) {
|
|
290
|
+
return (event) => event.pointerType !== "mouse" ? handler(event) : void 0;
|
|
291
|
+
}
|
|
292
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
293
|
+
0 && (module.exports = {
|
|
294
|
+
Arrow,
|
|
295
|
+
CheckboxItem,
|
|
296
|
+
Content,
|
|
297
|
+
ContextMenu,
|
|
298
|
+
ContextMenuContent,
|
|
299
|
+
ContextMenuItem,
|
|
300
|
+
ContextMenuTrigger,
|
|
301
|
+
Group,
|
|
302
|
+
Item,
|
|
303
|
+
ItemIndicator,
|
|
304
|
+
Label,
|
|
305
|
+
Portal,
|
|
306
|
+
RadioGroup,
|
|
307
|
+
RadioItem,
|
|
308
|
+
Root,
|
|
309
|
+
Separator,
|
|
310
|
+
Sub,
|
|
311
|
+
SubContent,
|
|
312
|
+
SubTrigger,
|
|
313
|
+
Trigger,
|
|
314
|
+
createContextMenuScope
|
|
315
|
+
});
|
|
@@ -0,0 +1,291 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var Dialog_exports = {};
|
|
20
|
+
__export(Dialog_exports, {
|
|
21
|
+
Close: () => Close,
|
|
22
|
+
Content: () => Content,
|
|
23
|
+
Description: () => Description,
|
|
24
|
+
Dialog: () => Root,
|
|
25
|
+
Overlay: () => Overlay,
|
|
26
|
+
Portal: () => Portal,
|
|
27
|
+
Root: () => Root,
|
|
28
|
+
Title: () => Title,
|
|
29
|
+
Trigger: () => Trigger,
|
|
30
|
+
createDialogContext: () => createDialogContext,
|
|
31
|
+
createDialogScope: () => createDialogScope
|
|
32
|
+
});
|
|
33
|
+
module.exports = __toCommonJS(Dialog_exports);
|
|
34
|
+
var import_octane = require("octane");
|
|
35
|
+
var import_aria_hidden = require("aria-hidden");
|
|
36
|
+
var import_compose_event_handlers = require("./compose-event-handlers.cjs");
|
|
37
|
+
var import_compose_refs = require("./compose-refs.cjs");
|
|
38
|
+
var import_context = require("./context.cjs");
|
|
39
|
+
var import_DismissableLayer = require("./DismissableLayer.cjs");
|
|
40
|
+
var import_FocusScope = require("./FocusScope.cjs");
|
|
41
|
+
var import_focus_guards = require("./focus-guards.cjs");
|
|
42
|
+
var import_internal = require("./internal.cjs");
|
|
43
|
+
var import_Portal = require("./Portal.cjs");
|
|
44
|
+
var import_Presence = require("./Presence.cjs");
|
|
45
|
+
var import_Primitive = require("./Primitive.cjs");
|
|
46
|
+
var import_scroll_lock = require("./scroll-lock.cjs");
|
|
47
|
+
var import_useControllableState = require("./useControllableState.cjs");
|
|
48
|
+
var import_useId = require("./useId.cjs");
|
|
49
|
+
const [createDialogContext, createDialogScope] = (0, import_context.createContextScope)("Dialog");
|
|
50
|
+
const [DialogProvider, useDialogContext] = createDialogContext("Dialog");
|
|
51
|
+
const [PortalProvider, usePortalContext] = createDialogContext(
|
|
52
|
+
"DialogPortal",
|
|
53
|
+
{ forceMount: void 0 }
|
|
54
|
+
);
|
|
55
|
+
function getState(open) {
|
|
56
|
+
return open ? "open" : "closed";
|
|
57
|
+
}
|
|
58
|
+
function Root(props) {
|
|
59
|
+
const slot = (0, import_internal.S)("Dialog.Root");
|
|
60
|
+
const {
|
|
61
|
+
__scopeDialog,
|
|
62
|
+
children,
|
|
63
|
+
open: openProp,
|
|
64
|
+
defaultOpen,
|
|
65
|
+
onOpenChange,
|
|
66
|
+
modal = true
|
|
67
|
+
} = props ?? {};
|
|
68
|
+
const triggerRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "trigger"));
|
|
69
|
+
const contentRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "content"));
|
|
70
|
+
const [open, setOpen] = (0, import_useControllableState.useControllableState)(
|
|
71
|
+
{ prop: openProp, defaultProp: defaultOpen ?? false, onChange: onOpenChange },
|
|
72
|
+
(0, import_internal.subSlot)(slot, "open")
|
|
73
|
+
);
|
|
74
|
+
return (0, import_octane.createElement)(DialogProvider, {
|
|
75
|
+
scope: __scopeDialog,
|
|
76
|
+
triggerRef,
|
|
77
|
+
contentRef,
|
|
78
|
+
contentId: (0, import_useId.useId)((0, import_internal.subSlot)(slot, "contentId")),
|
|
79
|
+
titleId: (0, import_useId.useId)((0, import_internal.subSlot)(slot, "titleId")),
|
|
80
|
+
descriptionId: (0, import_useId.useId)((0, import_internal.subSlot)(slot, "descriptionId")),
|
|
81
|
+
open,
|
|
82
|
+
onOpenChange: setOpen,
|
|
83
|
+
onOpenToggle: (0, import_octane.useCallback)(() => setOpen((prev) => !prev), [setOpen], (0, import_internal.subSlot)(slot, "toggle")),
|
|
84
|
+
modal,
|
|
85
|
+
children
|
|
86
|
+
});
|
|
87
|
+
}
|
|
88
|
+
function Trigger(props) {
|
|
89
|
+
const slot = (0, import_internal.S)("Dialog.Trigger");
|
|
90
|
+
const { __scopeDialog, ref: forwardedRef, ...triggerProps } = props ?? {};
|
|
91
|
+
const context = useDialogContext("DialogTrigger", __scopeDialog);
|
|
92
|
+
const composedTriggerRef = (0, import_compose_refs.useComposedRefs)(
|
|
93
|
+
forwardedRef,
|
|
94
|
+
context.triggerRef,
|
|
95
|
+
(0, import_internal.subSlot)(slot, "refs")
|
|
96
|
+
);
|
|
97
|
+
return (0, import_octane.createElement)(import_Primitive.Primitive.button, {
|
|
98
|
+
type: "button",
|
|
99
|
+
"aria-haspopup": "dialog",
|
|
100
|
+
"aria-expanded": context.open,
|
|
101
|
+
"aria-controls": context.open ? context.contentId : void 0,
|
|
102
|
+
"data-state": getState(context.open),
|
|
103
|
+
...triggerProps,
|
|
104
|
+
ref: composedTriggerRef,
|
|
105
|
+
onClick: (0, import_compose_event_handlers.composeEventHandlers)(props?.onClick, context.onOpenToggle)
|
|
106
|
+
});
|
|
107
|
+
}
|
|
108
|
+
function Portal(props) {
|
|
109
|
+
const { __scopeDialog, forceMount, children, container } = props ?? {};
|
|
110
|
+
const context = useDialogContext("DialogPortal", __scopeDialog);
|
|
111
|
+
const wrap = (child) => (0, import_octane.createElement)(import_Presence.Presence, {
|
|
112
|
+
present: forceMount || context.open,
|
|
113
|
+
children: (0, import_octane.createElement)(import_Portal.Portal, { asChild: true, container, children: child })
|
|
114
|
+
});
|
|
115
|
+
const mapped = typeof children === "function" ? (0, import_octane.createElement)(import_Presence.Presence, {
|
|
116
|
+
present: forceMount || context.open,
|
|
117
|
+
children: (0, import_octane.createElement)(import_Portal.Portal, { container, children })
|
|
118
|
+
}) : import_octane.Children.map(children, wrap);
|
|
119
|
+
return (0, import_octane.createElement)(PortalProvider, { scope: __scopeDialog, forceMount, children: mapped });
|
|
120
|
+
}
|
|
121
|
+
function Overlay(props) {
|
|
122
|
+
const portalContext = usePortalContext("DialogOverlay", props?.__scopeDialog);
|
|
123
|
+
const { forceMount = portalContext.forceMount, ...overlayProps } = props ?? {};
|
|
124
|
+
const context = useDialogContext("DialogOverlay", props?.__scopeDialog);
|
|
125
|
+
return context.modal ? (0, import_octane.createElement)(import_Presence.Presence, {
|
|
126
|
+
present: forceMount || context.open,
|
|
127
|
+
children: (0, import_octane.createElement)(OverlayImpl, overlayProps)
|
|
128
|
+
}) : null;
|
|
129
|
+
}
|
|
130
|
+
function OverlayImpl(props) {
|
|
131
|
+
const slot = (0, import_internal.S)("Dialog.OverlayImpl");
|
|
132
|
+
const { __scopeDialog, ref: forwardedRef, ...overlayProps } = props;
|
|
133
|
+
const context = useDialogContext("DialogOverlay", __scopeDialog);
|
|
134
|
+
const registerDismissableSurface = (0, import_DismissableLayer.useDismissableLayerSurface)((0, import_internal.subSlot)(slot, "surface"));
|
|
135
|
+
const composedRefs = (0, import_compose_refs.useComposedRefs)(
|
|
136
|
+
forwardedRef,
|
|
137
|
+
registerDismissableSurface,
|
|
138
|
+
(0, import_internal.subSlot)(slot, "refs")
|
|
139
|
+
);
|
|
140
|
+
(0, import_scroll_lock.useScrollLock)(context.open, (0, import_internal.subSlot)(slot, "lock"));
|
|
141
|
+
return (0, import_octane.createElement)(import_Primitive.Primitive.div, {
|
|
142
|
+
"data-state": getState(context.open),
|
|
143
|
+
...overlayProps,
|
|
144
|
+
ref: composedRefs,
|
|
145
|
+
// Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
|
|
146
|
+
// ie. when `Overlay` and `Content` are siblings.
|
|
147
|
+
style: { pointerEvents: "auto", ...overlayProps.style }
|
|
148
|
+
});
|
|
149
|
+
}
|
|
150
|
+
function Content(props) {
|
|
151
|
+
const portalContext = usePortalContext("DialogContent", props?.__scopeDialog);
|
|
152
|
+
const { forceMount = portalContext.forceMount, ...contentProps } = props ?? {};
|
|
153
|
+
const context = useDialogContext("DialogContent", props?.__scopeDialog);
|
|
154
|
+
return (0, import_octane.createElement)(import_Presence.Presence, {
|
|
155
|
+
present: forceMount || context.open,
|
|
156
|
+
children: context.modal ? (0, import_octane.createElement)(ContentModal, contentProps) : (0, import_octane.createElement)(ContentNonModal, contentProps)
|
|
157
|
+
});
|
|
158
|
+
}
|
|
159
|
+
function ContentModal(props) {
|
|
160
|
+
const slot = (0, import_internal.S)("Dialog.ContentModal");
|
|
161
|
+
const { ref: forwardedRef, ...rest } = props;
|
|
162
|
+
const context = useDialogContext("DialogContent", props.__scopeDialog);
|
|
163
|
+
const contentRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "ref"));
|
|
164
|
+
const composedRefs = (0, import_compose_refs.useComposedRefs)(
|
|
165
|
+
forwardedRef,
|
|
166
|
+
context.contentRef,
|
|
167
|
+
contentRef,
|
|
168
|
+
(0, import_internal.subSlot)(slot, "refs")
|
|
169
|
+
);
|
|
170
|
+
(0, import_octane.useEffect)(
|
|
171
|
+
() => {
|
|
172
|
+
const content = contentRef.current;
|
|
173
|
+
if (content) return (0, import_aria_hidden.hideOthers)(content);
|
|
174
|
+
},
|
|
175
|
+
[],
|
|
176
|
+
(0, import_internal.subSlot)(slot, "e:hide")
|
|
177
|
+
);
|
|
178
|
+
return (0, import_octane.createElement)(ContentImpl, {
|
|
179
|
+
...rest,
|
|
180
|
+
__scopeDialog: props.__scopeDialog,
|
|
181
|
+
ref: composedRefs,
|
|
182
|
+
trapFocus: context.open,
|
|
183
|
+
disableOutsidePointerEvents: context.open,
|
|
184
|
+
onCloseAutoFocus: (0, import_compose_event_handlers.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
|
|
185
|
+
event.preventDefault();
|
|
186
|
+
context.triggerRef.current?.focus();
|
|
187
|
+
}),
|
|
188
|
+
onPointerDownOutside: (0, import_compose_event_handlers.composeEventHandlers)(props.onPointerDownOutside, (event) => {
|
|
189
|
+
const originalEvent = event.detail.originalEvent;
|
|
190
|
+
const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
|
|
191
|
+
const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
|
|
192
|
+
if (isRightClick) event.preventDefault();
|
|
193
|
+
}),
|
|
194
|
+
// When focus is trapped, a `focusout` event may still happen — prevent dismissing.
|
|
195
|
+
onFocusOutside: (0, import_compose_event_handlers.composeEventHandlers)(
|
|
196
|
+
props.onFocusOutside,
|
|
197
|
+
(event) => event.preventDefault()
|
|
198
|
+
)
|
|
199
|
+
});
|
|
200
|
+
}
|
|
201
|
+
function ContentNonModal(props) {
|
|
202
|
+
const slot = (0, import_internal.S)("Dialog.ContentNonModal");
|
|
203
|
+
const context = useDialogContext("DialogContent", props.__scopeDialog);
|
|
204
|
+
const hasInteractedOutsideRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "interacted"));
|
|
205
|
+
const hasPointerDownOutsideRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "pointer"));
|
|
206
|
+
return (0, import_octane.createElement)(ContentImpl, {
|
|
207
|
+
...props,
|
|
208
|
+
trapFocus: false,
|
|
209
|
+
disableOutsidePointerEvents: false,
|
|
210
|
+
onCloseAutoFocus: (event) => {
|
|
211
|
+
props.onCloseAutoFocus?.(event);
|
|
212
|
+
if (!event.defaultPrevented) {
|
|
213
|
+
if (!hasInteractedOutsideRef.current) context.triggerRef.current?.focus();
|
|
214
|
+
event.preventDefault();
|
|
215
|
+
}
|
|
216
|
+
hasInteractedOutsideRef.current = false;
|
|
217
|
+
hasPointerDownOutsideRef.current = false;
|
|
218
|
+
},
|
|
219
|
+
onInteractOutside: (event) => {
|
|
220
|
+
props.onInteractOutside?.(event);
|
|
221
|
+
if (!event.defaultPrevented) {
|
|
222
|
+
hasInteractedOutsideRef.current = true;
|
|
223
|
+
if (event.detail.originalEvent.type === "pointerdown") {
|
|
224
|
+
hasPointerDownOutsideRef.current = true;
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
const target = event.target;
|
|
228
|
+
const targetIsTrigger = context.triggerRef.current?.contains(target);
|
|
229
|
+
if (targetIsTrigger) event.preventDefault();
|
|
230
|
+
if (event.detail.originalEvent.type === "focusin" && hasPointerDownOutsideRef.current) {
|
|
231
|
+
event.preventDefault();
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
});
|
|
235
|
+
}
|
|
236
|
+
function ContentImpl(props) {
|
|
237
|
+
const slot = (0, import_internal.S)("Dialog.ContentImpl");
|
|
238
|
+
const { __scopeDialog, trapFocus, onOpenAutoFocus, onCloseAutoFocus, ...contentProps } = props;
|
|
239
|
+
const context = useDialogContext("DialogContent", __scopeDialog);
|
|
240
|
+
(0, import_focus_guards.useFocusGuards)((0, import_internal.subSlot)(slot, "guards"));
|
|
241
|
+
return (0, import_octane.createElement)(import_FocusScope.FocusScope, {
|
|
242
|
+
asChild: true,
|
|
243
|
+
loop: true,
|
|
244
|
+
trapped: trapFocus,
|
|
245
|
+
onMountAutoFocus: onOpenAutoFocus,
|
|
246
|
+
onUnmountAutoFocus: onCloseAutoFocus,
|
|
247
|
+
children: (0, import_octane.createElement)(import_DismissableLayer.DismissableLayer, {
|
|
248
|
+
role: "dialog",
|
|
249
|
+
id: context.contentId,
|
|
250
|
+
"aria-describedby": context.descriptionId,
|
|
251
|
+
"aria-labelledby": context.titleId,
|
|
252
|
+
"data-state": getState(context.open),
|
|
253
|
+
...contentProps,
|
|
254
|
+
deferPointerDownOutside: true,
|
|
255
|
+
onDismiss: () => context.onOpenChange(false)
|
|
256
|
+
})
|
|
257
|
+
});
|
|
258
|
+
}
|
|
259
|
+
function Title(props) {
|
|
260
|
+
const { __scopeDialog, ...titleProps } = props ?? {};
|
|
261
|
+
const context = useDialogContext("DialogTitle", __scopeDialog);
|
|
262
|
+
return (0, import_octane.createElement)(import_Primitive.Primitive.h2, { id: context.titleId, ...titleProps });
|
|
263
|
+
}
|
|
264
|
+
function Description(props) {
|
|
265
|
+
const { __scopeDialog, ...descriptionProps } = props ?? {};
|
|
266
|
+
const context = useDialogContext("DialogDescription", __scopeDialog);
|
|
267
|
+
return (0, import_octane.createElement)(import_Primitive.Primitive.p, { id: context.descriptionId, ...descriptionProps });
|
|
268
|
+
}
|
|
269
|
+
function Close(props) {
|
|
270
|
+
const { __scopeDialog, ...closeProps } = props ?? {};
|
|
271
|
+
const context = useDialogContext("DialogClose", __scopeDialog);
|
|
272
|
+
return (0, import_octane.createElement)(import_Primitive.Primitive.button, {
|
|
273
|
+
type: "button",
|
|
274
|
+
...closeProps,
|
|
275
|
+
onClick: (0, import_compose_event_handlers.composeEventHandlers)(props?.onClick, () => context.onOpenChange(false))
|
|
276
|
+
});
|
|
277
|
+
}
|
|
278
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
279
|
+
0 && (module.exports = {
|
|
280
|
+
Close,
|
|
281
|
+
Content,
|
|
282
|
+
Description,
|
|
283
|
+
Dialog,
|
|
284
|
+
Overlay,
|
|
285
|
+
Portal,
|
|
286
|
+
Root,
|
|
287
|
+
Title,
|
|
288
|
+
Trigger,
|
|
289
|
+
createDialogContext,
|
|
290
|
+
createDialogScope
|
|
291
|
+
});
|